font weight options

public/index.css

@@ -59,7 +59,7 @@ body {
 .catalog {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
-	gap: 2rem;
+	gap: 1rem;
 }
 
 .font-card {
@@ -79,6 +79,55 @@ body {
 	margin-bottom: 0.5rem;
 }
 
+.font-card__controls {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+
+.font-card__select {
+	height: 2.25rem;
+	border: 1px solid var(--border-color);
+	background: transparent;
+	color: var(--fg-color);
+	padding: 0 0.75rem;
+	font-size: 0.85rem;
+	font-family: inherit;
+	cursor: pointer;
+}
+
+.font-card__range {
+	width: 160px;
+	accent-color: var(--accent-color);
+	cursor: pointer;
+	height: 4px;
+}
+
+.font-card__range::-webkit-slider-runnable-track {
+	height: 4px;
+}
+
+.font-card__range::-webkit-slider-thumb {
+	margin-top: -6px;
+	transform: scale(0.75);
+}
+
+.font-card__range::-moz-range-track {
+	height: 4px;
+}
+
+.font-card__range::-moz-range-thumb {
+	margin-top: -6px;
+	transform: scale(0.75);
+}
+
+.font-card__value {
+	min-width: 2.5rem;
+	text-align: right;
+	font-size: 0.85rem;
+	font-weight: 700;
+}
+
 .font-card__title {
 	font-size: 1.25rem;
 	font-weight: bold;

public/index.html

@@ -63,16 +63,113 @@
         }
       };
 
+      const parseWeights = (value) => {
+        if (!value) {
+          return [];
+        }
+        return value
+          .split(",")
+          .map((entry) => Number.parseInt(entry, 10))
+          .filter((weight) => Number.isFinite(weight))
+          .sort((a, b) => a - b);
+      };
+
       fontCards.forEach((card) => {
         const importUrl = card.getAttribute("data-import-url");
         const importSnippet = buildImportSnippet(importUrl);
         const importOutput = card.querySelector("[data-import]");
         const copyButton = card.querySelector("[data-copy]");
+        const weightSelect = card.querySelector("[data-weight-select]");
+        const weightRange = card.querySelector("[data-weight-range]");
+        const demoText = card.querySelector("[data-demo]");
+        const weightValue = card.querySelector("[data-weight-value]");
+        const weights = parseWeights(card.getAttribute("data-weights"));
+        const defaultWeight = Number.parseInt(
+          card.getAttribute("data-default-weight") ?? "",
+          10,
+        );
+        const weightMin = Number.parseInt(
+          card.getAttribute("data-weight-min") ?? "",
+          10,
+        );
+        const weightMax = Number.parseInt(
+          card.getAttribute("data-weight-max") ?? "",
+          10,
+        );
+        const weightStep = Number.parseInt(
+          card.getAttribute("data-weight-step") ?? "10",
+          10,
+        );
 
         if (importOutput) {
           importOutput.textContent = importSnippet;
         }
 
+        if (!weightRange && !weightSelect) {
+          if (demoText && Number.isFinite(defaultWeight)) {
+            demoText.style.fontWeight = String(defaultWeight);
+          }
+        } else if (weightRange && Number.isFinite(weightMin) && Number.isFinite(weightMax)) {
+          const step = Number.isFinite(weightStep) && weightStep > 0 ? weightStep : 10;
+          const midpoint = Math.round((weightMin + weightMax) / 2);
+          const initialWeight = Number.isFinite(defaultWeight)
+            ? defaultWeight
+            : midpoint;
+          const normalizedWeight = Math.min(
+            weightMax,
+            Math.max(
+              weightMin,
+              Math.round((initialWeight - weightMin) / step) * step + weightMin,
+            ),
+          );
+          weightRange.min = String(weightMin);
+          weightRange.max = String(weightMax);
+          weightRange.step = String(step);
+          weightRange.value = String(normalizedWeight);
+          if (weightValue) {
+            weightValue.textContent = String(normalizedWeight);
+          }
+          if (demoText) {
+            demoText.style.fontWeight = String(normalizedWeight);
+          }
+          weightRange.addEventListener("input", (event) => {
+            const value = Number.parseInt(event.target.value, 10);
+            if (!Number.isFinite(value)) {
+              return;
+            }
+            if (weightValue) {
+              weightValue.textContent = String(value);
+            }
+            if (demoText) {
+              demoText.style.fontWeight = String(value);
+            }
+          });
+        } else if (weightSelect && weights.length > 0) {
+          weightSelect.innerHTML = "";
+          weights.forEach((weight) => {
+            const option = document.createElement("option");
+            option.value = String(weight);
+            option.textContent = String(weight);
+            weightSelect.appendChild(option);
+          });
+          const initialWeight = Number.isFinite(defaultWeight)
+            ? defaultWeight
+            : weights[Math.floor((weights.length - 1) / 2)];
+          weightSelect.value = String(initialWeight);
+          if (demoText) {
+            demoText.style.fontWeight = String(initialWeight);
+          }
+          weightSelect.addEventListener("change", (event) => {
+            const value = Number.parseInt(event.target.value, 10);
+            if (!Number.isFinite(value)) {
+              return;
+            }
+            if (demoText) {
+              demoText.style.fontWeight = String(value);
+            }
+          });
+        }
+
         if (copyButton) {
           copyButton.addEventListener("click", async () => {
             if (!importSnippet) {