@dialpad/eslint-plugin-dialtone 1.12.0 → 1.13.0-next.1

package/lib/rules/deprecated-headline-sizes.js

@@ -0,0 +1,77 @@
+/**
+ * @fileoverview Detects usage of deprecated xxl/xxxl headline sizes which have been renamed to 2xl/3xl.
+ * @author Dialtone Team
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const SIZE_MAP = {
+  xxxl: '3xl',
+  xxl: '2xl',
+};
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Headline sizes xxl/xxxl have been renamed to 2xl/3xl.',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-headline-sizes.md',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      deprecatedSize: 'Headline size "{{oldSize}}" has been renamed to "{{newSize}}". Update size="{{oldSize}}" to size="{{newSize}}".',
+      deprecatedClass: 'CSS class "{{oldClass}}" has been renamed to "{{newClass}}". Update to use the new class name.',
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(node) {
+        // Check size prop (e.g., size="xxl" or size="xxxl")
+        if (node.key.name === 'size' && node.value && node.value.value) {
+          const sizeValue = node.value.value;
+          if (SIZE_MAP[sizeValue]) {
+            context.report({
+              node,
+              messageId: 'deprecatedSize',
+              data: {
+                oldSize: sizeValue,
+                newSize: SIZE_MAP[sizeValue],
+              },
+              fix(fixer) {
+                return fixer.replaceText(node.value, `"${SIZE_MAP[sizeValue]}"`);
+              },
+            });
+          }
+        }
+
+        // Check class attributes for deprecated d-text-headline--xxl/xxxl classes
+        // Note: We only flag d-text-headline-- (current system), NOT d-headline-- (legacy system)
+        if (node.key.name === 'class' && node.value && node.value.value) {
+          const classValue = node.value.value;
+          // Match d-text-headline--xxl or d-text-headline--xxxl (but NOT d-headline--xxl)
+          const match = classValue.match(/\bd-text-headline--(xxx?l)\b/);
+          if (match && SIZE_MAP[match[1]]) {
+            const oldClass = `d-text-headline--${match[1]}`;
+            const newClass = `d-text-headline--${SIZE_MAP[match[1]]}`;
+            context.report({
+              node,
+              messageId: 'deprecatedClass',
+              data: { oldClass, newClass },
+              fix(fixer) {
+                const newValue = classValue.replace(oldClass, newClass);
+                return fixer.replaceText(node.value, `"${newValue}"`);
+              },
+            });
+          }
+        }
+      },
+    });
+  },
+};

package/lib/rules/deprecated-link-styling-classes.js

@@ -0,0 +1,96 @@
+/**
+ * @fileoverview Detect raw anchor / router-link with d-btn or d-link classes,
+ * and DtLink with d-td-* classes — all should migrate to DtButton/DtLink props
+ * via `npx dialtone-migrate-link-rendering`.
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+function getStaticClassValue (node) {
+  for (const attr of node.startTag.attributes) {
+    if (attr.directive) continue;
+    const name = attr.key && (attr.key.rawName || attr.key.name);
+    if (name !== 'class' || !attr.value) continue;
+    return { value: attr.value.value, attr };
+  }
+  return null;
+}
+
+function tokenize (classValue) {
+  return classValue.split(/\s+/).filter(Boolean);
+}
+
+const D_TD_TOKEN_RE = /^(?:[\w-]+:)?d-td-[\w-]+$/;
+
+const RELEVANT_TAGS = new Set(['a', 'router-link', 'dt-link']);
+
+const TAG_TOKEN_CHECKS = [
+  { tag: 'a', test: tokens => tokens.includes('d-btn'), messageId: 'anchorWithDBtn' },
+  { tag: 'a', test: tokens => tokens.includes('d-link'), messageId: 'anchorWithDLink' },
+  { tag: 'router-link', test: tokens => tokens.includes('d-btn'), messageId: 'routerLinkWithDBtn' },
+  { tag: 'router-link', test: tokens => tokens.includes('d-link'), messageId: 'routerLinkWithDLink' },
+  { tag: 'dt-link', test: tokens => tokens.some(t => D_TD_TOKEN_RE.test(t)), messageId: 'dtLinkWithDTd' },
+];
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Detect legacy d-btn / d-link / d-td-* class usage that should migrate to DtButton/DtLink props',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-link-styling-classes.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      anchorWithDBtn:
+        '<a class="d-btn"> is deprecated. Use <dt-button href="…"> instead. ' +
+        'Run `npx dialtone-migrate-link-rendering` to migrate.',
+      routerLinkWithDBtn:
+        '<router-link class="d-btn"> is deprecated. Use <dt-button :to="…"> instead. ' +
+        'Run `npx dialtone-migrate-link-rendering` to migrate.',
+      anchorWithDLink:
+        '<a class="d-link"> is deprecated. Use <dt-link href="…"> instead. ' +
+        'Run `npx dialtone-migrate-link-rendering` to migrate.',
+      routerLinkWithDLink:
+        '<router-link class="d-link"> is deprecated. Use <dt-link :to="…"> instead. ' +
+        'Run `npx dialtone-migrate-link-rendering` to migrate.',
+      dtLinkWithDTd:
+        '<dt-link class="d-td-…"> is deprecated. Use the `underline` prop instead. ' +
+        'Run `npx dialtone-migrate-link-rendering` to migrate.',
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    const defineTemplateBodyVisitor = sourceCode.parserServices?.defineTemplateBodyVisitor;
+    if (!defineTemplateBodyVisitor) return {};
+
+    return defineTemplateBodyVisitor({
+      VElement (node) {
+        const rawName = node.rawName || node.name;
+        // Normalize PascalCase Vue tags (RouterLink, DtLink) to kebab-case.
+        const tagName = rawName.includes('-')
+          ? rawName.toLowerCase()
+          : rawName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+        if (!RELEVANT_TAGS.has(tagName)) return;
+
+        const result = getStaticClassValue(node);
+        if (!result) return;
+        const tokens = tokenize(result.value);
+
+        for (const check of TAG_TOKEN_CHECKS) {
+          if (check.tag !== tagName) continue;
+          if (check.test(tokens)) context.report({ node: result.attr, messageId: check.messageId });
+        }
+      },
+    });
+  },
+};

package/lib/rules/deprecated-physical-naming.js

@@ -0,0 +1,228 @@
+/**
+ * @fileoverview Detect deprecated physical direction names in Dialtone component
+ * slots, props, prop values, and events. Suggests logical replacements.
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Constants
+//------------------------------------------------------------------------------
+
+/**
+ * Maps component names to their deprecated slot names and replacements.
+ * null value = special handling (ambiguous, e.g. #icon on dt-button).
+ */
+const DEPRECATED_SLOTS = {
+  'dt-badge': { leftIcon: 'startIcon', rightIcon: 'endIcon' },
+  'dt-button': { icon: null },
+  'dt-input': { leftIcon: 'startIcon', rightIcon: 'endIcon' },
+  'dt-tab': { leftIcon: 'startIcon' },
+  'dt-split-button': { alphaIcon: 'startIcon', omegaIcon: 'endIcon', omega: 'end' },
+  'dt-item-layout': { left: 'start', right: 'end', bottom: 'blockEnd' },
+  'dt-recipe-callbox': { right: 'end', bottom: 'blockEnd' },
+  'dt-recipe-contact-centers-row': { right: 'end' },
+  'dt-recipe-general-row': { left: 'start' },
+  'dt-recipe-top-banner-info': { left: 'start', right: 'end' },
+  'dt-recipe-grouped-chip': {
+    leftIcon: 'startIcon',
+    rightIcon: 'endIcon',
+    leftContent: 'startContent',
+    rightContent: 'endContent',
+  },
+};
+
+/**
+ * Maps component names to their deprecated prop names (kebab-case) and replacements.
+ */
+const DEPRECATED_PROPS = {
+  'dt-item-layout': {
+    'left-class': 'start-class',
+    'right-class': 'end-class',
+    'bottom-class': 'block-end-class',
+  },
+  'dt-split-button': {
+    'alpha-active': 'start-active',
+    'alpha-aria-label': 'start-aria-label',
+    'alpha-icon-position': 'start-icon-position',
+    'alpha-leading-class': 'start-leading-class',
+    'alpha-trailing-class': 'start-trailing-class',
+    'alpha-label-class': 'start-label-class',
+    'alpha-disabled': 'start-disabled',
+    'alpha-loading': 'start-loading',
+    'alpha-tooltip-text': 'start-tooltip-text',
+    'omega-active': 'end-active',
+    'omega-aria-label': 'end-aria-label',
+    'omega-disabled': 'end-disabled',
+    'omega-id': 'end-id',
+    'omega-tooltip-text': 'end-tooltip-text',
+  },
+};
+
+/**
+ * Maps component names to props whose specific values are deprecated.
+ */
+const DEPRECATED_PROP_VALUES = {
+  'dt-button': {
+    'icon-position': { left: 'start', right: 'end', top: 'blockStart', bottom: 'blockEnd' },
+  },
+  'dt-root-layout': {
+    'sidebar-position': { left: 'start', right: 'end' },
+  },
+};
+
+/**
+ * Maps component names to their deprecated event names and replacements.
+ */
+const DEPRECATED_EVENTS = {
+  'dt-split-button': { 'alpha-clicked': 'start-clicked', 'omega-clicked': 'end-clicked' },
+};
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+/**
+ * Converts PascalCase or camelCase to kebab-case.
+ * e.g. 'DtBadge' → 'dt-badge', 'DtRecipeCallbox' → 'dt-recipe-callbox'
+ */
+function toKebabCase (str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Detect deprecated physical direction names in Dialtone component slots, props, prop values, and events',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-physical-naming.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      deprecatedSlot:
+        '#{{ oldSlot }} on <{{ component }}> is deprecated. Use #{{ newSlot }} instead.',
+      deprecatedIconSlot:
+        'The #icon slot on <dt-button> is deprecated. Use #startIcon, #endIcon, #blockStartIcon, or #blockEndIcon instead.',
+      deprecatedProp:
+        '{{ oldProp }} on <{{ component }}> is deprecated. Use {{ newProp }} instead.',
+      deprecatedPropValue:
+        '{{ prop }}="{{ oldValue }}" on <{{ component }}> is deprecated. Use {{ prop }}="{{ newValue }}" instead.',
+      deprecatedEvent:
+        '@{{ oldEvent }} on <{{ component }}> is deprecated. Use @{{ newEvent }} instead.',
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+
+      VElement (node) {
+        const rawName = node.rawName || node.name;
+        const elementName = rawName.includes('-') ? rawName : toKebabCase(rawName);
+
+        const slotsMap = DEPRECATED_SLOTS[elementName];
+        const propsMap = DEPRECATED_PROPS[elementName];
+        const propValuesMap = DEPRECATED_PROP_VALUES[elementName];
+        const eventsMap = DEPRECATED_EVENTS[elementName];
+
+        // Check attributes in a single pass (props, prop values, events)
+        if (propsMap || propValuesMap || eventsMap) {
+          for (const attr of node.startTag.attributes) {
+            if (!attr.directive) {
+              // Static props: alpha-active, left-class="x", icon-position="left"
+              const attrName = attr.key && (attr.key.rawName || attr.key.name);
+              if (attrName && propsMap && propsMap[attrName]) {
+                context.report({
+                  node: attr,
+                  messageId: 'deprecatedProp',
+                  data: {
+                    component: elementName,
+                    oldProp: attrName,
+                    newProp: propsMap[attrName],
+                  },
+                });
+              }
+              if (attrName && propValuesMap && propValuesMap[attrName] && attr.value) {
+                const val = attr.value.value;
+                if (propValuesMap[attrName][val]) {
+                  context.report({
+                    node: attr,
+                    messageId: 'deprecatedPropValue',
+                    data: {
+                      component: elementName,
+                      prop: attrName,
+                      oldValue: val,
+                      newValue: propValuesMap[attrName][val],
+                    },
+                  });
+                }
+              }
+            } else if (attr.directive && attr.key.name.name === 'bind') {
+              // Dynamic props: :alpha-active="x", v-bind:omega-disabled="y"
+              const bindName = attr.key.argument && (attr.key.argument.rawName || attr.key.argument.name);
+              if (bindName && propsMap && propsMap[bindName]) {
+                context.report({
+                  node: attr,
+                  messageId: 'deprecatedProp',
+                  data: {
+                    component: elementName,
+                    oldProp: bindName,
+                    newProp: propsMap[bindName],
+                  },
+                });
+              }
+            } else if (eventsMap && attr.key.name.name === 'on') {
+              const eventName = attr.key.argument && (attr.key.argument.rawName || attr.key.argument.name);
+              if (eventName && eventsMap[eventName]) {
+                context.report({
+                  node: attr,
+                  messageId: 'deprecatedEvent',
+                  data: {
+                    component: elementName,
+                    oldEvent: eventName,
+                    newEvent: eventsMap[eventName],
+                  },
+                });
+              }
+            }
+          }
+        }
+
+        // Check child <template> elements for deprecated slot names
+        if (slotsMap) {
+          for (const child of node.children) {
+            if (child.type === 'VElement' && child.name === 'template') {
+              for (const attr of child.startTag.attributes) {
+                if (attr.directive && attr.key.name.name === 'slot') {
+                  const slotName = attr.key.argument && (attr.key.argument.rawName || attr.key.argument.name);
+                  if (slotName && slotName in slotsMap) {
+                    if (slotsMap[slotName] === null) {
+                      // #icon on dt-button is ambiguous — consumer must choose replacement
+                      context.report({ node: attr, messageId: 'deprecatedIconSlot' });
+                    } else {
+                      context.report({
+                        node: attr,
+                        messageId: 'deprecatedSlot',
+                        data: {
+                          component: elementName,
+                          oldSlot: slotName,
+                          newSlot: slotsMap[slotName],
+                        },
+                      });
+                    }
+                  }
+                  break;
+                }
+              }
+            }
+          }
+        }
+      },
+    });
+  },
+};

package/lib/rules/deprecated-pixel-utility-classes.js

@@ -0,0 +1,95 @@
+/**
+ * @fileoverview Detects usage of pixel-based utility classes (d-h16, d-p8, d-m8, etc.)
+ * which should be replaced with token-stop-based equivalents (d-h-25, d-p-100, d-m-100).
+ * Autofixes via `lint-staged` — mirrors the `utility-class-to-token-stops` migration helper.
+ * @author Joshua Hynes
+ */
+'use strict';
+
+const { START, END, buildDetectRegex, createClassAttributeRule } = require('../util/class-attribute-rule');
+
+// MUST STAY IN SYNC with:
+// - LAYOUT_STOPS, MARGIN_SIZES_SPACING, MARGIN_SIZES_LAYOUT in dialtone-css/postcss/constants.cjs
+// - SIZING_MAP, SPACING_MAP, NEGATIVE_SPACING_MAP, SPACING_LAYOUT_MAP in
+//   dialtone-css/.../migration_helper/configs/utility-class-to-token-stops.mjs
+
+// Ordered by descending string-length then descending value so regex alternation matches
+// longest first (d-w1024 resolves `1024`, not `1`).
+const SIZING_PIXELS = '1024|992|960|928|896|864|832|800|768|736|704|672|640|608|576|544|512|480|448|416|384|352|320|288|256|224|192|160|128|112|96|80|64|48|32|24|20|16|8|2|1';
+const SPACING_PIXELS = '0|1|2|4|6|8|10|12|14|16|20|24|32|48|64|96|128';
+const NEGATIVE_PIXELS = '1|2|4|6|8|10|12|14|16|20|24|32|48|64';
+
+// Sizing autofix: scale-indexed layout stops + off-scale pixel-indexed exceptions (DLT-3330).
+const SIZING_MAP = {
+  1: '1px', 2: '2px', 8: '8px', 20: '20px', 24: '24px',
+  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',
+};
+
+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',
+};
+
+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',
+};
+
+const SPACING_LAYOUT_MAP = { 96: '150', 128: '200' };
+
+// Per-category regexes with capture groups. Negative variants precede positive so `d-mtn8`
+// matches the negative pattern (rule order is load-order in `rewriteClassString`).
+const SIZING_RE          = new RegExp(`${START}d-(h|w|hmn|hmx|wmn|wmx)(${SIZING_PIXELS})${END}`, 'g');
+const NEGATIVE_MARGIN_RE = new RegExp(`${START}d-m(t|r|b|l|x|y)?n(${NEGATIVE_PIXELS})${END}`, 'g');
+const MARGIN_RE          = new RegExp(`${START}d-m(t|r|b|l|x|y)?(${SPACING_PIXELS})${END}`, 'g');
+const PADDING_RE         = new RegExp(`${START}d-p(t|r|b|l|x|y)?(${SPACING_PIXELS})${END}`, 'g');
+const GAP_RE             = new RegExp(`${START}d-(g|rg|cg)(${SPACING_PIXELS})${END}`, 'g');
+const NEGATIVE_POS_RE    = new RegExp(`${START}d-(t|r|b|l|x|y|all)n(${NEGATIVE_PIXELS})${END}`, 'g');
+const POSITION_RE        = new RegExp(`${START}d-(t|r|b|l|x|y|all)(${SPACING_PIXELS})${END}`, 'g');
+
+const DETECT = buildDetectRegex([SIZING_RE, NEGATIVE_MARGIN_RE, MARGIN_RE, PADDING_RE, GAP_RE, NEGATIVE_POS_RE, POSITION_RE]);
+
+/**
+ * Rewrite a class attribute string from legacy pixel-suffix to token-stop naming.
+ * Returns the input unchanged when no rewrites apply.
+ */
+function rewriteClassString (input) {
+  return input
+    .replace(NEGATIVE_MARGIN_RE, (m, dir, px) => NEGATIVE_SPACING_MAP[px] ? `d-m${dir ?? ''}-n${NEGATIVE_SPACING_MAP[px]}` : m)
+    .replace(NEGATIVE_POS_RE,    (m, dir, px) => NEGATIVE_SPACING_MAP[px] ? `d-${dir}-n${NEGATIVE_SPACING_MAP[px]}` : m)
+    .replace(SIZING_RE,          (m, dir, px) => SIZING_MAP[px] ? `d-${dir}-${SIZING_MAP[px]}` : m)
+    .replace(MARGIN_RE,          (m, dir, px) => { const stop = SPACING_MAP[px] ?? SPACING_LAYOUT_MAP[px]; return stop ? `d-m${dir ?? ''}-${stop}` : m; })
+    .replace(PADDING_RE,         (m, dir, px) => { const stop = SPACING_MAP[px] ?? SPACING_LAYOUT_MAP[px]; return stop ? `d-p${dir ?? ''}-${stop}` : m; })
+    .replace(GAP_RE,             (m, dir, px) => SPACING_MAP[px] ? `d-${dir}-${SPACING_MAP[px]}` : m)
+    .replace(POSITION_RE,        (m, dir, px) => { const stop = SPACING_MAP[px] ?? SPACING_LAYOUT_MAP[px]; return stop ? `d-${dir}-${stop}` : m; });
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Pixel-based utility classes (d-h16, d-p8, d-m8) are deprecated. Use token-stop-based equivalents (d-h-25, d-p-100, d-m-100).',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-pixel-utility-classes.md',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      deprecatedPixelClass: 'Pixel-based utility classes are deprecated. Use token-stop-based equivalents instead (e.g. d-h16 → d-h-25, d-p8 → d-p-100, d-w1 → d-w-1px).',
+    },
+  },
+
+  create: createClassAttributeRule({
+    detect: DETECT,
+    rewrite: rewriteClassString,
+    messageId: 'deprecatedPixelClass',
+  }),
+};

package/lib/rules/deprecated-radius-utility-classes.js

@@ -0,0 +1,64 @@
+/**
+ * @fileoverview Detects usage of legacy border-radius utility classes (d-bar6, d-btr8, d-bbr-pill,
+ * etc.) and autofixes them to the new token-stop-indexed logical names (d-bar-350, d-bbsr-400,
+ * d-bber-pill).
+ */
+'use strict';
+
+const { START, END, buildDetectRegex, createClassAttributeRule } = require('../util/class-attribute-rule');
+
+// MUST STAY IN SYNC with:
+// - RADIUS_STOPS in dialtone-css/postcss/constants.cjs
+// - RADIUS_MAP / RADIUS_PAIR_PREFIX_MAP in dialtone-css/.../migration_helper/configs/utility-class-to-token-stops.mjs
+
+const RADIUS_STOP_MAP = {
+  0: '0', 1: '100', 2: '200', 4: '300', 6: '350',
+  8: '400', 12: '450', 16: '500', 24: '550', 32: '600',
+};
+
+const PAIR_PREFIX_MAP = {
+  btr: 'bbsr', // top    → block-start pair
+  bbr: 'bber', // bottom → block-end pair
+  blr: 'bisr', // left   → inline-start pair
+  brr: 'bier', // right  → inline-end pair
+};
+
+// Ordered by descending string length so regex alternation matches longest first
+// (.d-bar32 resolves as `32`, not `3`).
+const NUMERIC_SUFFIXES = Object.keys(RADIUS_STOP_MAP).sort((a, b) => b.length - a.length || Number(b) - Number(a)).join('|');
+const PAIR_PREFIXES = Object.keys(PAIR_PREFIX_MAP).join('|');
+
+const ALL_CORNERS_NUMERIC = new RegExp(`${START}d-bar(${NUMERIC_SUFFIXES})${END}`, 'g');
+const PAIR_NUMERIC        = new RegExp(`${START}d-(${PAIR_PREFIXES})(${NUMERIC_SUFFIXES})${END}`, 'g');
+const PAIR_KEYWORD        = new RegExp(`${START}d-(${PAIR_PREFIXES})-(pill|circle)${END}`, 'g');
+
+const DETECT = buildDetectRegex([ALL_CORNERS_NUMERIC, PAIR_NUMERIC, PAIR_KEYWORD]);
+
+function rewriteClassString (input) {
+  return input
+    .replace(ALL_CORNERS_NUMERIC, (_, px) => `d-bar-${RADIUS_STOP_MAP[px]}`)
+    .replace(PAIR_NUMERIC, (_, legacyPrefix, px) => `d-${PAIR_PREFIX_MAP[legacyPrefix]}-${RADIUS_STOP_MAP[px]}`)
+    .replace(PAIR_KEYWORD, (_, legacyPrefix, keyword) => `d-${PAIR_PREFIX_MAP[legacyPrefix]}-${keyword}`);
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Legacy border-radius utility classes (d-bar6, d-btr8, d-bbr-pill) are deprecated. Use token-stop-indexed logical names (d-bar-350, d-bbsr-400, d-bber-pill).',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-radius-utility-classes.md',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      deprecatedRadiusClass: 'Legacy border-radius utility classes are deprecated. Use token-stop-indexed logical names instead (e.g. d-bar6 → d-bar-350, d-btr6 → d-bbsr-350, d-btr-pill → d-bbsr-pill).',
+    },
+  },
+
+  create: createClassAttributeRule({
+    detect: DETECT,
+    rewrite: rewriteClassString,
+    messageId: 'deprecatedRadiusClass',
+  }),
+};

package/lib/rules/deprecated-success-color-classes.js

@@ -0,0 +1,180 @@
+/**
+ * @fileoverview Detects usage of deprecated `success`-named color utility classes
+ * (`d-bgc-success*`, `d-bc-success*`, `d-fc-success*`) and recommends the
+ * `positive`-named replacements. The foreground (`d-fc-success*`) variants are
+ * already deprecated as part of the base-color cleanup but are still in active
+ * use, so this rule covers them too.
+ * @author Dialtone Team
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+// Anchor at token boundaries. `\b` would slice through
+// `d-bgc-success-strong-inverted-foo`, so we use explicit lookarounds.
+// TOKEN_END mirrors the `success-to-positive` migration helper's CLASS_BOUNDARY
+// so every lint finding is auto-fixable by the CLI the rule's message points to.
+const TOKEN_START = '(?<![A-Za-z0-9_-])';
+const TOKEN_END = '(?=$|[\\s"\'><:=,;{}()\\[\\]!`./])';
+
+// Suffixes that follow `success` in the deprecated namespace. Order longest
+// first so alternation matches greedily where needed (regex matching is
+// leftmost-first, but we still keep this ordered for clarity).
+const SUCCESS_SUFFIXES = [
+  '-subtle-opaque-inverted',
+  '-strong-inverted',
+  '-subtle-inverted',
+  '-opaque-inverted',
+  '-inverted-hover',
+  '-subtle-opaque',
+  '-inverted',
+  '-subtle',
+  '-strong',
+  '-opaque',
+  '-hover',
+].join('|');
+
+// Per-role detect regexes. Each matches `d-{role}-success` optionally followed
+// by one of the known suffixes — and ONLY by one of the known suffixes (the
+// trailing `TOKEN_END` rejects unrelated continuations like
+// `d-bgc-success-foo`).
+const BG_SUCCESS_RE = new RegExp(`${TOKEN_START}d-bgc-success(?:${SUCCESS_SUFFIXES})?${TOKEN_END}`);
+const FG_SUCCESS_RE = new RegExp(`${TOKEN_START}d-fc-success(?:${SUCCESS_SUFFIXES})?${TOKEN_END}`);
+const BORDER_SUCCESS_RE = new RegExp(`${TOKEN_START}d-bc-success(?:${SUCCESS_SUFFIXES})?${TOKEN_END}`);
+
+// Generic detect for the script-string visitor (any role).
+const ANY_SUCCESS_RE = new RegExp(`${TOKEN_START}d-(?:bgc|bc|fc)-success(?:${SUCCESS_SUFFIXES})?${TOKEN_END}`);
+
+const DOCS_BACKGROUND = 'https://dialtone.dialpad.com/utilities/backgrounds/color.html';
+const DOCS_FOREGROUND = 'https://dialtone.dialpad.com/utilities/typography/font-color.html';
+const DOCS_BORDER = 'https://dialtone.dialpad.com/utilities/borders/color.html';
+
+// Build per-role messages following the precedent of deprecated-base-color-classes
+// (separate messageId per role family).
+const MESSAGE_PREFIX = '`d-{role}-success-...` is deprecated. Use `d-{role}-positive-...` instead. Run `npx dialtone-migration-helper --config success-to-positive` to migrate automatically.';
+const buildMessage = (role, docs) =>
+  MESSAGE_PREFIX.replace(/\{role\}/g, role) + ` See the utility docs: ${docs}`;
+
+function checkClassString (context, node, classes) {
+  if (BG_SUCCESS_RE.test(classes)) {
+    context.report({ node, messageId: 'deprecatedBackgroundSuccess' });
+  }
+  if (FG_SUCCESS_RE.test(classes)) {
+    context.report({ node, messageId: 'deprecatedForegroundSuccess' });
+  }
+  if (BORDER_SUCCESS_RE.test(classes)) {
+    context.report({ node, messageId: 'deprecatedBorderSuccess' });
+  }
+}
+
+/**
+ * Walk every Literal/TemplateElement string descendant of an expression node
+ * (used for `:class="[...]"` / `:class="{...}"` / template-literal bindings).
+ * Best-effort — fully dynamic class names (`d-bgc-' + variant`) cannot be
+ * matched without runtime knowledge.
+ */
+function findStringLiterals (n, out) {
+  if (!n || typeof n !== 'object') return;
+  if (n.type === 'Literal' && typeof n.value === 'string') {
+    out.push({ node: n, value: n.value });
+  } else if (n.type === 'TemplateElement' && n.value && typeof n.value.cooked === 'string') {
+    out.push({ node: n, value: n.value.cooked });
+  }
+  for (const key of Object.keys(n)) {
+    if (key === 'parent') continue;
+    const child = n[key];
+    if (child && typeof child === 'object') {
+      if (Array.isArray(child)) {
+        for (const c of child) findStringLiterals(c, out);
+      } else {
+        findStringLiterals(child, out);
+      }
+    }
+  }
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        '`d-bgc-success*`, `d-bc-success*`, and `d-fc-success*` utility classes are deprecated. Use the `positive`-named replacements.',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-success-color-classes.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      deprecatedBackgroundSuccess: buildMessage('bgc', DOCS_BACKGROUND),
+      deprecatedForegroundSuccess: buildMessage('fc', DOCS_FOREGROUND),
+      deprecatedBorderSuccess: buildMessage('bc', DOCS_BORDER),
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    const defineTemplateBodyVisitor = sourceCode.parserServices?.defineTemplateBodyVisitor;
+
+    // Visitor that scans all string-typed AST nodes inside `<script>` or in
+    // plain `.js`/`.ts` files for class-name strings containing the deprecated
+    // tokens. This catches things like `:class="['d-bgc-success']"` (the array
+    // literal lives in the script-side AST that vue-eslint-parser exposes via
+    // the standard ESLint visitor) and `const c = 'd-bgc-success';`.
+    const scriptVisitor = {
+      Literal (node) {
+        if (typeof node.value !== 'string') return;
+        if (!ANY_SUCCESS_RE.test(node.value)) return;
+        checkClassString(context, node, node.value);
+      },
+      TemplateElement (node) {
+        const cooked = node.value && node.value.cooked;
+        if (typeof cooked !== 'string') return;
+        if (!ANY_SUCCESS_RE.test(cooked)) return;
+        checkClassString(context, node, cooked);
+      },
+    };
+
+    if (!defineTemplateBodyVisitor) {
+      // Plain JS/TS file — no Vue template, only the script visitor applies.
+      return scriptVisitor;
+    }
+
+    return defineTemplateBodyVisitor(
+      // Template visitor — handles `class="..."` static attributes and the
+      // string-literal halves of `:class="..."` dynamic bindings.
+      {
+        VAttribute (node) {
+          // Static `class="..."` attribute.
+          if (!node.directive && node.key.name === 'class' && node.value && typeof node.value.value === 'string') {
+            checkClassString(context, node, node.value.value);
+            return;
+          }
+          // Dynamic `:class="..."` / `v-bind:class="..."` binding.
+          if (
+            node.directive &&
+            node.key.name &&
+            node.key.name.name === 'bind' &&
+            node.key.argument &&
+            (node.key.argument.rawName === 'class' || node.key.argument.name === 'class') &&
+            node.value &&
+            node.value.expression
+          ) {
+            const literals = [];
+            findStringLiterals(node.value.expression, literals);
+            for (const { node: litNode, value } of literals) {
+              if (ANY_SUCCESS_RE.test(value)) {
+                checkClassString(context, litNode, value);
+              }
+            }
+          }
+        },
+      },
+      // ESLint visitor for the script half (i.e., the surrounding JS/TS that
+      // vue-eslint-parser exposes through the regular AST traversal). Plain
+      // `.js`/`.ts` files also fall through here.
+      scriptVisitor,
+    );
+  },
+};

package/lib/rules/deprecated-tshirt-sizes.js

@@ -0,0 +1,136 @@
+/**
+ * @fileoverview Detects usage of deprecated t-shirt size props (xs, sm, md, lg, xl) on Dialtone
+ * components and suggests numeric equivalents (100, 200, 300, 400, 500).
+ * @author Dialtone Team
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const SIZE_MAP = {
+  xs: '100',
+  sm: '200',
+  md: '300',
+  lg: '400',
+  xl: '500',
+  '2xl': '600',
+  '3xl': '700',
+};
+
+const TSHIRT_VALUES = new Set(Object.keys(SIZE_MAP));
+
+// Props that accept the component size scale
+const SIZE_PROPS = ['size', 'label-size', 'labelSize'];
+
+// Speed prop on motion-text also uses the same scale
+const SPEED_PROPS = ['speed'];
+
+// All size-related prop names
+const ALL_SIZE_PROPS = [...SIZE_PROPS, ...SPEED_PROPS];
+
+// Only flag on Dialtone components (dt-* or Dt*)
+function isDialtoneComponent (node) {
+  const parent = node.parent;
+  if (!parent || parent.type !== 'VStartTag') return false;
+  const element = parent.parent;
+  if (!element || element.type !== 'VElement') return false;
+  const name = element.rawName || element.name || '';
+  return name.startsWith('dt-') || name.startsWith('Dt');
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'T-shirt sizes (xs, sm, md, lg, xl) are deprecated. Use numeric scale (100, 200, 300, 400, 500) instead.',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-tshirt-sizes.md',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      deprecatedSize: 'Size "{{oldSize}}" is deprecated. Use :{{prop}}="{{newSize}}" instead.',
+      deprecatedSizeInBinding: 'T-shirt size "{{oldSize}}" in dynamic binding is deprecated. Use numeric {{newSize}} instead.',
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute (node) {
+        if (!isDialtoneComponent(node)) return;
+
+        // Get the prop name and check if it's a size-related prop
+        const isDirective = node.directive;
+        const propName = isDirective
+          ? (node.key.argument && node.key.argument.name)
+          : node.key.name;
+
+        if (!propName || !ALL_SIZE_PROPS.includes(propName)) return;
+
+        // --- Static attributes: size="sm" → auto-fixable ---
+        if (!isDirective && node.value && node.value.value) {
+          const sizeValue = node.value.value;
+          if (SIZE_MAP[sizeValue]) {
+            context.report({
+              node,
+              messageId: 'deprecatedSize',
+              data: {
+                oldSize: sizeValue,
+                newSize: SIZE_MAP[sizeValue],
+                prop: propName,
+              },
+              fix (fixer) {
+                const newAttr = `:${propName}="${SIZE_MAP[sizeValue]}"`;
+                return fixer.replaceTextRange(
+                  [node.range[0], node.range[1]],
+                  newAttr,
+                );
+              },
+            });
+          }
+          return;
+        }
+
+        // --- Dynamic bindings: :size="'sm'" or :size="x ? 'sm' : 'md'" ---
+        if (isDirective && node.value && node.value.expression) {
+          // Walk the expression tree for string literals with t-shirt values
+          const expression = node.value.expression;
+          const literals = [];
+
+          (function findLiterals (n) {
+            if (!n) return;
+            if (n.type === 'Literal' && typeof n.value === 'string' && TSHIRT_VALUES.has(n.value)) {
+              literals.push(n);
+            }
+            // Walk child nodes
+            for (const key of Object.keys(n)) {
+              if (key === 'parent') continue;
+              const child = n[key];
+              if (child && typeof child === 'object') {
+                if (Array.isArray(child)) {
+                  child.forEach(c => { if (c && c.type) findLiterals(c); });
+                } else if (child.type) {
+                  findLiterals(child);
+                }
+              }
+            }
+          })(expression);
+
+          for (const literal of literals) {
+            context.report({
+              node: literal,
+              messageId: 'deprecatedSizeInBinding',
+              data: {
+                oldSize: literal.value,
+                newSize: SIZE_MAP[literal.value],
+              },
+            });
+          }
+        }
+      },
+    });
+  },
+};

package/lib/rules/focusgroup-requires-label.js

@@ -0,0 +1,52 @@
+/**
+ * @fileoverview Warns when v-dt-focusgroup is used without an accessible label on the same element.
+ * @author Dialtone
+ */
+'use strict';
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Warns when v-dt-focusgroup is used on an element without aria-label or aria-labelledby. ' +
+        'Screen readers need an accessible name to identify the widget.',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/focusgroup-requires-label.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      missingLabel:
+        'v-dt-focusgroup requires an accessible name via "aria-label" or "aria-labelledby" ' +
+        'so screen readers can identify the widget.',
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute (node) {
+        if (!node.directive) return;
+        if (node.key.name.name !== 'dt-focusgroup') return;
+
+        const element = node.parent;
+        const hasLabel = element.attributes.some(
+          attr =>
+            (!attr.directive && (
+              attr.key.name === 'aria-label' ||
+              attr.key.name === 'aria-labelledby'
+            )) ||
+            (attr.directive && attr.key.name.name === 'bind' && (
+              attr.key.argument?.name === 'aria-label' ||
+              attr.key.argument?.name === 'aria-labelledby'
+            )),
+        );
+
+        if (!hasLabel) {
+          context.report({ node, messageId: 'missingLabel' });
+        }
+      },
+    });
+  },
+};

package/lib/rules/focusgroup-requires-role.js

@@ -0,0 +1,46 @@
+/**
+ * @fileoverview Warns when v-dt-focusgroup is used without a role attribute on the same element.
+ * @author Dialtone
+ */
+'use strict';
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Warns when v-dt-focusgroup is used on an element without a role attribute. ' +
+        'Screen readers need a role to announce the widget correctly.',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/focusgroup-requires-role.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      missingRole:
+        'v-dt-focusgroup requires a "role" attribute (e.g. toolbar, tablist, listbox, radiogroup, menu) ' +
+        'so screen readers can announce the widget correctly.',
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute (node) {
+        if (!node.directive) return;
+        if (node.key.name.name !== 'dt-focusgroup') return;
+
+        const element = node.parent;
+        const hasRole = element.attributes.some(
+          attr =>
+            (!attr.directive && attr.key.name === 'role') ||
+            (attr.directive && attr.key.name.name === 'bind' && attr.key.argument?.name === 'role'),
+        );
+
+        if (!hasRole) {
+          context.report({ node, messageId: 'missingRole' });
+        }
+      },
+    });
+  },
+};

package/lib/util/class-attribute-rule.js

@@ -0,0 +1,49 @@
+/**
+ * Helpers for ESLint rules that autofix deprecated CSS utility classes in
+ * Vue template class attributes.
+ */
+'use strict';
+
+// Token-boundary anchors. `\b` treats `-` as a non-word char, so `\bd-h16\b`
+// would match inside `foo-d-h16` — use whitespace/start/end instead.
+const START = '(?<=^|\\s)';
+const END = '(?=$|\\s)';
+
+function buildDetectRegex (regexes) {
+  return new RegExp(regexes.map(r => r.source).join('|'));
+}
+
+/**
+ * Returns a `create` function for a rule that detects and autofixes deprecated
+ * class names in `class` attributes on Vue template nodes. Preserves the
+ * attribute's quoting style (double, single, or unquoted).
+ */
+function createClassAttributeRule ({ detect, rewrite, messageId }) {
+  return (context) => {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    const defineTemplateBodyVisitor = sourceCode.parserServices?.defineTemplateBodyVisitor;
+    if (!defineTemplateBodyVisitor) return {};
+
+    return defineTemplateBodyVisitor({
+      VAttribute (node) {
+        if (node.key.name !== 'class') return;
+        const classes = node.value?.value;
+        if (!classes || !detect.test(classes)) return;
+
+        context.report({
+          node,
+          messageId,
+          fix (fixer) {
+            const rewritten = rewrite(classes);
+            if (rewritten === classes) return null;
+            const firstChar = sourceCode.getText(node.value)[0];
+            const quote = firstChar === '"' || firstChar === '\'' ? firstChar : '';
+            return fixer.replaceText(node.value, `${quote}${rewritten}${quote}`);
+          },
+        });
+      },
+    });
+  };
+}
+
+module.exports = { START, END, buildDetectRegex, createClassAttributeRule };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/eslint-plugin-dialtone",
-  "version": "1.12.0",
+  "version": "1.13.0-next.1",
   "description": "dialtone eslint plugin",
   "keywords": [
     "Dialpad",