@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/search-bar-B6xxVT7u.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar-B6xxVT7u.js","names":[],"sources":["../../src/components/search-bar/search-bar.css.ts","../../src/components/search-bar/search-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const searchBarStyles = css`\n  :host {\n    display: block;\n    box-sizing: border-box;\n    position: relative;\n    width: 100%;\n    max-width: var(--md-search-bar-max-width, 100%);\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    vertical-align: middle;\n\n    --_height: var(--md-search-bar-height, 56px);\n    --_shape: var(--md-search-bar-shape, var(--md-search-bar-border-radius, var(--md-sys-shape-corner-full, 28px)));\n    --_shape-active: var(--md-search-bar-shape-active, var(--md-sys-shape-corner-extra-large, 28px 28px 16px 16px));\n    --_bg: var(--md-search-bar-container-color, var(--md-search-bar-bg, var(--md-sys-color-surface-container-high, #ECE6F0)));\n    --_elevation: var(--md-search-bar-elevation, var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15)));\n    --_elevation-active: var(--md-search-bar-elevation-active, var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15)));\n    --_btn-size: var(--md-search-bar-icon-button-size, 40px);\n    --_icon-size: var(--md-search-bar-icon-size, 24px);\n    --_font-size: var(--md-search-bar-font-size, var(--md-sys-typescale-body-large-size, 16px));\n    --_line-height: var(--md-search-bar-line-height, var(--md-sys-typescale-body-large-line-height, 24px));\n    --_padding: var(--md-search-bar-padding, 0 8px 0 16px);\n  }\n\n  :host([size=\"small\"]),\n  :host([size=\"compact\"]),\n  :host([compact]) {\n    --_height: var(--md-search-bar-height, 40px);\n    --_shape: var(--md-search-bar-shape, var(--md-search-bar-border-radius, 20px));\n    --_shape-active: var(--md-search-bar-shape-active, 20px 20px 12px 12px);\n    --_btn-size: var(--md-search-bar-icon-button-size, 32px);\n    --_icon-size: var(--md-search-bar-icon-size, 20px);\n    --_font-size: var(--md-search-bar-font-size, var(--md-sys-typescale-body-medium-size, 14px));\n    --_line-height: var(--md-search-bar-line-height, 20px);\n    --_padding: var(--md-search-bar-padding, 0 6px 0 12px);\n  }\n\n  :host([size=\"large\"]) {\n    --_height: var(--md-search-bar-height, 64px);\n    --_shape: var(--md-search-bar-shape, var(--md-search-bar-border-radius, 32px));\n    --_shape-active: var(--md-search-bar-shape-active, 32px 32px 20px 20px);\n    --_btn-size: var(--md-search-bar-icon-button-size, 48px);\n    --_icon-size: var(--md-search-bar-icon-size, 24px);\n    --_font-size: var(--md-search-bar-font-size, 18px);\n    --_line-height: var(--md-search-bar-line-height, 26px);\n    --_padding: var(--md-search-bar-padding, 0 12px 0 20px);\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .scrim {\n    display: none;\n  }\n\n  /* Scrim when active in docked mode to catch outside clicks */\n  :host([active]) .scrim {\n    display: block;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 40;\n    background: transparent;\n  }\n\n  .search-container {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    background-color: var(--_bg);\n    border-radius: var(--_shape);\n    box-shadow: var(--_elevation);\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                border-radius 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .search-bar-header {\n    display: flex;\n    align-items: center;\n    min-height: var(--_height);\n    height: var(--_height);\n    padding: var(--_padding);\n    box-sizing: border-box;\n    gap: 8px;\n  }\n\n  .leading-slot, .trailing-slot {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .icon-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_btn-size);\n    height: var(--_btn-size);\n    border: none;\n    background: transparent;\n    border-radius: 50%;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    padding: 0;\n    outline: none;\n    position: relative;\n    transition: background-color 150ms ease;\n  }\n\n  .icon-btn md-icon {\n    font-size: var(--_icon-size);\n    --md-icon-size: var(--_icon-size);\n  }\n\n  .icon-btn:hover {\n    background-color: rgba(73, 69, 79, 0.08);\n  }\n\n  .icon-btn:focus-visible {\n    background-color: rgba(73, 69, 79, 0.12);\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    align-items: center;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: transparent;\n    outline: none;\n    font-family: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--_line-height);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    padding: 0 4px;\n    margin: 0;\n    box-sizing: border-box;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  input::-webkit-search-decoration,\n  input::-webkit-search-cancel-button,\n  input::-webkit-search-results-button,\n  input::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n    appearance: none;\n    display: none;\n  }\n\n  input::-ms-clear,\n  input::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  input::placeholder {\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    opacity: 0.8;\n  }\n\n  /* Active Docked Mode */\n  :host([active]) .search-container {\n    z-index: 50;\n    border-radius: var(--_shape-active);\n    box-shadow: var(--_elevation-active);\n  }\n\n  /* Divider when active */\n  .divider {\n    display: none;\n    height: 1px;\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    margin: 0 16px;\n  }\n\n  :host([active]) .divider {\n    display: block;\n  }\n\n  /* Suggestions / Content Container */\n  .suggestions-container {\n    display: none;\n    flex-direction: column;\n    max-height: 360px;\n    overflow-y: auto;\n    padding: 8px 0;\n    box-sizing: border-box;\n  }\n\n  :host([active]) .suggestions-container {\n    display: flex;\n  }\n\n  .suggestion-item {\n    display: flex;\n    align-items: center;\n    min-height: 48px;\n    padding: 0 16px;\n    gap: 16px;\n    box-sizing: border-box;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    transition: background-color 150ms ease;\n  }\n\n  .suggestion-item:hover,\n  .suggestion-item.highlighted {\n    background-color: rgba(73, 69, 79, 0.08);\n  }\n\n  .suggestion-item.selected {\n    background-color: rgba(73, 69, 79, 0.12);\n  }\n\n  .suggestion-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .suggestion-icon md-icon {\n    font-size: var(--_icon-size);\n    --md-icon-size: var(--_icon-size);\n  }\n\n  .suggestion-text {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .suggestion-label {\n    font-size: var(--_font-size);\n    line-height: 20px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .suggestion-supporting {\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-top: 2px;\n  }\n\n  .suggestion-trailing {\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .search-trigger-container {\n    display: none;\n  }\n\n  /* Responsive Fullscreen / Mobile Collapsed Mode */\n  @media (max-width: 768px) {\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])),\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) {\n      display: inline-flex;\n      width: auto;\n      max-width: none;\n      vertical-align: middle;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background-color: transparent;\n      border-radius: 50%;\n      box-shadow: none;\n      cursor: pointer;\n      user-select: none;\n      outline: none;\n      transition: background-color 200ms ease, box-shadow 200ms ease;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing {\n      height: var(--_height);\n      padding: 0 4px;\n      gap: 2px;\n      background-color: var(--_bg);\n      border-radius: var(--_shape);\n      box-shadow: var(--_elevation);\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing:hover,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing:hover {\n      box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container:focus-visible,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container:focus-visible {\n      outline: 2px solid var(--md-sys-color-primary, #6750A4);\n      outline-offset: 2px;\n    }\n\n    .trigger-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--_btn-size);\n      height: var(--_btn-size);\n      min-width: var(--_btn-size);\n      min-height: var(--_btn-size);\n      border-radius: 50%;\n      border: none;\n      background: transparent;\n      color: var(--md-sys-color-on-surface-variant, #49454F);\n      cursor: pointer;\n      padding: 0;\n      margin: 0;\n      outline: none;\n      position: relative;\n      transition: background-color 150ms ease, color 150ms ease;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .trigger-btn md-icon {\n      font-size: var(--_icon-size);\n      --md-icon-size: var(--_icon-size);\n    }\n\n    .trigger-btn:hover {\n      background-color: rgba(73, 69, 79, 0.08);\n    }\n\n    .trigger-btn:focus-visible {\n      background-color: rgba(73, 69, 79, 0.12);\n    }\n\n    .trigger-divider {\n      width: 1px;\n      height: 22px;\n      background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n      margin: 0 2px;\n      flex-shrink: 0;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-container,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-container {\n      display: none;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .scrim,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .scrim {\n      display: none;\n    }\n\n    :host([responsive][active]),\n    :host([collapse-on-mobile][active]) {\n      display: block;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100vw;\n      height: 100vh;\n      height: 100dvh;\n      max-width: 100vw;\n      margin: 0;\n      padding: 0;\n      z-index: 99999;\n    }\n\n    :host([responsive][active]) .search-trigger-container,\n    :host([collapse-on-mobile][active]) .search-trigger-container {\n      display: none;\n    }\n\n    :host([responsive][active]) .scrim,\n    :host([collapse-on-mobile][active]) .scrim {\n      display: none;\n    }\n\n    :host([responsive][active]) .search-container,\n    :host([collapse-on-mobile][active]) .search-container {\n      display: flex;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100vw;\n      height: 100vh;\n      height: 100dvh;\n      max-width: 100vw;\n      border-radius: 0;\n      box-shadow: none;\n      z-index: 99999;\n      background-color: var(--_bg);\n    }\n\n    :host([responsive][active]) .suggestions-container,\n    :host([collapse-on-mobile][active]) .suggestions-container {\n      flex: 1;\n      max-height: calc(100vh - 57px);\n      max-height: calc(100dvh - 57px);\n    }\n  }\n\n  /* Forced Fullscreen attribute */\n  :host([fullscreen][active]) {\n    display: block;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    height: 100vh;\n    height: 100dvh;\n    max-width: 100vw;\n    z-index: 99999;\n  }\n\n  :host([fullscreen][active]) .search-trigger-container {\n    display: none;\n  }\n\n  :host([fullscreen][active]) .scrim {\n    display: none;\n  }\n\n  :host([fullscreen][active]) .search-container {\n    display: flex;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    height: 100vh;\n    height: 100dvh;\n    max-width: 100vw;\n    border-radius: 0;\n    box-shadow: none;\n    z-index: 99999;\n    background-color: var(--_bg);\n  }\n\n  :host([fullscreen][active]) .suggestions-container {\n    flex: 1;\n    max-height: calc(100vh - 57px);\n    max-height: calc(100dvh - 57px);\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../icon/icon.js';\nimport { searchBarStyles } from './search-bar.css.js';\n\nexport type SearchBarSize = 'small' | 'compact' | 'medium' | 'large';\n\nexport interface SearchSuggestion {\n  id?: string;\n  label: string;\n  value?: string;\n  supportingText?: string;\n  trailingSupportingText?: string;\n  icon?: string;\n  [key: string]: unknown;\n}\n\n@customElement('md-search-bar')\nexport class MdSearchBar extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, searchBarStyles];\n\n  @property({ type: String, reflect: true })\n  size: SearchBarSize = 'medium';\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  placeholder = 'Search';\n\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  @property({ type: Array })\n  suggestions: Array<string | SearchSuggestion> = [];\n\n  @property({ type: String, attribute: 'leading-icon' })\n  leadingIcon = 'search';\n\n  @property({ type: String, attribute: 'active-leading-icon' })\n  activeLeadingIcon = 'arrow_back';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @property({ type: Boolean, attribute: 'show-back-button' })\n  showBackButton = true;\n\n  @property({ type: Boolean, attribute: 'show-clear-button' })\n  showClearButton = true;\n\n  @property({ type: Boolean, reflect: true })\n  responsive = true;\n\n  @property({ type: Boolean, attribute: 'collapse-on-mobile', reflect: true })\n  collapseOnMobile = true;\n\n  @property({ type: Boolean, reflect: true })\n  fullscreen = false;\n\n  @property({ type: Boolean, attribute: 'auto-deactivate-on-select' })\n  autoDeactivateOnSelect = true;\n\n  @state()\n  private highlightedIndex = -1;\n\n  @query('input')\n  private inputElement?: HTMLInputElement;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.toggleAttribute('active', this.active);\n    this.toggleAttribute('collapse-on-mobile', this.collapseOnMobile);\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('value')) {\n      this.setFormValue(this.value);\n      this.toggleAttribute('has-value', Boolean(this.value));\n    }\n    if (changedProperties.has('active')) {\n      this.toggleAttribute('active', this.active);\n      if (!this.active) {\n        this.highlightedIndex = -1;\n      }\n    }\n    if (changedProperties.has('collapseOnMobile')) {\n      this.toggleAttribute('collapse-on-mobile', this.collapseOnMobile);\n    }\n  }\n\n  override formResetCallback() {\n    this.value = '';\n    this.setFormValue(null);\n    this.toggleAttribute('has-value', false);\n    this.highlightedIndex = -1;\n  }\n\n  /**\n   * Focuses the search input field.\n   */\n  override focus() {\n    this.inputElement?.focus();\n  }\n\n  /**\n   * Opens / activates the search view.\n   */\n  show() {\n    if (!this.active) {\n      this.active = true;\n      this.emitEvent('active-change', { active: true });\n    }\n    this.updateComplete.then(() => {\n      this.inputElement?.focus();\n    });\n  }\n\n  /**\n   * Alias for show()\n   */\n  open() {\n    this.show();\n  }\n\n  /**\n   * Closes / deactivates the search view.\n   */\n  close() {\n    if (this.active) {\n      this.active = false;\n      this.highlightedIndex = -1;\n      this.emitEvent('active-change', { active: false });\n    }\n  }\n\n  /**\n   * Alias for close()\n   */\n  collapse() {\n    this.close();\n  }\n\n  /**\n   * Toggles the active state of the search bar.\n   */\n  toggle() {\n    if (this.active) {\n      this.close();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Clears the current search input.\n   */\n  clear() {\n    this.value = '';\n    this.setFormValue('');\n    this.toggleAttribute('has-value', false);\n    this.highlightedIndex = -1;\n    this.emitEvent('input', { value: '' });\n    this.emitEvent('clear');\n    this.inputElement?.focus();\n  }\n\n  private handleFocus = () => {\n    if (!this.active) {\n      this.active = true;\n      this.emitEvent('active-change', { active: true });\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.highlightedIndex = -1;\n    this.emitEvent('input', { value: this.value });\n  };\n\n  private handleChange = () => {\n    this.emitEvent('change', { value: this.value });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const count = this.suggestions.length;\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      this.inputElement?.blur();\n      return;\n    }\n\n    if (event.key === 'ArrowDown') {\n      if (!this.active) {\n        this.show();\n        return;\n      }\n      if (count > 0) {\n        event.preventDefault();\n        this.highlightedIndex = (this.highlightedIndex + 1) % count;\n      }\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      if (count > 0 && this.active) {\n        event.preventDefault();\n        this.highlightedIndex = this.highlightedIndex <= 0 ? count - 1 : this.highlightedIndex - 1;\n      }\n      return;\n    }\n\n    if (event.key === 'Enter') {\n      if (this.active && this.highlightedIndex >= 0 && this.highlightedIndex < count) {\n        const item = this.suggestions[this.highlightedIndex];\n        if (item !== undefined) {\n          event.preventDefault();\n          this.selectSuggestion(item, this.highlightedIndex);\n        }\n      } else {\n        this.emitEvent('search', { value: this.value });\n      }\n    }\n  };\n\n  private handleTriggerClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.show();\n  };\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.show();\n    }\n  };\n\n  private handleTrailingTriggerClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    const allowed = this.emitEvent('trailing-icon-click', { icon: this.trailingIcon });\n    if (allowed) {\n      this.show();\n    }\n  };\n\n  private handleBackClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.close();\n  };\n\n  private handleScrimClick = () => {\n    this.close();\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.clear();\n  };\n\n  private selectSuggestion(suggestion: string | SearchSuggestion, index: number) {\n    const label = typeof suggestion === 'string' ? suggestion : suggestion.label;\n    const value = typeof suggestion === 'string' ? suggestion : (suggestion.value ?? suggestion.label);\n\n    this.value = value;\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.emitEvent('suggestion-select', { suggestion, label, value, index });\n    this.emitEvent('search', { value: this.value, suggestion });\n\n    if (this.autoDeactivateOnSelect) {\n      this.close();\n    }\n  }\n\n  private renderSuggestionItem(suggestion: string | SearchSuggestion, index: number) {\n    const isString = typeof suggestion === 'string';\n    const label = isString ? suggestion : suggestion.label;\n    const supportingText = !isString ? suggestion.supportingText : undefined;\n    const trailingSupportingText = !isString ? suggestion.trailingSupportingText : undefined;\n    const iconName = !isString && suggestion.icon ? suggestion.icon : 'history';\n    const isHighlighted = this.highlightedIndex === index;\n\n    return html`\n      <div\n        class=\"suggestion-item ${isHighlighted ? 'highlighted' : ''}\"\n        role=\"option\"\n        aria-selected=${isHighlighted ? 'true' : 'false'}\n        @click=${() => this.selectSuggestion(suggestion, index)}\n      >\n        <span class=\"suggestion-icon\">\n          <md-icon name=${iconName}></md-icon>\n        </span>\n        <div class=\"suggestion-text\">\n          <span class=\"suggestion-label\">${label}</span>\n          ${supportingText ? html`<span class=\"suggestion-supporting\">${supportingText}</span>` : nothing}\n        </div>\n        ${trailingSupportingText ? html`<span class=\"suggestion-trailing\">${trailingSupportingText}</span>` : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    const showBack = this.active && this.showBackButton;\n    const hasTrailing = Boolean(this.trailingIcon);\n\n    return html`\n      <div\n        class=\"search-trigger-container ${hasTrailing ? 'has-trailing' : ''}\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=${this.placeholder || 'Search'}\n        title=${this.placeholder || 'Search'}\n        ?disabled=${this.disabled}\n        @click=${this.handleTriggerClick}\n        @keydown=${this.handleTriggerKeyDown}\n      >\n        <button\n          class=\"trigger-btn\"\n          type=\"button\"\n          aria-label=${this.placeholder || 'Search'}\n          title=${this.placeholder || 'Search'}\n          ?disabled=${this.disabled}\n          @click=${this.handleTriggerClick}\n        >\n          <md-icon name=${this.leadingIcon || 'search'}></md-icon>\n        </button>\n\n        ${hasTrailing\n          ? html`\n              <div class=\"trigger-divider\" aria-hidden=\"true\"></div>\n              <button\n                class=\"trigger-btn trigger-trailing-btn\"\n                type=\"button\"\n                aria-label=${this.trailingIcon}\n                title=${this.trailingIcon}\n                ?disabled=${this.disabled}\n                @click=${this.handleTrailingTriggerClick}\n              >\n                <md-icon name=${this.trailingIcon}></md-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n\n      <div class=\"scrim\" @click=${this.handleScrimClick}></div>\n\n      <div class=\"search-container\" role=\"search\">\n        <div class=\"search-bar-header\">\n          <span class=\"leading-slot\">\n            <slot name=\"leading-icon\">\n              ${showBack\n                ? html`\n                    <button\n                      class=\"icon-btn\"\n                      type=\"button\"\n                      aria-label=\"Back\"\n                      @click=${this.handleBackClick}\n                    >\n                      <md-icon name=${this.activeLeadingIcon}></md-icon>\n                    </button>\n                  `\n                : html`\n                    <span class=\"icon-btn\" style=\"cursor: default;\">\n                      <md-icon name=${this.leadingIcon}></md-icon>\n                    </span>\n                  `}\n            </slot>\n          </span>\n\n          <div class=\"input-wrapper\">\n            <input\n              type=\"search\"\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded=${this.active ? 'true' : 'false'}\n              aria-label=${this.placeholder}\n              placeholder=${this.placeholder}\n              .value=${this.value}\n              ?disabled=${this.disabled}\n              @input=${this.handleInput}\n              @change=${this.handleChange}\n              @keydown=${this.handleKeyDown}\n              @focus=${this.handleFocus}\n              @click=${this.handleFocus}\n            />\n          </div>\n\n          <span class=\"trailing-slot\">\n            ${this.showClearButton && this.value\n              ? html`\n                  <button\n                    class=\"icon-btn clear-btn\"\n                    type=\"button\"\n                    aria-label=\"Clear search\"\n                    @click=${this.handleClearClick}\n                  >\n                    <md-icon name=\"close\"></md-icon>\n                  </button>\n                `\n              : nothing}\n\n            <slot name=\"trailing-icon\">\n              ${this.trailingIcon\n                ? html`\n                    <span class=\"icon-btn\" style=\"cursor: default;\">\n                      <md-icon name=${this.trailingIcon}></md-icon>\n                    </span>\n                  `\n                : nothing}\n            </slot>\n          </span>\n        </div>\n\n        <div class=\"divider\"></div>\n\n        <div class=\"suggestions-container\" role=\"listbox\" aria-label=\"Suggestions\">\n          <slot name=\"suggestions\">\n            ${this.suggestions.map((item, idx) => this.renderSuggestionItem(item, idx))}\n          </slot>\n          <div class=\"extra-content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\n@customElement('md-search')\nexport class MdSearch extends MdSearchBar {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-search-bar': MdSearchBar;\n    'md-search': MdSearch;\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/segmented-button-Fon9kOHV.js

@@ -0,0 +1,253 @@
+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/segmented-button/segmented-button.css.ts
+var c = n`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    height: 40px;
+    min-height: 40px;
+    padding: 0 16px;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-label-large-size, 14px);
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
+                color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([selected]) {
+    background-color: var(--md-sys-color-secondary-container, #E8DEF8);
+    color: var(--md-sys-color-on-secondary-container, #1D192B);
+  }
+
+  :host(:hover:not([disabled])) {
+    background-color: rgba(29, 27, 32, 0.08);
+  }
+
+  :host([selected]:hover:not([disabled])) {
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container, #E8DEF8) 90%, #1D192B 10%);
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    gap: 8px;
+    position: relative;
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    --md-icon-size: 18px;
+  }
+
+  .checkmark-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    animation: checkmark-pop 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  @keyframes checkmark-pop {
+    0% {
+      transform: scale(0.6);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .label {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`, l = n`
+  :host {
+    display: inline-flex;
+    align-items: stretch;
+    position: relative;
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+    border: 1px solid var(--md-sys-color-outline, #79747E);
+    background-color: transparent;
+    overflow: hidden;
+    box-sizing: border-box;
+    vertical-align: middle;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  ::slotted(md-segmented-button:not(:first-child)) {
+    border-left: 1px solid var(--md-sys-color-outline, #79747E);
+  }
+`, u = class extends e {
+	constructor(...e) {
+		super(...e), this.selected = !1, this.disabled = !1, this.value = "", this.label = "", this.icon = "", this.noCheckmark = !1, this.handleClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault(), e.stopImmediatePropagation();
+				return;
+			}
+			this.closest("md-segmented-button-set") || (this.selected = !this.selected, this.emitEvent("change", {
+				selected: this.selected,
+				value: this.value || this.label || this.textContent?.trim() || ""
+			}));
+		}, this.handleKeyDown = (e) => {
+			this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.click());
+		};
+	}
+	static {
+		this.styles = [e.styles, c];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "button"), this.updateAriaAttributes(), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	updated(e) {
+		super.updated(e), (e.has("selected") || e.has("disabled")) && this.updateAriaAttributes();
+	}
+	updateAriaAttributes() {
+		this.setAttribute("aria-pressed", this.selected ? "true" : "false"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+	}
+	render() {
+		let e = this.selected && !this.noCheckmark, t = !!(this.icon || this.assignedIcons && this.assignedIcons.length > 0);
+		return r`
+      <div class="button">
+        <md-ripple ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring></md-focus-ring>
+
+        ${e ? r`
+              <span class="icon checkmark-icon" aria-hidden="true">
+                <md-icon name="check" size="18"></md-icon>
+              </span>
+            ` : t ? r`
+              <span class="icon">
+                <slot name="icon">
+                  ${this.icon ? r`<md-icon name=${this.icon} size="18"></md-icon>` : i}
+                </slot>
+              </span>
+            ` : r`<slot name="icon"></slot>`}
+
+        <span class="label">
+          <slot>${this.label}</slot>
+        </span>
+      </div>
+    `;
+	}
+};
+t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "selected", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), t([o({ type: String })], u.prototype, "value", void 0), t([o({ type: String })], u.prototype, "label", void 0), t([o({ type: String })], u.prototype, "icon", void 0), t([o({
+	type: Boolean,
+	attribute: "no-checkmark",
+	reflect: !0
+})], u.prototype, "noCheckmark", void 0), t([s({ slot: "icon" })], u.prototype, "assignedIcons", void 0), u = t([a("md-segmented-button")], u);
+var d = class extends e {
+	constructor(...e) {
+		super(...e), this.multiselect = !1, this.disabled = !1, this.handleSlotChange = () => {
+			this.syncRovingTabIndex(), this.disabled && this.syncDisabled();
+		}, this.handleClick = (e) => {
+			if (this.disabled) return;
+			let t = e.target.closest("md-segmented-button");
+			if (!t || t.disabled || !this.buttons.includes(t)) return;
+			let n = this.buttons.indexOf(t);
+			this.multiselect ? t.selected = !t.selected : this.buttons.forEach((e) => {
+				e.selected = e === t;
+			}), this.syncRovingTabIndex();
+			let r = this.buttons.filter((e) => e.selected).map((e) => e.value || e.label || e.textContent?.trim() || ""), i = t.value || t.label || t.textContent?.trim() || "";
+			this.emitEvent("change", {
+				target: t,
+				index: n,
+				selected: t.selected,
+				value: i,
+				values: r
+			});
+		}, this.handleKeyDown = (e) => {
+			let t = this.buttons.filter((e) => !e.disabled);
+			if (t.length === 0) return;
+			let n = document.activeElement, r = t.findIndex((e) => e === n || e.shadowRoot && e.shadowRoot.activeElement === n), i = -1;
+			if (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]) {
+				let e = t[i];
+				this.buttons.forEach((t) => {
+					t.tabIndex = t === e ? 0 : -1;
+				}), e.focus();
+			}
+		};
+	}
+	static {
+		this.styles = [e.styles, l];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "group"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	updated(e) {
+		super.updated(e), e.has("disabled") && this.syncDisabled();
+	}
+	syncDisabled() {
+		this.buttons && this.buttons.forEach((e) => {
+			e.disabled = this.disabled;
+		});
+	}
+	syncRovingTabIndex() {
+		if (!this.buttons || this.buttons.length === 0) return;
+		let e = this.buttons.find((e) => e.selected && !e.disabled), t = this.buttons.find((e) => !e.disabled), n = e || t;
+		this.buttons.forEach((e) => {
+			e.tabIndex = e === n ? 0 : -1;
+		});
+	}
+	render() {
+		return r`<slot @slotchange=${this.handleSlotChange}></slot>`;
+	}
+};
+t([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "multiselect", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), t([s({ selector: "md-segmented-button" })], d.prototype, "buttons", void 0), d = t([a("md-segmented-button-set")], d);
+//#endregion
+export { d as n, u as t };
+
+//# sourceMappingURL=segmented-button-Fon9kOHV.js.map

package/dist/chunks/{segmented-button-B0BvGSQ7.js.map → segmented-button-Fon9kOHV.js.map}

@@ -1 +1 @@
-{"version":3,"file":"segmented-button-B0BvGSQ7.js","names":[],"sources":["../../src/components/segmented-button/segmented-button.css.ts","../../src/components/segmented-button/segmented-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const segmentedButtonStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    box-sizing: border-box;\n    height: 40px;\n    min-height: 40px;\n    padding: 0 16px;\n    background-color: transparent;\n    color: var(--md-sys-color-on-surface, #1D1B20);\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    cursor: pointer;\n    user-select: none;\n    outline: none;\n    text-decoration: none;\n    -webkit-tap-highlight-color: transparent;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([selected]) {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n  }\n\n  :host(:hover:not([disabled])) {\n    background-color: rgba(29, 27, 32, 0.08);\n  }\n\n  :host([selected]:hover:not([disabled])) {\n    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container, #E8DEF8) 90%, #1D192B 10%);\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n    cursor: not-allowed;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    gap: 8px;\n    position: relative;\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 18px;\n    --md-icon-size: 18px;\n  }\n\n  .checkmark-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    animation: checkmark-pop 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  @keyframes checkmark-pop {\n    0% {\n      transform: scale(0.6);\n      opacity: 0;\n    }\n    100% {\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  .label {\n    display: inline-flex;\n    align-items: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`;\n\nexport const segmentedButtonSetStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: stretch;\n    position: relative;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    border: 1px solid var(--md-sys-color-outline, #79747E);\n    background-color: transparent;\n    overflow: hidden;\n    box-sizing: border-box;\n    vertical-align: middle;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  ::slotted(md-segmented-button:not(:first-child)) {\n    border-left: 1px solid var(--md-sys-color-outline, #79747E);\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 { segmentedButtonStyles, segmentedButtonSetStyles } from './segmented-button.css.js';\n\n@customElement('md-segmented-button')\nexport class MdSegmentedButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, segmentedButtonStyles];\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: Boolean, attribute: 'no-checkmark', reflect: true })\n  noCheckmark = false;\n\n  @queryAssignedElements({ slot: 'icon' })\n  private assignedIcons!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'button');\n    this.updateAriaAttributes();\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\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('disabled')) {\n      this.updateAriaAttributes();\n    }\n  }\n\n  private updateAriaAttributes() {\n    this.setAttribute('aria-pressed', this.selected ? 'true' : 'false');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    const parentSet = this.closest('md-segmented-button-set');\n    if (!parentSet) {\n      this.selected = !this.selected;\n      this.emitEvent('change', {\n        selected: this.selected,\n        value: this.value || this.label || this.textContent?.trim() || '',\n      });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.click();\n    }\n  };\n\n  override render() {\n    const showCheckmark = this.selected && !this.noCheckmark;\n    const hasIcon = Boolean(this.icon || (this.assignedIcons && this.assignedIcons.length > 0));\n\n    return html`\n      <div class=\"button\">\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring></md-focus-ring>\n\n        ${showCheckmark\n          ? html`\n              <span class=\"icon checkmark-icon\" aria-hidden=\"true\">\n                <md-icon name=\"check\" size=\"18\"></md-icon>\n              </span>\n            `\n          : hasIcon\n          ? html`\n              <span class=\"icon\">\n                <slot name=\"icon\">\n                  ${this.icon ? html`<md-icon name=${this.icon} size=\"18\"></md-icon>` : nothing}\n                </slot>\n              </span>\n            `\n          : html`<slot name=\"icon\"></slot>`}\n\n        <span class=\"label\">\n          <slot>${this.label}</slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\n@customElement('md-segmented-button-set')\nexport class MdSegmentedButtonSet extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, segmentedButtonSetStyles];\n\n  @property({ type: Boolean, reflect: true })\n  multiselect = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @queryAssignedElements({ selector: 'md-segmented-button' })\n  private buttons!: MdSegmentedButton[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'group');\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\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('disabled')) {\n      this.syncDisabled();\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.syncRovingTabIndex();\n    if (this.disabled) {\n      this.syncDisabled();\n    }\n  };\n\n  private syncDisabled() {\n    if (!this.buttons) return;\n    this.buttons.forEach((btn) => {\n      btn.disabled = this.disabled;\n    });\n  }\n\n  private syncRovingTabIndex() {\n    if (!this.buttons || this.buttons.length === 0) return;\n    const selectedBtn = this.buttons.find((b) => b.selected && !b.disabled);\n    const firstEnabled = this.buttons.find((b) => !b.disabled);\n    const focusTarget = selectedBtn || firstEnabled;\n\n    this.buttons.forEach((b) => {\n      b.tabIndex = b === focusTarget ? 0 : -1;\n    });\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) return;\n    const target = (event.target as HTMLElement).closest('md-segmented-button') as MdSegmentedButton | null;\n    if (!target || target.disabled || !this.buttons.includes(target)) return;\n\n    const index = this.buttons.indexOf(target);\n\n    if (this.multiselect) {\n      target.selected = !target.selected;\n    } else {\n      this.buttons.forEach((btn) => {\n        btn.selected = btn === target;\n      });\n    }\n\n    this.syncRovingTabIndex();\n\n    const selectedButtons = this.buttons.filter((b) => b.selected);\n    const values = selectedButtons.map((b) => b.value || b.label || b.textContent?.trim() || '');\n    const value = target.value || target.label || target.textContent?.trim() || '';\n\n    this.emitEvent('change', {\n      target,\n      index,\n      selected: target.selected,\n      value,\n      values,\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const enabledButtons = this.buttons.filter((b) => !b.disabled);\n    if (enabledButtons.length === 0) return;\n\n    const currentFocus = document.activeElement;\n    const currentIndex = enabledButtons.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 < enabledButtons.length - 1 ? currentIndex + 1 : 0;\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledButtons.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 = enabledButtons.length - 1;\n    }\n\n    if (nextIndex !== -1 && enabledButtons[nextIndex]) {\n      const targetBtn = enabledButtons[nextIndex]!;\n      this.buttons.forEach((b) => {\n        b.tabIndex = b === targetBtn ? 0 : -1;\n      });\n      targetBtn.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-segmented-button': MdSegmentedButton;\n    'md-segmented-button-set': MdSegmentedButtonSet;\n  }\n}\n\n"],"mappings":"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"}
+{"version":3,"file":"segmented-button-Fon9kOHV.js","names":[],"sources":["../../src/components/segmented-button/segmented-button.css.ts","../../src/components/segmented-button/segmented-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const segmentedButtonStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    box-sizing: border-box;\n    height: 40px;\n    min-height: 40px;\n    padding: 0 16px;\n    background-color: transparent;\n    color: var(--md-sys-color-on-surface, #1D1B20);\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    cursor: pointer;\n    user-select: none;\n    outline: none;\n    text-decoration: none;\n    -webkit-tap-highlight-color: transparent;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([selected]) {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n  }\n\n  :host(:hover:not([disabled])) {\n    background-color: rgba(29, 27, 32, 0.08);\n  }\n\n  :host([selected]:hover:not([disabled])) {\n    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container, #E8DEF8) 90%, #1D192B 10%);\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n    cursor: not-allowed;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    gap: 8px;\n    position: relative;\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 18px;\n    --md-icon-size: 18px;\n  }\n\n  .checkmark-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    animation: checkmark-pop 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  @keyframes checkmark-pop {\n    0% {\n      transform: scale(0.6);\n      opacity: 0;\n    }\n    100% {\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  .label {\n    display: inline-flex;\n    align-items: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`;\n\nexport const segmentedButtonSetStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: stretch;\n    position: relative;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    border: 1px solid var(--md-sys-color-outline, #79747E);\n    background-color: transparent;\n    overflow: hidden;\n    box-sizing: border-box;\n    vertical-align: middle;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  ::slotted(md-segmented-button:not(:first-child)) {\n    border-left: 1px solid var(--md-sys-color-outline, #79747E);\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 { segmentedButtonStyles, segmentedButtonSetStyles } from './segmented-button.css.js';\n\n@customElement('md-segmented-button')\nexport class MdSegmentedButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, segmentedButtonStyles];\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: Boolean, attribute: 'no-checkmark', reflect: true })\n  noCheckmark = false;\n\n  @queryAssignedElements({ slot: 'icon' })\n  private assignedIcons!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'button');\n    this.updateAriaAttributes();\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\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('disabled')) {\n      this.updateAriaAttributes();\n    }\n  }\n\n  private updateAriaAttributes() {\n    this.setAttribute('aria-pressed', this.selected ? 'true' : 'false');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    const parentSet = this.closest('md-segmented-button-set');\n    if (!parentSet) {\n      this.selected = !this.selected;\n      this.emitEvent('change', {\n        selected: this.selected,\n        value: this.value || this.label || this.textContent?.trim() || '',\n      });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.click();\n    }\n  };\n\n  override render() {\n    const showCheckmark = this.selected && !this.noCheckmark;\n    const hasIcon = Boolean(this.icon || (this.assignedIcons && this.assignedIcons.length > 0));\n\n    return html`\n      <div class=\"button\">\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring></md-focus-ring>\n\n        ${showCheckmark\n          ? html`\n              <span class=\"icon checkmark-icon\" aria-hidden=\"true\">\n                <md-icon name=\"check\" size=\"18\"></md-icon>\n              </span>\n            `\n          : hasIcon\n          ? html`\n              <span class=\"icon\">\n                <slot name=\"icon\">\n                  ${this.icon ? html`<md-icon name=${this.icon} size=\"18\"></md-icon>` : nothing}\n                </slot>\n              </span>\n            `\n          : html`<slot name=\"icon\"></slot>`}\n\n        <span class=\"label\">\n          <slot>${this.label}</slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\n@customElement('md-segmented-button-set')\nexport class MdSegmentedButtonSet extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, segmentedButtonSetStyles];\n\n  @property({ type: Boolean, reflect: true })\n  multiselect = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @queryAssignedElements({ selector: 'md-segmented-button' })\n  private buttons!: MdSegmentedButton[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'group');\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\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('disabled')) {\n      this.syncDisabled();\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.syncRovingTabIndex();\n    if (this.disabled) {\n      this.syncDisabled();\n    }\n  };\n\n  private syncDisabled() {\n    if (!this.buttons) return;\n    this.buttons.forEach((btn) => {\n      btn.disabled = this.disabled;\n    });\n  }\n\n  private syncRovingTabIndex() {\n    if (!this.buttons || this.buttons.length === 0) return;\n    const selectedBtn = this.buttons.find((b) => b.selected && !b.disabled);\n    const firstEnabled = this.buttons.find((b) => !b.disabled);\n    const focusTarget = selectedBtn || firstEnabled;\n\n    this.buttons.forEach((b) => {\n      b.tabIndex = b === focusTarget ? 0 : -1;\n    });\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) return;\n    const target = (event.target as HTMLElement).closest('md-segmented-button') as MdSegmentedButton | null;\n    if (!target || target.disabled || !this.buttons.includes(target)) return;\n\n    const index = this.buttons.indexOf(target);\n\n    if (this.multiselect) {\n      target.selected = !target.selected;\n    } else {\n      this.buttons.forEach((btn) => {\n        btn.selected = btn === target;\n      });\n    }\n\n    this.syncRovingTabIndex();\n\n    const selectedButtons = this.buttons.filter((b) => b.selected);\n    const values = selectedButtons.map((b) => b.value || b.label || b.textContent?.trim() || '');\n    const value = target.value || target.label || target.textContent?.trim() || '';\n\n    this.emitEvent('change', {\n      target,\n      index,\n      selected: target.selected,\n      value,\n      values,\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const enabledButtons = this.buttons.filter((b) => !b.disabled);\n    if (enabledButtons.length === 0) return;\n\n    const currentFocus = document.activeElement;\n    const currentIndex = enabledButtons.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 < enabledButtons.length - 1 ? currentIndex + 1 : 0;\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledButtons.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 = enabledButtons.length - 1;\n    }\n\n    if (nextIndex !== -1 && enabledButtons[nextIndex]) {\n      const targetBtn = enabledButtons[nextIndex]!;\n      this.buttons.forEach((b) => {\n        b.tabIndex = b === targetBtn ? 0 : -1;\n      });\n      targetBtn.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-segmented-button': MdSegmentedButton;\n    'md-segmented-button-set': MdSegmentedButtonSet;\n  }\n}\n\n"],"mappings":"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"}

package/dist/chunks/{side-sheet-S2w081AK.js → side-sheet-sQ8qGKVm.js}

@@ -1,9 +1,10 @@
-import { n, t } from "./decorate-DXuynaiA.js";
-import "./icon-DrNqcNEL.js";
-import "./icon-button-BQz73GLa.js";
-import { css as h, html as s, nothing as d } from "lit";
-import { customElement as c, property as o } from "lit/decorators.js";
-var p = h`
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import "./icon-FvKeXi61.js";
+import "./icon-button-CulnCZpZ.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/side-sheet/side-sheet.css.ts
+var s = n`
   :host {
     display: contents;
     font-family: var(--md-sys-typescale-font-family, inherit);
@@ -237,42 +238,42 @@ var p = h`
     gap: 8px;
     flex-shrink: 0;
   }
-`, e = class extends n {
-  constructor(...i) {
-    super(...i), this.open = !1, this.type = "standard", this.modal = !1, this.side = "end", this.headline = "", this.subhead = "", this.hideCloseButton = !1, this.divider = !1, this.handleKeyDown = (a) => {
-      a.key === "Escape" && this.open && this.isModalMode() && (this.close(), this.emitEvent("cancel"));
-    }, this.handleScrimClick = () => {
-      this.close(), this.emitEvent("scrim-click");
-    }, this.handleCloseClick = () => {
-      this.close(), this.emitEvent("close-click");
-    };
-  }
-  static {
-    this.styles = [n.styles, p];
-  }
-  connectedCallback() {
-    super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown);
-  }
-  updated(i) {
-    super.updated(i), i.has("open") && (this.open ? this.emitEvent("open") : this.emitEvent("close"));
-  }
-  isModalMode() {
-    return this.modal || this.type === "modal";
-  }
-  show() {
-    this.open = !0;
-  }
-  close() {
-    this.open = !1;
-  }
-  toggle() {
-    this.open = !this.open;
-  }
-  render() {
-    const i = this.isModalMode(), a = this.headline ? s`<h2 class="headline">${this.headline}</h2>` : d, r = this.subhead ? s`<p class="subhead">${this.subhead}</p>` : d, l = this.hideCloseButton ? d : s`
+`, c = class extends e {
+	constructor(...e) {
+		super(...e), this.open = !1, this.type = "standard", this.modal = !1, this.side = "end", this.headline = "", this.subhead = "", this.hideCloseButton = !1, this.divider = !1, this.handleKeyDown = (e) => {
+			e.key === "Escape" && this.open && this.isModalMode() && (this.close(), this.emitEvent("cancel"));
+		}, this.handleScrimClick = () => {
+			this.close(), this.emitEvent("scrim-click");
+		}, this.handleCloseClick = () => {
+			this.close(), this.emitEvent("close-click");
+		};
+	}
+	static {
+		this.styles = [e.styles, s];
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown);
+	}
+	updated(e) {
+		super.updated(e), e.has("open") && (this.open ? this.emitEvent("open") : this.emitEvent("close"));
+	}
+	isModalMode() {
+		return this.modal || this.type === "modal";
+	}
+	show() {
+		this.open = !0;
+	}
+	close() {
+		this.open = !1;
+	}
+	toggle() {
+		this.open = !this.open;
+	}
+	render() {
+		let e = this.isModalMode(), t = this.headline ? r`<h2 class="headline">${this.headline}</h2>` : i, n = this.subhead ? r`<p class="subhead">${this.subhead}</p>` : i, a = this.hideCloseButton ? i : r`
           <slot name="close-button">
             <md-icon-button
               class="close-button"
@@ -282,13 +283,13 @@ var p = h`
             ></md-icon-button>
           </slot>
         `;
-    return s`
+		return r`
       <div class="scrim" @click=${this.handleScrimClick}></div>
 
       <aside
         class="sheet"
-        role=${i ? "dialog" : "complementary"}
-        aria-modal=${i ? "true" : d}
+        role=${e ? "dialog" : "complementary"}
+        aria-modal=${e ? "true" : i}
         aria-hidden=${this.open ? "false" : "true"}
         aria-label=${this.headline || "Side sheet"}
       >
@@ -296,21 +297,21 @@ var p = h`
           <div class="header">
             <div class="header-content">
               <slot name="headline">
-                ${a}
+                ${t}
               </slot>
               <slot name="subhead">
-                ${r}
+                ${n}
               </slot>
             </div>
 
             <div class="header-actions">
               <slot name="header-actions"></slot>
-              ${l}
+              ${a}
             </div>
           </div>
         </slot>
 
-        ${this.divider ? s`<div class="divider"></div>` : d}
+        ${this.divider ? r`<div class="divider"></div>` : i}
 
         <div class="content">
           <slot></slot>
@@ -323,38 +324,29 @@ var p = h`
         </slot>
       </aside>
     `;
-  }
+	}
 };
 t([o({
-  type: Boolean,
-  reflect: !0
-})], e.prototype, "open", void 0);
-t([o({
-  type: String,
-  reflect: !0
-})], e.prototype, "type", void 0);
-t([o({
-  type: Boolean,
-  reflect: !0
-})], e.prototype, "modal", void 0);
-t([o({
-  type: String,
-  reflect: !0
-})], e.prototype, "side", void 0);
-t([o({ type: String })], e.prototype, "headline", void 0);
-t([o({ type: String })], e.prototype, "subhead", void 0);
-t([o({
-  type: Boolean,
-  reflect: !0,
-  attribute: "hide-close-button"
-})], e.prototype, "hideCloseButton", void 0);
-t([o({
-  type: Boolean,
-  reflect: !0
-})], e.prototype, "divider", void 0);
-e = t([c("md-side-sheet")], e);
-export {
-  e as t
-};
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "open", void 0), t([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "type", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "modal", void 0), t([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "side", void 0), t([o({ type: String })], c.prototype, "headline", void 0), t([o({ type: String })], c.prototype, "subhead", void 0), t([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-close-button"
+})], c.prototype, "hideCloseButton", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "divider", void 0), c = t([a("md-side-sheet")], c);
+//#endregion
+export { c as t };
 
-//# sourceMappingURL=side-sheet-S2w081AK.js.map
+//# sourceMappingURL=side-sheet-sQ8qGKVm.js.map