@d4gger/design-system 2.7.0 → 3.0.1

package/dist/components/select/select.props.d.mts

@@ -1,5 +1,5 @@
 declare const selectSizes: readonly ["sm", "md", "lg"];
-declare const selectVariants: readonly ["default", "ghost"];
+declare const selectVariants: readonly ["default", "ghost", "vision"];
 declare const selectAccentColors: readonly ["default", "primary"];
 declare const selectRootPropDefs: {
     size: {
@@ -9,7 +9,7 @@ declare const selectRootPropDefs: {
     };
     variant: {
         type: "enum";
-        values: readonly ["default", "ghost"];
+        values: readonly ["default", "ghost", "vision"];
         default: "default";
     };
     accentColor: {
@@ -32,9 +32,13 @@ declare const selectTriggerPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["default", "ghost"];
+        values: readonly ["default", "ghost", "vision"];
         default: "default";
     };
+    invalid: {
+        type: "boolean";
+        default: false;
+    };
     asChild: {
         type: "boolean";
         default: false;
@@ -50,7 +54,7 @@ declare const selectContentPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["default", "ghost"];
+        values: readonly ["default", "ghost", "vision"];
         default: "default";
     };
     asChild: {

package/dist/components/select/select.props.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"select.props.d.mts","sourceRoot":"","sources":["../../../src/components/select/select.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,WAAW,6BAA8B,CAAA;AAC/C,QAAA,MAAM,cAAc,+BAAgC,CAAA;AACpD,QAAA,MAAM,kBAAkB,iCAAkC,CAAA;AAE1D,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsBvB,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;CAkB1B,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;CAkB1B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,WAAW,EAAE,qBAAqB,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"select.props.d.mts","sourceRoot":"","sources":["../../../src/components/select/select.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,WAAW,6BAA8B,CAAA;AAC/C,QAAA,MAAM,cAAc,yCAA0C,CAAA;AAC9D,QAAA,MAAM,kBAAkB,iCAAkC,CAAA;AAE1D,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsBvB,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAuB1B,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;CAkB1B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,WAAW,EAAE,qBAAqB,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/select/select.props.d.ts

@@ -1,5 +1,5 @@
 declare const selectSizes: readonly ["sm", "md", "lg"];
-declare const selectVariants: readonly ["default", "ghost"];
+declare const selectVariants: readonly ["default", "ghost", "vision"];
 declare const selectAccentColors: readonly ["default", "primary"];
 declare const selectRootPropDefs: {
     size: {
@@ -9,7 +9,7 @@ declare const selectRootPropDefs: {
     };
     variant: {
         type: "enum";
-        values: readonly ["default", "ghost"];
+        values: readonly ["default", "ghost", "vision"];
         default: "default";
     };
     accentColor: {
@@ -32,9 +32,13 @@ declare const selectTriggerPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["default", "ghost"];
+        values: readonly ["default", "ghost", "vision"];
         default: "default";
     };
+    invalid: {
+        type: "boolean";
+        default: false;
+    };
     asChild: {
         type: "boolean";
         default: false;
@@ -50,7 +54,7 @@ declare const selectContentPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["default", "ghost"];
+        values: readonly ["default", "ghost", "vision"];
         default: "default";
     };
     asChild: {

package/dist/components/select/select.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.props.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,WAAW,6BAA8B,CAAA;AAC/C,QAAA,MAAM,cAAc,+BAAgC,CAAA;AACpD,QAAA,MAAM,kBAAkB,iCAAkC,CAAA;AAE1D,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsBvB,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;CAkB1B,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;CAkB1B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,WAAW,EAAE,qBAAqB,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"select.props.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,WAAW,6BAA8B,CAAA;AAC/C,QAAA,MAAM,cAAc,yCAA0C,CAAA;AAC9D,QAAA,MAAM,kBAAkB,iCAAkC,CAAA;AAE1D,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsBvB,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAuB1B,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;CAkB1B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,WAAW,EAAE,qBAAqB,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/select/select.props.js

@@ -1,6 +1,6 @@
 import { asChildPropDef } from "../../_internal/props/asChild.prop.js";
 const selectSizes = ["sm", "md", "lg"];
-const selectVariants = ["default", "ghost"];
+const selectVariants = ["default", "ghost", "vision"];
 const selectAccentColors = ["default", "primary"];
 const selectRootPropDefs = {
   ...asChildPropDef,
@@ -33,6 +33,10 @@ const selectTriggerPropDefs = {
     className: "dsx-select-variant",
     values: selectVariants,
     default: "default"
+  },
+  invalid: {
+    type: "boolean",
+    default: false
   }
 };
 const selectContentPropDefs = {

package/dist/components/select/select.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/select/select.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst selectSizes = ['sm', 'md', 'lg'] as const\nconst selectVariants = ['default', 'ghost'] as const\nconst selectAccentColors = ['default', 'primary'] as const\n\nconst selectRootPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    values: selectSizes,\n    default: 'md',\n  },\n  variant: {\n    type: 'enum',\n    values: selectVariants,\n    default: 'default',\n  },\n  accentColor: {\n    type: 'enum',\n    values: selectAccentColors,\n    default: 'default',\n  },\n} satisfies {\n  accentColor: PropDef<(typeof selectAccentColors)[number]>\n  asChild: PropDef\n  size: PropDef<(typeof selectSizes)[number]>\n  variant: PropDef<(typeof selectVariants)[number]>\n}\n\nconst selectTriggerPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    className: 'dsx-select-size',\n    values: selectSizes,\n    default: 'md',\n  },\n  variant: {\n    type: 'enum',\n    className: 'dsx-select-variant',\n    values: selectVariants,\n    default: 'default',\n  },\n} satisfies {\n  asChild: PropDef\n  size: PropDef<(typeof selectSizes)[number]>\n  variant: PropDef<(typeof selectVariants)[number]>\n}\n\nconst selectContentPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    className: 'dsx-select-size',\n    values: selectSizes,\n    default: 'md',\n  },\n  variant: {\n    type: 'enum',\n    className: 'dsx-select-variant',\n    values: selectVariants,\n    default: 'default',\n  },\n} satisfies {\n  asChild: PropDef\n  size: PropDef<(typeof selectSizes)[number]>\n  variant: PropDef<(typeof selectVariants)[number]>\n}\n\nexport { selectAccentColors, selectContentPropDefs, selectRootPropDefs, selectSizes, selectTriggerPropDefs, selectVariants }\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,cAAc,CAAC,MAAM,MAAM,IAAI;AACrC,MAAM,iBAAiB,CAAC,WAAW,OAAO;AAC1C,MAAM,qBAAqB,CAAC,WAAW,SAAS;AAEhD,MAAM,qBAAqB;AAAA,EACzB,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAOA,MAAM,wBAAwB;AAAA,EAC5B,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAMA,MAAM,wBAAwB;AAAA,EAC5B,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst selectSizes = ['sm', 'md', 'lg'] as const\nconst selectVariants = ['default', 'ghost', 'vision'] as const\nconst selectAccentColors = ['default', 'primary'] as const\n\nconst selectRootPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    values: selectSizes,\n    default: 'md',\n  },\n  variant: {\n    type: 'enum',\n    values: selectVariants,\n    default: 'default',\n  },\n  accentColor: {\n    type: 'enum',\n    values: selectAccentColors,\n    default: 'default',\n  },\n} satisfies {\n  accentColor: PropDef<(typeof selectAccentColors)[number]>\n  asChild: PropDef\n  size: PropDef<(typeof selectSizes)[number]>\n  variant: PropDef<(typeof selectVariants)[number]>\n}\n\nconst selectTriggerPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    className: 'dsx-select-size',\n    values: selectSizes,\n    default: 'md',\n  },\n  variant: {\n    type: 'enum',\n    className: 'dsx-select-variant',\n    values: selectVariants,\n    default: 'default',\n  },\n  invalid: {\n    type: 'boolean',\n    default: false,\n  },\n} satisfies {\n  asChild: PropDef\n  size: PropDef<(typeof selectSizes)[number]>\n  variant: PropDef<(typeof selectVariants)[number]>\n  invalid: PropDef\n}\n\nconst selectContentPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    className: 'dsx-select-size',\n    values: selectSizes,\n    default: 'md',\n  },\n  variant: {\n    type: 'enum',\n    className: 'dsx-select-variant',\n    values: selectVariants,\n    default: 'default',\n  },\n} satisfies {\n  asChild: PropDef\n  size: PropDef<(typeof selectSizes)[number]>\n  variant: PropDef<(typeof selectVariants)[number]>\n}\n\nexport { selectAccentColors, selectContentPropDefs, selectRootPropDefs, selectSizes, selectTriggerPropDefs, selectVariants }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,cAAc,CAAC,MAAM,MAAM,IAAI;AACrC,MAAM,iBAAiB,CAAC,WAAW,SAAS,QAAQ;AACpD,MAAM,qBAAqB,CAAC,WAAW,SAAS;AAEhD,MAAM,qBAAqB;AAAA,EACzB,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAOA,MAAM,wBAAwB;AAAA,EAC5B,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;AAOA,MAAM,wBAAwB;AAAA,EAC5B,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

package/dist/components/select.css

@@ -1,30 +1,42 @@
 
 @import '../../_internal/baseMenu.css';
 
+/* Was missing backdrop-filter - the background token alone gave a translucent tint but no blur,
+   so this was a partial glass effect, not the real one Popover/Dialog use. */
 .dsx-select__content {
   box-sizing: border-box;
   position: relative;
   z-index: var(--dsx-z-index-dropdown);
+  /* Width rule (batch 4, D1): mirror the trigger by default, grow to fit the
+     longest option. The ceiling is the viewport edge or 40rem, whichever is
+     smaller — past it rows wrap (data-overflow) instead of stretching the
+     panel screen-wide. 40rem sits between the one-line demo option and the
+     wrap-demo option; token candidate for the size batch. */
+  width: max-content;
   min-width: var(--radix-select-trigger-width, 200px);
-  padding: var(--dsx-space-xs);
-  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  max-width: min(var(--radix-select-content-available-width), 40rem);
+  padding: var(--dsx-space-sm) var(--dsx-space-xs);
+  border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
   border-radius: var(--dsx-rounded-lg);
   background: var(--dsx-color-panel-translucent);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
   color: var(--dsx-color-on-surface);
   overflow: hidden;
   isolation: isolate;
 }
 
 .dsx-select__item {
+  box-sizing: border-box;
   position: relative;
   display: inline-flex;
   width: 100%;
+  max-width: 100%;
   min-height: var(--dsx-size-lg);
   align-items: center;
   gap: var(--dsx-space-sm);
-  padding: var(--dsx-space-sm) var(--dsx-space-sm) var(--dsx-space-sm) calc(var(--dsx-space-lg) + var(--dsx-space-sm));
+  padding: var(--dsx-space-sm) calc(var(--dsx-space-lg) + var(--dsx-space-sm)) var(--dsx-space-sm) var(--dsx-space-sm);
   border: 0;
-  border-radius: var(--dsx-rounded-md);
+  border-radius: 0;
   background: transparent;
   color: var(--dsx-color-on-surface);
   text-align: left;
@@ -35,22 +47,50 @@
 
 .dsx-select__item-indicator {
   position: absolute;
-  left: var(--dsx-space-sm);
+  right: var(--dsx-space-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: var(--dsx-size-md);
 }
 
+/* Check side opt-in: content opts into left-gutter checks via
+   data-check="left" (Mantine-style checkIconPosition). Default is right. */
+.dsx-select__content[data-check='left'] .dsx-select__item {
+  padding: var(--dsx-space-sm) var(--dsx-space-sm) var(--dsx-space-sm) calc(var(--dsx-space-lg) + var(--dsx-space-sm));
+}
+
+.dsx-select__content[data-check='left'] .dsx-select__item-indicator {
+  right: auto;
+  left: var(--dsx-space-sm);
+}
+
+/* Single-line ellipsis: values and items never wrap (wrapping cramps the
+   trigger after selection and breaks panel rhythm). */
+.dsx-select__value,
+.dsx-select__item-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.dsx-select__content[data-selected='fill'] .dsx-select__item[data-state='checked'] {
+  background: var(--dsx-color-accent-track);
+  color: var(--dsx-color-accent-contrast);
+  box-shadow: none;
+}
+
 .dsx-select__trigger {
   box-sizing: border-box;
   display: flex;
   width: 100%;
-  min-height: var(--dsx-size-xl);
+  min-height: var(--dsx-density-control-height, var(--dsx-size-xl));
   align-items: center;
   justify-content: space-between;
   gap: var(--dsx-space-sm);
-  padding: var(--dsx-space-sm) var(--dsx-space-md);
+  padding-block: var(--dsx-density-control-padding-block, var(--dsx-space-sm));
+  padding-inline: var(--dsx-density-control-padding-inline, var(--dsx-space-md));
   border-radius: var(--dsx-rounded-md);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   background: var(--dsx-color-surface);
@@ -108,13 +148,21 @@
 }
 
 .dsx-select__trigger[data-size='sm'] {
-  min-height: var(--dsx-size-lg);
-  padding: var(--dsx-space-xs) var(--dsx-space-sm);
+  min-height: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
+  padding-block: var(--dsx-density-control-padding-block-sm, var(--dsx-space-xs));
+  padding-inline: var(--dsx-density-control-padding-inline-sm, var(--dsx-space-sm));
+  font-size: var(--dsx-typography-body-small-font-size);
+  line-height: var(--dsx-typography-body-small-line-height);
+  letter-spacing: var(--dsx-typography-body-small-letter-spacing);
 }
 
 .dsx-select__trigger[data-size='lg'] {
-  min-height: calc(var(--dsx-size-xl) + var(--dsx-space-sm));
-  padding: var(--dsx-space-md) var(--dsx-space-lg);
+  min-height: var(--dsx-density-control-height-lg, var(--dsx-size-2xl));
+  padding-block: var(--dsx-density-control-padding-block-lg, var(--dsx-space-md));
+  padding-inline: var(--dsx-density-control-padding-inline-lg, var(--dsx-space-lg));
+  font-size: var(--dsx-typography-body-large-font-size);
+  line-height: var(--dsx-typography-body-large-line-height);
+  letter-spacing: var(--dsx-typography-body-large-letter-spacing);
 }
 
 .dsx-select__value {
@@ -156,17 +204,42 @@
   max-height: inherit;
 }
 
-.dsx-select-size-sm {
+/* Overflow rows wrap (batch 4): SelectItem latches data-overflow when the row
+   text exceeds the row box (see SelectItem). Wrapped rows show the full text
+   on two lines with the highlight spanning the full row width; rows that fit
+   stay single-line ellipsis. */
+.dsx-select__item[data-overflow='true'] {
   min-height: var(--dsx-size-lg);
-  padding: var(--dsx-space-xs) var(--dsx-space-sm);
 }
 
-.dsx-select-size-lg {
-  min-height: calc(var(--dsx-size-xl) + var(--dsx-space-sm));
-  padding: var(--dsx-space-md) var(--dsx-space-lg);
+.dsx-select__item[data-overflow='true'] .dsx-select__item-text {
+  white-space: normal;
+}
+
+/* Scoped to the trigger (batch 4, P1): extractProps merges the size modifier
+   class onto every slot including Content, and the unscoped rule below used to
+   override the content's own horizontal gutter (same specificity, later in
+   file) — the panel rendered a 24px lg gutter instead of its authored 4px. */
+.dsx-select__trigger.dsx-select-size-sm {
+  min-height: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
+  padding-block: var(--dsx-density-control-padding-block-sm, var(--dsx-space-xs));
+  padding-inline: var(--dsx-density-control-padding-inline-sm, var(--dsx-space-sm));
+}
+
+.dsx-select__trigger.dsx-select-size-lg {
+  min-height: var(--dsx-density-control-height-lg, var(--dsx-size-2xl));
+  padding-block: var(--dsx-density-control-padding-block-lg, var(--dsx-space-md));
+  padding-inline: var(--dsx-density-control-padding-inline-lg, var(--dsx-space-lg));
 }
 
-.dsx-select-variant-ghost {
+/* Scoped to the trigger only (2026-08-26, real bug found live): variant propagates through
+   SelectContext to every slot, so `.dsx-select-variant-ghost` alone matched the dropdown
+   Content too — its own solid `--dsx-color-panel-translucent` background (declared on
+   `.dsx-select__content` above) lost to this rule on source order at equal specificity,
+   leaving an actually-transparent, unreadable dropdown panel. Ghost is a trigger-chrome
+   concept (blend-in-until-interacted-with); the panel that opens from it should never be
+   transparent regardless of the trigger's own variant. */
+.dsx-select__trigger.dsx-select-variant-ghost {
   background: transparent;
 }
 
@@ -188,6 +261,16 @@
   white-space: nowrap;
 }
 
+.dsx-select__item-media {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dsx-size-lg);
+  height: var(--dsx-size-lg);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
 .dsx-select__hidden {
   position: absolute;
   width: 1px;
@@ -199,3 +282,46 @@
   white-space: nowrap;
   border: 0;
 }
+
+/* Vision variant (direction 3, Q7): reference copy — 12px panel, 8px gutters,
+   40px rows, neutral wash, plain checks, sentence-case labels. */
+.dsx-select__content[data-variant='vision'] {
+  /* No width redeclared: inherits the base mirror-at-minimum + grow-to-fit
+     rule so vision panels track their trigger exactly like default. */
+  padding: var(--dsx-space-sm);
+  border-radius: var(--dsx-rounded-lg);
+  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
+  background: var(--dsx-color-panel-solid);
+  backdrop-filter: none;
+}
+
+.dsx-select__content[data-variant='vision'] .dsx-select__item {
+  gap: var(--dsx-space-sm);
+  min-height: var(--dsx-size-xl);
+  padding: var(--dsx-space-xs) calc(var(--dsx-size-md) + var(--dsx-space-sm) * 2) var(--dsx-space-xs) var(--dsx-space-sm);
+  border-radius: var(--dsx-rounded-sm);
+}
+
+.dsx-select__content[data-variant='vision'] .dsx-select__item[data-highlighted] {
+  background: var(--dsx-effect-hover-emphasis-strong);
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-select__content[data-variant='vision'] .dsx-select__item[data-state='checked'] {
+  background: var(--dsx-effect-hover-emphasis-strong);
+  color: var(--dsx-color-on-surface);
+  box-shadow: none;
+}
+
+.dsx-select__content[data-variant='vision'] .dsx-select__item-indicator {
+  right: var(--dsx-space-sm);
+  width: var(--dsx-size-md);
+  color: currentColor;
+  background: transparent;
+}
+
+.dsx-select__content[data-variant='vision'] .dsx-select__group-label {
+  padding: var(--dsx-space-sm) var(--dsx-space-sm) var(--dsx-space-xs);
+  text-transform: none;
+  letter-spacing: 0;
+}

package/dist/components/separator.css

@@ -8,11 +8,11 @@
 
 .dsx-separator[data-orientation='horizontal'] {
   width: 100%;
-  height: var(--dsx-border-width-md, var(--dsx-border-width-sm));
+  height: var(--dsx-boundary-divider-width, var(--dsx-border-width-sm));
 }
 
 .dsx-separator[data-orientation='vertical'] {
-  width: var(--dsx-border-width-md, var(--dsx-border-width-sm));
+  width: var(--dsx-boundary-divider-width, var(--dsx-border-width-sm));
   min-height: var(--dsx-size-lg);
   height: auto;
   margin-block: 0;
@@ -28,3 +28,9 @@
 .dsx-separator--decorative {
   background: var(--dsx-color-separator-muted);
 }
+
+/* Reserved accent hook: any accent-color value paints the separator in the accent
+   indicator tone, for deliberate accent-divided surfaces. */
+.dsx-separator[data-accent-color] {
+  background: var(--dsx-color-accent-indicator);
+}