@ds-mo/ui 2.11.1 → 2.12.0

package/src/wc/components/ButtonFilled/ButtonFilled.tsx

@@ -13,6 +13,27 @@ export type ButtonFilledIntent =
 
 export type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';
 
+export type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';
+
+export type ButtonFilledSize = 'md' | 'sm' | 'xs';
+
+/** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */
+const TEXT_VARIANT: Record<ButtonFilledSize, string> = {
+  md: 'text-body-medium-emphasis',
+  sm: 'text-body-small-emphasis',
+  xs: 'text-caption-emphasis',
+};
+
+/**
+ * `ds-icon` size prop matching control-density icon metrics
+ * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).
+ */
+const ICON_SIZE: Record<ButtonFilledSize, 'md' | 'sm' | 'xs'> = {
+  md: 'md',
+  sm: 'sm',
+  xs: 'xs',
+};
+
 @Component({
   tag: 'ds-button-filled',
   styleUrl: 'ButtonFilled.css',
@@ -21,7 +42,19 @@ export type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';
 export class ButtonFilled {
   @Element() el!: HTMLElement;
 
-  /** Icon name passed to <ds-icon>. */
+  /**
+   * Content layout. Default is label-only; pass `icon` for icon-only chrome
+   * (nav / tool rails) or `icon-label` for leading icon + text.
+   */
+  @Prop() variant: ButtonFilledVariant = 'label';
+
+  /** Control density (height, padding, icon, type). */
+  @Prop() size: ButtonFilledSize = 'md';
+
+  /** Visible text for `label` / `icon-label` variants. */
+  @Prop() label: string = '';
+
+  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */
   @Prop() icon: string = '';
 
   /** Semantic colour intent. */
@@ -34,12 +67,12 @@ export class ButtonFilled {
   @Prop() contrast: ButtonFilledContrast = 'bold';
 
   /** Disables interaction. */
-  @Prop() inactive: boolean = false;
+  @Prop() isInactive: boolean = false;
 
   /** Native button type. */
   @Prop() type: 'button' | 'submit' | 'reset' = 'button';
 
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
 
   @Event() dsClick!: EventEmitter<MouseEvent>;
 
@@ -51,34 +84,80 @@ export class ButtonFilled {
   }
 
   private handleClick = (event: MouseEvent) => {
-    if (this.inactive) return;
+    if (this.isInactive) return;
     this.dsClick.emit(event);
   };
 
+  private get showIcon(): boolean {
+    return this.variant === 'icon' || this.variant === 'icon-label';
+  }
+
+  private get showLabel(): boolean {
+    return this.variant === 'label' || this.variant === 'icon-label';
+  }
+
+  private get accessibleName(): string | undefined {
+    if (this.ariaLabel) return this.ariaLabel;
+    if (this.showLabel && this.label) return undefined;
+    if (this.variant === 'icon') return this.icon || 'action';
+    return this.label || 'action';
+  }
+
   render() {
+    const textVariant = TEXT_VARIANT[this.size];
+    const iconSize = ICON_SIZE[this.size];
+
     const cls: Record<string, boolean> = {
       'button-filled': true,
       'ds-focus-ring-inset': true,
-      'button-filled--inactive': this.inactive,
+      'ds-interaction-fill': !this.isInactive,
+      /* Bold is the default filled contrast — on-bold interaction tokens. */
+      'ds-interaction-fill--on-bold': this.contrast === 'bold',
+      'ds-interaction-fill--on-strong': this.contrast === 'strong',
+      'ds-interaction-fill--on-medium': this.contrast === 'medium',
+      /* faint → default app interaction tokens (no --on-*). */
+      'ds-control-inactive': this.isInactive,
+      'ds-control--md': this.size === 'md',
+      'ds-control--sm': this.size === 'sm',
+      'ds-control--xs': this.size === 'xs',
+      'button-filled--icon': this.variant === 'icon',
+      'button-filled--label': this.variant === 'label',
+      'button-filled--icon-label': this.variant === 'icon-label',
       [`button-filled--intent-${this.intent}`]: true,
       [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',
     };
 
     return (
-      <Host tabIndex={-1}>
+      <Host
+        class={{
+          'button-filled-host': true,
+          'button-filled-host--icon': this.variant === 'icon',
+          'ds-control--md': this.size === 'md',
+          'ds-control--sm': this.size === 'sm',
+          'ds-control--xs': this.size === 'xs',
+        }}
+        tabIndex={-1}
+      >
         <button
           ref={el => {
             this.buttonEl = el ?? null;
           }}
           type={this.type}
           class={cls}
-          disabled={this.inactive}
-          aria-label={this.ariaLabel}
+          disabled={this.isInactive}
+          aria-label={this.accessibleName}
           onClick={this.handleClick}
         >
-          <span class="button-filled__icon-wrap">
-            <ds-icon name={this.icon} size="md" color="inherit" />
-          </span>
+          {this.showIcon && (
+            <span class="button-filled__icon-wrap ds-interaction-fill__content">
+              <ds-icon name={this.icon} size={iconSize} color="inherit" />
+            </span>
+          )}
+          {this.showLabel && (
+            <span class={{ 'button-filled__label': true, [textVariant]: true, 'ds-interaction-fill__content': true }}>
+              {this.label}
+            </span>
+          )}
         </button>
       </Host>
     );

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

@@ -1 +1,6 @@
-export type { ButtonFilledContrast, ButtonFilledIntent } from './ButtonFilled';
+export type {
+  ButtonFilledContrast,
+  ButtonFilledIntent,
+  ButtonFilledSize,
+  ButtonFilledVariant,
+} from './ButtonFilled';

package/src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx

@@ -0,0 +1,223 @@
+import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
+
+export type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';
+
+export type ButtonUnfilledBackground = 'always-dark' | 'navigation';
+
+export type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';
+
+export type ButtonUnfilledSize = 'md' | 'sm' | 'xs';
+
+/** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */
+const TEXT_VARIANT: Record<ButtonUnfilledSize, string> = {
+  md: 'text-body-medium-emphasis',
+  sm: 'text-body-small-emphasis',
+  xs: 'text-caption-emphasis',
+};
+
+/**
+ * `ds-icon` size prop matching control-density icon metrics
+ * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).
+ */
+const ICON_SIZE: Record<ButtonUnfilledSize, 'md' | 'sm' | 'xs'> = {
+  md: 'md',
+  sm: 'sm',
+  xs: 'xs',
+};
+
+@Component({
+  tag: 'ds-button-unfilled',
+  styleUrl: 'ButtonUnfilled.css',
+  scoped: true,
+})
+export class ButtonUnfilled {
+  @Element() el!: HTMLElement;
+
+  /**
+   * Content layout. Default is label-only; pass `icon` for icon-only chrome
+   * (nav / tool rails) or `icon-label` for leading icon + text.
+   */
+  @Prop() variant: ButtonUnfilledVariant = 'label';
+
+  /** Control density (height, padding, icon, type). */
+  @Prop() size: ButtonUnfilledSize = 'md';
+
+  /** Visible text for `label` / `icon-label` variants. */
+  @Prop() label: string = '';
+
+  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */
+  @Prop() icon: string = '';
+
+  /** Active/selected visual state. */
+  @Prop() isActive: boolean = false;
+
+  /**
+   * When active, render the selected interaction fill.
+   * Default `true` for general UI. Shell chrome (nav / tool rails) should pass
+   * `false` so selection is foreground-only.
+   */
+  @Prop() activeFill: boolean = true;
+
+  /** Show a 1px tertiary inset border. Default on; shell chrome can pass `false`. */
+  @Prop() hasBorder: boolean = true;
+
+  /** Show a notification dot at the top-right of the icon zone (icon variant only). */
+  @Prop() dot: boolean = false;
+
+  /** Disables interaction. */
+  @Prop() isInactive: boolean = false;
+
+  /** Native button type. */
+  @Prop() type: 'button' | 'submit' | 'reset' = 'button';
+
+  /**
+   * Foreground and interaction tokens when the button sits on a contrasting parent
+   * background (default, medium, bold, or strong).
+   */
+  @Prop({ attribute: 'on-background-contrast' })
+  backgroundContrast?: ButtonUnfilledOnBackgroundContrast;
+
+  /** Parent surface context for navigation and always-dark chrome. */
+  @Prop() background: ButtonUnfilledBackground | undefined;
+
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
+  @Prop() controls: string | undefined;
+  @Prop() expanded: boolean | undefined;
+  @Prop() haspopup: string | undefined;
+  @Prop() pressed: boolean | undefined;
+
+  /**
+   * Native `tabindex` for roving keyboard groups in shell chrome.
+   * Omit for the default button tab stop (`0`).
+   */
+  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;
+
+  @Event() dsClick!: EventEmitter<MouseEvent>;
+  @Event() dsChange!: EventEmitter<boolean>;
+
+  private buttonEl: HTMLButtonElement | null = null;
+
+  @Method()
+  async setFocus() {
+    this.buttonEl?.focus();
+  }
+
+  private handleClick = (event: MouseEvent) => {
+    if (this.isInactive) return;
+    this.dsClick.emit(event);
+    this.dsChange.emit(!this.isActive);
+  };
+
+  private effectiveContrast(): ButtonUnfilledOnBackgroundContrast {
+    return this.backgroundContrast ?? 'default';
+  }
+
+  private get showIcon(): boolean {
+    return this.variant === 'icon' || this.variant === 'icon-label';
+  }
+
+  private get showLabel(): boolean {
+    return this.variant === 'label' || this.variant === 'icon-label';
+  }
+
+  private get showDot(): boolean {
+    return this.variant === 'icon' && this.dot;
+  }
+
+  /** Knock-out ring: selected fill → active wash; otherwise surface token. */
+  private get dotRing(): string {
+    if (this.isActive && this.activeFill) {
+      return 'var(--ds-interaction-active)';
+    }
+    return 'var(--ds-button-unfilled-dot-ring)';
+  }
+
+  private get accessibleName(): string | undefined {
+    if (this.ariaLabel) return this.ariaLabel;
+    if (this.showLabel && this.label) return undefined;
+    if (this.variant === 'icon') return this.icon || 'action';
+    return this.label || 'action';
+  }
+
+  render() {
+    const bg = this.background;
+    const contrast = this.effectiveContrast();
+    const textVariant = TEXT_VARIANT[this.size];
+    const iconSize = ICON_SIZE[this.size];
+
+    const cls: Record<string, boolean> = {
+      'button-unfilled': true,
+      'ds-focus-ring-inset': true,
+      'ds-interaction-fill': true,
+      'ds-interaction-fill--selected': this.isActive && this.activeFill && !this.isInactive,
+      'ds-interaction-fill--on-medium': contrast === 'medium',
+      'ds-interaction-fill--on-bold': contrast === 'bold',
+      'ds-interaction-fill--on-strong': contrast === 'strong',
+      'ds-interaction-fill--on-always-dark': bg === 'always-dark',
+      'ds-interaction-fill--on-navigation': bg === 'navigation',
+      'button-unfilled--active': this.isActive,
+      'button-unfilled--bordered': this.hasBorder,
+      'ds-control-inactive': this.isInactive,
+      'ds-control--md': this.size === 'md',
+      'ds-control--sm': this.size === 'sm',
+      'ds-control--xs': this.size === 'xs',
+      'button-unfilled--icon': this.variant === 'icon',
+      'button-unfilled--label': this.variant === 'label',
+      'button-unfilled--icon-label': this.variant === 'icon-label',
+      'button-unfilled--contrast-medium': contrast === 'medium',
+      'button-unfilled--contrast-bold': contrast === 'bold',
+      'button-unfilled--contrast-strong': contrast === 'strong',
+      'button-unfilled--on-always-dark': bg === 'always-dark',
+      'button-unfilled--on-navigation': bg === 'navigation',
+    };
+
+    return (
+      <Host
+        class={{
+          'button-unfilled-host': true,
+          'button-unfilled-host--icon': this.variant === 'icon',
+          'ds-control--md': this.size === 'md',
+          'ds-control--sm': this.size === 'sm',
+          'ds-control--xs': this.size === 'xs',
+        }}
+        tabIndex={-1}
+      >
+        <button
+          ref={el => {
+            this.buttonEl = el ?? null;
+          }}
+          type={this.type}
+          class={cls}
+          disabled={this.isInactive}
+          tabIndex={this.focusTabIndex ?? 0}
+          aria-label={this.accessibleName}
+          aria-controls={this.controls}
+          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}
+          aria-haspopup={this.haspopup}
+          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}
+          onClick={this.handleClick}
+        >
+          {this.showIcon && (
+            <span class="button-unfilled__icon-wrap ds-interaction-fill__content">
+              <ds-icon name={this.icon} size={iconSize} color="inherit" />
+              {this.showDot && (
+                <ds-badge
+                  class="button-unfilled__dot"
+                  variant="dot"
+                  background={this.dotRing}
+                  label=""
+                  aria-hidden="true"
+                />
+              )}
+            </span>
+          )}
+          {this.showLabel && (
+            <span class={{ 'button-unfilled__label': true, [textVariant]: true, 'ds-interaction-fill__content': true }}>
+              {this.label}
+            </span>
+          )}
+        </button>
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1,6 @@
+export type {
+  ButtonUnfilledBackground,
+  ButtonUnfilledOnBackgroundContrast,
+  ButtonUnfilledSize,
+  ButtonUnfilledVariant,
+} from './ButtonUnfilled';

package/src/wc/components/CardDataViz/CardDataViz.tsx

@@ -1,9 +1,14 @@
 import { Component, Element, State, h, Host, Prop } from '@stencil/core';
 
-export type CardDataVizWidth = 'xs' | 'sm' | 'md' | 'lg';
+export type CardDataVizWidth = 'sm' | 'md' | 'lg';
+
+/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */
+type HoveredDatum = { label: string } | null;
+
+/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. */
+type SyncableSlot = HTMLElement & { activeLabel?: string | null };
 
 const CARD_WIDTH_VARS: Record<CardDataVizWidth, string> = {
-  xs: 'var(--dimension-card-width-xs)',
   sm: 'var(--dimension-card-width-sm)',
   md: 'var(--dimension-card-width-md)',
   lg: 'var(--dimension-card-width-lg)',
@@ -39,6 +44,35 @@ export class CardDataViz {
     this.hasLegendSlot = !!this.el.querySelector(':scope > [slot="legend"]');
   }
 
+  componentDidLoad() {
+    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any
+    // ds-chart-* + ds-chart-legend pair cross-highlights without every consumer having to
+    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted
+    // elements) since Stencil events bubble and the slot content can be swapped at runtime.
+    this.el.addEventListener('dsSliceHover', this.handleChartHover);
+    this.el.addEventListener('dsItemHover', this.handleLegendHover);
+  }
+
+  disconnectedCallback() {
+    this.el.removeEventListener('dsSliceHover', this.handleChartHover);
+    this.el.removeEventListener('dsItemHover', this.handleLegendHover);
+  }
+
+  private handleChartHover = (e: Event) => {
+    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates
+    // slotted children into an inner `.chart-region`/`.legend-region` wrapper on render, so
+    // they're no longer direct children of the host by the time this fires.
+    const legend = this.el.querySelector('[slot="legend"]') as SyncableSlot | null;
+    if (!legend || !('activeLabel' in legend)) return;
+    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;
+  };
+
+  private handleLegendHover = (e: Event) => {
+    const chart = this.el.querySelector('[slot="chart"]') as SyncableSlot | null;
+    if (!chart || !('activeLabel' in chart)) return;
+    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;
+  };
+
   render() {
     return (
       <Host class="card-data-viz" style={{ '--_card-data-viz-width': CARD_WIDTH_VARS[this.cardWidth] }}>

package/src/wc/components/CardSetting/CardSetting.tsx

@@ -1,9 +1,8 @@
 import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
 
-export type CardSettingWidth = 'xs' | 'sm' | 'md' | 'lg';
+export type CardSettingWidth = 'sm' | 'md' | 'lg';
 
 const CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {
-  xs: 'var(--dimension-card-width-xs)',
   sm: 'var(--dimension-card-width-sm)',
   md: 'var(--dimension-card-width-md)',
   lg: 'var(--dimension-card-width-lg)',
@@ -60,7 +59,7 @@ export class CardSetting {
             </ds-text>
           </div>
           {!editing ? (
-            <ds-button-unfilled-icon
+            <ds-button-unfilled variant="icon"
               type="button"
               icon="Pencil"
               aria-label="Edit"
@@ -68,15 +67,14 @@ export class CardSetting {
             />
           ) : (
             <div class="card-setting__actions">
-              <ds-button-unfilled-icon
+              <ds-button-unfilled variant="icon"
                 type="button"
                 icon="Cross"
                 backgroundContrast="bold"
-                has-border
                 aria-label="Cancel"
                 onDsClick={this.exitEdit}
               />
-              <ds-button-filled
+              <ds-button-filled variant="icon"
                 type="button"
                 icon="Check"
                 intent="brand"

package/src/wc/components/ChartDonut/ChartDonut.tsx

@@ -10,6 +10,12 @@ const CENTER_GAP_PX = 0;
 /** Fraction of the inner-circle diameter center text is allowed to use before truncating. */
 const CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;
 
+type DonutTooltipState = {
+  datum: ChartDatum;
+  x: number;
+  y: number;
+};
+
 @Component({
   tag: 'ds-chart-donut',
   styleUrl: 'ChartDonut.css',
@@ -33,10 +39,14 @@ export class ChartDonut {
    * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
    * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.
    * Falls back to this component's own pointer/focus hover when unset.
+   * External sync dims slices only — the data-viz tooltip is reserved for this
+   * component's own pointer/keyboard interaction.
    */
   @Prop() activeLabel: string | null = null;
 
   @State() private hoveredLabel: string | null = null;
+  /** Own-hover tooltip (cursor-following). Cleared on leave; not driven by `activeLabel`. */
+  @State() private tooltip: DonutTooltipState | null = null;
   /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */
   @State() private displayedValueText: string = '';
   @State() private displayedCaptionText: string = '';
@@ -46,10 +56,30 @@ export class ChartDonut {
 
   private valueTextEl?: SVGTextElement;
   private captionTextEl?: SVGTextElement;
+  private wrapperEl?: HTMLDivElement;
 
-  private handleHover(datum: ChartDatum | null) {
+  private handleHover(datum: ChartDatum | null, event?: MouseEvent) {
     this.hoveredLabel = datum?.label ?? null;
     this.dsSliceHover.emit(datum);
+    if (!datum) {
+      this.tooltip = null;
+      return;
+    }
+    this.updateTooltip(datum, event);
+  }
+
+  private handleSliceMove(datum: ChartDatum, event: MouseEvent) {
+    if (this.hoveredLabel !== datum.label) return;
+    this.updateTooltip(datum, event);
+  }
+
+  private updateTooltip(datum: ChartDatum, event?: MouseEvent) {
+    const wrapper = this.wrapperEl;
+    if (!wrapper) return;
+    const rect = wrapper.getBoundingClientRect();
+    const x = event ? event.clientX - rect.left : this.size / 2;
+    const y = event ? event.clientY - rect.top : this.size / 2;
+    this.tooltip = { datum, x, y };
   }
 
   componentDidRender() {
@@ -115,10 +145,17 @@ export class ChartDonut {
     // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).
     const fullValueText = this.centerValue ?? formatCompactNumber(total);
     const fullCaptionText = this.centerCaption ?? '';
+    const tip = this.tooltip;
 
     return (
       <Host class="chart-donut">
-        <div class="chart-donut__wrapper" style={{ width: `${this.size}px`, height: `${this.size}px` }}>
+        <div
+          class="chart-donut__wrapper"
+          style={{ width: `${this.size}px`, height: `${this.size}px` }}
+          ref={el => {
+            this.wrapperEl = (el as HTMLDivElement) ?? undefined;
+          }}
+        >
           <svg
             class="chart-donut__svg"
             viewBox={`0 0 ${this.size} ${this.size}`}
@@ -141,7 +178,8 @@ export class ChartDonut {
                       tabindex={0}
                       role="img"
                       aria-label={`${datum.label}: ${datum.value}`}
-                      onMouseEnter={() => this.handleHover(datum)}
+                      onMouseEnter={(e: MouseEvent) => this.handleHover(datum, e)}
+                      onMouseMove={(e: MouseEvent) => this.handleSliceMove(datum, e)}
                       onMouseLeave={() => this.handleHover(null)}
                       onFocus={() => this.handleHover(datum)}
                       onBlur={() => this.handleHover(null)}
@@ -177,6 +215,15 @@ export class ChartDonut {
               </text>
             )}
           </svg>
+          {tip && (
+            <ds-tooltip-data-viz
+              key={tip.datum.label}
+              label={tip.datum.label}
+              value={formatCompactNumber(tip.datum.value)}
+              x={tip.x}
+              y={tip.y}
+            />
+          )}
         </div>
       </Host>
     );

package/src/wc/components/ChartLegend/ChartLegend.tsx

@@ -73,6 +73,9 @@ export class ChartLegend {
                   class={{
                     'chart-legend__item': true,
                     'chart-legend__item--interactive': !!item.href,
+                    'ds-control--md': true,
+                    'ds-interaction-fill': true,
+                    'ds-focus-ring-inset': !!item.href,
                   }}
                   style={{ opacity: isDimmed ? String(DIMMED_OPACITY) : '1' }}
                   href={item.href}

package/src/wc/components/Checkbox/Checkbox.tsx

@@ -13,12 +13,12 @@ export class Checkbox {
   @Prop() label!: string;
   @Prop({ mutable: true }) checked: boolean = false;
   @Prop() indeterminate: boolean = false;
-  @Prop() inactive: boolean = false;
+  @Prop() isInactive: boolean = false;
 
   @Event() dsChange!: EventEmitter<boolean>;
 
   private handleActivate = () => {
-    if (this.inactive) return;
+    if (this.isInactive) return;
     this.checked = !this.checked;
     this.dsChange.emit(this.checked);
   };
@@ -37,10 +37,10 @@ export class Checkbox {
       <Host
         role="checkbox"
         aria-checked={this.indeterminate ? 'mixed' : String(this.checked)}
-        aria-disabled={this.inactive || undefined}
+        aria-disabled={this.isInactive || undefined}
         aria-labelledby={this.labelId}
-        tabIndex={this.inactive ? -1 : 0}
-        class={{ checkbox: true, inactive: this.inactive }}
+        tabIndex={this.isInactive ? -1 : 0}
+        class={{ checkbox: true, 'ds-control-inactive': this.isInactive }}
         onClick={this.handleActivate}
         onKeyDown={this.handleKeyDown}
       >