@ds-mo/ui 2.11.2 → 2.13.0

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

@@ -1,4 +1,6 @@
 import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';
+import { controlWidthClass, type ControlWidth } from '../../utils/control-width';
+import { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';
 import type { MenuItemData } from '../Menu/menu-types';
 
 export interface SelectOption {
@@ -6,6 +8,28 @@ export interface SelectOption {
   value: string;
 }
 
+export type SelectSize = 'md' | 'sm' | 'xs';
+
+export type SelectWidth = ControlWidth;
+
+/** Regular (non-emphasis) type per density — selects stay visually lighter than buttons. */
+const TEXT_VARIANT: Record<SelectSize, string> = {
+  md: 'text-body-medium',
+  sm: 'text-body-small',
+  xs: 'text-caption',
+};
+
+/** `ds-icon` size matching control-density icon metrics. */
+const ICON_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {
+  md: 'md',
+  sm: 'sm',
+  xs: 'xs',
+};
+
+/**
+ * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in
+ * control-density sizes, with `ds-menu` for the option list.
+ */
 @Component({
   tag: 'ds-select',
   styleUrl: 'Select.css',
@@ -24,10 +48,27 @@ export class Select {
   @Prop({ mutable: true }) value: string = '';
 
   /** Placeholder shown when no value is selected. */
-  @Prop() placeholder: string = 'Select option';
+  @Prop() placeholder: string = 'Select';
+
+  /** Control density (height, padding, icon, type). */
+  @Prop() size: SelectSize = 'md';
 
-  /** Disables interaction. */
-  @Prop() inactive: boolean = false;
+  /** Width fit — fill the parent (default) or hug content. */
+  @Prop() width: SelectWidth = 'fill';
+
+  /** Disables interaction (25% opacity via ds-control-inactive). */
+  @Prop() isInactive: boolean = false;
+
+  /**
+   * When a value is selected, render the selected interaction fill (same recipe
+   * as unfilled-button `activeFill`). Default `true`. Pass `false` for
+   * foreground-only selection (primary label, no fill).
+   * Selected/open promotes the label to primary; chevron stays secondary.
+   */
+  @Prop() activeFill: boolean = true;
+
+  /** Show a 1px secondary inset border. Default on (matches unfilled button). */
+  @Prop() hasBorder: boolean = true;
 
   @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
   @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;
@@ -39,32 +80,28 @@ export class Select {
 
   private triggerEl: HTMLButtonElement | null = null;
   private menuEl: HTMLDsMenuElement | null = null;
+  /** True when the open was keyboard-driven — menu shows initial focus ring. */
+  private openWithFocusVisible = false;
 
   componentDidLoad() {
-    // Wire up the menu anchor to the trigger button
     if (this.menuEl && this.triggerEl) {
       this.menuEl.anchor = this.triggerEl;
     }
-    // Listen for menu selection events
-    this.menuEl?.addEventListener('dsSelect', (e: Event) => {
-      const detail = (e as CustomEvent<MenuItemData>).detail;
-      if (detail?.value !== undefined) {
-        this.value = String(detail.value);
-        this.dsChange.emit(this.value);
-      }
-      this.isOpen = false;
-    });
-    // Listen for menu close event
-    this.menuEl?.addEventListener('dsClose', () => {
-      this.isOpen = false;
-    });
+    this.menuEl?.addEventListener('dsSelect', this.handleMenuSelect);
+    this.menuEl?.addEventListener('dsClose', this.handleMenuClose);
+    this.syncMenuItems();
+  }
+
+  disconnectedCallback() {
+    this.menuEl?.removeEventListener('dsSelect', this.handleMenuSelect);
+    this.menuEl?.removeEventListener('dsClose', this.handleMenuClose);
   }
 
   @Watch('isOpen')
   onIsOpenChange(open: boolean) {
-    if (this.menuEl) {
-      this.menuEl.open = open;
-    }
+    if (!this.menuEl) return;
+    this.menuEl.initialFocusVisible = open && this.openWithFocusVisible;
+    this.menuEl.open = open;
   }
 
   @Watch('options')
@@ -77,6 +114,19 @@ export class Select {
     this.syncMenuItems();
   }
 
+  private handleMenuSelect = (e: Event) => {
+    const detail = (e as CustomEvent<MenuItemData>).detail;
+    if (detail?.value !== undefined) {
+      this.value = String(detail.value);
+      this.dsChange.emit(this.value);
+    }
+    this.close();
+  };
+
+  private handleMenuClose = () => {
+    this.close();
+  };
+
   private syncMenuItems() {
     if (!this.menuEl) return;
     this.menuEl.items = this.options.map(opt => ({
@@ -86,32 +136,46 @@ export class Select {
     }));
   }
 
-  private open() {
-    if (this.inactive || !this.options.length) return;
-    // Sync menu width to trigger width
-    if (this.menuEl && this.triggerEl) {
-      this.menuEl.menuWidth = `${this.triggerEl.offsetWidth}px`;
-      this.menuEl.anchor = this.triggerEl;
-    }
+  /**
+   * Size/place the menu so option labels line up with the select label.
+   * Menu section padding insets items; we expand min-width by that chrome and
+   * shift left by the same amount (`alignOffset`). Menu can grow wider than
+   * the field (left-bottom / `align="start"`) when labels need more room.
+   */
+  private syncMenuLayout() {
+    if (!this.menuEl || !this.triggerEl) return;
+    const sectionPadPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);
+    const triggerW = this.triggerEl.offsetWidth;
+    // Prefer min-width over fixed width so long options can grow the menu.
+    this.menuEl.menuWidth = '';
+    this.menuEl.minWidth = `${triggerW + sectionPadPx * 2}px`;
+    this.menuEl.alignOffset = -sectionPadPx;
+    this.menuEl.anchor = this.triggerEl;
+  }
+
+  private open(opts: { focusVisible: boolean } = { focusVisible: false }) {
+    if (this.isInactive || !this.options.length) return;
+    this.openWithFocusVisible = opts.focusVisible;
+    this.syncMenuLayout();
     this.syncMenuItems();
     this.isOpen = true;
   }
 
   private close() {
     this.isOpen = false;
+    this.openWithFocusVisible = false;
   }
 
-  private toggle() {
+  private toggle(opts: { focusVisible: boolean }) {
     if (this.isOpen) {
       this.close();
     } else {
-      this.open();
+      this.open(opts);
     }
   }
 
   @Listen('keydown')
   handleKeyDown(e: KeyboardEvent) {
-    // Only handle keydown on the trigger button
     if (document.activeElement !== this.triggerEl) return;
 
     if (!this.isOpen) {
@@ -121,67 +185,84 @@ export class Select {
         case 'Enter':
         case ' ':
           e.preventDefault();
-          this.open();
+          this.open({ focusVisible: true });
           break;
       }
-    } else {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        this.close();
-        this.triggerEl?.focus();
-      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this.close();
+      this.triggerEl?.focus();
     }
   }
 
   private get selectedLabel(): string {
-    const found = this.options.find(o => o.value === this.value);
-    return found?.label ?? '';
+    return this.options.find(o => o.value === this.value)?.label ?? '';
   }
 
   private get hasSelection(): boolean {
-    return !!this.options.find(o => o.value === this.value);
+    return this.options.some(o => o.value === this.value);
   }
 
   render() {
-    const label = this.hasSelection ? this.selectedLabel : this.placeholder;
     const showPlaceholder = !this.hasSelection;
+    const hasValue = !showPlaceholder;
+    const label = showPlaceholder ? this.placeholder : this.selectedLabel;
+    const textVariant = TEXT_VARIANT[this.size];
+    const iconSize = ICON_SIZE[this.size];
+    const density = `ds-control--${this.size}`;
+    // Selected fill when a value is set (or while open), gated by `activeFill`.
+    const showSelectedFill =
+      !this.isInactive && this.activeFill && (hasValue || this.isOpen);
 
     return (
-      <Host class={{ 'select-host': true, inactive: this.inactive }}>
+      <Host
+        class={{
+          'select-host': true,
+          'ds-control-inactive': this.isInactive,
+          'ds-control--md': this.size === 'md',
+          'ds-control--sm': this.size === 'sm',
+          'ds-control--xs': this.size === 'xs',
+          ...controlWidthClass(this.width),
+        }}
+      >
         <button
           ref={el => {
             this.triggerEl = (el as HTMLButtonElement) ?? null;
           }}
           type="button"
-          class={{ trigger: true, 'trigger--open': this.isOpen }}
-          disabled={this.inactive}
+          class={{
+            trigger: true,
+            'ds-focus-ring-inset': true,
+            'ds-interaction-fill': true,
+            'ds-interaction-fill--selected': showSelectedFill,
+            'trigger--open': this.isOpen,
+            'trigger--bordered': this.hasBorder,
+            'trigger--placeholder': showPlaceholder,
+            'trigger--has-value': hasValue,
+            [density]: true,
+          }}
+          disabled={this.isInactive}
           role="combobox"
-          aria-haspopup="listbox"
-          aria-expanded={this.isOpen}
+          aria-haspopup="menu"
+          aria-expanded={String(this.isOpen)}
           aria-label={this.ariaLabel}
           aria-labelledby={this.ariaLabelledby}
-          onClick={() => this.toggle()}
+          onClick={() => this.toggle({ focusVisible: false })}
         >
-          <span class={{ 'trigger__label': true, 'trigger__label--placeholder': showPlaceholder }}>
+          <span
+            class={{
+              'trigger__label': true,
+              [textVariant]: true,
+              'ds-interaction-fill__content': true,
+            }}
+          >
             {label}
           </span>
-          <svg
-            class="trigger__chevron"
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            aria-hidden="true"
-          >
-            <path
-              d="M4 6L8 10L12 6"
-              stroke="currentColor"
-              stroke-width="1.25"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
+          <span class="trigger__chevron ds-interaction-fill__content" aria-hidden="true">
+            <ds-icon name="ChevronDown" size={iconSize} color="inherit" />
+          </span>
         </button>
+        {/* bottom + start: left-aligned under the field; wider menus grow right. */}
         <ds-menu
           ref={el => {
             this.menuEl = (el as HTMLDsMenuElement) ?? null;

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

@@ -0,0 +1 @@
+export type { SelectOption, SelectSize, SelectWidth } from './Select';

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" />

package/src/wc/components/Slider/Slider.tsx

@@ -15,7 +15,7 @@ export class Slider {
   @Prop() max: number = 100;
   @Prop() step: number = 1;
   @Prop() label!: string;
-  @Prop() inactive: boolean = false;
+  @Prop() isInactive: boolean = false;
   @Prop() valueText: string | undefined;
   /** Associates with an external <label>. Defaults to an auto-generated ID. */
   @Prop() inputId: string | undefined;
@@ -42,7 +42,11 @@ export class Slider {
           <span class="text-body-small-emphasis">{this.value}</span>
         </div>
         <div
-          class={{ track: true, 'track--inactive': this.inactive, 'track--at-min': pct === 0 }}
+          class={{
+            track: true,
+            'ds-control-inactive': this.isInactive,
+            'track--at-min': pct === 0,
+          }}
           style={{ '--slider-pct': String(pct) } as Record<string, string>}
         >
           <div class="track-inner">
@@ -56,7 +60,7 @@ export class Slider {
             max={this.max}
             step={this.step}
             value={this.value}
-            disabled={this.inactive}
+            disabled={this.isInactive}
             class="range-input"
             aria-valuetext={this.valueText}
             onInput={this.handleInput}

package/src/wc/components/TabGroup/TabGroup.tsx

@@ -64,7 +64,7 @@ export class TabGroup {
   }
 
   /**
-   * Find the next non-disabled tab index relative to `from`, stepping by `step`.
+   * Find the next non-inactive tab index relative to `from`, stepping by `step`.
    * Returns `from` unchanged if no other enabled tab exists.
    */
   private findEnabled(from: number, step: 1 | -1): number {
@@ -72,7 +72,7 @@ export class TabGroup {
     const len = tabs.length;
     for (let n = 0; n < len; n++) {
       const i = (from + step * (n + 1) + len * (n + 1)) % len;
-      if (!tabs[i]?.disabled) return i;
+      if (!tabs[i]?.isInactive) return i;
     }
     return from;
   }
@@ -102,10 +102,10 @@ export class TabGroup {
     }
 
     if (e.key === 'Home') {
-      const first = tabs.findIndex(t => !t.disabled);
+      const first = tabs.findIndex(t => !t.isInactive);
       nextIdx = first === -1 ? null : first;
     } else if (e.key === 'End') {
-      const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);
+      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);
       nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;
     }
 
@@ -162,14 +162,20 @@ export class TabGroup {
                   tab: true,
                   'tab--selected': isSelected,
                   'ds-focus-ring-inset': true,
+                  'ds-interaction-fill': !tab.isInactive,
+                  'ds-interaction-fill--on-medium': bgClass === 'on-medium',
+                  'ds-interaction-fill--on-bold': bgClass === 'on-bold',
+                  'ds-interaction-fill--on-strong': bgClass === 'on-strong',
+                  'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',
+                  'ds-control-inactive': !!tab.isInactive,
                   [bgClass]: !!bgClass,
                 }}
                 aria-selected={isSelected}
-                aria-disabled={tab.disabled || undefined}
+                aria-disabled={tab.isInactive || undefined}
                 aria-controls={tab.panelId ?? undefined}
-                disabled={tab.disabled}
+                disabled={tab.isInactive}
                 tabIndex={isSelected ? 0 : -1}
-                onClick={() => !tab.disabled && this.selectTab(tab.id)}
+                onClick={() => !tab.isInactive && this.selectTab(tab.id)}
               >
                 <span class={{
                   tab__label: true,

package/src/wc/components/TabGroup/tab-item-utils.ts

@@ -5,7 +5,8 @@ export interface TabItemDivider {
 export interface TabItemTab {
   id: string;
   label: string;
-  disabled?: boolean;
+  /** Disables the tab (same meaning as control `isInactive`). */
+  isInactive?: boolean;
   /** id of the tabpanel this tab controls */
   panelId?: string;
   /** Show a notification dot (brand) on the tab — no count, matching panel-nav. */

package/src/wc/components/TabGroupNav/TabGroupNav.tsx

@@ -91,23 +91,23 @@ export class TabGroupNav {
   @Method()
   async focusLastTab() {
     const tabs = this.selectableTabs;
-    const last = [...tabs].reverse().find(tab => !tab.disabled);
+    const last = [...tabs].reverse().find(tab => !tab.isInactive);
     if (last) await this.focusTab(last.id);
   }
 
   @Method()
   async focusFirstTab() {
-    const first = this.selectableTabs.find(tab => !tab.disabled);
+    const first = this.selectableTabs.find(tab => !tab.isInactive);
     if (first) await this.focusTab(first.id);
   }
 
   private syncFocusedTabId(preferred: string) {
     const tabs = this.selectableTabs;
-    if (tabs.some(tab => tab.id === preferred && !tab.disabled)) {
+    if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {
       this.focusedTabId = preferred;
       return;
     }
-    const first = tabs.find(tab => !tab.disabled);
+    const first = tabs.find(tab => !tab.isInactive);
     this.focusedTabId = first?.id ?? '';
   }
 
@@ -127,13 +127,13 @@ export class TabGroupNav {
   private findEnabledLinear(from: number, step: 1 | -1): number | null {
     const tabs = this.selectableTabs;
     for (let i = from + step; i >= 0 && i < tabs.length; i += step) {
-      if (!tabs[i]?.disabled) return i;
+      if (!tabs[i]?.isInactive) return i;
     }
     return null;
   }
 
   /**
-   * Find the next non-disabled tab index relative to `from`, stepping by `step`.
+   * Find the next non-inactive tab index relative to `from`, stepping by `step`.
    * Returns `from` unchanged if no other enabled tab exists.
    */
   private findEnabled(from: number, step: 1 | -1): number {
@@ -141,7 +141,7 @@ export class TabGroupNav {
     const len = tabs.length;
     for (let n = 0; n < len; n++) {
       const i = (from + step * (n + 1) + len * (n + 1)) % len;
-      if (!tabs[i]?.disabled) return i;
+      if (!tabs[i]?.isInactive) return i;
     }
     return from;
   }
@@ -156,7 +156,7 @@ export class TabGroupNav {
   private activateFocusedTab(e: KeyboardEvent) {
     if (e.key !== 'Enter' && e.key !== ' ') return;
     const tab = this.selectableTabs.find(item => item.id === this.focusedTabId);
-    if (!tab || tab.disabled) return;
+    if (!tab || tab.isInactive) return;
     e.preventDefault();
     this.selectTab(tab.id, { focus: true });
   }
@@ -221,10 +221,10 @@ export class TabGroupNav {
     }
 
     if (e.key === 'Home') {
-      const first = tabs.findIndex(t => !t.disabled);
+      const first = tabs.findIndex(t => !t.isInactive);
       nextIdx = first === -1 ? null : first;
     } else if (e.key === 'End') {
-      const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);
+      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);
       nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;
     }
 
@@ -305,14 +305,15 @@ export class TabGroupNav {
                   tab: true,
                   'tab--selected': isSelected,
                   'ds-focus-ring-inset': true,
+                  'ds-control-inactive': !!tab.isInactive,
                   [bgClass]: !!bgClass,
                 }}
                 aria-selected={isSelected}
-                aria-disabled={tab.disabled || undefined}
+                aria-disabled={tab.isInactive || undefined}
                 aria-controls={tab.panelId ?? undefined}
-                disabled={tab.disabled}
+                disabled={tab.isInactive}
                 tabIndex={this.tabIndexForTab(tab)}
-                onClick={() => !tab.disabled && this.selectTab(tab.id)}
+                onClick={() => !tab.isInactive && this.selectTab(tab.id)}
                 onFocus={() => {
                   if (!this.selectionFollowsFocus) {
                     this.focusedTabId = tab.id;

package/src/wc/components/Tag/Tag.tsx

@@ -1,17 +1,25 @@
 import { Component, Prop, h, Host } from '@stencil/core';
 
-export type TagIntent     = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
-export type TagContrast   = 'strong' | 'bold' | 'medium' | 'faint';
-export type TagElevation  = 'none' | 'flat' | 'elevated';
-export type TagSize       = 'md' | 'sm' | 'xs';
+export type TagIntent   = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
+export type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';
+export type TagSize     = 'md' | 'sm' | 'xs';
 
+/** Text variant per control-density recipe (md / sm / xs). */
 const TEXT_VARIANT: Record<TagSize, string> = {
   md: 'text-body-medium',
   sm: 'text-body-small',
   xs: 'text-caption',
 };
 
-const ICON_SIZE: Record<TagSize, number> = { md: 20, sm: 16, xs: 12 };
+/**
+ * `ds-icon` size prop matching control-density icon metrics
+ * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).
+ */
+const ICON_SIZE: Record<TagSize, 'md' | 'sm' | 'xs'> = {
+  md: 'md',
+  sm: 'sm',
+  xs: 'xs',
+};
 
 @Component({
   tag: 'ds-tag',
@@ -22,13 +30,11 @@ export class Tag {
   @Prop() label!: string;
   @Prop() intent: TagIntent = 'neutral';
   @Prop() contrast: TagContrast = 'faint';
-  @Prop() elevation: TagElevation = 'none';
   @Prop() size: TagSize = 'md';
   @Prop() rounded: boolean = false;
   @Prop() maxWidth: string | number | undefined;
 
   render() {
-    const sz = this.size.toUpperCase() as 'MD' | 'SM' | 'XS';
     const textVariant = TEXT_VARIANT[this.size];
     const iconSize = ICON_SIZE[this.size];
 
@@ -36,29 +42,24 @@ export class Tag {
       ? { 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, // consumer overrides via slot presence hack
-      'tag--rounded-no-remove-right': this.rounded,
-      [`tag--icon-left-${sz}`]: false, // toggled by slotchange
-      [`tag--icon-right-${sz}`]: false,
-    };
-
     return (
       <Host
-        class={hostCls}
+        class={{
+          'tag': true,
+          [`tag--intent-${this.intent}`]: true,
+          [`tag--contrast-${this.contrast}`]: 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,
+        }}
         style={maxWidthStyle}
       >
-        {/* Leading icon slot — consumer provides an icon element */}
-        <span class="tag__icon-slot" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>
+        {/* Leading icon — consumer provides ds-icon (or any SVG); prefer size matching tag size. */}
+        <span class="tag__icon-slot" data-icon-size={iconSize}>
           <slot name="icon" />
         </span>
-        {/* Label */}
         <span class={{ 'tag__label': true, [textVariant]: true }}>
           {this.label}
         </span>

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

@@ -1 +1 @@
-export type { TagIntent, TagContrast, TagElevation, TagSize } from './Tag';
+export type { TagIntent, TagContrast, TagSize } from './Tag';

package/src/wc/components/Toggle/Toggle.tsx

@@ -7,18 +7,18 @@ import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
 })
 export class Toggle {
   @Prop({ mutable: true }) checked: boolean = false;
-  @Prop() inactive: boolean = false;
+  @Prop() isInactive: boolean = false;
 
   @Event() dsChange!: EventEmitter<boolean>;
 
   private handleClick = () => {
-    if (this.inactive) return;
+    if (this.isInactive) return;
     this.checked = !this.checked;
     this.dsChange.emit(this.checked);
   };
 
   private handleKeyDown = (e: KeyboardEvent) => {
-    if (this.inactive) return;
+    if (this.isInactive) return;
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       this.handleClick();
@@ -30,9 +30,9 @@ export class Toggle {
       <Host
         role="switch"
         aria-checked={String(this.checked)}
-        aria-disabled={this.inactive || undefined}
-        tabIndex={this.inactive ? -1 : 0}
-        class={{ toggle: true, checked: this.checked, inactive: this.inactive }}
+        aria-disabled={this.isInactive || undefined}
+        tabIndex={this.isInactive ? -1 : 0}
+        class={{ toggle: true, checked: this.checked, 'ds-control-inactive': this.isInactive }}
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
       >