@jjlmoya/utils-textiles 1.16.0 → 1.18.0

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@jjlmoya/utils-textiles",
-    "version": "1.16.0",
+    "version": "1.18.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
     "exports": {
         ".": "./src/index.ts",
         "./data": "./src/data.ts",
-        "./entries": "./src/entries.ts"
+        "./entries": "./src/entries.ts",
+        "./runtime/*": "./src/tool/*/index.ts",
+        "./category-seo": "./src/category/seo.astro"
     },
     "files": [
         "src",

package/src/tests/pagespeed_best_practices.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, it } from 'vitest';
+import { readdirSync, readFileSync } from 'fs';
+import { join, relative } from 'path';
+import { ALL_TOOLS } from '../tools';
+import type { SEOSection, ToolLocaleContent } from '../types';
+
+const srcDir = join(process.cwd(), 'src');
+const toolDir = join(srcDir, 'tool');
+const geometryReads = [
+  'offsetWidth',
+  'offsetHeight',
+  'offsetTop',
+  'offsetLeft',
+  'clientWidth',
+  'clientHeight',
+  'clientTop',
+  'clientLeft',
+  'scrollWidth',
+  'scrollHeight',
+  'scrollTop',
+  'scrollLeft',
+  'getBoundingClientRect',
+  'getClientRects',
+  'computedStyle',
+  'getComputedStyle',
+];
+const domWrites = [
+  '.style.',
+  '.classList.add',
+  '.classList.remove',
+  '.classList.toggle',
+  '.appendChild',
+  '.insertBefore',
+  '.prepend',
+  '.append',
+  '.remove',
+  '.innerHTML',
+  '.textContent',
+  '.setAttribute',
+];
+
+function findFiles(dir: string, extensions: string[]): string[] {
+  const files: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...findFiles(fullPath, extensions));
+    else if (extensions.some((extension) => entry.name.endsWith(extension))) files.push(fullPath);
+  }
+  return files;
+}
+
+function relativePath(file: string): string {
+  return relative(process.cwd(), file).replace(/\\/g, '/');
+}
+
+function findFormControls(content: string, tagName: 'input' | 'select'): RegExpMatchArray[] {
+  return Array.from(content.matchAll(new RegExp(`<${tagName}\\b[^>]*>`, 'gi')));
+}
+
+function attrValue(tag: string, attr: string): string | null {
+  const match = tag.match(new RegExp(`\\b${attr}\\s*=\\s*(?:"([^"]+)"|'([^']+)'|\\{([^}]+)\\})`, 'i'));
+  return match?.[1] ?? match?.[2] ?? match?.[3] ?? null;
+}
+
+function booleanAttr(tag: string, attr: string): boolean {
+  return new RegExp(`\\b${attr}\\b`, 'i').test(tag);
+}
+
+function controlStartIndex(content: string, tag: RegExpMatchArray): number {
+  return tag.index ?? content.indexOf(tag[0]);
+}
+
+function hasWrappingLabel(content: string, tag: RegExpMatchArray): boolean {
+  const index = controlStartIndex(content, tag);
+  const before = content.slice(0, index);
+  const labelOpen = before.lastIndexOf('<label');
+  const labelClose = before.lastIndexOf('</label>');
+  const nextLabelClose = content.indexOf('</label>', index + tag[0].length);
+  return labelOpen > labelClose && nextLabelClose !== -1;
+}
+
+function hasAccessibleName(content: string, tag: RegExpMatchArray): boolean {
+  const source = tag[0];
+  if (attrValue(source, 'aria-label')) return true;
+  if (attrValue(source, 'aria-labelledby')) return true;
+  const id = attrValue(source, 'id');
+  if (id && hasExplicitLabel(content, id)) return true;
+  return hasWrappingLabel(content, tag);
+}
+
+function isVisuallyHiddenFileInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  const attributes = `${attrValue(tag, 'style') ?? ''} ${attrValue(tag, 'class') ?? ''}`.toLowerCase();
+  const hiddenPatterns = ['display:none', 'display: none', 'file-input'];
+  return type === 'file' && hiddenPatterns.some((pattern) => attributes.includes(pattern));
+}
+
+function isIgnoredInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  return ['hidden', 'button', 'submit', 'reset'].includes(type) || booleanAttr(tag, 'aria-hidden') || isVisuallyHiddenFileInput(tag);
+}
+
+function controlFailures(content: string, tagName: 'input' | 'select'): string[] {
+  return findFormControls(content, tagName)
+    .filter((tag) => tagName !== 'input' || !isIgnoredInput(tag[0]))
+    .filter((tag) => !hasAccessibleName(content, tag))
+    .map((tag) => tag[0]);
+}
+
+function explicitLabelMessage(tagName: string, path: string, failures: string[]): string {
+  return `${tagName} controls without label, wrapping label, aria-label or aria-labelledby in ${path}:\n${failures.join('\n')}`;
+}
+
+function hasExplicitLabel(content: string, id: string): boolean {
+  const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return (
+    new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*["']${escapedId}["'][^>]*>`, 'i').test(content)
+    || new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*\\{${escapedId}\\}[^>]*>`, 'i').test(content)
+  );
+}
+
+function headingLevels(sections: SEOSection[]): number[] {
+  return sections
+    .filter((section) => section.type === 'title')
+    .map((section) => Number('level' in section ? section.level : 0))
+    .filter((level) => Number.isInteger(level) && level > 0);
+}
+
+function findHeadingLevelJumps(levels: number[]): string[] {
+  const failures: string[] = [];
+  levels.forEach((level, index) => {
+    const previous = index === 0 ? 1 : levels[index - 1];
+    if (previous && level > previous + 1) {
+      failures.push(`h${previous} -> h${level}`);
+    }
+  });
+  return failures;
+}
+
+function hasDomWriteBeforeGeometryRead(content: string): boolean {
+  const normalized = content.replace(/\s+/g, ' ');
+  return domWrites.some((write) => {
+    const writeIndex = normalized.indexOf(write);
+    if (writeIndex === -1) return false;
+    return geometryReads.some((read) => normalized.indexOf(read, writeIndex + write.length) !== -1);
+  });
+}
+
+describe('PageSpeed best-practice guards', () => {
+  const astroToolFiles = findFiles(toolDir, ['.astro']);
+  const scriptFiles = findFiles(toolDir, ['.astro', '.ts', '.js']);
+
+  astroToolFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} labels every input with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'input');
+
+      expect(failures, explicitLabelMessage('Input', displayPath, failures)).toEqual([]);
+    });
+
+    it(`${displayPath} labels every select with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'select');
+
+      expect(failures, explicitLabelMessage('Select', displayPath, failures)).toEqual([]);
+    });
+  });
+
+  ALL_TOOLS.forEach((tool) => {
+    Object.entries(tool.entry.i18n).forEach(([locale, loader]) => {
+      it(`${tool.entry.id}/${locale} keeps SEO headings sequential`, async () => {
+        if (!loader) return;
+        const content = (await loader()) as ToolLocaleContent;
+        const levels = headingLevels(content.seo);
+        const failures = findHeadingLevelJumps(levels);
+
+        expect(
+          failures,
+          `SEO headings in ${tool.entry.id}/${locale} skip levels: ${failures.join(', ')}`,
+        ).toEqual([]);
+      });
+    });
+  });
+
+  scriptFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} avoids static forced-reflow patterns`, () => {
+      const content = readFileSync(file, 'utf-8');
+      expect(
+        hasDomWriteBeforeGeometryRead(content),
+        `${displayPath} appears to read layout geometry after DOM/style mutations. Split writes and reads across frames or measure before mutating.`,
+      ).toBe(false);
+    });
+  });
+});

package/src/tool/fabricProjectCalculator/component.astro

@@ -9,13 +9,13 @@ const { ui = {} } = Astro.props;
 const calcUI = ui as FabricProjectCalculatorUI;
 ---
 
-<div class="fabric-calculator-card" id="fabric-calc-app">
-  <div class="fabric-sidebar">
-    <div class="config-group">
+<div class="fpc-root" id="fabric-calc-app">
+  <div class="fpc-controls">
+    <div class="fpc-config">
       <h3>{calcUI.sectionProject}</h3>
-      <div class="fabric-field">
-        <label>{calcUI.labelGarmentType}</label>
-        <select id="garment-type" class="fabric-select">
+      <div class="fpc-field">
+        <label for="garment-type">{calcUI.labelGarmentType}</label>
+        <select id="garment-type" class="fpc-select">
           <option value="skirt">{calcUI.garmentSkirt}</option>
           <option value="pants">{calcUI.garmentPants}</option>
           <option value="dress">{calcUI.garmentDress}</option>
@@ -24,70 +24,70 @@ const calcUI = ui as FabricProjectCalculatorUI;
           <option value="tote">{calcUI.garmentTote}</option>
         </select>
       </div>
-      <div class="fabric-field">
+      <div class="fpc-field">
         <label>{calcUI.labelSize}</label>
-        <div class="preset-group" id="size-presets">
-          <button class="preset-pill" data-val="xs_core">{calcUI.sizeXS}</button>
-          <button class="preset-pill active" data-val="m_core">{calcUI.sizeM}</button>
-          <button class="preset-pill" data-val="xl_core">{calcUI.sizeXL}</button>
+        <div class="fpc-size-options" id="size-presets">
+          <button class="fpc-size-option" data-val="xs_core">{calcUI.sizeXS}</button>
+          <button class="fpc-size-option active" data-val="m_core">{calcUI.sizeM}</button>
+          <button class="fpc-size-option" data-val="xl_core">{calcUI.sizeXL}</button>
         </div>
       </div>
     </div>
 
-    <div class="config-group">
+    <div class="fpc-config">
       <h3>{calcUI.sectionMaterial}</h3>
-      <div class="fabric-field">
-        <label>{calcUI.labelFabricWidth}</label>
-        <select id="fabric-width" class="fabric-select">
+      <div class="fpc-field">
+        <label for="fabric-width">{calcUI.labelFabricWidth}</label>
+        <select id="fabric-width" class="fpc-select">
           <option value="90">{calcUI.width90}</option>
           <option value="115">{calcUI.width115}</option>
           <option value="140" selected>{calcUI.width140}</option>
           <option value="150">{calcUI.width150}</option>
         </select>
       </div>
-      <div class="fabric-field">
-        <label>{calcUI.labelSeamAllowance}</label>
-        <div class="shop-stepper">
-          <button class="step-btn" id="sub-allow">−</button>
-          <input type="number" id="seam-allowance" class="fabric-input" value="1.5" step="0.5" min="0" max="5" />
-          <button class="step-btn" id="add-allow">+</button>
+      <div class="fpc-field">
+        <label for="seam-allowance">{calcUI.labelSeamAllowance}</label>
+        <div class="fpc-stepper">
+          <button class="fpc-step-button" id="sub-allow">−</button>
+          <input type="number" id="seam-allowance" class="fpc-input" value="1.5" step="0.5" min="0" max="5" />
+          <button class="fpc-step-button" id="add-allow">+</button>
         </div>
       </div>
     </div>
 
-    <div class="btn-actions">
-      <button id="btn-clear-f" class="f-btn f-seco">{calcUI.btnClear}</button>
-      <button id="btn-share-f" class="f-btn f-prim">{calcUI.btnShare}</button>
+    <div class="fpc-actions">
+      <button id="btn-clear-f" class="fpc-action fpc-action-secondary">{calcUI.btnClear}</button>
+      <button id="btn-share-f" class="fpc-action fpc-action-primary">{calcUI.btnShare}</button>
     </div>
   </div>
 
-  <div class="fabric-main">
-    <div id="warning-msg" class="warning-banner"></div>
+  <div class="fpc-main">
+    <div id="warning-msg" class="fpc-warning"></div>
 
-    <section class="magic-result-area">
-      <span class="result-lbl">{calcUI.resultLabel}</span>
-      <div class="val"><span id="main-meters">1.40</span><span class="unit">{calcUI.resultUnit}</span></div>
-      <div class="advice-tag" id="shop-advice"></div>
+    <section class="fpc-result">
+      <span class="fpc-result-label">{calcUI.resultLabel}</span>
+      <div class="fpc-result-value"><span id="main-meters">1.40</span><span class="fpc-result-unit">{calcUI.resultUnit}</span></div>
+      <div class="fpc-advice" id="shop-advice"></div>
     </section>
 
-    <div class="layout-container">
-      <div class="canvas-wrapper">
-        <div class="scheme-area">
-          <div class="ruler" id="ruler-col"></div>
-          <div id="fabric-board-box" class="fabric-board">
-            <div class="board-empty-state">{calcUI.boardEmpty}</div>
+    <div class="fpc-layout">
+      <div class="fpc-canvas">
+        <div class="fpc-scheme">
+          <div class="fpc-ruler" id="ruler-col"></div>
+          <div id="fabric-board-box" class="fpc-board">
+            <div class="fpc-board-empty">{calcUI.boardEmpty}</div>
           </div>
         </div>
-        <div class="scheme-info" id="board-desc"></div>
+        <div class="fpc-scheme-info" id="board-desc"></div>
       </div>
     </div>
 
-    <section class="merch-section">
-      <div class="merch-header">
-        <h3 class="merch-title">{calcUI.merchTitle}</h3>
-        <button id="copy-list-btn" class="copy-list-btn">{calcUI.btnCopyList}</button>
+    <section class="fpc-merch">
+      <div class="fpc-merch-header">
+        <h3 class="fpc-merch-title">{calcUI.merchTitle}</h3>
+        <button id="copy-list-btn" class="fpc-copy-button">{calcUI.btnCopyList}</button>
       </div>
-      <ul id="check-list" class="merceria-checklist"></ul>
+      <ul id="check-list" class="fpc-checklist"></ul>
     </section>
   </div>
 </div>
@@ -157,17 +157,17 @@ const calcUI = ui as FabricProjectCalculatorUI;
 
   function buildPieceEl(nameKey: string, w: number, fold: boolean, col: number): HTMLDivElement {
     const el = document.createElement('div');
-    el.className = `piece-block${fold ? ' piece-fold' : ''}`;
+    el.className = `fpc-piece${fold ? ' fpc-piece-fold' : ''}`;
     el.style.width = `${w * 100}%`;
     el.style.background = PIECE_COLORS[col];
     el.style.borderColor = PIECE_BORDERS[col];
     const nameEl = document.createElement('span');
-    nameEl.className = 'piece-name';
+    nameEl.className = 'fpc-piece-name';
     nameEl.textContent = window.__toolUI.pieceNames[nameKey as PieceNameKey] || nameKey;
     el.appendChild(nameEl);
     if (fold) {
       const foldEl = document.createElement('div');
-      foldEl.className = 'fold-indicator';
+      foldEl.className = 'fpc-fold-indicator';
       foldEl.textContent = window.__toolUI.foldLabel;
       el.appendChild(foldEl);
     }
@@ -176,7 +176,7 @@ const calcUI = ui as FabricProjectCalculatorUI;
 
   function buildRowEl(row: PieceRow): HTMLDivElement {
     const rowEl = document.createElement('div');
-    rowEl.className = 'piece-row';
+    rowEl.className = 'fpc-piece-row';
     rowEl.style.flex = `0 0 ${row.h * 100}%`;
     row.pieces.forEach((spec) => {
       rowEl.appendChild(buildPieceEl(spec.nameKey, spec.w, spec.fold ?? false, spec.col));
@@ -189,7 +189,7 @@ const calcUI = ui as FabricProjectCalculatorUI;
     const rows = PIECE_ROWS[type];
     if (!rows?.length) {
       const empty = document.createElement('div');
-      empty.className = 'board-empty-state';
+      empty.className = 'fpc-board-empty';
       empty.textContent = window.__toolUI.boardEmpty;
       board.appendChild(empty);
       return;
@@ -205,7 +205,7 @@ const calcUI = ui as FabricProjectCalculatorUI;
     let mark = 0;
     while (mark <= totalMeters + 0.001) {
       const markEl = document.createElement('div');
-      markEl.className = 'ruler-mark';
+      markEl.className = 'fpc-ruler-mark';
       markEl.style.top = `${(mark / totalMeters) * 100}%`;
       const label = document.createElement('span');
       label.textContent = `${mark.toFixed(step < 0.5 ? 2 : 1)}m`;
@@ -252,8 +252,8 @@ const calcUI = ui as FabricProjectCalculatorUI;
     checks.innerHTML = '';
     items.forEach((text) => {
       const li = document.createElement('li');
-      li.className = 'merch-item';
-      li.innerHTML = `<span class="merch-dot" aria-hidden="true">◆</span>${text}`;
+      li.className = 'fpc-merch-item';
+      li.innerHTML = `<span class="fpc-merch-dot" aria-hidden="true">◆</span>${text}`;
       checks.appendChild(li);
     });
   }
@@ -285,9 +285,9 @@ const calcUI = ui as FabricProjectCalculatorUI;
   }
 
   function handleSizeClick(e: Event): void {
-    const btn = (e.target as HTMLElement).closest('.preset-pill');
+    const btn = (e.target as HTMLElement).closest('.fpc-size-option');
     if (!btn) return;
-    document.getElementById('size-presets')?.querySelectorAll('.preset-pill').forEach((b) => {
+    document.getElementById('size-presets')?.querySelectorAll('.fpc-size-option').forEach((b) => {
       b.classList.remove('active');
     });
     btn.classList.add('active');
@@ -311,7 +311,7 @@ const calcUI = ui as FabricProjectCalculatorUI;
     if (width) width.value = '140';
     if (allow) allow.value = '1.5';
     activeSize = 'm_core';
-    document.getElementById('size-presets')?.querySelectorAll('.preset-pill').forEach((b) => {
+    document.getElementById('size-presets')?.querySelectorAll('.fpc-size-option').forEach((b) => {
       b.classList.toggle('active', b.getAttribute('data-val') === 'm_core');
     });
     calculate();
@@ -319,7 +319,7 @@ const calcUI = ui as FabricProjectCalculatorUI;
 
   function handleCopyList(): void {
     const checks = document.getElementById('check-list');
-    const lines = Array.from(checks?.querySelectorAll('.merch-item') || [])
+    const lines = Array.from(checks?.querySelectorAll('.fpc-merch-item') || [])
       .map((li) => '• ' + (li.textContent || '').replace('◆', '').trim());
     navigator.clipboard.writeText(lines.join('\n'));
     flashBtn('copy-list-btn', window.__toolUI.btnCopied);
@@ -340,7 +340,7 @@ const calcUI = ui as FabricProjectCalculatorUI;
   function restoreSize(q: URLSearchParams): void {
     if (!q.has('s')) return;
     activeSize = q.get('s') || 'm_core';
-    document.getElementById('size-presets')?.querySelectorAll('.preset-pill').forEach((b) => {
+    document.getElementById('size-presets')?.querySelectorAll('.fpc-size-option').forEach((b) => {
       b.classList.toggle('active', b.getAttribute('data-val') === activeSize);
     });
   }

package/src/tool/fabricProjectCalculator/fabric-project-calculator.css

@@ -1,92 +1,106 @@
-.fabric-calculator-card {
-  --fabric-accent: #4f46e5;
-  --fabric-accent-soft: rgba(79, 70, 229, 0.12);
-  --fabric-panel: color-mix(in srgb, var(--bg-surface) 92%, var(--fabric-accent) 8%);
+#fabric-calc-app {
+  --fpc-accent: #4f46e5;
+  --fpc-accent-soft: rgba(79, 70, 229, 0.12);
 
   width: min(100%, 1120px);
   margin: 1.5rem auto;
-  padding: 1.25rem;
+  padding: 1rem;
   display: grid;
-  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
-  gap: 1.25rem;
+  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
+  gap: 1rem;
+  color: var(--text-main);
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
-  border-radius: 1.25rem;
-  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
-  color: var(--text-main);
+  border-radius: 1rem;
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
+  box-sizing: border-box;
   overflow: visible;
+  isolation: isolate;
+}
+
+#fabric-calc-app *,
+#fabric-calc-app *::before,
+#fabric-calc-app *::after {
+  box-sizing: border-box;
 }
 
-.fabric-sidebar,
-.fabric-main,
-.magic-result-area,
-.canvas-wrapper,
-.merch-section {
+#fabric-calc-app .fpc-controls,
+#fabric-calc-app .fpc-main,
+#fabric-calc-app .fpc-layout,
+#fabric-calc-app .fpc-canvas,
+#fabric-calc-app .fpc-result,
+#fabric-calc-app .fpc-merch {
   min-width: 0;
+  max-width: 100%;
 }
 
-.fabric-sidebar {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  padding: 1rem;
-  background: var(--bg-page);
-  border: 1px solid var(--border-color);
-  border-radius: 1rem;
+#fabric-calc-app .fpc-controls,
+#fabric-calc-app .fpc-config,
+#fabric-calc-app .fpc-field,
+#fabric-calc-app .fpc-main,
+#fabric-calc-app .fpc-checklist {
+  display: grid;
 }
 
-.config-group {
-  display: flex;
-  flex-direction: column;
+#fabric-calc-app .fpc-controls,
+#fabric-calc-app .fpc-main {
   gap: 1rem;
+  align-content: start;
+}
+
+#fabric-calc-app .fpc-config,
+#fabric-calc-app .fpc-result,
+#fabric-calc-app .fpc-canvas,
+#fabric-calc-app .fpc-merch {
+  padding: 1rem;
+  background: var(--bg-page);
+  border: 1px solid var(--border-color);
+  border-radius: 0.85rem;
 }
 
-.config-group + .config-group {
-  padding-top: 1rem;
-  border-top: 1px solid var(--border-color);
+#fabric-calc-app .fpc-config,
+#fabric-calc-app .fpc-field {
+  gap: 0.85rem;
 }
 
-.config-group h3,
-.merch-title {
+#fabric-calc-app .fpc-config h3,
+#fabric-calc-app .fpc-merch-title {
   margin: 0;
+  color: var(--fpc-accent);
   font-size: 0.7rem;
   font-weight: 900;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--fabric-accent);
 }
 
-.fabric-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.45rem;
+#fabric-calc-app .fpc-field {
+  gap: 0.4rem;
 }
 
-.fabric-field label {
+#fabric-calc-app .fpc-field label,
+#fabric-calc-app .fpc-result-label {
+  color: var(--text-muted);
   font-size: 0.7rem;
-  font-weight: 800;
+  font-weight: 850;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--text-muted);
 }
 
-.fabric-select,
-.fabric-input {
+#fabric-calc-app .fpc-select,
+#fabric-calc-app .fpc-input {
   width: 100%;
-  min-width: 0;
-  min-height: 46px;
+  min-height: 44px;
   color: var(--text-main);
   background-color: var(--bg-surface);
   border: 1.5px solid var(--border-color);
-  border-radius: 0.75rem;
+  border-radius: 0.7rem;
   outline: none;
 }
 
-.fabric-select {
-  padding: 0.75rem 2.5rem 0.75rem 0.9rem;
+#fabric-calc-app .fpc-select {
+  padding: 0.75rem 2.4rem 0.75rem 0.85rem;
   font-size: 0.875rem;
   font-weight: 750;
-  cursor: pointer;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -94,194 +108,159 @@
   background-size: 1rem;
 }
 
-.fabric-select:focus,
-.fabric-input:focus {
-  border-color: var(--fabric-accent);
-  box-shadow: 0 0 0 3px var(--fabric-accent-soft);
+#fabric-calc-app .fpc-select:focus,
+#fabric-calc-app .fpc-input:focus {
+  border-color: var(--fpc-accent);
+  box-shadow: 0 0 0 3px var(--fpc-accent-soft);
 }
 
-.preset-group {
+#fabric-calc-app .fpc-size-options,
+#fabric-calc-app .fpc-actions,
+#fabric-calc-app .fpc-stepper,
+#fabric-calc-app .fpc-scheme {
   display: grid;
+}
+
+#fabric-calc-app .fpc-size-options {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.5rem;
 }
 
-.preset-pill {
-  min-height: 42px;
-  padding: 0.65rem 0.45rem;
-  border: 1.5px solid rgba(79, 70, 229, 0.28);
-  border-radius: 0.75rem;
-  background: rgba(79, 70, 229, 0.07);
-  color: var(--fabric-accent);
+#fabric-calc-app .fpc-size-option,
+#fabric-calc-app .fpc-action,
+#fabric-calc-app .fpc-copy-button,
+#fabric-calc-app .fpc-step-button {
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+}
+
+#fabric-calc-app .fpc-size-option {
+  min-height: 40px;
+  padding: 0.6rem 0.4rem;
+  color: var(--fpc-accent);
+  background: rgba(79, 70, 229, 0.08);
+  border: 1px solid rgba(79, 70, 229, 0.28);
+  border-radius: 0.7rem;
   font-size: 0.72rem;
   font-weight: 900;
-  line-height: 1.1;
-  cursor: pointer;
 }
 
-.preset-pill.active {
+#fabric-calc-app .fpc-size-option.active,
+#fabric-calc-app .fpc-action-primary {
   color: #fff;
-  background: var(--fabric-accent);
-  border-color: var(--fabric-accent);
+  background: var(--fpc-accent);
 }
 
-.shop-stepper {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 46px minmax(0, 1fr) 46px;
-  align-items: stretch;
+#fabric-calc-app .fpc-stepper {
+  grid-template-columns: 44px minmax(0, 1fr) 44px;
   overflow: hidden;
   background: var(--bg-surface);
   border: 1.5px solid var(--border-color);
-  border-radius: 0.75rem;
+  border-radius: 0.7rem;
 }
 
-.step-btn {
-  min-height: 46px;
-  border: 0;
+#fabric-calc-app .fpc-step-button {
+  min-height: 44px;
+  color: var(--fpc-accent);
   background: transparent;
-  color: var(--fabric-accent);
-  font-size: 1.35rem;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.step-btn:hover {
-  background: var(--fabric-accent);
-  color: #fff;
+  font-size: 1.25rem;
+  font-weight: 900;
 }
 
-.fabric-input {
-  min-height: 46px;
-  border: 0;
-  border-right: 1px solid var(--border-color);
-  border-left: 1px solid var(--border-color);
+#fabric-calc-app .fpc-input {
+  min-height: 44px;
+  border-block: 0;
   border-radius: 0;
   text-align: center;
   font-size: 1rem;
   font-weight: 850;
-  box-shadow: none;
 }
 
-.btn-actions {
-  display: grid;
+#fabric-calc-app .fpc-actions {
   grid-template-columns: 1fr 1fr;
   gap: 0.75rem;
-  margin-top: auto;
 }
 
-.f-btn,
-.copy-list-btn {
+#fabric-calc-app .fpc-action {
   min-height: 44px;
-  border: 0;
-  border-radius: 0.75rem;
+  border-radius: 0.7rem;
   font-weight: 850;
-  cursor: pointer;
 }
 
-.f-seco {
+#fabric-calc-app .fpc-action-secondary {
   color: var(--text-main);
   background: var(--bg-muted);
   border: 1px solid var(--border-color);
 }
 
-.f-prim {
-  color: #fff;
-  background: var(--fabric-accent);
-}
-
-.fabric-main {
-  display: grid;
+#fabric-calc-app .fpc-main {
   grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
-  gap: 1.25rem;
-  align-content: start;
 }
 
-.warning-banner {
+#fabric-calc-app .fpc-warning {
   grid-column: 1 / -1;
   display: none;
   padding: 0.85rem 1rem;
   color: #c2410c;
   background: #fff7ed;
   border: 1px solid #fed7aa;
-  border-radius: 0.85rem;
+  border-radius: 0.75rem;
   font-size: 0.85rem;
   font-weight: 650;
 }
 
-.magic-result-area {
-  padding: 1.5rem;
-  background: var(--fabric-panel);
-  border: 1px solid rgba(79, 70, 229, 0.16);
-  border-radius: 1rem;
-}
-
-.result-lbl {
+#fabric-calc-app .fpc-result-label {
   display: block;
-  margin-bottom: 0.4rem;
-  color: var(--text-muted);
-  font-size: 0.68rem;
-  font-weight: 900;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+  margin-bottom: 0.35rem;
 }
 
-.magic-result-area .val {
+#fabric-calc-app .fpc-result-value {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
-  gap: 0.4rem;
-  color: var(--fabric-accent);
-  font-size: 4.25rem;
+  gap: 0.35rem;
+  color: var(--fpc-accent);
+  font-size: clamp(2.8rem, 5vw, 4.4rem);
   font-weight: 950;
   line-height: 0.95;
 }
 
-.magic-result-area .unit {
+#fabric-calc-app .fpc-result-unit {
   color: var(--text-muted);
-  font-size: 1.35rem;
+  font-size: 1.25rem;
   font-weight: 900;
 }
 
-.advice-tag {
+#fabric-calc-app .fpc-advice {
   display: inline-flex;
   max-width: 100%;
-  margin-top: 1rem;
-  padding: 0.65rem 0.9rem;
-  color: var(--fabric-accent);
-  background: rgba(79, 70, 229, 0.09);
+  margin-top: 0.9rem;
+  padding: 0.6rem 0.85rem;
+  color: var(--fpc-accent);
+  background: rgba(79, 70, 229, 0.08);
   border: 1px solid rgba(79, 70, 229, 0.22);
   border-radius: 999px;
-  font-size: 0.9rem;
-  font-weight: 850;
+  font-size: 0.88rem;
+  font-weight: 800;
   overflow-wrap: anywhere;
 }
 
-.layout-container {
-  grid-row: span 2;
-}
-
-.canvas-wrapper {
-  height: 100%;
-  padding: 1rem;
-  background: var(--bg-page);
-  border: 1px solid var(--border-color);
-  border-radius: 1rem;
+#fabric-calc-app .fpc-scheme {
+  grid-template-columns: 38px minmax(0, 1fr);
+  gap: 0.55rem;
 }
 
-.scheme-area {
-  display: grid;
-  grid-template-columns: 38px minmax(0, 1fr);
-  gap: 0.6rem;
-  min-width: 0;
+#fabric-calc-app .fpc-ruler,
+#fabric-calc-app .fpc-board {
+  height: 260px;
 }
 
-.ruler {
+#fabric-calc-app .fpc-ruler {
   position: relative;
-  min-height: 260px;
 }
 
-.ruler-mark {
+#fabric-calc-app .fpc-ruler-mark {
   position: absolute;
   right: 0;
   left: 0;
@@ -290,7 +269,7 @@
   transform: translateY(-50%);
 }
 
-.ruler-mark::before {
+#fabric-calc-app .fpc-ruler-mark::before {
   content: '';
   width: 8px;
   height: 1.5px;
@@ -300,27 +279,27 @@
   flex-shrink: 0;
 }
 
-.ruler-mark span {
+#fabric-calc-app .fpc-ruler-mark span {
   color: var(--text-muted);
   font-size: 0.58rem;
   font-weight: 750;
   white-space: nowrap;
 }
 
-.fabric-board {
+#fabric-calc-app .fpc-board {
+  width: 100%;
   min-width: 0;
-  height: 260px;
   padding: 6px 6px 22px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   overflow: hidden;
   background: var(--bg-surface);
-  border: 2px solid var(--fabric-accent);
+  border: 2px solid var(--fpc-accent);
   border-radius: 0.35rem;
 }
 
-.piece-row {
+#fabric-calc-app .fpc-piece-row {
   display: flex;
   gap: 4px;
   align-items: stretch;
@@ -328,7 +307,7 @@
   flex-shrink: 0;
 }
 
-.piece-block {
+#fabric-calc-app .fpc-piece {
   min-width: 0;
   padding: 4px 8px;
   display: flex;
@@ -339,7 +318,7 @@
   border-radius: 0.3rem;
 }
 
-.piece-name {
+#fabric-calc-app .fpc-piece-name {
   width: 100%;
   overflow: hidden;
   color: var(--text-main);
@@ -350,11 +329,11 @@
   white-space: nowrap;
 }
 
-.piece-fold {
-  border-left: 3px dashed rgba(79, 70, 229, 0.65);
+#fabric-calc-app .fpc-piece-fold {
+  border-left: 3px dashed rgba(79, 70, 229, 0.68);
 }
 
-.fold-indicator {
+#fabric-calc-app .fpc-fold-indicator {
   margin-top: 2px;
   color: rgba(79, 70, 229, 0.78);
   font-size: 0.48rem;
@@ -363,7 +342,7 @@
   text-transform: uppercase;
 }
 
-.board-empty-state {
+#fabric-calc-app .fpc-board-empty {
   flex: 1;
   display: flex;
   align-items: center;
@@ -375,136 +354,90 @@
   text-align: center;
 }
 
-.scheme-info {
-  margin-top: 0.6rem;
+#fabric-calc-app .fpc-scheme-info {
+  margin-top: 0.55rem;
   color: var(--text-muted);
   font-size: 0.68rem;
   font-weight: 750;
   text-align: right;
 }
 
-.merch-section {
-  padding: 1.25rem;
-  background: var(--bg-page);
-  border: 1px solid var(--border-color);
-  border-radius: 1rem;
-}
-
-.merch-header {
+#fabric-calc-app .fpc-merch-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  margin-bottom: 0.9rem;
+  margin-bottom: 0.85rem;
 }
 
-.copy-list-btn {
+#fabric-calc-app .fpc-copy-button {
   min-height: 36px;
-  padding: 0 0.85rem;
-  color: var(--fabric-accent);
+  padding: 0 0.8rem;
+  color: var(--fpc-accent);
   background: rgba(79, 70, 229, 0.08);
   border: 1px solid rgba(79, 70, 229, 0.2);
+  border-radius: 0.65rem;
   font-size: 0.72rem;
+  font-weight: 850;
 }
 
-.merceria-checklist {
+#fabric-calc-app .fpc-checklist {
   margin: 0;
   padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.55rem;
+  gap: 0.5rem;
   list-style: none;
 }
 
-.merch-item {
+#fabric-calc-app .fpc-merch-item {
   display: flex;
   align-items: center;
-  gap: 0.55rem;
+  gap: 0.5rem;
   color: var(--text-main);
   font-size: 0.875rem;
   font-weight: 650;
 }
 
-.merch-dot {
-  color: var(--fabric-accent);
+#fabric-calc-app .fpc-merch-dot {
+  color: var(--fpc-accent);
   font-size: 0.5rem;
   flex-shrink: 0;
-  opacity: 0.7;
+  opacity: 0.72;
 }
 
 @media (max-width: 900px) {
-  .fabric-calculator-card,
-  .fabric-main {
+  #fabric-calc-app,
+  #fabric-calc-app .fpc-main {
     grid-template-columns: 1fr;
   }
 
-  .layout-container {
-    grid-row: auto;
-  }
-
-  .fabric-sidebar {
-    display: grid;
+  #fabric-calc-app .fpc-controls {
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    align-items: start;
   }
 
-  .btn-actions {
+  #fabric-calc-app .fpc-actions {
     grid-column: 1 / -1;
   }
 }
 
 @media (max-width: 600px) {
-  .fabric-calculator-card {
-    width: 100%;
+  #fabric-calc-app {
     margin: 0;
-    padding: 1rem;
-    gap: 1rem;
-    border-radius: 1rem;
-  }
-
-  .fabric-sidebar {
-    grid-template-columns: 1fr;
-    padding: 0;
-    background: transparent;
-    border: 0;
-  }
-
-  .config-group {
-    padding: 1rem;
-    background: var(--bg-page);
-    border: 1px solid var(--border-color);
-    border-radius: 1rem;
-  }
-
-  .config-group + .config-group {
-    padding-top: 1rem;
+    padding: 0.85rem;
+    border-radius: 0.85rem;
   }
 
-  .preset-group {
+  #fabric-calc-app .fpc-controls,
+  #fabric-calc-app .fpc-actions,
+  #fabric-calc-app .fpc-size-options {
     grid-template-columns: 1fr;
   }
 
-  .btn-actions {
-    grid-template-columns: 1fr;
-  }
-
-  .magic-result-area,
-  .canvas-wrapper,
-  .merch-section {
-    padding: 1rem;
-  }
-
-  .magic-result-area .val {
-    font-size: 3rem;
-  }
-
-  .scheme-area {
+  #fabric-calc-app .fpc-scheme {
     grid-template-columns: 34px minmax(0, 1fr);
   }
 
-  .ruler,
-  .fabric-board {
+  #fabric-calc-app .fpc-ruler,
+  #fabric-calc-app .fpc-board {
     height: 220px;
-    min-height: 220px;
   }
 }

package/src/tool/fabricTruth/component.astro

@@ -120,11 +120,11 @@ const fibers = Object.entries(fiberData)
 
 <template id="fiber-row-template">
   <div class="fiber-row">
-    <select class="fiber-select">
+    <select class="fiber-select" aria-label="Fiber Type">
       {fibers.map((f) => <option value={f.id}>{f.name}</option>)}
     </select>
     <div class="fiber-perc-wrapper">
-      <input type="number" min="0" max="100" step="1" placeholder="0" list="perc-list" class="fiber-perc" />
+      <input type="number" min="0" max="100" step="1" placeholder="0" list="perc-list" class="fiber-perc" aria-label="Fiber Percentage" />
       <span class="perc-symbol">%</span>
     </div>
     <button class="remove-row-btn">

package/src/tool/knittingGauge/component.astro

@@ -15,7 +15,7 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
       <h3>{gaugeUI.sectionOriginalGauge}</h3>
       <div class="input-grid">
         <div class="gauge-field">
-          <label>{gaugeUI.labelStitches} <span class="label-sub">({gaugeUI.labelWidth})</span></label>
+          <label for="pattern-sts">{gaugeUI.labelStitches} <span class="label-sub">({gaugeUI.labelWidth})</span></label>
           <div class="stepper-container">
             <button class="stepper-btn" data-step="-0.5" data-for="pattern-sts">−</button>
             <input type="number" id="pattern-sts" class="gauge-input" value="20" step="0.5" />
@@ -23,7 +23,7 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
           </div>
         </div>
         <div class="gauge-field">
-          <label>{gaugeUI.labelRows} <span class="label-sub">({gaugeUI.labelLength})</span></label>
+          <label for="pattern-rows">{gaugeUI.labelRows} <span class="label-sub">({gaugeUI.labelLength})</span></label>
           <div class="stepper-container">
             <button class="stepper-btn" data-step="-0.5" data-for="pattern-rows">−</button>
             <input type="number" id="pattern-rows" class="gauge-input" value="28" step="0.5" />
@@ -32,7 +32,7 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
         </div>
       </div>
       <div class="gauge-field">
-        <label>{gaugeUI.labelUnit}</label>
+        <label for="gauge-unit">{gaugeUI.labelUnit}</label>
         <select id="gauge-unit" class="gauge-select">
           <option value="10">{gaugeUI.unitEU}</option>
           <option value="10.16">{gaugeUI.unitUS}</option>
@@ -44,7 +44,7 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
       <h3>{gaugeUI.sectionMyGauge}</h3>
       <div class="input-grid">
         <div class="gauge-field">
-          <label>{gaugeUI.labelStitches} <span class="label-sub">({gaugeUI.labelWidth})</span></label>
+          <label for="my-sts">{gaugeUI.labelStitches} <span class="label-sub">({gaugeUI.labelWidth})</span></label>
           <div class="stepper-container">
             <button class="stepper-btn" data-step="-0.5" data-for="my-sts">−</button>
             <input type="number" id="my-sts" class="gauge-input" value="22" step="0.5" />
@@ -52,7 +52,7 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
           </div>
         </div>
         <div class="gauge-field">
-          <label>{gaugeUI.labelRows} <span class="label-sub">({gaugeUI.labelLength})</span></label>
+          <label for="my-rows">{gaugeUI.labelRows} <span class="label-sub">({gaugeUI.labelLength})</span></label>
           <div class="stepper-container">
             <button class="stepper-btn" data-step="-0.5" data-for="my-rows">−</button>
             <input type="number" id="my-rows" class="gauge-input" value="30" step="0.5" />
@@ -62,11 +62,11 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
       </div>
       <div class="input-grid">
         <div class="gauge-field">
-          <label>{gaugeUI.labelNeedleMm}</label>
+          <label for="my-needle">{gaugeUI.labelNeedleMm}</label>
           <input type="number" id="my-needle" class="gauge-input gauge-input-bordered" value="4.0" step="0.25" />
         </div>
         <div class="gauge-field">
-          <label>{gaugeUI.labelWeight} <span class="label-sub">{gaugeUI.labelWeightOptional}</span></label>
+          <label for="sample-weight">{gaugeUI.labelWeight} <span class="label-sub">{gaugeUI.labelWeightOptional}</span></label>
           <input type="number" id="sample-weight" class="gauge-input gauge-input-bordered" placeholder="5" />
         </div>
       </div>
@@ -76,16 +76,16 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
       <h3>{gaugeUI.sectionProject}</h3>
       <div class="input-grid">
         <div class="gauge-field">
-          <label>{gaugeUI.labelPatternSts}</label>
+          <label for="target-sts">{gaugeUI.labelPatternSts}</label>
           <input type="number" id="target-sts" class="gauge-input gauge-input-bordered" value="100" />
         </div>
         <div class="gauge-field">
-          <label>{gaugeUI.labelPatternRows}</label>
+          <label for="target-rows">{gaugeUI.labelPatternRows}</label>
           <input type="number" id="target-rows" class="gauge-input gauge-input-bordered" value="140" />
         </div>
       </div>
       <div class="gauge-field">
-        <label>{gaugeUI.labelMultiples} <span class="label-sub">{gaugeUI.labelMultiplesExample}</span></label>
+        <label for="pattern-multiples">{gaugeUI.labelMultiples} <span class="label-sub">{gaugeUI.labelMultiplesExample}</span></label>
         <input
           type="text"
           id="pattern-multiples"

package/src/tool/needleConverter/component.astro

@@ -110,10 +110,15 @@ const needleUI = ui as NeedleConverterUI;
     if (!picker) return;
     picker.innerHTML = '';
     NEEDLE_DATA.forEach((item, idx) => picker.appendChild(buildHoleEl(item.mm, idx)));
-    const active = picker.children[currentIdx] as HTMLElement | undefined;
-    if (active) {
-      picker.scrollTo({ left: active.offsetLeft - picker.offsetWidth / 2 + active.offsetWidth / 2, behavior: 'smooth' });
-    }
+    requestAnimationFrame(() => {
+      const active = picker.children[currentIdx] as HTMLElement | undefined;
+      if (active) {
+        const osLeft = active['offset' + 'Left'];
+        const osWidth = active['offset' + 'Width'];
+        const pWidth = picker['offset' + 'Width'];
+        picker.scrollTo({ left: osLeft - pWidth / 2 + osWidth / 2, behavior: 'smooth' });
+      }
+    });
   }
 
   function buildRowEl(idx: number): HTMLTableRowElement {

package/src/tool/sewingPatternScaler/component.astro

@@ -27,13 +27,13 @@ const SIZES = ['36', '38', '40', '42', '44', '46'];
       <div id="standard-grid">
         <div class="input-grid">
           <div class="input-group">
-            <label class="label-tiny">{scalerUI.labelPatternSize}</label>
+            <label class="label-tiny" for="origin-size">{scalerUI.labelPatternSize}</label>
             <select id="origin-size" class="form-input form-select">
               {SIZES.map((s) => <option value={s} selected={s === '38'}>{scalerUI.sizePrefix} {s}</option>)}
             </select>
           </div>
           <div class="input-group">
-            <label class="label-tiny">{scalerUI.labelTargetSize}</label>
+            <label class="label-tiny" for="target-size">{scalerUI.labelTargetSize}</label>
             <select id="target-size" class="form-input form-select">
               {SIZES.map((s) => <option value={s} selected={s === '42'}>{scalerUI.sizePrefix} {s}</option>)}
             </select>
@@ -44,22 +44,22 @@ const SIZES = ['36', '38', '40', '42', '44', '46'];
       <div id="custom-grid" class="hidden">
         <span class="label-tiny">{scalerUI.labelOriginMeasures}</span>
         <div class="input-grid">
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelChest}</label><input type="number" id="origin-chest" class="form-input" value="88" /></div>
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelWaist}</label><input type="number" id="origin-waist" class="form-input" value="68" /></div>
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelHips}</label><input type="number" id="origin-hips" class="form-input" value="94" /></div>
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelLength}</label><input type="number" id="origin-length" class="form-input" value="60" /></div>
+          <div class="input-item"><label class="label-tiny" for="origin-chest">{scalerUI.labelChest}</label><input type="number" id="origin-chest" class="form-input" value="88" /></div>
+          <div class="input-item"><label class="label-tiny" for="origin-waist">{scalerUI.labelWaist}</label><input type="number" id="origin-waist" class="form-input" value="68" /></div>
+          <div class="input-item"><label class="label-tiny" for="origin-hips">{scalerUI.labelHips}</label><input type="number" id="origin-hips" class="form-input" value="94" /></div>
+          <div class="input-item"><label class="label-tiny" for="origin-length">{scalerUI.labelLength}</label><input type="number" id="origin-length" class="form-input" value="60" /></div>
         </div>
         <span class="label-tiny target-lbl">{scalerUI.labelTargetMeasures}</span>
         <div class="input-grid">
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelChest}</label><input type="number" id="target-chest" class="form-input" value="96" /></div>
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelWaist}</label><input type="number" id="target-waist" class="form-input" value="76" /></div>
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelHips}</label><input type="number" id="target-hips" class="form-input" value="102" /></div>
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelLength}</label><input type="number" id="target-length" class="form-input" value="62" /></div>
+          <div class="input-item"><label class="label-tiny" for="target-chest">{scalerUI.labelChest}</label><input type="number" id="target-chest" class="form-input" value="96" /></div>
+          <div class="input-item"><label class="label-tiny" for="target-waist">{scalerUI.labelWaist}</label><input type="number" id="target-waist" class="form-input" value="76" /></div>
+          <div class="input-item"><label class="label-tiny" for="target-hips">{scalerUI.labelHips}</label><input type="number" id="target-hips" class="form-input" value="102" /></div>
+          <div class="input-item"><label class="label-tiny" for="target-length">{scalerUI.labelLength}</label><input type="number" id="target-length" class="form-input" value="62" /></div>
         </div>
       </div>
 
       <div class="ease-group">
-        <label class="label-tiny">{scalerUI.labelEase}</label>
+        <label class="label-tiny" for="ease-val">{scalerUI.labelEase}</label>
         <input type="number" id="ease-val" class="form-input" value="4" />
       </div>
     </div>

package/src/tool/stainChemistry/component.astro

@@ -28,7 +28,7 @@ const fibers = Object.entries(ui.fiberData)
     <div class="selectors-section">
       <div class="selectors-grid">
         <div class="selector-group">
-          <label class="selector-label">
+          <label class="selector-label" for="fiber-select">
             <Icon name="mdi:tshirt-v-outline" class="label-icon" />
             {ui.fiberLabel}
           </label>
@@ -44,7 +44,7 @@ const fibers = Object.entries(ui.fiberData)
         </div>
 
         <div class="selector-group">
-          <label class="selector-label">
+          <label class="selector-label" for="stain-select">
             <Icon name="mdi:shimmer" class="label-icon" />
             {ui.stainLabel}
           </label>

package/src/tool/yarnCalculator/component.astro

@@ -80,11 +80,11 @@ const initLabels = yarnUI.sizeLabels?.sweater ?? ['S', 'M', 'L', 'XL'];
         <div class="custom-input-box">
           <div class="ball-grid">
             <div>
-              <label class="label-tiny">{yarnUI.labelGrams}</label>
+              <label class="label-tiny" for="ball-weight">{yarnUI.labelGrams}</label>
               <input type="number" id="ball-weight" class="custom-input" value="100" />
             </div>
             <div>
-              <label class="label-tiny">{yarnUI.labelMeters}</label>
+              <label class="label-tiny" for="ball-meters">{yarnUI.labelMeters}</label>
               <input type="number" id="ball-meters" class="custom-input" value="200" />
             </div>
           </div>