@krollins/blueprint 0.1.12 → 0.1.13

package/dist/components/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sources":["../../source/components/stepper/stepper.style.ts","../../source/components/stepper/stepper.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const stepperStyles = css`\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Base Styles\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    font-family: var(--bp-font-family);\r\n  }\r\n\r\n  :host([disabled]) {\r\n    opacity: var(--bp-opacity-disabled);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .stepper {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--bp-spacing-lg);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Step List\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .step-list {\r\n    display: flex;\r\n    gap: var(--bp-spacing-xs);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Individual Step\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .step {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    flex: 1;\r\n    position: relative;\r\n    outline: none;\r\n  }\r\n\r\n  .step--clickable {\r\n    cursor: pointer;\r\n  }\r\n\r\n  .step--clickable:focus-visible .step-indicator {\r\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n    outline-offset: var(--bp-focus-offset);\r\n  }\r\n\r\n  .step--disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Step Indicator (Number Circle)\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .step-indicator {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    width: var(--bp-spacing-xl);\r\n    height: var(--bp-spacing-xl);\r\n    border-radius: 50%;\r\n    border: var(--bp-border-width) solid var(--bp-color-border);\r\n    background-color: var(--bp-color-surface);\r\n    color: var(--bp-color-text-muted);\r\n    font-size: var(--bp-font-size-sm);\r\n    font-weight: var(--bp-font-weight-medium);\r\n    position: relative;\r\n    transition:\r\n      background-color var(--bp-transition-fast),\r\n      border-color var(--bp-transition-fast),\r\n      color var(--bp-transition-fast);\r\n  }\r\n\r\n  /* Expand touch target to 44×44px for WCAG 2.2 AA compliance */\r\n  .step--clickable .step-indicator::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: calc((var(--bp-spacing-11) - var(--bp-spacing-xl)) / -2);\r\n  }\r\n\r\n  .step-indicator--current {\r\n    background-color: var(--bp-color-primary);\r\n    border-color: var(--bp-color-primary);\r\n    color: var(--bp-color-text-inverse);\r\n  }\r\n\r\n  .step-indicator--complete {\r\n    background-color: var(--bp-color-success);\r\n    border-color: var(--bp-color-success);\r\n    color: var(--bp-color-text-inverse);\r\n  }\r\n\r\n  .step-indicator--error {\r\n    background-color: var(--bp-color-error);\r\n    border-color: var(--bp-color-error);\r\n    color: var(--bp-color-text-inverse);\r\n  }\r\n\r\n  .step-number {\r\n    line-height: 1;\r\n  }\r\n\r\n  .step-icon {\r\n    width: var(--bp-spacing-md);\r\n    height: var(--bp-spacing-md);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Step Content (Label & Description)\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .step-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--bp-spacing-2xs);\r\n    padding-left: var(--bp-spacing-sm);\r\n    padding-right: var(--bp-spacing-md);\r\n  }\r\n\r\n  .step-label {\r\n    font-size: var(--bp-font-size-sm);\r\n    font-weight: var(--bp-font-weight-medium);\r\n    color: var(--bp-color-text);\r\n    line-height: var(--bp-line-height-tight);\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .step--current .step-label {\r\n    color: var(--bp-color-primary);\r\n  }\r\n\r\n  .step--complete .step-label {\r\n    color: var(--bp-color-text);\r\n  }\r\n\r\n  .step--error .step-label {\r\n    color: var(--bp-color-error);\r\n  }\r\n\r\n  .step--disabled .step-label {\r\n    color: var(--bp-color-text-muted);\r\n  }\r\n\r\n  .step--pending .step-label {\r\n    color: var(--bp-color-text-muted);\r\n  }\r\n\r\n  .step-description {\r\n    font-size: var(--bp-font-size-xs);\r\n    color: var(--bp-color-text-muted);\r\n    line-height: var(--bp-line-height-normal);\r\n  }\r\n\r\n  .step-error {\r\n    font-size: var(--bp-font-size-xs);\r\n    color: var(--bp-color-error);\r\n    line-height: var(--bp-line-height-normal);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Connector Lines\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .connector {\r\n    flex: 1;\r\n    height: calc(var(--bp-border-width) * 2);\r\n    background-color: var(--bp-color-border);\r\n    margin-top: calc(var(--bp-spacing-xl) / 2);\r\n    margin-left: var(--bp-spacing-sm);\r\n    margin-right: var(--bp-spacing-sm);\r\n    transition: background-color var(--bp-transition-fast);\r\n  }\r\n\r\n  .step--complete .connector {\r\n    background-color: var(--bp-color-success);\r\n  }\r\n\r\n  .step--error .connector {\r\n    background-color: var(--bp-color-error);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Horizontal Orientation (Default)\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .stepper--horizontal .step-list {\r\n    flex-direction: row;\r\n  }\r\n\r\n  .stepper--horizontal .step {\r\n    flex-direction: row;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .stepper--horizontal .step-content {\r\n    max-width: var(--bp-spacing-24);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Vertical Orientation\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .stepper--vertical .step-list {\r\n    flex-direction: column;\r\n    gap: 0;\r\n  }\r\n\r\n  .stepper--vertical .step {\r\n    flex-direction: row;\r\n    padding-bottom: var(--bp-spacing-lg);\r\n  }\r\n\r\n  .stepper--vertical .step:last-child {\r\n    padding-bottom: 0;\r\n  }\r\n\r\n  .stepper--vertical .step-content {\r\n    flex: 1;\r\n    padding-right: 0;\r\n  }\r\n\r\n  .stepper--vertical .connector {\r\n    position: absolute;\r\n    left: calc(var(--bp-spacing-xl) / 2);\r\n    top: calc(var(--bp-spacing-xl) + var(--bp-spacing-xs));\r\n    bottom: 0;\r\n    width: calc(var(--bp-border-width) * 2);\r\n    height: auto;\r\n    margin: 0;\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Size Variants\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  /* Small */\r\n  .stepper--sm .step-indicator {\r\n    width: var(--bp-spacing-lg);\r\n    height: var(--bp-spacing-lg);\r\n    font-size: var(--bp-font-size-xs);\r\n  }\r\n\r\n  .stepper--sm .step--clickable .step-indicator::after {\r\n    inset: calc((var(--bp-spacing-11) - var(--bp-spacing-lg)) / -2);\r\n  }\r\n\r\n  .stepper--sm .step-icon {\r\n    width: var(--bp-spacing-sm);\r\n    height: var(--bp-spacing-sm);\r\n  }\r\n\r\n  .stepper--sm .step-label {\r\n    font-size: var(--bp-font-size-xs);\r\n  }\r\n\r\n  .stepper--sm .step-description {\r\n    font-size: var(--bp-font-size-xs);\r\n  }\r\n\r\n  .stepper--sm .connector {\r\n    margin-top: calc(var(--bp-spacing-lg) / 2);\r\n  }\r\n\r\n  .stepper--sm.stepper--vertical .connector {\r\n    left: calc(var(--bp-spacing-lg) / 2);\r\n    top: calc(var(--bp-spacing-lg) + var(--bp-spacing-xs));\r\n  }\r\n\r\n  /* Large */\r\n  .stepper--lg .step-indicator {\r\n    width: var(--bp-spacing-2xl);\r\n    height: var(--bp-spacing-2xl);\r\n    font-size: var(--bp-font-size-base);\r\n  }\r\n\r\n  .stepper--lg .step--clickable .step-indicator::after {\r\n    inset: calc((var(--bp-spacing-11) - var(--bp-spacing-2xl)) / -2);\r\n  }\r\n\r\n  .stepper--lg .step-icon {\r\n    width: var(--bp-spacing-lg);\r\n    height: var(--bp-spacing-lg);\r\n  }\r\n\r\n  .stepper--lg .step-label {\r\n    font-size: var(--bp-font-size-base);\r\n  }\r\n\r\n  .stepper--lg .step-description {\r\n    font-size: var(--bp-font-size-sm);\r\n  }\r\n\r\n  .stepper--lg .connector {\r\n    margin-top: calc(var(--bp-spacing-2xl) / 2);\r\n  }\r\n\r\n  .stepper--lg.stepper--vertical .connector {\r\n    left: calc(var(--bp-spacing-2xl) / 2);\r\n    top: calc(var(--bp-spacing-2xl) + var(--bp-spacing-xs));\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Panel\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .panel {\r\n    padding: var(--bp-spacing-md);\r\n    background-color: var(--bp-color-surface);\r\n    border: var(--bp-border-width) solid var(--bp-color-border);\r\n    border-radius: var(--bp-border-radius-md);\r\n  }\r\n\r\n  .panel:not(.panel--has-content) {\r\n    display: none;\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Actions\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .actions {\r\n    display: flex;\r\n    gap: var(--bp-spacing-sm);\r\n    justify-content: flex-end;\r\n  }\r\n\r\n  .actions:empty {\r\n    display: none;\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Navigation Buttons\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .nav-button {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\r\n    font-family: var(--bp-font-family);\r\n    font-size: var(--bp-font-size-sm);\r\n    font-weight: var(--bp-font-weight-medium);\r\n    line-height: var(--bp-line-height-tight);\r\n    border-radius: var(--bp-border-radius-md);\r\n    cursor: pointer;\r\n    transition:\r\n      background-color var(--bp-transition-fast),\r\n      border-color var(--bp-transition-fast),\r\n      color var(--bp-transition-fast);\r\n  }\r\n\r\n  .nav-button--previous {\r\n    background-color: var(--bp-color-surface);\r\n    border: var(--bp-border-width) solid var(--bp-color-border);\r\n    color: var(--bp-color-text);\r\n  }\r\n\r\n  .nav-button--previous:hover:not(:disabled) {\r\n    background-color: var(--bp-color-surface-hover);\r\n    border-color: var(--bp-color-border-strong);\r\n  }\r\n\r\n  .nav-button--next {\r\n    background-color: var(--bp-color-primary);\r\n    border: var(--bp-border-width) solid var(--bp-color-primary);\r\n    color: var(--bp-color-text-inverse);\r\n  }\r\n\r\n  .nav-button--next:hover:not(:disabled) {\r\n    background-color: var(--bp-color-primary-hover);\r\n    border-color: var(--bp-color-primary-hover);\r\n  }\r\n\r\n  .nav-button:disabled {\r\n    opacity: var(--bp-opacity-disabled);\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  .nav-button:focus-visible {\r\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n    outline-offset: var(--bp-focus-offset);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Hover States\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .step--clickable:hover .step-indicator--pending {\r\n    border-color: var(--bp-color-border-strong);\r\n  }\r\n\r\n  .step--clickable:hover .step-indicator--complete {\r\n    background-color: var(--bp-color-success-hover);\r\n    border-color: var(--bp-color-success-hover);\r\n  }\r\n\r\n  .step--clickable:hover .step-indicator--current {\r\n    background-color: var(--bp-color-primary-hover);\r\n    border-color: var(--bp-color-primary-hover);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Reduced Motion\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .step-indicator,\r\n    .connector {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { LitElement, html, nothing, PropertyValues } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\nimport { stepperStyles } from './stepper.style.js';\r\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\r\n\r\n/**\r\n * Step status\r\n */\r\nexport type StepStatus = 'pending' | 'current' | 'complete' | 'error';\r\n\r\n/**\r\n * Stepper orientation\r\n */\r\nexport type StepperOrientation = 'horizontal' | 'vertical';\r\n\r\n/**\r\n * Stepper size\r\n */\r\nexport type StepperSize = 'sm' | 'md' | 'lg';\r\n\r\n/**\r\n * Step configuration interface\r\n */\r\nexport interface Step {\r\n  /** Unique identifier for the step */\r\n  id: string;\r\n  /** Display label for the step */\r\n  label: string;\r\n  /** Optional description text */\r\n  description?: string;\r\n  /** Whether the step is disabled */\r\n  disabled?: boolean;\r\n  /** Optional icon name (uses step number if not provided) */\r\n  icon?: string;\r\n  /** Optional error message when step has error status */\r\n  error?: string;\r\n}\r\n\r\n/**\r\n * A stepper component for multi-step workflows and wizards.\r\n * Provides visual progress indication through a series of numbered or labeled steps.\r\n *\r\n * @element bp-stepper\r\n *\r\n * @property {Step[]} steps - Array of step configurations\r\n * @property {number} currentStep - Zero-based index of the current step\r\n * @property {StepperOrientation} orientation - Layout orientation\r\n * @property {StepperSize} size - Component size variant\r\n * @property {boolean} linear - Whether steps must be completed in order\r\n * @property {boolean} disabled - Whether the entire stepper is disabled\r\n * @property {boolean} hideLabels - Hide step labels (show only indicators)\r\n * @property {boolean} clickable - Whether completed steps are clickable to navigate\r\n *\r\n * @slot step-{id} - Custom content for a specific step panel\r\n * @slot actions - Navigation buttons (next/prev)\r\n *\r\n * @fires bp-step-change - Fired when the current step changes\r\n * @fires bp-step-complete - Fired when a step is marked complete\r\n * @fires bp-step-click - Fired when a step indicator is clicked\r\n *\r\n * @csspart stepper - The main stepper container\r\n * @csspart step-list - The step indicators container\r\n * @csspart step - Individual step container\r\n * @csspart step-indicator - The step number/icon circle\r\n * @csspart step-content - The step label and description area\r\n * @csspart step-label - The step label text\r\n * @csspart step-description - The step description text\r\n * @csspart connector - The line connecting steps\r\n * @csspart panel - The content panel for the current step\r\n * @csspart actions - The navigation actions container\r\n */\r\n@customElement('bp-stepper')\r\nexport class BpStepper extends LitElement {\r\n  /**\r\n   * Array of step configurations\r\n   */\r\n  @property({ type: Array }) declare steps: Step[];\r\n\r\n  /**\r\n   * Zero-based index of the current step\r\n   */\r\n  @property({ type: Number, reflect: true, attribute: 'current-step' })\r\n  declare currentStep: number;\r\n\r\n  /**\r\n   * Layout orientation\r\n   */\r\n  @property({ type: String, reflect: true })\r\n  declare orientation: StepperOrientation;\r\n\r\n  /**\r\n   * Component size variant\r\n   */\r\n  @property({ type: String, reflect: true }) declare size: StepperSize;\r\n\r\n  /**\r\n   * Whether steps must be completed in order\r\n   */\r\n  @property({ converter: booleanConverter, reflect: true })\r\n  declare linear: boolean;\r\n\r\n  /**\r\n   * Whether the entire stepper is disabled\r\n   */\r\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\r\n\r\n  /**\r\n   * Hide step labels (show only indicators)\r\n   */\r\n  @property({ type: Boolean, reflect: true, attribute: 'hide-labels' })\r\n  declare hideLabels: boolean;\r\n\r\n  /**\r\n   * Whether completed steps are clickable to navigate back\r\n   */\r\n  @property({ converter: booleanConverter, reflect: true })\r\n  declare clickable: boolean;\r\n\r\n  /**\r\n   * Show built-in navigation buttons (Previous/Next)\r\n   */\r\n  @property({\r\n    converter: booleanConverter,\r\n    reflect: true,\r\n    attribute: 'show-navigation',\r\n  })\r\n  declare showNavigation: boolean;\r\n\r\n  /**\r\n   * Tracks which steps have been completed\r\n   */\r\n  @state() private completedSteps: Set<number> = new Set();\r\n\r\n  /**\r\n   * Tracks which steps have errors\r\n   */\r\n  @state() private errorSteps: Set<number> = new Set();\r\n\r\n  /**\r\n   * Tracks whether the panel slot has any assigned content\r\n   */\r\n  @state() private panelHasContent = false;\r\n\r\n  static styles = [stepperStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.steps = [];\r\n    this.currentStep = 0;\r\n    this.orientation = 'horizontal';\r\n    this.size = 'md';\r\n    this.linear = true;\r\n    this.disabled = false;\r\n    this.hideLabels = false;\r\n    this.clickable = true;\r\n    this.showNavigation = true;\r\n  }\r\n\r\n  protected willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    // Sync errorSteps from step config error properties\r\n    if (changedProperties.has('steps')) {\r\n      const errors = new Set<number>();\r\n      this.steps.forEach((step, index) => {\r\n        if (step.error) {\r\n          errors.add(index);\r\n        }\r\n      });\r\n      this.errorSteps = errors;\r\n    }\r\n\r\n    // Auto-mark previous steps as complete when advancing\r\n    if (changedProperties.has('currentStep')) {\r\n      const prevStep = changedProperties.get('currentStep') as\r\n        | number\r\n        | undefined;\r\n      if (prevStep !== undefined && this.currentStep > prevStep) {\r\n        // Mark all steps before current as complete\r\n        const updated = new Set(this.completedSteps);\r\n        for (let i = 0; i < this.currentStep; i++) {\r\n          if (!this.errorSteps.has(i)) {\r\n            updated.add(i);\r\n          }\r\n        }\r\n        this.completedSteps = updated;\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get the status of a step based on index\r\n   * @param index Zero-based step index\r\n   * @returns Step status (pending, current, complete, or error)\r\n   */\r\n  private _getStepStatus(index: number): StepStatus {\r\n    if (this.errorSteps.has(index)) {\r\n      return 'error';\r\n    }\r\n    // Check explicit completion first (allows marking current step complete)\r\n    if (this.completedSteps.has(index)) {\r\n      return 'complete';\r\n    }\r\n    if (index === this.currentStep) {\r\n      return 'current';\r\n    }\r\n    if (index < this.currentStep) {\r\n      return 'complete';\r\n    }\r\n    return 'pending';\r\n  }\r\n\r\n  /**\r\n   * Check if a step is clickable based on linear mode and step state\r\n   * @param index Zero-based step index\r\n   * @param step Step configuration\r\n   * @returns True if the step can be clicked to navigate\r\n   */\r\n  private _isStepClickable(index: number, step: Step): boolean {\r\n    if (this.disabled || step.disabled) return false;\r\n    if (!this.clickable) return false;\r\n\r\n    const status = this._getStepStatus(index);\r\n\r\n    if (this.linear) {\r\n      // In linear mode, can only click completed steps or current step\r\n      return status === 'complete' || index === this.currentStep;\r\n    }\r\n\r\n    // In non-linear mode, can click any non-disabled step\r\n    return true;\r\n  }\r\n\r\n  /**\r\n   * Handle click events on step indicators\r\n   * Validates clickability and emits bp-step-click event before navigating\r\n   * @param index Zero-based step index that was clicked\r\n   * @param step Step configuration\r\n   */\r\n  private _handleStepClick(index: number, step: Step): void {\r\n    if (!this._isStepClickable(index, step)) return;\r\n\r\n    const detail = {\r\n      step: index,\r\n      stepId: step.id,\r\n      previousStep: this.currentStep,\r\n    };\r\n\r\n    const clickEvent = new CustomEvent('bp-step-click', {\r\n      detail,\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(clickEvent);\r\n\r\n    if (index !== this.currentStep) {\r\n      // When navigating backward, clear completion for steps at and after target\r\n      if (index < this.currentStep) {\r\n        for (let i = index; i < this.steps.length; i++) {\r\n          this.completedSteps.delete(i);\r\n        }\r\n      }\r\n      this.currentStep = index;\r\n      this._emitStepChange(index, step);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle keyboard navigation on step indicators\r\n   * Supports Enter/Space for activation and Arrow keys for focus movement\r\n   * @param event Keyboard event\r\n   * @param index Zero-based step index\r\n   * @param step Step configuration\r\n   */\r\n  private _handleStepKeydown(\r\n    event: KeyboardEvent,\r\n    index: number,\r\n    step: Step\r\n  ): void {\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n      this._handleStepClick(index, step);\r\n    }\r\n\r\n    // Arrow key navigation\r\n    const isHorizontal = this.orientation === 'horizontal';\r\n    const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\r\n    const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\r\n\r\n    if (event.key === prevKey && index > 0) {\r\n      event.preventDefault();\r\n      this._focusStep(index - 1);\r\n    } else if (event.key === nextKey && index < this.steps.length - 1) {\r\n      event.preventDefault();\r\n      this._focusStep(index + 1);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Focus a specific step indicator element\r\n   * @param index Zero-based step index to focus\r\n   */\r\n  private _focusStep(index: number): void {\r\n    const stepEl = this.shadowRoot?.querySelector(\r\n      `[data-step-index=\"${index}\"]`\r\n    ) as HTMLElement;\r\n    stepEl?.focus();\r\n  }\r\n\r\n  /**\r\n   * Emit bp-step-change event when navigating between steps\r\n   * @param index Zero-based step index navigated to\r\n   * @param step Step configuration\r\n   */\r\n  private _emitStepChange(index: number, step: Step): void {\r\n    const event = new CustomEvent('bp-step-change', {\r\n      detail: { step: index, stepId: step.id },\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  /**\r\n   * Navigate to the next step\r\n   */\r\n  public next(): boolean {\r\n    if (this.currentStep >= this.steps.length - 1) return false;\r\n    if (this.disabled) return false;\r\n\r\n    const currentStepConfig = this.steps[this.currentStep];\r\n    if (this.errorSteps.has(this.currentStep)) return false;\r\n\r\n    // Mark current step as complete\r\n    this.completedSteps.add(this.currentStep);\r\n    this.currentStep++;\r\n\r\n    this._emitStepChange(this.currentStep, this.steps[this.currentStep]);\r\n\r\n    const completeEvent = new CustomEvent('bp-step-complete', {\r\n      detail: { step: this.currentStep - 1, stepId: currentStepConfig.id },\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(completeEvent);\r\n\r\n    return true;\r\n  }\r\n\r\n  /**\r\n   * Navigate to the previous step\r\n   */\r\n  public previous(): boolean {\r\n    if (this.currentStep <= 0) return false;\r\n    if (this.disabled) return false;\r\n\r\n    // Remove completed status from steps at and after the new current position\r\n    for (let i = this.currentStep - 1; i < this.steps.length; i++) {\r\n      this.completedSteps.delete(i);\r\n    }\r\n\r\n    this.currentStep--;\r\n    this._emitStepChange(this.currentStep, this.steps[this.currentStep]);\r\n    return true;\r\n  }\r\n\r\n  /**\r\n   * Go to a specific step\r\n   */\r\n  public goToStep(index: number): boolean {\r\n    if (index < 0 || index >= this.steps.length) return false;\r\n    if (this.disabled) return false;\r\n\r\n    const step = this.steps[index];\r\n    if (step.disabled) return false;\r\n\r\n    if (this.linear && index > this.currentStep) {\r\n      // Can't skip ahead in linear mode\r\n      return false;\r\n    }\r\n\r\n    // When navigating backward, clear completion for steps at and after target\r\n    if (index < this.currentStep) {\r\n      for (let i = index; i < this.steps.length; i++) {\r\n        this.completedSteps.delete(i);\r\n      }\r\n    }\r\n\r\n    this.currentStep = index;\r\n    this._emitStepChange(index, step);\r\n    return true;\r\n  }\r\n\r\n  /**\r\n   * Mark a step as having an error\r\n   */\r\n  public setStepError(index: number, hasError: boolean): void {\r\n    if (hasError) {\r\n      this.errorSteps.add(index);\r\n      this.completedSteps.delete(index);\r\n    } else {\r\n      this.errorSteps.delete(index);\r\n    }\r\n    this.requestUpdate();\r\n  }\r\n\r\n  /**\r\n   * Mark a step as complete\r\n   */\r\n  public setStepComplete(index: number, complete: boolean): void {\r\n    if (complete) {\r\n      this.completedSteps.add(index);\r\n      this.errorSteps.delete(index);\r\n    } else {\r\n      this.completedSteps.delete(index);\r\n    }\r\n    this.requestUpdate();\r\n  }\r\n\r\n  /**\r\n   * Reset the stepper to the first step\r\n   */\r\n  public reset(): void {\r\n    this.currentStep = 0;\r\n    this.completedSteps.clear();\r\n    this.errorSteps.clear();\r\n    this.requestUpdate();\r\n  }\r\n\r\n  /**\r\n   * Check if we're on the first step\r\n   */\r\n  public get isFirstStep(): boolean {\r\n    return this.currentStep === 0;\r\n  }\r\n\r\n  /**\r\n   * Check if we're on the last step\r\n   */\r\n  public get isLastStep(): boolean {\r\n    return this.currentStep === this.steps.length - 1;\r\n  }\r\n\r\n  /**\r\n   * Get the current step configuration\r\n   */\r\n  public get currentStepConfig(): Step | undefined {\r\n    return this.steps[this.currentStep];\r\n  }\r\n\r\n  /**\r\n   * Render the step indicator (number circle with optional icon)\r\n   * Shows checkmark for complete, X for error, or step number for other states\r\n   * @param index Zero-based step index\r\n   * @param status Current step status\r\n   * @returns TemplateResult for step indicator\r\n   */\r\n  private _renderStepIndicator(index: number, status: StepStatus) {\r\n    const showCheckmark = status === 'complete';\r\n    const showError = status === 'error';\r\n\r\n    /* Inline SVG icons for step states - functional indicators, not themed */\r\n    /* stylelint-disable blueprint/no-hardcoded-values */\r\n    return html`\r\n      <div\r\n        class=${classMap({\r\n          'step-indicator': true,\r\n          [`step-indicator--${status}`]: true,\r\n        })}\r\n        part=\"step-indicator\"\r\n      >\r\n        ${showCheckmark\r\n          ? html`<svg\r\n              class=\"step-icon\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"3\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n            </svg>`\r\n          : showError\r\n            ? html`<svg\r\n                class=\"step-icon\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n              </svg>`\r\n            : html`<span class=\"step-number\">${index + 1}</span>`}\r\n      </div>\r\n    `;\r\n    /* stylelint-enable blueprint/no-hardcoded-values */\r\n  }\r\n\r\n  /**\r\n   * Render a complete step with indicator, label, description, and connector\r\n   * @param step Step configuration\r\n   * @param index Zero-based step index\r\n   * @returns TemplateResult for step\r\n   */\r\n  private _renderStep(step: Step, index: number) {\r\n    const status = this._getStepStatus(index);\r\n    const isClickable = this._isStepClickable(index, step);\r\n    const isLast = index === this.steps.length - 1;\r\n\r\n    return html`\r\n      <div\r\n        class=${classMap({\r\n          step: true,\r\n          [`step--${status}`]: true,\r\n          'step--disabled': step.disabled || this.disabled,\r\n          'step--clickable': isClickable,\r\n        })}\r\n        part=\"step\"\r\n        role=\"listitem\"\r\n        data-step-index=${index}\r\n        tabindex=${isClickable ? 0 : -1}\r\n        aria-current=${status === 'current' ? 'step' : 'false'}\r\n        aria-disabled=${step.disabled || this.disabled ? 'true' : 'false'}\r\n        @click=${() => this._handleStepClick(index, step)}\r\n        @keydown=${(e: KeyboardEvent) =>\r\n          this._handleStepKeydown(e, index, step)}\r\n      >\r\n        ${this._renderStepIndicator(index, status)}\r\n        ${!this.hideLabels\r\n          ? html`\r\n              <div class=\"step-content\" part=\"step-content\">\r\n                <span class=\"step-label\" part=\"step-label\" title=${step.label}\r\n                  >${step.label}</span\r\n                >\r\n                ${step.description\r\n                  ? html`<span class=\"step-description\" part=\"step-description\"\r\n                      >${step.description}</span\r\n                    >`\r\n                  : nothing}\r\n                ${status === 'error' && step.error\r\n                  ? html`<span class=\"step-error\">${step.error}</span>`\r\n                  : nothing}\r\n              </div>\r\n            `\r\n          : nothing}\r\n        ${!isLast\r\n          ? html`<div class=\"connector\" part=\"connector\"></div>`\r\n          : nothing}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Handle slotchange on the panel slot to track whether content is provided\r\n   */\r\n  private _handlePanelSlotChange(event: Event): void {\r\n    const slot = event.target as HTMLSlotElement;\r\n    this.panelHasContent = slot.assignedNodes({ flatten: true }).length > 0;\r\n  }\r\n\r\n  /**\r\n   * Render the content panel for the current step\r\n   * Shows slotted content via step-{id} slot\r\n   * @returns TemplateResult for panel or nothing if no current step\r\n   */\r\n  private _renderPanel() {\r\n    const currentStepConfig = this.steps[this.currentStep];\r\n    if (!currentStepConfig) return nothing;\r\n\r\n    return html`\r\n      <div\r\n        class=${classMap({\r\n          panel: true,\r\n          'panel--has-content': this.panelHasContent,\r\n        })}\r\n        part=\"panel\"\r\n        role=\"tabpanel\"\r\n      >\r\n        <slot\r\n          name=\"step-${currentStepConfig.id}\"\r\n          @slotchange=${this._handlePanelSlotChange}\r\n        ></slot>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div\r\n        class=${classMap({\r\n          stepper: true,\r\n          [`stepper--${this.orientation}`]: true,\r\n          [`stepper--${this.size}`]: true,\r\n          'stepper--disabled': this.disabled,\r\n        })}\r\n        part=\"stepper\"\r\n      >\r\n        <div\r\n          class=\"step-list\"\r\n          part=\"step-list\"\r\n          role=\"list\"\r\n          aria-label=\"Progress steps\"\r\n        >\r\n          ${this.steps.map((step, index) => this._renderStep(step, index))}\r\n        </div>\r\n        ${this._renderPanel()}\r\n        <div class=\"actions\" part=\"actions\">\r\n          <slot name=\"actions\">\r\n            ${this.showNavigation ? this._renderDefaultNavigation() : nothing}\r\n          </slot>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Render default navigation buttons (Previous/Next)\r\n   * Only shown when showNavigation is true and no custom actions are slotted\r\n   */\r\n  private _renderDefaultNavigation() {\r\n    return html`\r\n      <button\r\n        class=\"nav-button nav-button--previous\"\r\n        part=\"nav-button-previous\"\r\n        ?disabled=${this.isFirstStep || this.disabled}\r\n        @click=${() => this.previous()}\r\n      >\r\n        Previous\r\n      </button>\r\n      <button\r\n        class=\"nav-button nav-button--next\"\r\n        part=\"nav-button-next\"\r\n        ?disabled=${this.isLastStep || this.disabled}\r\n        @click=${() => this.next()}\r\n      >\r\n        ${this.isLastStep ? 'Finish' : 'Next'}\r\n      </button>\r\n    `;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'bp-stepper': BpStepper;\r\n  }\r\n}\r\n"],"names":["stepperStyles","css","BpStepper","LitElement","changedProperties","errors","step","index","prevStep","updated","i","status","detail","clickEvent","event","isHorizontal","prevKey","nextKey","currentStepConfig","completeEvent","hasError","complete","showCheckmark","showError","html","classMap","isClickable","isLast","e","nothing","slot","__decorateClass","property","booleanConverter","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}

package/dist/components/switch.js

@@ -0,0 +1,380 @@
+import { css as n, LitElement as p, html as d } from "lit";
+import { property as c, state as u, query as w, customElement as b } from "lit/decorators.js";
+import { live as _ } from "lit/directives/live.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+const v = n`
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Base
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  :host {
+    display: inline-block;
+  }
+
+  .switch {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--bp-spacing-sm);
+    cursor: pointer;
+    user-select: none;
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-normal);
+    color: var(--bp-color-text);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .switch__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .switch__label {
+    flex: 1;
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Track
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .switch__track {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: var(--bp-border-radius-full);
+    background-color: var(--bp-color-border-strong);
+    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Thumb
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .switch__thumb {
+    position: absolute;
+    border-radius: var(--bp-border-radius-full);
+    background-color: var(--bp-color-surface-elevated);
+    box-shadow:
+      0 1px 2px oklch(0 0 0 / 0.2),
+      0 1px 3px oklch(0 0 0 / 0.1);
+    transition:
+      transform 200ms cubic-bezier(0.2, 0, 0, 1),
+      width 200ms cubic-bezier(0.2, 0, 0, 1),
+      box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
+    will-change: transform, width;
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Sizes — proportional track + thumb dimensions
+   *
+   *   sm: track 32×18, thumb 14, pad 2
+   *   md: track 40×22, thumb 18, pad 2
+   *   lg: track 48×28, thumb 22, pad 3
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  /* Small */
+  .switch--sm .switch__track {
+    width: var(--bp-spacing-8);
+    height: 18px;
+    padding: var(--bp-spacing-0-5);
+  }
+  .switch--sm .switch__thumb {
+    width: 14px;
+    height: 14px;
+    left: var(--bp-spacing-0-5);
+  }
+  .switch--sm .switch__input:checked + .switch__track .switch__thumb {
+    transform: translateX(14px);
+  }
+
+  /* Medium */
+  .switch--md .switch__track {
+    width: var(--bp-spacing-10);
+    height: 22px;
+    padding: var(--bp-spacing-0-5);
+  }
+  .switch--md .switch__thumb {
+    width: 18px;
+    height: 18px;
+    left: var(--bp-spacing-0-5);
+  }
+  .switch--md .switch__input:checked + .switch__track .switch__thumb {
+    transform: translateX(18px);
+  }
+
+  /* Large */
+  .switch--lg .switch__track {
+    width: var(--bp-spacing-12);
+    height: 28px;
+    padding: var(--bp-spacing-1);
+  }
+  .switch--lg .switch__thumb {
+    width: 22px;
+    height: 22px;
+    left: var(--bp-spacing-1);
+  }
+  .switch--lg .switch__input:checked + .switch__track .switch__thumb {
+    transform: translateX(22px);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Checked state
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .switch__input:checked + .switch__track {
+    background-color: var(--bp-color-primary);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Hover
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .switch:hover:not(.switch--disabled) .switch__track {
+    background-color: var(--bp-color-text-muted);
+  }
+
+  .switch:hover:not(.switch--disabled) .switch__input:checked + .switch__track {
+    background-color: var(--bp-color-primary-hover);
+  }
+
+  .switch:hover:not(.switch--disabled) .switch__thumb {
+    box-shadow:
+      0 1px 3px oklch(0 0 0 / 0.25),
+      0 2px 6px oklch(0 0 0 / 0.1);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Active / Pressed — thumb stretches toward the direction of travel
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .switch:active:not(.switch--disabled) .switch--sm .switch__thumb,
+  .switch--sm .switch__input:active + .switch__track .switch__thumb {
+    width: 18px;
+  }
+  .switch--sm .switch__input:checked:active + .switch__track .switch__thumb {
+    width: 18px;
+    transform: translateX(10px);
+  }
+
+  .switch:active:not(.switch--disabled) .switch--md .switch__thumb,
+  .switch--md .switch__input:active + .switch__track .switch__thumb {
+    width: 22px;
+  }
+  .switch--md .switch__input:checked:active + .switch__track .switch__thumb {
+    width: 22px;
+    transform: translateX(14px);
+  }
+
+  .switch:active:not(.switch--disabled) .switch--lg .switch__thumb,
+  .switch--lg .switch__input:active + .switch__track .switch__thumb {
+    width: 26px;
+  }
+  .switch--lg .switch__input:checked:active + .switch__track .switch__thumb {
+    width: 26px;
+    transform: translateX(18px);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Focus
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .switch--focus .switch__track {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Disabled
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .switch--disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Error
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .switch--error .switch__track {
+    background-color: var(--bp-color-error);
+  }
+
+  .switch--error .switch__input:checked + .switch__track {
+    background-color: var(--bp-color-error);
+  }
+
+  .switch:hover:not(.switch--disabled).switch--error .switch__track {
+    background-color: var(--bp-color-error-hover);
+  }
+
+  .switch:hover:not(.switch--disabled).switch--error
+    .switch__input:checked
+    + .switch__track {
+    background-color: var(--bp-color-error-hover);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Touch target — ensure 44×44px minimum on touch devices
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  @media (pointer: coarse) {
+    .switch {
+      min-height: 44px;
+      padding: var(--bp-spacing-xs) 0;
+    }
+
+    .switch__track::before {
+      content: '';
+      position: absolute;
+      inset: -8px -4px;
+    }
+  }
+`;
+var f = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, r, a, h) => {
+  for (var s = h > 1 ? void 0 : h ? k(r, a) : r, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (s = (h ? l(r, a, s) : l(s)) || s);
+  return h && s && f(r, a, s), s;
+};
+let t = class extends p {
+  constructor() {
+    super(), this.hasFocus = !1, this.internals = null, this.checked = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.size = "md", this.error = !1, typeof this.attachInternals == "function" && (this.internals = this.attachInternals());
+  }
+  /**
+   * Handle input change events
+   */
+  handleChange(e) {
+    const r = e.target;
+    this.checked = r.checked, !this.disabled && this.internals && this.internals.setFormValue(this.checked ? this.value : null), this.dispatchEvent(
+      new CustomEvent("bp-change", {
+        detail: { checked: this.checked },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * Handle focus events
+   */
+  handleFocus() {
+    this.hasFocus = !0, this.dispatchEvent(
+      new CustomEvent("bp-focus", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * Handle blur events
+   */
+  handleBlur() {
+    this.hasFocus = !1, this.dispatchEvent(
+      new CustomEvent("bp-blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * Handle label click to toggle the switch
+   */
+  handleLabelClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      return;
+    }
+  }
+  /**
+   * Sets focus on the switch.
+   */
+  // eslint-disable-next-line no-undef
+  focus(e) {
+    this.input?.focus(e);
+  }
+  /**
+   * Removes focus from the switch.
+   */
+  blur() {
+    this.input?.blur();
+  }
+  /**
+   * Lifecycle callback when properties change
+   */
+  updated(e) {
+    e.has("checked") && this.internals && this.internals.setFormValue(this.checked ? this.value : null);
+  }
+  render() {
+    return d`
+      <label
+        part="switch"
+        class="switch switch--${this.size} ${this.disabled ? "switch--disabled" : ""} ${this.error ? "switch--error" : ""} ${this.hasFocus ? "switch--focus" : ""}"
+        @click=${this.handleLabelClick}
+      >
+        <input
+          part="input"
+          type="checkbox"
+          class="switch__input"
+          .checked=${_(this.checked)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          name=${m(this.name || void 0)}
+          value=${this.value}
+          aria-checked=${this.checked ? "true" : "false"}
+          @change=${this.handleChange}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+        <span part="track" class="switch__track">
+          <span part="thumb" class="switch__thumb"></span>
+        </span>
+        <span part="label" class="switch__label">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+  }
+};
+t.styles = [v];
+t.formAssociated = !0;
+i([
+  c({ type: Boolean, reflect: !0 })
+], t.prototype, "checked", 2);
+i([
+  c({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+i([
+  c({ type: Boolean, reflect: !0 })
+], t.prototype, "required", 2);
+i([
+  c({ type: String })
+], t.prototype, "name", 2);
+i([
+  c({ type: String })
+], t.prototype, "value", 2);
+i([
+  c({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+i([
+  c({ type: Boolean, reflect: !0 })
+], t.prototype, "error", 2);
+i([
+  u()
+], t.prototype, "hasFocus", 2);
+i([
+  w('input[type="checkbox"]')
+], t.prototype, "input", 2);
+t = i([
+  b("bp-switch")
+], t);
+export {
+  t as BpSwitch
+};
+//# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sources":["../../source/components/switch/switch.style.ts","../../source/components/switch/switch.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const switchStyles = css`\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Base\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: inline-block;\r\n  }\r\n\r\n  .switch {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: var(--bp-spacing-sm);\r\n    cursor: pointer;\r\n    user-select: none;\r\n    font-family: var(--bp-font-family);\r\n    font-size: var(--bp-font-size-base);\r\n    line-height: var(--bp-line-height-normal);\r\n    color: var(--bp-color-text);\r\n    -webkit-tap-highlight-color: transparent;\r\n  }\r\n\r\n  .switch__input {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 1px;\r\n    margin: -1px;\r\n    padding: 0;\r\n    overflow: hidden;\r\n    clip: rect(0, 0, 0, 0);\r\n    white-space: nowrap;\r\n    border: 0;\r\n  }\r\n\r\n  .switch__label {\r\n    flex: 1;\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Track\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .switch__track {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    flex-shrink: 0;\r\n    border-radius: var(--bp-border-radius-full);\r\n    background-color: var(--bp-color-border-strong);\r\n    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Thumb\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .switch__thumb {\r\n    position: absolute;\r\n    border-radius: var(--bp-border-radius-full);\r\n    background-color: var(--bp-color-surface-elevated);\r\n    box-shadow:\r\n      0 1px 2px oklch(0 0 0 / 0.2),\r\n      0 1px 3px oklch(0 0 0 / 0.1);\r\n    transition:\r\n      transform 200ms cubic-bezier(0.2, 0, 0, 1),\r\n      width 200ms cubic-bezier(0.2, 0, 0, 1),\r\n      box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);\r\n    will-change: transform, width;\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Sizes — proportional track + thumb dimensions\r\n   *\r\n   *   sm: track 32×18, thumb 14, pad 2\r\n   *   md: track 40×22, thumb 18, pad 2\r\n   *   lg: track 48×28, thumb 22, pad 3\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  /* Small */\r\n  .switch--sm .switch__track {\r\n    width: var(--bp-spacing-8);\r\n    height: 18px;\r\n    padding: var(--bp-spacing-0-5);\r\n  }\r\n  .switch--sm .switch__thumb {\r\n    width: 14px;\r\n    height: 14px;\r\n    left: var(--bp-spacing-0-5);\r\n  }\r\n  .switch--sm .switch__input:checked + .switch__track .switch__thumb {\r\n    transform: translateX(14px);\r\n  }\r\n\r\n  /* Medium */\r\n  .switch--md .switch__track {\r\n    width: var(--bp-spacing-10);\r\n    height: 22px;\r\n    padding: var(--bp-spacing-0-5);\r\n  }\r\n  .switch--md .switch__thumb {\r\n    width: 18px;\r\n    height: 18px;\r\n    left: var(--bp-spacing-0-5);\r\n  }\r\n  .switch--md .switch__input:checked + .switch__track .switch__thumb {\r\n    transform: translateX(18px);\r\n  }\r\n\r\n  /* Large */\r\n  .switch--lg .switch__track {\r\n    width: var(--bp-spacing-12);\r\n    height: 28px;\r\n    padding: var(--bp-spacing-1);\r\n  }\r\n  .switch--lg .switch__thumb {\r\n    width: 22px;\r\n    height: 22px;\r\n    left: var(--bp-spacing-1);\r\n  }\r\n  .switch--lg .switch__input:checked + .switch__track .switch__thumb {\r\n    transform: translateX(22px);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Checked state\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .switch__input:checked + .switch__track {\r\n    background-color: var(--bp-color-primary);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Hover\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .switch:hover:not(.switch--disabled) .switch__track {\r\n    background-color: var(--bp-color-text-muted);\r\n  }\r\n\r\n  .switch:hover:not(.switch--disabled) .switch__input:checked + .switch__track {\r\n    background-color: var(--bp-color-primary-hover);\r\n  }\r\n\r\n  .switch:hover:not(.switch--disabled) .switch__thumb {\r\n    box-shadow:\r\n      0 1px 3px oklch(0 0 0 / 0.25),\r\n      0 2px 6px oklch(0 0 0 / 0.1);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Active / Pressed — thumb stretches toward the direction of travel\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .switch:active:not(.switch--disabled) .switch--sm .switch__thumb,\r\n  .switch--sm .switch__input:active + .switch__track .switch__thumb {\r\n    width: 18px;\r\n  }\r\n  .switch--sm .switch__input:checked:active + .switch__track .switch__thumb {\r\n    width: 18px;\r\n    transform: translateX(10px);\r\n  }\r\n\r\n  .switch:active:not(.switch--disabled) .switch--md .switch__thumb,\r\n  .switch--md .switch__input:active + .switch__track .switch__thumb {\r\n    width: 22px;\r\n  }\r\n  .switch--md .switch__input:checked:active + .switch__track .switch__thumb {\r\n    width: 22px;\r\n    transform: translateX(14px);\r\n  }\r\n\r\n  .switch:active:not(.switch--disabled) .switch--lg .switch__thumb,\r\n  .switch--lg .switch__input:active + .switch__track .switch__thumb {\r\n    width: 26px;\r\n  }\r\n  .switch--lg .switch__input:checked:active + .switch__track .switch__thumb {\r\n    width: 26px;\r\n    transform: translateX(18px);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Focus\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .switch--focus .switch__track {\r\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n    outline-offset: var(--bp-focus-offset);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Disabled\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .switch--disabled {\r\n    opacity: 0.4;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Error\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  .switch--error .switch__track {\r\n    background-color: var(--bp-color-error);\r\n  }\r\n\r\n  .switch--error .switch__input:checked + .switch__track {\r\n    background-color: var(--bp-color-error);\r\n  }\r\n\r\n  .switch:hover:not(.switch--disabled).switch--error .switch__track {\r\n    background-color: var(--bp-color-error-hover);\r\n  }\r\n\r\n  .switch:hover:not(.switch--disabled).switch--error\r\n    .switch__input:checked\r\n    + .switch__track {\r\n    background-color: var(--bp-color-error-hover);\r\n  }\r\n\r\n  /* ─────────────────────────────────────────────────────────────────────────────\r\n   * Touch target — ensure 44×44px minimum on touch devices\r\n   * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n  @media (pointer: coarse) {\r\n    .switch {\r\n      min-height: 44px;\r\n      padding: var(--bp-spacing-xs) 0;\r\n    }\r\n\r\n    .switch__track::before {\r\n      content: '';\r\n      position: absolute;\r\n      inset: -8px -4px;\r\n    }\r\n  }\r\n`;\r\n","import { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { switchStyles } from './switch.style.js';\nimport { live } from 'lit/directives/live.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport type SwitchSize = 'sm' | 'md' | 'lg';\n\n/**\n * A toggle switch component for binary on/off states with form integration.\n *\n * @element bp-switch\n *\n * @fires {CustomEvent} bp-change - Fired when the checked state changes\n * @fires {CustomEvent} bp-focus - Fired when the switch receives focus\n * @fires {CustomEvent} bp-blur - Fired when the switch loses focus\n *\n * @slot - The label text for the switch\n *\n * @csspart switch - The switch container (label)\n * @csspart input - The native checkbox input element\n * @csspart track - The switch track background\n * @csspart thumb - The switch thumb/handle\n * @csspart label - The label text container\n */\n@customElement('bp-switch')\nexport class BpSwitch extends LitElement {\n  /**\n   * Whether the switch is in the on (checked) position\n   */\n  @property({ type: Boolean, reflect: true })\n  declare checked: boolean;\n\n  /**\n   * Whether the switch is disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  declare disabled: boolean;\n\n  /**\n   * Whether the switch is required\n   */\n  @property({ type: Boolean, reflect: true })\n  declare required: boolean;\n\n  /**\n   * The name attribute for form submission\n   */\n  @property({ type: String })\n  declare name: string;\n\n  /**\n   * The value attribute for form submission\n   */\n  @property({ type: String })\n  declare value: string;\n\n  /**\n   * The size of the switch\n   */\n  @property({ type: String, reflect: true })\n  declare size: SwitchSize;\n\n  /**\n   * Whether the switch has an error state\n   */\n  @property({ type: Boolean, reflect: true })\n  declare error: boolean;\n\n  @state()\n  private hasFocus = false;\n\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  static styles = [switchStyles];\n\n  static formAssociated = true;\n  // eslint-disable-next-line no-undef\n  private internals: ElementInternals | null = null;\n\n  constructor() {\n    super();\n    this.checked = false;\n    this.disabled = false;\n    this.required = false;\n    this.name = '';\n    this.value = 'on';\n    this.size = 'md';\n    this.error = false;\n\n    // Attach internals for form integration (with safety check for tests)\n    if (typeof this.attachInternals === 'function') {\n      this.internals = this.attachInternals();\n    }\n  }\n\n  /**\n   * Handle input change events\n   */\n  private handleChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    // Update form value\n    if (!this.disabled && this.internals) {\n      this.internals.setFormValue(this.checked ? this.value : null);\n    }\n\n    // Emit custom change event\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: { checked: this.checked },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handle focus events\n   */\n  private handleFocus(): void {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('bp-focus', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handle blur events\n   */\n  private handleBlur(): void {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('bp-blur', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handle label click to toggle the switch\n   */\n  private handleLabelClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n  }\n\n  /**\n   * Sets focus on the switch.\n   */\n  // eslint-disable-next-line no-undef\n  focus(options?: FocusOptions) {\n    this.input?.focus(options);\n  }\n\n  /**\n   * Removes focus from the switch.\n   */\n  blur() {\n    this.input?.blur();\n  }\n\n  /**\n   * Lifecycle callback when properties change\n   */\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('checked') && this.internals) {\n      this.internals.setFormValue(this.checked ? this.value : null);\n    }\n  }\n\n  render() {\n    return html`\n      <label\n        part=\"switch\"\n        class=\"switch switch--${this.size} ${this.disabled\n          ? 'switch--disabled'\n          : ''} ${this.error ? 'switch--error' : ''} ${this.hasFocus\n          ? 'switch--focus'\n          : ''}\"\n        @click=${this.handleLabelClick}\n      >\n        <input\n          part=\"input\"\n          type=\"checkbox\"\n          class=\"switch__input\"\n          .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name || undefined)}\n          value=${this.value}\n          aria-checked=${this.checked ? 'true' : 'false'}\n          @change=${this.handleChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        <span part=\"track\" class=\"switch__track\">\n          <span part=\"thumb\" class=\"switch__thumb\"></span>\n        </span>\n        <span part=\"label\" class=\"switch__label\">\n          <slot></slot>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-switch': BpSwitch;\n  }\n}\n"],"names":["switchStyles","css","BpSwitch","LitElement","event","target","options","changedProperties","html","live","ifDefined","__decorateClass","property","state","query","customElement"],"mappings":";;;;AAEO,MAAMA,IAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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"}