@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/{bottom-sheet-q79BBYAj.js.map → bottom-sheet-BGgbUmKd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bottom-sheet-q79BBYAj.js","names":[],"sources":["../../src/components/bottom-sheet/bottom-sheet.css.ts","../../src/components/bottom-sheet/bottom-sheet.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const bottomSheetStyles = css`\n  :host {\n    display: contents;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n  }\n\n  /* Scrim for modal variant */\n  .scrim {\n    position: fixed;\n    inset: 0;\n    background-color: var(--md-bottom-sheet-scrim-color, var(--md-sys-color-scrim, rgba(0, 0, 0, 0.32)));\n    backdrop-filter: blur(1px);\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n    z-index: 999;\n  }\n\n  :host([open][modal]) .scrim,\n  :host([open][type=\"modal\"]) .scrim {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  /* Bottom Sheet Container */\n  .sheet {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--md-bottom-sheet-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));\n    color: var(--md-bottom-sheet-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n    overflow: hidden;\n    z-index: 1000;\n    border-top-left-radius: var(--md-bottom-sheet-shape, 28px);\n    border-top-right-radius: var(--md-bottom-sheet-shape, 28px);\n  }\n\n  /* Modal Mode (Default overlay or when type=\"modal\" or [modal]) */\n  :host([type=\"modal\"]) .sheet,\n  :host([modal]) .sheet {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    max-width: var(--md-bottom-sheet-max-width, 640px);\n    margin: 0 auto;\n    max-height: var(--md-bottom-sheet-max-height, calc(100dvh - 56px));\n    box-shadow: var(--md-bottom-sheet-elevation, var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15)));\n    transform: translateY(100%);\n    visibility: hidden;\n    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 300ms cubic-bezier(0.2, 0, 0, 1);\n    will-change: transform;\n  }\n\n  :host([open][type=\"modal\"]) .sheet,\n  :host([open][modal]) .sheet {\n    transform: translateY(0);\n    visibility: visible;\n  }\n\n  .sheet.is-dragging {\n    transition: none !important;\n    user-select: none;\n  }\n\n  /* Fullscreen Mode */\n  :host([fullscreen][type=\"modal\"]) .sheet,\n  :host([fullscreen][modal]) .sheet {\n    max-width: 100%;\n    max-height: 100dvh;\n    border-radius: 0;\n  }\n\n  /* Standard Mode (In-flow / docked panel) */\n  :host(:not([type=\"modal\"]):not([modal])) {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    transition: max-height 300ms cubic-bezier(0.2, 0, 0, 1),\n                opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host(:not([type=\"modal\"]):not([modal]):not([open])) {\n    max-height: 0 !important;\n    opacity: 0;\n    pointer-events: none;\n    visibility: hidden;\n  }\n\n  :host(:not([type=\"modal\"]):not([modal])[open]) {\n    max-height: var(--md-bottom-sheet-standard-max-height, 600px);\n    opacity: 1;\n    visibility: visible;\n  }\n\n  :host(:not([type=\"modal\"]):not([modal])) .scrim {\n    display: none;\n  }\n\n  :host(:not([type=\"modal\"]):not([modal])) .sheet {\n    position: relative;\n    width: 100%;\n    max-width: 100%;\n    transform: none;\n    visibility: visible;\n    box-shadow: none;\n    border-top: 1px solid var(--md-bottom-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));\n    background-color: var(--md-bottom-sheet-container-color, var(--md-sys-color-surface, #FEF7FF));\n  }\n\n  /* Drag Handle Section */\n  .drag-handle-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0 8px 0;\n    width: 100%;\n    cursor: grab;\n    touch-action: none;\n    flex-shrink: 0;\n    user-select: none;\n  }\n\n  .drag-handle-container:active,\n  .sheet.is-dragging .drag-handle-container {\n    cursor: grabbing;\n  }\n\n  .drag-handle {\n    width: 32px;\n    height: 4px;\n    border-radius: 2px;\n    background-color: var(--md-bottom-sheet-drag-handle-color, var(--md-sys-color-outline, #79747E));\n    transition: background-color 150ms ease;\n  }\n\n  :host([hide-drag-handle]) .drag-handle-container {\n    display: none;\n  }\n\n  /* Header Section */\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px 12px 24px;\n    min-height: 48px;\n    box-sizing: border-box;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n\n  .header-content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    gap: 2px;\n  }\n\n  .headline {\n    margin: 0;\n    font-size: var(--md-sys-typescale-title-large-size, 20px);\n    line-height: 28px;\n    font-weight: 500;\n    color: var(--md-bottom-sheet-headline-color, var(--md-sys-color-on-surface, #1D1B20));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .subhead {\n    margin: 0;\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n    color: var(--md-bottom-sheet-subhead-color, var(--md-sys-color-on-surface-variant, #49454F));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .header-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n  }\n\n  .close-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* Divider */\n  .divider {\n    height: 1px;\n    background-color: var(--md-bottom-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  /* Content Section */\n  .content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 16px 24px;\n    box-sizing: border-box;\n    gap: 16px;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .content::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .content::-webkit-scrollbar-thumb {\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: 4px;\n  }\n\n  /* Footer Section */\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 16px 24px;\n    box-sizing: border-box;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../icon/icon.js';\nimport '../icon-button/icon-button.js';\nimport { bottomSheetStyles } from './bottom-sheet.css.js';\n\nexport type BottomSheetType = 'standard' | 'modal';\n\n/**\n * Material Design 3 Bottom Sheet component.\n *\n * Bottom sheets display supplementary content anchored to the bottom of the screen,\n * supporting standard (in-flow / docked panel) and modal (overlay with scrim) modes,\n * drag handle gestures, touch swipe-to-dismiss, and customizable headers and footers.\n *\n * @slot - Default slot for main sheet body content.\n * @slot drag-handle - Custom drag handle element.\n * @slot header - Full header area replacement.\n * @slot headline - Custom title / headline content.\n * @slot subhead - Custom subtitle / subhead content.\n * @slot header-actions - Additional actions next to the close button in the header.\n * @slot close-button - Custom close button element.\n * @slot footer - Bottom actions / footer area.\n * @slot actions - Action buttons container inside the default footer.\n */\n@customElement('md-bottom-sheet')\nexport class MdBottomSheet extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, bottomSheetStyles];\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String, reflect: true })\n  type: BottomSheetType = 'standard';\n\n  @property({ type: Boolean, reflect: true })\n  modal = false;\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String })\n  subhead = '';\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-drag-handle' })\n  hideDragHandle = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n  hideCloseButton = false;\n\n  @property({ type: Boolean, reflect: true })\n  divider = false;\n\n  @property({ type: Boolean, reflect: true })\n  fullscreen = false;\n\n  @query('.sheet')\n  private sheetElement?: HTMLElement;\n\n  @state()\n  private isDragging = false;\n\n  private dragStartY = 0;\n  private currentDragY = 0;\n  private activePointerId: number | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('keydown', this.handleKeyDown);\n    this.cleanupDragListeners();\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.emitEvent('open');\n      } else {\n        this.emitEvent('close');\n      }\n    }\n  }\n\n  /**\n   * Returns whether the bottom sheet is currently functioning in modal mode.\n   */\n  isModalMode(): boolean {\n    return this.modal || this.type === 'modal';\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.open && this.isModalMode()) {\n      this.close();\n      this.emitEvent('cancel');\n    }\n  };\n\n  private handleScrimClick = () => {\n    this.close();\n    this.emitEvent('scrim-click');\n  };\n\n  private handleCloseClick = () => {\n    this.close();\n    this.emitEvent('close-click');\n  };\n\n  private handleDragPointerDown = (event: PointerEvent) => {\n    if (event.button !== 0) return; // Only main button\n    const target = event.target as HTMLElement;\n    if (target.closest('button, md-icon-button, md-button, a, input, [role=\"button\"]')) {\n      return;\n    }\n\n    this.isDragging = true;\n    this.dragStartY = event.clientY;\n    this.currentDragY = 0;\n    this.activePointerId = event.pointerId;\n\n    if (this.sheetElement) {\n      this.sheetElement.classList.add('is-dragging');\n    }\n\n    window.addEventListener('pointermove', this.handlePointerMove);\n    window.addEventListener('pointerup', this.handlePointerUp);\n    window.addEventListener('pointercancel', this.handlePointerUp);\n\n    this.emitEvent('drag-start', { startY: this.dragStartY });\n  };\n\n  private handlePointerMove = (event: PointerEvent) => {\n    if (!this.isDragging) return;\n\n    const deltaY = event.clientY - this.dragStartY;\n    // Allow dragging downwards; apply resistance if dragged upwards\n    this.currentDragY = deltaY > 0 ? deltaY : deltaY * 0.15;\n\n    if (this.sheetElement) {\n      const translateY = Math.max(0, this.currentDragY);\n      this.sheetElement.style.transform = `translateY(${translateY}px)`;\n    }\n\n    this.emitEvent('drag', { deltaY: this.currentDragY });\n  };\n\n  private handlePointerUp = (_event?: PointerEvent) => {\n    if (!this.isDragging) return;\n\n    this.isDragging = false;\n    this.cleanupDragListeners();\n\n    if (this.sheetElement) {\n      this.sheetElement.classList.remove('is-dragging');\n      this.sheetElement.style.transform = '';\n    }\n\n    const sheetHeight = this.sheetElement?.offsetHeight || 300;\n    const threshold = Math.min(100, sheetHeight * 0.25);\n\n    if (this.currentDragY > threshold) {\n      this.close();\n      this.emitEvent('drag-dismiss');\n    }\n\n    this.emitEvent('drag-end', { deltaY: this.currentDragY });\n    this.currentDragY = 0;\n    this.activePointerId = null;\n  };\n\n  private cleanupDragListeners() {\n    window.removeEventListener('pointermove', this.handlePointerMove);\n    window.removeEventListener('pointerup', this.handlePointerUp);\n    window.removeEventListener('pointercancel', this.handlePointerUp);\n  }\n\n  /**\n   * Opens the bottom sheet.\n   */\n  show() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the bottom sheet.\n   */\n  close() {\n    this.open = false;\n  }\n\n  /**\n   * Toggles the open/closed state of the bottom sheet.\n   */\n  toggle() {\n    this.open = !this.open;\n  }\n\n  override render() {\n    const isModal = this.isModalMode();\n\n    const dragHandleContent = !this.hideDragHandle\n      ? html`\n          <div\n            class=\"drag-handle-container\"\n            @pointerdown=${this.handleDragPointerDown}\n            aria-hidden=\"true\"\n          >\n            <slot name=\"drag-handle\">\n              <div class=\"drag-handle\"></div>\n            </slot>\n          </div>\n        `\n      : nothing;\n\n    const headlineContent = this.headline\n      ? html`<h2 class=\"headline\">${this.headline}</h2>`\n      : nothing;\n\n    const subheadContent = this.subhead\n      ? html`<p class=\"subhead\">${this.subhead}</p>`\n      : nothing;\n\n    const closeBtnContent = !this.hideCloseButton\n      ? html`\n          <slot name=\"close-button\">\n            <md-icon-button\n              class=\"close-button\"\n              icon=\"close\"\n              aria-label=\"Close bottom sheet\"\n              @click=${this.handleCloseClick}\n            ></md-icon-button>\n          </slot>\n        `\n      : nothing;\n\n    return html`\n      <div class=\"scrim\" @click=${this.handleScrimClick}></div>\n\n      <aside\n        class=\"sheet\"\n        role=${isModal ? 'dialog' : 'region'}\n        aria-modal=${isModal ? 'true' : nothing}\n        aria-hidden=${this.open ? 'false' : 'true'}\n        aria-label=${this.headline || 'Bottom sheet'}\n      >\n        ${dragHandleContent}\n\n        <slot name=\"header\">\n          <div class=\"header\" @pointerdown=${this.handleDragPointerDown}>\n            <div class=\"header-content\">\n              <slot name=\"headline\">\n                ${headlineContent}\n              </slot>\n              <slot name=\"subhead\">\n                ${subheadContent}\n              </slot>\n            </div>\n\n            <div class=\"header-actions\">\n              <slot name=\"header-actions\"></slot>\n              ${closeBtnContent}\n            </div>\n          </div>\n        </slot>\n\n        ${this.divider ? html`<div class=\"divider\"></div>` : nothing}\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"footer\">\n          <div class=\"footer\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </slot>\n      </aside>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-bottom-sheet': MdBottomSheet;\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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"}
+{"version":3,"file":"bottom-sheet-BGgbUmKd.js","names":[],"sources":["../../src/components/bottom-sheet/bottom-sheet.css.ts","../../src/components/bottom-sheet/bottom-sheet.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const bottomSheetStyles = css`\n  :host {\n    display: contents;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n  }\n\n  /* Scrim for modal variant */\n  .scrim {\n    position: fixed;\n    inset: 0;\n    background-color: var(--md-bottom-sheet-scrim-color, var(--md-sys-color-scrim, rgba(0, 0, 0, 0.32)));\n    backdrop-filter: blur(1px);\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n    z-index: 999;\n  }\n\n  :host([open][modal]) .scrim,\n  :host([open][type=\"modal\"]) .scrim {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  /* Bottom Sheet Container */\n  .sheet {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--md-bottom-sheet-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));\n    color: var(--md-bottom-sheet-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n    overflow: hidden;\n    z-index: 1000;\n    border-top-left-radius: var(--md-bottom-sheet-shape, 28px);\n    border-top-right-radius: var(--md-bottom-sheet-shape, 28px);\n  }\n\n  /* Modal Mode (Default overlay or when type=\"modal\" or [modal]) */\n  :host([type=\"modal\"]) .sheet,\n  :host([modal]) .sheet {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    max-width: var(--md-bottom-sheet-max-width, 640px);\n    margin: 0 auto;\n    max-height: var(--md-bottom-sheet-max-height, calc(100dvh - 56px));\n    box-shadow: var(--md-bottom-sheet-elevation, var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15)));\n    transform: translateY(100%);\n    visibility: hidden;\n    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 300ms cubic-bezier(0.2, 0, 0, 1);\n    will-change: transform;\n  }\n\n  :host([open][type=\"modal\"]) .sheet,\n  :host([open][modal]) .sheet {\n    transform: translateY(0);\n    visibility: visible;\n  }\n\n  .sheet.is-dragging {\n    transition: none !important;\n    user-select: none;\n  }\n\n  /* Fullscreen Mode */\n  :host([fullscreen][type=\"modal\"]) .sheet,\n  :host([fullscreen][modal]) .sheet {\n    max-width: 100%;\n    max-height: 100dvh;\n    border-radius: 0;\n  }\n\n  /* Standard Mode (In-flow / docked panel) */\n  :host(:not([type=\"modal\"]):not([modal])) {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    transition: max-height 300ms cubic-bezier(0.2, 0, 0, 1),\n                opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host(:not([type=\"modal\"]):not([modal]):not([open])) {\n    max-height: 0 !important;\n    opacity: 0;\n    pointer-events: none;\n    visibility: hidden;\n  }\n\n  :host(:not([type=\"modal\"]):not([modal])[open]) {\n    max-height: var(--md-bottom-sheet-standard-max-height, 600px);\n    opacity: 1;\n    visibility: visible;\n  }\n\n  :host(:not([type=\"modal\"]):not([modal])) .scrim {\n    display: none;\n  }\n\n  :host(:not([type=\"modal\"]):not([modal])) .sheet {\n    position: relative;\n    width: 100%;\n    max-width: 100%;\n    transform: none;\n    visibility: visible;\n    box-shadow: none;\n    border-top: 1px solid var(--md-bottom-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));\n    background-color: var(--md-bottom-sheet-container-color, var(--md-sys-color-surface, #FEF7FF));\n  }\n\n  /* Drag Handle Section */\n  .drag-handle-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0 8px 0;\n    width: 100%;\n    cursor: grab;\n    touch-action: none;\n    flex-shrink: 0;\n    user-select: none;\n  }\n\n  .drag-handle-container:active,\n  .sheet.is-dragging .drag-handle-container {\n    cursor: grabbing;\n  }\n\n  .drag-handle {\n    width: 32px;\n    height: 4px;\n    border-radius: 2px;\n    background-color: var(--md-bottom-sheet-drag-handle-color, var(--md-sys-color-outline, #79747E));\n    transition: background-color 150ms ease;\n  }\n\n  :host([hide-drag-handle]) .drag-handle-container {\n    display: none;\n  }\n\n  /* Header Section */\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px 12px 24px;\n    min-height: 48px;\n    box-sizing: border-box;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n\n  .header-content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    gap: 2px;\n  }\n\n  .headline {\n    margin: 0;\n    font-size: var(--md-sys-typescale-title-large-size, 20px);\n    line-height: 28px;\n    font-weight: 500;\n    color: var(--md-bottom-sheet-headline-color, var(--md-sys-color-on-surface, #1D1B20));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .subhead {\n    margin: 0;\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n    color: var(--md-bottom-sheet-subhead-color, var(--md-sys-color-on-surface-variant, #49454F));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .header-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n  }\n\n  .close-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* Divider */\n  .divider {\n    height: 1px;\n    background-color: var(--md-bottom-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  /* Content Section */\n  .content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 16px 24px;\n    box-sizing: border-box;\n    gap: 16px;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .content::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .content::-webkit-scrollbar-thumb {\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: 4px;\n  }\n\n  /* Footer Section */\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 16px 24px;\n    box-sizing: border-box;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../icon/icon.js';\nimport '../icon-button/icon-button.js';\nimport { bottomSheetStyles } from './bottom-sheet.css.js';\n\nexport type BottomSheetType = 'standard' | 'modal';\n\n/**\n * Material Design 3 Bottom Sheet component.\n *\n * Bottom sheets display supplementary content anchored to the bottom of the screen,\n * supporting standard (in-flow / docked panel) and modal (overlay with scrim) modes,\n * drag handle gestures, touch swipe-to-dismiss, and customizable headers and footers.\n *\n * @slot - Default slot for main sheet body content.\n * @slot drag-handle - Custom drag handle element.\n * @slot header - Full header area replacement.\n * @slot headline - Custom title / headline content.\n * @slot subhead - Custom subtitle / subhead content.\n * @slot header-actions - Additional actions next to the close button in the header.\n * @slot close-button - Custom close button element.\n * @slot footer - Bottom actions / footer area.\n * @slot actions - Action buttons container inside the default footer.\n */\n@customElement('md-bottom-sheet')\nexport class MdBottomSheet extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, bottomSheetStyles];\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String, reflect: true })\n  type: BottomSheetType = 'standard';\n\n  @property({ type: Boolean, reflect: true })\n  modal = false;\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String })\n  subhead = '';\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-drag-handle' })\n  hideDragHandle = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n  hideCloseButton = false;\n\n  @property({ type: Boolean, reflect: true })\n  divider = false;\n\n  @property({ type: Boolean, reflect: true })\n  fullscreen = false;\n\n  @query('.sheet')\n  private sheetElement?: HTMLElement;\n\n  @state()\n  private isDragging = false;\n\n  private dragStartY = 0;\n  private currentDragY = 0;\n  private activePointerId: number | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('keydown', this.handleKeyDown);\n    this.cleanupDragListeners();\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.emitEvent('open');\n      } else {\n        this.emitEvent('close');\n      }\n    }\n  }\n\n  /**\n   * Returns whether the bottom sheet is currently functioning in modal mode.\n   */\n  isModalMode(): boolean {\n    return this.modal || this.type === 'modal';\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.open && this.isModalMode()) {\n      this.close();\n      this.emitEvent('cancel');\n    }\n  };\n\n  private handleScrimClick = () => {\n    this.close();\n    this.emitEvent('scrim-click');\n  };\n\n  private handleCloseClick = () => {\n    this.close();\n    this.emitEvent('close-click');\n  };\n\n  private handleDragPointerDown = (event: PointerEvent) => {\n    if (event.button !== 0) return; // Only main button\n    const target = event.target as HTMLElement;\n    if (target.closest('button, md-icon-button, md-button, a, input, [role=\"button\"]')) {\n      return;\n    }\n\n    this.isDragging = true;\n    this.dragStartY = event.clientY;\n    this.currentDragY = 0;\n    this.activePointerId = event.pointerId;\n\n    if (this.sheetElement) {\n      this.sheetElement.classList.add('is-dragging');\n    }\n\n    window.addEventListener('pointermove', this.handlePointerMove);\n    window.addEventListener('pointerup', this.handlePointerUp);\n    window.addEventListener('pointercancel', this.handlePointerUp);\n\n    this.emitEvent('drag-start', { startY: this.dragStartY });\n  };\n\n  private handlePointerMove = (event: PointerEvent) => {\n    if (!this.isDragging) return;\n\n    const deltaY = event.clientY - this.dragStartY;\n    // Allow dragging downwards; apply resistance if dragged upwards\n    this.currentDragY = deltaY > 0 ? deltaY : deltaY * 0.15;\n\n    if (this.sheetElement) {\n      const translateY = Math.max(0, this.currentDragY);\n      this.sheetElement.style.transform = `translateY(${translateY}px)`;\n    }\n\n    this.emitEvent('drag', { deltaY: this.currentDragY });\n  };\n\n  private handlePointerUp = (_event?: PointerEvent) => {\n    if (!this.isDragging) return;\n\n    this.isDragging = false;\n    this.cleanupDragListeners();\n\n    if (this.sheetElement) {\n      this.sheetElement.classList.remove('is-dragging');\n      this.sheetElement.style.transform = '';\n    }\n\n    const sheetHeight = this.sheetElement?.offsetHeight || 300;\n    const threshold = Math.min(100, sheetHeight * 0.25);\n\n    if (this.currentDragY > threshold) {\n      this.close();\n      this.emitEvent('drag-dismiss');\n    }\n\n    this.emitEvent('drag-end', { deltaY: this.currentDragY });\n    this.currentDragY = 0;\n    this.activePointerId = null;\n  };\n\n  private cleanupDragListeners() {\n    window.removeEventListener('pointermove', this.handlePointerMove);\n    window.removeEventListener('pointerup', this.handlePointerUp);\n    window.removeEventListener('pointercancel', this.handlePointerUp);\n  }\n\n  /**\n   * Opens the bottom sheet.\n   */\n  show() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the bottom sheet.\n   */\n  close() {\n    this.open = false;\n  }\n\n  /**\n   * Toggles the open/closed state of the bottom sheet.\n   */\n  toggle() {\n    this.open = !this.open;\n  }\n\n  override render() {\n    const isModal = this.isModalMode();\n\n    const dragHandleContent = !this.hideDragHandle\n      ? html`\n          <div\n            class=\"drag-handle-container\"\n            @pointerdown=${this.handleDragPointerDown}\n            aria-hidden=\"true\"\n          >\n            <slot name=\"drag-handle\">\n              <div class=\"drag-handle\"></div>\n            </slot>\n          </div>\n        `\n      : nothing;\n\n    const headlineContent = this.headline\n      ? html`<h2 class=\"headline\">${this.headline}</h2>`\n      : nothing;\n\n    const subheadContent = this.subhead\n      ? html`<p class=\"subhead\">${this.subhead}</p>`\n      : nothing;\n\n    const closeBtnContent = !this.hideCloseButton\n      ? html`\n          <slot name=\"close-button\">\n            <md-icon-button\n              class=\"close-button\"\n              icon=\"close\"\n              aria-label=\"Close bottom sheet\"\n              @click=${this.handleCloseClick}\n            ></md-icon-button>\n          </slot>\n        `\n      : nothing;\n\n    return html`\n      <div class=\"scrim\" @click=${this.handleScrimClick}></div>\n\n      <aside\n        class=\"sheet\"\n        role=${isModal ? 'dialog' : 'region'}\n        aria-modal=${isModal ? 'true' : nothing}\n        aria-hidden=${this.open ? 'false' : 'true'}\n        aria-label=${this.headline || 'Bottom sheet'}\n      >\n        ${dragHandleContent}\n\n        <slot name=\"header\">\n          <div class=\"header\" @pointerdown=${this.handleDragPointerDown}>\n            <div class=\"header-content\">\n              <slot name=\"headline\">\n                ${headlineContent}\n              </slot>\n              <slot name=\"subhead\">\n                ${subheadContent}\n              </slot>\n            </div>\n\n            <div class=\"header-actions\">\n              <slot name=\"header-actions\"></slot>\n              ${closeBtnContent}\n            </div>\n          </div>\n        </slot>\n\n        ${this.divider ? html`<div class=\"divider\"></div>` : nothing}\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"footer\">\n          <div class=\"footer\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </slot>\n      </aside>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-bottom-sheet': MdBottomSheet;\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/{button-D2vn7kJ8.js → button-DeQQlYds.js}

@@ -1,10 +1,11 @@
-import { n as l, t as o } from "./decorate-DXuynaiA.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import "./icon-DrNqcNEL.js";
-import { css as h, html as e, nothing as n } from "lit";
-import { customElement as c, property as i, queryAssignedElements as d } from "lit/decorators.js";
-var p = h`
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
+import "./icon-FvKeXi61.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, queryAssignedElements as s } from "lit/decorators.js";
+//#region src/components/button/button.css.ts
+var c = n`
   :host {
     display: inline-flex;
     outline: none;
@@ -159,93 +160,82 @@ var p = h`
       transform: rotate(360deg);
     }
   }
-`, t = class extends l {
-  constructor(...a) {
-    super(...a), this.variant = "filled", this.disabled = !1, this.loading = !1, this.type = "button", this.href = "", this.target = "", this.icon = "", this.trailingIcon = "", this.handleClick = (r) => {
-      if (this.disabled || this.loading) {
-        r.preventDefault(), r.stopImmediatePropagation();
-        return;
-      }
-      if (this.type === "submit" || this.type === "reset") {
-        const s = this.closest("form");
-        s && (this.type === "submit" ? s.requestSubmit() : s.reset());
-      }
-    };
-  }
-  static {
-    this.styles = [l.styles, p];
-  }
-  handleSlotChange() {
-    const a = !!(this.icon || this.assignedIcons && this.assignedIcons.length > 0), r = !!(this.trailingIcon || this.assignedTrailingIcons && this.assignedTrailingIcons.length > 0);
-    this.toggleAttribute("has-icon", a), this.toggleAttribute("has-trailing-icon", r);
-  }
-  firstUpdated() {
-    this.handleSlotChange();
-  }
-  render() {
-    const a = e`
+`, l = class extends e {
+	constructor(...e) {
+		super(...e), this.variant = "filled", this.disabled = !1, this.loading = !1, this.type = "button", this.href = "", this.target = "", this.icon = "", this.trailingIcon = "", this.handleClick = (e) => {
+			if (this.disabled || this.loading) {
+				e.preventDefault(), e.stopImmediatePropagation();
+				return;
+			}
+			if (this.type === "submit" || this.type === "reset") {
+				let e = this.closest("form");
+				e && (this.type === "submit" ? e.requestSubmit() : e.reset());
+			}
+		};
+	}
+	static {
+		this.styles = [e.styles, c];
+	}
+	handleSlotChange() {
+		let e = !!(this.icon || this.assignedIcons && this.assignedIcons.length > 0), t = !!(this.trailingIcon || this.assignedTrailingIcons && this.assignedTrailingIcons.length > 0);
+		this.toggleAttribute("has-icon", e), this.toggleAttribute("has-trailing-icon", t);
+	}
+	firstUpdated() {
+		this.handleSlotChange();
+	}
+	render() {
+		let e = r`
       <md-ripple ?disabled=${this.disabled || this.loading}></md-ripple>
       <md-focus-ring></md-focus-ring>
       <span class="content">
-        ${this.loading ? e`<span class="spinner" aria-hidden="true"></span>` : e`
+        ${this.loading ? r`<span class="spinner" aria-hidden="true"></span>` : r`
               <slot name="icon" @slotchange=${this.handleSlotChange}>
-                ${this.icon ? e`<md-icon name=${this.icon}></md-icon>` : n}
+                ${this.icon ? r`<md-icon name=${this.icon}></md-icon>` : i}
               </slot>
             `}
         <slot @slotchange=${this.handleSlotChange}></slot>
-        ${this.loading ? n : e`
+        ${this.loading ? i : r`
               <slot name="trailing-icon" @slotchange=${this.handleSlotChange}>
-                ${this.trailingIcon ? e`<md-icon name=${this.trailingIcon}></md-icon>` : n}
+                ${this.trailingIcon ? r`<md-icon name=${this.trailingIcon}></md-icon>` : i}
               </slot>
             `}
       </span>
     `;
-    return this.href ? e`
+		return this.href ? r`
         <a
-          href=${this.disabled ? n : this.href}
-          target=${this.target || n}
-          aria-disabled=${this.disabled ? "true" : n}
+          href=${this.disabled ? i : this.href}
+          target=${this.target || i}
+          aria-disabled=${this.disabled ? "true" : i}
           tabindex=${this.disabled ? "-1" : "0"}
           @click=${this.handleClick}
         >
-          ${a}
+          ${e}
         </a>
-      ` : e`
+      ` : r`
       <button
         type=${this.type}
         ?disabled=${this.disabled || this.loading}
         @click=${this.handleClick}
       >
-        ${a}
+        ${e}
       </button>
     `;
-  }
-};
-o([i({
-  type: String,
-  reflect: !0
-})], t.prototype, "variant", void 0);
-o([i({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "disabled", void 0);
-o([i({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "loading", void 0);
-o([i({ type: String })], t.prototype, "type", void 0);
-o([i({ type: String })], t.prototype, "href", void 0);
-o([i({ type: String })], t.prototype, "target", void 0);
-o([i({ type: String })], t.prototype, "icon", void 0);
-o([i({
-  type: String,
-  attribute: "trailing-icon"
-})], t.prototype, "trailingIcon", void 0);
-o([d({ slot: "icon" })], t.prototype, "assignedIcons", void 0);
-o([d({ slot: "trailing-icon" })], t.prototype, "assignedTrailingIcons", void 0);
-t = o([c("md-button")], t);
-export {
-  t
+	}
 };
-
-//# sourceMappingURL=button-D2vn7kJ8.js.map
+t([o({
+	type: String,
+	reflect: !0
+})], l.prototype, "variant", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "loading", void 0), t([o({ type: String })], l.prototype, "type", void 0), t([o({ type: String })], l.prototype, "href", void 0), t([o({ type: String })], l.prototype, "target", void 0), t([o({ type: String })], l.prototype, "icon", void 0), t([o({
+	type: String,
+	attribute: "trailing-icon"
+})], l.prototype, "trailingIcon", void 0), t([s({ slot: "icon" })], l.prototype, "assignedIcons", void 0), t([s({ slot: "trailing-icon" })], l.prototype, "assignedTrailingIcons", void 0), l = t([a("md-button")], l);
+//#endregion
+export { l as t };
+
+//# sourceMappingURL=button-DeQQlYds.js.map

package/dist/chunks/{button-D2vn7kJ8.js.map → button-DeQQlYds.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-D2vn7kJ8.js","names":[],"sources":["../../src/components/button/button.css.ts","../../src/components/button/button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonStyles = css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  button, a {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 64px;\n    height: 40px;\n    padding: 0 24px;\n    border: none;\n    border-radius: var(--md-button-border-radius, var(--md-button-shape, var(--md-sys-shape-corner-full, 9999px)));\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  :host([has-icon]) button,\n  :host([has-icon]) a {\n    padding-left: 16px;\n  }\n\n  :host([has-trailing-icon]) button,\n  :host([has-trailing-icon]) a {\n    padding-right: 16px;\n  }\n\n  /* --- Filled (Default) --- */\n  :host(:not([variant])) button,\n  :host(:not([variant])) a,\n  :host([variant=\"filled\"]) button,\n  :host([variant=\"filled\"]) a {\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([variant=\"filled\"]:hover) a,\n  :host(:not([variant]):hover) button,\n  :host(:not([variant]):hover) a {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  /* --- Elevated --- */\n  :host([variant=\"elevated\"]) button,\n  :host([variant=\"elevated\"]) a {\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  :host([variant=\"elevated\"]:hover) a {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0,0,0,0.15));\n  }\n\n  /* --- Filled Tonal --- */\n  :host([variant=\"tonal\"]) button,\n  :host([variant=\"tonal\"]) a {\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  :host([variant=\"tonal\"]:hover) a {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  /* --- Outlined --- */\n  :host([variant=\"outlined\"]) button,\n  :host([variant=\"outlined\"]) a {\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  /* --- Text --- */\n  :host([variant=\"text\"]) button,\n  :host([variant=\"text\"]) a {\n    background-color: transparent;\n    color: var(--md-sys-color-primary, #6750a4);\n    padding: 0 12px;\n  }\n\n  /* --- Disabled --- */\n  :host([disabled]) button,\n  :host([disabled]) a {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  :host([disabled]:not([variant=\"outlined\"]):not([variant=\"text\"])) button,\n  :host([disabled]:not([variant=\"outlined\"]):not([variant=\"text\"])) a {\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  :host([disabled][variant=\"outlined\"]) a {\n    border-color: rgba(29, 27, 32, 0.12);\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][variant=\"text\"]) button,\n  :host([disabled][variant=\"text\"]) a {\n    color: rgba(29, 27, 32, 0.38);\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  .spinner {\n    width: 18px;\n    height: 18px;\n    border: 2px solid currentColor;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: md-spin 800ms linear infinite;\n  }\n\n  @keyframes md-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements } 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 { buttonStyles } from './button.css.js';\n\nexport type ButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';\n\n@customElement('md-button')\nexport class MdButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, buttonStyles];\n\n  @property({ type: String, reflect: true })\n  variant: ButtonVariant = 'filled';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @queryAssignedElements({ slot: 'icon' })\n  private assignedIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'trailing-icon' })\n  private assignedTrailingIcons!: HTMLElement[];\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled || this.loading) {\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\n  private handleSlotChange(): void {\n    const hasLeading = Boolean(this.icon || (this.assignedIcons && this.assignedIcons.length > 0));\n    const hasTrailing = Boolean(this.trailingIcon || (this.assignedTrailingIcons && this.assignedTrailingIcons.length > 0));\n\n    this.toggleAttribute('has-icon', hasLeading);\n    this.toggleAttribute('has-trailing-icon', hasTrailing);\n  }\n\n  override firstUpdated() {\n    this.handleSlotChange();\n  }\n\n  override render() {\n    const content = html`\n      <md-ripple ?disabled=${this.disabled || this.loading}></md-ripple>\n      <md-focus-ring></md-focus-ring>\n      <span class=\"content\">\n        ${this.loading\n          ? html`<span class=\"spinner\" aria-hidden=\"true\"></span>`\n          : html`\n              <slot name=\"icon\" @slotchange=${this.handleSlotChange}>\n                ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n              </slot>\n            `}\n        <slot @slotchange=${this.handleSlotChange}></slot>\n        ${!this.loading\n          ? html`\n              <slot name=\"trailing-icon\" @slotchange=${this.handleSlotChange}>\n                ${this.trailingIcon ? html`<md-icon name=${this.trailingIcon}></md-icon>` : nothing}\n              </slot>\n            `\n          : nothing}\n      </span>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.handleClick}\n        >\n          ${content}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        type=${this.type}\n        ?disabled=${this.disabled || this.loading}\n        @click=${this.handleClick}\n      >\n        ${content}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-button': MdButton;\n  }\n}\n\n"],"mappings":"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"}
+{"version":3,"file":"button-DeQQlYds.js","names":[],"sources":["../../src/components/button/button.css.ts","../../src/components/button/button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonStyles = css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  button, a {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 64px;\n    height: 40px;\n    padding: 0 24px;\n    border: none;\n    border-radius: var(--md-button-border-radius, var(--md-button-shape, var(--md-sys-shape-corner-full, 9999px)));\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  :host([has-icon]) button,\n  :host([has-icon]) a {\n    padding-left: 16px;\n  }\n\n  :host([has-trailing-icon]) button,\n  :host([has-trailing-icon]) a {\n    padding-right: 16px;\n  }\n\n  /* --- Filled (Default) --- */\n  :host(:not([variant])) button,\n  :host(:not([variant])) a,\n  :host([variant=\"filled\"]) button,\n  :host([variant=\"filled\"]) a {\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([variant=\"filled\"]:hover) a,\n  :host(:not([variant]):hover) button,\n  :host(:not([variant]):hover) a {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  /* --- Elevated --- */\n  :host([variant=\"elevated\"]) button,\n  :host([variant=\"elevated\"]) a {\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  :host([variant=\"elevated\"]:hover) a {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0,0,0,0.15));\n  }\n\n  /* --- Filled Tonal --- */\n  :host([variant=\"tonal\"]) button,\n  :host([variant=\"tonal\"]) a {\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  :host([variant=\"tonal\"]:hover) a {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  /* --- Outlined --- */\n  :host([variant=\"outlined\"]) button,\n  :host([variant=\"outlined\"]) a {\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  /* --- Text --- */\n  :host([variant=\"text\"]) button,\n  :host([variant=\"text\"]) a {\n    background-color: transparent;\n    color: var(--md-sys-color-primary, #6750a4);\n    padding: 0 12px;\n  }\n\n  /* --- Disabled --- */\n  :host([disabled]) button,\n  :host([disabled]) a {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  :host([disabled]:not([variant=\"outlined\"]):not([variant=\"text\"])) button,\n  :host([disabled]:not([variant=\"outlined\"]):not([variant=\"text\"])) a {\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  :host([disabled][variant=\"outlined\"]) a {\n    border-color: rgba(29, 27, 32, 0.12);\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][variant=\"text\"]) button,\n  :host([disabled][variant=\"text\"]) a {\n    color: rgba(29, 27, 32, 0.38);\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  .spinner {\n    width: 18px;\n    height: 18px;\n    border: 2px solid currentColor;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: md-spin 800ms linear infinite;\n  }\n\n  @keyframes md-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements } 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 { buttonStyles } from './button.css.js';\n\nexport type ButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';\n\n@customElement('md-button')\nexport class MdButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, buttonStyles];\n\n  @property({ type: String, reflect: true })\n  variant: ButtonVariant = 'filled';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @queryAssignedElements({ slot: 'icon' })\n  private assignedIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'trailing-icon' })\n  private assignedTrailingIcons!: HTMLElement[];\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled || this.loading) {\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\n  private handleSlotChange(): void {\n    const hasLeading = Boolean(this.icon || (this.assignedIcons && this.assignedIcons.length > 0));\n    const hasTrailing = Boolean(this.trailingIcon || (this.assignedTrailingIcons && this.assignedTrailingIcons.length > 0));\n\n    this.toggleAttribute('has-icon', hasLeading);\n    this.toggleAttribute('has-trailing-icon', hasTrailing);\n  }\n\n  override firstUpdated() {\n    this.handleSlotChange();\n  }\n\n  override render() {\n    const content = html`\n      <md-ripple ?disabled=${this.disabled || this.loading}></md-ripple>\n      <md-focus-ring></md-focus-ring>\n      <span class=\"content\">\n        ${this.loading\n          ? html`<span class=\"spinner\" aria-hidden=\"true\"></span>`\n          : html`\n              <slot name=\"icon\" @slotchange=${this.handleSlotChange}>\n                ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n              </slot>\n            `}\n        <slot @slotchange=${this.handleSlotChange}></slot>\n        ${!this.loading\n          ? html`\n              <slot name=\"trailing-icon\" @slotchange=${this.handleSlotChange}>\n                ${this.trailingIcon ? html`<md-icon name=${this.trailingIcon}></md-icon>` : nothing}\n              </slot>\n            `\n          : nothing}\n      </span>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.handleClick}\n        >\n          ${content}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        type=${this.type}\n        ?disabled=${this.disabled || this.loading}\n        @click=${this.handleClick}\n      >\n        ${content}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-button': MdButton;\n  }\n}\n\n"],"mappings":"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"}

package/dist/chunks/button-group-R2jN8FXK.js

@@ -0,0 +1,136 @@
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import { css as n, html as r } from "lit";
+import { customElement as i, property as a, queryAssignedElements as o } from "lit/decorators.js";
+//#region src/components/button-group/button-group.css.ts
+var s = n`
+  :host {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--md-button-group-gap, 8px);
+    box-sizing: border-box;
+    vertical-align: middle;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :host([full-width]) {
+    display: flex;
+    width: 100%;
+  }
+
+  :host([full-width]:not([orientation='vertical'])) ::slotted(*) {
+    flex: 1 1 0;
+    width: 100%;
+  }
+
+  :host([full-width][orientation='vertical']) ::slotted(*) {
+    width: 100%;
+  }
+
+  /* --- Connected Button Group --- */
+  :host([connected]) {
+    gap: 0;
+  }
+
+  :host([connected]:not([orientation='vertical'])) ::slotted(*:not(:first-child)) {
+    margin-inline-start: -1px;
+  }
+
+  :host([connected][orientation='vertical']) ::slotted(*:not(:first-child)) {
+    margin-top: -1px;
+  }
+
+  ::slotted(*) {
+    position: relative;
+    z-index: 0;
+  }
+
+  ::slotted(*:hover),
+  ::slotted(*:focus-within),
+  ::slotted(*:active) {
+    z-index: 1;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+`, c = class extends e {
+	constructor(...e) {
+		super(...e), this.orientation = "horizontal", this.connected = !1, this.shape = "pill", this.variant = "", this.fullWidth = !1, this.disabled = !1, this.handleSlotChange = () => {
+			this.syncChildren();
+		}, this.handleKeyDown = (e) => {
+			let t = this.getInteractiveChildren().filter((e) => !e.disabled && !e.hasAttribute("disabled"));
+			if (t.length === 0) return;
+			let n = document.activeElement, r = t.findIndex((e) => e === n || e.shadowRoot && e.shadowRoot.activeElement === n), i = -1;
+			e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), i = r >= 0 && r < t.length - 1 ? r + 1 : 0) : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), i = r > 0 ? r - 1 : t.length - 1) : e.key === "Home" ? (e.preventDefault(), i = 0) : e.key === "End" && (e.preventDefault(), i = t.length - 1), i !== -1 && t[i] && t[i]?.focus();
+		};
+	}
+	static {
+		this.styles = [e.styles, s];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "group"), this.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	updated(e) {
+		super.updated(e), (e.has("connected") || e.has("orientation") || e.has("shape") || e.has("variant") || e.has("disabled")) && this.syncChildren();
+	}
+	getInteractiveChildren() {
+		return this.slottedElements ? this.slottedElements.filter((e) => e.nodeType === Node.ELEMENT_NODE && !e.hasAttribute("slot")) : [];
+	}
+	syncChildren() {
+		let e = this.getInteractiveChildren();
+		if (e.length !== 0) {
+			if (this.disabled && e.forEach((e) => {
+				"disabled" in e ? e.disabled = !0 : e.setAttribute("disabled", "");
+			}), this.variant && e.forEach((e) => {
+				"variant" in e && (e.variant = this.variant);
+			}), this.connected) {
+				let t = "var(--md-sys-shape-corner-full, 9999px)", n = "var(--md-sys-shape-corner-extra-small, 4px)";
+				this.shape === "rounded" ? (t = "var(--md-sys-shape-corner-medium, 12px)", n = "var(--md-sys-shape-corner-extra-small, 4px)") : this.shape === "square" && (t = "var(--md-sys-shape-corner-extra-small, 4px)", n = "0px"), e.length === 1 ? (e[0].style.setProperty("--md-button-border-radius", t), e[0].style.borderRadius = t) : e.forEach((r, i) => {
+					let a = "";
+					a = this.orientation === "vertical" ? i === 0 ? `${t} ${t} ${n} ${n}` : i === e.length - 1 ? `${n} ${n} ${t} ${t}` : `${n} ${n} ${n} ${n}` : i === 0 ? `${t} ${n} ${n} ${t}` : i === e.length - 1 ? `${n} ${t} ${t} ${n}` : `${n} ${n} ${n} ${n}`, r.style.setProperty("--md-button-border-radius", a), r.style.borderRadius = a;
+				});
+			} else e.forEach((e) => {
+				e.style.removeProperty("--md-button-border-radius"), e.style.borderRadius = "";
+			});
+		}
+	}
+	render() {
+		return r`<slot @slotchange=${this.handleSlotChange}></slot>`;
+	}
+};
+t([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "orientation", void 0), t([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "connected", void 0), t([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "shape", void 0), t([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), t([a({
+	type: Boolean,
+	attribute: "full-width",
+	reflect: !0
+})], c.prototype, "fullWidth", void 0), t([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), t([o({ flatten: !0 })], c.prototype, "slottedElements", void 0), c = t([i("md-button-group")], c);
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=button-group-R2jN8FXK.js.map

package/dist/chunks/{button-group-CNqvJx1n.js.map → button-group-R2jN8FXK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-group-CNqvJx1n.js","names":[],"sources":["../../src/components/button-group/button-group.css.ts","../../src/components/button-group/button-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonGroupStyles = css`\n  :host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--md-button-group-gap, 8px);\n    box-sizing: border-box;\n    vertical-align: middle;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([orientation='vertical']) {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  :host([full-width]) {\n    display: flex;\n    width: 100%;\n  }\n\n  :host([full-width]:not([orientation='vertical'])) ::slotted(*) {\n    flex: 1 1 0;\n    width: 100%;\n  }\n\n  :host([full-width][orientation='vertical']) ::slotted(*) {\n    width: 100%;\n  }\n\n  /* --- Connected Button Group --- */\n  :host([connected]) {\n    gap: 0;\n  }\n\n  :host([connected]:not([orientation='vertical'])) ::slotted(*:not(:first-child)) {\n    margin-inline-start: -1px;\n  }\n\n  :host([connected][orientation='vertical']) ::slotted(*:not(:first-child)) {\n    margin-top: -1px;\n  }\n\n  ::slotted(*) {\n    position: relative;\n    z-index: 0;\n  }\n\n  ::slotted(*:hover),\n  ::slotted(*:focus-within),\n  ::slotted(*:active) {\n    z-index: 1;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n`;\n","import { html } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport type { ButtonVariant } from '../button/button.js';\nimport { buttonGroupStyles } from './button-group.css.js';\n\nexport type ButtonGroupOrientation = 'horizontal' | 'vertical';\nexport type ButtonGroupShape = 'pill' | 'rounded' | 'square';\n\n@customElement('md-button-group')\nexport class MdButtonGroup extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, buttonGroupStyles];\n\n  @property({ type: String, reflect: true })\n  orientation: ButtonGroupOrientation = 'horizontal';\n\n  @property({ type: Boolean, reflect: true })\n  connected = false;\n\n  @property({ type: String, reflect: true })\n  shape: ButtonGroupShape = 'pill';\n\n  @property({ type: String, reflect: true })\n  variant: ButtonVariant | '' = '';\n\n  @property({ type: Boolean, attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @queryAssignedElements({ flatten: true })\n  private slottedElements!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (\n      changedProperties.has('connected') ||\n      changedProperties.has('orientation') ||\n      changedProperties.has('shape') ||\n      changedProperties.has('variant') ||\n      changedProperties.has('disabled')\n    ) {\n      this.syncChildren();\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.syncChildren();\n  };\n\n  private getInteractiveChildren(): HTMLElement[] {\n    if (!this.slottedElements) return [];\n    return this.slottedElements.filter(\n      (el): el is HTMLElement =>\n        el.nodeType === Node.ELEMENT_NODE &&\n        !el.hasAttribute('slot')\n    );\n  }\n\n  private syncChildren() {\n    const buttons = this.getInteractiveChildren();\n    if (buttons.length === 0) return;\n\n    // Sync disabled state\n    if (this.disabled) {\n      buttons.forEach((btn) => {\n        if ('disabled' in btn) {\n          (btn as any).disabled = true;\n        } else {\n          btn.setAttribute('disabled', '');\n        }\n      });\n    }\n\n    // Sync variant if specified\n    if (this.variant) {\n      buttons.forEach((btn) => {\n        if ('variant' in btn) {\n          (btn as any).variant = this.variant;\n        }\n      });\n    }\n\n    // Sync shape-shifting border radiuses for connected buttons\n    if (this.connected) {\n      let outer = 'var(--md-sys-shape-corner-full, 9999px)';\n      let inner = 'var(--md-sys-shape-corner-extra-small, 4px)';\n\n      if (this.shape === 'rounded') {\n        outer = 'var(--md-sys-shape-corner-medium, 12px)';\n        inner = 'var(--md-sys-shape-corner-extra-small, 4px)';\n      } else if (this.shape === 'square') {\n        outer = 'var(--md-sys-shape-corner-extra-small, 4px)';\n        inner = '0px';\n      }\n\n      if (buttons.length === 1) {\n        buttons[0]!.style.setProperty('--md-button-border-radius', outer);\n        buttons[0]!.style.borderRadius = outer;\n      } else {\n        buttons.forEach((btn, index) => {\n          let radius = '';\n          if (this.orientation === 'vertical') {\n            if (index === 0) {\n              radius = `${outer} ${outer} ${inner} ${inner}`;\n            } else if (index === buttons.length - 1) {\n              radius = `${inner} ${inner} ${outer} ${outer}`;\n            } else {\n              radius = `${inner} ${inner} ${inner} ${inner}`;\n            }\n          } else {\n            // Horizontal\n            if (index === 0) {\n              radius = `${outer} ${inner} ${inner} ${outer}`;\n            } else if (index === buttons.length - 1) {\n              radius = `${inner} ${outer} ${outer} ${inner}`;\n            } else {\n              radius = `${inner} ${inner} ${inner} ${inner}`;\n            }\n          }\n          btn.style.setProperty('--md-button-border-radius', radius);\n          btn.style.borderRadius = radius;\n        });\n      }\n    } else {\n      buttons.forEach((btn) => {\n        btn.style.removeProperty('--md-button-border-radius');\n        btn.style.borderRadius = '';\n      });\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const buttons = this.getInteractiveChildren().filter((b) => !(b as any).disabled && !b.hasAttribute('disabled'));\n    if (buttons.length === 0) return;\n\n    const currentFocus = document.activeElement;\n    const currentIndex = buttons.findIndex(\n      (b) => b === currentFocus || (b.shadowRoot && b.shadowRoot.activeElement === currentFocus)\n    );\n\n    let nextIndex = -1;\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      nextIndex = currentIndex >= 0 && currentIndex < buttons.length - 1 ? currentIndex + 1 : 0;\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : buttons.length - 1;\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      nextIndex = 0;\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      nextIndex = buttons.length - 1;\n    }\n\n    if (nextIndex !== -1 && buttons[nextIndex]) {\n      buttons[nextIndex]?.focus();\n    }\n  };\n\n  override render() {\n    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-button-group': MdButtonGroup;\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,GCQpB,IAAN,cAA4B,EAAc;AAAA;iBAIT,KAAA,cAAA,cAG1B,KAAA,YAAA,IAGc,KAAA,QAAA,QAGI,KAAA,UAAA,IAGlB,KAAA,YAAA,IAGD,KAAA,WAAA,IA+BsB,KAAA,mBAAA,MAAA;AAC/B,WAAK,aAAa;AAAA,IACpB,GAoFyB,KAAA,gBAAA,CAAA,MAAyB;AAChD,YAAM,IAAU,KAAK,uBAAuB,EAAE,OAAA,CAAQ,MAAM,CAAE,EAAU,YAAY,CAAC,EAAE,aAAa,UAAU,CAAC;AAC/G,UAAI,EAAQ,WAAW,EAAG;AAE1B,YAAM,IAAe,SAAS,eACxB,IAAe,EAAQ,UAAA,CAC1B,MAAM,MAAM,KAAiB,EAAE,cAAc,EAAE,WAAW,kBAAkB,CAC/E;AAEA,UAAI,IAAY;AAChB,MAAI,EAAM,QAAQ,gBAAgB,EAAM,QAAQ,eAC9C,EAAM,eAAe,GACrB,IAAY,KAAgB,KAAK,IAAe,EAAQ,SAAS,IAAI,IAAe,IAAI,KAC/E,EAAM,QAAQ,eAAe,EAAM,QAAQ,aACpD,EAAM,eAAe,GACrB,IAAY,IAAe,IAAI,IAAe,IAAI,EAAQ,SAAS,KAC1D,EAAM,QAAQ,UACvB,EAAM,eAAe,GACrB,IAAY,KACH,EAAM,QAAQ,UACvB,EAAM,eAAe,GACrB,IAAY,EAAQ,SAAS,IAG3B,MAAc,MAAM,EAAQ,CAAA,KAC9B,EAAQ,CAAA,GAAY,MAAM;AAAA,IAE9B;AAAA;;AAlKyB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAiB;AAAA;EAuBjE,oBAA6B;AAC3B,UAAM,kBAAkB,GACnB,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,OAAO,GAEnC,KAAK,iBAAiB,WAAW,KAAK,aAAa;AAAA,EACrD;AAAA,EAEA,uBAAgC;AAC9B,UAAM,qBAAqB,GAC3B,KAAK,oBAAoB,WAAW,KAAK,aAAa;AAAA,EACxD;AAAA,EAEA,QAAiB,GAAyC;AACxD,UAAM,QAAQ,CAAiB,IAE7B,EAAkB,IAAI,WAAW,KACjC,EAAkB,IAAI,aAAa,KACnC,EAAkB,IAAI,OAAO,KAC7B,EAAkB,IAAI,SAAS,KAC/B,EAAkB,IAAI,UAAU,MAEhC,KAAK,aAAa;AAAA,EAEtB;AAAA,EAMA,yBAAgD;AAC9C,WAAK,KAAK,kBACH,KAAK,gBAAgB,OAAA,CACzB,MACC,EAAG,aAAa,KAAK,gBACrB,CAAC,EAAG,aAAa,MAAM,CAC3B,IALkC,CAAC;AAAA,EAMrC;AAAA,EAEA,eAAuB;AACrB,UAAM,IAAU,KAAK,uBAAuB;AAC5C,QAAI,EAAQ,WAAW;AAuBvB,UApBI,KAAK,YACP,EAAQ,QAAA,CAAS,MAAQ;AACvB,QAAI,cAAc,IAChB,EAAa,WAAW,KAExB,EAAI,aAAa,YAAY,EAAE;AAAA,MAEnC,CAAC,GAIC,KAAK,WACP,EAAQ,QAAA,CAAS,MAAQ;AACvB,QAAI,aAAa,MACf,EAAa,UAAU,KAAK;AAAA,MAEhC,CAAC,GAIC,KAAK,WAAW;AAClB,YAAI,IAAQ,2CACR,IAAQ;AAEZ,QAAI,KAAK,UAAU,aACjB,IAAQ,2CACR,IAAQ,iDACC,KAAK,UAAU,aACxB,IAAQ,+CACR,IAAQ,QAGN,EAAQ,WAAW,KACrB,EAAQ,CAAA,EAAI,MAAM,YAAY,6BAA6B,CAAK,GAChE,EAAQ,CAAA,EAAI,MAAM,eAAe,KAEjC,EAAQ,QAAA,CAAS,GAAK,MAAU;AAC9B,cAAI,IAAS;AACb,UAAI,KAAK,gBAAgB,aACnB,MAAU,IACZ,IAAS,GAAG,CAAA,IAAS,CAAA,IAAS,CAAA,IAAS,CAAA,KAC9B,MAAU,EAAQ,SAAS,IACpC,IAAS,GAAG,CAAA,IAAS,CAAA,IAAS,CAAA,IAAS,CAAA,KAEvC,IAAS,GAAG,CAAA,IAAS,CAAA,IAAS,CAAA,IAAS,CAAA,KAIrC,MAAU,IACZ,IAAS,GAAG,CAAA,IAAS,CAAA,IAAS,CAAA,IAAS,CAAA,KAC9B,MAAU,EAAQ,SAAS,IACpC,IAAS,GAAG,CAAA,IAAS,CAAA,IAAS,CAAA,IAAS,CAAA,KAEvC,IAAS,GAAG,CAAA,IAAS,CAAA,IAAS,CAAA,IAAS,CAAA,IAG3C,EAAI,MAAM,YAAY,6BAA6B,CAAM,GACzD,EAAI,MAAM,eAAe;AAAA,QAC3B,CAAC;AAAA,MAEL,MACE,CAAA,EAAQ,QAAA,CAAS,MAAQ;AACvB,QAAA,EAAI,MAAM,eAAe,2BAA2B,GACpD,EAAI,MAAM,eAAe;AAAA,MAC3B,CAAC;AAAA,EAEL;AAAA,EA+BA,SAAkB;AAChB,WAAO,sBAAyB,KAAK,gBAAA;AAAA,EACvC;AACF;AArKG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,MAAA;AAGxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAGxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,MAAA;AAGxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,WAAW;AAAA,EAAc,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,MAAA;AAGlE,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAsB,EAAE,SAAS,GAAK,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,MAAA;AAtBzC,IAAA,EAAA,CAAA,EAAc,iBAAiB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"button-group-R2jN8FXK.js","names":[],"sources":["../../src/components/button-group/button-group.css.ts","../../src/components/button-group/button-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonGroupStyles = css`\n  :host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--md-button-group-gap, 8px);\n    box-sizing: border-box;\n    vertical-align: middle;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([orientation='vertical']) {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  :host([full-width]) {\n    display: flex;\n    width: 100%;\n  }\n\n  :host([full-width]:not([orientation='vertical'])) ::slotted(*) {\n    flex: 1 1 0;\n    width: 100%;\n  }\n\n  :host([full-width][orientation='vertical']) ::slotted(*) {\n    width: 100%;\n  }\n\n  /* --- Connected Button Group --- */\n  :host([connected]) {\n    gap: 0;\n  }\n\n  :host([connected]:not([orientation='vertical'])) ::slotted(*:not(:first-child)) {\n    margin-inline-start: -1px;\n  }\n\n  :host([connected][orientation='vertical']) ::slotted(*:not(:first-child)) {\n    margin-top: -1px;\n  }\n\n  ::slotted(*) {\n    position: relative;\n    z-index: 0;\n  }\n\n  ::slotted(*:hover),\n  ::slotted(*:focus-within),\n  ::slotted(*:active) {\n    z-index: 1;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n`;\n","import { html } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport type { ButtonVariant } from '../button/button.js';\nimport { buttonGroupStyles } from './button-group.css.js';\n\nexport type ButtonGroupOrientation = 'horizontal' | 'vertical';\nexport type ButtonGroupShape = 'pill' | 'rounded' | 'square';\n\n@customElement('md-button-group')\nexport class MdButtonGroup extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, buttonGroupStyles];\n\n  @property({ type: String, reflect: true })\n  orientation: ButtonGroupOrientation = 'horizontal';\n\n  @property({ type: Boolean, reflect: true })\n  connected = false;\n\n  @property({ type: String, reflect: true })\n  shape: ButtonGroupShape = 'pill';\n\n  @property({ type: String, reflect: true })\n  variant: ButtonVariant | '' = '';\n\n  @property({ type: Boolean, attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @queryAssignedElements({ flatten: true })\n  private slottedElements!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (\n      changedProperties.has('connected') ||\n      changedProperties.has('orientation') ||\n      changedProperties.has('shape') ||\n      changedProperties.has('variant') ||\n      changedProperties.has('disabled')\n    ) {\n      this.syncChildren();\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.syncChildren();\n  };\n\n  private getInteractiveChildren(): HTMLElement[] {\n    if (!this.slottedElements) return [];\n    return this.slottedElements.filter(\n      (el): el is HTMLElement =>\n        el.nodeType === Node.ELEMENT_NODE &&\n        !el.hasAttribute('slot')\n    );\n  }\n\n  private syncChildren() {\n    const buttons = this.getInteractiveChildren();\n    if (buttons.length === 0) return;\n\n    // Sync disabled state\n    if (this.disabled) {\n      buttons.forEach((btn) => {\n        if ('disabled' in btn) {\n          (btn as any).disabled = true;\n        } else {\n          btn.setAttribute('disabled', '');\n        }\n      });\n    }\n\n    // Sync variant if specified\n    if (this.variant) {\n      buttons.forEach((btn) => {\n        if ('variant' in btn) {\n          (btn as any).variant = this.variant;\n        }\n      });\n    }\n\n    // Sync shape-shifting border radiuses for connected buttons\n    if (this.connected) {\n      let outer = 'var(--md-sys-shape-corner-full, 9999px)';\n      let inner = 'var(--md-sys-shape-corner-extra-small, 4px)';\n\n      if (this.shape === 'rounded') {\n        outer = 'var(--md-sys-shape-corner-medium, 12px)';\n        inner = 'var(--md-sys-shape-corner-extra-small, 4px)';\n      } else if (this.shape === 'square') {\n        outer = 'var(--md-sys-shape-corner-extra-small, 4px)';\n        inner = '0px';\n      }\n\n      if (buttons.length === 1) {\n        buttons[0]!.style.setProperty('--md-button-border-radius', outer);\n        buttons[0]!.style.borderRadius = outer;\n      } else {\n        buttons.forEach((btn, index) => {\n          let radius = '';\n          if (this.orientation === 'vertical') {\n            if (index === 0) {\n              radius = `${outer} ${outer} ${inner} ${inner}`;\n            } else if (index === buttons.length - 1) {\n              radius = `${inner} ${inner} ${outer} ${outer}`;\n            } else {\n              radius = `${inner} ${inner} ${inner} ${inner}`;\n            }\n          } else {\n            // Horizontal\n            if (index === 0) {\n              radius = `${outer} ${inner} ${inner} ${outer}`;\n            } else if (index === buttons.length - 1) {\n              radius = `${inner} ${outer} ${outer} ${inner}`;\n            } else {\n              radius = `${inner} ${inner} ${inner} ${inner}`;\n            }\n          }\n          btn.style.setProperty('--md-button-border-radius', radius);\n          btn.style.borderRadius = radius;\n        });\n      }\n    } else {\n      buttons.forEach((btn) => {\n        btn.style.removeProperty('--md-button-border-radius');\n        btn.style.borderRadius = '';\n      });\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const buttons = this.getInteractiveChildren().filter((b) => !(b as any).disabled && !b.hasAttribute('disabled'));\n    if (buttons.length === 0) return;\n\n    const currentFocus = document.activeElement;\n    const currentIndex = buttons.findIndex(\n      (b) => b === currentFocus || (b.shadowRoot && b.shadowRoot.activeElement === currentFocus)\n    );\n\n    let nextIndex = -1;\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      nextIndex = currentIndex >= 0 && currentIndex < buttons.length - 1 ? currentIndex + 1 : 0;\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : buttons.length - 1;\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      nextIndex = 0;\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      nextIndex = buttons.length - 1;\n    }\n\n    if (nextIndex !== -1 && buttons[nextIndex]) {\n      buttons[nextIndex]?.focus();\n    }\n  };\n\n  override render() {\n    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-button-group': MdButtonGroup;\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/{card-DVffdPpv.js → card-CVhWizDF.js}

@@ -1,9 +1,10 @@
-import { n as d, t as i } from "./decorate-DXuynaiA.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import { css as n, html as r, nothing as t } from "lit";
-import { customElement as l, property as a } from "lit/decorators.js";
-var c = n`
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/components/card/card.css.ts
+var s = n`
   :host {
     display: block;
     border-radius: var(--md-sys-shape-corner-medium, 12px);
@@ -92,22 +93,22 @@ var c = n`
     gap: 8px;
     padding: 8px 16px 16px;
   }
-`, e = class extends d {
-  constructor(...o) {
-    super(...o), this.variant = "elevated", this.interactive = !1, this.disabled = !1, this.href = "", this.target = "", this.handleClick = (s) => {
-      if (this.disabled) {
-        s.preventDefault(), s.stopImmediatePropagation();
-        return;
-      }
-      this.interactive && this.emitEvent("card-click");
-    };
-  }
-  static {
-    this.styles = [d.styles, c];
-  }
-  render() {
-    const o = r`
-      ${this.interactive ? r`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : t}
+`, c = class extends e {
+	constructor(...e) {
+		super(...e), this.variant = "elevated", this.interactive = !1, this.disabled = !1, this.href = "", this.target = "", this.handleClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault(), e.stopImmediatePropagation();
+				return;
+			}
+			this.interactive && this.emitEvent("card-click");
+		};
+	}
+	static {
+		this.styles = [e.styles, s];
+	}
+	render() {
+		let e = r`
+      ${this.interactive ? r`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : i}
       <slot name="media"></slot>
       <div class="header">
         <slot name="header"></slot>
@@ -119,45 +120,39 @@ var c = n`
         <slot name="actions"></slot>
       </div>
     `;
-    return this.href ? r`
+		return this.href ? r`
         <a
           class="card-container"
-          href=${this.disabled ? t : this.href}
-          target=${this.target || t}
-          aria-disabled=${this.disabled ? "true" : t}
-          tabindex=${this.disabled ? "-1" : this.interactive ? "0" : t}
+          href=${this.disabled ? i : this.href}
+          target=${this.target || i}
+          aria-disabled=${this.disabled ? "true" : i}
+          tabindex=${this.disabled ? "-1" : this.interactive ? "0" : i}
           @click=${this.handleClick}
         >
-          ${o}
+          ${e}
         </a>
       ` : r`
       <div
         class="card-container"
-        tabindex=${this.interactive && !this.disabled ? "0" : t}
+        tabindex=${this.interactive && !this.disabled ? "0" : i}
         @click=${this.handleClick}
       >
-        ${o}
+        ${e}
       </div>
     `;
-  }
-};
-i([a({
-  type: String,
-  reflect: !0
-})], e.prototype, "variant", void 0);
-i([a({
-  type: Boolean,
-  reflect: !0
-})], e.prototype, "interactive", void 0);
-i([a({
-  type: Boolean,
-  reflect: !0
-})], e.prototype, "disabled", void 0);
-i([a({ type: String })], e.prototype, "href", void 0);
-i([a({ type: String })], e.prototype, "target", void 0);
-e = i([l("md-card")], e);
-export {
-  e as t
+	}
 };
+t([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "interactive", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), t([o({ type: String })], c.prototype, "href", void 0), t([o({ type: String })], c.prototype, "target", void 0), c = t([a("md-card")], c);
+//#endregion
+export { c as t };
 
-//# sourceMappingURL=card-DVffdPpv.js.map
+//# sourceMappingURL=card-CVhWizDF.js.map