@dialpad/dialtone-css 8.78.0-next.1 → 8.78.0-next.3

package/lib/build/js/dialtone_migration_helper/configs/space-to-spacing.mjs

@@ -0,0 +1,48 @@
+// Lookup table: old --dt-space-{stop} → new --dt-spacing-{suffix}
+// Based on px value equivalence (8px base unit). Stops with no equivalent are left unchanged.
+const MAP = {
+  0: 'spacing-0',     // 0px
+  100: 'spacing-1',   // 1px
+  200: 'spacing-25',  // 2px
+  300: 'spacing-50',  // 4px
+  350: 'spacing-75',  // 6px
+  400: 'spacing-100', // 8px
+  450: 'spacing-150', // 12px
+  500: 'spacing-200', // 16px
+  525: 'spacing-250', // 20px
+  550: 'spacing-300', // 24px
+  600: 'spacing-400', // 32px
+  625: 'spacing-525', // 42px
+  650: 'spacing-600', // 48px
+  700: 'spacing-800', // 64px
+  // 720 (72px), 730 (84px), 750+ (96px+) have no --dt-spacing-* equivalent.
+  // Tokens at these sizes are better expressed as --dt-layout-* tokens.
+  // These are left unchanged for manual review — the lint rule will flag them.
+};
+
+export default {
+  description:
+    'Migrates --dt-space-* tokens to --dt-spacing-* tokens (8px base unit scale).\n' +
+    'This supersedes the space-to-size migration — run this instead of space-to-size.\n' +
+    '- Replaces var(--dt-space-{stop}) with var(--dt-spacing-{newSuffix})\n\t' +
+      'eg. var(--dt-space-400) → var(--dt-spacing-100)\n' +
+    '- Replaces var(--dt-space-{stop}-negative) with var(--dt-spacing-{newSuffix}-negative)\n\t' +
+      'eg. var(--dt-space-400-negative) → var(--dt-spacing-100-negative)\n' +
+    '- Replaces var(--dt-space-{stop}-percent) with var(--dt-spacing-{newSuffix}-percent)\n\t' +
+      'eg. var(--dt-space-400-percent) → var(--dt-spacing-100-percent)\n' +
+    '- Tokens with no equivalent (720, 730, 750+) are left unchanged for manual review.\n',
+  patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md,js,ts,jsx,tsx}'],
+  globbyConfig: {
+    ignore: ['**/dialtone_migration_helper/tests/**'],
+  },
+  expressions: [
+    {
+      from: /var\(--dt-space-([0-9]+)(-negative|-percent)?\)/g,
+      to: (match, stop, suffix) => {
+        const newSuffix = MAP[Number(stop)];
+        if (newSuffix == null) return match;
+        return `var(--dt-${newSuffix}${suffix || ''})`;
+      },
+    },
+  ],
+};

package/lib/build/js/dialtone_migration_helper/configs/stack-gap-to-spacing.mjs

@@ -0,0 +1,88 @@
+// Mapping: old DtStack/DtDescriptionList gap prop values → new spacing stop numbers
+// The old gap values used --dt-size-* stop numbers; the new values use --dt-spacing-* stop numbers.
+const GAP_MAP = {
+  0: '0',       // 0px
+  50: '1',      // 0.5px → 1px
+  100: '1',     // 1px
+  200: '25',    // 2px
+  300: '50',    // 4px
+  350: '75',    // 6px
+  400: '100',   // 8px
+  450: '150',   // 12px
+  500: '200',   // 16px
+  525: '250',   // 20px
+  550: '300',   // 24px
+  600: '400',   // 32px
+  625: '525',   // 42px
+  650: '600',   // 48px
+  700: '800',   // 64px
+  // 50 (0.5px) maps to 1 (1px) — closest non-subpixel stop
+};
+
+// Values that only exist in the NEW system — if a file contains these,
+// it has already been migrated. Used to detect and skip double-migration.
+const NEW_ONLY_VALUES = new Set(['25', '75', '150', '250', '525']);
+
+function isAlreadyMigrated (content) {
+  // Check for gap values that only exist in the new system
+  // If any are found, this file was already migrated
+  return [...NEW_ONLY_VALUES].some(v =>
+    content.includes(`gap="${v}"`) ||
+    content.includes(`gap="'${v}'"`) ||
+    content.includes(`d-stack--gap-${v}`) ||
+    content.includes(`d-description-list--gap-${v}`),
+  );
+}
+
+export default {
+  description:
+    'Migrates DtStack and DtDescriptionList gap prop values from old size stops to new spacing stops.\n' +
+    '- Replaces gap="400" with gap="100" (8px)\n' +
+    '- Replaces :gap="\'400\'" with :gap="\'100\'" (8px)\n' +
+    '- Also handles d-stack--gap-* and d-description-list--gap-* CSS class references.\n' +
+    '- gap="50" (0.5px) maps to gap="1" (1px) — closest non-subpixel stop.\n' +
+    '- SAFE TO RE-RUN: detects already-migrated files by checking for new-only values (25, 75, 150, 250, 525).\n',
+  patterns: ['**/*.{vue,html,js,ts,jsx,tsx,md}'],
+  globbyConfig: {
+    ignore: ['**/dialtone_migration_helper/tests/**'],
+  },
+  expressions: [
+    // gap="400" → gap="100" (static prop)
+    {
+      from: /gap="([0-9]+)"/g,
+      to: (match, value) => {
+        const mapped = GAP_MAP[Number(value)];
+        return mapped != null ? `gap="${mapped}"` : match;
+      },
+    },
+    // :gap="'400'" → :gap="'100'" (dynamic prop with string literal)
+    {
+      from: /:gap="'([0-9]+)'"/g,
+      to: (match, value) => {
+        const mapped = GAP_MAP[Number(value)];
+        return mapped != null ? `:gap="'${mapped}'"` : match;
+      },
+    },
+    // d-stack--gap-400 → d-stack--gap-100 (CSS class references in templates/JS)
+    {
+      from: /d-stack--gap-([0-9]+)/g,
+      to: (match, value) => {
+        const mapped = GAP_MAP[Number(value)];
+        return mapped != null ? `d-stack--gap-${mapped}` : match;
+      },
+    },
+    // d-description-list--gap-400 → d-description-list--gap-100 (CSS class references)
+    {
+      from: /d-description-list--gap-([0-9]+)/g,
+      to: (match, value) => {
+        const mapped = GAP_MAP[Number(value)];
+        return mapped != null ? `d-description-list--gap-${mapped}` : match;
+      },
+    },
+  ],
+  // Called by the migration helper before processing each file.
+  // Return false to skip the file (already migrated).
+  shouldProcessFile (content) {
+    return !isAlreadyMigrated(content);
+  },
+};

package/lib/build/js/dialtone_migration_helper/configs/utility-class-to-token-stops.mjs

@@ -0,0 +1,135 @@
+// Migration: old pixel-based utility class names → new token-stop-based class names
+// e.g. d-h16 → d-h-25, d-p8 → d-p-100, d-m8 → d-m-100
+
+// Sizing: pixel value → layout token stop
+// MUST STAY IN SYNC with WIDTH_HEIGHTS_LAYOUT in dialtone-css/postcss/constants.cjs
+const SIZING_MAP = {
+  16: '25', 32: '50', 48: '75', 64: '100', 80: '125', 96: '150',
+  112: '175', 128: '200', 160: '250', 192: '300', 224: '350', 256: '400',
+  288: '450', 320: '500', 352: '550', 384: '600', 416: '650', 448: '700',
+  480: '750', 512: '800', 544: '850', 576: '900', 608: '950', 640: '1000',
+  672: '1050', 704: '1100', 736: '1150', 768: '1200', 800: '1250',
+  832: '1300', 864: '1350', 896: '1400', 928: '1450', 960: '1500',
+  992: '1550', 1024: '1600',
+};
+
+// Small sizing values (0-12px) that map to spacing tokens, not layout tokens.
+// These old classes (d-h0, d-h1, d-h2, etc.) don't have a layout-stop equivalent.
+// They should be migrated to use the spacing token directly in CSS rather than a utility class,
+// or left as-is since the old classes still work.
+
+// Spacing: pixel value → spacing token stop
+// MUST STAY IN SYNC with GAP_SPACES_SPACING / MARGIN_SIZES_SPACING / PADDING_SIZES_SPACING in dialtone-css/postcss/constants.cjs
+const SPACING_MAP = {
+  0: '0', 1: '1', 2: '25', 4: '50', 6: '75', 8: '100',
+  10: '125', 12: '150', 14: '175', 16: '200', 20: '250', 24: '300',
+  32: '400', 48: '600', 64: '800',
+};
+
+// Negative spacing: old notation (n8) → new notation (n100)
+const NEGATIVE_SPACING_MAP = {
+  1: '1', 2: '25', 4: '50', 6: '75', 8: '100',
+  10: '125', 12: '150', 14: '175', 16: '200', 20: '250', 24: '300',
+  32: '400', 48: '600', 64: '800',
+};
+
+// Layout sizes for margin/padding (96px, 128px use layout tokens)
+const SPACING_LAYOUT_MAP = {
+  96: '150', 128: '200',
+};
+
+// Helper: build regex that matches class names with word boundaries
+// Sorted by descending key length to avoid partial matches (d-h1024 before d-h102)
+function buildClassRegex (prefix, map) {
+  const keys = Object.keys(map).sort((a, b) => b.length - a.length || Number(b) - Number(a));
+  const pattern = keys.join('|');
+  // Match class name boundary: preceded by space, quote, or start; followed by space, quote, or end
+  return new RegExp(`((?:^|["'\\s]))${prefix}(${pattern})((?:["'\\s]|$))`, 'gm');
+}
+
+export default {
+  description:
+    'Migrates pixel-based utility class names to token-stop-based names.\n' +
+    '- Sizing: d-h16 → d-h-25, d-w64 → d-w-100, d-hmn96 → d-hmn-150\n' +
+    '- Margin: d-m8 → d-m-100, d-mt16 → d-mt-200, d-mtn8 → d-mt-n100\n' +
+    '- Padding: d-p8 → d-p-100, d-pt16 → d-pt-200\n' +
+    '- Gap: d-g8 → d-g-100, d-rg16 → d-rg-200\n' +
+    '- Position: d-t8 → d-t-100, d-tn8 → d-t-n100\n' +
+    '- Old deprecated sizes (d-h72, d-w332, etc.) are left unchanged for manual review.\n',
+  patterns: ['**/*.{vue,html,js,ts,jsx,tsx,md,less,css}'],
+  globbyConfig: {
+    ignore: ['**/dialtone_migration_helper/tests/**', '**/node_modules/**'],
+  },
+  expressions: [
+    // ── Sizing: d-h{px} → d-h-{layout-stop} ──────────────────────────────
+    ...['h', 'w', 'hmn', 'hmx', 'wmn', 'wmx'].flatMap(prefix => [
+      // Layout sizes (16px+)
+      {
+        from: buildClassRegex(`d-${prefix}`, SIZING_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SIZING_MAP[px]}${post}`,
+      },
+      // Layout sizes for 96/128 (margin/padding also uses these for sizing)
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
+      },
+    ]),
+
+    // ── Margin: d-m{px} → d-m-{spacing-stop} ─────────────────────────────
+    ...['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my'].flatMap(prefix => [
+      // Spacing sizes (0-64px)
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+      },
+      // Layout sizes (96, 128px)
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
+      },
+    ]),
+
+    // ── Negative margin: d-m{dir}n{px} → d-m{dir}-n{spacing-stop} ────────
+    ...['mt', 'mr', 'mb', 'ml', 'mx', 'my', 'm'].map(prefix => ({
+      from: buildClassRegex(`d-${prefix}n`, NEGATIVE_SPACING_MAP),
+      to: (match, pre, px, post) => `${pre}d-${prefix}-n${NEGATIVE_SPACING_MAP[px]}${post}`,
+    })),
+
+    // ── Padding: d-p{px} → d-p-{spacing-stop} ────────────────────────────
+    ...['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].flatMap(prefix => [
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+      },
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
+      },
+    ]),
+
+    // ── Gap: d-g{px} → d-g-{spacing-stop} ────────────────────────────────
+    ...['g', 'rg', 'cg'].map(prefix => ({
+      from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+      to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+    })),
+
+    // ── Position: d-t{px} → d-t-{spacing-stop} ───────────────────────────
+    ...['t', 'r', 'b', 'l', 'x', 'y', 'all'].flatMap(prefix => [
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+      },
+      // Layout position sizes (96px)
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
+      },
+    ]),
+
+    // ── Negative position: d-{dir}n{px} → d-{dir}-n{spacing-stop} ────────
+    ...['t', 'r', 'b', 'l', 'x', 'y', 'all'].map(prefix => ({
+      from: buildClassRegex(`d-${prefix}n`, NEGATIVE_SPACING_MAP),
+      to: (match, pre, px, post) => `${pre}d-${prefix}-n${NEGATIVE_SPACING_MAP[px]}${post}`,
+    })),
+  ],
+};

package/lib/build/js/dialtone_migration_helper/tests/size-to-layout-test-examples.vue

@@ -0,0 +1,275 @@
+<template>
+  <!--
+    TEST FILE FOR SIZE-TO-LAYOUT MIGRATION
+    Tests context-aware migration of --dt-size-* tokens to either:
+      --dt-spacing-* (spacing properties: padding, margin, gap, inset)
+      --dt-layout-*  (layout properties: width, height, min/max, flex-basis)
+    Tokens exceeding the layout scale (>1024px) become raw rem + TODO comment.
+    Run: node packages/dialtone-css/lib/dist/js/dialtone_migration_helper/index.mjs --cwd .
+    then select "size-to-layout"
+  -->
+
+  <!-- ============================================ -->
+  <!-- VUE :style — SPACING CONTEXT                 -->
+  <!-- (should route to --dt-spacing-*)             -->
+  <!-- ============================================ -->
+
+  <p :style="{ padding: 'var(--dt-size-400)' }">size-400 on padding → spacing-100</p>
+  <p :style="{ margin: 'var(--dt-size-500)' }">size-500 on margin → spacing-200</p>
+  <p :style="{ gap: 'var(--dt-size-550)' }">size-550 on gap → spacing-300</p>
+
+  <!-- ============================================ -->
+  <!-- VUE :style — LAYOUT CONTEXT                  -->
+  <!-- (should route to --dt-layout-*)              -->
+  <!-- ============================================ -->
+
+  <div :style="{ width: 'var(--dt-size-700)' }">size-700 on width → layout-100</div>
+  <div :style="{ height: 'var(--dt-size-800)' }">size-800 on height → layout-200</div>
+  <div :style="{ maxWidth: 'var(--dt-size-1000)' }">size-1000 on max-width → layout-800</div>
+
+  <!-- Skip: already-migrated tokens -->
+  <div :style="{ width: 'var(--dt-layout-100)' }">already layout-100</div>
+  <p :style="{ padding: 'var(--dt-spacing-100)' }">already spacing-100</p>
+</template>
+
+<style lang="less">
+/* ============================================ */
+/* SPACING CONTEXT → --dt-spacing-*             */
+/* padding, margin, gap, inset and variants     */
+/* ============================================ */
+
+/* padding: all mapped stops */
+.test-padding-exact {
+  padding: var(--dt-size-0);          /* → spacing-0   (0px) */
+  padding: var(--dt-size-100);        /* → spacing-1   (1px) */
+  padding: var(--dt-size-200);        /* → spacing-25  (2px) */
+  padding: var(--dt-size-300);        /* → spacing-50  (4px) */
+  padding: var(--dt-size-350);        /* → spacing-75  (6px) */
+  padding: var(--dt-size-400);        /* → spacing-100 (8px) */
+  padding: var(--dt-size-450);        /* → spacing-150 (12px) */
+  padding: var(--dt-size-500);        /* → spacing-200 (16px) */
+  padding: var(--dt-size-525);        /* → spacing-250 (20px) */
+  padding: var(--dt-size-550);        /* → spacing-300 (24px) */
+  padding: var(--dt-size-600);        /* → spacing-400 (32px) */
+  padding: var(--dt-size-625);        /* → spacing-525 (42px) */
+  padding: var(--dt-size-650);        /* → spacing-600 (48px) */
+  padding: var(--dt-size-700);        /* → spacing-800 (64px) */
+}
+
+/* padding directional */
+.test-padding-directional {
+  padding-block-start: var(--dt-size-400);
+  padding-inline: var(--dt-size-550);
+  padding-block-start: var(--dt-size-300);
+  padding-inline-end: var(--dt-size-400);
+}
+
+/* margin */
+.test-margin {
+  margin: var(--dt-size-400);
+  margin-block-start: var(--dt-size-550);
+  margin-inline: var(--dt-size-600);
+  margin-block-end: var(--dt-size-300);
+}
+
+/* gap, row-gap, column-gap */
+.test-gap {
+  gap: var(--dt-size-400);
+  row-gap: var(--dt-size-550);
+  column-gap: var(--dt-size-300);
+}
+
+/* inset */
+.test-inset {
+  inset: var(--dt-size-400);
+  inset-block: var(--dt-size-300);
+  inset-inline-start: var(--dt-size-550);
+}
+
+/* shorthand with multiple size tokens */
+.test-padding-multi {
+  padding: var(--dt-size-400) var(--dt-size-550);
+  margin: var(--dt-size-300) var(--dt-size-400) var(--dt-size-550) var(--dt-size-600);
+}
+
+/* ============================================ */
+/* LAYOUT CONTEXT → --dt-layout-*               */
+/* width, height, min/max, flex-basis, logical  */
+/* ============================================ */
+
+/* width: exact matches */
+.test-width-exact {
+  inline-size: var(--dt-size-500);    /* → layout-25   (16px) */
+  inline-size: var(--dt-size-600);    /* → layout-50   (32px) */
+  inline-size: var(--dt-size-650);    /* → layout-75   (48px) */
+  inline-size: var(--dt-size-700);    /* → layout-100  (64px) */
+  inline-size: var(--dt-size-750);    /* → layout-150  (96px) */
+  inline-size: var(--dt-size-800);    /* → layout-200  (128px) */
+  inline-size: var(--dt-size-850);    /* → layout-300  (192px) */
+  inline-size: var(--dt-size-900);    /* → layout-400  (256px) */
+  inline-size: var(--dt-size-950);    /* → layout-600  (384px) */
+  inline-size: var(--dt-size-1000);   /* → layout-800  (512px) */
+  inline-size: var(--dt-size-1050);   /* → layout-1200 (768px) */
+  inline-size: var(--dt-size-1100);   /* → layout-1600 (1024px) */
+}
+
+/* height */
+.test-height {
+  block-size: var(--dt-size-700);
+  min-block-size: var(--dt-size-800);
+  max-block-size: var(--dt-size-1000);
+}
+
+/* min/max width */
+.test-minmax {
+  min-inline-size: var(--dt-size-650);
+  max-inline-size: var(--dt-size-900);
+  min-inline-size: var(--dt-size-1000);
+}
+
+/* flex-basis */
+.test-flex-basis {
+  flex-basis: var(--dt-size-700);
+  flex-basis: var(--dt-size-800);
+}
+
+/* logical layout properties */
+.test-logical-layout {
+  inline-size: var(--dt-size-700);
+  block-size: var(--dt-size-800);
+  min-inline-size: var(--dt-size-650);
+  max-inline-size: var(--dt-size-1000);
+  max-block-size: var(--dt-size-950);
+}
+
+/* ============================================ */
+/* NEAREST-NEIGHBOR MAPPINGS                    */
+/* No exact match — mapped to closest stop      */
+/* ============================================ */
+
+.test-nearest-neighbor {
+  inline-size: var(--dt-size-825);      /* 164px → layout-250  (160px, Δ4px) */
+  inline-size: var(--dt-size-875);      /* 216px → layout-350  (224px, Δ8px) */
+  inline-size: var(--dt-size-905);      /* 264px → layout-400  (256px, Δ8px) */
+  inline-size: var(--dt-size-925);      /* 332px → layout-500  (320px, Δ12px) */
+  block-size: var(--dt-size-975);     /* 464px → layout-700  (448px, Δ16px) */
+  inline-size: var(--dt-size-1020);     /* 628px → layout-1000 (640px, Δ12px) */
+  max-inline-size: var(--dt-size-1040); /* 764px → layout-1200 (768px, Δ4px) */
+  max-inline-size: var(--dt-size-1060); /* 828px → layout-1300 (832px, Δ4px) */
+  max-block-size: var(--dt-size-1080); /* 912px → layout-1400 (896px, Δ16px) */
+}
+
+/* ============================================ */
+/* RAW FALLBACK (exceeds layout scale >1024px)  */
+/* Converted to rem + TODO comment              */
+/* ============================================ */
+
+.test-raw-fallback {
+  max-inline-size: var(--dt-size-1115); /* 1140px → 71.25rem + TODO comment */
+  max-inline-size: var(--dt-size-1120); /* 1268px → 79.25rem + TODO comment */
+  max-inline-size: var(--dt-size-1125); /* 1280px → 80rem + TODO comment */
+  max-inline-size: var(--dt-size-1130); /* 1340px → 83.75rem + TODO comment */
+  inline-size: var(--dt-size-1150);     /* 1536px → 96rem + TODO comment */
+  inline-size: var(--dt-size-1200);     /* 2048px → 128rem + TODO comment */
+}
+
+/* ============================================ */
+/* CUSTOM PROPERTY DEFINITIONS                  */
+/* Script routes by keyword in property name    */
+/* ============================================ */
+
+/* Spacing keywords in custom property name → --dt-spacing-* */
+.test-custom-spacing {
+  --badge-padding-y: var(--dt-size-400);        /* "padding" → spacing-100 (8px) */
+  --badge-padding-x: var(--dt-size-550);        /* "padding" → spacing-300 (24px) */
+  --badge-label-padding-x: var(--dt-size-500);  /* "padding" → spacing-200 (16px) */
+  --badge-letter-spacing: var(--dt-size-100);   /* "spacing" → spacing-1   (1px) */
+  --badge-gap: var(--dt-size-300);              /* "gap"     → spacing-50  (4px) */
+  --item-margin-start: var(--dt-size-400);      /* "margin"  → spacing-100 (8px) */
+  --item-inset-y: var(--dt-size-300);           /* "inset"   → spacing-50  (4px) */
+}
+
+/* Layout keywords in custom property name → --dt-layout-* */
+.test-custom-layout {
+  --badge-radius: var(--dt-size-700);           /* "radius" → layout-100  (64px) */
+  --panel-width: var(--dt-size-1050);           /* "width"  → layout-1200 (768px) */
+  --sidebar-min-width: var(--dt-size-900);      /* "width"  → layout-400  (256px) */
+  --avatar-basis: var(--dt-size-700);           /* "basis"  → layout-100  (64px) */
+}
+
+/* Ambiguous custom property — no keyword match → default fallback (layout map) */
+/* NOTE: "line-height" intentionally excluded from height keyword matching */
+/* These require manual review after migration */
+.test-custom-ambiguous {
+  --badge-line-height: var(--dt-size-500);   /* no keyword match → layout-25 (default) */
+  --overlay-depth: var(--dt-size-700);       /* no keyword match → layout-100 (default) */
+}
+
+/* ============================================ */
+/* SKIP CASES (should NOT be modified)          */
+/* ============================================ */
+
+/* Already using --dt-layout-* */
+.test-skip-already-layout {
+  inline-size: var(--dt-layout-100);
+  block-size: var(--dt-layout-200);
+  max-inline-size: var(--dt-layout-800);
+}
+
+/* Already using --dt-spacing-* */
+.test-skip-already-spacing {
+  padding: var(--dt-spacing-100);
+  margin: var(--dt-spacing-300);
+  gap: var(--dt-spacing-400);
+}
+
+/* Unknown stop number (not in any map — passed through, lint will flag) */
+.test-skip-unknown {
+  inline-size: var(--dt-size-999);
+  padding: var(--dt-size-123);
+}
+
+/* ============================================ */
+/* ADDITIONAL COVERAGE (from review feedback)   */
+/* ============================================ */
+
+/* --dt-size-50 in spacing context → spacing-1 (0.5px → 1px nearest) */
+.test-size-50-spacing {
+  padding: var(--dt-size-50);           /* → spacing-1 */
+  letter-spacing: var(--dt-size-50);    /* → spacing-1 (via default) */
+}
+
+/* Unmapped layout stops that should now have nearest-neighbor entries */
+.test-newly-mapped-stops {
+  inline-size: var(--dt-size-720);      /* 72px → layout-100 (64px) */
+  inline-size: var(--dt-size-730);      /* 84px → layout-125 (80px) */
+  inline-size: var(--dt-size-760);      /* 102px → layout-150 (96px) */
+  inline-size: var(--dt-size-775);      /* 114px → layout-175 (112px) */
+}
+
+/* Negative and percent suffixes */
+.test-suffixes {
+  margin: var(--dt-size-400-negative);  /* → spacing-100-negative */
+  inline-size: var(--dt-size-100-percent); /* → layout-100-percent */
+}
+
+/* calc(var(--dt-spacing-*) * -1) → negative token cleanup */
+.test-calc-negation {
+  inset: calc(var(--dt-spacing-100) * -1);  /* → var(--dt-spacing-100-negative) */
+  margin: calc(var(--dt-spacing-300) * -1); /* → var(--dt-spacing-300-negative) */
+}
+
+/* Border-width context → --dt-size-border-* */
+.test-border-width {
+  border: var(--dt-size-100) solid red;         /* → dt-size-border-100 */
+  border-width: var(--dt-size-200);             /* → dt-size-border-200 */
+  outline: var(--dt-size-100) solid;            /* → dt-size-border-100 */
+}
+
+/* Border-radius context → --dt-size-radius-* */
+.test-border-radius {
+  border-radius: var(--dt-size-300);            /* → dt-size-radius-300 */
+  border-radius: var(--dt-size-400);            /* → dt-size-radius-400 */
+  --badge-radius: var(--dt-size-300);           /* "radius" keyword → dt-size-radius-300 */
+}
+</style>