@reliability-design/web 1.3.1 → 1.4.1

package/dist/components/rel-snackbar/rel-snackbar.ts

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 import "@reliability-design/icons/rel-icon";
 
 export type SnackbarLines = "single" | "double";
@@ -29,8 +28,9 @@ export class RelSnackbar extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
     }
 
     .snackbar {
@@ -40,11 +40,11 @@ export class RelSnackbar extends LitElement {
       min-width: 280px;
       max-width: 500px;
       margin: 0;
-      padding: 12px 16px 12px 10px;
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      background-color: var(--rel-surface-toast);
-      color: #FFFFFF;
-      font-family: var(--rel-fontFamilies-primary);
+      padding: var(--rel-spacing-sm) var(--rel-spacing-md) var(--rel-spacing-sm) var(--rel-spacing-xs);
+      border-radius: var(--rel-border-radius-sm);
+      background-color: var(--rel-bg-static-dark);
+      color: var(--rel-text-static-light);
+      font-family: var(--rel-fonts-font-family);
       box-shadow: var(--rel-shadows-shadow-300);
       animation: slide-up 0.3s ease-out;
       border-left: 4px solid transparent;
@@ -60,29 +60,30 @@ export class RelSnackbar extends LitElement {
     }
 
     /* Type variants — border accent using semantic DS tokens */
+    /* Status fills stay vivid on the always-dark snackbar surface */
     .snackbar.type-success {
-      border-left-color: var(--rel-colors-green-tertiary);
+      border-left-color: var(--rel-bg-success);
     }
 
     .snackbar.type-error {
-      border-left-color: var(--rel-colors-red-primary);
+      border-left-color: var(--rel-bg-danger);
     }
 
     .snackbar.type-warning {
-      border-left-color: var(--rel-colors-orange-warning);
+      border-left-color: var(--rel-bg-warning);
     }
 
     /* Icon color matches type accent */
     .snackbar.type-success .snackbar-icon {
-      color: var(--rel-colors-green-primary);
+      color: var(--rel-bg-success);
     }
 
     .snackbar.type-error .snackbar-icon {
-      color: var(--rel-colors-red-secondary);
+      color: var(--rel-bg-danger);
     }
 
     .snackbar.type-warning .snackbar-icon {
-      color: var(--rel-colors-yellow-pending);
+      color: var(--rel-bg-warning);
     }
 
     .snackbar-icon {
@@ -99,11 +100,20 @@ export class RelSnackbar extends LitElement {
       min-width: 0;
     }
 
-    .snackbar-message {
-      font-size: var(--rel-fontSizes-sm);
-      line-height: var(--rel-lineHeights-lineheight-200);
-      margin-right: 12px;
-      flex: 1;
+    .snackbar-message {
+      margin-right: var(--rel-spacing-sm);
+      flex: 1;
+
+      font-family: var(--rel-body-md-regular-font-family);
+
+      font-weight: var(--rel-body-md-regular-font-weight);
+
+      font-size: var(--rel-body-md-regular-font-size);
+
+      line-height: var(--rel-body-md-regular-line-height);
+
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
+
     }
 
     .snackbar.two-line .snackbar-message {
@@ -115,7 +125,7 @@ export class RelSnackbar extends LitElement {
     .snackbar-actions {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs);
+      gap: var(--rel-spacing-2xs);
       flex-shrink: 0;
       align-self: center;
     }
@@ -127,15 +137,17 @@ export class RelSnackbar extends LitElement {
     .snackbar-action {
       background: none;
       border: none;
-      color: var(--rel-colors-green-primary);
-      font-weight: var(--rel-fontWeights-semibold);
-      font-size: var(--rel-fontSizes-sm);
-      font-family: var(--rel-fontFamilies-primary);
+      color: var(--rel-text-static-light);
       cursor: pointer;
       padding: 0;
       display: flex;
       align-items: center;
-      transition: opacity 0.2s ease;
+      transition: opacity 0.2s ease;
+      font-family: var(--rel-action-md-font-family);
+      font-weight: var(--rel-action-md-font-weight);
+      font-size: var(--rel-action-md-font-size);
+      line-height: var(--rel-action-md-line-height);
+      letter-spacing: var(--rel-action-md-letter-spacing);
     }
 
     .snackbar-action:hover {
@@ -147,15 +159,15 @@ export class RelSnackbar extends LitElement {
     }
 
     .snackbar-action:focus-visible {
-      outline: 2px solid #FFFFFF;
+      outline: 2px solid var(--rel-text-static-light);
       outline-offset: 2px;
-      border-radius: 2px;
+      border-radius: var(--rel-border-radius-xs);
     }
 
     .snackbar-close {
       background: none;
       border: none;
-      color: #FFFFFF;
+      color: var(--rel-action-neutral-label-icons-fill-inverse);
       cursor: pointer;
       padding: 0;
       display: flex;
@@ -173,9 +185,9 @@ export class RelSnackbar extends LitElement {
     }
 
     .snackbar-close:focus-visible {
-      outline: 2px solid #FFFFFF;
+      outline: 2px solid var(--rel-text-static-light);
       outline-offset: 2px;
-      border-radius: 2px;
+      border-radius: var(--rel-border-radius-xs);
     }
 
     /* Prevent any inherited transform from firing on button click */
@@ -288,20 +300,20 @@ export class RelSnackbar extends LitElement {
       <div class="${snackbarClasses}">
         <div class="snackbar-body">
           ${this.type !== "default" ? this.renderIcon() : ""}
-          <div class="snackbar-message">${this.message}</div>
+          <div part="label" class="snackbar-message">${this.message}</div>
         </div>
 
         <div class="snackbar-actions">
           ${this.action
             ? html`
-                <button class="snackbar-action" @click="${this.onActionClick}">
+                <button part="action" class="snackbar-action" @click="${this.onActionClick}">
                   ${this.action}
                 </button>
               `
             : ""}
           ${this.iconClose
             ? html`
-                <button class="snackbar-close" @click="${this.dismiss}">
+                <button part="close-button" class="snackbar-close" @click="${this.dismiss}">
                   <rel-icon name="close" size="md"></rel-icon>
                 </button>
               `

package/dist/components/rel-stepper/README.md

@@ -96,21 +96,21 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-sm` - Label font size
-- `--rel-fontWeights-medium` - Default label font weight
-- `--rel-fontWeights-semibold` - Active/done label font weight
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-sm-regular-font-size` - Label font size
+- `--rel-fonts-weight-body-medium` - Default label font weight
+- `--rel-fonts-weight-body-semibold` - Active/done label font weight
 
 ### Spacing Tokens
-- `--rel-spacing-space-2xs` - Gap between indicators and labels (text-right mode)
+- `--rel-spacing-2xs` - Gap between indicators and labels (text-right mode)
 
 ### Color Tokens
-- `--rel-colors-white` - Indicator background (progress, disabled states)
-- `--rel-colors-black` - Active/done indicator background, text, and connector color
-- `--rel-colors-gray-border` - Disabled indicator border and inactive connector
-- `--rel-colors-gray-light` - Disabled indicator background
+- `--rel-bg-surface` - Indicator background (progress, disabled states)
+- `--rel-text-default` - Active/done indicator background, text, and connector color
+- `--rel-border-default` - Disabled indicator border and inactive connector
+- `--rel-bg-surface-elevated` - Disabled indicator background
 - `--rel-text-disabled` - Disabled label text color
-- `--rel-text-primary` - Default label text color
+- `--rel-text-default` - Default label text color
 
 ## Accessibility
 - Steps can be clicked unless in disabled state

package/dist/components/rel-stepper/rel-stepper.ts

@@ -1,11 +1,14 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 export type StepStatus = "done" | "progress" | "disabled";
 export type TextAlign = "right" | "below";
 export type Orientation = "horizontal" | "vertical";
 export type StepperSize = "small" | "large";
+/** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
+export type StepperType = "default" | "dot" | "number" | "icon";
+/** Figma "Typel": label placement relative to the indicator. */
+export type LabelPlacement = "top" | "centered" | "inverted";
 
 export interface Step {
   title: string;
@@ -22,10 +25,23 @@ export class RelStepper extends LitElement {
 
   @property({ type: String }) size: StepperSize = "large";
 
+  @property({ type: String, reflect: true }) type: StepperType = "default";
+
+  /**
+   * Figma Typel axis: top = label top-aligned beside the indicator,
+   * centered = label vertically centered beside it, inverted = indicator above
+   * the label. When unset, the legacy textAlign prop drives the layout
+   * (below ≈ inverted, right ≈ centered). Note Figma marks Top+Horizontal
+   * as an unsupported combination.
+   */
+  @property({ type: String, reflect: true, attribute: "label-placement" })
+  labelPlacement?: LabelPlacement;
+
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
     }
 
     /********************************************
@@ -33,7 +49,7 @@ export class RelStepper extends LitElement {
      ********************************************/
     .rel-stepper {
       display: flex;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
       width: 100%;
       position: relative;
     }
@@ -78,7 +94,7 @@ export class RelStepper extends LitElement {
       align-items: center;
       position: relative;
       flex: 0;
-      gap: var(--rel-spacing-space-2xs);
+      gap: var(--rel-spacing-2xs);
     }
 
     /* Vertical layout variants */
@@ -94,7 +110,7 @@ export class RelStepper extends LitElement {
       align-items: flex-start;
       justify-content: center;
       position: relative;
-      gap: var(--rel-spacing-space-2xs);
+      gap: var(--rel-spacing-2xs);
     }
 
     /* Wrapper for indicator and connector */
@@ -109,7 +125,7 @@ export class RelStepper extends LitElement {
     .step-content {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs);
+      gap: var(--rel-spacing-2xs);
     }
 
     .text-below-content {
@@ -129,15 +145,18 @@ export class RelStepper extends LitElement {
       justify-content: center;
       width: var(--rel-stepper-indicator-size, 22px);
       height: var(--rel-stepper-indicator-size, 22px);
-      border: 2px solid var(--rel-color-border-default);
-      background: var(--rel-color-bg-primary);
+      border: 2px solid var(--rel-bg-neutral-elevated-2);
+      background: var(--rel-bg-neutral);
       border-radius: 50%;
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
       position: relative;
       z-index: 2;
       transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
       flex-shrink: 0;
+      font-family: var(--rel-body-sm-semibold-font-family);
+      font-weight: var(--rel-body-sm-semibold-font-weight);
+      font-size: var(--rel-body-sm-semibold-font-size);
+      line-height: var(--rel-body-sm-semibold-line-height);
+      letter-spacing: var(--rel-body-sm-semibold-letter-spacing);
     }
 
     .indicator svg {
@@ -146,18 +165,55 @@ export class RelStepper extends LitElement {
       display: block;
     }
 
+    /* Figma Type=Dot: bare dot indicator, no number/icon */
+    :host([type="dot"]) .indicator {
+      width: 12px;
+      height: 12px;
+    }
+
+    :host([type="dot"]) .rel-step.done .indicator,
+    :host([type="dot"]) .rel-step.progress .indicator {
+      background: var(--rel-bg-neutral-inverse-2);
+      border-color: var(--rel-bg-neutral-inverse-2);
+    }
+
+    /* Figma Typel=Top: label top-aligned against the indicator */
+    .rel-stepper.label-top .rel-step {
+      align-items: flex-start;
+    }
+
     /********************************************
      * Labels
      ********************************************/
     .step-label {
       white-space: nowrap;
-      font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-color-text-primary);
+      color: var(--rel-text-body);
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
     /* Horizontal text-below specific */
+    .rel-stepper.vertical .rel-step {
+      column-gap: var(--rel-spacing-sm);
+    }
+
+    .rel-stepper.small .step-label {
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+    }
+
+    .rel-step.disabled .indicator {
+      color: var(--rel-text-caption);
+    }
+
     .rel-stepper.horizontal.text-below .step-label {
-      margin-top: var(--rel-spacing-space-2xs);
+      margin-top: var(--rel-spacing-2xs);
       text-align: center;
     }
 
@@ -165,7 +221,7 @@ export class RelStepper extends LitElement {
     .rel-stepper.horizontal.text-right .step-label {
       margin-top: 0;
       margin-left: 0;
-      margin-right: var(--rel-spacing-space-xs);
+      margin-right: var(--rel-spacing-xs);
       text-align: left;
     }
 
@@ -188,7 +244,7 @@ export class RelStepper extends LitElement {
      ********************************************/
     .connector {
       position: absolute;
-      background: var(--rel-color-border-default);
+      background: var(--rel-border-default);
       z-index: 1;
     }
 
@@ -199,7 +255,7 @@ export class RelStepper extends LitElement {
       transform: translateY(-50%);
       height: 2px;
       position: absolute;
-      background: var(--rel-color-border-default);
+      background: var(--rel-border-default);
     }
 
     .rel-stepper.horizontal .rel-step:last-child .connector {
@@ -238,54 +294,54 @@ export class RelStepper extends LitElement {
      * Step States
      ********************************************/
     .rel-step.done .indicator {
-      background: var(--rel-color-text-heading);
-      border-color: var(--rel-color-text-heading);
-      color: var(--rel-color-text-inverse);
+      background: var(--rel-bg-neutral-inverse-2);
+      border-color: var(--rel-bg-neutral-inverse-2);
+      color: var(--rel-text-inverse);
     }
 
     .rel-step.progress .indicator {
-      border-color: var(--rel-color-text-heading);
-      background: var(--rel-color-bg-primary);
-      color: var(--rel-color-text-heading);
+      border-color: var(--rel-border-strong);
+      background: var(--rel-bg-neutral);
+      color: var(--rel-text-label);
     }
 
     .rel-step.disabled .indicator {
-      background: var(--rel-color-bg-secondary);
-      border-color: var(--rel-color-border-default);
-      color: var(--rel-color-text-disabled);
+      background: var(--rel-bg-surface-elevated);
+      border-color: var(--rel-border-default);
+      color: var(--rel-text-disabled);
     }
 
     .rel-step.done .connector {
-      background: var(--rel-color-text-heading);
+      background: var(--rel-text-label);
     }
 
     .rel-step.progress .connector {
-      background: var(--rel-color-text-heading);
+      background: var(--rel-text-label);
     }
 
     .rel-step.done .step-label {
-      color: var(--rel-color-text-heading);
-      font-weight: var(--rel-fontWeights-semibold);
+      color: var(--rel-text-label);
+      font-weight: var(--rel-body-md-medium-font-weight);
     }
 
     .rel-step.progress .step-label {
-      color: var(--rel-color-text-heading);
-      font-weight: var(--rel-fontWeights-semibold);
+      color: var(--rel-text-label);
+      font-weight: var(--rel-body-md-medium-font-weight);
     }
 
     .rel-step.disabled .step-label {
-      color: var(--rel-color-text-disabled);
+      color: var(--rel-text-disabled);
     }
 
     /* Dark mode: ensure progress/done indicator and labels stay readable */
     :host-context(:root[data-theme="dark"]) .rel-step.progress .step-label,
     :host-context(.dark) .rel-step.progress .step-label {
-      color: var(--rel-color-text-primary);
+      color: var(--rel-text-default);
     }
 
     :host-context(:root[data-theme="dark"]) .rel-step.progress .indicator,
     :host-context(.dark) .rel-step.progress .indicator {
-      color: #ffffff;
+      color: var(--rel-text-default);
     }
 
     /********************************************
@@ -362,7 +418,9 @@ export class RelStepper extends LitElement {
   }
 
   private renderIndicator(step: Step, index: number) {
-    if (step.status === "done") {
+    if (this.type === "dot") return html``;
+    if (this.type === "number") return html`<span>${index + 1}</span>`;
+    if (this.type === "icon" || step.status === "done") {
       return html`
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -383,17 +441,23 @@ export class RelStepper extends LitElement {
   }
 
   render() {
+    // Figma Typel wins when set; otherwise the legacy textAlign drives layout
+    // (below ≈ inverted, right ≈ centered).
+    const placement: LabelPlacement =
+      this.labelPlacement ?? (this.textAlign === "below" ? "inverted" : "centered");
+
     const stepperClasses = [
       "rel-stepper",
       this.orientation === "vertical" ? "vertical" : "horizontal",
-      this.textAlign === "below" ? "text-below" : "text-right",
+      placement === "inverted" ? "text-below" : "text-right",
+      placement === "top" ? "label-top" : "",
       this.size === "small" ? "small" : "large",
     ]
       .filter(Boolean)
       .join(" ");
 
     const isVertical = this.orientation === "vertical";
-    const isTextRight = this.textAlign === "right";
+    const isTextRight = placement !== "inverted";
 
     return html`
       <div class="${stepperClasses}">
@@ -407,46 +471,46 @@ export class RelStepper extends LitElement {
                 ? html`
                     <!-- Indicator with connector below -->
                     <div class="indicator-wrapper">
-                      <div class="indicator">
+                      <div part="indicator" class="indicator">
                         ${this.renderIndicator(step, idx)}
                       </div>
                       ${idx < this.steps.length - 1
-                        ? html`<div class="connector"></div>`
+                        ? html`<div part="track" class="connector"></div>`
                         : ""}
                     </div>
 
                     <!-- Step Label to the right -->
-                    <div class="step-label">${step.title}</div>
+                    <div part="label" class="step-label">${step.title}</div>
                   `
                 : isVertical
                 ? html`
                     <div class="step-content text-below-content">
                       <!-- Step Indicator -->
-                      <div class="indicator">
+                      <div part="indicator" class="indicator">
                         ${this.renderIndicator(step, idx)}
                       </div>
 
                       <!-- Step Label -->
-                      <div class="step-label">${step.title}</div>
+                      <div part="label" class="step-label">${step.title}</div>
                     </div>
 
                     <!-- Connector -->
                     ${idx < this.steps.length - 1
-                      ? html`<div class="connector"></div>`
+                      ? html`<div part="track" class="connector"></div>`
                       : ""}
                   `
                 : html`
                     <!-- Step Indicator -->
-                    <div class="indicator">
+                    <div part="indicator" class="indicator">
                       ${this.renderIndicator(step, idx)}
                     </div>
 
                     <!-- Step Label -->
-                    <div class="step-label">${step.title}</div>
+                    <div part="label" class="step-label">${step.title}</div>
 
                     <!-- Connector (for horizontal only) -->
                     ${!isVertical && idx < this.steps.length - 1
-                      ? html`<div class="connector"></div>`
+                      ? html`<div part="track" class="connector"></div>`
                       : ""}
                   `}
             </div>

package/dist/components/rel-switch/README.md

@@ -58,19 +58,19 @@ None exposed.
 The component defines these CSS custom properties on `:host` which can be overridden:
 
 - `--switch-track` - Track color when unchecked (default: `--rel-text-placeholder`)
-- `--switch-knob-on` - Knob color when checked (default: `--rel-colors-black`)
-- `--switch-knob-off` - Knob color when unchecked (default: `--rel-colors-white`)
+- `--switch-knob-on` - Knob color when checked (default: `--rel-text-default`)
+- `--switch-knob-off` - Knob color when unchecked (default: `--rel-bg-surface`)
 - `--switch-halo` - Focus halo color (default: `--rel-border-default`)
 - `--switch-disabled` - Color for disabled state (default: `--rel-text-disabled`)
 
 ### Design Token References
 - `--rel-text-placeholder` - Default track color
 - `--rel-text-dark-placeholder` - Hover track color
-- `--rel-colors-black` - ON knob color
-- `--rel-colors-white` - OFF knob color
+- `--rel-text-default` - ON knob color
+- `--rel-bg-surface` - OFF knob color
 - `--rel-border-default` - Focus halo
 - `--rel-text-disabled` - Disabled state color
-- `--rel-surface-surface` - Used in disabled styling
+- `--rel-bg-neutral-elevated-1` - Used in disabled styling
 
 ## Accessibility
 - Uses native checkbox input with `role="switch"` and `aria-checked`

package/dist/components/rel-switch/rel-switch.ts

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 @customElement("rel-switch")
 export class RelSwitch extends LitElement {
@@ -16,11 +15,12 @@ export class RelSwitch extends LitElement {
 
   static styles = css`
     :host {
-      --switch-track: var(--rel-color-text-placeholder);
-      --switch-knob-on: var(--rel-color-text-primary);
-      --switch-knob-off: var(--rel-color-bg-primary);
-      --switch-halo: var(--rel-color-border-default);
-      --switch-disabled: var(--rel-color-text-disabled);
+      color: var(--rel-text-default);
+      --switch-track: var(--rel-bg-neutral-elevated-2);
+      --switch-knob-on: var(--rel-bg-neutral-inverse-2);
+      --switch-knob-off: var(--rel-text-static-light);
+      --switch-halo: var(--rel-action-overlay-hover-strong);
+      --switch-disabled: var(--rel-bg-neutral-elevated-1);
       display: inline-block;
     }
 
@@ -49,8 +49,8 @@ export class RelSwitch extends LitElement {
     .switch-slider {
       position: absolute;
       top: 50%;
-      left: 4px;
-      right: 4px;
+      left: var(--rel-spacing-3xs);
+      right: var(--rel-spacing-3xs);
       height: 12px;
       background-color: var(--switch-track);
       border-radius: 999px;
@@ -82,20 +82,31 @@ export class RelSwitch extends LitElement {
 
     /* Hover */
     .switch-wrapper:hover:not(.switch-disabled) .switch-slider {
-      background-color: var(--rel-color-text-placeholder);
+      background-color: var(--rel-bg-neutral);
+    }
+
+    /* Hover halo — inverse overlay when checked (dark knob), strong overlay otherwise */
+    .switch-wrapper:hover:not(.switch-disabled) .switch-slider::before {
+      box-shadow: 0 0 0 6px var(--rel-action-overlay-hover-strong);
+    }
+
+    .switch-wrapper:hover:not(.switch-disabled) input:checked + .switch-slider::before {
+      box-shadow: 0 0 0 6px var(--rel-action-overlay-hover-inverse);
     }
 
     /* Focus halo */
     .switch-focused .switch-slider::before {
-      box-shadow: 0 0 0 6px var(--switch-halo);
+      box-shadow: 0 0 0 2px var(--rel-border-focus-inner), 0 0 0 4px var(--rel-border-focus);
     }
 
     /* Pressed */
     .switch-pressed .switch-slider::before {
       transform: scale(0.9) translateY(-50%);
+      box-shadow: 0 0 0 6px var(--rel-action-overlay-pressed);
     }
     .switch-pressed input:checked + .switch-slider::before {
       transform: scale(0.9) translateY(-50%) translateX(22px);
+      box-shadow: 0 0 0 6px var(--rel-action-overlay-dragged);
     }
 
     /* Disabled */
@@ -166,7 +177,7 @@ export class RelSwitch extends LitElement {
       .join(" ");
 
     return html`
-      <label class="${wrapperClasses}">
+      <label part="base" class="${wrapperClasses}">
         <input
           type="checkbox"
           role="switch"
@@ -179,7 +190,7 @@ export class RelSwitch extends LitElement {
           @mousedown=${this.handleMouseDown}
           @mouseup=${this.handleMouseUp}
         />
-        <span class="switch-slider"></span>
+        <span part="track" class="switch-slider"></span>
       </label>
     `;
   }