@m3e/web 2.5.12 → 2.5.13

package/dist/datepicker.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.min.js","sources":["../../src/datepicker/DatepickerElement.ts","../../src/datepicker/DatepickerToggleElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  customElement,\r\n  AttachInternals,\r\n  dateConverter,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  Role,\r\n  ScrollLockController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n  InertController,\r\n  ReconnectedCallback,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\nimport { M3eCalendarElement, CalendarView } from \"@m3e/web/calendar\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/calendar\";\r\n\r\nimport { DatepickerVariant } from \"./DatepickerVariant\";\r\n\r\n/**\r\n * Presents a date picker on a temporary surface.\r\n *\r\n * @description\r\n * The `m3e-datepicker` component provides a date‑selection experience\r\n * consistent with Material 3 guidance for layout, motion, and accessibility.\r\n * It displays a temporary surface that allows users to select a date or date\r\n * range using calendar-based views. The picker supports month, year, and\r\n * multi‑year views, enabling users to navigate across time efficiently.\r\n *\r\n * While open, the picker uses a focused selection flow. Users review their\r\n * choice and complete the interaction through confirm, dismiss, or clear\r\n * actions, ensuring intentional updates to the field or control that invoked it.\r\n *\r\n * It accepts and emits plain `Date` values, allowing applications to apply their\r\n * own formatting, parsing, and localization.\r\n *\r\n * @tag m3e-datepicker\r\n *\r\n * @attr variant - The appearance variant of the picker.\r\n * @attr clearable - Whether the user can clear the selected date and close the picker.\r\n * @attr date - The selected date.\r\n * @attr max-date - The maximum date that can be selected.\r\n * @attr min-date - The minimum date that can be selected.\r\n * @attr range - Whether a range of dates can be selected.\r\n * @attr range-end - End of a date range.\r\n * @attr range-start - Start of a date range.\r\n * @attr start-at - A date specifying the period (month or year) to start the calendar in.\r\n * @attr start-view - The initial view used to select a date.\r\n * @attr previous-month-label - The accessible label given to the button used to move to the previous month.\r\n * @attr next-month-label - The accessible label given to the button used to move to the next month.\r\n * @attr previous-year-label - The accessible label given to the button used to move to the previous year.\r\n * @attr next-year-label - The accessible label given to the button used to move to the next year.\r\n * @attr previous-multi-year-label - The accessible label given to the button used to move to the previous 24 years.\r\n * @attr next-multi-year-label - The accessible label given to the button used to move to the next 24 years.\r\n * @attr clear-label - The label given to the button used clear the selected date and close the picker.\r\n * @attr confirm-label - The label given to the button used apply the selected date and close the picker.\r\n * @attr dismiss-label - The label given to the button used discard the selected date and close the picker.\r\n * @attr label - The label given to the the picker.\r\n *\r\n * @fires change - Dispatched when the selected date changes.\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-datepicker-container-padding-block - Block‑axis padding of the date picker container.\r\n * @cssprop --m3e-datepicker-container-padding-inline - Inline‑axis padding of the date picker container.\r\n * @cssprop --m3e-datepicker-container-color - Background color of the standard container surface.\r\n * @cssprop --m3e-datepicker-container-elevation - Elevation shadow applied to the container surface.\r\n * @cssprop --m3e-datepicker-modal-headline-color - Color used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-font-size - Font size used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-font-weight - Font weight used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-line-height - Line height used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-tracking - Letter spacing used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-color - Color used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-font-size - Font size used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-font-weight - Font weight used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-line-height - Line height used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-tracking - Letter spacing used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-actions-padding-inline - Inline‑axis padding of the action row.\r\n * @cssprop --m3e-datepicker-docked-container-color - Background color of the container in docked mode.\r\n * @cssprop --m3e-datepicker-docked-container-shape - Corner radius of the container in docked mode.\r\n * @cssprop --m3e-datepicker-modal-container-color - Background color of the container in modal mode.\r\n * @cssprop --m3e-datepicker-modal-container-shape - Corner radius of the container in modal mode.\r\n * @cssprop --m3e-divider-thickness - Thickness of divider elements within the picker.\r\n * @cssprop --m3e-divider-color - Color of divider rules within the picker.\r\n * @cssprop --m3e-dialog-scrim-color - Base color used for the modal scrim behind the picker.\r\n * @cssprop --m3e-dialog-scrim-opacity - Opacity applied to the scrim color in modal mode.\r\n */\r\n@customElement(\"m3e-datepicker\")\r\nexport class M3eDatepickerElement extends SuppressInitialAnimation(\r\n  ReconnectedCallback(AttachInternals(Role(LitElement, \"dialog\"))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      flex-direction: column;\r\n      margin: unset;\r\n      border: unset;\r\n      padding-block: var(--m3e-datepicker-container-padding-block, 0.75rem);\r\n      padding-inline: var(--m3e-datepicker-container-padding-inline, 0.25rem);\r\n      background-color: var(--m3e-datepicker-container-color, ${DesignToken.color.surfaceContainer});\r\n      box-shadow: var(--m3e-datepicker-container-elevation, ${DesignToken.elevation.level3});\r\n      opacity: 0;\r\n      display: none;\r\n    }\r\n    .calendar {\r\n      --m3e-calendar-container-color: transparent;\r\n      --m3e-calendar-container-elevation: ${DesignToken.elevation.level0};\r\n      --m3e-calendar-container-shape: ${DesignToken.shape.corner.none};\r\n    }\r\n    .headline {\r\n      color: var(--m3e-datepicker-modal-headline-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(\r\n        --m3e-datepicker-modal-headline-font-size,\r\n        ${DesignToken.typescale.standard.headline.large.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-datepicker-modal-headline-font-weight,\r\n        ${DesignToken.typescale.standard.headline.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-datepicker-modal-headline-line-height,\r\n        ${DesignToken.typescale.standard.headline.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-datepicker-modal-headline-tracking,\r\n        ${DesignToken.typescale.standard.headline.large.tracking}\r\n      );\r\n      margin-block-start: 2.25rem;\r\n      margin-block-end: 0.75rem;\r\n      margin-inline: 1.5rem;\r\n    }\r\n    .supporting-text {\r\n      color: var(--m3e-datepicker-modal-supporting-text-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(\r\n        --m3e-datepicker-modal-supporting-text-font-size,\r\n        ${DesignToken.typescale.standard.label.large.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-datepicker-modal-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-datepicker-modal-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-datepicker-modal-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.label.large.tracking}\r\n      );\r\n      margin-block-start: 1rem;\r\n      margin-inline: 1.5rem;\r\n    }\r\n    .divider {\r\n      height: var(--m3e-divider-thickness, 1px);\r\n      width: 100%;\r\n      position: relative;\r\n    }\r\n    .divider::before {\r\n      content: \"\";\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      border-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n      height: inherit;\r\n      left: -0.25rem;\r\n      right: -0.25rem;\r\n    }\r\n    .actions {\r\n      display: flex;\r\n      align-items: center;\r\n      column-gap: 0.5rem;\r\n      padding-inline: var(--m3e-datepicker-actions-padding-inline, 0.5rem);\r\n    }\r\n    .spacer {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host(:is(:state(--docked), :--docked)) {\r\n      position: absolute;\r\n      background-color: var(--m3e-datepicker-docked-container-color, ${DesignToken.color.surfaceContainer});\r\n      border-radius: var(--m3e-datepicker-docked-container-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host(:is(:state(--modal), :--modal)) {\r\n      position: fixed;\r\n      inset: 0;\r\n      margin: auto;\r\n      transform-origin: top;\r\n      background-color: var(--m3e-datepicker-modal-container-color, ${DesignToken.color.surfaceContainerHigh});\r\n      border-radius: var(--m3e-datepicker-modal-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},\r\n        overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host {\r\n      transform: scaleY(0.8);\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleY(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host(:is(:state(--docked), :--docked))::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:is(:state(--modal), :--modal))::backdrop {\r\n      background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      margin-inline-end: -20px;\r\n    }\r\n    :host(:is(:state(--modal), :--modal):not(:popover-open))::backdrop {\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--modal), :--modal):popover-open)::backdrop {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%),\r\n        transparent\r\n      );\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--bottom), :--bottom)) {\r\n      transform-origin: top;\r\n    }\r\n    :host(:is(:state(--top), :--top)) {\r\n      transform-origin: bottom;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        transform: scaleY(0.8);\r\n      }\r\n      :host(:is(:state(--modal), :--modal):popover-open)::backdrop {\r\n        background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n        border: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @state() private _date?: Date | null;\r\n  /** @private */ @state() private _rangeStart?: Date | null;\r\n  /** @private */ @state() private _rangeEnd?: Date | null;\r\n\r\n  /** @private */ @query(\"m3e-calendar\") private readonly _calendar!: M3eCalendarElement;\r\n  /** @private */ @state() private _variant?: Exclude<DatepickerVariant, \"auto\">;\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchor?: HTMLElement;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n  /** @private */ readonly #inertController = new InertController(this);\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n  /** @private */ readonly #documentKeyDownHandler = (e: KeyboardEvent) => this.#handleDocumentKeyDown(e);\r\n\r\n  /** @private */\r\n  readonly #toggleHandler = (e: ToggleEvent) => {\r\n    if (e.newState === \"closed\") {\r\n      this.#clearSelectionState();\r\n      this.#anchorCleanup?.();\r\n      this.#anchorCleanup = undefined;\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The appearance variant of the picker.\r\n   * @default \"docked\"\r\n   */\r\n  @property() variant: DatepickerVariant = \"docked\";\r\n\r\n  /**\r\n   * The initial view used to select a date.\r\n   * @default \"month\"\r\n   */\r\n  @property({ attribute: \"start-view\" }) startView: CalendarView = \"month\";\r\n\r\n  /**\r\n   * The selected date.\r\n   * @default null\r\n   */\r\n  @property({ converter: dateConverter }) date: Date | null = null;\r\n\r\n  /**\r\n   * A date specifying the period (month or year) to start the calendar in.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"start-at\", converter: dateConverter }) startAt: Date | null = null;\r\n\r\n  /**\r\n   * The minimum date that can be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"min-date\", converter: dateConverter }) minDate: Date | null = null;\r\n\r\n  /**\r\n   * The maximum date that can be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"max-date\", converter: dateConverter }) maxDate: Date | null = null;\r\n\r\n  /**\r\n   * Whether a range of dates can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) range = false;\r\n\r\n  /**\r\n   * Start of a date range.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"range-start\", converter: dateConverter }) rangeStart: Date | null = null;\r\n\r\n  /**\r\n   * End of a date range.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"range-end\", converter: dateConverter }) rangeEnd: Date | null = null;\r\n\r\n  /**\r\n   * A function used to determine whether a date cannot be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: false }) blackoutDates: ((date: Date) => boolean) | null = null;\r\n\r\n  /**\r\n   * A function used to determine whether a date is special.\r\n   * @default null\r\n   */\r\n  @property({ attribute: false }) specialDates: ((date: Date) => boolean) | null = null;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous month.\r\n   * @default \"Previous month\"\r\n   */\r\n  @property({ attribute: \"previous-month-label\" }) previousMonthLabel = \"Previous month\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous year.\r\n   * @default \"Previous year\"\r\n   */\r\n  @property({ attribute: \"previous-year-label\" }) previousYearLabel = \"Previous year\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous 24 years.\r\n   * @default \"Previous 24 years\"\r\n   */\r\n  @property({ attribute: \"previous-multi-year-label\" }) previousMultiYearLabel = \"Previous 24 years\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next month.\r\n   * @default \"Next month\"\r\n   */\r\n  @property({ attribute: \"next-month-label\" }) nextMonthLabel = \"Next month\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next year.\r\n   * @default \"Next year\"\r\n   */\r\n  @property({ attribute: \"next-year-label\" }) nextYearLabel = \"Next year\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next 24 years.\r\n   * @default \"Next 24 years\"\r\n   */\r\n  @property({ attribute: \"next-multi-year-label\" }) nextMultiYearLabel = \"Next 24 years\";\r\n\r\n  /**\r\n   * Whether the user can clear the selected date and close the picker.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) clearable = false;\r\n\r\n  /**\r\n   * The label given to the button used clear the selected date and close the picker.\r\n   * @default \"Clear\"\r\n   */\r\n  @property({ attribute: \"clear-label\" }) clearLabel = \"Clear\";\r\n\r\n  /**\r\n   * The label given to the button used apply the selected date and close the picker.\r\n   * @default \"OK\"\r\n   */\r\n  @property({ attribute: \"confirm-label\" }) confirmLabel = \"OK\";\r\n\r\n  /**\r\n   * The label given to the button used discard the selected date and close the picker.\r\n   * @default \"Cancel\"\r\n   */\r\n  @property({ attribute: \"dismiss-label\" }) dismissLabel = \"Cancel\";\r\n\r\n  /**\r\n   * The label given to the the picker.\r\n   * @default \"Select date\"\r\n   */\r\n  @property() label = \"Select date\";\r\n\r\n  /** Whether the picker is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /** The current variant applied to the picker. */\r\n  get currentVariant(): Exclude<DatepickerVariant, \"auto\"> {\r\n    return this._variant ?? (this.variant !== \"modal\" ? \"docked\" : \"modal\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n    document.addEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._variant = undefined;\r\n    this.#breakpointUnobserve?.();\r\n\r\n    this.#clearAnchoring();\r\n\r\n    deleteCustomState(this, \"--docked\");\r\n    deleteCustomState(this, \"--modal\");\r\n\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n    document.removeEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n\r\n    if (this.variant === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Opens the picker.\r\n   * @param {HTMLElement} trigger The element that triggered the picker.\r\n   * @param {HTMLElement | undefined} anchor The element used to position the picker.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the picker is opened.\r\n   */\r\n  async show(trigger: HTMLElement, anchor?: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    if (this.currentVariant === \"modal\") {\r\n      this.#scrollLockController.lock();\r\n      this.#inertController.lock();\r\n    }\r\n\r\n    const calendar = this._calendar;\r\n\r\n    calendar.date = this.date;\r\n    calendar.rangeStart = this.rangeStart;\r\n    calendar.rangeEnd = this.rangeEnd;\r\n\r\n    // Reset the start-view\r\n    calendar.requestUpdate(\"startView\");\r\n    if (calendar.isUpdatePending) {\r\n      await calendar.updateComplete;\r\n    }\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#anchor = anchor;\r\n\r\n    await this.#updatePosition();\r\n    this.showPopover();\r\n\r\n    await this._calendar.focusActiveCell();\r\n  }\r\n\r\n  /**\r\n   * Hides the picker.\r\n   * @param {boolean} [restoreFocus=false] Whether to restore focus to the picker's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    if (this.currentVariant === \"modal\") {\r\n      this.#scrollLockController.unlock();\r\n      this.#inertController.unlock();\r\n    }\r\n\r\n    this.hidePopover();\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n      this.#trigger = undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Toggles the picker.\r\n   * @param {HTMLElement} trigger The element that triggered the picker.\r\n   * @param {HTMLElement | undefined} anchor The element used to position the picker.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the picker is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement, anchor?: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger, anchor);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-trap>\r\n      ${this.#renderHeader()}\r\n      <m3e-calendar\r\n        class=\"calendar\"\r\n        start-view=\"${this.startView}\"\r\n        start-at=\"${ifDefined(this.startAt?.toISOString())}\"\r\n        min-date=\"${ifDefined(this.minDate?.toISOString())}\"\r\n        max-date=\"${ifDefined(this.maxDate?.toISOString())}\"\r\n        @change=\"${this.#handleCalendarChange}\"\r\n      ></m3e-calendar>\r\n      <div class=\"actions\">\r\n        ${this.clearable\r\n          ? html`<m3e-button @click=\"${this.#handleClearClick}\">${this.clearLabel}</m3e-button>`\r\n          : nothing}\r\n        <div class=\"spacer\" aria-hidden=\"true\"></div>\r\n        <m3e-button @click=\"${this.#handleDismissClick}\">${this.dismissLabel}</m3e-button>\r\n        <m3e-button @click=\"${this.#handleConfirmClick}\">${this.confirmLabel}</m3e-button>\r\n      </div>\r\n    </m3e-focus-trap>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  #renderHeader(): unknown {\r\n    if (this.currentVariant === \"docked\") return nothing;\r\n\r\n    const rangeStart = this._rangeStart ?? this.rangeStart;\r\n    const rangeEnd = this._rangeStart ? this._rangeEnd : (this._rangeEnd ?? this.rangeEnd);\r\n    const selectedDate = this._date ?? this.date;\r\n\r\n    return html`<div class=\"supporting-text\">${this.label}</div>\r\n      ${rangeStart\r\n        ? html`<div class=\"headline\">\r\n            ${new Intl.DateTimeFormat(navigator.language, {\r\n              month: \"short\",\r\n              day: \"numeric\",\r\n            }).format(rangeStart) +\r\n            \" – \" +\r\n            (rangeEnd\r\n              ? new Intl.DateTimeFormat(navigator.language, {\r\n                  month: \"short\",\r\n                  day: \"numeric\",\r\n                }).format(rangeEnd)\r\n              : \"\")}\r\n          </div>`\r\n        : html`<div class=\"headline\">\r\n            ${selectedDate\r\n              ? new Intl.DateTimeFormat(navigator.language, {\r\n                  weekday: \"short\",\r\n                  month: \"short\",\r\n                  day: \"numeric\",\r\n                }).format(selectedDate)\r\n              : \"––\"}\r\n          </div>`}\r\n      <div class=\"divider\"></div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if ([\"date\", \"rangeStart\", \"rangeEnd\"].some((x) => changedProperties.has(<keyof M3eDatepickerElement>x))) {\r\n      this.#clearSelectionState();\r\n    }\r\n    if (changedProperties.has(\"rangeStart\") && this.rangeStart) {\r\n      this.range = true;\r\n    }\r\n    if (changedProperties.has(\"rangeStart\") && this.rangeStart && !changedProperties.has(\"date\")) {\r\n      this.date = new Date(this.rangeStart);\r\n    }\r\n    if (changedProperties.has(\"rangeEnd\") && this.rangeEnd && !changedProperties.has(\"date\")) {\r\n      this.date = new Date(this.rangeEnd);\r\n    }\r\n    if (changedProperties.has(\"variant\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.variant === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this._variant = undefined;\r\n        this.#updateVariant();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"specialDates\") || _changedProperties.has(\"blackoutDates\")) {\r\n      this._calendar.specialDates = this.specialDates;\r\n      this._calendar.blackoutDates = this.blackoutDates;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!e.composedPath().some((x) => x instanceof M3eDatepickerElement || x === this.#trigger || x === this.#anchor)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleCalendarChange(): void {\r\n    this._date = this._calendar.date;\r\n    this._rangeStart = this._calendar.rangeStart;\r\n    this._rangeEnd = this._calendar.rangeEnd;\r\n\r\n    if (this.range && !this._rangeStart && this._date) {\r\n      this._rangeStart = new Date(this._date);\r\n      this._calendar.rangeStart = this._rangeStart;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClearClick(): void {\r\n    this.date = null;\r\n    this.rangeStart = null;\r\n    this.rangeEnd = null;\r\n\r\n    this.hide(true);\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleDismissClick(): void {\r\n    this.hide(true);\r\n  }\r\n\r\n  /** @private */\r\n  #handleConfirmClick(): void {\r\n    this.date = this._date ?? this.date;\r\n    this.rangeStart = this._rangeStart === undefined ? this.rangeStart : this._rangeStart;\r\n    this.rangeEnd = this._rangeEnd === undefined ? this.rangeEnd : this._rangeEnd;\r\n    this.hide(true);\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentKeyDown(e: KeyboardEvent): void {\r\n    if (this.isOpen && this.currentVariant === \"modal\" && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      this.hide(true);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) => {\r\n      this._variant = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? \"modal\" : \"docked\";\r\n      this.#updateVariant();\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #updateVariant(): void {\r\n    switch (this.currentVariant) {\r\n      case \"docked\":\r\n        this.ariaModal = null;\r\n        deleteCustomState(this, \"--modal\");\r\n        addCustomState(this, \"--docked\");\r\n        this.#scrollLockController.unlock();\r\n        this.#inertController.unlock();\r\n        break;\r\n\r\n      case \"modal\":\r\n        this.ariaModal = \"true\";\r\n        deleteCustomState(this, \"--docked\");\r\n        addCustomState(this, \"--modal\");\r\n        if (this.isOpen) {\r\n          this.#scrollLockController.lock();\r\n          this.#inertController.lock();\r\n        }\r\n\r\n        break;\r\n    }\r\n\r\n    if (this.isOpen) {\r\n      this.#updatePosition();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #updatePosition(): Promise<void> {\r\n    if (this.currentVariant === \"docked\" && this.#trigger) {\r\n      this.#anchorCleanup?.();\r\n      this.#anchorCleanup = await positionAnchor(\r\n        this,\r\n        this.#anchor ?? this.#trigger,\r\n        {\r\n          position: \"bottom-start\",\r\n          inline: true,\r\n          flip: true,\r\n          shift: \"both\",\r\n        },\r\n        (x, y, position) => {\r\n          setCustomState(this, \"--top\", position.includes(\"top\"));\r\n          setCustomState(this, \"--bottom\", position.includes(\"bottom\"));\r\n\r\n          if (M3eDirectionality.current === \"rtl\") {\r\n            this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n            this.style.left = \"\";\r\n          } else {\r\n            this.style.left = `${x}px`;\r\n            this.style.right = \"\";\r\n          }\r\n\r\n          this.style.top = `${y}px`;\r\n        },\r\n      );\r\n    } else {\r\n      this.#clearAnchoring();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #clearAnchoring(): void {\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n    this.style.left = \"\";\r\n    this.style.right = \"\";\r\n    this.style.top = \"\";\r\n  }\r\n\r\n  /** @private */\r\n  #clearSelectionState(): void {\r\n    this._date = this._rangeStart = this._rangeEnd = undefined;\r\n  }\r\n}\r\n\r\ninterface M3eDatepickerElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eDatepickerElement {\r\n  addEventListener<K extends keyof M3eDatepickerElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDatepickerElement, ev: M3eDatepickerElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eDatepickerElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDatepickerElement, ev: M3eDatepickerElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-datepicker\": M3eDatepickerElement;\r\n  }\r\n}\r\n","import { customElement, ActionElementBase, HtmlFor } from \"@m3e/web/core\";\r\nimport type { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\nimport { M3eDatepickerElement } from \"./DatepickerElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle a datepicker.\r\n * @tag m3e-datepicker-toggle\r\n */\r\n@customElement(\"m3e-datepicker-toggle\")\r\nexport class M3eDatepickerToggleElement extends HtmlFor(ActionElementBase) {\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = \"dialog\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.control instanceof M3eDatepickerElement && this.parentElement) {\r\n      this.control.toggle(this.parentElement, this.closest<M3eFormFieldElement>(\"m3e-form-field\") ?? undefined);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-datepicker-toggle\": M3eDatepickerToggleElement;\r\n  }\r\n}\r\n"],"names":["M3eDatepickerElement","M3eDatepickerElement_1","SuppressInitialAnimation","ReconnectedCallback","AttachInternals","Role","LitElement","constructor","_M3eDatepickerElement_breakpointUnobserve","set","this","_M3eDatepickerElement_trigger","_M3eDatepickerElement_anchor","_M3eDatepickerElement_anchorCleanup","_M3eDatepickerElement_scrollLockController","ScrollLockController","_M3eDatepickerElement_inertController","InertController","_M3eDatepickerElement_documentClickHandler","e","__classPrivateFieldGet","call","_M3eDatepickerElement_documentKeyDownHandler","_M3eDatepickerElement_toggleHandler","newState","_M3eDatepickerElement_instances","_M3eDatepickerElement_clearSelectionState","__classPrivateFieldSet","undefined","variant","startView","date","startAt","minDate","maxDate","range","rangeStart","rangeEnd","blackoutDates","specialDates","previousMonthLabel","previousYearLabel","previousMultiYearLabel","nextMonthLabel","nextYearLabel","nextMultiYearLabel","clearable","clearLabel","confirmLabel","dismissLabel","label","isOpen","currentVariant","_variant","connectedCallback","super","setAttribute","addEventListener","document","disconnectedCallback","_M3eDatepickerElement_clearAnchoring","deleteCustomState","removeEventListener","reconnectedCallback","_M3eDatepickerElement_initBreakpointMonitoring","show","trigger","anchor","hide","lock","calendar","_calendar","requestUpdate","isUpdatePending","updateComplete","ariaExpanded","_M3eDatepickerElement_updatePosition","showPopover","focusActiveCell","restoreFocus","unlock","hidePopover","focus","toggle","render","html","_M3eDatepickerElement_renderHeader","ifDefined","toISOString","_M3eDatepickerElement_handleCalendarChange","_M3eDatepickerElement_handleClearClick","nothing","_M3eDatepickerElement_handleDismissClick","_M3eDatepickerElement_handleConfirmClick","willUpdate","changedProperties","some","x","has","Date","_M3eDatepickerElement_updateVariant","updated","_changedProperties","_rangeStart","_rangeEnd","selectedDate","_date","Intl","DateTimeFormat","navigator","language","month","day","format","weekday","composedPath","dispatchEvent","Event","bubbles","key","shiftKey","ctrlKey","preventDefault","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","get","ariaModal","addCustomState","async","positionAnchor","position","inline","flip","shift","y","setCustomState","includes","M3eDirectionality","current","style","right","window","innerWidth","clientWidth","left","top","styles","css","DesignToken","color","surfaceContainer","elevation","level3","level0","shape","corner","none","onSurfaceVariant","typescale","standard","headline","large","fontSize","fontWeight","lineHeight","tracking","outlineVariant","surfaceContainerHigh","extraLarge","unsafeCSS","motion","duration","short2","easing","scrim","short3","long2","__decorate","state","prototype","query","property","attribute","converter","dateConverter","type","Boolean","customElement","M3eDatepickerToggleElement","HtmlFor","ActionElementBase","parentElement","ariaHasPopup","_onClick","control","closest"],"mappings":"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"}
+{"version":3,"file":"datepicker.min.js","sources":["../../src/datepicker/DatepickerElement.ts","../../src/datepicker/DatepickerToggleElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  customElement,\r\n  AttachInternals,\r\n  dateConverter,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  Role,\r\n  ScrollLockController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n  InertController,\r\n  ReconnectedCallback,\r\n  prefersReducedMotion,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\nimport { M3eCalendarElement, CalendarView } from \"@m3e/web/calendar\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/calendar\";\r\n\r\nimport { DatepickerVariant } from \"./DatepickerVariant\";\r\n\r\n/**\r\n * Presents a date picker on a temporary surface.\r\n *\r\n * @description\r\n * The `m3e-datepicker` component provides a date‑selection experience\r\n * consistent with Material 3 guidance for layout, motion, and accessibility.\r\n * It displays a temporary surface that allows users to select a date or date\r\n * range using calendar-based views. The picker supports month, year, and\r\n * multi‑year views, enabling users to navigate across time efficiently.\r\n *\r\n * While open, the picker uses a focused selection flow. Users review their\r\n * choice and complete the interaction through confirm, dismiss, or clear\r\n * actions, ensuring intentional updates to the field or control that invoked it.\r\n *\r\n * It accepts and emits plain `Date` values, allowing applications to apply their\r\n * own formatting, parsing, and localization.\r\n *\r\n * @tag m3e-datepicker\r\n *\r\n * @attr variant - The appearance variant of the picker.\r\n * @attr clearable - Whether the user can clear the selected date and close the picker.\r\n * @attr date - The selected date.\r\n * @attr max-date - The maximum date that can be selected.\r\n * @attr min-date - The minimum date that can be selected.\r\n * @attr range - Whether a range of dates can be selected.\r\n * @attr range-end - End of a date range.\r\n * @attr range-start - Start of a date range.\r\n * @attr start-at - A date specifying the period (month or year) to start the calendar in.\r\n * @attr start-view - The initial view used to select a date.\r\n * @attr previous-month-label - The accessible label given to the button used to move to the previous month.\r\n * @attr next-month-label - The accessible label given to the button used to move to the next month.\r\n * @attr previous-year-label - The accessible label given to the button used to move to the previous year.\r\n * @attr next-year-label - The accessible label given to the button used to move to the next year.\r\n * @attr previous-multi-year-label - The accessible label given to the button used to move to the previous 24 years.\r\n * @attr next-multi-year-label - The accessible label given to the button used to move to the next 24 years.\r\n * @attr clear-label - The label given to the button used clear the selected date and close the picker.\r\n * @attr confirm-label - The label given to the button used apply the selected date and close the picker.\r\n * @attr dismiss-label - The label given to the button used discard the selected date and close the picker.\r\n * @attr label - The label given to the the picker.\r\n *\r\n * @fires change - Dispatched when the selected date changes.\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-datepicker-container-padding-block - Block‑axis padding of the date picker container.\r\n * @cssprop --m3e-datepicker-container-padding-inline - Inline‑axis padding of the date picker container.\r\n * @cssprop --m3e-datepicker-container-color - Background color of the standard container surface.\r\n * @cssprop --m3e-datepicker-container-elevation - Elevation shadow applied to the container surface.\r\n * @cssprop --m3e-datepicker-modal-headline-color - Color used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-font-size - Font size used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-font-weight - Font weight used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-line-height - Line height used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-tracking - Letter spacing used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-color - Color used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-font-size - Font size used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-font-weight - Font weight used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-line-height - Line height used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-tracking - Letter spacing used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-actions-padding-inline - Inline‑axis padding of the action row.\r\n * @cssprop --m3e-datepicker-docked-container-color - Background color of the container in docked mode.\r\n * @cssprop --m3e-datepicker-docked-container-shape - Corner radius of the container in docked mode.\r\n * @cssprop --m3e-datepicker-modal-container-color - Background color of the container in modal mode.\r\n * @cssprop --m3e-datepicker-modal-container-shape - Corner radius of the container in modal mode.\r\n * @cssprop --m3e-divider-thickness - Thickness of divider elements within the picker.\r\n * @cssprop --m3e-divider-color - Color of divider rules within the picker.\r\n * @cssprop --m3e-dialog-scrim-color - Base color used for the modal scrim behind the picker.\r\n * @cssprop --m3e-dialog-scrim-opacity - Opacity applied to the scrim color in modal mode.\r\n */\r\n@customElement(\"m3e-datepicker\")\r\nexport class M3eDatepickerElement extends SuppressInitialAnimation(\r\n  ReconnectedCallback(AttachInternals(Role(LitElement, \"dialog\"))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      flex-direction: column;\r\n      margin: unset;\r\n      border: unset;\r\n      padding-block: var(--m3e-datepicker-container-padding-block, 0.75rem);\r\n      padding-inline: var(--m3e-datepicker-container-padding-inline, 0.25rem);\r\n      background-color: var(--m3e-datepicker-container-color, ${DesignToken.color.surfaceContainer});\r\n      box-shadow: var(--m3e-datepicker-container-elevation, ${DesignToken.elevation.level3});\r\n      opacity: 0;\r\n      display: none;\r\n    }\r\n    .calendar {\r\n      --m3e-calendar-container-color: transparent;\r\n      --m3e-calendar-container-elevation: ${DesignToken.elevation.level0};\r\n      --m3e-calendar-container-shape: ${DesignToken.shape.corner.none};\r\n    }\r\n    .headline {\r\n      color: var(--m3e-datepicker-modal-headline-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(\r\n        --m3e-datepicker-modal-headline-font-size,\r\n        ${DesignToken.typescale.standard.headline.large.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-datepicker-modal-headline-font-weight,\r\n        ${DesignToken.typescale.standard.headline.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-datepicker-modal-headline-line-height,\r\n        ${DesignToken.typescale.standard.headline.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-datepicker-modal-headline-tracking,\r\n        ${DesignToken.typescale.standard.headline.large.tracking}\r\n      );\r\n      margin-block-start: 2.25rem;\r\n      margin-block-end: 0.75rem;\r\n      margin-inline: 1.5rem;\r\n    }\r\n    .supporting-text {\r\n      color: var(--m3e-datepicker-modal-supporting-text-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(\r\n        --m3e-datepicker-modal-supporting-text-font-size,\r\n        ${DesignToken.typescale.standard.label.large.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-datepicker-modal-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-datepicker-modal-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-datepicker-modal-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.label.large.tracking}\r\n      );\r\n      margin-block-start: 1rem;\r\n      margin-inline: 1.5rem;\r\n    }\r\n    .divider {\r\n      height: var(--m3e-divider-thickness, 1px);\r\n      width: 100%;\r\n      position: relative;\r\n    }\r\n    .divider::before {\r\n      content: \"\";\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      border-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n      height: inherit;\r\n      left: -0.25rem;\r\n      right: -0.25rem;\r\n    }\r\n    .actions {\r\n      display: flex;\r\n      align-items: center;\r\n      column-gap: 0.5rem;\r\n      padding-inline: var(--m3e-datepicker-actions-padding-inline, 0.5rem);\r\n    }\r\n    .spacer {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host(:is(:state(--docked), :--docked)) {\r\n      position: absolute;\r\n      background-color: var(--m3e-datepicker-docked-container-color, ${DesignToken.color.surfaceContainer});\r\n      border-radius: var(--m3e-datepicker-docked-container-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host(:is(:state(--modal), :--modal)) {\r\n      position: fixed;\r\n      inset: 0;\r\n      margin: auto;\r\n      transform-origin: top;\r\n      background-color: var(--m3e-datepicker-modal-container-color, ${DesignToken.color.surfaceContainerHigh});\r\n      border-radius: var(--m3e-datepicker-modal-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},\r\n        overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host {\r\n      transform: scaleY(0.8);\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleY(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host(:is(:state(--docked), :--docked))::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:is(:state(--modal), :--modal))::backdrop {\r\n      background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      margin-inline-end: -20px;\r\n    }\r\n    :host(:is(:state(--modal), :--modal):not(:popover-open))::backdrop {\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--modal), :--modal):popover-open)::backdrop {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%),\r\n        transparent\r\n      );\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--bottom), :--bottom)) {\r\n      transform-origin: top;\r\n    }\r\n    :host(:is(:state(--top), :--top)) {\r\n      transform-origin: bottom;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        transform: scaleY(0.8);\r\n      }\r\n      :host(:is(:state(--modal), :--modal):popover-open)::backdrop {\r\n        background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n        border: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #closeTimeout = -1;\r\n  /** @private */ @state() private _open = false;\r\n  /** @private */ @state() private _date?: Date | null;\r\n  /** @private */ @state() private _rangeStart?: Date | null;\r\n  /** @private */ @state() private _rangeEnd?: Date | null;\r\n\r\n  /** @private */ @query(\"m3e-calendar\") private readonly _calendar!: M3eCalendarElement;\r\n  /** @private */ @state() private _variant?: Exclude<DatepickerVariant, \"auto\">;\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchor?: HTMLElement;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n  /** @private */ readonly #inertController = new InertController(this);\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n  /** @private */ readonly #documentKeyDownHandler = (e: KeyboardEvent) => this.#handleDocumentKeyDown(e);\r\n\r\n  /** @private */\r\n  readonly #toggleHandler = (e: ToggleEvent) => {\r\n    if (e.newState === \"closed\") {\r\n      this.#clearSelectionState();\r\n      this.#anchorCleanup?.();\r\n      this.#anchorCleanup = undefined;\r\n\r\n      clearTimeout(this.#closeTimeout);\r\n\r\n      if (!prefersReducedMotion()) {\r\n        this.#closeTimeout = setTimeout(() => (this._open = false), 100);\r\n      } else {\r\n        this._open = false;\r\n      }\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The appearance variant of the picker.\r\n   * @default \"docked\"\r\n   */\r\n  @property() variant: DatepickerVariant = \"docked\";\r\n\r\n  /**\r\n   * The initial view used to select a date.\r\n   * @default \"month\"\r\n   */\r\n  @property({ attribute: \"start-view\" }) startView: CalendarView = \"month\";\r\n\r\n  /**\r\n   * The selected date.\r\n   * @default null\r\n   */\r\n  @property({ converter: dateConverter }) date: Date | null = null;\r\n\r\n  /**\r\n   * A date specifying the period (month or year) to start the calendar in.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"start-at\", converter: dateConverter }) startAt: Date | null = null;\r\n\r\n  /**\r\n   * The minimum date that can be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"min-date\", converter: dateConverter }) minDate: Date | null = null;\r\n\r\n  /**\r\n   * The maximum date that can be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"max-date\", converter: dateConverter }) maxDate: Date | null = null;\r\n\r\n  /**\r\n   * Whether a range of dates can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) range = false;\r\n\r\n  /**\r\n   * Start of a date range.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"range-start\", converter: dateConverter }) rangeStart: Date | null = null;\r\n\r\n  /**\r\n   * End of a date range.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"range-end\", converter: dateConverter }) rangeEnd: Date | null = null;\r\n\r\n  /**\r\n   * A function used to determine whether a date cannot be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: false }) blackoutDates: ((date: Date) => boolean) | null = null;\r\n\r\n  /**\r\n   * A function used to determine whether a date is special.\r\n   * @default null\r\n   */\r\n  @property({ attribute: false }) specialDates: ((date: Date) => boolean) | null = null;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous month.\r\n   * @default \"Previous month\"\r\n   */\r\n  @property({ attribute: \"previous-month-label\" }) previousMonthLabel = \"Previous month\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous year.\r\n   * @default \"Previous year\"\r\n   */\r\n  @property({ attribute: \"previous-year-label\" }) previousYearLabel = \"Previous year\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous 24 years.\r\n   * @default \"Previous 24 years\"\r\n   */\r\n  @property({ attribute: \"previous-multi-year-label\" }) previousMultiYearLabel = \"Previous 24 years\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next month.\r\n   * @default \"Next month\"\r\n   */\r\n  @property({ attribute: \"next-month-label\" }) nextMonthLabel = \"Next month\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next year.\r\n   * @default \"Next year\"\r\n   */\r\n  @property({ attribute: \"next-year-label\" }) nextYearLabel = \"Next year\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next 24 years.\r\n   * @default \"Next 24 years\"\r\n   */\r\n  @property({ attribute: \"next-multi-year-label\" }) nextMultiYearLabel = \"Next 24 years\";\r\n\r\n  /**\r\n   * Whether the user can clear the selected date and close the picker.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) clearable = false;\r\n\r\n  /**\r\n   * The label given to the button used clear the selected date and close the picker.\r\n   * @default \"Clear\"\r\n   */\r\n  @property({ attribute: \"clear-label\" }) clearLabel = \"Clear\";\r\n\r\n  /**\r\n   * The label given to the button used apply the selected date and close the picker.\r\n   * @default \"OK\"\r\n   */\r\n  @property({ attribute: \"confirm-label\" }) confirmLabel = \"OK\";\r\n\r\n  /**\r\n   * The label given to the button used discard the selected date and close the picker.\r\n   * @default \"Cancel\"\r\n   */\r\n  @property({ attribute: \"dismiss-label\" }) dismissLabel = \"Cancel\";\r\n\r\n  /**\r\n   * The label given to the the picker.\r\n   * @default \"Select date\"\r\n   */\r\n  @property() label = \"Select date\";\r\n\r\n  /** Whether the picker is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /** The current variant applied to the picker. */\r\n  get currentVariant(): Exclude<DatepickerVariant, \"auto\"> {\r\n    return this._variant ?? (this.variant !== \"modal\" ? \"docked\" : \"modal\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._variant = undefined;\r\n    this.#breakpointUnobserve?.();\r\n\r\n    this.#clearAnchoring();\r\n\r\n    deleteCustomState(this, \"--docked\");\r\n    deleteCustomState(this, \"--modal\");\r\n\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n    document.removeEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n\r\n    if (this.variant === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Opens the picker.\r\n   * @param {HTMLElement} trigger The element that triggered the picker.\r\n   * @param {HTMLElement | undefined} anchor The element used to position the picker.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the picker is opened.\r\n   */\r\n  async show(trigger: HTMLElement, anchor?: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    clearTimeout(this.#closeTimeout);\r\n\r\n    if (this.currentVariant === \"modal\") {\r\n      this.#scrollLockController.lock();\r\n      this.#inertController.lock();\r\n    }\r\n\r\n    // The calendar is rendered on demand\r\n    this._open = true;\r\n\r\n    // Wait for the calendar to render\r\n    if (this.isUpdatePending) {\r\n      await this.updateComplete;\r\n    }\r\n\r\n    const calendar = this._calendar;\r\n\r\n    calendar.startView = this.startView;\r\n    calendar.startAt = this.startAt;\r\n    calendar.minDate = this.minDate;\r\n    calendar.maxDate = this.maxDate;\r\n    calendar.date = this.date;\r\n    calendar.rangeStart = this.rangeStart;\r\n    calendar.rangeEnd = this.rangeEnd;\r\n    calendar.specialDates = this.specialDates;\r\n    calendar.blackoutDates = this.blackoutDates;\r\n\r\n    // Ensure the active view is reset\r\n    calendar.resetActiveView();\r\n\r\n    if (calendar.isUpdatePending) {\r\n      await calendar.updateComplete;\r\n    }\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#anchor = anchor;\r\n\r\n    await this.#updatePosition();\r\n    this.showPopover();\r\n\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n    document.addEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n\r\n    await calendar.focusActiveCell();\r\n  }\r\n\r\n  /**\r\n   * Hides the picker.\r\n   * @param {boolean} [restoreFocus=false] Whether to restore focus to the picker's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    if (!this.isOpen) return;\r\n\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n    document.removeEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n\r\n    if (this.currentVariant === \"modal\") {\r\n      this.#scrollLockController.unlock();\r\n      this.#inertController.unlock();\r\n    }\r\n\r\n    this.hidePopover();\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n      this.#trigger = undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Toggles the picker.\r\n   * @param {HTMLElement} trigger The element that triggered the picker.\r\n   * @param {HTMLElement | undefined} anchor The element used to position the picker.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the picker is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement, anchor?: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger, anchor);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-trap ?disabled=\"${!this._open}\">\r\n      ${this.#renderHeader()}${this.#renderCalendar()}${this.#renderActions()}\r\n    </m3e-focus-trap>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  #renderHeader(): unknown {\r\n    if (this.currentVariant === \"docked\") return nothing;\r\n\r\n    const rangeStart = this._rangeStart ?? this.rangeStart;\r\n    const rangeEnd = this._rangeStart ? this._rangeEnd : (this._rangeEnd ?? this.rangeEnd);\r\n    const selectedDate = this._date ?? this.date;\r\n\r\n    return html`<div class=\"supporting-text\">${this.label}</div>\r\n      ${rangeStart\r\n        ? html`<div class=\"headline\">\r\n            ${new Intl.DateTimeFormat(navigator.language, {\r\n              month: \"short\",\r\n              day: \"numeric\",\r\n            }).format(rangeStart) +\r\n            \" – \" +\r\n            (rangeEnd\r\n              ? new Intl.DateTimeFormat(navigator.language, {\r\n                  month: \"short\",\r\n                  day: \"numeric\",\r\n                }).format(rangeEnd)\r\n              : \"\")}\r\n          </div>`\r\n        : html`<div class=\"headline\">\r\n            ${selectedDate\r\n              ? new Intl.DateTimeFormat(navigator.language, {\r\n                  weekday: \"short\",\r\n                  month: \"short\",\r\n                  day: \"numeric\",\r\n                }).format(selectedDate)\r\n              : \"––\"}\r\n          </div>`}\r\n      <div class=\"divider\"></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCalendar(): unknown {\r\n    // Calendar is rendered only when open\r\n    return this._open\r\n      ? html`<m3e-calendar class=\"calendar\" @change=\"${this.#handleCalendarChange}\"></m3e-calendar>`\r\n      : nothing;\r\n  }\r\n\r\n  /** @private */\r\n  #renderActions(): unknown {\r\n    return html`<div class=\"actions\">\r\n      ${this.clearable ? html`<m3e-button @click=\"${this.#handleClearClick}\">${this.clearLabel}</m3e-button>` : nothing}\r\n      <div class=\"spacer\" aria-hidden=\"true\"></div>\r\n      <m3e-button @click=\"${this.#handleDismissClick}\">${this.dismissLabel}</m3e-button>\r\n      <m3e-button @click=\"${this.#handleConfirmClick}\">${this.confirmLabel}</m3e-button>\r\n    </div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if ([\"date\", \"rangeStart\", \"rangeEnd\"].some((x) => changedProperties.has(<keyof M3eDatepickerElement>x))) {\r\n      this.#clearSelectionState();\r\n    }\r\n    if (changedProperties.has(\"rangeStart\") && this.rangeStart) {\r\n      this.range = true;\r\n    }\r\n    if (changedProperties.has(\"rangeStart\") && this.rangeStart && !changedProperties.has(\"date\")) {\r\n      this.date = new Date(this.rangeStart);\r\n    }\r\n    if (changedProperties.has(\"rangeEnd\") && this.rangeEnd && !changedProperties.has(\"date\")) {\r\n      this.date = new Date(this.rangeEnd);\r\n    }\r\n    if (changedProperties.has(\"variant\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.variant === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this._variant = undefined;\r\n        this.#updateVariant();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (this.isOpen && !e.composedPath().some((x) => x === this || x === this.#trigger)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleCalendarChange(e: Event): void {\r\n    const calendar = <M3eCalendarElement>e.target;\r\n    this._date = calendar.date;\r\n    this._rangeStart = calendar.rangeStart;\r\n    this._rangeEnd = calendar.rangeEnd;\r\n\r\n    if (this.range && !this._rangeStart && this._date) {\r\n      this._rangeStart = new Date(this._date);\r\n      calendar.rangeStart = this._rangeStart;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClearClick(): void {\r\n    this.date = null;\r\n    this.rangeStart = null;\r\n    this.rangeEnd = null;\r\n\r\n    this.hide(true);\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleDismissClick(): void {\r\n    this.hide(true);\r\n  }\r\n\r\n  /** @private */\r\n  #handleConfirmClick(): void {\r\n    this.date = this._date ?? this.date;\r\n    this.rangeStart = this._rangeStart === undefined ? this.rangeStart : this._rangeStart;\r\n    this.rangeEnd = this._rangeEnd === undefined ? this.rangeEnd : this._rangeEnd;\r\n    this.hide(true);\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentKeyDown(e: KeyboardEvent): void {\r\n    if (this.isOpen && this.currentVariant === \"modal\" && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      this.hide(true);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) => {\r\n      this._variant = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? \"modal\" : \"docked\";\r\n      this.#updateVariant();\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #updateVariant(): void {\r\n    switch (this.currentVariant) {\r\n      case \"docked\":\r\n        this.ariaModal = null;\r\n        deleteCustomState(this, \"--modal\");\r\n        addCustomState(this, \"--docked\");\r\n        this.#scrollLockController.unlock();\r\n        this.#inertController.unlock();\r\n        break;\r\n\r\n      case \"modal\":\r\n        this.ariaModal = \"true\";\r\n        deleteCustomState(this, \"--docked\");\r\n        addCustomState(this, \"--modal\");\r\n        if (this.isOpen) {\r\n          this.#scrollLockController.lock();\r\n          this.#inertController.lock();\r\n        }\r\n\r\n        break;\r\n    }\r\n\r\n    if (this.isOpen) {\r\n      this.#updatePosition();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #updatePosition(): Promise<void> {\r\n    if (this.currentVariant === \"docked\" && this.#trigger) {\r\n      this.#anchorCleanup?.();\r\n      this.#anchorCleanup = await positionAnchor(\r\n        this,\r\n        this.#anchor ?? this.#trigger,\r\n        {\r\n          position: \"bottom-start\",\r\n          inline: true,\r\n          flip: true,\r\n          shift: \"both\",\r\n        },\r\n        (x, y, position) => {\r\n          setCustomState(this, \"--top\", position.includes(\"top\"));\r\n          setCustomState(this, \"--bottom\", position.includes(\"bottom\"));\r\n\r\n          if (M3eDirectionality.current === \"rtl\") {\r\n            this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n            this.style.left = \"\";\r\n          } else {\r\n            this.style.left = `${x}px`;\r\n            this.style.right = \"\";\r\n          }\r\n\r\n          this.style.top = `${y}px`;\r\n        },\r\n      );\r\n    } else {\r\n      this.#clearAnchoring();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #clearAnchoring(): void {\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n    this.style.left = \"\";\r\n    this.style.right = \"\";\r\n    this.style.top = \"\";\r\n  }\r\n\r\n  /** @private */\r\n  #clearSelectionState(): void {\r\n    this._date = this._rangeStart = this._rangeEnd = undefined;\r\n  }\r\n}\r\n\r\ninterface M3eDatepickerElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eDatepickerElement {\r\n  addEventListener<K extends keyof M3eDatepickerElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDatepickerElement, ev: M3eDatepickerElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eDatepickerElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDatepickerElement, ev: M3eDatepickerElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-datepicker\": M3eDatepickerElement;\r\n  }\r\n}\r\n","import { customElement, ActionElementBase, HtmlFor } from \"@m3e/web/core\";\r\nimport type { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\nimport { M3eDatepickerElement } from \"./DatepickerElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle a datepicker.\r\n * @tag m3e-datepicker-toggle\r\n */\r\n@customElement(\"m3e-datepicker-toggle\")\r\nexport class M3eDatepickerToggleElement extends HtmlFor(ActionElementBase) {\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = \"dialog\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.control instanceof M3eDatepickerElement && this.parentElement) {\r\n      this.control.toggle(this.parentElement, this.closest<M3eFormFieldElement>(\"m3e-form-field\") ?? undefined);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-datepicker-toggle\": M3eDatepickerToggleElement;\r\n  }\r\n}\r\n"],"names":["M3eDatepickerElement","SuppressInitialAnimation","ReconnectedCallback","AttachInternals","Role","LitElement","constructor","_M3eDatepickerElement_closeTimeout","set","this","_open","_M3eDatepickerElement_breakpointUnobserve","_M3eDatepickerElement_trigger","_M3eDatepickerElement_anchor","_M3eDatepickerElement_anchorCleanup","_M3eDatepickerElement_scrollLockController","ScrollLockController","_M3eDatepickerElement_inertController","InertController","_M3eDatepickerElement_documentClickHandler","e","__classPrivateFieldGet","call","_M3eDatepickerElement_documentKeyDownHandler","_M3eDatepickerElement_toggleHandler","newState","_M3eDatepickerElement_instances","_M3eDatepickerElement_clearSelectionState","__classPrivateFieldSet","undefined","clearTimeout","prefersReducedMotion","setTimeout","variant","startView","date","startAt","minDate","maxDate","range","rangeStart","rangeEnd","blackoutDates","specialDates","previousMonthLabel","previousYearLabel","previousMultiYearLabel","nextMonthLabel","nextYearLabel","nextMultiYearLabel","clearable","clearLabel","confirmLabel","dismissLabel","label","isOpen","currentVariant","_variant","connectedCallback","super","setAttribute","addEventListener","disconnectedCallback","_M3eDatepickerElement_clearAnchoring","deleteCustomState","removeEventListener","document","reconnectedCallback","_M3eDatepickerElement_initBreakpointMonitoring","show","trigger","anchor","hide","lock","isUpdatePending","updateComplete","calendar","_calendar","resetActiveView","ariaExpanded","_M3eDatepickerElement_updatePosition","showPopover","focusActiveCell","restoreFocus","unlock","hidePopover","focus","toggle","render","html","_M3eDatepickerElement_renderHeader","_M3eDatepickerElement_renderCalendar","_M3eDatepickerElement_renderActions","willUpdate","changedProperties","some","x","has","Date","_M3eDatepickerElement_updateVariant","nothing","_rangeStart","_rangeEnd","selectedDate","_date","Intl","DateTimeFormat","navigator","language","month","day","format","weekday","_M3eDatepickerElement_handleClearClick","_M3eDatepickerElement_handleDismissClick","_M3eDatepickerElement_handleConfirmClick","composedPath","target","dispatchEvent","Event","bubbles","key","shiftKey","ctrlKey","preventDefault","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","get","ariaModal","addCustomState","async","positionAnchor","position","inline","flip","shift","y","setCustomState","includes","M3eDirectionality","current","style","right","window","innerWidth","clientWidth","left","top","styles","css","DesignToken","color","surfaceContainer","elevation","level3","level0","shape","corner","none","onSurfaceVariant","typescale","standard","headline","large","fontSize","fontWeight","lineHeight","tracking","outlineVariant","surfaceContainerHigh","extraLarge","unsafeCSS","motion","duration","short2","easing","scrim","short3","long2","__decorate","state","prototype","query","property","attribute","converter","dateConverter","type","Boolean","customElement","M3eDatepickerToggleElement","HtmlFor","ActionElementBase","parentElement","ariaHasPopup","_onClick","control","closest"],"mappings":"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"}

package/dist/fab-menu.js

@@ -3,107 +3,15 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import { __classPrivateFieldGet, __decorate, __classPrivateFieldSet } from 'tslib';
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
 import { LitElement, html, unsafeCSS, css } from 'lit';
-import { query, property } from 'lit/decorators.js';
-import { KeyboardClick, LinkButton, Disabled, AttachInternals, Role, renderPseudoLink, DesignToken, customElement, SuppressInitialAnimation, ScrollController, setCustomState, HtmlFor, ActionElementBase } from '@m3e/web/core';
+import { property, query } from 'lit/decorators.js';
+import { SuppressInitialAnimation, AttachInternals, Role, ScrollController, ClickOutsideController, setCustomState, DesignToken, customElement, KeyboardClick, LinkButton, Disabled, renderPseudoLink, HtmlFor, ActionElementBase } from '@m3e/web/core';
 import { RovingTabIndexManager, addAriaReferencedId, removeAriaReferencedId } from '@m3e/web/core/a11y';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
 import { positionAnchor } from '@m3e/web/core/anchoring';
 
-var _M3eFabMenuItemElement_instances, _M3eFabMenuItemElement_clickHandler, _M3eFabMenuItemElement_handleClick;
-/**
- * An item of a floating action button (FAB) menu.
- *
- * @example
- * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.
- * ```html
- * <m3e-fab variant="primary" size="large">
- *  <m3e-fab-menu-trigger for="fabmenu">
- *    <m3e-icon name="edit"></m3e-icon>
- *  </m3e-fab-menu-trigger>
- * </m3e-fab>
- * <m3e-fab-menu id="fabmenu" variant="secondary">
- *  <m3e-fab-menu-item>First</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>
- * </m3e-fab-menu>
- * ```
- *
- * @tag m3e-menu-item
- *
- * @slot - Renders the label of the item.
- * @slot icon - Renders an icon before the items's label.
- *
- * @attr disabled - Whether the element is disabled.
- * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
- * @attr href - The URL to which the link button points.
- * @attr rel - The relationship between the `target` of the link button and the document.
- * @attr target - The target of the link button.
- *
- * @fires click - Dispatched when the element is clicked.
- *
- * @cssprop --m3e-fab-menu-item-height - Height of the menu item.
- * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.
- * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.
- * @cssprop --m3e-fab-menu-item-line-height - Line height of the menu item label.
- * @cssprop --m3e-fab-menu-item-tracking - Letter spacing of the menu item label.
- * @cssprop --m3e-fab-menu-item-shape - Border radius of the menu item.
- * @cssprop --m3e-fab-menu-item-leading-space - Padding at the start of the menu item.
- * @cssprop --m3e-fab-menu-item-trailing-space - Padding at the end of the menu item.
- * @cssprop --m3e-fab-menu-item-spacing - Gap between icon and label.
- * @cssprop --m3e-fab-menu-item-icon-size - Size of the icon in the menu item.
- */
-let M3eFabMenuItemElement = class M3eFabMenuItemElement extends KeyboardClick(LinkButton(Disabled(AttachInternals(Role(LitElement, "menuitem"), true)))) {
-  constructor() {
-    super(...arguments);
-    _M3eFabMenuItemElement_instances.add(this);
-    /** @private */
-    _M3eFabMenuItemElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eFabMenuItemElement_instances, "m", _M3eFabMenuItemElement_handleClick).call(this, e));
-  }
-  /** The floating action button (FAB) menu to which this item belongs. */
-  get menu() {
-    return this.closest("m3e-fab-menu");
-  }
-  /** @inheritdoc */
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuItemElement_clickHandler, "f"));
-  }
-  /** @inheritdoc */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuItemElement_clickHandler, "f"));
-  }
-  /** @inheritdoc */
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
-  }
-  /** @inheritdoc */
-  render() {
-    return html`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[renderPseudoLink]()}<div class="wrapper"><slot class="icon" name="icon" aria-hidden="true"></slot><div class="label"><slot></slot></div></div></div>`;
-  }
-};
-_M3eFabMenuItemElement_clickHandler = new WeakMap();
-_M3eFabMenuItemElement_instances = new WeakSet();
-_M3eFabMenuItemElement_handleClick = function _M3eFabMenuItemElement_handleClick(e) {
-  if (!e.defaultPrevented) {
-    this.menu?.hide(true);
-  }
-};
-/** The styles of the element. */
-M3eFabMenuItemElement.styles = css`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; height: var(--m3e-fab-menu-item-height, 3.5rem); font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken.shape.corner.full}); } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: var(--_fab-menu-item-color); } :host(:not(:disabled)) .base { background-color: var(--_fab-menu-item-container-color); --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color); --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color); --m3e-ripple-color: var(--_fab-menu-ripple-color); } :host(:disabled) .base { background-color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-fab-menu-item-disabled-container-opacity, 10%), transparent ); } :host(:disabled) .label, :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-fab-menu-item-disabled-opacity, 38%), transparent ); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem); padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem); column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem); } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem); transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (prefers-reduced-motion) { .base, .label, .icon { transition: none; } } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:not(:disabled)) .base { background-color: Menu; } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: MenuText; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } }`;
-__decorate([query(".elevation")], M3eFabMenuItemElement.prototype, "_elevation", void 0);
-__decorate([query(".focus-ring")], M3eFabMenuItemElement.prototype, "_focusRing", void 0);
-__decorate([query(".state-layer")], M3eFabMenuItemElement.prototype, "_stateLayer", void 0);
-__decorate([query(".ripple")], M3eFabMenuItemElement.prototype, "_ripple", void 0);
-M3eFabMenuItemElement = __decorate([customElement("m3e-fab-menu-item")], M3eFabMenuItemElement);
-
-var _M3eFabMenuElement_instances, _M3eFabMenuElement_fabTabIndex, _M3eFabMenuElement_trigger, _M3eFabMenuElement_anchoringCleanup, _M3eFabMenuElement_listManager, _M3eFabMenuElement_keyDownHandler, _M3eFabMenuElement_documentClickHandler, _M3eFabMenuElement_scrollController, _M3eFabMenuElement_toggleHandler, _M3eFabMenuElement_handleSlotChange, _M3eFabMenuElement_handleKeyDown, _M3eFabMenuElement_handleDocumentClick, _M3eFabMenuElement_attachFab, _M3eFabMenuElement_detachFab;
+var _M3eFabMenuElement_instances, _M3eFabMenuElement_fabTabIndex, _M3eFabMenuElement_trigger, _M3eFabMenuElement_anchoringCleanup, _M3eFabMenuElement_listManager, _M3eFabMenuElement_keyDownHandler, _M3eFabMenuElement_scrollController, _M3eFabMenuElement_clickOutsideController, _M3eFabMenuElement_toggleHandler, _M3eFabMenuElement_handleSlotChange, _M3eFabMenuElement_handleKeyDown, _M3eFabMenuElement_attachFab, _M3eFabMenuElement_detachFab;
 /**
  * A menu, opened from a floating action button (FAB), used to display multiple related actions.
  *
@@ -172,21 +80,30 @@ let M3eFabMenuElement = class M3eFabMenuElement extends SuppressInitialAnimation
     /** @private */
     _M3eFabMenuElement_keyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eFabMenuElement_instances, "m", _M3eFabMenuElement_handleKeyDown).call(this, e));
     /** @private */
-    _M3eFabMenuElement_documentClickHandler.set(this, e => __classPrivateFieldGet(this, _M3eFabMenuElement_instances, "m", _M3eFabMenuElement_handleDocumentClick).call(this, e));
-    /** @private */
     _M3eFabMenuElement_scrollController.set(this, new ScrollController(this, {
       target: null,
       callback: () => this.hide()
     }));
     /** @private */
+    _M3eFabMenuElement_clickOutsideController.set(this, new ClickOutsideController(this, {
+      target: null,
+      callback: () => this.hide()
+    }));
+    /** @private */
     _M3eFabMenuElement_toggleHandler.set(this, e => {
-      if (e.newState === "closed") {
-        __classPrivateFieldGet(this, _M3eFabMenuElement_anchoringCleanup, "f")?.call(this);
-        __classPrivateFieldSet(this, _M3eFabMenuElement_anchoringCleanup, undefined, "f");
-      } else {
-        setTimeout(() => {
-          __classPrivateFieldGet(this, _M3eFabMenuElement_listManager, "f").setActiveItem(__classPrivateFieldGet(this, _M3eFabMenuElement_listManager, "f").items.find(x => !x.disabled));
-        }, 40);
+      switch (e.newState) {
+        case "open":
+          __classPrivateFieldGet(this, _M3eFabMenuElement_clickOutsideController, "f").observe(this);
+          if (__classPrivateFieldGet(this, _M3eFabMenuElement_trigger, "f")) {
+            __classPrivateFieldGet(this, _M3eFabMenuElement_clickOutsideController, "f").observe(__classPrivateFieldGet(this, _M3eFabMenuElement_trigger, "f"));
+          }
+          setTimeout(() => __classPrivateFieldGet(this, _M3eFabMenuElement_listManager, "f").setActiveItem(__classPrivateFieldGet(this, _M3eFabMenuElement_listManager, "f").items.find(x => !x.disabled)), 40);
+          break;
+        case "closed":
+          __classPrivateFieldGet(this, _M3eFabMenuElement_clickOutsideController, "f").unobserveAll();
+          __classPrivateFieldGet(this, _M3eFabMenuElement_anchoringCleanup, "f")?.call(this);
+          __classPrivateFieldSet(this, _M3eFabMenuElement_anchoringCleanup, undefined, "f");
+          break;
       }
     });
     /**
@@ -270,14 +187,12 @@ let M3eFabMenuElement = class M3eFabMenuElement extends SuppressInitialAnimation
     this.setAttribute("popover", "manual");
     this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eFabMenuElement_keyDownHandler, "f"));
     this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eFabMenuElement_toggleHandler, "f"));
-    document.addEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuElement_documentClickHandler, "f"));
   }
   /** @inheritdoc */
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eFabMenuElement_keyDownHandler, "f"));
     this.removeEventListener("toggle", __classPrivateFieldGet(this, _M3eFabMenuElement_toggleHandler, "f"));
-    document.removeEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuElement_documentClickHandler, "f"));
   }
   /** @inheritdoc */
   render() {
@@ -289,8 +204,8 @@ _M3eFabMenuElement_trigger = new WeakMap();
 _M3eFabMenuElement_anchoringCleanup = new WeakMap();
 _M3eFabMenuElement_listManager = new WeakMap();
 _M3eFabMenuElement_keyDownHandler = new WeakMap();
-_M3eFabMenuElement_documentClickHandler = new WeakMap();
 _M3eFabMenuElement_scrollController = new WeakMap();
+_M3eFabMenuElement_clickOutsideController = new WeakMap();
 _M3eFabMenuElement_toggleHandler = new WeakMap();
 _M3eFabMenuElement_instances = new WeakSet();
 _M3eFabMenuElement_handleSlotChange = function _M3eFabMenuElement_handleSlotChange() {
@@ -316,11 +231,6 @@ _M3eFabMenuElement_handleKeyDown = function _M3eFabMenuElement_handleKeyDown(e)
       break;
   }
 };
-_M3eFabMenuElement_handleDocumentClick = function _M3eFabMenuElement_handleDocumentClick(e) {
-  if (!e.composedPath().some(x => x instanceof M3eFabMenuItemElement || x === __classPrivateFieldGet(this, _M3eFabMenuElement_trigger, "f"))) {
-    this.hide();
-  }
-};
 _M3eFabMenuElement_attachFab = function _M3eFabMenuElement_attachFab() {
   const fab = __classPrivateFieldGet(this, _M3eFabMenuElement_trigger, "f")?.closest("m3e-fab");
   if (fab) {
@@ -349,6 +259,98 @@ __decorate([property({
 })], M3eFabMenuElement.prototype, "variant", void 0);
 M3eFabMenuElement = __decorate([customElement("m3e-fab-menu")], M3eFabMenuElement);
 
+var _M3eFabMenuItemElement_instances, _M3eFabMenuItemElement_clickHandler, _M3eFabMenuItemElement_handleClick;
+/**
+ * An item of a floating action button (FAB) menu.
+ *
+ * @example
+ * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.
+ * ```html
+ * <m3e-fab variant="primary" size="large">
+ *  <m3e-fab-menu-trigger for="fabmenu">
+ *    <m3e-icon name="edit"></m3e-icon>
+ *  </m3e-fab-menu-trigger>
+ * </m3e-fab>
+ * <m3e-fab-menu id="fabmenu" variant="secondary">
+ *  <m3e-fab-menu-item>First</m3e-fab-menu-item>
+ *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>
+ *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>
+ *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>
+ *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>
+ *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>
+ * </m3e-fab-menu>
+ * ```
+ *
+ * @tag m3e-menu-item
+ *
+ * @slot - Renders the label of the item.
+ * @slot icon - Renders an icon before the items's label.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
+ * @attr href - The URL to which the link button points.
+ * @attr rel - The relationship between the `target` of the link button and the document.
+ * @attr target - The target of the link button.
+ *
+ * @fires click - Dispatched when the element is clicked.
+ *
+ * @cssprop --m3e-fab-menu-item-height - Height of the menu item.
+ * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.
+ * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.
+ * @cssprop --m3e-fab-menu-item-line-height - Line height of the menu item label.
+ * @cssprop --m3e-fab-menu-item-tracking - Letter spacing of the menu item label.
+ * @cssprop --m3e-fab-menu-item-shape - Border radius of the menu item.
+ * @cssprop --m3e-fab-menu-item-leading-space - Padding at the start of the menu item.
+ * @cssprop --m3e-fab-menu-item-trailing-space - Padding at the end of the menu item.
+ * @cssprop --m3e-fab-menu-item-spacing - Gap between icon and label.
+ * @cssprop --m3e-fab-menu-item-icon-size - Size of the icon in the menu item.
+ */
+let M3eFabMenuItemElement = class M3eFabMenuItemElement extends KeyboardClick(LinkButton(Disabled(AttachInternals(Role(LitElement, "menuitem"), true)))) {
+  constructor() {
+    super(...arguments);
+    _M3eFabMenuItemElement_instances.add(this);
+    /** @private */
+    _M3eFabMenuItemElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eFabMenuItemElement_instances, "m", _M3eFabMenuItemElement_handleClick).call(this, e));
+  }
+  /** The floating action button (FAB) menu to which this item belongs. */
+  get menu() {
+    return this.closest("m3e-fab-menu");
+  }
+  /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuItemElement_clickHandler, "f"));
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuItemElement_clickHandler, "f"));
+  }
+  /** @inheritdoc */
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[renderPseudoLink]()}<div class="wrapper"><slot class="icon" name="icon" aria-hidden="true"></slot><div class="label"><slot></slot></div></div></div>`;
+  }
+};
+_M3eFabMenuItemElement_clickHandler = new WeakMap();
+_M3eFabMenuItemElement_instances = new WeakSet();
+_M3eFabMenuItemElement_handleClick = function _M3eFabMenuItemElement_handleClick(e) {
+  if (!e.defaultPrevented) {
+    this.menu?.hide(true);
+  }
+};
+/** The styles of the element. */
+M3eFabMenuItemElement.styles = css`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; height: var(--m3e-fab-menu-item-height, 3.5rem); font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken.shape.corner.full}); } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: var(--_fab-menu-item-color); } :host(:not(:disabled)) .base { background-color: var(--_fab-menu-item-container-color); --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color); --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color); --m3e-ripple-color: var(--_fab-menu-ripple-color); } :host(:disabled) .base { background-color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-fab-menu-item-disabled-container-opacity, 10%), transparent ); } :host(:disabled) .label, :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-fab-menu-item-disabled-opacity, 38%), transparent ); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem); padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem); column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem); } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem); transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (prefers-reduced-motion) { .base, .label, .icon { transition: none; } } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:not(:disabled)) .base { background-color: Menu; } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: MenuText; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } }`;
+__decorate([query(".elevation")], M3eFabMenuItemElement.prototype, "_elevation", void 0);
+__decorate([query(".focus-ring")], M3eFabMenuItemElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eFabMenuItemElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eFabMenuItemElement.prototype, "_ripple", void 0);
+M3eFabMenuItemElement = __decorate([customElement("m3e-fab-menu-item")], M3eFabMenuItemElement);
+
 /**
  * An element, nested within a clickable element, used to open a floating action button (FAB) menu.
  *