@ds-mo/ui 1.6.0 → 1.6.1

package/dist/.build-stamp

@@ -1 +1 @@
-1782184106670
+1782185018864

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -45,6 +45,10 @@
       "types": "./src/wc/nav/index.ts",
       "import": "./src/wc/nav/index.ts"
     },
+    "./utils": {
+      "types": "./src/wc/utils/index.ts",
+      "import": "./src/wc/utils/index.ts"
+    },
     "./dist/components/*": "./dist/components/*"
   },
   "files": [
@@ -55,6 +59,7 @@
     "!src/wc/components/**/*.stories.ts",
     "!src/wc/components/**/*.stories.tsx",
     "src/wc/nav",
+    "src/wc/utils",
     "src/angular",
     "src/react"
   ],
@@ -63,6 +68,7 @@
     "pretypecheck": "node scripts/generate-icon-catalog.mjs",
     "pretest": "node scripts/generate-icon-catalog.mjs",
     "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs",
+    "verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-nav-import.mjs",
     "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts",
     "test:e2e": "npm run build && playwright test",
     "test:e2e:install": "playwright install chromium",

package/src/wc/utils/index.ts

@@ -0,0 +1,4 @@
+export { clearCssLengthPxCache, resolveCssLengthPx } from './resolve-css-length-px';
+export { parseCssTimeMs, resolveCssTimeMs } from './resolve-css-time-ms';
+export { TOKEN_DEFAULTS } from './token-defaults';
+export type { TokenDefaultKey } from './token-defaults';

package/src/wc/utils/resolve-css-length-px.ts

@@ -0,0 +1,64 @@
+const lengthPxCache = new Map<string, number>();
+
+let probeEl: HTMLElement | null = null;
+
+function getProbeElement(): HTMLElement | null {
+  if (typeof document === 'undefined') return null;
+
+  if (!probeEl) {
+    probeEl = document.createElement('div');
+    probeEl.setAttribute('aria-hidden', 'true');
+    probeEl.style.cssText =
+      'position:absolute;visibility:hidden;pointer-events:none;top:0;left:0;width:0;height:0;overflow:hidden;';
+    document.documentElement.appendChild(probeEl);
+  }
+
+  return probeEl;
+}
+
+/** Clear session cache (tests only). */
+export function clearCssLengthPxCache(): void {
+  lengthPxCache.clear();
+}
+
+/**
+ * Resolve a CSS length to pixels for layout math.
+ * Numbers pass through; `var(--dimension-*)`, `calc(...)`, and `16px` resolve via a hidden probe.
+ */
+export function resolveCssLengthPx(
+  value: number | string | undefined,
+  fallback: number | string,
+): number {
+  const resolved = value === undefined || value === null || value === '' ? fallback : value;
+  if (typeof resolved === 'number') return resolved;
+
+  const trimmed = resolved.trim();
+  if (!trimmed) return resolveCssLengthPx(fallback, 0);
+
+  const cached = lengthPxCache.get(trimmed);
+  if (cached !== undefined) return cached;
+
+  if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
+    const n = Number(trimmed);
+    lengthPxCache.set(trimmed, n);
+    return n;
+  }
+
+  const pxMatch = trimmed.match(/^(-?\d+(\.\d+)?)px$/);
+  if (pxMatch) {
+    const px = parseFloat(pxMatch[1]);
+    lengthPxCache.set(trimmed, px);
+    return px;
+  }
+
+  const probe = getProbeElement();
+  if (!probe) {
+    return typeof fallback === 'number' ? fallback : 0;
+  }
+
+  probe.style.width = trimmed;
+  const px = probe.getBoundingClientRect().width;
+  probe.style.width = '';
+  lengthPxCache.set(trimmed, px);
+  return px;
+}

package/src/wc/utils/resolve-css-time-ms.ts

@@ -0,0 +1,46 @@
+/** Parse a CSS <time> value (or motion shorthand's first token) to milliseconds. */
+export function parseCssTimeMs(value: string, fallback: number): number {
+  const firstToken = value.trim().split(/\s+/)[0] ?? '';
+  const num = parseFloat(firstToken);
+  if (Number.isNaN(num)) return fallback;
+  if (/ms\s*$/.test(firstToken)) return num;
+  if (/s\s*$/.test(firstToken)) return num * 1000;
+  return num;
+}
+
+function extractCssCustomProp(ref: string): string | null {
+  const varMatch = ref.match(/^var\(\s*(--[^),]+)/);
+  if (varMatch) return varMatch[1].trim();
+  if (ref.startsWith('--')) return ref.trim();
+  return null;
+}
+
+function readTokenTimeMs(token: string, fallback: number): number {
+  if (typeof document === 'undefined') return fallback;
+
+  const prop = extractCssCustomProp(token);
+  if (!prop) return parseCssTimeMs(token, fallback);
+
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();
+  return parseCssTimeMs(raw, fallback);
+}
+
+/**
+ * Resolve a duration to milliseconds for JS timers aligned with CSS motion tokens.
+ * Accepts numbers (ms), raw times (`200ms`, `0.75s`), or `var(--effect-*)` references.
+ */
+export function resolveCssTimeMs(
+  value: number | string | undefined,
+  fallbackToken: string,
+): number {
+  if (typeof value === 'number') return value;
+
+  const token = typeof value === 'string' && value.trim() ? value.trim() : fallbackToken;
+  const prop = extractCssCustomProp(token);
+
+  if (prop) {
+    return readTokenTimeMs(token, readTokenTimeMs(fallbackToken, 200));
+  }
+
+  return parseCssTimeMs(token, readTokenTimeMs(fallbackToken, 200));
+}

package/src/wc/utils/token-defaults.ts

@@ -0,0 +1,48 @@
+import {
+  dimensionIconographyMd,
+  dimensionIconographySm,
+  dimensionIconographyXs,
+  dimensionMenuWidthXs,
+  dimensionPanelWidth2xs,
+  dimensionPanelWidthLg,
+  dimensionPanelWidthMd,
+  dimensionSize300,
+  dimensionSize600,
+  dimensionSize800,
+  dimensionSpace050,
+  dimensionSpace200,
+  effectAnimationDelayLong2,
+  effectAnimationDelayMedium1,
+  effectAnimationDelayShort2,
+  effectAnimationDurationMedium1,
+  effectAnimationDurationShort3,
+  effectMotionShort3,
+} from '@ds-mo/tokens/ts';
+
+/** TokoMo CSS custom-property names for shared component defaults (runtime resolution). */
+export const TOKEN_DEFAULTS = {
+  space050: dimensionSpace050,
+  space200: dimensionSpace200,
+  size300: dimensionSize300,
+  size600: dimensionSize600,
+  size800: dimensionSize800,
+  iconographyMd: dimensionIconographyMd,
+  iconographySm: dimensionIconographySm,
+  iconographyXs: dimensionIconographyXs,
+  panelWidth2xs: dimensionPanelWidth2xs,
+  panelWidthMd: dimensionPanelWidthMd,
+  panelWidthLg: dimensionPanelWidthLg,
+  menuWidthXs: dimensionMenuWidthXs,
+  motionShort3: effectMotionShort3,
+  animationDurationShort3: effectAnimationDurationShort3,
+  animationDurationMedium1: effectAnimationDurationMedium1,
+  animationDelayMedium1: effectAnimationDelayMedium1,
+  animationDelayShort2: effectAnimationDelayShort2,
+  animationDelayLong2: effectAnimationDelayLong2,
+  /** Unmeasured menu height fallback: 20× base (160px at default scale). */
+  menuFallbackHeight: 'calc(var(--dimension-size-base) * 20)',
+  /** Unmeasured tooltip width fallback: size-800 + size-200 (80px). */
+  tooltipFallbackWidth: 'calc(var(--dimension-size-800) + var(--dimension-size-200))',
+} as const;
+
+export type TokenDefaultKey = keyof typeof TOKEN_DEFAULTS;