@dialpad/dialtone-css 8.80.0-next.6 → 8.80.0-next.8

package/lib/build/js/dialtone_migration_helper/configs/theme-to-mode.mjs

@@ -0,0 +1,108 @@
+// Migration: deprecated `setTheme()` and `data-dt-theme` attribute → layered API.
+//
+// - Startup call: setTheme(KnownTheme) → initDialtoneTheme(KnownTheme, 'mode')
+// - Dynamic calls: setTheme(expr) → flagged with TODO comment
+// - HTML attributes: data-dt-theme= → data-dt-mode=
+// - JS attribute methods: setAttribute/getAttribute('data-dt-theme') → 'data-dt-mode'
+// - CSS selectors: [data-dt-theme...] → [data-dt-mode...]
+// - Invert regions (data-dt-theme="invert") are flagged with a TODO comment
+//   rather than auto-rewritten — the v-dt-mode directive uses a live
+//   MutationObserver that cannot be replicated with a static replacement.
+
+// Identifiers and their mode extracted from the known legacy theme names.
+const KNOWN_LIGHT = ['DpLight', 'TmoLight', 'ExpressiveLight', 'ExpressiveSmLight'];
+const KNOWN_DARK = ['DpDark', 'TmoDark', 'ExpressiveDark', 'ExpressiveSmDark'];
+const ALL_KNOWN = [...KNOWN_LIGHT, ...KNOWN_DARK];
+const KNOWN_PATTERN = ALL_KNOWN.join('|');
+
+export default {
+  description:
+    'Migrates from the deprecated setTheme() / data-dt-theme API to the layered theming API.\n' +
+    '- setTheme(DpLight) → initDialtoneTheme(DpLight, \'light\')\n' +
+    '- setTheme(DpDark) → initDialtoneTheme(DpDark, \'dark\')\n' +
+    '- Same for TmoLight, TmoDark, ExpressiveLight, ExpressiveDark, ExpressiveSmLight, ExpressiveSmDark\n' +
+    '- setTheme(dynamicExpr) → preserved + TODO comment\n' +
+    '- data-dt-theme= → data-dt-mode= (HTML attributes, JS attr methods, CSS selectors)\n' +
+    '- data-dt-theme="invert" → preserved + TODO comment (review for v-dt-mode directive)\n',
+
+  patterns: ['**/*.{vue,html,js,ts,jsx,tsx,css,less,scss,mjs}'],
+
+  globbyConfig: {
+    ignore: [
+      '**/dialtone_migration_helper/tests/**',
+      '**/guides/migration/theme-to-mode/**',
+      '**/guides/theme-and-mode/index.md',
+      '**/whats-new/posts/2024-8-1.md',
+    ],
+  },
+
+  expressions: [
+    // 1. setTheme() call rewrites for known light identifiers.
+    //    Must run BEFORE the unknown-call flag expression (3) so these are
+    //    fully consumed before the fallthrough regex fires.
+    {
+      from: new RegExp(
+        `(?<!\\.)setTheme\\(\\s*(${KNOWN_LIGHT.join('|')})\\s*\\)`,
+        'g',
+      ),
+      to: (_match, identifier) => `initDialtoneTheme(${identifier}, 'light')`,
+    },
+
+    // 2. setTheme() call rewrites for known dark identifiers.
+    {
+      from: new RegExp(
+        `(?<!\\.)setTheme\\(\\s*(${KNOWN_DARK.join('|')})\\s*\\)`,
+        'g',
+      ),
+      to: (_match, identifier) => `initDialtoneTheme(${identifier}, 'dark')`,
+    },
+
+    // 3. setTheme() calls with unknown / dynamic arguments → TODO comment.
+    //    Negative-lookahead skips the eight known identifiers already rewritten above.
+    //    Negative-lookbehind on '.' prevents matching unrelated .setTheme() methods.
+    {
+      from: new RegExp(
+        `(?<!\\.)setTheme\\(\\s*(?!(${KNOWN_PATTERN})\\s*\\))([^)]*)\\)`,
+        'g',
+      ),
+      to: (match) =>
+        `// TODO: review for layered API migration — see /guides/migration/theme-to-mode/\n${match}`,
+    },
+
+    // 4. Attribute rename: data-dt-theme → data-dt-mode
+    //    Covers HTML/Vue/JSX attributes, JS string literals, and CSS selectors.
+    //    Negative lookahead (?!-) prevents matching data-dt-theme-x (longer names).
+    //    Works correctly with applyConfig's inner match.replace() since the inner
+    //    call operates on just the matched text "data-dt-theme" where (?!-) passes
+    //    at end-of-string (no "-" follows).
+    {
+      from: /\bdata-dt-theme(?!-)/g,
+      to: () => 'data-dt-mode',
+    },
+
+    // 5. CSS selector invert — add TODO comment before the renamed selector.
+    //    Expression 5 already renamed [data-dt-theme=...] → [data-dt-mode=...],
+    //    so we match on the result.  HTML attribute invert is handled by
+    //    expression 5 (just renamed, no comment — inserting HTML comments inside
+    //    tags produces invalid markup; consumers grep for data-dt-mode="invert"
+    //    to find regions needing v-dt-mode review).
+    {
+      from: /\[data-dt-mode="invert"\]|\[data-dt-mode=invert\]/g,
+      to: (match) =>
+        `/* TODO: review for v-dt-mode adoption — see /guides/migration/theme-to-mode/ */\n${match}`,
+    },
+
+    // 6. JS attribute methods: setAttribute/getAttribute/etc. on 'data-dt-theme'
+    {
+      from: /(\.(?:set|get|toggle|remove|has)Attribute\(\s*['"])data-dt-theme(['"])/g,
+      to: (_match, prefix, suffix) => `${prefix}data-dt-mode${suffix}`,
+    },
+
+    // 7. CSS attribute selectors: [data-dt-theme...] → [data-dt-mode...]
+    //    Runs after the invert-flagging expressions to avoid double-processing.
+    {
+      from: /\[data-dt-theme(\]|=[^\]]*\])/g,
+      to: (_match, rest) => `[data-dt-mode${rest}`,
+    },
+  ],
+};

package/lib/build/js/dialtone_migration_helper/tests/theme-to-mode-test-examples.vue

@@ -0,0 +1,24 @@
+<template>
+  <!-- Module path example (should be rewritten by codemod) -->
+  <section data-dt-theme="light">
+    Light mode section
+  </section>
+
+  <!-- CSS selector example (for stylesheet tests) -->
+  <div class="themed-container">
+    Theme-aware container
+  </div>
+</template>
+
+<script>
+// Legacy imports — these paths and calls are transformed by the codemod
+import DpLight from '@dialpad/dialtone/themes/dp-light';
+import DpDark from '@dialpad/dialtone/themes/dp-dark';
+import { setTheme } from '@dialpad/dialtone/themes/config';
+
+// Startup initialization
+setTheme(DpLight);
+
+// Mode switching (runtime)
+setTheme(DpDark);
+</script>

package/lib/build/js/dialtone_migration_helper/tests/theme-to-mode.test.mjs

@@ -0,0 +1,177 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import config from '../configs/theme-to-mode.mjs';
+import { applyConfig } from './helpers.mjs';
+
+const apply = (input) => applyConfig(config, input);
+
+describe('theme-to-mode config', () => {
+  // ─── setTheme call rewrites ───────────────────────────────────────────────
+
+  describe('setTheme() → initDialtoneTheme() for known identifiers', () => {
+    it('rewrites setTheme(DpLight) → initDialtoneTheme(DpLight, \'light\')', () => {
+      const input = `setTheme(DpLight);`;
+      const expected = `initDialtoneTheme(DpLight, 'light');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites setTheme(DpDark) → initDialtoneTheme(DpDark, \'dark\')', () => {
+      const input = `setTheme(DpDark);`;
+      const expected = `initDialtoneTheme(DpDark, 'dark');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites setTheme(TmoLight) → initDialtoneTheme(TmoLight, \'light\')', () => {
+      const input = `setTheme(TmoLight);`;
+      const expected = `initDialtoneTheme(TmoLight, 'light');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites setTheme(TmoDark) → initDialtoneTheme(TmoDark, \'dark\')', () => {
+      const input = `setTheme(TmoDark);`;
+      const expected = `initDialtoneTheme(TmoDark, 'dark');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites setTheme(ExpressiveLight) → initDialtoneTheme(ExpressiveLight, \'light\')', () => {
+      const input = `setTheme(ExpressiveLight);`;
+      const expected = `initDialtoneTheme(ExpressiveLight, 'light');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites setTheme(ExpressiveDark) → initDialtoneTheme(ExpressiveDark, \'dark\')', () => {
+      const input = `setTheme(ExpressiveDark);`;
+      const expected = `initDialtoneTheme(ExpressiveDark, 'dark');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('handles whitespace inside setTheme call', () => {
+      const input = `setTheme( DpLight );`;
+      const expected = `initDialtoneTheme(DpLight, 'light');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites setTheme(DpLight) as part of onMounted setup', () => {
+      const input = `onMounted(() => { setTheme(DpLight); });`;
+      const expected = `onMounted(() => { initDialtoneTheme(DpLight, 'light'); });`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('does NOT rewrite setTheme() with a dynamic variable — emits TODO comment', () => {
+      const input = `setTheme(myDynamicTheme);`;
+      const result = apply(input);
+      assert.ok(result.includes('setTheme(myDynamicTheme)'), 'original call preserved');
+      assert.ok(result.includes('TODO: review for layered API migration'), 'TODO comment inserted');
+    });
+
+    it('does NOT rewrite setTheme() with an expression — emits TODO comment', () => {
+      const input = `setTheme(isDark ? DpDark : DpLight);`;
+      const result = apply(input);
+      assert.ok(result.includes('setTheme(isDark ? DpDark : DpLight)'), 'original call preserved');
+      assert.ok(result.includes('TODO: review for layered API migration'), 'TODO comment inserted');
+    });
+
+    it('does NOT rewrite myObj.setTheme() — unrelated method', () => {
+      const input = `myThemeManager.setTheme(DpLight);`;
+      assert.equal(apply(input), input);
+    });
+  });
+
+  // ─── Attribute renames ────────────────────────────────────────────────────
+
+  describe('data-dt-theme → data-dt-mode in HTML attributes', () => {
+    it('rewrites data-dt-theme= in HTML attribute', () => {
+      const input = `<html data-dt-theme="dp-light">`;
+      const expected = `<html data-dt-mode="dp-light">`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites data-dt-theme= with single quotes', () => {
+      const input = `<section data-dt-theme='dark'>content</section>`;
+      const expected = `<section data-dt-mode='dark'>content</section>`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('does NOT rewrite data-dt-theme-x (longer attribute with same prefix)', () => {
+      const input = `<div data-dt-theme-custom="foo">`;
+      assert.equal(apply(input), input);
+    });
+
+    it('rewrites data-dt-theme= in Vue template binding (static)', () => {
+      const input = `<div data-dt-theme="light">`;
+      const expected = `<div data-dt-mode="light">`;
+      assert.equal(apply(input), expected);
+    });
+  });
+
+  describe('data-dt-theme in JS setAttribute/getAttribute', () => {
+    it('rewrites setAttribute first argument', () => {
+      const input = `el.setAttribute('data-dt-theme', 'dark');`;
+      const expected = `el.setAttribute('data-dt-mode', 'dark');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites getAttribute first argument', () => {
+      const input = `const mode = el.getAttribute('data-dt-theme');`;
+      const expected = `const mode = el.getAttribute('data-dt-mode');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites removeAttribute first argument', () => {
+      const input = `el.removeAttribute('data-dt-theme');`;
+      const expected = `el.removeAttribute('data-dt-mode');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites hasAttribute first argument', () => {
+      const input = `if (el.hasAttribute('data-dt-theme')) {`;
+      const expected = `if (el.hasAttribute('data-dt-mode')) {`;
+      assert.equal(apply(input), expected);
+    });
+  });
+
+  describe('data-dt-theme in CSS attribute selectors', () => {
+    it('rewrites [data-dt-theme] bare selector', () => {
+      const input = `[data-dt-theme] { color: red; }`;
+      const expected = `[data-dt-mode] { color: red; }`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites [data-dt-theme="value"] selector', () => {
+      const input = `[data-dt-theme="dp-light"] { background: white; }`;
+      const expected = `[data-dt-mode="dp-light"] { background: white; }`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites [data-dt-theme=value] selector (unquoted)', () => {
+      const input = `[data-dt-theme=light] .d-banner { border: 1px; }`;
+      const expected = `[data-dt-mode=light] .d-banner { border: 1px; }`;
+      assert.equal(apply(input), expected);
+    });
+  });
+
+  // ─── Invert handling ──────────────────────────────────────────────────────
+
+  describe('data-dt-theme="invert" handling', () => {
+    it('renames data-dt-theme="invert" to data-dt-mode="invert" (grep to find for v-dt-mode review)', () => {
+      const input = `<section data-dt-theme="invert">content</section>`;
+      const result = apply(input);
+      assert.ok(result.includes('data-dt-mode="invert"'), 'attribute renamed');
+      assert.ok(!result.includes('data-dt-theme="invert"'), 'old attribute removed');
+    });
+
+    it('adds TODO comment before [data-dt-theme="invert"] CSS selector', () => {
+      const input = `[data-dt-theme="invert"] .d-card { box-shadow: none; }`;
+      const result = apply(input);
+      assert.ok(result.includes('[data-dt-mode="invert"]'), 'selector renamed');
+      assert.ok(result.includes('TODO: review for v-dt-mode adoption'), 'TODO inserted');
+    });
+
+    it('adds TODO comment before [data-dt-theme=invert] unquoted CSS selector', () => {
+      const input = `[data-dt-theme=invert] { background: red; }`;
+      const result = apply(input);
+      assert.ok(result.includes('[data-dt-mode=invert]'), 'selector renamed');
+      assert.ok(result.includes('TODO: review for v-dt-mode adoption'), 'TODO inserted');
+    });
+  });
+});

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)"; }
@@ -103,13 +111,13 @@
 //  ============================================================================
 //  $   VALUE LISTS
 //  ----------------------------------------------------------------------------
-@box-surface-values: primary, secondary, moderate, bold, strong, contrast, backdrop, brand, info, warning, critical, positive, success, brand-subtle, brand-strong, info-subtle, info-strong, warning-subtle, warning-strong, critical-subtle, critical-strong, positive-subtle, positive-strong, success-subtle, success-strong, primary-opaque, secondary-opaque, moderate-opaque, bold-opaque, strong-opaque, contrast-opaque, brand-opaque, brand-subtle-opaque, info-opaque, info-subtle-opaque, warning-opaque, warning-subtle-opaque, critical-opaque, critical-subtle-opaque, positive-opaque, positive-subtle-opaque, success-opaque, success-subtle-opaque;
+@box-surface-values: overlay, primary, secondary, moderate, bold, strong, contrast, backdrop, brand, info, warning, critical, positive, success, brand-subtle, brand-strong, info-subtle, info-strong, warning-subtle, warning-strong, critical-subtle, critical-strong, positive-subtle, positive-strong, success-subtle, success-strong, primary-opaque, secondary-opaque, moderate-opaque, bold-opaque, strong-opaque, contrast-opaque, brand-opaque, brand-subtle-opaque, info-opaque, info-subtle-opaque, warning-opaque, warning-subtle-opaque, critical-opaque, critical-subtle-opaque, positive-opaque, positive-subtle-opaque, success-opaque, success-subtle-opaque;
 
 @box-border-color-values: subtle, default, moderate, bold, accent, focus, brand, warning, critical, info, positive, success, brand-subtle, brand-strong, warning-subtle, warning-strong, critical-subtle, critical-strong, info-subtle, info-strong, positive-subtle, positive-strong, success-subtle, success-strong;
 
 @box-border-width-values: 0, 50, 100, 150, 200, 300, 400;
 @box-layout-percent-values: 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 95, 100;
-@box-shadow-values: small, medium, large, extra-large, card;
+@box-shadow-values: raised, overlay, modal;
 @box-overflow-values: hidden, scroll, auto, clip, visible;
 
 @layer dialtone.components {

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!
@@ -274,6 +279,7 @@
 //  ----------------------------------------------------------------------------
 .d-btn__leading,
 .d-btn__trailing {
+  z-index: var(--zi-base1);
   display: inline-flex;
   align-items: center;
   align-self: stretch;
@@ -318,6 +324,7 @@
 }
 
 .d-btn__icon {
+  z-index: var(--zi-base1);
   display: flex;
 
   :where(.d-btn--disabled) & ,

package/lib/build/less/components/card.less

@@ -25,7 +25,7 @@
   background: var(--dt-color-surface-primary);
   border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
   border-radius: var(--dt-size-radius-300);
-  box-shadow: var(--dt-shadow-card);
+  box-shadow: var(--dt-shadow-raised);
 }
 
 

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/components/emoji-picker.less

@@ -17,7 +17,7 @@
   // with this width we have 9 emoji per row
   inline-size: var(--dt-layout-550);
   block-size: 100%;
-  background-color: var(--dt-color-surface-primary);
+  background-color: var(--dt-color-surface-overlay);
   border-radius: var(--dt-size-radius-300);
 
   &--header {
@@ -28,8 +28,8 @@
       position: absolute;
       inset-inline: 0;
       inset-block-end: 0;
-      block-size: var(--dt-size-border-200);
-      background-color: var(--dt-color-surface-moderate) !important;
+      block-size: var(--dt-size-border-100);
+      background-color: var(--dt-color-border-subtle) !important;
       content: '';
     }
   }
@@ -49,7 +49,6 @@
     justify-content: space-between;
     block-size: calc(var(--dt-layout-100) - var(--dt-spacing-75));
     padding: 0 var(--dt-spacing-200);
-    background: var(--dt-color-surface-secondary);
     border-block-start: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
   }
 
@@ -62,7 +61,7 @@
       gap: var(--dt-spacing-0);
 
       &::after {
-        background-color: var(--dt-color-surface-moderate) !important;
+        background-color: var(--dt-color-neutral-transparent) !important;
       }
 
       .d-tablist__item {
@@ -92,8 +91,8 @@
       margin: 0;
       padding: 0;
       background: none;
-      border: var(--dt-size-border-100) solid transparent;
-      border-radius: var(--dt-size-radius-350);
+      border: var(--dt-size-border-100) solid var(--dt-color-neutral-transparent);
+      border-radius: var(--dt-size-radius-circle);
       outline: none;
       cursor: pointer;
 
@@ -103,7 +102,7 @@
 
       &:active,
       &.selected {
-        border-color: var(--dt-color-border-bold);
+        border-color: var(--dt-color-border-moderate);
       }
     }
   }
@@ -116,13 +115,13 @@
       margin: 0;
       padding: calc(var(--dt-spacing-75) + var(--dt-spacing-1));
       background: var(--dt-color-surface-moderate-opaque);
-      border: none;
+      border: var(--dt-size-border-100) solid var(--dt-color-neutral-transparent);
       border-radius: var(--dt-size-radius-circle);
       outline: none;
       cursor: pointer;
 
       &:hover {
-        background: var(--dt-color-surface-bold);
+        border-color: var(--dt-color-border-subtle);
       }
     }
   }
@@ -144,7 +143,7 @@
     inline-size: 100%;
     margin: 0;
     padding: var(--dt-spacing-200) var(--dt-spacing-200) 0 var(--dt-spacing-200);
-    background: var(--dt-color-surface-primary);
+    background: var(--dt-color-surface-overlay);
   }
 
   &__list {

package/lib/build/less/components/forms.less

@@ -118,6 +118,8 @@ fieldset {
 //  ----------------------------------------------------------------------------
 .d-validation-message {
   --validation-color-text: var(--dt-color-foreground-tertiary);
+  --validation-size-icon: var(--dt-layout-25);
+  --validation-icon: initial;
 
   display: flex;
   gap: var(--dt-spacing-50);
@@ -129,14 +131,15 @@ fieldset {
   font-family: inherit;
   line-height: var(--dt-font-line-height-300);
 
-  // Icon Slot
-  &::before {
+  // Raw-HTML icon fallback — suppressed when a real .d-icon child is present
+  &:not(:has(.d-icon))::before {
     display: block;
     margin-block-start: var(--dt-spacing-25);
-    inline-size: var(--dt-layout-25); // 16
-    min-inline-size: var(--dt-layout-25); // 16
-    block-size: var(--dt-layout-25); // 16
+    inline-size: var(--validation-size-icon);
+    min-inline-size: var(--validation-size-icon);
+    block-size: var(--validation-size-icon);
     background-color: var(--validation-color-text);
+    mask: var(--validation-icon);
     content: '';
   }
 
@@ -144,6 +147,13 @@ fieldset {
     display: flex;
     flex-direction: column;
   }
+
+  &__icon {
+    margin-block-start: calc(var(--dt-spacing-25) / 2);
+    color: var(--validation-color-text);
+    inline-size: var(--validation-size-icon);
+    block-size: var(--validation-size-icon);
+  }
 }
 
 //  $$   VALIDATION STATES
@@ -151,27 +161,23 @@ fieldset {
 
 .d-validation-message--warning {
   --validation-color-text: var(--dt-color-foreground-warning);
-
-  &::before {
-    mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==') repeat;
-  }
+  --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==') repeat;
 }
 
 .d-validation-message--critical,
 .d-validation-message--error {
   --validation-color-text: var(--dt-color-foreground-critical);
-
-  &::before {
-    mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
-  }
+  --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
 }
 
 .d-validation-message--positive,
 .d-validation-message--success {
   --validation-color-text: var(--dt-color-foreground-positive);
+  --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
+}
 
-  &::before {
-    mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
-  }
+.d-validation-message--info {
+  --validation-color-text: var(--dt-color-foreground-info);
+  --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFptNS0yYS41LjUgMCAwIDEgLjUtLjVoLjAwNWEuNS41IDAgMCAxIDAgMUg2YS41LjUgMCAwIDEtLjUtLjVaTTYgNS41YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwVjZhLjUuNSAwIDAgMSAuNS0uNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPiA8L2c+IDxkZWZzPiA8Y2xpcFBhdGggaWQ9ImEiPiA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDEydjEySDB6Ii8+IDwvY2xpcFBhdGg+IDwvZGVmcz4gPC9zdmc+') no-repeat;
 }
 }

package/lib/build/less/components/image-viewer.less

@@ -22,6 +22,7 @@
   max-block-size: 80%;
   padding: var(--dt-spacing-0);
   border-radius: var(--dt-size-radius-0);
+  box-shadow: var(--dt-shadow-modal);
 
   &__image {
     max-inline-size: 100%;