@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/{split-button-DUfjukQY.js.map → split-button-CLjVJe3I.js.map}

@@ -1 +1 @@
-{"version":3,"file":"split-button-DUfjukQY.js","names":[],"sources":["../../src/components/split-button/split-button.css.ts","../../src/components/split-button/split-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const splitButtonStyles = css`\n  :host {\n    display: inline-flex;\n    vertical-align: middle;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  .container {\n    display: inline-flex;\n    align-items: stretch;\n    gap: var(--md-split-button-gap, 2px);\n    position: relative;\n  }\n\n  button {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 40px;\n    border: none;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n    text-decoration: none;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                color 200ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  .action-button {\n    min-width: 48px;\n    padding: 0 16px 0 24px;\n    border-radius: var(--md-sys-shape-corner-full, 9999px)\n                   var(--md-sys-shape-corner-extra-small, 4px)\n                   var(--md-sys-shape-corner-extra-small, 4px)\n                   var(--md-sys-shape-corner-full, 9999px);\n  }\n\n  :host([has-icon]) .action-button {\n    padding-left: 16px;\n  }\n\n  .menu-button {\n    width: 40px;\n    min-width: 40px;\n    padding: 0;\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px)\n                   var(--md-sys-shape-corner-full, 9999px)\n                   var(--md-sys-shape-corner-full, 9999px)\n                   var(--md-sys-shape-corner-extra-small, 4px);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    position: relative;\n    z-index: 1;\n  }\n\n  .icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    z-index: 1;\n  }\n\n  /* --- Filled Variant (Default) --- */\n  :host(:not([variant])) button,\n  :host([variant=\"filled\"]) button {\n    background-color: var(--md-sys-color-primary, #6750a4);\n    color: var(--md-sys-color-on-primary, #ffffff);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"filled\"]:hover) button,\n  :host(:not([variant]):hover) button {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  /* --- Elevated Variant --- */\n  :host([variant=\"elevated\"]) button {\n    background-color: var(--md-sys-color-surface-container-low, #f7f2fa);\n    color: var(--md-sys-color-primary, #6750a4);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  :host([variant=\"elevated\"]:hover) button {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n  }\n\n  /* --- Tonal Variant --- */\n  :host([variant=\"tonal\"]) button {\n    background-color: var(--md-sys-color-secondary-container, #e8def8);\n    color: var(--md-sys-color-on-secondary-container, #1d192b);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"tonal\"]:hover) button {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  /* --- Outlined Variant --- */\n  :host([variant=\"outlined\"]) button {\n    background-color: transparent;\n    color: var(--md-sys-color-primary, #6750a4);\n    border: 1px solid var(--md-sys-color-outline, #79747e);\n  }\n\n  /* --- Disabled State --- */\n  :host([disabled]) button {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  :host([disabled]:not([variant=\"outlined\"])) button {\n    background-color: rgba(29, 27, 32, 0.12);\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][variant=\"outlined\"]) button {\n    border-color: rgba(29, 27, 32, 0.12);\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  /* --- Backdrop --- */\n  .backdrop {\n    display: none;\n    position: fixed;\n    inset: 0;\n    z-index: 998;\n    background-color: transparent;\n  }\n\n  :host([open]) .backdrop {\n    display: block;\n  }\n\n  /* --- Submenu Surface --- */\n  .menu-surface {\n    display: none;\n    position: absolute;\n    z-index: 999;\n    min-width: var(--md-menu-min-width, 140px);\n    max-width: var(--md-menu-max-width, 280px);\n    max-height: var(--md-menu-max-height, calc(100vh - 32px));\n    box-sizing: border-box;\n    padding: 8px 0;\n    margin: 0;\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n    background-color: var(--md-sys-color-surface-container, #f3edf7);\n    color: var(--md-sys-color-on-surface, #1d1b20);\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30));\n    overflow-y: auto;\n    overflow-x: hidden;\n    overscroll-behavior: contain;\n    outline: none;\n    user-select: none;\n    -webkit-overflow-scrolling: touch;\n    top: calc(100% + var(--md-split-button-menu-offset, 4px));\n    right: 0;\n    transform-origin: top right;\n  }\n\n  :host([menu-placement=\"bottom-start\"]) .menu-surface,\n  :host([menu-placement=\"bottom\"]) .menu-surface {\n    left: 0;\n    right: auto;\n    transform-origin: top left;\n  }\n\n  :host([menu-placement=\"top-end\"]) .menu-surface {\n    top: auto;\n    bottom: calc(100% + var(--md-split-button-menu-offset, 4px));\n    right: 0;\n    left: auto;\n    transform-origin: bottom right;\n  }\n\n  :host([menu-placement=\"top-start\"]) .menu-surface,\n  :host([menu-placement=\"top\"]) .menu-surface {\n    top: auto;\n    bottom: calc(100% + var(--md-split-button-menu-offset, 4px));\n    left: 0;\n    right: auto;\n    transform-origin: bottom left;\n  }\n\n  :host([open]) .menu-surface {\n    display: flex;\n    flex-direction: column;\n    animation: md-split-menu-fade-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;\n  }\n\n  @keyframes md-split-menu-fade-in {\n    from {\n      opacity: 0;\n      transform: scale(0.92, 0.8);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1, 1);\n    }\n  }\n\n  .menu-surface::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .menu-surface::-webkit-scrollbar-thumb {\n    background-color: var(--md-sys-color-outline-variant, #cac4d0);\n    border-radius: 3px;\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { splitButtonStyles } from './split-button.css.js';\nimport { MdMenuItem } from '../menu/menu-item.js';\n\nexport type SplitButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outlined';\nexport type SplitButtonMenuPlacement = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';\n\n/**\n * Material Design 3 Split Button component.\n * Pairs a primary action button with a connected trailing dropdown button that opens a submenu of related secondary actions.\n *\n * @element md-split-button\n *\n * @slot - Default slot for `md-menu-item` submenu choices.\n * @slot menu - Slotted submenu items or custom menu container.\n * @slot label - Primary action button text label.\n * @slot icon - Leading icon for the primary action button.\n * @slot trailing-icon - Dropdown indicator icon for the menu button.\n *\n * @fires action - Dispatched when the leading primary action button is clicked.\n * @fires trailing-click - Dispatched when the trailing menu button is clicked.\n * @fires toggle - Dispatched when the trailing menu trigger is toggled with the new open state.\n * @fires open - Dispatched when the submenu opens.\n * @fires close - Dispatched when the submenu closes.\n * @fires select - Dispatched when a submenu item is selected.\n */\n@customElement('md-split-button')\nexport class MdSplitButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, splitButtonStyles];\n\n  @property({ type: String, reflect: true })\n  variant: SplitButtonVariant = 'filled';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = 'arrow_drop_down';\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  @property({ type: String, attribute: 'action-aria-label' })\n  actionAriaLabel = '';\n\n  @property({ type: String, attribute: 'menu-aria-label' })\n  menuAriaLabel = 'More options';\n\n  @property({ type: String, attribute: 'menu-placement', reflect: true })\n  menuPlacement: SplitButtonMenuPlacement = 'bottom-end';\n\n  @property({ type: Boolean, attribute: 'stay-open-on-focusout' })\n  stayOpenOnFocusout = false;\n\n  @property({ type: Boolean, attribute: 'close-on-item-click' })\n  closeOnItemClick = true;\n\n  @query('.action-button')\n  actionButton!: HTMLButtonElement;\n\n  @query('.menu-button')\n  menuButton!: HTMLButtonElement;\n\n  @query('.menu-surface')\n  private menuSurfaceElement?: HTMLElement;\n\n  @queryAssignedElements({ slot: 'icon' })\n  private assignedIcons!: HTMLElement[];\n\n  private handleSlotChange(): void {\n    const hasLeading = Boolean(this.icon || (this.assignedIcons && this.assignedIcons.length > 0));\n    this.toggleAttribute('has-icon', hasLeading);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    window.addEventListener('keydown', this.handleWindowKeyDown);\n    document.addEventListener('pointerdown', this.handleDocumentClick);\n    this.addEventListener('item-click', this.handleItemSelection as EventListener);\n    this.addEventListener('menu-item-click', this.handleItemSelection as EventListener);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('keydown', this.handleWindowKeyDown);\n    document.removeEventListener('pointerdown', this.handleDocumentClick);\n    this.removeEventListener('item-click', this.handleItemSelection as EventListener);\n    this.removeEventListener('menu-item-click', this.handleItemSelection as EventListener);\n  }\n\n  override firstUpdated() {\n    this.handleSlotChange();\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.emitEvent('open');\n        setTimeout(() => {\n          this.focusFirstItem();\n        }, 16);\n      } else {\n        this.emitEvent('close');\n      }\n    }\n  }\n\n  private handleDocumentClick = (event: MouseEvent | PointerEvent): void => {\n    if (!this.open) return;\n    const path = event.composedPath();\n    if (path.includes(this)) return;\n    this.close();\n  };\n\n  private handleWindowKeyDown = (event: KeyboardEvent): void => {\n    if (!this.open) return;\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.close();\n      this.menuButton?.focus();\n    }\n  };\n\n  private handleSurfaceKeyDown = (event: KeyboardEvent): void => {\n    const items = this.getItems(true);\n    if (items.length === 0) return;\n\n    let activeEl: Element | null = null;\n    try {\n      activeEl = document.activeElement;\n    } catch {\n      activeEl = null;\n    }\n\n    const currentIndex = items.findIndex(\n      (item) => item === activeEl || item.contains(activeEl)\n    );\n\n    switch (event.key) {\n      case 'ArrowDown': {\n        event.preventDefault();\n        const nextIndex = currentIndex >= 0 && currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        items[nextIndex]?.focus();\n        break;\n      }\n      case 'ArrowUp': {\n        event.preventDefault();\n        const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        items[prevIndex]?.focus();\n        break;\n      }\n      case 'Home': {\n        event.preventDefault();\n        items[0]?.focus();\n        break;\n      }\n      case 'End': {\n        event.preventDefault();\n        items[items.length - 1]?.focus();\n        break;\n      }\n      case 'Tab': {\n        if (!this.stayOpenOnFocusout) {\n          this.close();\n        }\n        break;\n      }\n    }\n  };\n\n  private handleItemSelection = (event: CustomEvent): void => {\n    const detail = event.detail;\n    this.emitEvent('select', detail);\n\n    if (!detail?.keepOpen && this.closeOnItemClick) {\n      this.close();\n      this.menuButton?.focus();\n    }\n  };\n\n  private handleActionClick = (event: MouseEvent): void => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    if (this.type === 'submit' || this.type === 'reset') {\n      const form = this.closest('form');\n      if (form) {\n        if (this.type === 'submit') {\n          form.requestSubmit();\n        } else {\n          form.reset();\n        }\n      }\n    }\n\n    this.emitEvent('action', {\n      target: this,\n      open: this.open,\n    });\n  };\n\n  private handleMenuClick = (event: MouseEvent): void => {\n    event.stopPropagation();\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    this.open = !this.open;\n\n    this.emitEvent('trailing-click', {\n      target: this,\n      open: this.open,\n    });\n\n    this.emitEvent('toggle', {\n      target: this,\n      open: this.open,\n    });\n  };\n\n  private handleBackdropClick = (event: MouseEvent): void => {\n    event.stopPropagation();\n    this.close();\n  };\n\n  /**\n   * Opens the submenu.\n   */\n  show(): void {\n    if (!this.open) {\n      this.open = true;\n    }\n  }\n\n  /**\n   * Closes the submenu.\n   */\n  close(): void {\n    if (this.open) {\n      this.open = false;\n    }\n  }\n\n  /**\n   * Toggles the submenu open/closed state.\n   */\n  toggle(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Returns all menu items inside the split button submenu.\n   * @param onlyEnabled - If true, filters out disabled items.\n   */\n  getItems(onlyEnabled = false): HTMLElement[] {\n    const items = Array.from(\n      this.querySelectorAll('md-menu-item, [role=\"menuitem\"], button.menu-item')\n    ) as HTMLElement[];\n\n    if (onlyEnabled) {\n      return items.filter((item) => {\n        const isDisabled = item.hasAttribute('disabled') || (item as any).disabled;\n        return !isDisabled;\n      });\n    }\n    return items;\n  }\n\n  /**\n   * Focuses the first non-disabled menu item.\n   */\n  focusFirstItem(): void {\n    const items = this.getItems(true);\n    if (items.length > 0) {\n      items[0]!.focus();\n    } else if (this.menuSurfaceElement) {\n      this.menuSurfaceElement.focus();\n    }\n  }\n\n  /**\n   * Focuses the last non-disabled menu item.\n   */\n  focusLastItem(): void {\n    const items = this.getItems(true);\n    if (items.length > 0) {\n      items[items.length - 1]!.focus();\n    }\n  }\n\n  /**\n   * Focuses the menu item at the specified index.\n   */\n  focusItemAtIndex(index: number): void {\n    const items = this.getItems(true);\n    if (index >= 0 && index < items.length) {\n      items[index]!.focus();\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"backdrop\" @click=${this.handleBackdropClick}></div>\n\n      <div class=\"container\" role=\"group\">\n        <button\n          type=${this.type}\n          class=\"action-button\"\n          ?disabled=${this.disabled}\n          aria-label=${this.actionAriaLabel || nothing}\n          @click=${this.handleActionClick}\n        >\n          <md-ripple ?disabled=${this.disabled}></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <span class=\"content\">\n            <slot name=\"icon\" @slotchange=${this.handleSlotChange}>\n              ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n            </slot>\n            <slot name=\"label\">${this.label}</slot>\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"menu-button\"\n          ?disabled=${this.disabled}\n          aria-haspopup=\"menu\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          aria-label=${this.menuAriaLabel}\n          @click=${this.handleMenuClick}\n        >\n          <md-ripple ?disabled=${this.disabled}></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <span class=\"icon-wrapper\">\n            <slot name=\"trailing-icon\">\n              <md-icon name=${this.trailingIcon || 'arrow_drop_down'}></md-icon>\n            </slot>\n          </span>\n        </button>\n\n        <!-- Submenu Surface -->\n        <div\n          class=\"menu-surface\"\n          role=\"menu\"\n          tabindex=\"-1\"\n          aria-label=${this.menuAriaLabel}\n          aria-hidden=${this.open ? 'false' : 'true'}\n          @keydown=${this.handleSurfaceKeyDown}\n        >\n          <slot name=\"menu\"></slot>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-split-button': MdSplitButton;\n  }\n}\n"],"mappings":";;;;;;AAEA,IAAa,IAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GC8BpB,IAAN,cAA4B,EAAc;AAAA;iBAIjB,KAA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"}
+{"version":3,"file":"split-button-CLjVJe3I.js","names":[],"sources":["../../src/components/split-button/split-button.css.ts","../../src/components/split-button/split-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const splitButtonStyles = css`\n  :host {\n    display: inline-flex;\n    vertical-align: middle;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  .container {\n    display: inline-flex;\n    align-items: stretch;\n    gap: var(--md-split-button-gap, 2px);\n    position: relative;\n  }\n\n  button {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 40px;\n    border: none;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n    text-decoration: none;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                color 200ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  .action-button {\n    min-width: 48px;\n    padding: 0 16px 0 24px;\n    border-radius: var(--md-sys-shape-corner-full, 9999px)\n                   var(--md-sys-shape-corner-extra-small, 4px)\n                   var(--md-sys-shape-corner-extra-small, 4px)\n                   var(--md-sys-shape-corner-full, 9999px);\n  }\n\n  :host([has-icon]) .action-button {\n    padding-left: 16px;\n  }\n\n  .menu-button {\n    width: 40px;\n    min-width: 40px;\n    padding: 0;\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px)\n                   var(--md-sys-shape-corner-full, 9999px)\n                   var(--md-sys-shape-corner-full, 9999px)\n                   var(--md-sys-shape-corner-extra-small, 4px);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    position: relative;\n    z-index: 1;\n  }\n\n  .icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    z-index: 1;\n  }\n\n  /* --- Filled Variant (Default) --- */\n  :host(:not([variant])) button,\n  :host([variant=\"filled\"]) button {\n    background-color: var(--md-sys-color-primary, #6750a4);\n    color: var(--md-sys-color-on-primary, #ffffff);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"filled\"]:hover) button,\n  :host(:not([variant]):hover) button {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  /* --- Elevated Variant --- */\n  :host([variant=\"elevated\"]) button {\n    background-color: var(--md-sys-color-surface-container-low, #f7f2fa);\n    color: var(--md-sys-color-primary, #6750a4);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  :host([variant=\"elevated\"]:hover) button {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n  }\n\n  /* --- Tonal Variant --- */\n  :host([variant=\"tonal\"]) button {\n    background-color: var(--md-sys-color-secondary-container, #e8def8);\n    color: var(--md-sys-color-on-secondary-container, #1d192b);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"tonal\"]:hover) button {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  /* --- Outlined Variant --- */\n  :host([variant=\"outlined\"]) button {\n    background-color: transparent;\n    color: var(--md-sys-color-primary, #6750a4);\n    border: 1px solid var(--md-sys-color-outline, #79747e);\n  }\n\n  /* --- Disabled State --- */\n  :host([disabled]) button {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  :host([disabled]:not([variant=\"outlined\"])) button {\n    background-color: rgba(29, 27, 32, 0.12);\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][variant=\"outlined\"]) button {\n    border-color: rgba(29, 27, 32, 0.12);\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  /* --- Backdrop --- */\n  .backdrop {\n    display: none;\n    position: fixed;\n    inset: 0;\n    z-index: 998;\n    background-color: transparent;\n  }\n\n  :host([open]) .backdrop {\n    display: block;\n  }\n\n  /* --- Submenu Surface --- */\n  .menu-surface {\n    display: none;\n    position: absolute;\n    z-index: 999;\n    min-width: var(--md-menu-min-width, 140px);\n    max-width: var(--md-menu-max-width, 280px);\n    max-height: var(--md-menu-max-height, calc(100vh - 32px));\n    box-sizing: border-box;\n    padding: 8px 0;\n    margin: 0;\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n    background-color: var(--md-sys-color-surface-container, #f3edf7);\n    color: var(--md-sys-color-on-surface, #1d1b20);\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30));\n    overflow-y: auto;\n    overflow-x: hidden;\n    overscroll-behavior: contain;\n    outline: none;\n    user-select: none;\n    -webkit-overflow-scrolling: touch;\n    top: calc(100% + var(--md-split-button-menu-offset, 4px));\n    right: 0;\n    transform-origin: top right;\n  }\n\n  :host([menu-placement=\"bottom-start\"]) .menu-surface,\n  :host([menu-placement=\"bottom\"]) .menu-surface {\n    left: 0;\n    right: auto;\n    transform-origin: top left;\n  }\n\n  :host([menu-placement=\"top-end\"]) .menu-surface {\n    top: auto;\n    bottom: calc(100% + var(--md-split-button-menu-offset, 4px));\n    right: 0;\n    left: auto;\n    transform-origin: bottom right;\n  }\n\n  :host([menu-placement=\"top-start\"]) .menu-surface,\n  :host([menu-placement=\"top\"]) .menu-surface {\n    top: auto;\n    bottom: calc(100% + var(--md-split-button-menu-offset, 4px));\n    left: 0;\n    right: auto;\n    transform-origin: bottom left;\n  }\n\n  :host([open]) .menu-surface {\n    display: flex;\n    flex-direction: column;\n    animation: md-split-menu-fade-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;\n  }\n\n  @keyframes md-split-menu-fade-in {\n    from {\n      opacity: 0;\n      transform: scale(0.92, 0.8);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1, 1);\n    }\n  }\n\n  .menu-surface::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .menu-surface::-webkit-scrollbar-thumb {\n    background-color: var(--md-sys-color-outline-variant, #cac4d0);\n    border-radius: 3px;\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { splitButtonStyles } from './split-button.css.js';\nimport { MdMenuItem } from '../menu/menu-item.js';\n\nexport type SplitButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outlined';\nexport type SplitButtonMenuPlacement = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';\n\n/**\n * Material Design 3 Split Button component.\n * Pairs a primary action button with a connected trailing dropdown button that opens a submenu of related secondary actions.\n *\n * @element md-split-button\n *\n * @slot - Default slot for `md-menu-item` submenu choices.\n * @slot menu - Slotted submenu items or custom menu container.\n * @slot label - Primary action button text label.\n * @slot icon - Leading icon for the primary action button.\n * @slot trailing-icon - Dropdown indicator icon for the menu button.\n *\n * @fires action - Dispatched when the leading primary action button is clicked.\n * @fires trailing-click - Dispatched when the trailing menu button is clicked.\n * @fires toggle - Dispatched when the trailing menu trigger is toggled with the new open state.\n * @fires open - Dispatched when the submenu opens.\n * @fires close - Dispatched when the submenu closes.\n * @fires select - Dispatched when a submenu item is selected.\n */\n@customElement('md-split-button')\nexport class MdSplitButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, splitButtonStyles];\n\n  @property({ type: String, reflect: true })\n  variant: SplitButtonVariant = 'filled';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = 'arrow_drop_down';\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  @property({ type: String, attribute: 'action-aria-label' })\n  actionAriaLabel = '';\n\n  @property({ type: String, attribute: 'menu-aria-label' })\n  menuAriaLabel = 'More options';\n\n  @property({ type: String, attribute: 'menu-placement', reflect: true })\n  menuPlacement: SplitButtonMenuPlacement = 'bottom-end';\n\n  @property({ type: Boolean, attribute: 'stay-open-on-focusout' })\n  stayOpenOnFocusout = false;\n\n  @property({ type: Boolean, attribute: 'close-on-item-click' })\n  closeOnItemClick = true;\n\n  @query('.action-button')\n  actionButton!: HTMLButtonElement;\n\n  @query('.menu-button')\n  menuButton!: HTMLButtonElement;\n\n  @query('.menu-surface')\n  private menuSurfaceElement?: HTMLElement;\n\n  @queryAssignedElements({ slot: 'icon' })\n  private assignedIcons!: HTMLElement[];\n\n  private handleSlotChange(): void {\n    const hasLeading = Boolean(this.icon || (this.assignedIcons && this.assignedIcons.length > 0));\n    this.toggleAttribute('has-icon', hasLeading);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    window.addEventListener('keydown', this.handleWindowKeyDown);\n    document.addEventListener('pointerdown', this.handleDocumentClick);\n    this.addEventListener('item-click', this.handleItemSelection as EventListener);\n    this.addEventListener('menu-item-click', this.handleItemSelection as EventListener);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('keydown', this.handleWindowKeyDown);\n    document.removeEventListener('pointerdown', this.handleDocumentClick);\n    this.removeEventListener('item-click', this.handleItemSelection as EventListener);\n    this.removeEventListener('menu-item-click', this.handleItemSelection as EventListener);\n  }\n\n  override firstUpdated() {\n    this.handleSlotChange();\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.emitEvent('open');\n        setTimeout(() => {\n          this.focusFirstItem();\n        }, 16);\n      } else {\n        this.emitEvent('close');\n      }\n    }\n  }\n\n  private handleDocumentClick = (event: MouseEvent | PointerEvent): void => {\n    if (!this.open) return;\n    const path = event.composedPath();\n    if (path.includes(this)) return;\n    this.close();\n  };\n\n  private handleWindowKeyDown = (event: KeyboardEvent): void => {\n    if (!this.open) return;\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.close();\n      this.menuButton?.focus();\n    }\n  };\n\n  private handleSurfaceKeyDown = (event: KeyboardEvent): void => {\n    const items = this.getItems(true);\n    if (items.length === 0) return;\n\n    let activeEl: Element | null = null;\n    try {\n      activeEl = document.activeElement;\n    } catch {\n      activeEl = null;\n    }\n\n    const currentIndex = items.findIndex(\n      (item) => item === activeEl || item.contains(activeEl)\n    );\n\n    switch (event.key) {\n      case 'ArrowDown': {\n        event.preventDefault();\n        const nextIndex = currentIndex >= 0 && currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        items[nextIndex]?.focus();\n        break;\n      }\n      case 'ArrowUp': {\n        event.preventDefault();\n        const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        items[prevIndex]?.focus();\n        break;\n      }\n      case 'Home': {\n        event.preventDefault();\n        items[0]?.focus();\n        break;\n      }\n      case 'End': {\n        event.preventDefault();\n        items[items.length - 1]?.focus();\n        break;\n      }\n      case 'Tab': {\n        if (!this.stayOpenOnFocusout) {\n          this.close();\n        }\n        break;\n      }\n    }\n  };\n\n  private handleItemSelection = (event: CustomEvent): void => {\n    const detail = event.detail;\n    this.emitEvent('select', detail);\n\n    if (!detail?.keepOpen && this.closeOnItemClick) {\n      this.close();\n      this.menuButton?.focus();\n    }\n  };\n\n  private handleActionClick = (event: MouseEvent): void => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    if (this.type === 'submit' || this.type === 'reset') {\n      const form = this.closest('form');\n      if (form) {\n        if (this.type === 'submit') {\n          form.requestSubmit();\n        } else {\n          form.reset();\n        }\n      }\n    }\n\n    this.emitEvent('action', {\n      target: this,\n      open: this.open,\n    });\n  };\n\n  private handleMenuClick = (event: MouseEvent): void => {\n    event.stopPropagation();\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    this.open = !this.open;\n\n    this.emitEvent('trailing-click', {\n      target: this,\n      open: this.open,\n    });\n\n    this.emitEvent('toggle', {\n      target: this,\n      open: this.open,\n    });\n  };\n\n  private handleBackdropClick = (event: MouseEvent): void => {\n    event.stopPropagation();\n    this.close();\n  };\n\n  /**\n   * Opens the submenu.\n   */\n  show(): void {\n    if (!this.open) {\n      this.open = true;\n    }\n  }\n\n  /**\n   * Closes the submenu.\n   */\n  close(): void {\n    if (this.open) {\n      this.open = false;\n    }\n  }\n\n  /**\n   * Toggles the submenu open/closed state.\n   */\n  toggle(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Returns all menu items inside the split button submenu.\n   * @param onlyEnabled - If true, filters out disabled items.\n   */\n  getItems(onlyEnabled = false): HTMLElement[] {\n    const items = Array.from(\n      this.querySelectorAll('md-menu-item, [role=\"menuitem\"], button.menu-item')\n    ) as HTMLElement[];\n\n    if (onlyEnabled) {\n      return items.filter((item) => {\n        const isDisabled = item.hasAttribute('disabled') || (item as any).disabled;\n        return !isDisabled;\n      });\n    }\n    return items;\n  }\n\n  /**\n   * Focuses the first non-disabled menu item.\n   */\n  focusFirstItem(): void {\n    const items = this.getItems(true);\n    if (items.length > 0) {\n      items[0]!.focus();\n    } else if (this.menuSurfaceElement) {\n      this.menuSurfaceElement.focus();\n    }\n  }\n\n  /**\n   * Focuses the last non-disabled menu item.\n   */\n  focusLastItem(): void {\n    const items = this.getItems(true);\n    if (items.length > 0) {\n      items[items.length - 1]!.focus();\n    }\n  }\n\n  /**\n   * Focuses the menu item at the specified index.\n   */\n  focusItemAtIndex(index: number): void {\n    const items = this.getItems(true);\n    if (index >= 0 && index < items.length) {\n      items[index]!.focus();\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"backdrop\" @click=${this.handleBackdropClick}></div>\n\n      <div class=\"container\" role=\"group\">\n        <button\n          type=${this.type}\n          class=\"action-button\"\n          ?disabled=${this.disabled}\n          aria-label=${this.actionAriaLabel || nothing}\n          @click=${this.handleActionClick}\n        >\n          <md-ripple ?disabled=${this.disabled}></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <span class=\"content\">\n            <slot name=\"icon\" @slotchange=${this.handleSlotChange}>\n              ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n            </slot>\n            <slot name=\"label\">${this.label}</slot>\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"menu-button\"\n          ?disabled=${this.disabled}\n          aria-haspopup=\"menu\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          aria-label=${this.menuAriaLabel}\n          @click=${this.handleMenuClick}\n        >\n          <md-ripple ?disabled=${this.disabled}></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <span class=\"icon-wrapper\">\n            <slot name=\"trailing-icon\">\n              <md-icon name=${this.trailingIcon || 'arrow_drop_down'}></md-icon>\n            </slot>\n          </span>\n        </button>\n\n        <!-- Submenu Surface -->\n        <div\n          class=\"menu-surface\"\n          role=\"menu\"\n          tabindex=\"-1\"\n          aria-label=${this.menuAriaLabel}\n          aria-hidden=${this.open ? 'false' : 'true'}\n          @keydown=${this.handleSurfaceKeyDown}\n        >\n          <slot name=\"menu\"></slot>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-split-button': MdSplitButton;\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/{switch-DdukrvXb.js → switch-mtu6AVEh.js}

@@ -1,11 +1,12 @@
-import { t as i } from "./decorate-DXuynaiA.js";
-import { t as c } from "./form-associated-Cty_ZaS9.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import "./icon-DrNqcNEL.js";
-import { css as l, html as o } from "lit";
-import { customElement as n, property as r } from "lit/decorators.js";
-var a = l`
+import { t as e } from "./decorate-DknOJ8FJ.js";
+import { t } from "./form-associated-Do5uXckv.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
+import "./icon-FvKeXi61.js";
+import { css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/components/switch/switch.css.ts
+var o = n`
   :host {
     display: inline-flex;
     align-items: center;
@@ -126,65 +127,61 @@ var a = l`
     opacity: 1;
     color: var(--md-sys-color-surface-container-highest, #E6E0E9);
   }
-`, s = class extends c {
-  constructor(...e) {
-    super(...e), this.selected = !1, this.icons = !1, this.value = "on", this.handleClick = (t) => {
-      this.disabled || (t.preventDefault(), this.toggle());
-    }, this.handleKeyDown = (t) => {
-      this.disabled || (t.key === " " || t.key === "Enter") && (t.preventDefault(), this.toggle());
-    };
-  }
-  static {
-    this.styles = [c.styles, a];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.tabIndex = this.disabled ? -1 : 0, this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown), this.updateFormValue();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
-  }
-  updated(e) {
-    super.updated(e), (e.has("selected") || e.has("value")) && this.updateFormValue();
-  }
-  formResetCallback() {
-    this.selected = !1, this.updateFormValue();
-  }
-  updateFormValue() {
-    this.setFormValue(this.selected ? this.value : null), this.required && !this.selected ? this.setValidity({ valueMissing: !0 }, "Please toggle this switch") : this.setValidity({});
-  }
-  toggle() {
-    this.selected = !this.selected, this.updateFormValue(), this.emitEvent("change", { selected: this.selected }), this.emitEvent("input", { selected: this.selected });
-  }
-  render() {
-    return o`
+`, s = class extends t {
+	constructor(...e) {
+		super(...e), this.selected = !1, this.icons = !1, this.value = "on", this.handleClick = (e) => {
+			this.disabled || (e.preventDefault(), this.toggle());
+		}, this.handleKeyDown = (e) => {
+			this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.toggle());
+		};
+	}
+	static {
+		this.styles = [t.styles, o];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.tabIndex = this.disabled ? -1 : 0, this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown), this.updateFormValue();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	updated(e) {
+		super.updated(e), (e.has("selected") || e.has("value")) && this.updateFormValue();
+	}
+	formResetCallback() {
+		this.selected = !1, this.updateFormValue();
+	}
+	updateFormValue() {
+		this.setFormValue(this.selected ? this.value : null), this.required && !this.selected ? this.setValidity({ valueMissing: !0 }, "Please toggle this switch") : this.setValidity({});
+	}
+	toggle() {
+		this.selected = !this.selected, this.updateFormValue(), this.emitEvent("change", { selected: this.selected }), this.emitEvent("input", { selected: this.selected });
+	}
+	render() {
+		return r`
       <div class="switch">
         <div class="thumb-container">
           <md-ripple ?disabled=${this.disabled} unbounded></md-ripple>
           <md-focus-ring></md-focus-ring>
           <div class="thumb">
-            ${this.icons ? o`
+            ${this.icons ? r`
                   <md-icon class="icon check" size="16">check</md-icon>
                   <md-icon class="icon cross" size="16">close</md-icon>
-                ` : o`<slot name="icon"></slot>`}
+                ` : r`<slot name="icon"></slot>`}
           </div>
         </div>
       </div>
       <slot></slot>
     `;
-  }
+	}
 };
-i([r({
-  type: Boolean,
-  reflect: !0
-})], s.prototype, "selected", void 0);
-i([r({
-  type: Boolean,
-  reflect: !0
-})], s.prototype, "icons", void 0);
-i([r({ type: String })], s.prototype, "value", void 0);
-s = i([n("md-switch")], s);
-export {
-  s as t
-};
-
-//# sourceMappingURL=switch-DdukrvXb.js.map
+e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "selected", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "icons", void 0), e([a({ type: String })], s.prototype, "value", void 0), s = e([i("md-switch")], s);
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=switch-mtu6AVEh.js.map

package/dist/chunks/{switch-DdukrvXb.js.map → switch-mtu6AVEh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"switch-DdukrvXb.js","names":[],"sources":["../../src/components/switch/switch.css.ts","../../src/components/switch/switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const switchStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n    gap: 12px;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-body-large-size, 16px);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n    opacity: 0.38;\n    pointer-events: none;\n  }\n\n  .switch {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    width: 52px;\n    height: 32px;\n    box-sizing: border-box;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    border: 2px solid var(--md-sys-color-outline, #79747E);\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                border-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([selected]) .switch {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    border-color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host([disabled]) .switch {\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    border-color: var(--md-sys-color-outline, #79747E);\n  }\n\n  :host([disabled][selected]) .switch {\n    background-color: var(--md-sys-color-on-surface, #1D1B20);\n    border-color: transparent;\n  }\n\n  .thumb-container {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([selected]) .thumb-container {\n    transform: translateX(20px);\n  }\n\n  .thumb {\n    position: relative;\n    width: 16px;\n    height: 16px;\n    flex-shrink: 0;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-outline, #79747E);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: width 200ms cubic-bezier(0.2, 0, 0, 1),\n                height 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([icons]) .thumb,\n  :host([selected]) .thumb {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([selected]) .thumb {\n    background-color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n\n  :host([disabled]) .thumb {\n    background-color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled][selected]) .thumb {\n    background-color: var(--md-sys-color-surface, #FEF7FF);\n  }\n\n  .icon {\n    position: absolute;\n    inset: 0;\n    margin: auto;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    color: var(--md-sys-color-on-primary-container, #21005D);\n    opacity: 0;\n    transition: opacity 150ms ease;\n    pointer-events: none;\n  }\n\n  :host([selected]) .icon.check {\n    opacity: 1;\n  }\n\n  :host([icons]:not([selected])) .icon.cross {\n    opacity: 1;\n    color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { switchStyles } from './switch.css.js';\n\n@customElement('md-switch')\nexport class MdSwitch extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, switchStyles];\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  icons = false;\n\n  @property({ type: String })\n  value = 'on';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.tabIndex = this.disabled ? -1 : 0;\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n    this.updateFormValue();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('selected') || changedProperties.has('value')) {\n      this.updateFormValue();\n    }\n  }\n\n  override formResetCallback() {\n    this.selected = false;\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    this.setFormValue(this.selected ? this.value : null);\n    if (this.required && !this.selected) {\n      this.setValidity({ valueMissing: true }, 'Please toggle this switch');\n    } else {\n      this.setValidity({});\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.toggle();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  private toggle() {\n    this.selected = !this.selected;\n    this.updateFormValue();\n    this.emitEvent('change', { selected: this.selected });\n    this.emitEvent('input', { selected: this.selected });\n  }\n\n  override render() {\n    return html`\n      <div class=\"switch\">\n        <div class=\"thumb-container\">\n          <md-ripple ?disabled=${this.disabled} unbounded></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <div class=\"thumb\">\n            ${this.icons\n              ? html`\n                  <md-icon class=\"icon check\" size=\"16\">check</md-icon>\n                  <md-icon class=\"icon cross\" size=\"16\">close</md-icon>\n                `\n              : html`<slot name=\"icon\"></slot>`}\n          </div>\n        </div>\n      </div>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-switch': MdSwitch;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"switch-mtu6AVEh.js","names":[],"sources":["../../src/components/switch/switch.css.ts","../../src/components/switch/switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const switchStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n    gap: 12px;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-body-large-size, 16px);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n    opacity: 0.38;\n    pointer-events: none;\n  }\n\n  .switch {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    width: 52px;\n    height: 32px;\n    box-sizing: border-box;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    border: 2px solid var(--md-sys-color-outline, #79747E);\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                border-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([selected]) .switch {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    border-color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host([disabled]) .switch {\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    border-color: var(--md-sys-color-outline, #79747E);\n  }\n\n  :host([disabled][selected]) .switch {\n    background-color: var(--md-sys-color-on-surface, #1D1B20);\n    border-color: transparent;\n  }\n\n  .thumb-container {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([selected]) .thumb-container {\n    transform: translateX(20px);\n  }\n\n  .thumb {\n    position: relative;\n    width: 16px;\n    height: 16px;\n    flex-shrink: 0;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-outline, #79747E);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: width 200ms cubic-bezier(0.2, 0, 0, 1),\n                height 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([icons]) .thumb,\n  :host([selected]) .thumb {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([selected]) .thumb {\n    background-color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n\n  :host([disabled]) .thumb {\n    background-color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled][selected]) .thumb {\n    background-color: var(--md-sys-color-surface, #FEF7FF);\n  }\n\n  .icon {\n    position: absolute;\n    inset: 0;\n    margin: auto;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    color: var(--md-sys-color-on-primary-container, #21005D);\n    opacity: 0;\n    transition: opacity 150ms ease;\n    pointer-events: none;\n  }\n\n  :host([selected]) .icon.check {\n    opacity: 1;\n  }\n\n  :host([icons]:not([selected])) .icon.cross {\n    opacity: 1;\n    color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { switchStyles } from './switch.css.js';\n\n@customElement('md-switch')\nexport class MdSwitch extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, switchStyles];\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  icons = false;\n\n  @property({ type: String })\n  value = 'on';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.tabIndex = this.disabled ? -1 : 0;\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n    this.updateFormValue();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('selected') || changedProperties.has('value')) {\n      this.updateFormValue();\n    }\n  }\n\n  override formResetCallback() {\n    this.selected = false;\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    this.setFormValue(this.selected ? this.value : null);\n    if (this.required && !this.selected) {\n      this.setValidity({ valueMissing: true }, 'Please toggle this switch');\n    } else {\n      this.setValidity({});\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.toggle();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  private toggle() {\n    this.selected = !this.selected;\n    this.updateFormValue();\n    this.emitEvent('change', { selected: this.selected });\n    this.emitEvent('input', { selected: this.selected });\n  }\n\n  override render() {\n    return html`\n      <div class=\"switch\">\n        <div class=\"thumb-container\">\n          <md-ripple ?disabled=${this.disabled} unbounded></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <div class=\"thumb\">\n            ${this.icons\n              ? html`\n                  <md-icon class=\"icon check\" size=\"16\">check</md-icon>\n                  <md-icon class=\"icon cross\" size=\"16\">close</md-icon>\n                `\n              : html`<slot name=\"icon\"></slot>`}\n          </div>\n        </div>\n      </div>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-switch': MdSwitch;\n  }\n}\n"],"mappings":";;;;;;;;AAEA,IAAa,IAAe,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCQlB,IAAN,cAAuB,EAAwB;;EAqD3B,aAjDd,KAAA,WAAA,IAGH,KAAA,QAAA,IAGA,KAAA,QAAA,MAqCe,KAAA,eAAA,MAAsB;GACvC,KAAK,aACT,EAAM,eAAe,GACrB,KAAK,OAAO;EACd,GAEyB,KAAA,iBAAA,MAAyB;GAC5C,KAAK,aACL,EAAM,QAAQ,OAAO,EAAM,QAAQ,aACrC,EAAM,eAAe,GACrB,KAAK,OAAO;EAEhB;;;EA1DyB,KAAA,SAAA,CAAC,EAAwB,QAAQ,CAAY;;CAWtE,oBAA6B;EAK3B,AAJA,MAAM,kBAAkB,GACxB,KAAK,WAAW,KAAK,WAAW,KAAK,GACrC,KAAK,iBAAiB,SAAS,KAAK,WAAW,GAC/C,KAAK,iBAAiB,WAAW,KAAK,aAAa,GACnD,KAAK,gBAAgB;CACvB;CAEA,uBAAgC;EAG9B,AAFA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAK,WAAW,GAClD,KAAK,oBAAoB,WAAW,KAAK,aAAa;CACxD;CAEA,QAAiB,GAAyC;EAExD,AADA,MAAM,QAAQ,CAAiB,IAC3B,EAAkB,IAAI,UAAU,KAAK,EAAkB,IAAI,OAAO,MACpE,KAAK,gBAAgB;CAEzB;CAEA,oBAA6B;EAE3B,AADA,KAAK,WAAW,IAChB,KAAK,gBAAgB;CACvB;CAEA,kBAA0B;EAExB,AADA,KAAK,aAAa,KAAK,WAAW,KAAK,QAAQ,IAAI,GAC/C,KAAK,YAAY,CAAC,KAAK,WACzB,KAAK,YAAY,EAAE,cAAc,GAAK,GAAG,2BAA2B,IAEpE,KAAK,YAAY,CAAC,CAAC;CAEvB;CAgBA,SAAiB;EAIf,AAHA,KAAK,WAAW,CAAC,KAAK,UACtB,KAAK,gBAAgB,GACrB,KAAK,UAAU,UAAU,EAAE,UAAU,KAAK,SAAS,CAAC,GACpD,KAAK,UAAU,SAAS,EAAE,UAAU,KAAK,SAAS,CAAC;CACrD;CAEA,SAAkB;EAChB,OAAO,CAAI;;;iCAGkB,KAAK,SAAS;;;cAGjC,KAAK,QACH,CAAI;;;oBAIJ,CAAI,4BAA4B;;;;;;CAM9C;AACF;AApFG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAV3B,IAAA,EAAA,CAAA,EAAc,WAAW,CAAA,GAAA,CAAA"}