@dialpad/dialtone-css 8.80.0-next.7 → 8.80.0-next.9

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

@@ -169,6 +169,7 @@ const UPDATE_EVENT_RENAMES = {
 
 // Component events removed from emits and replaced by @update:model-value
 const EMIT_EVENT_RENAMES = {
+  'dt-checkbox': { input: 'update:model-value' },
   'dt-input': { input: 'update:model-value' },
   'dt-radio': { input: 'update:model-value' },
   'dt-radio-group': { input: 'update:model-value' },
@@ -630,7 +631,7 @@ Migrations applied:
   selected-values        → model-value           (dt-checkbox-group)
   v-model:selected-values → v-model             (dt-checkbox-group)
   @update:selected-values → @update:model-value (dt-checkbox-group)
-  @input                 → @update:model-value  (dt-input, dt-radio, dt-radio-group, dt-combobox-multi-select, dt-rich-text-editor, dt-input-group)
+  @input                 → @update:model-value  (dt-checkbox, dt-input, dt-radio, dt-radio-group, dt-combobox-multi-select, dt-rich-text-editor, dt-input-group)
   @change                → @update:model-value  (dt-toggle, dt-select-menu)
   show                   → open                  (dt-modal, dt-toast, dt-tooltip)
   @update:show           → @update:open          (dt-modal, dt-toast, dt-tooltip)

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

@@ -33,15 +33,15 @@ export default {
     // 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,
+    // Components: dt-item-layout, dt-list-item, 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' },
+    // #left → #start (only on dt-item-layout, dt-list-item, dt-recipe-general-row, dt-recipe-top-banner-info)
+    { from: /(<(?:dt-(?:item-layout|list-item|recipe-general-row|recipe-top-banner-info)|Dt(?:ItemLayout|ListItem|RecipeGeneralRow|RecipeTopBannerInfo))[\s\S]*?)#left(?=[\s"'>])/gm, to: '$1#start' },
+    // #right → #end (only on dt-item-layout, dt-list-item, dt-recipe-callbox, dt-recipe-contact-centers-row, dt-recipe-top-banner-info)
+    { from: /(<(?:dt-(?:item-layout|list-item|recipe-callbox|recipe-contact-centers-row|recipe-top-banner-info)|Dt(?:ItemLayout|ListItem|RecipeCallbox|RecipeContactCentersRow|RecipeTopBannerInfo))[\s\S]*?)#right(?=[\s"'>])/gm, to: '$1#end' },
+    // #bottom → #blockEnd (only on dt-item-layout, dt-list-item, dt-recipe-callbox)
+    { from: /(<(?:dt-(?:item-layout|list-item|recipe-callbox)|Dt(?:ItemLayout|ListItem|RecipeCallbox))[\s\S]*?)#bottom(?=[\s"'>])/gm, to: '$1#blockEnd' },
 
     // ── Prop renames ──────────────────────────────────────────────────────
     // Longer patterns first within each prefix group.

package/lib/build/js/dialtone_migration_helper/configs/vue3-to-vue-imports.mjs

@@ -0,0 +1,17 @@
+// Migration: /vue3 import paths → /vue
+// After Vue 2 removal, the /vue3 subpath exports were renamed to /vue.
+// The /vue3 paths may still work for backwards compatibility in some packages,
+// but @dialpad/dialtone-icons only exports /vue, making this a breaking change.
+
+export default {
+  description:
+    'Renames /vue3 import subpaths to /vue for @dialpad/dialtone-icons and\n' +
+    '@dialpad/dialtone-vue. After Vue 2 removal, /vue is the canonical path.',
+  patterns: ['**/*.{vue,js,ts,jsx,tsx,mjs,mts}'],
+  expressions: [
+    // @dialpad/dialtone-icons/vue3 → @dialpad/dialtone-icons/vue
+    { from: /@dialpad\/dialtone-icons\/vue3/g, to: '@dialpad/dialtone-icons/vue' },
+    // @dialpad/dialtone-vue/vue3 → @dialpad/dialtone-vue (or /vue if used)
+    { from: /@dialpad\/dialtone-vue\/vue3/g, to: '@dialpad/dialtone-vue' },
+  ],
+};

package/lib/build/less/components/box.less

@@ -62,6 +62,8 @@
 }
 
 ._box-layout(@prop) {
+  &-0 { @{prop}: 0; }
+
   &-1px { @{prop}: var(--dt-layout-1px); }
   &-2px { @{prop}: var(--dt-layout-2px); }
   &-8px { @{prop}: var(--dt-layout-8px); }
@@ -70,9 +72,15 @@
   &-24px { @{prop}: var(--dt-layout-24px); }
   &-50 { @{prop}: var(--dt-layout-50); }
   &-75 { @{prop}: var(--dt-layout-75); }
-  each(range(0, 1600, 100), {
+
+  each(range(100, 200, 25), {
+    &-@{value} { @{prop}: ~"var(--dt-layout-@{value})"; }
+  });
+
+  each(range(250, 1600, 50), {
     &-@{value} { @{prop}: ~"var(--dt-layout-@{value})"; }
   });
+
   // Percentage tokens
   each(@box-layout-percent-values, {
     &-@{value}p { @{prop}: ~"var(--dt-layout-@{value}-percent)"; }

package/lib/build/less/components/button.less

@@ -113,31 +113,6 @@
     box-shadow: var(--dt-shadow-focus);
   }
 
-  &--disabled,
-  &:disabled {
-    --chroma-adjust-text: .08;
-    --chroma-adjust-background: .08;
-    --chroma-adjust-border: .08;
-    --opacity-adjust-text: 65%;
-    --opacity-adjust-background: 65%;
-    --opacity-adjust-border: 40%;
-
-    color:            color-mix(in oklch, oklch( from var(--button-color-text)       l calc(c - var(--chroma-adjust-text)) h ) var(--opacity-adjust-text), transparent );
-    background-color: color-mix(in oklch, oklch( from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h ) var(--opacity-adjust-background), transparent );
-    border-color:     color-mix(in oklch, oklch( from var(--button-color-border)     l calc(c - var(--chroma-adjust-border)) h ) var(--opacity-adjust-border), transparent );
-    cursor: not-allowed;
-    transition: none;
-    pointer-events: none;
-
-    &.d-btn--primary {
-      --opacity-adjust-text: 80%;
-    }
-
-    &.d-btn--muted {
-      --opacity-adjust-text: 50%;
-      --opacity-adjust-border: 50%;
-    }
-  }
 }
 
 ._btn-circle() {
@@ -207,6 +182,36 @@
   ._btn();
 }
 
+.d-btn:where(.d-btn--disabled, :disabled),
+.d-btn--md:where(.d-btn--disabled, :disabled) {
+  --chroma-adjust-text: .08;
+  --chroma-adjust-background: .08;
+  --chroma-adjust-border: .08;
+  --opacity-adjust-text: 65%;
+  --opacity-adjust-background: 65%;
+  --opacity-adjust-border: 40%;
+
+  color:            color-mix(in oklch, oklch( from var(--button-color-text)       l calc(c - var(--chroma-adjust-text)) h ) var(--opacity-adjust-text), transparent );
+  background-color: color-mix(in oklch, oklch( from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h ) var(--opacity-adjust-background), transparent );
+  border-color:     color-mix(in oklch, oklch( from var(--button-color-border)     l calc(c - var(--chroma-adjust-border)) h ) var(--opacity-adjust-border), transparent );
+  cursor: not-allowed;
+  transition: none;
+  pointer-events: none;
+
+  &:where(.d-btn--primary) {
+    --opacity-adjust-text: 80%;
+  }
+
+  &:where(.d-btn--muted) {
+    --opacity-adjust-text: 50%;
+    --opacity-adjust-border: 60%;
+  }
+
+  &:where(.d-btn--active):where(.d-btn--outlined, .d-btn--muted) {
+    --button-color-background: var(--dt-action-color-background-muted-active);
+  }
+}
+
 .d-btn--unstyled {
   /* stylelint-disable */
   all: unset; // Must be first!

package/lib/build/less/components/chip.less

@@ -115,6 +115,38 @@
   }
 }
 
+// Explicit disabled styling for chip close button.
+// This duplicates the button disabled logic since the ._btn() mixin no longer includes disabled state handling.
+// PLUS it may be simplified with upcoming Chip redesign/refactor
+.d-chip__close:where(.d-chip__close--disabled, :disabled) {
+  --chroma-adjust-text: .08;
+  --chroma-adjust-background: .08;
+  --chroma-adjust-border: .08;
+  --opacity-adjust-text: 65%;
+  --opacity-adjust-background: 65%;
+  --opacity-adjust-border: 40%;
+
+  color:            color-mix(in oklch, oklch( from var(--button-color-text)       l calc(c - var(--chroma-adjust-text)) h ) var(--opacity-adjust-text), transparent );
+  background-color: color-mix(in oklch, oklch( from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h ) var(--opacity-adjust-background), transparent );
+  border-color:     color-mix(in oklch, oklch( from var(--button-color-border)     l calc(c - var(--chroma-adjust-border)) h ) var(--opacity-adjust-border), transparent );
+  cursor: not-allowed;
+  transition: none;
+  pointer-events: none;
+
+  &:where(.d-btn--primary) {
+    --opacity-adjust-text: 80%;
+  }
+
+  &:where(.d-btn--muted) {
+    --opacity-adjust-text: 50%;
+    --opacity-adjust-border: 60%;
+  }
+
+  &:where(.d-btn--active):where(.d-btn--outlined, .d-btn--muted) {
+    --button-color-background: var(--dt-action-color-background-muted-active);
+  }
+}
+
 .d-chip__icon {
   --chip-icon-size: calc(var(--dt-layout-25) * 1.25);
 

package/lib/build/less/recipes/contact_info.less

@@ -11,7 +11,6 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  min-inline-size: var(--dt-layout-75);
   block-size: var(--dt-layout-100-percent);
   background-color: transparent;
   background-image: none;