@francofantomius/material-components 1.0.1 → 1.1.0

package/dist/chunks/date-picker-DJeHi4w-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-DJeHi4w-.js","names":[],"sources":["../../src/components/date-picker/date-picker.css.ts","../../src/components/date-picker/date-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const datePickerStyles = css`\n  :host {\n    display: inline-block;\n    font-family: var(--md-sys-typescale-font-family, Roboto, sans-serif);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    box-sizing: border-box;\n  }\n\n  :host([variant=\"modal\"]) {\n    display: contents;\n  }\n\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n\n  /* --- Picker Surface Container --- */\n  .picker-surface {\n    display: flex;\n    flex-direction: column;\n    width: 328px;\n    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n    border-radius: var(--md-sys-shape-corner-extra-large, 28px);\n    overflow: hidden;\n    position: relative;\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n    user-select: none;\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([variant=\"docked\"]) .picker-surface {\n    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  /* --- Header --- */\n  .header {\n    padding: 20px 24px 16px 24px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    position: relative;\n  }\n\n  .header-top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .subhead {\n    font-size: var(--md-sys-typescale-label-medium-size, 12px);\n    line-height: 16px;\n    font-weight: 500;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    letter-spacing: 0.5px;\n    text-transform: uppercase;\n  }\n\n  .headline {\n    font-size: var(--md-sys-typescale-headline-large-size, 28px);\n    line-height: 36px;\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    min-height: 36px;\n    display: flex;\n    align-items: center;\n    word-break: break-word;\n  }\n\n  .headline.placeholder {\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    font-size: 24px;\n  }\n\n  .header-divider {\n    height: 1px;\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    margin: 0 16px;\n  }\n\n  /* --- Navigation Controls --- */\n  .navigation {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px 4px 16px;\n  }\n\n  .month-year-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background: transparent;\n    border: none;\n    padding: 8px 12px;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    font-family: inherit;\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    font-weight: 500;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    transition: background-color 150ms ease, color 150ms ease;\n  }\n\n  .month-year-btn:hover {\n    background-color: rgba(73, 69, 79, 0.08);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  .month-year-btn .dropdown-icon {\n    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .month-year-btn.open .dropdown-icon {\n    transform: rotate(180deg);\n  }\n\n  .nav-arrows {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  /* --- Calendar View --- */\n  .calendar-content {\n    padding: 0 12px 12px 12px;\n  }\n\n  .weekdays {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    text-align: center;\n    padding: 8px 0;\n  }\n\n  .weekday {\n    font-size: var(--md-sys-typescale-body-small-size, 12px);\n    font-weight: 500;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .days-grid {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    row-gap: 4px;\n  }\n\n  .day-cell {\n    position: relative;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* Range Highlight Band */\n  .range-band {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: var(--md-sys-color-primary-container, #EADDFF);\n    z-index: 0;\n  }\n\n  .day-cell.range-start .range-band {\n    left: 50%;\n  }\n\n  .day-cell.range-end .range-band {\n    right: 50%;\n  }\n\n  .day-cell.range-start.range-end .range-band {\n    display: none;\n  }\n\n  /* Day Button */\n  .day-btn {\n    position: relative;\n    z-index: 1;\n    width: 36px;\n    height: 36px;\n    border-radius: var(--md-sys-shape-corner-full, 50%);\n    border: 1px solid transparent;\n    background: transparent;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    font-family: inherit;\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    font-weight: 400;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    padding: 0;\n    outline: none;\n    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;\n  }\n\n  .day-btn:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end) {\n    background-color: rgba(103, 80, 164, 0.08);\n  }\n\n  /* Today state */\n  .day-btn.today {\n    border-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-primary, #6750A4);\n    font-weight: 500;\n  }\n\n  /* In range middle state */\n  .day-cell.in-range .day-btn {\n    color: var(--md-sys-color-on-primary-container, #21005D);\n    background-color: transparent;\n  }\n\n  /* Selected / Range Start / Range End */\n  .day-btn.selected,\n  .day-btn.range-start,\n  .day-btn.range-end {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n    font-weight: 500;\n  }\n\n  .day-btn.disabled {\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    opacity: 0.38;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* --- Year Picker View --- */\n  .year-picker-view {\n    height: 280px;\n    overflow-y: auto;\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 8px;\n    padding: 12px 16px;\n    align-content: start;\n  }\n\n  .year-btn {\n    background: transparent;\n    border: 1px solid transparent;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    padding: 10px 0;\n    font-family: inherit;\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    cursor: pointer;\n    text-align: center;\n    transition: background-color 150ms ease, color 150ms ease;\n  }\n\n  .year-btn:hover:not(.selected) {\n    background-color: rgba(103, 80, 164, 0.08);\n  }\n\n  .year-btn.selected {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n    font-weight: 500;\n  }\n\n  .year-btn.current {\n    border-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  /* --- Actions Footer --- */\n  .actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    padding: 8px 16px 16px 16px;\n  }\n\n  /* --- Supporting / Error Text --- */\n  .supporting-text {\n    padding: 4px 16px 0;\n    font-size: var(--md-sys-typescale-body-small-size, 12px);\n    line-height: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  :host([error]) .supporting-text {\n    color: var(--md-sys-color-error, #B3261E);\n  }\n\n  /* --- Modal Scrim & Dialog Container --- */\n  dialog {\n    padding: 0;\n    border: none;\n    border-radius: var(--md-sys-shape-corner-extra-large, 28px);\n    background: transparent;\n    color: inherit;\n    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0, 0, 0, 0.30));\n    position: fixed;\n    inset: 0;\n    margin: auto;\n    z-index: 1000;\n    overflow: visible;\n  }\n\n  dialog::backdrop {\n    background-color: rgba(0, 0, 0, 0.32);\n    backdrop-filter: blur(2px);\n    animation: md-fade-in 150ms ease-out forwards;\n  }\n\n  dialog[open] {\n    animation: md-dialog-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;\n  }\n\n  @keyframes md-fade-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  @keyframes md-dialog-in {\n    from {\n      opacity: 0;\n      transform: scale(0.92);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport '../icon-button/icon-button.js';\nimport '../button/button.js';\nimport { datePickerStyles } from './date-picker.css.js';\n\nexport type DatePickerVariant = 'docked' | 'modal';\nexport type DatePickerViewMode = 'calendar' | 'year';\n\nconst MONTH_NAMES = [\n  'January', 'February', 'March', 'April', 'May', 'June',\n  'July', 'August', 'September', 'October', 'November', 'December'\n];\n\nconst WEEKDAY_NAMES_SUNDAY_FIRST = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\nconst WEEKDAY_NAMES_MONDAY_FIRST = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];\n\nfunction padZero(num: number): string {\n  return num < 10 ? `0${num}` : `${num}`;\n}\n\nfunction formatDateString(year: number, month: number, day: number): string {\n  return `${year}-${padZero(month + 1)}-${padZero(day)}`;\n}\n\nfunction parseDateString(dateStr: string): { year: number; month: number; day: number } | null {\n  if (!dateStr || typeof dateStr !== 'string') return null;\n  const parts = dateStr.split('-');\n  if (parts.length !== 3) return null;\n  const year = parseInt(parts[0]!, 10);\n  const month = parseInt(parts[1]!, 10) - 1;\n  const day = parseInt(parts[2]!, 10);\n  if (isNaN(year) || isNaN(month) || isNaN(day)) return null;\n  return { year, month, day };\n}\n\nfunction getTodayString(): string {\n  const now = new Date();\n  return formatDateString(now.getFullYear(), now.getMonth(), now.getDate());\n}\n\nfunction formatDisplayDate(dateStr: string): string {\n  const parsed = parseDateString(dateStr);\n  if (!parsed) return '';\n  const d = new Date(parsed.year, parsed.month, parsed.day);\n  return d.toLocaleDateString('en-US', {\n    weekday: 'short',\n    month: 'short',\n    day: 'numeric',\n  });\n}\n\nfunction formatShortMonthDay(dateStr: string): string {\n  const parsed = parseDateString(dateStr);\n  if (!parsed) return '';\n  const d = new Date(parsed.year, parsed.month, parsed.day);\n  return d.toLocaleDateString('en-US', {\n    month: 'short',\n    day: 'numeric',\n  });\n}\n\n@customElement('md-date-picker')\nexport class MdDatePicker extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, datePickerStyles];\n\n  @property({ type: String, reflect: true })\n  variant: DatePickerVariant = 'docked';\n\n  @property({ type: Boolean, reflect: true })\n  range = false;\n\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property({ type: String, attribute: 'start-date' })\n  startDate = '';\n\n  @property({ type: String, attribute: 'end-date' })\n  endDate = '';\n\n  @property({ type: String })\n  min = '';\n\n  @property({ type: String })\n  max = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: String, attribute: 'error-text' })\n  errorText = '';\n\n  @property({ type: String, attribute: 'supporting-text' })\n  supportingText = '';\n\n  @property({ type: Number, attribute: 'first-day-of-week' })\n  firstDayOfWeek = 0;\n\n  @property({ type: Boolean, attribute: 'show-actions' })\n  showActions = false;\n\n  @state()\n  private viewYear: number = new Date().getFullYear();\n\n  @state()\n  private viewMonth: number = new Date().getMonth();\n\n  @state()\n  private viewMode: DatePickerViewMode = 'calendar';\n\n  @state()\n  private hoverDate: string | null = null;\n\n  @state()\n  private selectingEnd = false;\n\n  @query('dialog')\n  private dialogElement?: HTMLDialogElement;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.syncInitialState();\n    this.setFormValue(this.value);\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n\n    if (changedProperties.has('value')) {\n      this.handleValueChange();\n      this.setFormValue(this.value);\n      this.validateInput();\n    }\n\n    if (changedProperties.has('startDate') || changedProperties.has('endDate')) {\n      if (this.range) {\n        const newVal = this.startDate && this.endDate ? `${this.startDate}/${this.endDate}` : (this.startDate || '');\n        if (this.value !== newVal) {\n          this.value = newVal;\n          this.setFormValue(this.value);\n        }\n      }\n    }\n\n    if (changedProperties.has('min') || changedProperties.has('max') || changedProperties.has('required')) {\n      this.validateInput();\n    }\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open') && this.variant === 'modal') {\n      if (this.open) {\n        if (this.dialogElement && !this.dialogElement.open) {\n          this.dialogElement.showModal();\n        }\n        this.emitEvent('open');\n      } else {\n        if (this.dialogElement && this.dialogElement.open) {\n          this.dialogElement.close();\n        }\n        this.emitEvent('close');\n      }\n    }\n  }\n\n  private syncInitialState() {\n    const targetDate = this.startDate || (this.range ? (this.value.split('/')[0] ?? '') : this.value);\n    const parsed = parseDateString(targetDate);\n    if (parsed) {\n      this.viewYear = parsed.year;\n      this.viewMonth = parsed.month;\n    } else {\n      const now = new Date();\n      this.viewYear = now.getFullYear();\n      this.viewMonth = now.getMonth();\n    }\n\n    if (this.range && this.value && this.value.includes('/')) {\n      const [s, e] = this.value.split('/');\n      this.startDate = s || '';\n      this.endDate = e || '';\n    }\n  }\n\n  private handleValueChange() {\n    if (this.range) {\n      if (this.value.includes('/')) {\n        const [s, e] = this.value.split('/');\n        this.startDate = s || '';\n        this.endDate = e || '';\n      } else {\n        this.startDate = this.value;\n        this.endDate = '';\n      }\n    } else {\n      const parsed = parseDateString(this.value);\n      if (parsed) {\n        this.viewYear = parsed.year;\n        this.viewMonth = parsed.month;\n      }\n    }\n  }\n\n  override formResetCallback() {\n    this.value = '';\n    this.startDate = '';\n    this.endDate = '';\n    this.error = false;\n    this.selectingEnd = false;\n    this.setFormValue(null);\n    const now = new Date();\n    this.viewYear = now.getFullYear();\n    this.viewMonth = now.getMonth();\n    this.viewMode = 'calendar';\n  }\n\n  showModal() {\n    this.open = true;\n  }\n\n  show() {\n    this.open = true;\n  }\n\n  close() {\n    this.open = false;\n  }\n\n  reset() {\n    this.formResetCallback();\n  }\n\n  private validateInput() {\n    if (this.required && !this.value) {\n      this.setValidity({ valueMissing: true }, this.errorText || 'A date is required');\n      this.error = true;\n      return;\n    }\n\n    if (this.min && this.value) {\n      const checkVal = this.range ? this.startDate : this.value;\n      if (checkVal && checkVal < this.min) {\n        this.setValidity({ rangeUnderflow: true }, this.errorText || `Date must be after ${this.min}`);\n        this.error = true;\n        return;\n      }\n    }\n\n    if (this.max && this.value) {\n      const checkVal = this.range ? (this.endDate || this.startDate) : this.value;\n      if (checkVal && checkVal > this.max) {\n        this.setValidity({ rangeOverflow: true }, this.errorText || `Date must be 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  private handlePrevMonth = () => {\n    if (this.viewMonth === 0) {\n      this.viewMonth = 11;\n      this.viewYear -= 1;\n    } else {\n      this.viewMonth -= 1;\n    }\n  };\n\n  private handleNextMonth = () => {\n    if (this.viewMonth === 11) {\n      this.viewMonth = 0;\n      this.viewYear += 1;\n    } else {\n      this.viewMonth += 1;\n    }\n  };\n\n  private toggleViewMode = () => {\n    this.viewMode = this.viewMode === 'calendar' ? 'year' : 'calendar';\n  };\n\n  private selectYear = (year: number) => {\n    this.viewYear = year;\n    this.viewMode = 'calendar';\n  };\n\n  private isDateDisabled(dateStr: string): boolean {\n    if (this.disabled) return true;\n    if (this.min && dateStr < this.min) return true;\n    if (this.max && dateStr > this.max) return true;\n    return false;\n  }\n\n  private handleDayClick = (dateStr: string) => {\n    if (this.isDateDisabled(dateStr)) return;\n\n    if (!this.range) {\n      this.value = dateStr;\n      this.setFormValue(this.value);\n      this.emitEvent('input', { value: this.value });\n      this.emitEvent('change', { value: this.value });\n      this.emitEvent('select', { date: dateStr, type: 'single' });\n      return;\n    }\n\n    // Range selection mode\n    if (!this.selectingEnd || !this.startDate) {\n      // Start fresh range selection\n      this.startDate = dateStr;\n      this.endDate = '';\n      this.value = dateStr;\n      this.selectingEnd = true;\n      this.setFormValue(this.value);\n      this.emitEvent('select', { date: dateStr, type: 'start' });\n      this.emitEvent('input', { value: this.value });\n    } else {\n      // Selecting end date\n      if (dateStr < this.startDate) {\n        // Clicked a date before start date, restart range\n        this.startDate = dateStr;\n        this.endDate = '';\n        this.value = dateStr;\n        this.selectingEnd = true;\n        this.setFormValue(this.value);\n        this.emitEvent('select', { date: dateStr, type: 'start' });\n        this.emitEvent('input', { value: this.value });\n      } else {\n        this.endDate = dateStr;\n        this.value = `${this.startDate}/${this.endDate}`;\n        this.selectingEnd = false;\n        this.setFormValue(this.value);\n        this.emitEvent('select', { date: dateStr, type: 'end' });\n        this.emitEvent('input', { value: this.value });\n        this.emitEvent('change', {\n          value: this.value,\n          startDate: this.startDate,\n          endDate: this.endDate,\n        });\n      }\n    }\n  };\n\n  private handleDayMouseEnter = (dateStr: string) => {\n    if (this.range && this.selectingEnd && this.startDate) {\n      this.hoverDate = dateStr;\n    }\n  };\n\n  private handleDayMouseLeave = () => {\n    this.hoverDate = null;\n  };\n\n  private handleCancel = (event?: Event) => {\n    if (event) event.preventDefault();\n    this.emitEvent('cancel');\n    this.close();\n  };\n\n  private handleConfirm = () => {\n    this.emitEvent('change', {\n      value: this.value,\n      startDate: this.startDate,\n      endDate: this.endDate,\n    });\n    this.close();\n  };\n\n  private getFormattedHeadline(): string {\n    if (this.headline) return this.headline;\n\n    if (!this.range) {\n      if (!this.value) return 'Select date';\n      return formatDisplayDate(this.value);\n    }\n\n    // Range mode\n    if (!this.startDate && !this.endDate) {\n      return 'Select range';\n    }\n\n    if (this.startDate && !this.endDate) {\n      return `${formatShortMonthDay(this.startDate)} – End date`;\n    }\n\n    if (this.startDate && this.endDate) {\n      const s = parseDateString(this.startDate);\n      const e = parseDateString(this.endDate);\n      if (s && e && s.year === e.year) {\n        return `${formatShortMonthDay(this.startDate)} – ${formatShortMonthDay(this.endDate)}, ${s.year}`;\n      }\n      return `${formatShortMonthDay(this.startDate)} – ${formatShortMonthDay(this.endDate)}`;\n    }\n\n    return 'Select range';\n  }\n\n  private renderCalendarGrid() {\n    const year = this.viewYear;\n    const month = this.viewMonth;\n    const daysInMonth = new Date(year, month + 1, 0).getDate();\n    let firstDayIndex = new Date(year, month, 1).getDay();\n\n    if (this.firstDayOfWeek === 1) {\n      firstDayIndex = (firstDayIndex + 6) % 7;\n    }\n\n    const weekdays = this.firstDayOfWeek === 1\n      ? WEEKDAY_NAMES_MONDAY_FIRST\n      : WEEKDAY_NAMES_SUNDAY_FIRST;\n\n    const todayStr = getTodayString();\n\n    const days = [];\n    // Blank padding days\n    for (let i = 0; i < firstDayIndex; i++) {\n      days.push(html`<div class=\"day-cell empty\"></div>`);\n    }\n\n    // Days of current month\n    for (let d = 1; d <= daysInMonth; d++) {\n      const dateStr = formatDateString(year, month, d);\n      const isToday = dateStr === todayStr;\n      const isDisabled = this.isDateDisabled(dateStr);\n\n      let isSelected = false;\n      let isRangeStart = false;\n      let isRangeEnd = false;\n      let isInRange = false;\n\n      if (!this.range) {\n        isSelected = this.value === dateStr;\n      } else {\n        const effectiveEnd = this.endDate || (this.selectingEnd ? this.hoverDate : null);\n        isRangeStart = this.startDate === dateStr;\n        isRangeEnd = effectiveEnd === dateStr;\n        isSelected = isRangeStart || isRangeEnd;\n\n        if (this.startDate && effectiveEnd && effectiveEnd > this.startDate) {\n          isInRange = dateStr >= this.startDate && dateStr <= effectiveEnd;\n        }\n      }\n\n      const cellClasses = [\n        'day-cell',\n        isRangeStart ? 'range-start' : '',\n        isRangeEnd ? 'range-end' : '',\n        isInRange ? 'in-range' : '',\n      ].filter(Boolean).join(' ');\n\n      const btnClasses = [\n        'day-btn',\n        isSelected ? 'selected' : '',\n        isToday ? 'today' : '',\n        isRangeStart ? 'range-start' : '',\n        isRangeEnd ? 'range-end' : '',\n        isDisabled ? 'disabled' : '',\n      ].filter(Boolean).join(' ');\n\n      days.push(html`\n        <div class=${cellClasses}>\n          ${isInRange ? html`<div class=\"range-band\"></div>` : nothing}\n          <button\n            type=\"button\"\n            class=${btnClasses}\n            ?disabled=${isDisabled}\n            aria-label=${dateStr}\n            aria-selected=${isSelected ? 'true' : 'false'}\n            @click=${() => this.handleDayClick(dateStr)}\n            @mouseenter=${() => this.handleDayMouseEnter(dateStr)}\n            @mouseleave=${this.handleDayMouseLeave}\n          >\n            <md-ripple ?disabled=${isDisabled}></md-ripple>\n            ${d}\n          </button>\n        </div>\n      `);\n    }\n\n    return html`\n      <div class=\"calendar-content\">\n        <div class=\"weekdays\" role=\"row\">\n          ${weekdays.map(\n            (w) => html`<div class=\"weekday\" role=\"columnheader\">${w}</div>`\n          )}\n        </div>\n        <div class=\"days-grid\" role=\"grid\">\n          ${days}\n        </div>\n      </div>\n    `;\n  }\n\n  private renderYearPicker() {\n    const currentYear = new Date().getFullYear();\n    const startYear = currentYear - 50;\n    const endYear = currentYear + 50;\n    const years = [];\n\n    for (let y = startYear; y <= endYear; y++) {\n      const isSelected = y === this.viewYear;\n      const isCurrent = y === currentYear;\n      years.push(html`\n        <button\n          type=\"button\"\n          class=\"year-btn ${isSelected ? 'selected' : ''} ${isCurrent ? 'current' : ''}\"\n          @click=${() => this.selectYear(y)}\n        >\n          <md-ripple></md-ripple>\n          ${y}\n        </button>\n      `);\n    }\n\n    return html`\n      <div class=\"year-picker-view\">\n        ${years}\n      </div>\n    `;\n  }\n\n  private renderPickerSurface() {\n    const isYearMode = this.viewMode === 'year';\n    const subheadText = this.label || (this.range ? 'Select range' : 'Select date');\n    const headlineText = this.getFormattedHeadline();\n    const hasValue = Boolean(this.range ? this.startDate : this.value);\n    const shouldShowActions = this.showActions || this.variant === 'modal';\n\n    return html`\n      <div class=\"picker-surface\">\n        <div class=\"header\">\n          <div class=\"header-top\">\n            <span class=\"subhead\">${subheadText}</span>\n            <md-icon-button\n              icon=${isYearMode ? 'calendar_month' : 'edit_calendar'}\n              aria-label=${isYearMode ? 'Switch to calendar view' : 'Switch to year view'}\n              @click=${this.toggleViewMode}\n            ></md-icon-button>\n          </div>\n          <div class=\"headline ${!hasValue ? 'placeholder' : ''}\">\n            ${headlineText}\n          </div>\n        </div>\n\n        <div class=\"header-divider\"></div>\n\n        <div class=\"navigation\">\n          <button\n            type=\"button\"\n            class=\"month-year-btn ${isYearMode ? 'open' : ''}\"\n            @click=${this.toggleViewMode}\n            aria-label=\"Toggle year selection\"\n          >\n            <span>${MONTH_NAMES[this.viewMonth]} ${this.viewYear}</span>\n            <md-icon class=\"dropdown-icon\" name=\"arrow_drop_down\"></md-icon>\n          </button>\n\n          ${!isYearMode\n            ? html`\n                <div class=\"nav-arrows\">\n                  <md-icon-button\n                    icon=\"chevron_left\"\n                    aria-label=\"Previous month\"\n                    @click=${this.handlePrevMonth}\n                  ></md-icon-button>\n                  <md-icon-button\n                    icon=\"chevron_right\"\n                    aria-label=\"Next month\"\n                    @click=${this.handleNextMonth}\n                  ></md-icon-button>\n                </div>\n              `\n            : nothing}\n        </div>\n\n        ${isYearMode ? this.renderYearPicker() : this.renderCalendarGrid()}\n\n        ${shouldShowActions\n          ? html`\n              <div class=\"actions\">\n                <slot name=\"actions\">\n                  <md-button variant=\"text\" @click=${this.handleCancel}>Cancel</md-button>\n                  <md-button variant=\"text\" @click=${this.handleConfirm}>OK</md-button>\n                </slot>\n              </div>\n            `\n          : nothing}\n      </div>\n\n      ${this.supportingText || this.errorText\n        ? html`\n            <div class=\"supporting-text\">\n              ${this.error ? (this.errorText || this.supportingText) : this.supportingText}\n            </div>\n          `\n        : nothing}\n    `;\n  }\n\n  override render() {\n    if (this.variant === 'modal') {\n      return html`\n        <dialog\n          @cancel=${this.handleCancel}\n          @click=${(e: MouseEvent) => {\n            if (e.target === this.dialogElement) {\n              this.handleCancel();\n            }\n          }}\n        >\n          ${this.renderPickerSurface()}\n        </dialog>\n      `;\n    }\n\n    return this.renderPickerSurface();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-date-picker': MdDatePicker;\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;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"}

package/dist/chunks/fab-menu.css-3pu930sZ.js

@@ -0,0 +1,320 @@
+import { css as e } from "lit";
+var t = e`
+  :host {
+    display: inline-flex;
+    position: relative;
+    outline: none;
+    vertical-align: middle;
+    -webkit-tap-highlight-color: transparent;
+    box-sizing: border-box;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  /* --- Scrim Overlay for Modal Mode --- */
+  .scrim {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--md-sys-color-scrim, rgba(0, 0, 0, 0.32));
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: 99;
+    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),
+                visibility 250ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([modal][open]) .scrim {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  /* --- Main Container & Stacking --- */
+  .container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+  }
+
+  /* --- Trigger FAB Button --- */
+  .trigger-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border: none;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    background-color: var(--md-sys-color-primary-container, #EADDFF);
+    color: var(--md-sys-color-on-primary-container, #21005D);
+    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0, 0, 0, 0.30));
+    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
+                background-color 200ms cubic-bezier(0.2, 0, 0, 1),
+                transform 250ms cubic-bezier(0.2, 0, 0, 1);
+    overflow: hidden;
+    z-index: 2;
+  }
+
+  .trigger-btn:hover {
+    box-shadow: var(--md-sys-elevation-level4, 0px 2px 3px 0px rgba(0, 0, 0, 0.30));
+  }
+
+  :host([lowered]) .trigger-btn {
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+  }
+
+  :host([lowered]) .trigger-btn:hover {
+    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));
+  }
+
+  /* --- Trigger Sizes --- */
+  :host(:not([size])) .trigger-btn,
+  :host([size="medium"]) .trigger-btn {
+    width: 56px;
+    height: 56px;
+    border-radius: var(--md-sys-shape-corner-large, 16px);
+  }
+
+  :host([size="small"]) .trigger-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--md-sys-shape-corner-medium, 12px);
+  }
+
+  :host([size="large"]) .trigger-btn {
+    width: 96px;
+    height: 96px;
+    border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+  }
+
+  :host([size="large"]) md-icon {
+    --md-icon-size: 36px;
+  }
+
+  /* --- Extended Trigger FAB --- */
+  :host([extended]) .trigger-btn {
+    width: auto;
+    min-width: 80px;
+    height: 56px;
+    padding: 0 20px;
+    border-radius: var(--md-sys-shape-corner-large, 16px);
+    gap: 12px;
+  }
+
+  .trigger-content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .trigger-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([open]:not([open-icon])) .trigger-icon.rotate {
+    transform: rotate(45deg);
+  }
+
+  .trigger-label {
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-label-large-size, 14px);
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+    white-space: nowrap;
+  }
+
+  /* --- Sub-FAB Items Stack Container --- */
+  .items {
+    position: absolute;
+    display: flex;
+    gap: 14px;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),
+                visibility 250ms cubic-bezier(0.2, 0, 0, 1),
+                transform 250ms cubic-bezier(0.2, 0, 0, 1);
+    z-index: 1;
+  }
+
+  :host([open]) .items {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: none !important;
+  }
+
+  /* Directions */
+  :host(:not([direction])) .items,
+  :host([direction="up"]) .items {
+    flex-direction: column-reverse;
+    bottom: calc(100% + 14px);
+    right: 0;
+    align-items: flex-end;
+    transform: translateY(16px) scale(0.9);
+  }
+
+  :host([direction="down"]) .items {
+    flex-direction: column;
+    top: calc(100% + 14px);
+    right: 0;
+    align-items: flex-end;
+    transform: translateY(-16px) scale(0.9);
+  }
+
+  :host([direction="left"]) .items {
+    flex-direction: row-reverse;
+    right: calc(100% + 14px);
+    top: 50%;
+    transform: translateY(-50%) translateX(16px) scale(0.9);
+    align-items: center;
+  }
+
+  :host([direction="left"][open]) .items {
+    transform: translateY(-50%) !important;
+  }
+
+  :host([direction="right"]) .items {
+    flex-direction: row;
+    left: calc(100% + 14px);
+    top: 50%;
+    transform: translateY(-50%) translateX(-16px) scale(0.9);
+    align-items: center;
+  }
+
+  :host([direction="right"][open]) .items {
+    transform: translateY(-50%) !important;
+  }
+`, r = e`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    outline: none;
+    vertical-align: middle;
+    -webkit-tap-highlight-color: transparent;
+    box-sizing: border-box;
+    user-select: none;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  .item-container {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+  }
+
+  :host([label-placement="end"]) .item-container {
+    flex-direction: row-reverse;
+  }
+
+  :host([label-placement="top"]) .item-container {
+    flex-direction: column-reverse;
+    gap: 6px;
+  }
+
+  :host([label-placement="bottom"]) .item-container {
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  /* --- Item Label Pill --- */
+  .label-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px;
+    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    border-radius: var(--md-sys-shape-corner-small, 8px);
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-label-large-size, 14px);
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+    white-space: nowrap;
+    transition: background-color 150ms ease, box-shadow 150ms ease;
+  }
+
+  .item-container:hover .label-pill {
+    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);
+    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));
+  }
+
+  /* --- Sub-FAB Mini Button --- */
+  .mini-fab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    background-color: var(--md-sys-color-secondary-container, #E8DEF8);
+    color: var(--md-sys-color-on-secondary-container, #1D192B);
+    box-shadow: var(--md-sys-elevation-level2, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
+                background-color 200ms cubic-bezier(0.2, 0, 0, 1);
+    overflow: hidden;
+  }
+
+  .item-container:hover .mini-fab {
+    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0, 0, 0, 0.30));
+  }
+
+  :host(:not([size])) .mini-fab,
+  :host([size="small"]) .mini-fab {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--md-sys-shape-corner-medium, 12px);
+  }
+
+  :host([size="medium"]) .mini-fab {
+    width: 56px;
+    height: 56px;
+    border-radius: var(--md-sys-shape-corner-large, 16px);
+  }
+
+  :host([lowered]) .mini-fab {
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+  }
+
+  .icon-wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 1;
+  }
+`;
+export {
+  t as n,
+  r as t
+};
+
+//# sourceMappingURL=fab-menu.css-3pu930sZ.js.map

package/dist/chunks/fab-menu.css-3pu930sZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu.css-3pu930sZ.js","names":[],"sources":["../../src/components/fab-menu/fab-menu.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const fabMenuStyles = css`\n  :host {\n    display: inline-flex;\n    position: relative;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n    box-sizing: border-box;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  /* --- Scrim Overlay for Modal Mode --- */\n  .scrim {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    height: 100vh;\n    background-color: var(--md-sys-color-scrim, rgba(0, 0, 0, 0.32));\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    z-index: 99;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([modal][open]) .scrim {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  /* --- Main Container & Stacking --- */\n  .container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 100;\n  }\n\n  /* --- Trigger FAB Button --- */\n  .trigger-btn {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    background-color: var(--md-sys-color-primary-container, #EADDFF);\n    color: var(--md-sys-color-on-primary-container, #21005D);\n    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0, 0, 0, 0.30));\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                transform 250ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n    z-index: 2;\n  }\n\n  .trigger-btn:hover {\n    box-shadow: var(--md-sys-elevation-level4, 0px 2px 3px 0px rgba(0, 0, 0, 0.30));\n  }\n\n  :host([lowered]) .trigger-btn {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  :host([lowered]) .trigger-btn:hover {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n  }\n\n  /* --- Trigger Sizes --- */\n  :host(:not([size])) .trigger-btn,\n  :host([size=\"medium\"]) .trigger-btn {\n    width: 56px;\n    height: 56px;\n    border-radius: var(--md-sys-shape-corner-large, 16px);\n  }\n\n  :host([size=\"small\"]) .trigger-btn {\n    width: 40px;\n    height: 40px;\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n  }\n\n  :host([size=\"large\"]) .trigger-btn {\n    width: 96px;\n    height: 96px;\n    border-radius: var(--md-sys-shape-corner-extra-large, 28px);\n  }\n\n  :host([size=\"large\"]) md-icon {\n    --md-icon-size: 36px;\n  }\n\n  /* --- Extended Trigger FAB --- */\n  :host([extended]) .trigger-btn {\n    width: auto;\n    min-width: 80px;\n    height: 56px;\n    padding: 0 20px;\n    border-radius: var(--md-sys-shape-corner-large, 16px);\n    gap: 12px;\n  }\n\n  .trigger-content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    position: relative;\n    z-index: 1;\n  }\n\n  .trigger-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([open]:not([open-icon])) .trigger-icon.rotate {\n    transform: rotate(45deg);\n  }\n\n  .trigger-label {\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n    white-space: nowrap;\n  }\n\n  /* --- Sub-FAB Items Stack Container --- */\n  .items {\n    position: absolute;\n    display: flex;\n    gap: 14px;\n    pointer-events: none;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1),\n                transform 250ms cubic-bezier(0.2, 0, 0, 1);\n    z-index: 1;\n  }\n\n  :host([open]) .items {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n    transform: none !important;\n  }\n\n  /* Directions */\n  :host(:not([direction])) .items,\n  :host([direction=\"up\"]) .items {\n    flex-direction: column-reverse;\n    bottom: calc(100% + 14px);\n    right: 0;\n    align-items: flex-end;\n    transform: translateY(16px) scale(0.9);\n  }\n\n  :host([direction=\"down\"]) .items {\n    flex-direction: column;\n    top: calc(100% + 14px);\n    right: 0;\n    align-items: flex-end;\n    transform: translateY(-16px) scale(0.9);\n  }\n\n  :host([direction=\"left\"]) .items {\n    flex-direction: row-reverse;\n    right: calc(100% + 14px);\n    top: 50%;\n    transform: translateY(-50%) translateX(16px) scale(0.9);\n    align-items: center;\n  }\n\n  :host([direction=\"left\"][open]) .items {\n    transform: translateY(-50%) !important;\n  }\n\n  :host([direction=\"right\"]) .items {\n    flex-direction: row;\n    left: calc(100% + 14px);\n    top: 50%;\n    transform: translateY(-50%) translateX(-16px) scale(0.9);\n    align-items: center;\n  }\n\n  :host([direction=\"right\"][open]) .items {\n    transform: translateY(-50%) !important;\n  }\n`;\n\nexport const fabMenuItemStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n    box-sizing: border-box;\n    user-select: none;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .item-container {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    cursor: pointer;\n  }\n\n  :host([label-placement=\"end\"]) .item-container {\n    flex-direction: row-reverse;\n  }\n\n  :host([label-placement=\"top\"]) .item-container {\n    flex-direction: column-reverse;\n    gap: 6px;\n  }\n\n  :host([label-placement=\"bottom\"]) .item-container {\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  /* --- Item Label Pill --- */\n  .label-pill {\n    display: inline-flex;\n    align-items: center;\n    padding: 6px 12px;\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n    white-space: nowrap;\n    transition: background-color 150ms ease, box-shadow 150ms ease;\n  }\n\n  .item-container:hover .label-pill {\n    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n  }\n\n  /* --- Sub-FAB Mini Button --- */\n  .mini-fab {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    outline: none;\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n    box-shadow: var(--md-sys-elevation-level2, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  .item-container:hover .mini-fab {\n    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0, 0, 0, 0.30));\n  }\n\n  :host(:not([size])) .mini-fab,\n  :host([size=\"small\"]) .mini-fab {\n    width: 40px;\n    height: 40px;\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n  }\n\n  :host([size=\"medium\"]) .mini-fab {\n    width: 56px;\n    height: 56px;\n    border-radius: var(--md-sys-shape-corner-large, 16px);\n  }\n\n  :host([lowered]) .mini-fab {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  .icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    z-index: 1;\n  }\n`;\n"],"mappings":";AAEA,IAAa,IAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgNhB,IAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/chunks/{icon-button-BdSc7eot.js → icon-button-BQz73GLa.js}

@@ -26,7 +26,7 @@ var c = l`
     height: 40px;
     padding: 0;
     border: none;
-    border-radius: var(--md-sys-shape-corner-full, 50%);
+    border-radius: var(--md-icon-button-border-radius, var(--md-button-border-radius, var(--md-sys-shape-corner-full, 50%)));
     overflow: hidden;
     background-color: transparent;
     color: var(--md-sys-color-on-surface-variant, #49454F);
@@ -185,4 +185,4 @@ export {
   t
 };
 
-//# sourceMappingURL=icon-button-BdSc7eot.js.map
+//# sourceMappingURL=icon-button-BQz73GLa.js.map

package/dist/chunks/icon-button-BQz73GLa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-BQz73GLa.js","names":[],"sources":["../../src/components/icon-button/icon-button.css.ts","../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const iconButtonStyles = css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  button, a {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    border: none;\n    border-radius: var(--md-icon-button-border-radius, var(--md-button-border-radius, var(--md-sys-shape-corner-full, 50%)));\n    overflow: hidden;\n    background-color: transparent;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    text-decoration: none;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* --- Filled --- */\n  :host([variant=\"filled\"]) button,\n  :host([variant=\"filled\"]) a {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n\n  :host([variant=\"filled\"][selected]) button,\n  :host([variant=\"filled\"][selected]) a {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n\n  /* --- Tonal --- */\n  :host([variant=\"tonal\"]) button,\n  :host([variant=\"tonal\"]) a {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n  }\n\n  /* --- Outlined --- */\n  :host([variant=\"outlined\"]) button,\n  :host([variant=\"outlined\"]) a {\n    border: 1px solid var(--md-sys-color-outline, #79747E);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  :host([variant=\"outlined\"][selected]) button,\n  :host([variant=\"outlined\"][selected]) a {\n    background-color: var(--md-sys-color-inverse-surface, #313033);\n    color: var(--md-sys-color-inverse-on-surface, #F4EFF4);\n    border: none;\n  }\n\n  /* --- Toggle / Selected for Standard --- */\n  :host(:not([variant])[selected]) button,\n  :host(:not([variant])[selected]) a,\n  :host([variant=\"standard\"][selected]) button,\n  :host([variant=\"standard\"][selected]) a {\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  /* --- Disabled --- */\n  :host([disabled]) button,\n  :host([disabled]) a {\n    cursor: not-allowed;\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][variant=\"filled\"]) button,\n  :host([disabled][variant=\"filled\"]) a,\n  :host([disabled][variant=\"tonal\"]) button,\n  :host([disabled][variant=\"tonal\"]) a {\n    background-color: rgba(29, 27, 32, 0.12);\n  }\n\n  :host([disabled][variant=\"outlined\"]) button,\n  :host([disabled][variant=\"outlined\"]) a {\n    border-color: rgba(29, 27, 32, 0.12);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    z-index: 1;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { iconButtonStyles } from './icon-button.css.js';\n\nexport type IconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';\n\n@customElement('md-icon-button')\nexport class MdIconButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, iconButtonStyles];\n\n  @property({ type: String, reflect: true })\n  variant: IconButtonVariant = 'standard';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  toggle = false;\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'selected-icon' })\n  selectedIcon = '';\n\n  @property({ type: String, attribute: 'aria-label' })\n  ariaLabelText = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    if (this.toggle) {\n      this.selected = !this.selected;\n      this.emitEvent('change', { selected: this.selected });\n    }\n  };\n\n  override render() {\n    const iconName = (this.selected && this.selectedIcon) ? this.selectedIcon : this.icon;\n\n    const content = html`\n      <md-ripple ?disabled=${this.disabled}></md-ripple>\n      <md-focus-ring></md-focus-ring>\n      <span class=\"content\">\n        <slot>\n          ${iconName ? html`<md-icon name=${iconName} ?filled=${this.selected}></md-icon>` : nothing}\n        </slot>\n      </span>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-label=${this.ariaLabelText || nothing}\n          aria-pressed=${this.toggle ? (this.selected ? 'true' : 'false') : nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.handleClick}\n        >\n          ${content}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        aria-label=${this.ariaLabelText || nothing}\n        aria-pressed=${this.toggle ? (this.selected ? 'true' : 'false') : nothing}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n      >\n        ${content}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon-button': MdIconButton;\n  }\n}\n\n"],"mappings":"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"}

package/dist/chunks/loading-indicator-CvWnZr9o.js

@@ -0,0 +1,193 @@
+import { n as r, t as a } from "./decorate-DXuynaiA.js";
+import { css as s, html as o } from "lit";
+import { customElement as n, property as i } from "lit/decorators.js";
+var d = s`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    box-sizing: border-box;
+    --md-loading-indicator-color: var(--md-sys-color-primary, #6750A4);
+    --md-loading-indicator-container-color: var(--md-sys-color-surface-container-high, #ECE6F0);
+    --md-loading-indicator-container-shape: var(--md-sys-shape-corner-medium, 16px);
+  }
+
+  :host([size="small"]) {
+    --_size: var(--md-loading-indicator-size, 36px);
+    --_shape-size: var(--md-loading-indicator-shape-size, 18px);
+  }
+
+  :host(:not([size])),
+  :host([size="medium"]) {
+    --_size: var(--md-loading-indicator-size, 48px);
+    --_shape-size: var(--md-loading-indicator-shape-size, 24px);
+  }
+
+  :host([size="large"]) {
+    --_size: var(--md-loading-indicator-size, 64px);
+    --_shape-size: var(--md-loading-indicator-shape-size, 32px);
+  }
+
+  :host(:not([contained])) {
+    width: var(--_shape-size);
+    height: var(--_shape-size);
+  }
+
+  :host([contained]) {
+    width: var(--_size);
+    height: var(--_size);
+    background-color: var(--md-loading-indicator-container-color);
+    border-radius: var(--md-loading-indicator-container-shape);
+  }
+
+  :host([hidden]),
+  :host([active="false"]) {
+    display: none;
+  }
+
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .shape {
+    width: var(--_shape-size);
+    height: var(--_shape-size);
+    background-color: var(--md-loading-indicator-color);
+    transform-origin: center center;
+    will-change: transform, border-radius;
+  }
+
+  /* Morphing shape animation */
+  :host([shape="morph"]:not([paused])) .shape,
+  :host(:not([shape]):not([paused])) .shape {
+    animation: md-loading-morph 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+
+  :host([shape="square"]:not([paused])) .shape {
+    border-radius: 4px;
+    animation: md-loading-spin 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+
+  :host([shape="circle"]:not([paused])) .shape {
+    border-radius: 50%;
+    animation: md-loading-pulse 1.4s ease-in-out infinite alternate;
+  }
+
+  :host([shape="clover"]:not([paused])) .shape,
+  :host([shape="star"]:not([paused])) .shape {
+    border-radius: 50% 15% 50% 15%;
+    animation: md-loading-spin 2s linear infinite;
+  }
+
+  :host([paused]) .shape {
+    animation-play-state: paused;
+  }
+
+  @keyframes md-loading-morph {
+    0% {
+      border-radius: 50%;
+      transform: rotate(0deg) scale(1);
+    }
+    20% {
+      border-radius: 12%;
+      transform: rotate(90deg) scale(0.85);
+    }
+    40% {
+      border-radius: 50% 15% 50% 15%;
+      transform: rotate(180deg) scale(1.05);
+    }
+    60% {
+      border-radius: 15% 50% 15% 50%;
+      transform: rotate(270deg) scale(0.85);
+    }
+    80% {
+      border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
+      transform: rotate(315deg) scale(0.95);
+    }
+    100% {
+      border-radius: 50%;
+      transform: rotate(360deg) scale(1);
+    }
+  }
+
+  @keyframes md-loading-spin {
+    0% {
+      transform: rotate(0deg) scale(0.9);
+    }
+    50% {
+      transform: rotate(180deg) scale(1.05);
+    }
+    100% {
+      transform: rotate(360deg) scale(0.9);
+    }
+  }
+
+  @keyframes md-loading-pulse {
+    0% {
+      transform: scale(0.75);
+      opacity: 0.7;
+    }
+    100% {
+      transform: scale(1.05);
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .shape {
+      animation: none !important;
+    }
+  }
+`, e = class extends r {
+  constructor(...t) {
+    super(...t), this.size = "medium", this.contained = !1, this.shape = "morph", this.paused = !1, this.label = "Loading";
+  }
+  static {
+    this.styles = [r.styles, d];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "status"), this.hasAttribute("aria-live") || this.setAttribute("aria-live", "polite"), this.updateAriaLabel();
+  }
+  updated(t) {
+    super.updated(t), t.has("label") && this.updateAriaLabel();
+  }
+  updateAriaLabel() {
+    this.label && !this.getAttribute("aria-label") && this.setAttribute("aria-label", this.label);
+  }
+  render() {
+    return o`
+      <div class="container" part="container">
+        <div class="shape" part="shape"></div>
+      </div>
+    `;
+  }
+};
+a([i({
+  type: String,
+  reflect: !0
+})], e.prototype, "size", void 0);
+a([i({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "contained", void 0);
+a([i({
+  type: String,
+  reflect: !0
+})], e.prototype, "shape", void 0);
+a([i({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "paused", void 0);
+a([i({ type: String })], e.prototype, "label", void 0);
+e = a([n("md-loading-indicator")], e);
+export {
+  e as t
+};
+
+//# sourceMappingURL=loading-indicator-CvWnZr9o.js.map