@jjlmoya/utils-diy 1.18.0 → 1.20.0

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@jjlmoya/utils-diy",
-    "version": "1.18.0",
+    "version": "1.20.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/clayCalculator/component.astro

@@ -28,7 +28,7 @@ const t = (ui ?? {}) as ClayCalculatorUI;
         </div>
 
         <div class="cc-field">
-          <label class="cc-label">{t.labelShrinkage}</label>
+          <label class="cc-label" for="cc-shrinkage-slider">{t.labelShrinkage}</label>
           <div class="cc-slider-row">
             <input
               type="range"

package/src/tool/concreteCalculator/component.astro

@@ -53,23 +53,23 @@ const t = (ui ?? {}) as ConcreteCalculatorUI;
       <div class="cc-dims-panel cc-active" data-cc-mode-panel="dims">
         <div class="cc-dim-inputs">
           <div class="cc-dim-field">
-            <label>{t.labelLength}</label>
+            <label for="cc-length">{t.labelLength}</label>
             <div class="cc-dim-input-wrap">
-              <input type="number" data-cc-length data-cc-dim value="5" step="0.5" />
+              <input type="number" id="cc-length" data-cc-length data-cc-dim value="5" step="0.5" />
               <span class="cc-dim-unit">m</span>
             </div>
           </div>
           <div class="cc-dim-field">
-            <label>{t.labelWidth}</label>
+            <label for="cc-width">{t.labelWidth}</label>
             <div class="cc-dim-input-wrap">
-              <input type="number" data-cc-width data-cc-dim value="3" step="0.5" />
+              <input type="number" id="cc-width" data-cc-width data-cc-dim value="3" step="0.5" />
               <span class="cc-dim-unit">m</span>
             </div>
           </div>
           <div class="cc-dim-field">
-            <label>{t.labelThickness}</label>
+            <label for="cc-thickness">{t.labelThickness}</label>
             <div class="cc-dim-input-wrap">
-              <input type="number" data-cc-thickness data-cc-dim value="10" step="1" />
+              <input type="number" id="cc-thickness" data-cc-thickness data-cc-dim value="10" step="1" />
               <span class="cc-dim-unit">cm</span>
             </div>
           </div>
@@ -78,10 +78,10 @@ const t = (ui ?? {}) as ConcreteCalculatorUI;
 
       <div class="cc-direct-panel" data-cc-mode-panel="direct">
         <div class="cc-input-header">
-          <label>{t.labelVolume}</label>
+          <label for="cc-volume">{t.labelVolume}</label>
         </div>
         <div class="cc-vol-input-wrap">
-          <input type="number" data-cc-volume value="1.5" step="0.1" min="0" />
+          <input type="number" id="cc-volume" data-cc-volume value="1.5" step="0.1" min="0" />
           <span class="cc-unit-tag">m³</span>
         </div>
       </div>
@@ -172,13 +172,14 @@ const t = (ui ?? {}) as ConcreteCalculatorUI;
       </div>
       <div class="cc-price-inputs-grid">
         <div class="cc-price-input-field">
-          <label>
+          <label for="cc-price-binder">
             {t.priceSackLabel}
             <span data-cc-binder-type>{t.binderCementLabel}</span> (25kg)
           </label>
           <div class="cc-editable-price-wrap">
             <input
               type="number"
+              id="cc-price-binder"
               data-cc-price-binder
               class="cc-editable-price"
               value="5.50"
@@ -188,10 +189,11 @@ const t = (ui ?? {}) as ConcreteCalculatorUI;
           </div>
         </div>
         <div class="cc-price-input-field">
-          <label>{t.priceSandLabel}</label>
+          <label for="cc-price-sand">{t.priceSandLabel}</label>
           <div class="cc-editable-price-wrap">
             <input
               type="number"
+              id="cc-price-sand"
               data-cc-price-sand
               class="cc-editable-price"
               value="35.00"

package/src/tool/cutOptimizer/component.astro

@@ -36,16 +36,16 @@ const t = (ui ?? {}) as CutOptimizerUI;
 
         <div class="co-fields">
           <div class="co-field">
-            <label class="co-field-label">{t.labelStockLength}</label>
-            <input type="number" data-co-stock-len data-co-cfg-inp value="2400" class="co-input" />
+            <label class="co-field-label" for="co-stock-length">{t.labelStockLength}</label>
+            <input type="number" id="co-stock-length" data-co-stock-len data-co-cfg-inp value="2400" class="co-input" />
           </div>
           <div class="co-field co-hidden" data-co-stock-wid-wrap>
-            <label class="co-field-label">{t.labelStockWidth}</label>
-            <input type="number" data-co-stock-wid data-co-cfg-inp value="1200" class="co-input" />
+            <label class="co-field-label" for="co-stock-width">{t.labelStockWidth}</label>
+            <input type="number" id="co-stock-width" data-co-stock-wid data-co-cfg-inp value="1200" class="co-input" />
           </div>
           <div class="co-field">
-            <label class="co-field-label">{t.labelKerf}</label>
-            <input type="number" data-co-kerf data-co-cfg-inp value="3" class="co-input" />
+            <label class="co-field-label" for="co-kerf">{t.labelKerf}</label>
+            <input type="number" id="co-kerf" data-co-kerf data-co-cfg-inp value="3" class="co-input" />
           </div>
         </div>
       </div>
@@ -100,15 +100,15 @@ const t = (ui ?? {}) as CutOptimizerUI;
   <template data-co-row-tmpl>
     <div class="co-row">
       <div class="co-row-len-wrap">
-        <input type="number" data-co-inp-len placeholder={t.placeholderLength} class="co-row-input" />
+        <input type="number" aria-label={t.placeholderLength} data-co-inp-len placeholder={t.placeholderLength} class="co-row-input" />
         <span class="co-row-unit">mm</span>
       </div>
       <div class="co-row-wid-wrap co-hidden" data-co-wid-wrap>
-        <input type="number" data-co-inp-wid placeholder={t.placeholderWidth} class="co-row-input co-row-input-blue" />
+        <input type="number" aria-label={t.placeholderWidth} data-co-inp-wid placeholder={t.placeholderWidth} class="co-row-input co-row-input-blue" />
         <span class="co-row-unit">mm</span>
       </div>
       <div class="co-row-qty-wrap">
-        <input type="number" data-co-inp-qty placeholder={t.placeholderQty} value="1" class="co-row-input co-row-input-qty" />
+        <input type="number" aria-label={t.placeholderQty} data-co-inp-qty placeholder={t.placeholderQty} value="1" class="co-row-input co-row-input-qty" />
       </div>
       <button class="co-btn-rm" data-co-btn-rm title={t.btnRemoveTitle}>
         <Icon name="mdi:close" />

package/src/tool/drillCalculator/component.astro

@@ -74,7 +74,7 @@ const t = (ui ?? {}) as DrillCalculatorUI;
 
         <div class="dc-field">
           <div class="dc-diameter-header">
-            <label class="dc-field-label">{t.labelDiameter}</label>
+            <label class="dc-field-label" for="dc-diam-slider">{t.labelDiameter}</label>
             <div class="dc-unit-toggle" id="dc-unit-toggle">
               <button class="dc-unit-btn active" data-unit="mm">{t.unitMm}</button>
               <button class="dc-unit-btn" data-unit="in">{t.unitInch}</button>
@@ -101,11 +101,11 @@ const t = (ui ?? {}) as DrillCalculatorUI;
           <div class="dc-advanced-body" id="dc-adv-body">
             <div class="dc-adv-grid">
               <div>
-                <label class="dc-field-label">{t.labelLips}</label>
+                <label class="dc-field-label" for="dc-lips">{t.labelLips}</label>
                 <input type="number" id="dc-lips" class="dc-input" value="2" min="1" max="12" />
               </div>
               <div>
-                <label class="dc-field-label">{t.labelFz}</label>
+                <label class="dc-field-label" for="dc-fz">{t.labelFz}</label>
                 <input type="number" id="dc-fz" class="dc-input" placeholder="0.1" step="0.01" value="" />
               </div>
             </div>
@@ -164,7 +164,7 @@ const t = (ui ?? {}) as DrillCalculatorUI;
             <button class="dc-preset-btn" data-preset="cnc">{t.presetCnc}</button>
           </div>
           <div class="dc-manual-input">
-            <input type="number" id="dc-speed-in" class="dc-input" placeholder={t.addRpmManual} />
+            <input type="number" id="dc-speed-in" aria-label={t.addRpmManual} class="dc-input" placeholder={t.addRpmManual} />
             <button id="dc-add-btn" class="dc-add-btn">+</button>
           </div>
           <div class="dc-chips-area" id="dc-chips-area"></div>

package/src/tool/drillSharpener/component.astro

@@ -133,6 +133,7 @@ const t = (ui ?? {}) as DrillSharpenerUI;
           <input
             type="number"
             id="diam-input"
+            aria-label={t.labelDiameter}
             value="10"
             step="0.5"
             min="1"

package/src/tool/epoxyCalculator/component.astro

@@ -37,23 +37,23 @@ const t = (ui ?? {}) as EpoxyCalculatorUI;
 
       <div class="ec-inputs-grid">
         <div class="ec-input-group ec-rect-input">
-          <label class="ec-label">{t.labelLength}</label>
+          <label class="ec-label" for="ec-length">{t.labelLength}</label>
           <input type="number" id="ec-length" value="30" class="ec-input" />
         </div>
         <div class="ec-input-group ec-rect-input">
-          <label class="ec-label">{t.labelWidth}</label>
+          <label class="ec-label" for="ec-width">{t.labelWidth}</label>
           <input type="number" id="ec-width" value="20" class="ec-input" />
         </div>
         <div class="ec-input-group ec-cylinder-input ec-hidden">
-          <label class="ec-label">{t.labelDiameter}</label>
+          <label class="ec-label" for="ec-diameter">{t.labelDiameter}</label>
           <input type="number" id="ec-diameter" value="15" class="ec-input" />
         </div>
         <div class="ec-input-group ec-sphere-input ec-hidden">
-          <label class="ec-label">{t.labelDiameter}</label>
+          <label class="ec-label" for="ec-sphere-diameter">{t.labelDiameter}</label>
           <input type="number" id="ec-sphere-diameter" value="10" class="ec-input" />
         </div>
         <div class="ec-input-group ec-depth-input">
-          <label class="ec-label">{t.labelDepth}</label>
+          <label class="ec-label" for="ec-depth">{t.labelDepth}</label>
           <input type="number" id="ec-depth" value="5" class="ec-input" />
         </div>
       </div>
@@ -66,7 +66,7 @@ const t = (ui ?? {}) as EpoxyCalculatorUI;
           <span id="ec-ratio-display" class="ec-ratio-badge">2:1</span>
         </div>
         <div class="ec-slider-wrapper">
-          <input type="range" id="ec-ratio-slider" min="1" max="5" step="0.5" value="2" class="ec-slider" />
+          <input type="range" id="ec-ratio-slider" aria-label={t.labelRatio} min="1" max="5" step="0.5" value="2" class="ec-slider" />
           <div class="ec-ratio-marks">
             <span>1:1</span><span>2:1</span><span>3:1</span><span>4:1</span><span>5:1</span>
           </div>
@@ -77,11 +77,11 @@ const t = (ui ?? {}) as EpoxyCalculatorUI;
         </label>
         <div id="ec-custom-inputs" class="ec-custom-grid ec-hidden">
           <div>
-            <label class="ec-label">{t.labelResinA}</label>
+            <label class="ec-label" for="ec-ratio-a">{t.labelResinA}</label>
             <input type="number" id="ec-ratio-a" value="100" class="ec-input ec-input-sm" />
           </div>
           <div>
-            <label class="ec-label">{t.labelHardenerB}</label>
+            <label class="ec-label" for="ec-ratio-b">{t.labelHardenerB}</label>
             <input type="number" id="ec-ratio-b" value="50" class="ec-input ec-input-sm" />
           </div>
         </div>

package/src/tool/epoxyCalculator/epoxy-resin-calculator.css

@@ -1,14 +1,23 @@
   .ec-root {
+    box-sizing: border-box;
     width: 100%;
     max-width: 72rem;
     margin: 0 auto;
+    container-type: inline-size;
     overflow-x: clip;
   }
 
+  .ec-root *,
+  .ec-root *::before,
+  .ec-root *::after {
+    box-sizing: border-box;
+  }
+
   .ec-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 2rem;
+    min-width: 0;
   }
 
   @media (min-width: 1024px) {
@@ -18,6 +27,7 @@
   }
 
   .ec-panel-left {
+    min-width: 0;
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.4);
@@ -36,6 +46,7 @@
     padding: 0.375rem;
     border-radius: 1rem;
     max-width: 100%;
+    min-width: 0;
   }
 
   .ec-tab-btn {
@@ -682,3 +693,56 @@
       min-height: 3.15rem;
     }
   }
+
+  @container (max-width: 720px) {
+    .ec-grid {
+      gap: 1rem;
+    }
+
+    .ec-panel-left,
+    .ec-result-inner,
+    .ec-viz-card {
+      min-width: 0;
+      padding: 0.875rem;
+      border-radius: 1rem;
+    }
+
+    .ec-tabs {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 0.25rem;
+      overflow: hidden;
+    }
+
+    .ec-tab-btn {
+      min-width: 0;
+      padding: 0.55rem 0.35rem;
+      font-size: 0.75rem;
+      line-height: 1.15;
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    .ec-tab-icon {
+      flex-shrink: 0;
+      font-size: 1rem;
+    }
+
+    .ec-inputs-grid,
+    .ec-custom-grid,
+    .ec-parts-grid {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 1rem;
+    }
+
+    .ec-waste-row {
+      gap: 1rem;
+      align-items: flex-start;
+      padding: 0.875rem;
+      overflow: hidden;
+    }
+
+    .ec-waste-info {
+      align-items: flex-start;
+    }
+  }

package/src/tool/furnitureFit/component.astro

@@ -28,16 +28,16 @@ const t = (ui ?? {}) as FurnitureFitUI;
         </h2>
         <div class="ff-inputs-grid">
           <div class="ff-input-group">
-            <label class="ff-label">{t.labelWidth}</label>
-            <input type="number" data-ff-con-w data-ff-inp value="120" class="ff-input" />
+            <label class="ff-label" for="ff-con-w">{t.labelWidth}</label>
+            <input type="number" id="ff-con-w" data-ff-con-w data-ff-inp value="120" class="ff-input" />
           </div>
           <div class="ff-input-group">
-            <label class="ff-label">{t.labelHeight}</label>
-            <input type="number" data-ff-con-h data-ff-inp value="210" class="ff-input" />
+            <label class="ff-label" for="ff-con-h">{t.labelHeight}</label>
+            <input type="number" id="ff-con-h" data-ff-con-h data-ff-inp value="210" class="ff-input" />
           </div>
           <div class="ff-input-group">
-            <label class="ff-label">{t.labelDepth}</label>
-            <input type="number" data-ff-con-d data-ff-inp value="120" class="ff-input" />
+            <label class="ff-label" for="ff-con-d">{t.labelDepth}</label>
+            <input type="number" id="ff-con-d" data-ff-con-d data-ff-inp value="120" class="ff-input" />
           </div>
         </div>
         <p class="ff-hint">{t.conHint}</p>
@@ -50,22 +50,22 @@ const t = (ui ?? {}) as FurnitureFitUI;
         </h2>
         <div class="ff-inputs-grid">
           <div class="ff-input-group">
-            <label class="ff-label">{t.labelLength}</label>
-            <input type="number" data-ff-obj-w data-ff-inp value="220" class="ff-input" />
+            <label class="ff-label" for="ff-obj-w">{t.labelLength}</label>
+            <input type="number" id="ff-obj-w" data-ff-obj-w data-ff-inp value="220" class="ff-input" />
           </div>
           <div class="ff-input-group">
-            <label class="ff-label">{t.labelHeight}</label>
-            <input type="number" data-ff-obj-h data-ff-inp value="90" class="ff-input" />
+            <label class="ff-label" for="ff-obj-h">{t.labelHeight}</label>
+            <input type="number" id="ff-obj-h" data-ff-obj-h data-ff-inp value="90" class="ff-input" />
           </div>
           <div class="ff-input-group">
-            <label class="ff-label">{t.labelDepth}</label>
-            <input type="number" data-ff-obj-d data-ff-inp value="80" class="ff-input" />
+            <label class="ff-label" for="ff-obj-d">{t.labelDepth}</label>
+            <input type="number" id="ff-obj-d" data-ff-obj-d data-ff-inp value="80" class="ff-input" />
           </div>
         </div>
         <div class="ff-margin-row">
           <div class="ff-margin-left">
-            <label class="ff-label">{t.labelMargin}</label>
-            <input type="range" data-ff-margin data-ff-inp min="0" max="10" value="2" class="ff-slider" />
+            <label class="ff-label" for="ff-margin">{t.labelMargin}</label>
+            <input type="range" id="ff-margin" data-ff-margin data-ff-inp min="0" max="10" value="2" class="ff-slider" />
           </div>
           <span class="ff-margin-display" data-ff-margin-display>2cm</span>
         </div>

package/src/tool/mortarCalculator/component.astro

@@ -94,7 +94,7 @@ const t = (ui ?? {}) as MortarCalculatorUI;
         <g id="mc-sack-pile"></g>
       </svg>
       <div class="mc-slider-container">
-        <input type="range" data-mc-slider min="5" max="500" value="150" step="5" class="mc-slider" />
+        <input type="range" aria-label={t.labelQuantity} data-mc-slider min="5" max="500" value="150" step="5" class="mc-slider" />
         <div class="mc-ruler-marks">
           <span>5</span><span>100</span><span>200</span><span>300</span><span>400</span><span>500</span>
         </div>

package/src/tool/passepartoutCalculator/component.astro

@@ -25,12 +25,12 @@ const t = (ui ?? {}) as PassepartoutCalculatorUI;
         </div>
         <div class="pp-row">
           <div class="pp-field">
-            <label class="pp-label">{t.labelWidth}</label>
-            <input type="number" data-pp-input data-pp-frame-w class="pp-input" value="40" min="0" step="0.1" />
+            <label class="pp-label" for="pp-frame-w">{t.labelWidth}</label>
+            <input type="number" id="pp-frame-w" data-pp-input data-pp-frame-w class="pp-input" value="40" min="0" step="0.1" />
           </div>
           <div class="pp-field">
-            <label class="pp-label">{t.labelHeight}</label>
-            <input type="number" data-pp-input data-pp-frame-h class="pp-input" value="50" min="0" step="0.1" />
+            <label class="pp-label" for="pp-frame-h">{t.labelHeight}</label>
+            <input type="number" id="pp-frame-h" data-pp-input data-pp-frame-h class="pp-input" value="50" min="0" step="0.1" />
           </div>
         </div>
       </div>
@@ -44,12 +44,12 @@ const t = (ui ?? {}) as PassepartoutCalculatorUI;
         </div>
         <div class="pp-row">
           <div class="pp-field">
-            <label class="pp-label">{t.labelWidth}</label>
-            <input type="number" data-pp-input data-pp-art-w class="pp-input" value="28" min="0" step="0.1" />
+            <label class="pp-label" for="pp-art-w">{t.labelWidth}</label>
+            <input type="number" id="pp-art-w" data-pp-input data-pp-art-w class="pp-input" value="28" min="0" step="0.1" />
           </div>
           <div class="pp-field">
-            <label class="pp-label">{t.labelHeight}</label>
-            <input type="number" data-pp-input data-pp-art-h class="pp-input" value="38" min="0" step="0.1" />
+            <label class="pp-label" for="pp-art-h">{t.labelHeight}</label>
+            <input type="number" id="pp-art-h" data-pp-input data-pp-art-h class="pp-input" value="38" min="0" step="0.1" />
           </div>
         </div>
       </div>
@@ -66,9 +66,9 @@ const t = (ui ?? {}) as PassepartoutCalculatorUI;
       </div>
 
       <div class="pp-offset-ctrl" data-pp-offset-ctrl>
-        <label class="pp-label">{t.labelOffset}</label>
+        <label class="pp-label" for="pp-offset">{t.labelOffset}</label>
         <div class="pp-offset-row">
-          <input type="range" data-pp-input data-pp-offset-range class="pp-range" min="1" max="20" value="5" />
+          <input type="range" id="pp-offset" data-pp-input data-pp-offset-range class="pp-range" min="1" max="20" value="5" />
           <span data-pp-offset-val class="pp-offset-val">5%</span>
         </div>
       </div>

package/src/tool/passepartoutCalculator/passepartout-calculator.css

@@ -1,7 +1,9 @@
   .pp-root {
+    box-sizing: border-box;
     width: 100%;
     max-width: 1100px;
     margin: 0 auto;
+    container-type: inline-size;
     background: #fff;
     border: 1px solid #e2e8f0;
     border-radius: 1.5rem;
@@ -9,6 +11,12 @@
     overflow: hidden;
   }
 
+  .pp-root *,
+  .pp-root *::before,
+  .pp-root *::after {
+    box-sizing: border-box;
+  }
+
   .theme-dark .pp-root {
     background: #1e1e2e;
     border-color: #2d2d3f;
@@ -18,6 +26,7 @@
   .pp-grid {
     display: grid;
     grid-template-columns: 1fr;
+    min-width: 0;
   }
 
   @media (min-width: 1024px) {
@@ -27,6 +36,7 @@
   }
 
   .pp-inputs {
+    min-width: 0;
     padding: 2rem;
     background: #f8fafc;
     display: flex;
@@ -624,3 +634,70 @@
       width: min(100%, 70vw);
     }
   }
+
+  @container (max-width: 720px) {
+    .pp-root {
+      border-radius: 0.875rem;
+    }
+
+    .pp-inputs {
+      padding: 1rem;
+      gap: 1.25rem;
+      border-right: 0;
+      border-bottom: 1px solid #e2e8f0;
+    }
+
+    .theme-dark .pp-inputs {
+      border-bottom-color: #2d2d3f;
+    }
+
+    .pp-row {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 0.75rem;
+    }
+
+    .pp-toggle-label {
+      align-items: flex-start;
+    }
+
+    .pp-preview {
+      min-height: 360px;
+      padding: 3.25rem 1rem;
+      overflow: hidden;
+    }
+
+    .pp-frame-wrapper {
+      width: min(100%, 76%);
+      max-height: 320px;
+    }
+
+    .pp-border-left {
+      left: 0.35rem;
+      align-items: flex-start;
+      padding-right: 0;
+      transform: translateY(-50%);
+    }
+
+    .pp-border-right {
+      right: 0.35rem;
+      align-items: flex-end;
+      padding-left: 0;
+      transform: translateY(-50%);
+    }
+
+    .pp-border-val {
+      font-size: 0.95rem;
+    }
+
+    .pp-border-tag,
+    .pp-border-unit {
+      font-size: 0.55rem;
+    }
+
+    .pp-border-tag {
+      letter-spacing: 0.04em;
+      max-width: 2.75rem;
+      overflow-wrap: anywhere;
+      text-align: inherit;
+    }
+  }

package/src/tool/stairCalculator/stair-calculator.css

@@ -22,6 +22,7 @@
   }
 
   .sc-root {
+    box-sizing: border-box;
     width: 100%;
     max-width: 1100px;
     margin: 1.5rem auto;
@@ -31,7 +32,15 @@
     overflow-x: clip;
   }
 
+  .sc-root *,
+  .sc-root *::before,
+  .sc-root *::after {
+    box-sizing: border-box;
+  }
+
   .sc-card {
+    width: 100%;
+    max-width: 100%;
     background: var(--sc-bg);
     border-radius: 2rem;
     overflow: hidden;

package/src/tool/twoStrokeMixtureCalculator/component.astro

@@ -21,7 +21,7 @@ const t = (ui ?? {}) as TwoStrokeMixtureCalculatorUI;
 
   <div class="tsmc-container">
     <div class="tsmc-input-section">
-      <label id="tsmc-volume-label" class="tsmc-section-label">{t.labelVolume}</label>
+      <label id="tsmc-volume-label" class="tsmc-section-label" for="tsmc-slider">{t.labelVolume}</label>
 
       <div class="tsmc-slider-container">
         <input

package/src/tool/voltageDropCalculator/component.astro

@@ -99,25 +99,25 @@ const SECTIONS = [
 
     <div class="vd-card vd-load-card">
       <div class="vd-load-top">
-        <label class="vd-field-label">{t.fieldLoad}</label>
+        <label class="vd-field-label" for="vd-load-val">{t.fieldLoad}</label>
         <div class="vd-mode-wrap">
           <button class="vd-mode-btn vd-active" data-vd-mode-btn="watts">{t.modeW}</button>
           <button class="vd-mode-btn" data-vd-mode-btn="amps">{t.modeA}</button>
         </div>
       </div>
       <div class="vd-load-input-row">
-        <input type="number" data-vd-load-val value="60" class="vd-load-input" />
+        <input type="number" id="vd-load-val" data-vd-load-val value="60" class="vd-load-input" />
         <span class="vd-load-unit" data-vd-load-unit>{t.unitWatts}</span>
       </div>
     </div>
 
     <div class="vd-card">
       <div class="vd-len-top">
-        <label class="vd-field-label">{t.fieldLength}</label>
+        <label class="vd-field-label" for="vd-len-slider">{t.fieldLength}</label>
         <span class="vd-len-info"><span data-vd-len-display>10</span> {t.unitMeters}</span>
       </div>
       <div class="vd-slider-wrap">
-        <input type="range" data-vd-len-slider min="1" max="100" step="1" value="10" class="vd-slider-input" />
+        <input type="range" id="vd-len-slider" data-vd-len-slider min="1" max="100" step="1" value="10" class="vd-slider-input" />
         <div class="vd-slider-track">
           <div class="vd-slider-fill" data-vd-len-track style="width:9.09%"></div>
         </div>

package/src/tool/workshopFractionConverter/component.astro

@@ -26,7 +26,7 @@ const t = (ui ?? {}) as WorkshopFractionConverterUI;
           <label class="wfc-field-label">{t.labelFraction}</label>
           <div class="wfc-fraction-input">
             <div class="wfc-fraction-column">
-              <span class="wfc-fraction-label">{t.labelWhole}</span>
+              <label class="wfc-fraction-label" for="wfc-whole">{t.labelWhole}</label>
               <div class="wfc-stepper-group">
                 <button class="wfc-stepper-btn" data-stepper="whole-down">−</button>
                 <button class="wfc-stepper-btn" data-stepper="whole-up">+</button>
@@ -42,7 +42,7 @@ const t = (ui ?? {}) as WorkshopFractionConverterUI;
               />
             </div>
             <div class="wfc-fraction-column">
-              <span class="wfc-fraction-label">{t.labelNumerator}</span>
+              <label class="wfc-fraction-label" for="wfc-numerator">{t.labelNumerator}</label>
               <div class="wfc-stepper-group">
                 <button class="wfc-stepper-btn" data-stepper="num-down">−</button>
                 <button class="wfc-stepper-btn" data-stepper="num-up">+</button>
@@ -58,7 +58,7 @@ const t = (ui ?? {}) as WorkshopFractionConverterUI;
               />
             </div>
             <div class="wfc-fraction-column">
-              <span class="wfc-fraction-label">{t.labelDenominator}</span>
+              <label class="wfc-fraction-label" for="wfc-denominator">{t.labelDenominator}</label>
               <div class="wfc-stepper-group">
                 <button class="wfc-stepper-btn" data-stepper="denom-down">−</button>
                 <button class="wfc-stepper-btn" data-stepper="denom-up">+</button>
@@ -91,7 +91,7 @@ const t = (ui ?? {}) as WorkshopFractionConverterUI;
         </div>
 
         <div class="wfc-field wfc-hidden" id="wfc-reverse-input" data-reverse-input>
-          <label class="wfc-field-label">{t.reverseSearchLabel}</label>
+          <label class="wfc-field-label" for="wfc-reverse-mm">{t.reverseSearchLabel}</label>
           <div style="display: flex; gap: 0.5rem;">
             <input
               type="number"