small ui improvements

.gitignore

@@ -21,4 +21,5 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
-/src/pages/playground.html
+/src/pages/playground.html
+/src/pages/features.html

src/pages/_includes/cards/sign-in.html

@@ -4,7 +4,7 @@
 
 		<div class="mb-3">
 			<label class="form-label">Email address</label>
-			<input type="email" class="form-control" placeholder="Enter email">
+			<input type="email" class="form-control" placeholder="Enter email" autocomplete="off">
 		</div>
 		<div class="mb-2">
 			<label class="form-label">

src/pages/_includes/cards/small-stats.html

@@ -36,7 +36,6 @@
 
 			{% if include.chart-data and chart-position=="right" %}
 			<div class="col-auto">
-				{{ include.id }}
 				{% include ui/chart-sparkline.html id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
 			</div>
 			{% endif %}

src/pages/_includes/parts/charts/activity.html

@@ -0,0 +1,38 @@
+<div class="card">
+	<div class="card-body">
+		<div class="d-flex">
+			<h3 class="card-title">Active users</h3>
+			<div class="ms-auto">
+				{% include parts/dropdown/days.html %}
+			</div>
+		</div>
+
+		<div class="row">
+			<div class="col">
+				{% include ui/chart.html chart-id="active-users-2" %}
+			</div>
+			<div class="col-md-auto">
+				<div class="divide-y divide-y-fill">
+					<div class="px-3">
+						<div class="text-muted">
+							<span class="status-dot bg-primary"></span> Mobile
+						</div>
+						<div class="h2">11,425</div>
+					</div>
+					<div class="px-3">
+						<div class="text-muted">
+							<span class="status-dot bg-azure"></span> Desktop
+						</div>
+						<div class="h2">6,458</div>
+					</div>
+					<div class="px-3">
+						<div class="text-muted">
+							<span class="status-dot bg-green"></span> Tablet
+						</div>
+						<div class="h2">3,985</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/pages/_includes/parts/form/input-color.html

@@ -1,4 +1,8 @@
+{% assign colors = '' | split: ',' %}
+{% unless include.hide-black-white %}
 {% assign colors = 'dark,white' | split: ',' %}
+{% endunless %}
+
 {% for color in site.colors limit: 9 %}
 {% assign colors = colors | push: color[0] %}
 {% endfor %}

src/pages/_includes/parts/form/input-image-people.html

@@ -1,14 +1,16 @@
 {% assign limit = include.limit | default: 9 %}
+{% assign offset = include.offset | default: 8 %}
+{% assign avatar-size = include.avatar-size | default: "md" %}
 <div class="mb-3">
 	<label class="form-label">Person Check</label>
 	<div class="row g-2">
-		{% for person in site.data.people limit: limit offset: 8 %}
+		{% for person in site.data.people limit: limit offset: offset %}
 		<div class="col-auto">
 			<label class="form-imagecheck mb-2">
 				<input name="form-imagecheck" type="checkbox" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4  or forloop.index == 7 %} checked{% endif %}/>
 				<span class="form-imagecheck-figure">
 					<span class="form-imagecheck-image">
-						{% include ui/avatar.html size="md" person=person %}
+						{% include ui/avatar.html size=avatar-size person=person %}
 					</span>
 				</span>
 			</label>

src/pages/charts.html

@@ -7,44 +7,7 @@ libs: apexcharts
 
 <div class="row row-cards">
 	<div class="col-6">
-		<div class="card">
+		{% include parts/charts/activity.html %}
-			<div class="card-body">
-				<div class="d-flex">
-					<h3 class="card-title">Active users</h3>
-					<div class="ms-auto">
-						{% include parts/dropdown/days.html %}
-					</div>
-				</div>
-
-				<div class="row">
-					<div class="col">
-						{% include ui/chart.html chart-id="active-users-2" %}
-					</div>
-					<div class="col-md-auto">
-						<div class="divide-y divide-y-fill">
-							<div class="px-3">
-								<div class="text-muted">
-									<span class="status-dot bg-primary"></span> Mobile
-								</div>
-								<div class="h2">11,425</div>
-							</div>
-							<div class="px-3">
-								<div class="text-muted">
-									<span class="status-dot bg-azure"></span> Desktop
-								</div>
-								<div class="h2">6,458</div>
-							</div>
-							<div class="px-3">
-								<div class="text-muted">
-									<span class="status-dot bg-green"></span> Tablet
-								</div>
-								<div class="h2">3,985</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
 	</div>
 
 	<div class="col-4">