@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/stepper-B42LunTc.js.map

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

package/dist/shared/switch-Df-8K3aW.js

@@ -0,0 +1,348 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { r as t } from "./form-control-CBEBNz12.js";
+import { a as n, i as r, r as i } from "./field-message-CPXPLd6z.js";
+import { LitElement as a, css as o, html as s, nothing as c } from "lit";
+import { customElement as l, property as u, query as d, state as f } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { live as m } from "lit/directives/live.js";
+//#region source/components/switch/switch.style.ts
+var h = o`
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * 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;
+    }
+  }
+`, g = class extends a {
+	static {
+		this.styles = [r, h];
+	}
+	static {
+		this.formAssociated = !0;
+	}
+	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, this.helperText = "", this.errorMessage = "", typeof this.attachInternals == "function" && (this.internals = this.attachInternals());
+	}
+	handleChange(e) {
+		let t = e.target;
+		this.checked = t.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
+		}));
+	}
+	handleFocus() {
+		this.hasFocus = !0, this.dispatchEvent(new CustomEvent("bp-focus", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleBlur() {
+		this.hasFocus = !1, this.dispatchEvent(new CustomEvent("bp-blur", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleLabelClick(e) {
+		if (this.disabled) {
+			e.preventDefault();
+			return;
+		}
+	}
+	focus(e) {
+		this.input?.focus(e);
+	}
+	blur() {
+		this.input?.blur();
+	}
+	updated(e) {
+		e.has("checked") && this.internals && this.internals.setFormValue(this.checked ? this.value : null), (e.has("errorMessage") || e.has("disabled")) && t(this.internals, this.errorMessage, this.disabled, this.input);
+	}
+	render() {
+		let e = {
+			helperText: this.helperText,
+			errorMessage: this.errorMessage,
+			invalid: this.error
+		}, { invalid: t, describedBy: r } = i(e);
+		return s`
+      <label
+        part="switch"
+        class="switch switch--${this.size} ${this.disabled ? "switch--disabled" : ""} ${t ? "switch--error" : ""} ${this.hasFocus ? "switch--focus" : ""}"
+        @click=${this.handleLabelClick}
+      >
+        <input
+          part="input"
+          type="checkbox"
+          class="switch__input"
+          .checked=${m(this.checked)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          name=${p(this.name || void 0)}
+          value=${this.value}
+          aria-checked=${this.checked ? "true" : "false"}
+          aria-invalid=${t ? "true" : c}
+          aria-describedby=${r ?? c}
+          @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>
+      ${n(e)}
+    `;
+	}
+};
+e([u({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "checked", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "disabled", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "required", void 0), e([u({ type: String })], g.prototype, "name", void 0), e([u({ type: String })], g.prototype, "value", void 0), e([u({
+	type: String,
+	reflect: !0
+})], g.prototype, "size", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "error", void 0), e([u({ type: String })], g.prototype, "helperText", void 0), e([u({ type: String })], g.prototype, "errorMessage", void 0), e([f()], g.prototype, "hasFocus", void 0), e([d("input[type=\"checkbox\"]")], g.prototype, "input", void 0), g = e([l("bp-switch")], g);
+//#endregion
+export { g as t };
+
+//# sourceMappingURL=switch-Df-8K3aW.js.map

package/dist/shared/switch-Df-8K3aW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-Df-8K3aW.js","names":["_decorate","__decorate","syncCustomValidity","renderFieldMessage","fieldMessageStyles","fieldMessageState","switchStyles","BpSwitch","LitElement","target","event","options","changedProperties","message","invalid","live","ifDefined","nothing","describedBy","property","state","query","customElement"],"sources":["../../source/components/switch/switch.style.ts","../../source/components/switch/switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const switchStyles = css`\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Base\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-block;\n  }\n\n  .switch {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-sm);\n    cursor: pointer;\n    user-select: none;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-text);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .switch__input {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  .switch__label {\n    flex: 1;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Track\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch__track {\n    position: relative;\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    border-radius: var(--bp-border-radius-full);\n    background-color: var(--bp-color-border-strong);\n    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Thumb\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch__thumb {\n    position: absolute;\n    border-radius: var(--bp-border-radius-full);\n    background-color: var(--bp-color-surface-elevated);\n    box-shadow:\n      0 1px 2px oklch(0 0 0 / 0.2),\n      0 1px 3px oklch(0 0 0 / 0.1);\n    transition:\n      transform 200ms cubic-bezier(0.2, 0, 0, 1),\n      width 200ms cubic-bezier(0.2, 0, 0, 1),\n      box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);\n    will-change: transform, width;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Sizes — proportional track + thumb dimensions\n   *\n   *   sm: track 32×18, thumb 14, pad 2\n   *   md: track 40×22, thumb 18, pad 2\n   *   lg: track 48×28, thumb 22, pad 3\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  /* Small */\n  .switch--sm .switch__track {\n    width: var(--bp-spacing-8);\n    height: 18px;\n    padding: var(--bp-spacing-0-5);\n  }\n  .switch--sm .switch__thumb {\n    width: 14px;\n    height: 14px;\n    left: var(--bp-spacing-0-5);\n  }\n  .switch--sm .switch__input:checked + .switch__track .switch__thumb {\n    transform: translateX(14px);\n  }\n\n  /* Medium */\n  .switch--md .switch__track {\n    width: var(--bp-spacing-10);\n    height: 22px;\n    padding: var(--bp-spacing-0-5);\n  }\n  .switch--md .switch__thumb {\n    width: 18px;\n    height: 18px;\n    left: var(--bp-spacing-0-5);\n  }\n  .switch--md .switch__input:checked + .switch__track .switch__thumb {\n    transform: translateX(18px);\n  }\n\n  /* Large */\n  .switch--lg .switch__track {\n    width: var(--bp-spacing-12);\n    height: 28px;\n    padding: var(--bp-spacing-1);\n  }\n  .switch--lg .switch__thumb {\n    width: 22px;\n    height: 22px;\n    left: var(--bp-spacing-1);\n  }\n  .switch--lg .switch__input:checked + .switch__track .switch__thumb {\n    transform: translateX(22px);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Checked state\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch__input:checked + .switch__track {\n    background-color: var(--bp-color-primary);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Hover\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch:hover:not(.switch--disabled) .switch__track {\n    background-color: var(--bp-color-text-muted);\n  }\n\n  .switch:hover:not(.switch--disabled) .switch__input:checked + .switch__track {\n    background-color: var(--bp-color-primary-hover);\n  }\n\n  .switch:hover:not(.switch--disabled) .switch__thumb {\n    box-shadow:\n      0 1px 3px oklch(0 0 0 / 0.25),\n      0 2px 6px oklch(0 0 0 / 0.1);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Active / Pressed — thumb stretches toward the direction of travel\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch:active:not(.switch--disabled) .switch--sm .switch__thumb,\n  .switch--sm .switch__input:active + .switch__track .switch__thumb {\n    width: 18px;\n  }\n  .switch--sm .switch__input:checked:active + .switch__track .switch__thumb {\n    width: 18px;\n    transform: translateX(10px);\n  }\n\n  .switch:active:not(.switch--disabled) .switch--md .switch__thumb,\n  .switch--md .switch__input:active + .switch__track .switch__thumb {\n    width: 22px;\n  }\n  .switch--md .switch__input:checked:active + .switch__track .switch__thumb {\n    width: 22px;\n    transform: translateX(14px);\n  }\n\n  .switch:active:not(.switch--disabled) .switch--lg .switch__thumb,\n  .switch--lg .switch__input:active + .switch__track .switch__thumb {\n    width: 26px;\n  }\n  .switch--lg .switch__input:checked:active + .switch__track .switch__thumb {\n    width: 26px;\n    transform: translateX(18px);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Focus\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch--focus .switch__track {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Disabled\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch--disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Error\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch--error .switch__track {\n    background-color: var(--bp-color-error);\n  }\n\n  .switch--error .switch__input:checked + .switch__track {\n    background-color: var(--bp-color-error);\n  }\n\n  .switch:hover:not(.switch--disabled).switch--error .switch__track {\n    background-color: var(--bp-color-error-hover);\n  }\n\n  .switch:hover:not(.switch--disabled).switch--error\n    .switch__input:checked\n    + .switch__track {\n    background-color: var(--bp-color-error-hover);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Touch target — ensure 44×44px minimum on touch devices\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  @media (pointer: coarse) {\n    .switch {\n      min-height: 44px;\n      padding: var(--bp-spacing-xs) 0;\n    }\n\n    .switch__track::before {\n      content: '';\n      position: absolute;\n      inset: -8px -4px;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { switchStyles } from './switch.style.js';\nimport {\n  fieldMessageState,\n  renderFieldMessage,\n  fieldMessageStyles,\n} from '../../utilities/field-message.js';\nimport { syncCustomValidity } from '../../utilities/form-control.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  /** Helper text displayed below the switch */\n  @property({ type: String }) declare helperText: string;\n\n  /**\n   * Error text. When set, the switch is invalid: the message replaces the\n   * helper text, is announced, and the control turns to the error color.\n   */\n  @property({ type: String }) declare errorMessage: string;\n\n  @state()\n  private hasFocus = false;\n\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  static styles = [fieldMessageStyles, switchStyles];\n\n  static formAssociated = true;\n\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    this.helperText = '';\n    this.errorMessage = '';\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\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    // errorMessage marks the switch invalid for its form until cleared\n    if (\n      changedProperties.has('errorMessage') ||\n      changedProperties.has('disabled')\n    ) {\n      syncCustomValidity(\n        this.internals,\n        this.errorMessage,\n        this.disabled,\n        this.input\n      );\n    }\n  }\n\n  render() {\n    const message = {\n      helperText: this.helperText,\n      errorMessage: this.errorMessage,\n      invalid: this.error,\n    };\n    const { invalid, describedBy } = fieldMessageState(message);\n    return html`\n      <label\n        part=\"switch\"\n        class=\"switch switch--${this.size} ${\n          this.disabled ? 'switch--disabled' : ''\n        } ${invalid ? 'switch--error' : ''} ${\n          this.hasFocus ? '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          aria-invalid=${invalid ? 'true' : nothing}\n          aria-describedby=${describedBy ?? nothing}\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      ${renderFieldMessage(message)}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-switch': BpSwitch;\n  }\n}\n"],"mappings":";;;;;;;;AAEA,IAAaM,IAAe,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC8BlBC,IAAN,cAAuBC,EAAW;;EA0DvB,KAAA,SAAA,CAACJ,GAAoBE,CAAY;;;EAEzB,KAAA,iBAAA;;CAIxB,cAAc;EAaZ,AAZA,MAAM,GAZW,KAAA,WAAA,IAS0B,KAAA,YAAA,MAI3C,KAAK,UAAU,IACf,KAAK,WAAW,IAChB,KAAK,WAAW,IAChB,KAAK,OAAO,IACZ,KAAK,QAAQ,MACb,KAAK,OAAO,MACZ,KAAK,QAAQ,IACb,KAAK,aAAa,IAClB,KAAK,eAAe,IAGhB,OAAO,KAAK,mBAAoB,eAClC,KAAK,YAAY,KAAK,gBAAgB;CAE1C;CAKA,aAAqB,GAAoB;EACvC,IAAMG,IAASC,EAAM;EASrB,AARA,KAAK,UAAUD,EAAO,SAGlB,CAAC,KAAK,YAAY,KAAK,aACzB,KAAK,UAAU,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI,GAI9D,KAAK,cACH,IAAI,YAAY,aAAa;GAC3B,QAAQ,EAAE,SAAS,KAAK,QAAQ;GAChC,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAKA,cAA4B;EAE1B,AADA,KAAK,WAAW,IAChB,KAAK,cACH,IAAI,YAAY,YAAY;GAC1B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAKA,aAA2B;EAEzB,AADA,KAAK,WAAW,IAChB,KAAK,cACH,IAAI,YAAY,WAAW;GACzB,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAKA,iBAAyB,GAAyB;EAChD,IAAI,KAAK,UAAU;GACjB,EAAM,eAAe;GACrB;EACF;CACF;CAMA,MAAM,GAAwB;EAC5B,KAAK,OAAO,MAAME,CAAO;CAC3B;CAKA,OAAO;EACL,KAAK,OAAO,KAAK;CACnB;CAKA,QAAQ,GAAyC;EAM/C,AALIC,EAAkB,IAAI,SAAS,KAAK,KAAK,aAC3C,KAAK,UAAU,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI,IAK5DA,EAAkB,IAAI,cAAc,KACpCA,EAAkB,IAAI,UAAU,MAEhCV,EACE,KAAK,WACL,KAAK,cACL,KAAK,UACL,KAAK,KACP;CAEJ;CAEA,SAAS;EACP,IAAMW,IAAU;GACd,YAAY,KAAK;GACjB,cAAc,KAAK;GACnB,SAAS,KAAK;EAChB,GACM,EAAE,YAAS,mBAAgBR,EAAkBQ,CAAO;EAC1D,OAAO,CAAI;;;gCAGiB,KAAK,KAAK,GAChC,KAAK,WAAW,qBAAqB,GACtC,GAAGC,IAAU,kBAAkB,GAAG,GACjC,KAAK,WAAW,kBAAkB,GACnC;iBACQ,KAAK,iBAAiB;;;;;;qBAMlBC,EAAK,KAAK,OAAO,EAAE;sBAClB,KAAK,SAAS;sBACd,KAAK,SAAS;iBACnBC,EAAU,KAAK,QAAQ,KAAA,CAAS,EAAE;kBACjC,KAAK,MAAM;yBACJ,KAAK,UAAU,SAAS,QAAQ;yBAChCF,IAAU,SAASG,EAAQ;6BACvBC,KAAeD,EAAQ;oBAChC,KAAK,aAAa;mBACnB,KAAK,YAAY;kBAClB,KAAK,WAAW;;;;;;;;;QAS1Bd,EAAmBU,CAAO,EAAE;;CAElC;AACF;AAxNGb,EAAA,CAAAmB,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAZ,EAAA,WAAA,WAAA,KAAA,CAAA,GAMzCP,EAAA,CAAAmB,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAZ,EAAA,WAAA,YAAA,KAAA,CAAA,GAMzCP,EAAA,CAAAmB,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAZ,EAAA,WAAA,YAAA,KAAA,CAAA,GAMzCP,EAAA,CAAAmB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAZ,EAAA,WAAA,QAAA,KAAA,CAAA,GAMzBP,EAAA,CAAAmB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAZ,EAAA,WAAA,SAAA,KAAA,CAAA,GAMzBP,EAAA,CAAAmB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAZ,EAAA,WAAA,QAAA,KAAA,CAAA,GAMxCP,EAAA,CAAAmB,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAZ,EAAA,WAAA,SAAA,KAAA,CAAA,GAIzCP,EAAA,CAAAmB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAZ,EAAA,WAAA,cAAA,KAAA,CAAA,GAMzBP,EAAA,CAAAmB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAZ,EAAA,WAAA,gBAAA,KAAA,CAAA,GAEzBP,EAAA,CAAAoB,EAAM,CAAA,GAAAb,EAAA,WAAA,YAAA,KAAA,CAAA,GAGNP,EAAA,CAAAqB,EAAM,0BAAwB,CAAA,GAAAd,EAAA,WAAA,SAAA,KAAA,CAAA,GAxDhC,IAAAP,EAAA,CAAAsB,EAAc,WAAW,CAAA,GAAAf,CAAA"}