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

package/lib/build/js/dialtone_migrate_tshirt_to_numeric/index.mjs

@@ -0,0 +1,233 @@
+#!/usr/bin/env node
+
+/**
+ * @fileoverview Migration script to convert t-shirt size props to numeric scale on Dialtone components.
+ *
+ * Transforms: size="sm" → :size="200", label-size="xs" → :label-size="100", speed="md" → :speed="300"
+ *
+ * Usage:
+ *   npx dialtone-migrate-tshirt-to-numeric [options]
+ *
+ * Options:
+ *   --cwd <path>     Working directory (default: current directory)
+ *   --dry-run        Show changes without applying them
+ *   --yes            Apply all changes without prompting
+ *   --help           Show help
+ *
+ * Examples:
+ *   npx dialtone-migrate-tshirt-to-numeric
+ *   npx dialtone-migrate-tshirt-to-numeric --dry-run
+ *   npx dialtone-migrate-tshirt-to-numeric --cwd ./src
+ */
+
+import fs from 'fs/promises';
+import { realpathSync } from 'node:fs';
+import path from 'path';
+import readline from 'readline';
+import { fileURLToPath } from 'node:url';
+
+// ---------------------------------------------------------------------------
+// Mapping
+// ---------------------------------------------------------------------------
+
+const SIZE_MAP = {
+  xs: '100',
+  sm: '200',
+  md: '300',
+  lg: '400',
+  xl: '500',
+  '2xl': '600',
+  '3xl': '700',
+};
+
+const TSHIRT_VALUES = Object.keys(SIZE_MAP).join('|');
+
+// Match any prop ending in size/Size/speed/Speed with a t-shirt value.
+// In the replacer, check that the character before the match is NOT a colon (v-bind).
+const PROP_REGEX = new RegExp(
+  `([\\w-]*(?:[Ss]ize|[Ss]peed))="(${TSHIRT_VALUES})"`,
+  'g',
+);
+
+// Props that end in "size" but are NOT component scale sizes — exclude from migration
+const EXCLUDED_PROPS = ['button-width-size', 'buttonWidthSize', 'background-size', 'backgroundSize', 'font-size', 'fontSize'];
+
+// Only match on Dialtone component tags
+// Use [\s\S] instead of [^>] to match across newlines in multiline tags
+const DT_TAG_PATTERN = /<(dt-[\w-]+|Dt\w+)\b[\s\S]*?>/g;
+
+// ---------------------------------------------------------------------------
+// File finder
+// ---------------------------------------------------------------------------
+
+async function findFiles (dir, extensions, ignore = []) {
+  const results = [];
+
+  async function walk (currentDir) {
+    try {
+      const entries = await fs.readdir(currentDir, { withFileTypes: true });
+      for (const entry of entries) {
+        const fullPath = path.join(currentDir, entry.name);
+        if (ignore.some(ig => fullPath.includes(ig))) continue;
+        if (entry.isDirectory()) {
+          await walk(fullPath);
+        } else if (entry.isFile()) {
+          if (extensions.some(ext => entry.name.endsWith(ext))) {
+            results.push(fullPath);
+          }
+        }
+      }
+    } catch {
+      // Skip unreadable directories
+    }
+  }
+
+  await walk(dir);
+  return results;
+}
+
+// ---------------------------------------------------------------------------
+// Transform logic
+// ---------------------------------------------------------------------------
+
+function transformContent (content) {
+  let transformed = content;
+  let count = 0;
+
+  // Replace t-shirt sizes only within Dialtone component tags
+  transformed = transformed.replace(DT_TAG_PATTERN, (tag) => {
+    PROP_REGEX.lastIndex = 0;
+    return tag.replace(PROP_REGEX, (match, propName, tshirt, offset, fullTag) => {
+      // Skip if preceded by ':' (already a v-bind expression)
+      if (offset > 0 && fullTag[offset - 1] === ':') return match;
+      // Skip excluded prop names (not component scale sizes)
+      if (EXCLUDED_PROPS.includes(propName)) return match;
+      if (SIZE_MAP[tshirt]) {
+        count++;
+        return `:${propName}="${SIZE_MAP[tshirt]}"`;
+      }
+      return match;
+    });
+  });
+
+  return { transformed, count };
+}
+
+export { transformContent, SIZE_MAP };
+
+// ---------------------------------------------------------------------------
+// CLI
+// ---------------------------------------------------------------------------
+
+function printHelp () {
+  console.log(`
+Usage: npx dialtone-migrate-tshirt-to-numeric [options]
+
+Converts t-shirt size props to numeric scale on Dialtone components.
+
+  size="sm"       → :size="200"
+  label-size="xs" → :label-size="100"
+  speed="md"      → :speed="300"
+
+Options:
+  --cwd <path>     Working directory (default: current directory)
+  --dry-run        Show changes without applying them
+  --yes            Apply all changes without prompting
+  --help           Show help
+
+Size mapping:
+  xs → 100    sm → 200    md → 300    lg → 400    xl → 500
+  2xl → 600   3xl → 700
+`);
+}
+
+async function prompt (question) {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise(resolve => {
+    rl.question(question, answer => {
+      rl.close();
+      resolve(answer.trim().toLowerCase());
+    });
+  });
+}
+
+// eslint-disable-next-line complexity
+async function main () {
+  const args = process.argv.slice(2);
+
+  if (args.includes('--help')) {
+    printHelp();
+    process.exit(0);
+  }
+
+  const dryRun = args.includes('--dry-run');
+  const autoYes = args.includes('--yes');
+  const cwdIndex = args.indexOf('--cwd');
+  const cwd = cwdIndex !== -1 && args[cwdIndex + 1]
+    ? path.resolve(args[cwdIndex + 1])
+    : process.cwd();
+
+  console.log(`\nScanning ${cwd} for t-shirt size usage on Dialtone components...\n`);
+
+  const extensions = ['.vue', '.md', '.html', '.js', '.ts', '.jsx', '.tsx'];
+  const ignore = ['node_modules', 'dist', '.git', '.vuepress/public'];
+  const files = await findFiles(cwd, extensions, ignore);
+
+  const changes = [];
+
+  for (const file of files) {
+    const content = await fs.readFile(file, 'utf8');
+    const { transformed, count } = transformContent(content);
+    if (count > 0) {
+      changes.push({ file, content, transformed, count });
+    }
+  }
+
+  if (changes.length === 0) {
+    console.log('No t-shirt size usage found. Nothing to migrate.');
+    process.exit(0);
+  }
+
+  console.log(`Found ${changes.reduce((sum, c) => sum + c.count, 0)} t-shirt size references across ${changes.length} files:\n`);
+
+  for (const { file, count } of changes) {
+    const rel = path.relative(cwd, file);
+    console.log(`  ${rel} (${count} change${count > 1 ? 's' : ''})`);
+  }
+
+  if (dryRun) {
+    console.log('\n--dry-run: No files were modified.\n');
+    process.exit(0);
+  }
+
+  if (!autoYes) {
+    const answer = await prompt('\nApply changes? (y/N) ');
+    if (answer !== 'y' && answer !== 'yes') {
+      console.log('Cancelled.');
+      process.exit(0);
+    }
+  }
+
+  for (const { file, transformed } of changes) {
+    await fs.writeFile(file, transformed, 'utf8');
+  }
+
+  console.log(`\nMigrated ${changes.reduce((sum, c) => sum + c.count, 0)} references across ${changes.length} files.\n`);
+}
+
+// Only run CLI when executed directly (not when imported for testing).
+// Uses realpathSync to resolve symlinks from npx/npm bin shims.
+const isDirectRun = (() => {
+  try {
+    return realpathSync(process.argv[1]) === fileURLToPath(import.meta.url);
+  } catch {
+    return false;
+  }
+})();
+
+if (isDirectRun) {
+  main().catch(err => {
+    console.error(err);
+    process.exit(1);
+  });
+}

package/lib/build/js/dialtone_migrate_tshirt_to_numeric/test.mjs

@@ -0,0 +1,336 @@
+#!/usr/bin/env node
+
+/**
+ * @fileoverview Tests for dialtone-migrate-tshirt-to-numeric codemod.
+ * Run: node packages/dialtone-css/lib/build/js/dialtone_migrate_tshirt_to_numeric/test.mjs
+ */
+
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { transformContent } from './index.mjs';
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('Basic size prop transforms', () => {
+  it('transforms size="xs" to :size="100"', () => {
+    const input = '<dt-button size="xs">Click</dt-button>';
+    const expected = '<dt-button :size="100">Click</dt-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, expected);
+    assert.equal(count, 1);
+  });
+
+  it('transforms size="sm" to :size="200"', () => {
+    const input = '<dt-text size="sm">Hello</dt-text>';
+    const expected = '<dt-text :size="200">Hello</dt-text>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="md" to :size="300"', () => {
+    const input = '<dt-input size="md" label="Name" />';
+    const expected = '<dt-input :size="300" label="Name" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="lg" to :size="400"', () => {
+    const input = '<dt-toggle size="lg" />';
+    const expected = '<dt-toggle :size="400" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="xl" to :size="500"', () => {
+    const input = '<dt-segmented-control size="xl" />';
+    const expected = '<dt-segmented-control :size="500" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="2xl" to :size="600"', () => {
+    const input = '<dt-text kind="headline" size="2xl">Title</dt-text>';
+    const expected = '<dt-text kind="headline" :size="600">Title</dt-text>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="3xl" to :size="700"', () => {
+    const input = '<dt-text kind="headline" size="3xl">Title</dt-text>';
+    const expected = '<dt-text kind="headline" :size="700">Title</dt-text>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('label-size prop transforms', () => {
+  it('transforms label-size="xs" to :label-size="100"', () => {
+    const input = '<dt-input label-size="xs" label="Name" />';
+    const expected = '<dt-input :label-size="100" label="Name" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms label-size="lg" to :label-size="400"', () => {
+    const input = '<dt-select-menu label-size="lg" />';
+    const expected = '<dt-select-menu :label-size="400" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('speed prop transforms', () => {
+  it('transforms speed="sm" to :speed="200"', () => {
+    const input = '<dt-motion-text speed="sm" text="Hello" />';
+    const expected = '<dt-motion-text :speed="200" text="Hello" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms speed="lg" to :speed="400"', () => {
+    const input = '<dt-motion-text speed="lg" text="Hello" />';
+    const expected = '<dt-motion-text :speed="400" text="Hello" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('Does NOT transform non-Dialtone components', () => {
+  it('ignores size on native elements', () => {
+    const input = '<div size="sm">Not a component</div>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores size on non-dt components', () => {
+    const input = '<my-button size="sm">Click</my-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores size on custom elements without dt- prefix', () => {
+    const input = '<app-select size="md" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+});
+
+describe('Does NOT transform already-numeric or dynamic values', () => {
+  it('ignores :size="200" (already numeric binding)', () => {
+    const input = '<dt-button :size="200">Click</dt-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores :size="sm" (already a v-bind, consumer chose string)', () => {
+    const input = '<dt-button :size="sm">Click</dt-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores :label-size="xs" (already a v-bind)', () => {
+    const input = '<dt-input :label-size="xs" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores :size="computedSize" (dynamic binding)', () => {
+    const input = '<dt-button :size="computedSize">Click</dt-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores :size="iconSize" (icon size binding)', () => {
+    const input = '<dt-icon :size="iconSize" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores numeric string size="200" on dt-icon (icon scale)', () => {
+    const input = '<dt-icon size="200" name="phone" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+});
+
+describe('PascalCase component names', () => {
+  it('transforms DtButton size', () => {
+    const input = '<DtButton size="sm">Click</DtButton>';
+    const expected = '<DtButton :size="200">Click</DtButton>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms DtText size', () => {
+    const input = '<DtText size="xl">Title</DtText>';
+    const expected = '<DtText :size="500">Title</DtText>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('Multiple transforms in one tag', () => {
+  it('transforms size and label-size on same component', () => {
+    const input = '<dt-input size="lg" label-size="sm" label="Name" />';
+    const expected = '<dt-input :size="400" :label-size="200" label="Name" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, expected);
+    assert.equal(count, 2);
+  });
+});
+
+describe('Multiple components in one template', () => {
+  it('transforms all Dialtone components, ignores others', () => {
+    const input = `<template>
+  <div>
+    <dt-button size="sm">Small</dt-button>
+    <my-button size="sm">Not Dialtone</my-button>
+    <dt-text size="xl">Title</dt-text>
+    <dt-icon size="200" name="phone" />
+  </div>
+</template>`;
+    const expected = `<template>
+  <div>
+    <dt-button :size="200">Small</dt-button>
+    <my-button size="sm">Not Dialtone</my-button>
+    <dt-text :size="500">Title</dt-text>
+    <dt-icon size="200" name="phone" />
+  </div>
+</template>`;
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, expected);
+    assert.equal(count, 2);
+  });
+});
+
+describe('Real-world patterns from the monorepo', () => {
+  it('transforms button in notice action slot', () => {
+    const input = '<dt-button size="sm" importance="outlined" kind="muted">Action</dt-button>';
+    const expected = '<dt-button :size="200" importance="outlined" kind="muted">Action</dt-button>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms text inside card variant template', () => {
+    const input = '<dt-text as="p" kind="headline" size="md">Lorem ipsum</dt-text>';
+    const expected = '<dt-text as="p" kind="headline" :size="300">Lorem ipsum</dt-text>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms avatar size', () => {
+    const input = '<dt-avatar size="md" :full-name="item.id" />';
+    const expected = '<dt-avatar :size="300" :full-name="item.id" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms motion-text speed in story', () => {
+    const input = '<dt-motion-text speed="md" text="Animated" :auto-start="false" />';
+    const expected = '<dt-motion-text :speed="300" text="Animated" :auto-start="false" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('handles multiline component tags', () => {
+    const input = `<dt-button
+      size="xs"
+      kind="muted"
+      importance="clear"
+    >`;
+    const expected = `<dt-button
+      :size="100"
+      kind="muted"
+      importance="clear"
+    >`;
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('Future-proof: any compound *-size prop', () => {
+  it('transforms description-size="sm" to :description-size="200"', () => {
+    const input = '<dt-input description-size="sm" />';
+    const expected = '<dt-input :description-size="200" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms icon-size="lg" to :icon-size="400"', () => {
+    const input = '<dt-badge icon-size="lg" />';
+    const expected = '<dt-badge :icon-size="400" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms header-size="xl" to :header-size="500"', () => {
+    const input = '<dt-card header-size="xl" />';
+    const expected = '<dt-card :header-size="500" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('camelCase prop names', () => {
+  it('transforms labelSize="xs" to :labelSize="100"', () => {
+    const input = '<dt-input labelSize="xs" />';
+    const expected = '<dt-input :labelSize="100" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms descriptionSize="md" to :descriptionSize="300"', () => {
+    const input = '<dt-input descriptionSize="md" />';
+    const expected = '<dt-input :descriptionSize="300" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('Excluded props (not component scale sizes)', () => {
+  it('ignores button-width-size="md"', () => {
+    const input = '<dt-recipe-callbar-button button-width-size="md" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores buttonWidthSize="lg"', () => {
+    const input = '<DtCallbarButton buttonWidthSize="lg" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+});
+
+describe('Edge cases', () => {
+  it('does not transform size inside text content', () => {
+    const input = '<dt-text>The size="sm" option is deprecated</dt-text>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('returns count of 0 for content with no matches', () => {
+    const input = '<div><span>No Dialtone here</span></div>';
+    const { count } = transformContent(input);
+    assert.equal(count, 0);
+  });
+
+  it('handles empty string', () => {
+    const { transformed, count } = transformContent('');
+    assert.equal(transformed, '');
+    assert.equal(count, 0);
+  });
+});

package/lib/build/js/dialtone_migration_helper/configs/physical-to-logical.mjs

@@ -0,0 +1,86 @@
+// Migration: deprecated physical direction slot/prop/event names → logical equivalents.
+// Covers Vue template directives only. Does NOT cover:
+// - #icon on dt-button (ambiguous — requires manual migration)
+// - Dynamic bindings or script-section references
+
+export default {
+  description:
+    'Renames deprecated physical direction names (left/right/top/bottom/alpha/omega) to\n' +
+    'logical equivalents (start/end/blockStart/blockEnd) in Vue template slots, props,\n' +
+    'prop values, and events. Does NOT rename #icon on dt-button (ambiguous).',
+  patterns: ['**/*.{vue,html,md,js,ts,jsx,tsx}'],
+  expressions: [
+    // ── Slot renames ──────────────────────────────────────────────────────
+    // Longer patterns first to prevent partial matches.
+    // e.g. #leftIcon before #left, #rightIcon before #right
+
+    // #leftIcon → #startIcon
+    { from: /#leftIcon/g, to: '#startIcon' },
+    // #rightIcon → #endIcon
+    { from: /#rightIcon/g, to: '#endIcon' },
+    // #alphaIcon → #startIcon
+    { from: /#alphaIcon/g, to: '#startIcon' },
+    // #omegaIcon → #endIcon
+    { from: /#omegaIcon/g, to: '#endIcon' },
+    // #leftContent → #startContent
+    { from: /#leftContent/g, to: '#startContent' },
+    // #rightContent → #endContent
+    { from: /#rightContent/g, to: '#endContent' },
+    // #omega → #end (word boundary to avoid matching #omegaIcon)
+    // Scoped: only dt-split-button uses #omega
+    { from: /#omega(?=[\s"'>])/g, to: '#end' },
+
+    // Generic short slot names (#left, #right, #bottom) are scoped to known
+    // Dialtone components to avoid renaming slots on non-Dialtone components.
+    // Uses multiline matching to find the slot within a dt-* or dt-recipe-* tag.
+    // Components: dt-item-layout, dt-recipe-callbox, dt-recipe-contact-centers-row,
+    //             dt-recipe-general-row, dt-recipe-top-banner-info
+
+    // #left → #start (only on dt-item-layout, dt-recipe-general-row, dt-recipe-top-banner-info)
+    { from: /(<dt-(?:item-layout|recipe-general-row|recipe-top-banner-info)[\s\S]*?)#left(?=[\s"'>])/gm, to: '$1#start' },
+    // #right → #end (only on dt-item-layout, dt-recipe-callbox, dt-recipe-contact-centers-row, dt-recipe-top-banner-info)
+    { from: /(<dt-(?:item-layout|recipe-callbox|recipe-contact-centers-row|recipe-top-banner-info)[\s\S]*?)#right(?=[\s"'>])/gm, to: '$1#end' },
+    // #bottom → #blockEnd (only on dt-item-layout, dt-recipe-callbox)
+    { from: /(<dt-(?:item-layout|recipe-callbox)[\s\S]*?)#bottom(?=[\s"'>])/gm, to: '$1#blockEnd' },
+
+    // ── Prop renames ──────────────────────────────────────────────────────
+    // Longer patterns first within each prefix group.
+
+    // alpha-* → start-* (longest first)
+    { from: /alpha-trailing-class/g, to: 'start-trailing-class' },
+    { from: /alpha-tooltip-text/g, to: 'start-tooltip-text' },
+    { from: /alpha-leading-class/g, to: 'start-leading-class' },
+    { from: /alpha-icon-position/g, to: 'start-icon-position' },
+    { from: /alpha-aria-label/g, to: 'start-aria-label' },
+    { from: /alpha-label-class/g, to: 'start-label-class' },
+    { from: /alpha-disabled/g, to: 'start-disabled' },
+    { from: /alpha-loading/g, to: 'start-loading' },
+    { from: /alpha-active/g, to: 'start-active' },
+
+    // omega-* → end-* (longest first)
+    { from: /omega-tooltip-text/g, to: 'end-tooltip-text' },
+    { from: /omega-aria-label/g, to: 'end-aria-label' },
+    { from: /omega-disabled/g, to: 'end-disabled' },
+    { from: /omega-active/g, to: 'end-active' },
+    { from: /omega-id/g, to: 'end-id' },
+
+    // layout class props
+    { from: /bottom-class=/g, to: 'block-end-class=' },
+    { from: /left-class=/g, to: 'start-class=' },
+    { from: /right-class=/g, to: 'end-class=' },
+
+    // ── Prop value renames ────────────────────────────────────────────────
+    // icon-position values
+    { from: /icon-position="left"/g, to: 'icon-position="start"' },
+    { from: /icon-position="right"/g, to: 'icon-position="end"' },
+    { from: /icon-position="top"/g, to: 'icon-position="blockStart"' },
+    { from: /icon-position="bottom"/g, to: 'icon-position="blockEnd"' },
+    // sidebar-position values
+    { from: /sidebar-position="left"/g, to: 'sidebar-position="start"' },
+    { from: /sidebar-position="right"/g, to: 'sidebar-position="end"' },
+
+    // ── Event renames ─────────────────────────────────────────────────────
+    { from: /@alpha-clicked/g, to: '@start-clicked' },
+    { from: /@omega-clicked/g, to: '@end-clicked' },
+  ],
+};

package/lib/dist/js/dialtone_migrate_tshirt_to_numeric/index.mjs

@@ -0,0 +1,233 @@
+#!/usr/bin/env node
+
+/**
+ * @fileoverview Migration script to convert t-shirt size props to numeric scale on Dialtone components.
+ *
+ * Transforms: size="sm" → :size="200", label-size="xs" → :label-size="100", speed="md" → :speed="300"
+ *
+ * Usage:
+ *   npx dialtone-migrate-tshirt-to-numeric [options]
+ *
+ * Options:
+ *   --cwd <path>     Working directory (default: current directory)
+ *   --dry-run        Show changes without applying them
+ *   --yes            Apply all changes without prompting
+ *   --help           Show help
+ *
+ * Examples:
+ *   npx dialtone-migrate-tshirt-to-numeric
+ *   npx dialtone-migrate-tshirt-to-numeric --dry-run
+ *   npx dialtone-migrate-tshirt-to-numeric --cwd ./src
+ */
+
+import fs from 'fs/promises';
+import { realpathSync } from 'node:fs';
+import path from 'path';
+import readline from 'readline';
+import { fileURLToPath } from 'node:url';
+
+// ---------------------------------------------------------------------------
+// Mapping
+// ---------------------------------------------------------------------------
+
+const SIZE_MAP = {
+  xs: '100',
+  sm: '200',
+  md: '300',
+  lg: '400',
+  xl: '500',
+  '2xl': '600',
+  '3xl': '700',
+};
+
+const TSHIRT_VALUES = Object.keys(SIZE_MAP).join('|');
+
+// Match any prop ending in size/Size/speed/Speed with a t-shirt value.
+// In the replacer, check that the character before the match is NOT a colon (v-bind).
+const PROP_REGEX = new RegExp(
+  `([\\w-]*(?:[Ss]ize|[Ss]peed))="(${TSHIRT_VALUES})"`,
+  'g',
+);
+
+// Props that end in "size" but are NOT component scale sizes — exclude from migration
+const EXCLUDED_PROPS = ['button-width-size', 'buttonWidthSize', 'background-size', 'backgroundSize', 'font-size', 'fontSize'];
+
+// Only match on Dialtone component tags
+// Use [\s\S] instead of [^>] to match across newlines in multiline tags
+const DT_TAG_PATTERN = /<(dt-[\w-]+|Dt\w+)\b[\s\S]*?>/g;
+
+// ---------------------------------------------------------------------------
+// File finder
+// ---------------------------------------------------------------------------
+
+async function findFiles (dir, extensions, ignore = []) {
+  const results = [];
+
+  async function walk (currentDir) {
+    try {
+      const entries = await fs.readdir(currentDir, { withFileTypes: true });
+      for (const entry of entries) {
+        const fullPath = path.join(currentDir, entry.name);
+        if (ignore.some(ig => fullPath.includes(ig))) continue;
+        if (entry.isDirectory()) {
+          await walk(fullPath);
+        } else if (entry.isFile()) {
+          if (extensions.some(ext => entry.name.endsWith(ext))) {
+            results.push(fullPath);
+          }
+        }
+      }
+    } catch {
+      // Skip unreadable directories
+    }
+  }
+
+  await walk(dir);
+  return results;
+}
+
+// ---------------------------------------------------------------------------
+// Transform logic
+// ---------------------------------------------------------------------------
+
+function transformContent (content) {
+  let transformed = content;
+  let count = 0;
+
+  // Replace t-shirt sizes only within Dialtone component tags
+  transformed = transformed.replace(DT_TAG_PATTERN, (tag) => {
+    PROP_REGEX.lastIndex = 0;
+    return tag.replace(PROP_REGEX, (match, propName, tshirt, offset, fullTag) => {
+      // Skip if preceded by ':' (already a v-bind expression)
+      if (offset > 0 && fullTag[offset - 1] === ':') return match;
+      // Skip excluded prop names (not component scale sizes)
+      if (EXCLUDED_PROPS.includes(propName)) return match;
+      if (SIZE_MAP[tshirt]) {
+        count++;
+        return `:${propName}="${SIZE_MAP[tshirt]}"`;
+      }
+      return match;
+    });
+  });
+
+  return { transformed, count };
+}
+
+export { transformContent, SIZE_MAP };
+
+// ---------------------------------------------------------------------------
+// CLI
+// ---------------------------------------------------------------------------
+
+function printHelp () {
+  console.log(`
+Usage: npx dialtone-migrate-tshirt-to-numeric [options]
+
+Converts t-shirt size props to numeric scale on Dialtone components.
+
+  size="sm"       → :size="200"
+  label-size="xs" → :label-size="100"
+  speed="md"      → :speed="300"
+
+Options:
+  --cwd <path>     Working directory (default: current directory)
+  --dry-run        Show changes without applying them
+  --yes            Apply all changes without prompting
+  --help           Show help
+
+Size mapping:
+  xs → 100    sm → 200    md → 300    lg → 400    xl → 500
+  2xl → 600   3xl → 700
+`);
+}
+
+async function prompt (question) {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise(resolve => {
+    rl.question(question, answer => {
+      rl.close();
+      resolve(answer.trim().toLowerCase());
+    });
+  });
+}
+
+// eslint-disable-next-line complexity
+async function main () {
+  const args = process.argv.slice(2);
+
+  if (args.includes('--help')) {
+    printHelp();
+    process.exit(0);
+  }
+
+  const dryRun = args.includes('--dry-run');
+  const autoYes = args.includes('--yes');
+  const cwdIndex = args.indexOf('--cwd');
+  const cwd = cwdIndex !== -1 && args[cwdIndex + 1]
+    ? path.resolve(args[cwdIndex + 1])
+    : process.cwd();
+
+  console.log(`\nScanning ${cwd} for t-shirt size usage on Dialtone components...\n`);
+
+  const extensions = ['.vue', '.md', '.html', '.js', '.ts', '.jsx', '.tsx'];
+  const ignore = ['node_modules', 'dist', '.git', '.vuepress/public'];
+  const files = await findFiles(cwd, extensions, ignore);
+
+  const changes = [];
+
+  for (const file of files) {
+    const content = await fs.readFile(file, 'utf8');
+    const { transformed, count } = transformContent(content);
+    if (count > 0) {
+      changes.push({ file, content, transformed, count });
+    }
+  }
+
+  if (changes.length === 0) {
+    console.log('No t-shirt size usage found. Nothing to migrate.');
+    process.exit(0);
+  }
+
+  console.log(`Found ${changes.reduce((sum, c) => sum + c.count, 0)} t-shirt size references across ${changes.length} files:\n`);
+
+  for (const { file, count } of changes) {
+    const rel = path.relative(cwd, file);
+    console.log(`  ${rel} (${count} change${count > 1 ? 's' : ''})`);
+  }
+
+  if (dryRun) {
+    console.log('\n--dry-run: No files were modified.\n');
+    process.exit(0);
+  }
+
+  if (!autoYes) {
+    const answer = await prompt('\nApply changes? (y/N) ');
+    if (answer !== 'y' && answer !== 'yes') {
+      console.log('Cancelled.');
+      process.exit(0);
+    }
+  }
+
+  for (const { file, transformed } of changes) {
+    await fs.writeFile(file, transformed, 'utf8');
+  }
+
+  console.log(`\nMigrated ${changes.reduce((sum, c) => sum + c.count, 0)} references across ${changes.length} files.\n`);
+}
+
+// Only run CLI when executed directly (not when imported for testing).
+// Uses realpathSync to resolve symlinks from npx/npm bin shims.
+const isDirectRun = (() => {
+  try {
+    return realpathSync(process.argv[1]) === fileURLToPath(import.meta.url);
+  } catch {
+    return false;
+  }
+})();
+
+if (isDirectRun) {
+  main().catch(err => {
+    console.error(err);
+    process.exit(1);
+  });
+}

package/lib/dist/js/dialtone_migrate_tshirt_to_numeric/test.mjs

@@ -0,0 +1,336 @@
+#!/usr/bin/env node
+
+/**
+ * @fileoverview Tests for dialtone-migrate-tshirt-to-numeric codemod.
+ * Run: node packages/dialtone-css/lib/build/js/dialtone_migrate_tshirt_to_numeric/test.mjs
+ */
+
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { transformContent } from './index.mjs';
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('Basic size prop transforms', () => {
+  it('transforms size="xs" to :size="100"', () => {
+    const input = '<dt-button size="xs">Click</dt-button>';
+    const expected = '<dt-button :size="100">Click</dt-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, expected);
+    assert.equal(count, 1);
+  });
+
+  it('transforms size="sm" to :size="200"', () => {
+    const input = '<dt-text size="sm">Hello</dt-text>';
+    const expected = '<dt-text :size="200">Hello</dt-text>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="md" to :size="300"', () => {
+    const input = '<dt-input size="md" label="Name" />';
+    const expected = '<dt-input :size="300" label="Name" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="lg" to :size="400"', () => {
+    const input = '<dt-toggle size="lg" />';
+    const expected = '<dt-toggle :size="400" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="xl" to :size="500"', () => {
+    const input = '<dt-segmented-control size="xl" />';
+    const expected = '<dt-segmented-control :size="500" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="2xl" to :size="600"', () => {
+    const input = '<dt-text kind="headline" size="2xl">Title</dt-text>';
+    const expected = '<dt-text kind="headline" :size="600">Title</dt-text>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="3xl" to :size="700"', () => {
+    const input = '<dt-text kind="headline" size="3xl">Title</dt-text>';
+    const expected = '<dt-text kind="headline" :size="700">Title</dt-text>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('label-size prop transforms', () => {
+  it('transforms label-size="xs" to :label-size="100"', () => {
+    const input = '<dt-input label-size="xs" label="Name" />';
+    const expected = '<dt-input :label-size="100" label="Name" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms label-size="lg" to :label-size="400"', () => {
+    const input = '<dt-select-menu label-size="lg" />';
+    const expected = '<dt-select-menu :label-size="400" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('speed prop transforms', () => {
+  it('transforms speed="sm" to :speed="200"', () => {
+    const input = '<dt-motion-text speed="sm" text="Hello" />';
+    const expected = '<dt-motion-text :speed="200" text="Hello" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms speed="lg" to :speed="400"', () => {
+    const input = '<dt-motion-text speed="lg" text="Hello" />';
+    const expected = '<dt-motion-text :speed="400" text="Hello" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('Does NOT transform non-Dialtone components', () => {
+  it('ignores size on native elements', () => {
+    const input = '<div size="sm">Not a component</div>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores size on non-dt components', () => {
+    const input = '<my-button size="sm">Click</my-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores size on custom elements without dt- prefix', () => {
+    const input = '<app-select size="md" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+});
+
+describe('Does NOT transform already-numeric or dynamic values', () => {
+  it('ignores :size="200" (already numeric binding)', () => {
+    const input = '<dt-button :size="200">Click</dt-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores :size="sm" (already a v-bind, consumer chose string)', () => {
+    const input = '<dt-button :size="sm">Click</dt-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores :label-size="xs" (already a v-bind)', () => {
+    const input = '<dt-input :label-size="xs" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores :size="computedSize" (dynamic binding)', () => {
+    const input = '<dt-button :size="computedSize">Click</dt-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores :size="iconSize" (icon size binding)', () => {
+    const input = '<dt-icon :size="iconSize" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores numeric string size="200" on dt-icon (icon scale)', () => {
+    const input = '<dt-icon size="200" name="phone" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+});
+
+describe('PascalCase component names', () => {
+  it('transforms DtButton size', () => {
+    const input = '<DtButton size="sm">Click</DtButton>';
+    const expected = '<DtButton :size="200">Click</DtButton>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms DtText size', () => {
+    const input = '<DtText size="xl">Title</DtText>';
+    const expected = '<DtText :size="500">Title</DtText>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('Multiple transforms in one tag', () => {
+  it('transforms size and label-size on same component', () => {
+    const input = '<dt-input size="lg" label-size="sm" label="Name" />';
+    const expected = '<dt-input :size="400" :label-size="200" label="Name" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, expected);
+    assert.equal(count, 2);
+  });
+});
+
+describe('Multiple components in one template', () => {
+  it('transforms all Dialtone components, ignores others', () => {
+    const input = `<template>
+  <div>
+    <dt-button size="sm">Small</dt-button>
+    <my-button size="sm">Not Dialtone</my-button>
+    <dt-text size="xl">Title</dt-text>
+    <dt-icon size="200" name="phone" />
+  </div>
+</template>`;
+    const expected = `<template>
+  <div>
+    <dt-button :size="200">Small</dt-button>
+    <my-button size="sm">Not Dialtone</my-button>
+    <dt-text :size="500">Title</dt-text>
+    <dt-icon size="200" name="phone" />
+  </div>
+</template>`;
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, expected);
+    assert.equal(count, 2);
+  });
+});
+
+describe('Real-world patterns from the monorepo', () => {
+  it('transforms button in notice action slot', () => {
+    const input = '<dt-button size="sm" importance="outlined" kind="muted">Action</dt-button>';
+    const expected = '<dt-button :size="200" importance="outlined" kind="muted">Action</dt-button>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms text inside card variant template', () => {
+    const input = '<dt-text as="p" kind="headline" size="md">Lorem ipsum</dt-text>';
+    const expected = '<dt-text as="p" kind="headline" :size="300">Lorem ipsum</dt-text>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms avatar size', () => {
+    const input = '<dt-avatar size="md" :full-name="item.id" />';
+    const expected = '<dt-avatar :size="300" :full-name="item.id" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms motion-text speed in story', () => {
+    const input = '<dt-motion-text speed="md" text="Animated" :auto-start="false" />';
+    const expected = '<dt-motion-text :speed="300" text="Animated" :auto-start="false" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('handles multiline component tags', () => {
+    const input = `<dt-button
+      size="xs"
+      kind="muted"
+      importance="clear"
+    >`;
+    const expected = `<dt-button
+      :size="100"
+      kind="muted"
+      importance="clear"
+    >`;
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('Future-proof: any compound *-size prop', () => {
+  it('transforms description-size="sm" to :description-size="200"', () => {
+    const input = '<dt-input description-size="sm" />';
+    const expected = '<dt-input :description-size="200" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms icon-size="lg" to :icon-size="400"', () => {
+    const input = '<dt-badge icon-size="lg" />';
+    const expected = '<dt-badge :icon-size="400" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms header-size="xl" to :header-size="500"', () => {
+    const input = '<dt-card header-size="xl" />';
+    const expected = '<dt-card :header-size="500" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('camelCase prop names', () => {
+  it('transforms labelSize="xs" to :labelSize="100"', () => {
+    const input = '<dt-input labelSize="xs" />';
+    const expected = '<dt-input :labelSize="100" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms descriptionSize="md" to :descriptionSize="300"', () => {
+    const input = '<dt-input descriptionSize="md" />';
+    const expected = '<dt-input :descriptionSize="300" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('Excluded props (not component scale sizes)', () => {
+  it('ignores button-width-size="md"', () => {
+    const input = '<dt-recipe-callbar-button button-width-size="md" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores buttonWidthSize="lg"', () => {
+    const input = '<DtCallbarButton buttonWidthSize="lg" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+});
+
+describe('Edge cases', () => {
+  it('does not transform size inside text content', () => {
+    const input = '<dt-text>The size="sm" option is deprecated</dt-text>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('returns count of 0 for content with no matches', () => {
+    const input = '<div><span>No Dialtone here</span></div>';
+    const { count } = transformContent(input);
+    assert.equal(count, 0);
+  });
+
+  it('handles empty string', () => {
+    const { transformed, count } = transformContent('');
+    assert.equal(transformed, '');
+    assert.equal(count, 0);
+  });
+});

package/lib/dist/js/dialtone_migration_helper/configs/physical-to-logical.mjs

@@ -0,0 +1,86 @@
+// Migration: deprecated physical direction slot/prop/event names → logical equivalents.
+// Covers Vue template directives only. Does NOT cover:
+// - #icon on dt-button (ambiguous — requires manual migration)
+// - Dynamic bindings or script-section references
+
+export default {
+  description:
+    'Renames deprecated physical direction names (left/right/top/bottom/alpha/omega) to\n' +
+    'logical equivalents (start/end/blockStart/blockEnd) in Vue template slots, props,\n' +
+    'prop values, and events. Does NOT rename #icon on dt-button (ambiguous).',
+  patterns: ['**/*.{vue,html,md,js,ts,jsx,tsx}'],
+  expressions: [
+    // ── Slot renames ──────────────────────────────────────────────────────
+    // Longer patterns first to prevent partial matches.
+    // e.g. #leftIcon before #left, #rightIcon before #right
+
+    // #leftIcon → #startIcon
+    { from: /#leftIcon/g, to: '#startIcon' },
+    // #rightIcon → #endIcon
+    { from: /#rightIcon/g, to: '#endIcon' },
+    // #alphaIcon → #startIcon
+    { from: /#alphaIcon/g, to: '#startIcon' },
+    // #omegaIcon → #endIcon
+    { from: /#omegaIcon/g, to: '#endIcon' },
+    // #leftContent → #startContent
+    { from: /#leftContent/g, to: '#startContent' },
+    // #rightContent → #endContent
+    { from: /#rightContent/g, to: '#endContent' },
+    // #omega → #end (word boundary to avoid matching #omegaIcon)
+    // Scoped: only dt-split-button uses #omega
+    { from: /#omega(?=[\s"'>])/g, to: '#end' },
+
+    // Generic short slot names (#left, #right, #bottom) are scoped to known
+    // Dialtone components to avoid renaming slots on non-Dialtone components.
+    // Uses multiline matching to find the slot within a dt-* or dt-recipe-* tag.
+    // Components: dt-item-layout, dt-recipe-callbox, dt-recipe-contact-centers-row,
+    //             dt-recipe-general-row, dt-recipe-top-banner-info
+
+    // #left → #start (only on dt-item-layout, dt-recipe-general-row, dt-recipe-top-banner-info)
+    { from: /(<dt-(?:item-layout|recipe-general-row|recipe-top-banner-info)[\s\S]*?)#left(?=[\s"'>])/gm, to: '$1#start' },
+    // #right → #end (only on dt-item-layout, dt-recipe-callbox, dt-recipe-contact-centers-row, dt-recipe-top-banner-info)
+    { from: /(<dt-(?:item-layout|recipe-callbox|recipe-contact-centers-row|recipe-top-banner-info)[\s\S]*?)#right(?=[\s"'>])/gm, to: '$1#end' },
+    // #bottom → #blockEnd (only on dt-item-layout, dt-recipe-callbox)
+    { from: /(<dt-(?:item-layout|recipe-callbox)[\s\S]*?)#bottom(?=[\s"'>])/gm, to: '$1#blockEnd' },
+
+    // ── Prop renames ──────────────────────────────────────────────────────
+    // Longer patterns first within each prefix group.
+
+    // alpha-* → start-* (longest first)
+    { from: /alpha-trailing-class/g, to: 'start-trailing-class' },
+    { from: /alpha-tooltip-text/g, to: 'start-tooltip-text' },
+    { from: /alpha-leading-class/g, to: 'start-leading-class' },
+    { from: /alpha-icon-position/g, to: 'start-icon-position' },
+    { from: /alpha-aria-label/g, to: 'start-aria-label' },
+    { from: /alpha-label-class/g, to: 'start-label-class' },
+    { from: /alpha-disabled/g, to: 'start-disabled' },
+    { from: /alpha-loading/g, to: 'start-loading' },
+    { from: /alpha-active/g, to: 'start-active' },
+
+    // omega-* → end-* (longest first)
+    { from: /omega-tooltip-text/g, to: 'end-tooltip-text' },
+    { from: /omega-aria-label/g, to: 'end-aria-label' },
+    { from: /omega-disabled/g, to: 'end-disabled' },
+    { from: /omega-active/g, to: 'end-active' },
+    { from: /omega-id/g, to: 'end-id' },
+
+    // layout class props
+    { from: /bottom-class=/g, to: 'block-end-class=' },
+    { from: /left-class=/g, to: 'start-class=' },
+    { from: /right-class=/g, to: 'end-class=' },
+
+    // ── Prop value renames ────────────────────────────────────────────────
+    // icon-position values
+    { from: /icon-position="left"/g, to: 'icon-position="start"' },
+    { from: /icon-position="right"/g, to: 'icon-position="end"' },
+    { from: /icon-position="top"/g, to: 'icon-position="blockStart"' },
+    { from: /icon-position="bottom"/g, to: 'icon-position="blockEnd"' },
+    // sidebar-position values
+    { from: /sidebar-position="left"/g, to: 'sidebar-position="start"' },
+    { from: /sidebar-position="right"/g, to: 'sidebar-position="end"' },
+
+    // ── Event renames ─────────────────────────────────────────────────────
+    { from: /@alpha-clicked/g, to: '@start-clicked' },
+    { from: /@omega-clicked/g, to: '@end-clicked' },
+  ],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone-css",
-  "version": "8.78.0-next.2",
+  "version": "8.78.0-next.3",
   "description": "Dialpad's design system",
   "keywords": [
     "Dialpad",
@@ -78,9 +78,9 @@
     "less": "^4.2.0",
     "oslllo-svg-fixer": "^2.2.0",
     "through2": "^4.0.2",
-    "@dialpad/dialtone-tokens": "1.48.0-next.12",
-    "@dialpad/stylelint-plugin-dialtone": "1.4.0-next.1",
-    "@dialpad/postcss-responsive-variations": "1.2.4-next.1"
+    "@dialpad/postcss-responsive-variations": "1.2.4-next.1",
+    "@dialpad/dialtone-tokens": "1.48.0-next.13",
+    "@dialpad/stylelint-plugin-dialtone": "1.4.0-next.2"
   },
   "peerDependencies": {
     "chalk": "^5.2.0",