@francofantomius/material-components 1.0.1 → 1.1.0

package/dist/chunks/time-picker-CZnb2sWz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-CZnb2sWz.js","names":[],"sources":["../../src/components/time-picker/time-picker.css.ts","../../src/components/time-picker/time-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const timePickerStyles = css`\n  :host {\n    display: inline-block;\n    color: var(--md-sys-color-on-surface, #1d1b20);\n    font-family: var(--md-sys-typescale-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif);\n    user-select: none;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  :host([modal]) {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    z-index: 1000;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n  }\n\n  :host([modal][open]) {\n    pointer-events: auto;\n  }\n\n  :host([modal]:not([open])) {\n    display: none;\n  }\n\n  /* Scrim Backdrop for Modal */\n  .scrim {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.32);\n    z-index: -1;\n    opacity: 0;\n    transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([modal][open]) .scrim {\n    opacity: 1;\n  }\n\n  /* Picker Container / Surface */\n  .picker-surface {\n    background-color: var(--md-sys-color-surface-container-high, #ece6f0);\n    color: var(--md-sys-color-on-surface, #1d1b20);\n    border-radius: var(--md-sys-shape-corner-extra-large, 28px);\n    padding: 24px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    box-shadow: var(--md-sys-elevation-3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.3));\n    max-width: 360px;\n    width: 100%;\n    box-sizing: border-box;\n    position: relative;\n  }\n\n  :host(:not([modal])) .picker-surface {\n    box-shadow: var(--md-sys-elevation-1, 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3));\n    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);\n    background-color: var(--md-sys-color-surface, #fef7ff);\n  }\n\n  /* Headline / Header */\n  .header {\n    width: 100%;\n    margin-bottom: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .headline {\n    font-size: 14px;\n    font-weight: 500;\n    letter-spacing: 0.1px;\n    line-height: 20px;\n    color: var(--md-sys-color-on-surface-variant, #49454f);\n    margin: 0;\n  }\n\n  /* Time Display Input / Cards Row */\n  .time-display-row {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    margin-bottom: 24px;\n    width: 100%;\n  }\n\n  .time-card-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .time-card {\n    width: 96px;\n    height: 72px;\n    background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n    color: var(--md-sys-color-on-surface, #1d1b20);\n    border-radius: var(--md-sys-shape-corner-medium, 8px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 45px;\n    font-weight: 400;\n    line-height: 52px;\n    cursor: pointer;\n    border: 2px solid transparent;\n    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);\n    box-sizing: border-box;\n    position: relative;\n    outline: none;\n  }\n\n  .time-card:focus-visible {\n    border-color: var(--md-sys-color-primary, #6750a4);\n  }\n\n  .time-card.active {\n    background-color: var(--md-sys-color-primary-container, #eaddff);\n    color: var(--md-sys-color-on-primary-container, #21005d);\n    border-color: var(--md-sys-color-primary, #6750a4);\n  }\n\n  .time-input {\n    width: 100%;\n    height: 100%;\n    background: transparent;\n    border: none;\n    outline: none;\n    text-align: center;\n    font-size: 45px;\n    font-weight: 400;\n    line-height: 52px;\n    color: inherit;\n    font-family: inherit;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  .time-card-label {\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface-variant, #49454f);\n    text-transform: capitalize;\n  }\n\n  .time-separator {\n    font-size: 45px;\n    font-weight: 400;\n    line-height: 52px;\n    color: var(--md-sys-color-on-surface, #1d1b20);\n    margin: 0 2px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-bottom: 20px;\n  }\n\n  /* Period Toggle (AM / PM) */\n  .period-toggle {\n    display: flex;\n    flex-direction: column;\n    border: 1px solid var(--md-sys-color-outline, #79747e);\n    border-radius: var(--md-sys-shape-corner-medium, 8px);\n    overflow: hidden;\n    height: 72px;\n    width: 48px;\n    margin-left: 4px;\n    box-sizing: border-box;\n  }\n\n  .period-button {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--md-sys-color-on-surface-variant, #49454f);\n    cursor: pointer;\n    outline: none;\n    transition: background-color 0.15s, color 0.15s;\n    user-select: none;\n  }\n\n  .period-button:first-child {\n    border-bottom: 1px solid var(--md-sys-color-outline, #79747e);\n  }\n\n  .period-button.selected {\n    background-color: var(--md-sys-color-tertiary-container, #ffd8e4);\n    color: var(--md-sys-color-on-tertiary-container, #31111d);\n  }\n\n  .period-button:focus-visible {\n    background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n  }\n\n  /* Clock Dial Surface */\n  .dial-container {\n    width: 256px;\n    height: 256px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    cursor: pointer;\n    margin: 8px 0;\n  }\n\n  .dial-center-pin {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-primary, #6750a4);\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 3;\n    pointer-events: none;\n  }\n\n  .dial-hand {\n    position: absolute;\n    bottom: 50%;\n    left: 50%;\n    width: 2px;\n    background-color: var(--md-sys-color-primary, #6750a4);\n    transform-origin: bottom center;\n    z-index: 2;\n    pointer-events: none;\n    transition: height 0.15s cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .dial-selector-head {\n    position: absolute;\n    top: -24px;\n    left: -23px;\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-primary, #6750a4);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n  }\n\n  .dial-inner-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-on-primary, #ffffff);\n  }\n\n  .dial-number {\n    position: absolute;\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--md-sys-color-on-surface, #1d1b20);\n    transform: translate(-50%, -50%);\n    z-index: 4;\n    pointer-events: none;\n    transition: color 0.15s ease;\n  }\n\n  .dial-number.small {\n    font-size: 13px;\n    color: var(--md-sys-color-on-surface-variant, #49454f);\n  }\n\n  .dial-number.selected {\n    color: var(--md-sys-color-on-primary, #ffffff);\n  }\n\n  /* Actions Row */\n  .actions-row {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-top: 16px;\n  }\n\n  .mode-switch-btn {\n    background: transparent;\n    border: none;\n    color: var(--md-sys-color-on-surface-variant, #49454f);\n    cursor: pointer;\n    padding: 8px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition: background-color 0.15s;\n  }\n\n  .mode-switch-btn:hover {\n    background-color: rgba(0, 0, 0, 0.06);\n  }\n\n  .mode-switch-btn:focus-visible {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n\n  .dialog-buttons {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  /* Disabled state */\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\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 '../button/button.js';\nimport '../icon-button/icon-button.js';\nimport { timePickerStyles } from './time-picker.css.js';\n\nexport type TimePickerFormat = '12h' | '24h';\nexport type TimePickerView = 'dial' | 'input';\nexport type TimePickerField = 'hour' | 'minute';\nexport type TimePeriod = 'AM' | 'PM';\n\n@customElement('md-time-picker')\nexport class MdTimePicker extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, timePickerStyles];\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  format: TimePickerFormat = '12h';\n\n  @property({ type: String })\n  view: TimePickerView = 'dial';\n\n  @property({ type: Boolean, reflect: true })\n  modal = false;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String })\n  headline = 'Select time';\n\n  @property({ type: String, attribute: 'return-value' })\n  returnValue = '';\n\n  @property({ type: Boolean, attribute: 'auto-switch-to-minute' })\n  autoSwitchToMinute = true;\n\n  @property({ type: String, attribute: 'cancel-label' })\n  cancelLabel = 'Cancel';\n\n  @property({ type: String, attribute: 'confirm-label' })\n  confirmLabel = 'OK';\n\n  @state()\n  activeField: TimePickerField = 'hour';\n\n  @state()\n  selectedHour = 12;\n\n  @state()\n  selectedMinute = 0;\n\n  @state()\n  selectedPeriod: TimePeriod = 'AM';\n\n  @state()\n  private isDragging = false;\n\n  @query('.dial-container')\n  private dialContainer?: HTMLElement;\n\n  @query('#hour-input')\n  private hourInputElement?: HTMLInputElement;\n\n  @query('#minute-input')\n  private minuteInputElement?: HTMLInputElement;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.parseValue(this.value);\n    this.syncFormValue();\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('value')) {\n      this.parseValue(this.value);\n      this.syncFormValue();\n    }\n  }\n\n  /**\n   * Parses time string (e.g. \"14:30\", \"02:30 PM\", \"2:30\", \"09:15 AM\") into components.\n   */\n  private parseValue(val: string) {\n    if (!val || typeof val !== 'string') {\n      const now = new Date();\n      let h = now.getHours();\n      const m = now.getMinutes();\n      let p: TimePeriod = 'AM';\n\n      if (this.format === '12h') {\n        p = h >= 12 ? 'PM' : 'AM';\n        h = h % 12 || 12;\n      }\n      this.selectedHour = h;\n      this.selectedMinute = m;\n      this.selectedPeriod = p;\n      return;\n    }\n\n    const trimmed = val.trim();\n    const is12hMatch = trimmed.match(/^(\\d{1,2}):(\\d{2})\\s*(AM|PM)$/i);\n    const is24hMatch = trimmed.match(/^(\\d{1,2}):(\\d{2})$/);\n\n    if (is12hMatch) {\n      let h = parseInt(is12hMatch[1]!, 10);\n      const m = Math.min(59, Math.max(0, parseInt(is12hMatch[2]!, 10)));\n      const p = (is12hMatch[3]!.toUpperCase() as TimePeriod);\n      if (this.format === '24h') {\n        if (p === 'PM' && h < 12) h += 12;\n        if (p === 'AM' && h === 12) h = 0;\n      } else {\n        h = Math.min(12, Math.max(1, h));\n      }\n      this.selectedHour = h;\n      this.selectedMinute = m;\n      this.selectedPeriod = p;\n    } else if (is24hMatch) {\n      let h = parseInt(is24hMatch[1]!, 10);\n      const m = Math.min(59, Math.max(0, parseInt(is24hMatch[2]!, 10)));\n      if (this.format === '12h') {\n        const p: TimePeriod = h >= 12 ? 'PM' : 'AM';\n        h = h % 12 || 12;\n        this.selectedPeriod = p;\n      } else {\n        h = Math.min(23, Math.max(0, h));\n      }\n      this.selectedHour = h;\n      this.selectedMinute = m;\n    }\n  }\n\n  /**\n   * Formats the current time state into a string according to format.\n   */\n  getFormattedTime(): string {\n    const minStr = this.selectedMinute.toString().padStart(2, '0');\n    if (this.format === '24h') {\n      const hrStr = this.selectedHour.toString().padStart(2, '0');\n      return `${hrStr}:${minStr}`;\n    } else {\n      const hrStr = this.selectedHour.toString().padStart(2, '0');\n      return `${hrStr}:${minStr} ${this.selectedPeriod}`;\n    }\n  }\n\n  /**\n   * Formats current time into standard 24h \"HH:MM\" string.\n   */\n  getFormatted24(): string {\n    const minStr = this.selectedMinute.toString().padStart(2, '0');\n    let h = this.selectedHour;\n    if (this.format === '12h') {\n      if (this.selectedPeriod === 'PM' && h < 12) h += 12;\n      if (this.selectedPeriod === 'AM' && h === 12) h = 0;\n    }\n    return `${h.toString().padStart(2, '0')}:${minStr}`;\n  }\n\n  /**\n   * Formats current time into 12h \"hh:mm A\" string.\n   */\n  getFormatted12(): string {\n    const minStr = this.selectedMinute.toString().padStart(2, '0');\n    let h = this.selectedHour;\n    let p = this.selectedPeriod;\n    if (this.format === '24h') {\n      p = h >= 12 ? 'PM' : 'AM';\n      h = h % 12 || 12;\n    }\n    return `${h.toString().padStart(2, '0')}:${minStr} ${p}`;\n  }\n\n  private syncFormValue() {\n    const val = this.getFormattedTime();\n    this.value = val;\n    this.setFormValue(val);\n  }\n\n  override formResetCallback() {\n    this.parseValue('');\n    this.syncFormValue();\n    this.activeField = 'hour';\n  }\n\n  /**\n   * Shows the time picker dialog modal.\n   */\n  showModal() {\n    this.modal = true;\n    this.open = true;\n    this.emitEvent('open');\n  }\n\n  /**\n   * Shows the time picker.\n   */\n  show() {\n    this.open = true;\n    this.emitEvent('open');\n  }\n\n  /**\n   * Closes the modal time picker.\n   */\n  close(returnValue?: string) {\n    if (returnValue !== undefined) {\n      this.returnValue = returnValue;\n    }\n    this.open = false;\n    this.emitEvent('close', { returnValue: this.returnValue });\n  }\n\n  /**\n   * Confirms the selected time and fires change event.\n   */\n  confirm() {\n    this.syncFormValue();\n    const detail = {\n      value: this.value,\n      hour: this.selectedHour,\n      minute: this.selectedMinute,\n      period: this.selectedPeriod,\n      formatted24: this.getFormatted24(),\n      formatted12: this.getFormatted12(),\n    };\n    this.emitEvent('change', detail);\n    this.emitEvent('confirm', detail);\n    if (this.modal) {\n      this.close('confirm');\n    }\n  }\n\n  /**\n   * Cancels selection and closes modal if opened.\n   */\n  cancel() {\n    this.emitEvent('cancel');\n    if (this.modal) {\n      this.close('cancel');\n    }\n  }\n\n  private toggleView() {\n    this.view = this.view === 'dial' ? 'input' : 'dial';\n  }\n\n  private setField(field: TimePickerField) {\n    this.activeField = field;\n  }\n\n  private setPeriod(period: TimePeriod) {\n    if (this.selectedPeriod !== period) {\n      this.selectedPeriod = period;\n      this.syncFormValue();\n      this.notifyInput();\n    }\n  }\n\n  private notifyInput() {\n    this.emitEvent('input', {\n      value: this.getFormattedTime(),\n      hour: this.selectedHour,\n      minute: this.selectedMinute,\n      period: this.selectedPeriod,\n      formatted24: this.getFormatted24(),\n      formatted12: this.getFormatted12(),\n    });\n  }\n\n  /* ------------------- Clock Dial Calculations ------------------- */\n\n  private handleDialPointerDown = (e: PointerEvent) => {\n    if (this.disabled) return;\n    this.isDragging = true;\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n    this.updateDialFromPointer(e);\n  };\n\n  private handleDialPointerMove = (e: PointerEvent) => {\n    if (!this.isDragging || this.disabled) return;\n    this.updateDialFromPointer(e);\n  };\n\n  private handleDialPointerUp = (e: PointerEvent) => {\n    if (!this.isDragging || this.disabled) return;\n    this.isDragging = false;\n    this.updateDialFromPointer(e);\n    this.syncFormValue();\n    this.emitEvent('change', {\n      value: this.value,\n      hour: this.selectedHour,\n      minute: this.selectedMinute,\n      period: this.selectedPeriod,\n      formatted24: this.getFormatted24(),\n      formatted12: this.getFormatted12(),\n    });\n\n    if (this.activeField === 'hour' && this.autoSwitchToMinute) {\n      this.activeField = 'minute';\n    }\n  };\n\n  private updateDialFromPointer(e: PointerEvent) {\n    if (!this.dialContainer) return;\n    const rect = this.dialContainer.getBoundingClientRect();\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n    const x = e.clientX - centerX;\n    const y = e.clientY - centerY;\n\n    let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;\n    if (angle < 0) angle += 360;\n\n    const distance = Math.hypot(x, y);\n\n    if (this.activeField === 'hour') {\n      if (this.format === '24h') {\n        const isInner = distance < 80;\n        let step = Math.round(angle / 30) % 12;\n        if (step === 0) step = 12;\n\n        if (isInner) {\n          this.selectedHour = step; // 1 to 12\n        } else {\n          this.selectedHour = step === 12 ? 0 : step + 12; // 00, 13 to 23\n        }\n      } else {\n        let step = Math.round(angle / 30) % 12;\n        if (step === 0) step = 12;\n        this.selectedHour = step;\n      }\n    } else {\n      const step = Math.round(angle / 6) % 60;\n      this.selectedMinute = step;\n    }\n\n    this.notifyInput();\n  }\n\n  /* ------------------- Text Input Mode Handlers ------------------- */\n\n  private handleHourInput = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    let val = parseInt(input.value, 10);\n    if (isNaN(val)) return;\n\n    if (this.format === '24h') {\n      val = Math.min(23, Math.max(0, val));\n    } else {\n      val = Math.min(12, Math.max(1, val));\n    }\n    this.selectedHour = val;\n    this.syncFormValue();\n    this.notifyInput();\n\n    if (input.value.length >= 2 && this.minuteInputElement) {\n      this.minuteInputElement.focus();\n      this.minuteInputElement.select();\n    }\n  };\n\n  private handleMinuteInput = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    let val = parseInt(input.value, 10);\n    if (isNaN(val)) return;\n\n    val = Math.min(59, Math.max(0, val));\n    this.selectedMinute = val;\n    this.syncFormValue();\n    this.notifyInput();\n  };\n\n  private handleHourBlur = () => {\n    if (this.hourInputElement) {\n      this.hourInputElement.value = this.selectedHour.toString().padStart(2, '0');\n    }\n    this.syncFormValue();\n    this.emitEvent('change', {\n      value: this.value,\n      hour: this.selectedHour,\n      minute: this.selectedMinute,\n      period: this.selectedPeriod,\n    });\n  };\n\n  private handleMinuteBlur = () => {\n    if (this.minuteInputElement) {\n      this.minuteInputElement.value = this.selectedMinute.toString().padStart(2, '0');\n    }\n    this.syncFormValue();\n    this.emitEvent('change', {\n      value: this.value,\n      hour: this.selectedHour,\n      minute: this.selectedMinute,\n      period: this.selectedPeriod,\n    });\n  };\n\n  /* ------------------- Rendering ------------------- */\n\n  private renderDialHand() {\n    let angle = 0;\n    let length = 96; // radius in px\n\n    if (this.activeField === 'hour') {\n      if (this.format === '24h') {\n        if (this.selectedHour >= 1 && this.selectedHour <= 12) {\n          angle = (this.selectedHour % 12) * 30;\n          length = 64; // inner ring\n        } else {\n          const h = this.selectedHour === 0 ? 12 : this.selectedHour - 12;\n          angle = (h % 12) * 30;\n          length = 98; // outer ring\n        }\n      } else {\n        angle = (this.selectedHour % 12) * 30;\n        length = 96;\n      }\n    } else {\n      angle = this.selectedMinute * 6;\n      length = 96;\n    }\n\n    const isNonFiveMinute = this.activeField === 'minute' && this.selectedMinute % 5 !== 0;\n\n    return html`\n      <div\n        class=\"dial-hand\"\n        style=\"transform: rotate(${angle}deg); height: ${length}px;\"\n      >\n        <div class=\"dial-selector-head\">\n          ${isNonFiveMinute ? html`<div class=\"dial-inner-dot\"></div>` : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  private renderDialNumbers() {\n    const center = 128; // half of 256px\n    const numbers = [];\n\n    if (this.activeField === 'hour') {\n      if (this.format === '24h') {\n        // Outer ring: 00, 13..23\n        const outerRadius = 98;\n        const outerHours = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];\n        for (let i = 0; i < 12; i++) {\n          const hVal = outerHours[i]! === 12 ? 0 : outerHours[i]! + 12;\n          const display = hVal.toString().padStart(2, '0');\n          const angle = (i * 30 - 90) * (Math.PI / 180);\n          const x = center + outerRadius * Math.cos(angle);\n          const y = center + outerRadius * Math.sin(angle);\n          const isSelected = this.selectedHour === hVal;\n          numbers.push(html`\n            <span\n              class=\"dial-number small ${isSelected ? 'selected' : ''}\"\n              style=\"left: ${x}px; top: ${y}px;\"\n            >\n              ${display}\n            </span>\n          `);\n        }\n\n        // Inner ring: 1..12\n        const innerRadius = 64;\n        const innerHours = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];\n        for (let i = 0; i < 12; i++) {\n          const hVal = innerHours[i]!;\n          const display = hVal.toString();\n          const angle = (i * 30 - 90) * (Math.PI / 180);\n          const x = center + innerRadius * Math.cos(angle);\n          const y = center + innerRadius * Math.sin(angle);\n          const isSelected = this.selectedHour === hVal;\n          numbers.push(html`\n            <span\n              class=\"dial-number ${isSelected ? 'selected' : ''}\"\n              style=\"left: ${x}px; top: ${y}px;\"\n            >\n              ${display}\n            </span>\n          `);\n        }\n      } else {\n        // 12-hour dial\n        const radius = 96;\n        const hours = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];\n        for (let i = 0; i < 12; i++) {\n          const hVal = hours[i];\n          const angle = (i * 30 - 90) * (Math.PI / 180);\n          const x = center + radius * Math.cos(angle);\n          const y = center + radius * Math.sin(angle);\n          const isSelected = this.selectedHour === hVal;\n          numbers.push(html`\n            <span\n              class=\"dial-number ${isSelected ? 'selected' : ''}\"\n              style=\"left: ${x}px; top: ${y}px;\"\n            >\n              ${hVal}\n            </span>\n          `);\n        }\n      }\n    } else {\n      // Minutes dial: 00, 05, 10, ... 55\n      const radius = 96;\n      for (let i = 0; i < 12; i++) {\n        const mVal = i * 5;\n        const display = mVal.toString().padStart(2, '0');\n        const angle = (i * 30 - 90) * (Math.PI / 180);\n        const x = center + radius * Math.cos(angle);\n        const y = center + radius * Math.sin(angle);\n        const isSelected = this.selectedMinute === mVal;\n        numbers.push(html`\n          <span\n            class=\"dial-number ${isSelected ? 'selected' : ''}\"\n            style=\"left: ${x}px; top: ${y}px;\"\n          >\n            ${display}\n          </span>\n        `);\n      }\n    }\n\n    return numbers;\n  }\n\n  override render() {\n    const hourFormatted = this.selectedHour.toString().padStart(2, '0');\n    const minuteFormatted = this.selectedMinute.toString().padStart(2, '0');\n\n    return html`\n      ${this.modal ? html`<div class=\"scrim\" @click=${this.cancel}></div>` : nothing}\n\n      <div class=\"picker-surface\" role=\"dialog\" aria-modal=${this.modal ? 'true' : 'false'}>\n        <div class=\"header\">\n          <h2 class=\"headline\">${this.headline}</h2>\n        </div>\n\n        <div class=\"time-display-row\">\n          <div class=\"time-card-wrapper\">\n            ${this.view === 'input'\n              ? html`\n                  <div class=\"time-card ${this.activeField === 'hour' ? 'active' : ''}\">\n                    <input\n                      id=\"hour-input\"\n                      class=\"time-input\"\n                      type=\"text\"\n                      inputmode=\"numeric\"\n                      maxlength=\"2\"\n                      .value=${hourFormatted}\n                      @input=${this.handleHourInput}\n                      @blur=${this.handleHourBlur}\n                      @focus=${() => this.setField('hour')}\n                      aria-label=\"Hour\"\n                    />\n                  </div>\n                `\n              : html`\n                  <button\n                    type=\"button\"\n                    class=\"time-card ${this.activeField === 'hour' ? 'active' : ''}\"\n                    @click=${() => this.setField('hour')}\n                    aria-label=\"Select hour\"\n                  >\n                    ${hourFormatted}\n                  </button>\n                `}\n            ${this.view === 'input' ? html`<span class=\"time-card-label\">Hour</span>` : nothing}\n          </div>\n\n          <span class=\"time-separator\" aria-hidden=\"true\">:</span>\n\n          <div class=\"time-card-wrapper\">\n            ${this.view === 'input'\n              ? html`\n                  <div class=\"time-card ${this.activeField === 'minute' ? 'active' : ''}\">\n                    <input\n                      id=\"minute-input\"\n                      class=\"time-input\"\n                      type=\"text\"\n                      inputmode=\"numeric\"\n                      maxlength=\"2\"\n                      .value=${minuteFormatted}\n                      @input=${this.handleMinuteInput}\n                      @blur=${this.handleMinuteBlur}\n                      @focus=${() => this.setField('minute')}\n                      aria-label=\"Minute\"\n                    />\n                  </div>\n                `\n              : html`\n                  <button\n                    type=\"button\"\n                    class=\"time-card ${this.activeField === 'minute' ? 'active' : ''}\"\n                    @click=${() => this.setField('minute')}\n                    aria-label=\"Select minute\"\n                  >\n                    ${minuteFormatted}\n                  </button>\n                `}\n            ${this.view === 'input' ? html`<span class=\"time-card-label\">Minute</span>` : nothing}\n          </div>\n\n          ${this.format === '12h'\n            ? html`\n                <div class=\"period-toggle\" role=\"group\" aria-label=\"Period selector\">\n                  <button\n                    type=\"button\"\n                    class=\"period-button ${this.selectedPeriod === 'AM' ? 'selected' : ''}\"\n                    @click=${() => this.setPeriod('AM')}\n                    aria-pressed=${this.selectedPeriod === 'AM'}\n                  >\n                    AM\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"period-button ${this.selectedPeriod === 'PM' ? 'selected' : ''}\"\n                    @click=${() => this.setPeriod('PM')}\n                    aria-pressed=${this.selectedPeriod === 'PM'}\n                  >\n                    PM\n                  </button>\n                </div>\n              `\n            : nothing}\n        </div>\n\n        ${this.view === 'dial'\n          ? html`\n              <div\n                class=\"dial-container\"\n                @pointerdown=${this.handleDialPointerDown}\n                @pointermove=${this.handleDialPointerMove}\n                @pointerup=${this.handleDialPointerUp}\n              >\n                <div class=\"dial-center-pin\"></div>\n                ${this.renderDialHand()}\n                ${this.renderDialNumbers()}\n              </div>\n            `\n          : nothing}\n\n        <div class=\"actions-row\">\n          <button\n            type=\"button\"\n            class=\"mode-switch-btn\"\n            aria-label=${this.view === 'dial' ? 'Switch to text input' : 'Switch to clock dial'}\n            @click=${this.toggleView}\n          >\n            <md-icon name=${this.view === 'dial' ? 'keyboard' : 'schedule'}></md-icon>\n          </button>\n\n          <div class=\"dialog-buttons\">\n            <md-button variant=\"text\" @click=${this.cancel}>${this.cancelLabel}</md-button>\n            <md-button variant=\"text\" @click=${this.confirm}>${this.confirmLabel}</md-button>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-time-picker': MdTimePicker;\n  }\n}\n"],"mappings":";;;;;;;AAEA,IAAa,IAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}

package/dist/chunks/toolbar-DXVQbQKJ.js

@@ -0,0 +1,271 @@
+import { n as a, t } from "./decorate-DXuynaiA.js";
+import { css as r, html as d, nothing as n } from "lit";
+import { customElement as l, property as e } from "lit/decorators.js";
+var s = r`
+  :host {
+    display: inline-flex;
+    box-sizing: border-box;
+    position: relative;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    color: var(--md-toolbar-on-container-color, var(--md-sys-color-on-surface, #1D1B20));
+    --_bg: var(--md-toolbar-container-color, var(--md-sys-color-surface-container, #F3EDF7));
+    --_elevation: var(--md-toolbar-elevation, var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15)));
+    --_shape: var(--md-toolbar-shape, var(--md-sys-shape-corner-full, 9999px));
+    --_gap: var(--md-toolbar-gap, 8px);
+    --_padding: var(--md-toolbar-padding, 8px 12px);
+    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),
+                box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
+                border-radius 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  /* --- Floating Mode (Default) --- */
+  :host(:not([mode="docked"]):not([docked])) {
+    background-color: var(--_bg);
+    box-shadow: var(--_elevation);
+    border-radius: var(--_shape);
+    padding: var(--_padding);
+  }
+
+  :host([elevated]:not([mode="docked"]):not([docked])) {
+    --_elevation: var(--md-toolbar-elevation, var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)));
+  }
+
+  /* --- Docked Mode --- */
+  :host([mode="docked"]),
+  :host([docked]) {
+    display: flex;
+    width: 100%;
+    background-color: var(--md-toolbar-container-color, var(--md-sys-color-surface, #FEF7FF));
+    border-radius: 0;
+    box-shadow: var(--md-sys-elevation-level0, none);
+    border-top: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
+    padding: var(--md-toolbar-padding, 8px 16px);
+  }
+
+  :host([mode="docked"][dock-position="top"]),
+  :host([docked][dock-position="top"]) {
+    border-top: none;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
+  }
+
+  :host([mode="docked"][dock-position="left"]),
+  :host([docked][dock-position="left"]) {
+    width: auto;
+    height: 100%;
+    border-top: none;
+    border-right: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
+  }
+
+  :host([mode="docked"][dock-position="right"]),
+  :host([docked][dock-position="right"]) {
+    width: auto;
+    height: 100%;
+    border-top: none;
+    border-left: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
+  }
+
+  :host([mode="docked"][elevated]),
+  :host([docked][elevated]) {
+    background-color: var(--md-toolbar-container-color, var(--md-sys-color-surface-container, #F3EDF7));
+    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));
+    border: none;
+  }
+
+  /* --- Fixed Positioning --- */
+  :host([fixed]) {
+    position: fixed;
+    z-index: 8;
+  }
+
+  :host([fixed]:not([mode="docked"]):not([docked])) {
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  :host([fixed][mode="docked"]),
+  :host([fixed][docked]) {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  :host([fixed][mode="docked"][dock-position="top"]),
+  :host([fixed][docked][dock-position="top"]) {
+    top: 0;
+    bottom: auto;
+    left: 0;
+    right: 0;
+  }
+
+  :host([fixed][mode="docked"][dock-position="left"]),
+  :host([fixed][docked][dock-position="left"]) {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: auto;
+  }
+
+  :host([fixed][mode="docked"][dock-position="right"]),
+  :host([fixed][docked][dock-position="right"]) {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: auto;
+  }
+
+  /* --- Container & Orientation --- */
+  .toolbar-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    gap: var(--_gap);
+    box-sizing: border-box;
+  }
+
+  :host(:not([orientation="vertical"])) .toolbar-container,
+  :host([orientation="horizontal"]) .toolbar-container {
+    flex-direction: row;
+    min-height: 48px;
+  }
+
+  :host([orientation="vertical"]) {
+    --_padding: var(--md-toolbar-padding, 12px 8px);
+    width: auto;
+  }
+
+  :host([orientation="vertical"]) .toolbar-container {
+    flex-direction: column;
+    min-width: 48px;
+  }
+
+  /* --- Slot sections --- */
+  .leading,
+  .trailing,
+  .fab-container {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--_gap);
+    flex-shrink: 0;
+  }
+
+  :host([orientation="vertical"]) .leading,
+  :host([orientation="vertical"]) .trailing,
+  :host([orientation="vertical"]) .fab-container {
+    flex-direction: column;
+  }
+
+  .content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--_gap);
+    flex: 1;
+    min-width: 0;
+  }
+
+  :host([orientation="vertical"]) .content {
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  /* Empty slot containers collapse nicely */
+  .leading:empty,
+  .trailing:empty,
+  .fab-container:empty {
+    display: none;
+  }
+
+  /* Slotted element styles */
+  ::slotted(md-divider) {
+    align-self: stretch;
+  }
+
+  :host(:not([orientation="vertical"])) ::slotted(md-divider) {
+    height: 24px;
+    align-self: center;
+  }
+
+  :host([orientation="vertical"]) ::slotted(md-divider) {
+    width: 24px;
+    align-self: center;
+  }
+
+  ::slotted(md-icon-button),
+  ::slotted(md-button),
+  ::slotted(md-fab) {
+    flex-shrink: 0;
+  }
+`, o = class extends a {
+  constructor(...i) {
+    super(...i), this.mode = "floating", this.docked = !1, this.orientation = "horizontal", this.elevated = !1, this.fixed = !1, this.dockPosition = "none", this.ariaLabel = "";
+  }
+  static {
+    this.styles = [a.styles, s];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "toolbar");
+  }
+  updated(i) {
+    super.updated(i), i.has("orientation") && this.setAttribute("aria-orientation", this.orientation);
+  }
+  render() {
+    return d`
+      <div
+        class="toolbar-container"
+        aria-orientation=${this.orientation}
+        aria-label=${this.ariaLabel || n}
+      >
+        <div class="leading">
+          <slot name="leading"></slot>
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="trailing">
+          <slot name="trailing"></slot>
+        </div>
+        <div class="fab-container">
+          <slot name="fab">
+            <slot name="action"></slot>
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+};
+t([e({
+  type: String,
+  reflect: !0
+})], o.prototype, "mode", void 0);
+t([e({
+  type: Boolean,
+  reflect: !0
+})], o.prototype, "docked", void 0);
+t([e({
+  type: String,
+  reflect: !0
+})], o.prototype, "orientation", void 0);
+t([e({
+  type: Boolean,
+  reflect: !0
+})], o.prototype, "elevated", void 0);
+t([e({
+  type: Boolean,
+  reflect: !0
+})], o.prototype, "fixed", void 0);
+t([e({
+  type: String,
+  reflect: !0,
+  attribute: "dock-position"
+})], o.prototype, "dockPosition", void 0);
+t([e({
+  type: String,
+  attribute: "aria-label"
+})], o.prototype, "ariaLabel", void 0);
+o = t([l("md-toolbar")], o);
+export {
+  o as t
+};
+
+//# sourceMappingURL=toolbar-DXVQbQKJ.js.map

package/dist/chunks/toolbar-DXVQbQKJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-DXVQbQKJ.js","names":[],"sources":["../../src/components/toolbar/toolbar.css.ts","../../src/components/toolbar/toolbar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const toolbarStyles = css`\n  :host {\n    display: inline-flex;\n    box-sizing: border-box;\n    position: relative;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    color: var(--md-toolbar-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n    --_bg: var(--md-toolbar-container-color, var(--md-sys-color-surface-container, #F3EDF7));\n    --_elevation: var(--md-toolbar-elevation, var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15)));\n    --_shape: var(--md-toolbar-shape, var(--md-sys-shape-corner-full, 9999px));\n    --_gap: var(--md-toolbar-gap, 8px);\n    --_padding: var(--md-toolbar-padding, 8px 12px);\n    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                border-radius 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* --- Floating Mode (Default) --- */\n  :host(:not([mode=\"docked\"]):not([docked])) {\n    background-color: var(--_bg);\n    box-shadow: var(--_elevation);\n    border-radius: var(--_shape);\n    padding: var(--_padding);\n  }\n\n  :host([elevated]:not([mode=\"docked\"]):not([docked])) {\n    --_elevation: var(--md-toolbar-elevation, var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)));\n  }\n\n  /* --- Docked Mode --- */\n  :host([mode=\"docked\"]),\n  :host([docked]) {\n    display: flex;\n    width: 100%;\n    background-color: var(--md-toolbar-container-color, var(--md-sys-color-surface, #FEF7FF));\n    border-radius: 0;\n    box-shadow: var(--md-sys-elevation-level0, none);\n    border-top: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    padding: var(--md-toolbar-padding, 8px 16px);\n  }\n\n  :host([mode=\"docked\"][dock-position=\"top\"]),\n  :host([docked][dock-position=\"top\"]) {\n    border-top: none;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n  }\n\n  :host([mode=\"docked\"][dock-position=\"left\"]),\n  :host([docked][dock-position=\"left\"]) {\n    width: auto;\n    height: 100%;\n    border-top: none;\n    border-right: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n  }\n\n  :host([mode=\"docked\"][dock-position=\"right\"]),\n  :host([docked][dock-position=\"right\"]) {\n    width: auto;\n    height: 100%;\n    border-top: none;\n    border-left: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n  }\n\n  :host([mode=\"docked\"][elevated]),\n  :host([docked][elevated]) {\n    background-color: var(--md-toolbar-container-color, var(--md-sys-color-surface-container, #F3EDF7));\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n    border: none;\n  }\n\n  /* --- Fixed Positioning --- */\n  :host([fixed]) {\n    position: fixed;\n    z-index: 8;\n  }\n\n  :host([fixed]:not([mode=\"docked\"]):not([docked])) {\n    bottom: 24px;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  :host([fixed][mode=\"docked\"]),\n  :host([fixed][docked]) {\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n\n  :host([fixed][mode=\"docked\"][dock-position=\"top\"]),\n  :host([fixed][docked][dock-position=\"top\"]) {\n    top: 0;\n    bottom: auto;\n    left: 0;\n    right: 0;\n  }\n\n  :host([fixed][mode=\"docked\"][dock-position=\"left\"]),\n  :host([fixed][docked][dock-position=\"left\"]) {\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: auto;\n  }\n\n  :host([fixed][mode=\"docked\"][dock-position=\"right\"]),\n  :host([fixed][docked][dock-position=\"right\"]) {\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: auto;\n  }\n\n  /* --- Container & Orientation --- */\n  .toolbar-container {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    gap: var(--_gap);\n    box-sizing: border-box;\n  }\n\n  :host(:not([orientation=\"vertical\"])) .toolbar-container,\n  :host([orientation=\"horizontal\"]) .toolbar-container {\n    flex-direction: row;\n    min-height: 48px;\n  }\n\n  :host([orientation=\"vertical\"]) {\n    --_padding: var(--md-toolbar-padding, 12px 8px);\n    width: auto;\n  }\n\n  :host([orientation=\"vertical\"]) .toolbar-container {\n    flex-direction: column;\n    min-width: 48px;\n  }\n\n  /* --- Slot sections --- */\n  .leading,\n  .trailing,\n  .fab-container {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--_gap);\n    flex-shrink: 0;\n  }\n\n  :host([orientation=\"vertical\"]) .leading,\n  :host([orientation=\"vertical\"]) .trailing,\n  :host([orientation=\"vertical\"]) .fab-container {\n    flex-direction: column;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--_gap);\n    flex: 1;\n    min-width: 0;\n  }\n\n  :host([orientation=\"vertical\"]) .content {\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  /* Empty slot containers collapse nicely */\n  .leading:empty,\n  .trailing:empty,\n  .fab-container:empty {\n    display: none;\n  }\n\n  /* Slotted element styles */\n  ::slotted(md-divider) {\n    align-self: stretch;\n  }\n\n  :host(:not([orientation=\"vertical\"])) ::slotted(md-divider) {\n    height: 24px;\n    align-self: center;\n  }\n\n  :host([orientation=\"vertical\"]) ::slotted(md-divider) {\n    width: 24px;\n    align-self: center;\n  }\n\n  ::slotted(md-icon-button),\n  ::slotted(md-button),\n  ::slotted(md-fab) {\n    flex-shrink: 0;\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { toolbarStyles } from './toolbar.css.js';\n\nexport type ToolbarMode = 'floating' | 'docked';\nexport type ToolbarOrientation = 'horizontal' | 'vertical';\nexport type ToolbarDockPosition = 'none' | 'top' | 'bottom' | 'left' | 'right';\n\n/**\n * Material Design 3 Expressive Action Toolbar component.\n *\n * @slot leading - Optional leading action/navigation items.\n * @slot - Default slot for toolbar controls, icon buttons, segmented buttons, switches, dividers.\n * @slot trailing - Optional trailing actions or overflow items.\n * @slot fab - Slotted Primary Action / Floating Action Button.\n * @slot action - Alias for fab slot.\n */\n@customElement('md-toolbar')\nexport class MdToolbar extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, toolbarStyles];\n\n  /**\n   * Toolbar layout mode: 'floating' (island pill) or 'docked' (edge-to-edge).\n   */\n  @property({ type: String, reflect: true })\n  mode: ToolbarMode = 'floating';\n\n  /**\n   * Shorthand boolean to enable docked mode.\n   */\n  @property({ type: Boolean, reflect: true })\n  docked = false;\n\n  /**\n   * Layout orientation of the toolbar items: 'horizontal' or 'vertical'.\n   */\n  @property({ type: String, reflect: true })\n  orientation: ToolbarOrientation = 'horizontal';\n\n  /**\n   * Increases background elevation shadow.\n   */\n  @property({ type: Boolean, reflect: true })\n  elevated = false;\n\n  /**\n   * Fixes toolbar position to the viewport edge.\n   */\n  @property({ type: Boolean, reflect: true })\n  fixed = false;\n\n  /**\n   * When docked and fixed, specifies which viewport edge to pin to.\n   */\n  @property({ type: String, reflect: true, attribute: 'dock-position' })\n  dockPosition: ToolbarDockPosition = 'none';\n\n  /**\n   * Accessible label describing the toolbar for screen readers.\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel = '';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'toolbar');\n    }\n  }\n\n  override updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('orientation')) {\n      this.setAttribute('aria-orientation', this.orientation);\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"toolbar-container\"\n        aria-orientation=${this.orientation}\n        aria-label=${this.ariaLabel || nothing}\n      >\n        <div class=\"leading\">\n          <slot name=\"leading\"></slot>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n        <div class=\"trailing\">\n          <slot name=\"trailing\"></slot>\n        </div>\n        <div class=\"fab-container\">\n          <slot name=\"fab\">\n            <slot name=\"action\"></slot>\n          </slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-toolbar': MdToolbar;\n  }\n}\n"],"mappings":"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"}