@ds-mo/ui 2.11.2 → 2.12.0

package/src/wc/components/Chip/Chip.tsx

@@ -1,19 +1,35 @@
 import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
 
-export type ChipIntent     = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
-export type ChipContrast   = 'strong' | 'bold' | 'medium' | 'faint';
-export type ChipElevation  = 'none' | 'flat' | 'elevated';
-export type ChipSize       = 'md' | 'sm' | 'xs';
+/**
+ * Semantic chip state — replaces Tag’s intent × contrast matrix.
+ * - `default` — neutral faint
+ * - `active` — brand faint
+ * - `error` — negative faint
+ * - `caution` — caution faint
+ */
+export type ChipState = 'default' | 'active' | 'error' | 'caution';
+export type ChipSize = 'md' | 'sm' | 'xs';
 export type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
 
+/** Text variant per control-density recipe (md / sm / xs). */
 const TEXT_VARIANT: Record<ChipSize, string> = {
   md: 'text-body-medium',
   sm: 'text-body-small',
   xs: 'text-caption',
 };
 
-const ICON_SIZE: Record<ChipSize, number> = { md: 20, sm: 16, xs: 12 };
+/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */
+const ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {
+  md: 'md',
+  sm: 'sm',
+  xs: 'xs',
+};
 
+/**
+ * Removable chip — same density recipe as Tag, but colored by semantic `state`
+ * (not intent × contrast). Not a toggle/select control; the only intentional
+ * action is remove.
+ */
 @Component({
   tag: 'ds-chip',
   styleUrl: 'Chip.css',
@@ -21,46 +37,27 @@ const ICON_SIZE: Record<ChipSize, number> = { md: 20, sm: 16, xs: 12 };
 })
 export class Chip {
   @Prop() label!: string;
-  @Prop() intent: ChipIntent = 'neutral';
-  @Prop() contrast: ChipContrast = 'faint';
-  @Prop() elevation: ChipElevation = 'none';
+  /** Semantic color state. @default 'default' */
+  @Prop() state: ChipState = 'default';
   @Prop() size: ChipSize = 'md';
   @Prop() rounded: boolean = false;
-  @Prop() removable: boolean = false;
+  /** When true (default), shows the trailing dismiss control. */
+  @Prop() removable: boolean = true;
   @Prop() maxWidth: string | number | undefined;
-  @Prop() inactive: boolean = false;
+  @Prop() isInactive: boolean = false;
+  /** Surface context for interaction-fill tokens when the chip sits on a non-default surface. */
   @Prop() background: ChipBackground | undefined;
-  @Prop({ mutable: true }) pressed: boolean = false;
 
   /** Fired when the remove button is clicked. */
   @Event() dsRemove!: EventEmitter<void>;
-  /** Fired when an interactive chip is clicked. */
-  @Event() dsClick!: EventEmitter<void>;
-  /** Fired when the pressed state toggles. */
-  @Event() dsPressedChange!: EventEmitter<boolean>;
-
-  private handleClick = () => {
-    if (this.inactive) return;
-    this.pressed = !this.pressed;
-    this.dsPressedChange.emit(this.pressed);
-    this.dsClick.emit();
-  };
-
-  private handleKeyDown = (e: KeyboardEvent) => {
-    if (this.inactive) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      this.handleClick();
-    }
-  };
 
   private handleRemove = (e: MouseEvent) => {
     e.stopPropagation();
+    if (this.isInactive) return;
     this.dsRemove.emit();
   };
 
   render() {
-    const sz = this.size.toUpperCase() as 'MD' | 'SM' | 'XS';
     const textVariant = TEXT_VARIANT[this.size];
     const iconSize = ICON_SIZE[this.size];
 
@@ -68,56 +65,42 @@ export class Chip {
       ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }
       : undefined;
 
-    const hostCls: Record<string, boolean> = {
-      'tag': true,
-      [`tag--intent-${this.intent}`]: true,
-      [`tag--contrast-${this.contrast}`]: true,
-      [`tag--elevation-${this.elevation}`]: true,
-      [`tag--size-${this.size}`]: true,
-      'tag--rounded': this.rounded,
-      'tag--rounded-no-icon-left': this.rounded,
-      'tag--rounded-no-remove-right': this.rounded && !this.removable,
-      [`tag--icon-left-${sz}`]: false,
-      [`tag--icon-right-${sz}`]: this.removable,
-      'tag--removable': this.removable,
-      'tag--interactive': true,
-      'tag--inactive': this.inactive,
-      'tag--pressed': this.pressed,
-      'tag--on-medium':      this.background === 'medium',
-      'tag--on-bold':        this.background === 'bold',
-      'tag--on-strong':      this.background === 'strong',
-      'tag--on-always-dark': this.background === 'always-dark',
-    };
-
     return (
       <Host
-        class={hostCls}
+        class={{
+          'tag': true,
+          'chip': true,
+          [`chip--${this.state}`]: true,
+          [`tag--size-${this.size}`]: true,
+          'ds-control--md': this.size === 'md',
+          'ds-control--sm': this.size === 'sm',
+          'ds-control--xs': this.size === 'xs',
+          'tag--rounded': this.rounded,
+          'tag--removable': this.removable,
+          /* Hover overlay on the chip surface — dismiss is the only action. */
+          'ds-interaction-fill': !this.isInactive && this.removable,
+          'ds-interaction-fill--on-medium': this.background === 'medium',
+          'ds-interaction-fill--on-bold': this.background === 'bold',
+          'ds-interaction-fill--on-strong': this.background === 'strong',
+          'ds-interaction-fill--on-always-dark': this.background === 'always-dark',
+          'ds-control-inactive': this.isInactive,
+        }}
         style={maxWidthStyle}
-        onClick={this.handleClick}
-        onKeyDown={this.handleKeyDown}
-        role="button"
-        tabIndex={this.inactive ? -1 : 0}
-        aria-pressed={String(this.pressed)}
-        aria-disabled={this.inactive || undefined}
+        aria-disabled={this.isInactive || undefined}
       >
-        <span class="tag__icon-slot" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>
-          <slot name="icon" />
-        </span>
         <span class={{ 'tag__label': true, [textVariant]: true }}>
           {this.label}
         </span>
         {this.removable && (
           <button
             type="button"
-            class="tag__remove"
+            class="tag__remove ds-focus-ring-inset"
             onClick={this.handleRemove}
             aria-label={`Remove ${this.label}`}
-            tabIndex={-1}
+            disabled={this.isInactive || undefined}
           >
             <slot name="remove-icon">
-              <span class="tag__remove-x" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>
-                ✕
-              </span>
+              <ds-icon class="tag__remove-x" name="Cross" size={iconSize} color="inherit"></ds-icon>
             </slot>
           </button>
         )}

package/src/wc/components/Chip/index.ts

@@ -1 +1 @@
-export type { ChipIntent, ChipContrast, ChipElevation, ChipSize, ChipBackground } from './Chip';
+export type { ChipState, ChipSize, ChipBackground } from './Chip';

package/src/wc/components/Input/Input.tsx

@@ -18,7 +18,7 @@ export class Input {
   @Prop() value: string = '';
   @Prop() placeholder: string | undefined;
   @Prop() type: InputType = 'text';
-  @Prop() inactive: boolean = false;
+  @Prop() isInactive: boolean = false;
   @Prop() autoFocus: boolean = false;
   @Prop() error: boolean = false;
   @Prop() errorMessage: string | undefined;
@@ -48,7 +48,7 @@ export class Input {
 
   render() {
     const inputId = this.inputId ?? this.generatedId;
-    const showClear = this.type === 'search' && this.value.length > 0 && !this.inactive;
+    const showClear = this.type === 'search' && this.value.length > 0 && !this.isInactive;
     const showError = this.error && Boolean(this.errorMessage);
 
     const describedBy = [
@@ -57,7 +57,7 @@ export class Input {
     ].filter(Boolean).join(' ') || undefined;
 
     return (
-      <Host class="input-container">
+      <Host class={{ 'input-container': true, 'ds-control-inactive': this.isInactive }}>
         <div class={{ wrapper: true, 'wrapper--error': this.error }}>
           <div class="row">
             <input
@@ -65,7 +65,7 @@ export class Input {
               id={inputId}
               value={this.value}
               placeholder={this.placeholder}
-              disabled={this.inactive}
+              disabled={this.isInactive}
               autoFocus={this.autoFocus}
               class="native-input"
               aria-label={this.ariaLabel}

package/src/wc/components/Menu/Menu.tsx

@@ -357,7 +357,7 @@ export class Menu {
               aria-label={section.header}
             >
               {section.header && (
-                <div class="section-header" aria-hidden="true">
+                <div class="section-header ds-control--md" aria-hidden="true">
                   <span class="text-body-small-emphasis section-label">{section.header}</span>
                 </div>
               )}
@@ -379,10 +379,13 @@ export class Menu {
                     type="button"
                     class={{
                       'menu-item': true,
+                      'ds-control--md': true,
                       'ds-focus-ring-inset': true,
                       'ds-focus-ring--visible': isFocused && this.focusRingVisible,
+                      'ds-interaction-fill': !item.isInactive,
+                      'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,
                       'menu-item--selected': !!item.isSelected,
-                      'menu-item--inactive': !!item.isInactive,
+                      'ds-control-inactive': !!item.isInactive,
                       'menu-item--destructive': !!item.isDestructive,
                       'menu-item--focused': isFocused,
                     }}
@@ -394,7 +397,7 @@ export class Menu {
                     onClick={() => this.handleItemClick(item)}
                     onFocus={() => { this.focusedIndex = idx; }}
                   >
-                    <div class="menu-item__content">
+                    <div class="menu-item__content ds-interaction-fill__content">
                       <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>
                         {item.label}
                       </span>
@@ -403,7 +406,7 @@ export class Menu {
                       )}
                     </div>
                     {item.showToggle && (
-                      <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue }} aria-hidden="true">
+                      <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue, 'ds-interaction-fill__content': true }} aria-hidden="true">
                         <div class="menu-item__toggle-thumb" />
                       </div>
                     )}

package/src/wc/components/Pagination/Pagination.tsx

@@ -29,12 +29,12 @@ export class Pagination {
   @Prop({ mutable: true }) page: number = 1;
   @Prop() totalPages: number = 1;
   @Prop() siblingCount: number = 1;
-  @Prop() inactive: boolean = false;
+  @Prop() isInactive: boolean = false;
 
   @Event() dsPageChange!: EventEmitter<number>;
 
   private go(p: number) {
-    if (this.inactive) return;
+    if (this.isInactive) return;
     this.page = p;
     this.dsPageChange.emit(p);
   }
@@ -47,13 +47,13 @@ export class Pagination {
     return (
       <Host>
         <nav
-          class={{ pagination: true, 'pagination--inactive': this.inactive }}
+          class={{ pagination: true, 'ds-control-inactive': this.isInactive }}
           aria-label="Pagination"
         >
           <button
             type="button"
             class="button button--nav"
-            disabled={this.page <= 1 || this.inactive}
+            disabled={this.page <= 1 || this.isInactive}
             onClick={() => this.go(this.page - 1)}
             aria-label="Previous page"
           >
@@ -72,7 +72,7 @@ export class Pagination {
                 class={{ button: true, 'button--active': item === this.page }}
                 onClick={() => this.go(item)}
                 aria-current={item === this.page ? 'page' : undefined}
-                disabled={this.inactive}
+                disabled={this.isInactive}
               >
                 <span class={item === this.page ? 'text-body-small-emphasis' : 'text-body-small'}>
                   {item}
@@ -84,7 +84,7 @@ export class Pagination {
           <button
             type="button"
             class="button button--nav"
-            disabled={this.page >= this.totalPages || this.inactive}
+            disabled={this.page >= this.totalPages || this.isInactive}
             onClick={() => this.go(this.page + 1)}
             aria-label="Next page"
           >

package/src/wc/components/PanelNav/PanelNav.tsx

@@ -480,6 +480,70 @@ export class PanelNav {
     window.addEventListener('mouseup', onUp);
   }
 
+  private renderFooterAction(isDashboardChrome: boolean) {
+    const footerLabel = isDashboardChrome ? 'Open settings' : 'Go to dashboard';
+    return (
+      <ds-tooltip label={footerLabel} side="right" size="sm">
+        <ds-button-unfilled variant="icon"
+          class="panel-nav__footer-btn"
+          icon={isDashboardChrome ? 'Gear' : 'Dashboard'}
+          activeFill={false}
+          hasBorder={false}
+          focusTabIndex={this.rovingIndex === this.getFooterRovingIndex() ? 0 : -1}
+          aria-label={footerLabel}
+          onDsClick={() => this.handleFooterAction()}
+          onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getFooterRovingIndex())}
+          onFocusin={() => { this.rovingIndex = this.getFooterRovingIndex(); }}
+        />
+      </ds-tooltip>
+    );
+  }
+
+  private renderFooterUser(collapsed: boolean, userName: string, userInitial: string) {
+    const userLabel = collapsed ? `User: ${userName}` : `User menu for ${userName}`;
+    const userButton = (
+      <button
+        type="button"
+        id={PANEL_NAV_USER_MENU_ANCHOR_ID}
+        class="panel-nav__item panel-nav__footer-user ds-focus-ring-inset ds-interaction-fill"
+        tabIndex={this.rovingIndex === this.getUserRovingIndex() ? 0 : -1}
+        aria-label={userLabel}
+        onClick={(e) => this.handleUserAction(e)}
+        onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}
+        onFocus={() => { this.rovingIndex = this.getUserRovingIndex(); }}
+      >
+        <span class="panel-nav__item-label panel-nav__footer-user-label">
+          <span class="panel-nav__item-label-text">
+            <ds-text as="span" variant="text-body-medium-emphasis" color="inherit">
+              {userName}
+            </ds-text>
+          </span>
+        </span>
+        <span class="panel-nav__item-icon panel-nav__footer-user-icon" aria-hidden="true">
+          <span class="panel-nav__footer-icon-expanded">
+            <ds-icon name="ChevronUpDown" size="md" color="inherit" />
+          </span>
+          <span class="panel-nav__footer-icon-collapsed">
+            <ds-icon name="Circle" size="md" color="inherit" />
+            <span class="panel-nav__user-initial">
+              <ds-text as="span" variant="text-caption-emphasis" color="inherit">
+                {userInitial}
+              </ds-text>
+            </span>
+          </span>
+        </span>
+      </button>
+    );
+
+    if (!collapsed) return userButton;
+
+    return (
+      <ds-tooltip label={userLabel} side="right" size="sm">
+        {userButton}
+      </ds-tooltip>
+    );
+  }
+
   private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {
     const isActive = item.id === this.effectiveActiveId;
     const rovingPosition = idx + 1;
@@ -515,9 +579,9 @@ export class PanelNav {
         'panel-nav__item': true,
         'panel-nav__item--active': isActive,
         'ds-focus-ring-inset': true,
+        'ds-interaction-fill': true,
       },
       'aria-current': isActive ? ('page' as const) : undefined,
-      title: collapsed ? item.label : undefined,
       tabIndex: rovingPosition === this.rovingIndex ? 0 : -1,
       onClick: () => this.handleItemClick(item.id),
       onKeyDown: (e: KeyboardEvent) => this.handleRovingKeyDown(e, rovingPosition),
@@ -525,10 +589,17 @@ export class PanelNav {
     };
 
     const useAnchor = this.routerMode === 'anchor' && item.href;
-
-    return useAnchor
+    const control = useAnchor
       ? <a {...sharedProps} href={item.href}>{itemContent}</a>
       : <button {...sharedProps} type="button">{itemContent}</button>;
+
+    if (!collapsed) return control;
+
+    return (
+      <ds-tooltip label={item.label} side="right" size="sm">
+        {control}
+      </ds-tooltip>
+    );
   }
 
   render() {
@@ -557,7 +628,7 @@ export class PanelNav {
           <div class="panel-nav__header">
             <button
               type="button"
-              class="panel-nav__header-btn ds-focus-ring-inset"
+              class="panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill"
               tabIndex={this.rovingIndex === 0 ? 0 : -1}
               onClick={() => this.handleToggle()}
               onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, 0)}
@@ -610,50 +681,8 @@ export class PanelNav {
 
           {/* ── Footer ── */}
           <div class="panel-nav__footer">
-            <ds-button-unfilled-icon
-              class="panel-nav__footer-btn"
-              icon={isDashboardChrome ? 'Gear' : 'Dashboard'}
-              activeFill={false}
-              focusTabIndex={this.rovingIndex === this.getFooterRovingIndex() ? 0 : -1}
-              title={isDashboardChrome ? 'Settings' : 'Dashboard'}
-              aria-label={isDashboardChrome ? 'Open settings' : 'Go to dashboard'}
-              onDsClick={() => this.handleFooterAction()}
-              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getFooterRovingIndex())}
-              onFocusin={() => { this.rovingIndex = this.getFooterRovingIndex(); }}
-            />
-
-            {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}
-            <button
-              type="button"
-              id={PANEL_NAV_USER_MENU_ANCHOR_ID}
-              class="panel-nav__item panel-nav__footer-user ds-focus-ring-inset"
-              tabIndex={this.rovingIndex === this.getUserRovingIndex() ? 0 : -1}
-              aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}
-              onClick={(e) => this.handleUserAction(e)}
-              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}
-              onFocus={() => { this.rovingIndex = this.getUserRovingIndex(); }}
-            >
-              <span class="panel-nav__item-label panel-nav__footer-user-label">
-                <span class="panel-nav__item-label-text">
-                  <ds-text as="span" variant="text-body-medium-emphasis" color="inherit">
-                    {userName}
-                  </ds-text>
-                </span>
-              </span>
-              <span class="panel-nav__item-icon panel-nav__footer-user-icon" aria-hidden="true">
-                <span class="panel-nav__footer-icon-expanded">
-                  <ds-icon name="ChevronUpDown" size="md" color="inherit" />
-                </span>
-                <span class="panel-nav__footer-icon-collapsed">
-                  <ds-icon name="Circle" size="md" color="inherit" />
-                  <span class="panel-nav__user-initial">
-                    <ds-text as="span" variant="text-caption-emphasis" color="inherit">
-                      {userInitial}
-                    </ds-text>
-                  </span>
-                </span>
-              </span>
-            </button>
+            {this.renderFooterAction(isDashboardChrome)}
+            {this.renderFooterUser(collapsed, userName, userInitial)}
           </div>
 
         </nav>

package/src/wc/components/PanelTools/PanelTools.tsx

@@ -152,7 +152,7 @@ export class PanelTools {
   @Method()
   async activateTool(id: PanelToolsToolId) {
     const item = this.railItems.find(entry => entry.id === id);
-    if (!item || item.inactive) return;
+    if (!item || item.isInactive) return;
     this.handleToolChange(id);
   }
 
@@ -204,22 +204,25 @@ export class PanelTools {
   };
 
   private renderRailAction(item: PanelToolsItem, index: number) {
+    const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];
     return (
-      <ds-button-unfilled-icon
-        key={item.id}
-        class="panel-tools__rail-action"
-        icon={item.icon}
-        isActive={this.isRailSelected(item.id)}
-        activeFill={false}
-        dot={item.dot ?? false}
-        inactive={item.inactive}
-        focusTabIndex={index === this.rovingIndex ? 0 : -1}
-        aria-label={item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id]}
-        pressed={this.isRailSelected(item.id)}
-        onFocusin={() => { this.rovingIndex = index; }}
-        onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}
-        onDsClick={() => this.handleToolChange(item.id)}
-      />
+      <ds-tooltip key={item.id} label={label} side="left" size="sm">
+        <ds-button-unfilled variant="icon"
+          class="panel-tools__rail-action"
+          icon={item.icon}
+          isActive={this.isRailSelected(item.id)}
+          activeFill={false}
+          hasBorder={false}
+          dot={item.dot ?? false}
+          isInactive={item.isInactive}
+          focusTabIndex={index === this.rovingIndex ? 0 : -1}
+          aria-label={label}
+          pressed={this.isRailSelected(item.id)}
+          onFocusin={() => { this.rovingIndex = index; }}
+          onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}
+          onDsClick={() => this.handleToolChange(item.id)}
+        />
+      </ds-tooltip>
     );
   }
 

package/src/wc/components/PanelTools/panel-tools-types.ts

@@ -28,6 +28,6 @@ export interface PanelToolsItem {
   selected?: boolean;
   /** Show a notification dot. */
   dot?: boolean;
-  inactive?: boolean;
+  isInactive?: boolean;
   ariaLabel?: string;
 }

package/src/wc/components/PanelTools/panel-tools-utils.ts

@@ -24,7 +24,7 @@ export function shouldResyncPanelToolsItems(
       prior.icon !== item.icon ||
       prior.selected !== item.selected ||
       prior.dot !== item.dot ||
-      prior.inactive !== item.inactive ||
+      prior.isInactive !== item.isInactive ||
       prior.ariaLabel !== item.ariaLabel
     );
   });

package/src/wc/components/RadioGroup/RadioGroup.tsx

@@ -3,7 +3,7 @@ import { Component, Prop, Event, EventEmitter, Element, Listen, h, Host } from '
 export interface RadioOption {
   label: string;
   value: string;
-  inactive?: boolean;
+  isInactive?: boolean;
 }
 
 @Component({
@@ -17,7 +17,7 @@ export class RadioGroup {
   @Prop() options: RadioOption[] = [];
   @Prop({ mutable: true }) value: string = '';
   @Prop() direction: 'vertical' | 'horizontal' = 'vertical';
-  @Prop() inactive: boolean = false;
+  @Prop() isInactive: boolean = false;
   @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
   @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;
 
@@ -70,7 +70,7 @@ export class RadioGroup {
   }
 
   private selectItem(optValue: string) {
-    if (this.inactive) return;
+    if (this.isInactive) return;
     if (optValue !== this.value) {
       this.value = optValue;
       this.dsChange.emit(optValue);
@@ -79,8 +79,8 @@ export class RadioGroup {
 
   render() {
     const selectedIdx = this.options.findIndex(o => o.value === this.value);
-    const firstActiveIdx = this.options.findIndex(o => !this.inactive && !o.inactive);
-    const focusableIdx = selectedIdx >= 0 && !this.inactive && !this.options[selectedIdx]?.inactive
+    const firstActiveIdx = this.options.findIndex(o => !this.isInactive && !o.isInactive);
+    const focusableIdx = selectedIdx >= 0 && !this.isInactive && !this.options[selectedIdx]?.isInactive
       ? selectedIdx
       : firstActiveIdx;
 
@@ -92,7 +92,7 @@ export class RadioGroup {
         class={{ group: true, 'group--horizontal': this.direction === 'horizontal' }}
       >
         {this.options.map((opt, i) => {
-          const isItemInactive = this.inactive || !!opt.inactive;
+          const isItemInactive = this.isInactive || !!opt.isInactive;
           const isChecked = opt.value === this.value;
           const tabIdx = isItemInactive ? -1 : (i === focusableIdx ? 0 : -1);
 
@@ -106,7 +106,7 @@ export class RadioGroup {
               data-radio-item
               data-value={opt.value}
               data-inactive={isItemInactive || undefined}
-              class={{ 'radio-item': true, 'radio-item--inactive': isItemInactive }}
+              class={{ 'radio-item': true, 'ds-control-inactive': isItemInactive }}
               onClick={() => !isItemInactive && this.selectItem(opt.value)}
               onKeyDown={(e: KeyboardEvent) => {
                 if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {

package/src/wc/components/Select/Select.tsx

@@ -26,8 +26,8 @@ export class Select {
   /** Placeholder shown when no value is selected. */
   @Prop() placeholder: string = 'Select option';
 
-  /** Disables interaction. */
-  @Prop() inactive: boolean = false;
+  /** Disables interaction (25% opacity via ds-control-inactive). */
+  @Prop() isInactive: boolean = false;
 
   @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
   @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;
@@ -87,7 +87,7 @@ export class Select {
   }
 
   private open() {
-    if (this.inactive || !this.options.length) return;
+    if (this.isInactive || !this.options.length) return;
     // Sync menu width to trigger width
     if (this.menuEl && this.triggerEl) {
       this.menuEl.menuWidth = `${this.triggerEl.offsetWidth}px`;
@@ -147,14 +147,14 @@ export class Select {
     const showPlaceholder = !this.hasSelection;
 
     return (
-      <Host class={{ 'select-host': true, inactive: this.inactive }}>
+      <Host class={{ 'select-host': true, 'ds-control-inactive': this.isInactive }}>
         <button
           ref={el => {
             this.triggerEl = (el as HTMLButtonElement) ?? null;
           }}
           type="button"
           class={{ trigger: true, 'trigger--open': this.isOpen }}
-          disabled={this.inactive}
+          disabled={this.isInactive}
           role="combobox"
           aria-haspopup="listbox"
           aria-expanded={this.isOpen}

package/src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx

@@ -19,14 +19,14 @@ export class ShellGradientSwatch {
   /** Selected — brand stroke + halo over inner fill/border/interaction stack. */
   @Prop({ reflect: true }) selected = false;
 
-  @Prop() inactive = false;
+  @Prop() isInactive = false;
 
   @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
 
   @Event() dsSelect!: EventEmitter<ShellGradientPreset>;
 
   private handleClick = () => {
-    if (this.inactive) return;
+    if (this.isInactive) return;
     this.dsSelect.emit(this.preset);
   };
 
@@ -40,6 +40,7 @@ export class ShellGradientSwatch {
           class={{
             'shell-gradient-swatch': true,
             'ds-focus-ring-inset': true,
+            'ds-control-inactive': this.isInactive,
             'shell-gradient-swatch--selected': this.selected,
             'shell-gradient-swatch--none': this.preset === 'none',
           }}
@@ -53,7 +54,7 @@ export class ShellGradientSwatch {
           }
           aria-label={label}
           aria-pressed={this.selected ? 'true' : 'false'}
-          disabled={this.inactive}
+          disabled={this.isInactive}
           onClick={this.handleClick}
         >
           <span class="shell-gradient-swatch__fill" aria-hidden="true" />