@francofantomius/material-components 1.1.1 → 1.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-JTcLcJuz.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  @property({ type: String })\n  min = '';\n\n  @property({ type: String })\n  max = '';\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: String, attribute: 'error-text' })\n  errorText = '';\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  private initialValue = '';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.initialValue = this.value;\n    this.parseValue(this.value);\n    this.syncFormValue();\n    this.validateInput();\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('value')) {\n      if (this.value) {\n        this.parseValue(this.value);\n        this.syncFormValue();\n      } else {\n        this.setFormValue(null);\n      }\n    }\n\n    if (\n      changedProperties.has('value') ||\n      changedProperties.has('name') ||\n      changedProperties.has('disabled') ||\n      changedProperties.has('required') ||\n      changedProperties.has('min') ||\n      changedProperties.has('max') ||\n      changedProperties.has('format')\n    ) {\n      if (this.disabled) {\n        this.setFormValue(null);\n      } else {\n        this.setFormValue(this.value || null);\n      }\n      this.validateInput();\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    if (this.disabled) {\n      this.setFormValue(null);\n    } else {\n      this.setFormValue(val || null);\n    }\n  }\n\n  private timeToMinutes(timeStr: string): number | null {\n    if (!timeStr || typeof timeStr !== 'string') return null;\n    const trimmed = timeStr.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    if (is12hMatch) {\n      let h = parseInt(is12hMatch[1]!, 10);\n      const m = parseInt(is12hMatch[2]!, 10);\n      const p = is12hMatch[3]!.toUpperCase();\n      if (p === 'PM' && h < 12) h += 12;\n      if (p === 'AM' && h === 12) h = 0;\n      return h * 60 + m;\n    } else if (is24hMatch) {\n      const h = parseInt(is24hMatch[1]!, 10);\n      const m = parseInt(is24hMatch[2]!, 10);\n      return h * 60 + m;\n    }\n    return null;\n  }\n\n  private validateInput() {\n    if (this.disabled) {\n      this.setValidity({});\n      if (!this.errorText) {\n        this.error = false;\n      }\n      return;\n    }\n\n    if (this.required && !this.value) {\n      this.setValidity({ valueMissing: true }, this.errorText || 'A time is required');\n      this.error = true;\n      return;\n    }\n\n    const currentMins = this.timeToMinutes(this.getFormatted24());\n\n    if (this.min && currentMins !== null) {\n      const minMins = this.timeToMinutes(this.min);\n      if (minMins !== null && currentMins < minMins) {\n        this.setValidity({ rangeUnderflow: true }, this.errorText || `Time must be at or after ${this.min}`);\n        this.error = true;\n        return;\n      }\n    }\n\n    if (this.max && currentMins !== null) {\n      const maxMins = this.timeToMinutes(this.max);\n      if (maxMins !== null && currentMins > maxMins) {\n        this.setValidity({ rangeOverflow: true }, this.errorText || `Time must be at or before ${this.max}`);\n        this.error = true;\n        return;\n      }\n    }\n\n    this.setValidity({});\n    if (!this.errorText) {\n      this.error = false;\n    }\n  }\n\n  override formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n    this.syncFormValue();\n    this.validateInput();\n  }\n\n  override formResetCallback() {\n    this.value = this.initialValue;\n    this.parseValue(this.initialValue);\n    this.syncFormValue();\n    this.activeField = 'hour';\n    this.validateInput();\n  }\n\n  reset() {\n    this.formResetCallback();\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                      ?disabled=${this.disabled}\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                    ?disabled=${this.disabled}\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                      ?disabled=${this.disabled}\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                    ?disabled=${this.disabled}\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":"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"}

package/dist/chunks/{toolbar-DXVQbQKJ.js → toolbar-CsxKc2Yd.js}

@@ -1,7 +1,8 @@
-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`
+import { n as e, t } from "./decorate-DknOJ8FJ.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/toolbar/toolbar.css.ts
+var s = n`
   :host {
     display: inline-flex;
     box-sizing: border-box;
@@ -196,25 +197,25 @@ var s = r`
   ::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`
+`, c = class extends e {
+	constructor(...e) {
+		super(...e), this.mode = "floating", this.docked = !1, this.orientation = "horizontal", this.elevated = !1, this.fixed = !1, this.dockPosition = "none", this.ariaLabel = "";
+	}
+	static {
+		this.styles = [e.styles, s];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "toolbar");
+	}
+	updated(e) {
+		super.updated(e), e.has("orientation") && this.setAttribute("aria-orientation", this.orientation);
+	}
+	render() {
+		return r`
       <div
         class="toolbar-container"
         aria-orientation=${this.orientation}
-        aria-label=${this.ariaLabel || n}
+        aria-label=${this.ariaLabel || i}
       >
         <div class="leading">
           <slot name="leading"></slot>
@@ -232,40 +233,32 @@ var s = r`
         </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
+	}
 };
+t([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "mode", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "docked", void 0), t([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "orientation", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "elevated", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "fixed", void 0), t([o({
+	type: String,
+	reflect: !0,
+	attribute: "dock-position"
+})], c.prototype, "dockPosition", void 0), t([o({
+	type: String,
+	attribute: "aria-label"
+})], c.prototype, "ariaLabel", void 0), c = t([a("md-toolbar")], c);
+//#endregion
+export { c as t };
 
-//# sourceMappingURL=toolbar-DXVQbQKJ.js.map
+//# sourceMappingURL=toolbar-CsxKc2Yd.js.map

package/dist/chunks/{toolbar-DXVQbQKJ.js.map → toolbar-CsxKc2Yd.js.map}

@@ -1 +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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"}
+{"version":3,"file":"toolbar-CsxKc2Yd.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":";;;;AAEA,IAAa,IAAgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCiBnB,IAAN,cAAwB,EAAc;;EA2CtB,aApCD,KAAA,OAAA,YAMX,KAAA,SAAA,IAMyB,KAAA,cAAA,cAMvB,KAAA,WAAA,IAMH,KAAA,QAAA,IAM4B,KAAA,eAAA,QAMf,KAAA,YAAA;;;EA1CI,KAAA,SAAA,CAAC,EAAc,QAAQ,CAAa;;CA4C7D,oBAA6B;EAE3B,AADA,MAAM,kBAAkB,GACnB,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,SAAS;CAEvC;CAEA,QAAiB,GAA2D;EAE1E,AADA,MAAM,QAAQ,CAAiB,GAC3B,EAAkB,IAAI,aAAa,KACrC,KAAK,aAAa,oBAAoB,KAAK,WAAW;CAE1D;CAEA,SAAkB;EAChB,OAAO,CAAI;;;2BAGY,KAAK,YAAY;qBACvB,KAAK,aAAa,EAAQ;;;;;;;;;;;;;;;;;;CAkB7C;AACF;AA7EG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAMzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAMzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAMzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAgB,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAMpE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GA3CpD,IAAA,EAAA,CAAA,EAAc,YAAY,CAAA,GAAA,CAAA"}