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

package/lib/dist/js/dialtone_migrate_flex_to_stack/examples-edge-cases.vue

@@ -292,6 +292,32 @@
 
   <!-- TEST 47: Empty element with flex - Should convert -->
   <div class="d-d-flex d-fd-column"></div>
+
+  <!-- ============================================ -->
+  <!-- NEW TESTS: NEW-FORMAT GAP UTILITIES (d-g-*) -->
+  <!-- ============================================ -->
+
+  <!-- TEST 48: New-format gap d-g-100 (8px) - Should convert to gap="100" -->
+  <div class="d-d-flex d-ai-center d-g-100">
+    <span>New gap format 8px</span>
+  </div>
+
+  <!-- TEST 49: New-format gap d-g-200 (16px) - Should convert to gap="200" -->
+  <div class="d-d-flex d-fd-row d-g-200">
+    <span>Item 1</span>
+    <span>Item 2</span>
+  </div>
+
+  <!-- TEST 50: New-format gap d-g-400 (32px) with other props - Should convert -->
+  <div class="d-d-flex d-fd-column d-ai-center d-jc-between d-g-400">
+    <span>Full props with new gap</span>
+    <span>Example</span>
+  </div>
+
+  <!-- TEST 51: New-format gap d-g-50 (4px) - Should convert to gap="50" -->
+  <div class="d-d-flex d-ai-center d-g-50">
+    <span>Small gap 4px</span>
+  </div>
 </template>
 
 <script setup>

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

@@ -142,23 +142,64 @@ const FLEX_TO_PROP = {
   'd-fd-row-reverse': { prop: 'direction', value: 'row-reverse' },
   'd-fd-column-reverse': { prop: 'direction', value: 'column-reverse' },
 
-  // Gap mappings (d-g* → gap prop)
+  // Gap mappings (d-g* → gap prop) — old pixel-based utilities
   'd-g0': { prop: 'gap', value: '0' },
-  'd-g8': { prop: 'gap', value: '400' },
-  'd-g16': { prop: 'gap', value: '500' },
-  'd-g24': { prop: 'gap', value: '550' },
-  'd-g32': { prop: 'gap', value: '600' },
-  'd-g48': { prop: 'gap', value: '650' },
-  'd-g64': { prop: 'gap', value: '700' },
-
-  // Grid-gap mappings (d-gg* → gap prop) - deprecated utilities, same as d-g*
+  'd-g1': { prop: 'gap', value: '1' },
+  'd-g2': { prop: 'gap', value: '25' },
+  'd-g4': { prop: 'gap', value: '50' },
+  'd-g6': { prop: 'gap', value: '75' },
+  'd-g8': { prop: 'gap', value: '100' },
+  'd-g10': { prop: 'gap', value: '125' },
+  'd-g12': { prop: 'gap', value: '150' },
+  'd-g14': { prop: 'gap', value: '175' },
+  'd-g16': { prop: 'gap', value: '200' },
+  'd-g20': { prop: 'gap', value: '250' },
+  'd-g24': { prop: 'gap', value: '300' },
+  'd-g32': { prop: 'gap', value: '400' },
+  'd-g48': { prop: 'gap', value: '600' },
+  'd-g64': { prop: 'gap', value: '800' },
+
+  // Gap mappings (d-g-* → gap prop) — new token-stop-based utilities
+  'd-g-0': { prop: 'gap', value: '0' },
+  'd-g-1': { prop: 'gap', value: '1' },
+  'd-g-25': { prop: 'gap', value: '25' },
+  'd-g-50': { prop: 'gap', value: '50' },
+  'd-g-75': { prop: 'gap', value: '75' },
+  'd-g-100': { prop: 'gap', value: '100' },
+  'd-g-125': { prop: 'gap', value: '125' },
+  'd-g-150': { prop: 'gap', value: '150' },
+  'd-g-175': { prop: 'gap', value: '175' },
+  'd-g-200': { prop: 'gap', value: '200' },
+  'd-g-250': { prop: 'gap', value: '250' },
+  'd-g-300': { prop: 'gap', value: '300' },
+  'd-g-350': { prop: 'gap', value: '350' },
+  'd-g-400': { prop: 'gap', value: '400' },
+  'd-g-450': { prop: 'gap', value: '450' },
+  'd-g-500': { prop: 'gap', value: '500' },
+  'd-g-525': { prop: 'gap', value: '525' },
+  'd-g-550': { prop: 'gap', value: '550' },
+  'd-g-600': { prop: 'gap', value: '600' },
+  'd-g-650': { prop: 'gap', value: '650' },
+  'd-g-700': { prop: 'gap', value: '700' },
+  'd-g-750': { prop: 'gap', value: '750' },
+  'd-g-800': { prop: 'gap', value: '800' },
+
+  // Grid-gap mappings (d-gg* → gap prop) — deprecated utilities
   'd-gg0': { prop: 'gap', value: '0' },
-  'd-gg8': { prop: 'gap', value: '400' },
-  'd-gg16': { prop: 'gap', value: '500' },
-  'd-gg24': { prop: 'gap', value: '550' },
-  'd-gg32': { prop: 'gap', value: '600' },
-  'd-gg48': { prop: 'gap', value: '650' },
-  'd-gg64': { prop: 'gap', value: '700' },
+  'd-gg1': { prop: 'gap', value: '1' },
+  'd-gg2': { prop: 'gap', value: '25' },
+  'd-gg4': { prop: 'gap', value: '50' },
+  'd-gg6': { prop: 'gap', value: '75' },
+  'd-gg8': { prop: 'gap', value: '100' },
+  'd-gg10': { prop: 'gap', value: '125' },
+  'd-gg12': { prop: 'gap', value: '150' },
+  'd-gg14': { prop: 'gap', value: '175' },
+  'd-gg16': { prop: 'gap', value: '200' },
+  'd-gg20': { prop: 'gap', value: '250' },
+  'd-gg24': { prop: 'gap', value: '300' },
+  'd-gg32': { prop: 'gap', value: '400' },
+  'd-gg48': { prop: 'gap', value: '600' },
+  'd-gg64': { prop: 'gap', value: '800' },
 };
 
 // Classes to remove (redundant on dt-stack)

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);
+  });
+});