@m3e/web 2.1.3 → 2.2.0

package/dist/datepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.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} 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-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-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-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(AttachInternals(Role(LitElement, \"dialog\"))) {\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      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      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(:state(-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(:state(-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(:state(-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(:state(-docked))::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:state(-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(:state(-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(:state(-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(:state(-bottom)) {\r\n      transform-origin: top;\r\n    }\r\n    :host(:state(-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(:state(-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(:state(-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   * 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    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  /**\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    this._calendar.date = this.date;\r\n    this._calendar.rangeStart = this.rangeStart;\r\n    this._calendar.rangeEnd = this.rangeEnd;\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 selectedDate = this._date ?? this.date;\r\n\r\n    return html`<div class=\"supporting-text\">${this.label}</div>\r\n      <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\r\n    if (changedProperties.has(\"variant\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.variant === \"auto\") {\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      } 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\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  #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 = 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.#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\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","AttachInternals","Role","LitElement","constructor","_M3eDatepickerElement_breakpointUnobserve","set","_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","rangeStart","rangeEnd","blackoutDates","specialDates","previousMonthLabel","previousYearLabel","previousMultiYearLabel","nextMonthLabel","nextYearLabel","nextMultiYearLabel","clearable","clearLabel","confirmLabel","dismissLabel","label","isOpen","currentVariant","_variant","connectedCallback","setAttribute","addEventListener","document","disconnectedCallback","deleteCustomState","removeEventListener","show","trigger","anchor","hide","lock","_calendar","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","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","get","_M3eDatepickerElement_updateVariant","updated","_changedProperties","selectedDate","_date","Intl","DateTimeFormat","navigator","language","weekday","month","day","format","composedPath","_rangeStart","_rangeEnd","dispatchEvent","Event","bubbles","key","shiftKey","ctrlKey","preventDefault","ariaModal","addCustomState","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","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/datepicker.min.js

@@ -0,0 +1,7 @@
+/**
+ * @license MIT
+ * Copyright (c) 2025 matraic
+ * See LICENSE file in the project root for full license text.
+ */
+import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as a}from"tslib";import{LitElement as i,nothing as o,html as r,unsafeCSS as n,css as s}from"lit";import{state as l,query as d,property as c}from"lit/decorators.js";import{ifDefined as h}from"lit/directives/if-defined.js";import{SuppressInitialAnimation as p,AttachInternals as m,Role as u,ScrollLockController as v,InertController as g,deleteCustomState as b,addCustomState as f,setCustomState as k,DesignToken as y,dateConverter as $,customElement as w,HtmlFor as x,ActionElementBase as E}from"@m3e/web/core";import{positionAnchor as _}from"@m3e/web/core/anchoring";import{M3eDirectionality as S}from"@m3e/web/core/bidi";import{M3eBreakpointObserver as L,Breakpoint as M}from"@m3e/web/core/layout";import"@m3e/web/core/a11y";import"@m3e/web/button";import"@m3e/web/calendar";var D,C,W,V,Y,O,P,z,A,H,I,K,N,T,j,U,X,B,F,q,G;let J=G=class extends(p(m(u(i,"dialog")))){constructor(){super(...arguments),D.add(this),C.set(this,void 0),W.set(this,void 0),V.set(this,void 0),Y.set(this,void 0),O.set(this,new v(this)),P.set(this,new g(this)),z.set(this,e=>t(this,D,"m",K).call(this,e)),A.set(this,e=>t(this,D,"m",X).call(this,e)),H.set(this,a=>{"closed"===a.newState&&(t(this,D,"m",q).call(this),t(this,Y,"f")?.call(this),e(this,Y,void 0,"f"))}),this.variant="docked",this.startView="month",this.date=null,this.startAt=null,this.minDate=null,this.maxDate=null,this.rangeStart=null,this.rangeEnd=null,this.blackoutDates=null,this.specialDates=null,this.previousMonthLabel="Previous month",this.previousYearLabel="Previous year",this.previousMultiYearLabel="Previous 24 years",this.nextMonthLabel="Next month",this.nextYearLabel="Next year",this.nextMultiYearLabel="Next 24 years",this.clearable=!1,this.clearLabel="Clear",this.confirmLabel="OK",this.dismissLabel="Cancel",this.label="Select date"}get isOpen(){return void 0!==t(this,W,"f")}get currentVariant(){return this._variant??("modal"!==this.variant?"docked":"modal")}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.addEventListener("toggle",t(this,H,"f")),document.addEventListener("click",t(this,z,"f")),document.addEventListener("keydown",t(this,A,"f"))}disconnectedCallback(){super.disconnectedCallback(),this._variant=void 0,t(this,C,"f")?.call(this),b(this,"-docked"),b(this,"-modal"),this.removeEventListener("toggle",t(this,H,"f")),document.removeEventListener("click",t(this,z,"f")),document.removeEventListener("keydown",t(this,A,"f"))}async show(a,i){t(this,W,"f")&&t(this,W,"f")!==a&&this.hide(),"modal"===this.currentVariant&&(t(this,O,"f").lock(),t(this,P,"f").lock()),this._calendar.date=this.date,this._calendar.rangeStart=this.rangeStart,this._calendar.rangeEnd=this.rangeEnd,e(this,W,a,"f"),t(this,W,"f").ariaExpanded="true",e(this,V,i,"f"),await t(this,D,"m",F).call(this),this.showPopover(),await this._calendar.focusActiveCell()}hide(a=!1){"modal"===this.currentVariant&&(t(this,O,"f").unlock(),t(this,P,"f").unlock()),this.hidePopover(),t(this,W,"f")&&(t(this,W,"f").ariaExpanded="false",a&&t(this,W,"f").focus(),e(this,W,void 0,"f"))}async toggle(e,a){t(this,W,"f")?this.hide():await this.show(e,a)}render(){return r`<m3e-focus-trap>${t(this,D,"m",I).call(this)}<m3e-calendar class="calendar" start-view="${this.startView}" start-at="${h(this.startAt?.toISOString())}" min-date="${h(this.minDate?.toISOString())}" max-date="${h(this.maxDate?.toISOString())}" @change="${t(this,D,"m",N)}"></m3e-calendar><div class="actions">${this.clearable?r`<m3e-button @click="${t(this,D,"m",T)}">${this.clearLabel}</m3e-button>`:o}<div class="spacer" aria-hidden="true"></div><m3e-button @click="${t(this,D,"m",j)}">${this.dismissLabel}</m3e-button><m3e-button @click="${t(this,D,"m",U)}">${this.confirmLabel}</m3e-button></div></m3e-focus-trap>`}willUpdate(a){super.willUpdate(a),["date","rangeStart","rangeEnd"].some(t=>a.has(t))&&t(this,D,"m",q).call(this),a.has("variant")&&(t(this,C,"f")?.call(this),"auto"===this.variant?e(this,C,L.observe([M.XSmall,M.Small],e=>{this._variant=e.get(M.XSmall)||e.get(M.Small)?"modal":"docked",t(this,D,"m",B).call(this)}),"f"):(this._variant=void 0,t(this,D,"m",B).call(this)))}updated(t){super.updated(t),(t.has("specialDates")||t.has("blackoutDates"))&&(this._calendar.specialDates=this.specialDates,this._calendar.blackoutDates=this.blackoutDates)}};C=new WeakMap,W=new WeakMap,V=new WeakMap,Y=new WeakMap,O=new WeakMap,P=new WeakMap,z=new WeakMap,A=new WeakMap,H=new WeakMap,D=new WeakSet,I=function(){if("docked"===this.currentVariant)return o;const t=this._date??this.date;return r`<div class="supporting-text">${this.label}</div><div class="headline">${t?new Intl.DateTimeFormat(navigator.language,{weekday:"short",month:"short",day:"numeric"}).format(t):"––"}</div><div class="divider"></div>`},K=function(e){e.composedPath().some(e=>e instanceof G||e===t(this,W,"f")||e===t(this,V,"f"))||this.hide()},N=function(){this._date=this._calendar.date,this._rangeStart=this._calendar.rangeStart,this._rangeEnd=this._calendar.rangeEnd},T=function(){this.date=null,this.rangeStart=null,this.rangeEnd=null,this.hide(!0),this.dispatchEvent(new Event("change",{bubbles:!0}))},j=function(){this.hide(!0)},U=function(){this.date=this._date??this.date,this.rangeStart=void 0===this._rangeStart?this.rangeStart:this._rangeStart,this.rangeEnd=void 0===this._rangeEnd?this.rangeEnd:this._rangeEnd,this.hide(!0),this.dispatchEvent(new Event("change",{bubbles:!0}))},X=function(t){!this.isOpen||"modal"!==this.currentVariant||"Escape"!==t.key||t.shiftKey||t.ctrlKey||(t.preventDefault(),this.hide(!0))},B=function(){switch(this.currentVariant){case"docked":this.ariaModal=null,b(this,"-modal"),f(this,"-docked"),t(this,O,"f").unlock(),t(this,P,"f").unlock();break;case"modal":this.ariaModal="true",b(this,"-docked"),f(this,"-modal"),this.isOpen&&(t(this,O,"f").lock(),t(this,P,"f").lock())}this.isOpen&&t(this,D,"m",F).call(this)},F=async function(){"docked"===this.currentVariant&&t(this,W,"f")?e(this,Y,await _(this,t(this,V,"f")??t(this,W,"f"),{position:"bottom-start",inline:!0,flip:!0,shift:"both"},(t,e,a)=>{k(this,"-top",a.includes("top")),k(this,"-bottom",a.includes("bottom")),"rtl"===S.current?(this.style.right=window.innerWidth-t-this.clientWidth+"px",this.style.left=""):(this.style.left=`${t}px`,this.style.right=""),this.style.top=`${e}px`}),"f"):(t(this,Y,"f")?.call(this),e(this,Y,void 0,"f"),this.style.left="",this.style.right="",this.style.top="")},q=function(){this._date=this._rangeStart=this._rangeEnd=void 0},J.styles=s`:host { flex-direction: column; margin: unset; border: unset; padding-block: var(--m3e-datepicker-container-padding-block, 0.75rem); padding-inline: var(--m3e-datepicker-container-padding-inline, 0.25rem); background-color: var(--m3e-datepicker-container-color, ${y.color.surfaceContainer}); box-shadow: var(--m3e-datepicker-container-elevation, ${y.elevation.level3}); opacity: 0; display: none; } .calendar { --m3e-calendar-container-color: transparent; --m3e-calendar-container-elevation: ${y.elevation.level0}; --m3e-calendar-container-shape: ${y.shape.corner.none}; } .headline { font-size: var( --m3e-datepicker-modal-headline-font-size, ${y.typescale.standard.headline.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-headline-font-weight, ${y.typescale.standard.headline.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-headline-line-height, ${y.typescale.standard.headline.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-headline-tracking, ${y.typescale.standard.headline.large.tracking} ); margin-block-start: 2.25rem; margin-block-end: 0.75rem; margin-inline: 1.5rem; } .supporting-text { font-size: var( --m3e-datepicker-modal-supporting-text-font-size, ${y.typescale.standard.label.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-supporting-text-font-weight, ${y.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-supporting-text-line-height, ${y.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-supporting-text-tracking, ${y.typescale.standard.label.large.tracking} ); margin-block-start: 1rem; margin-inline: 1.5rem; } .divider { height: var(--m3e-divider-thickness, 1px); width: 100%; position: relative; } .divider::before { content: ""; box-sizing: border-box; position: absolute; border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${y.color.outlineVariant}); height: inherit; left: -0.25rem; right: -0.25rem; } .actions { display: flex; align-items: center; column-gap: 0.5rem; padding-inline: var(--m3e-datepicker-actions-padding-inline, 0.5rem); } .spacer { flex: 1 1 auto; } :host(:state(-docked)) { position: absolute; background-color: var(--m3e-datepicker-docked-container-color, ${y.color.surfaceContainer}); border-radius: var(--m3e-datepicker-docked-container-shape, ${y.shape.corner.large}); } :host(:state(-modal)) { position: fixed; inset: 0; margin: auto; transform-origin: top; background-color: var(--m3e-datepicker-modal-container-color, ${y.color.surfaceContainerHigh}); border-radius: var(--m3e-datepicker-modal-container-shape, ${y.shape.corner.extraLarge}); } :host(:not(:state(-no-animate))) { transition: ${n(`opacity ${y.motion.duration.short2} ${y.motion.easing.standard}, \n        transform ${y.motion.duration.short2} ${y.motion.easing.standard},\n        overlay ${y.motion.duration.short2} ${y.motion.easing.standard} allow-discrete,\n        display ${y.motion.duration.short2} ${y.motion.easing.standard} allow-discrete`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display: inline-flex; opacity: 1; } :host(:state(-docked))::backdrop { background-color: transparent; } :host(:state(-modal))::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${y.color.scrim}) 0%, transparent); margin-inline-end: -20px; } :host(:state(-modal):not(:popover-open))::backdrop { transition: ${n(`background-color ${y.motion.duration.short3} ${y.motion.easing.standard}, \n        overlay ${y.motion.duration.short3} ${y.motion.easing.standard} allow-discrete,\n        visibility ${y.motion.duration.short3} ${y.motion.easing.standard} allow-discrete`)}; } :host(:state(-modal):popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-dialog-scrim-color, ${y.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%), transparent ); transition: ${n(`background-color ${y.motion.duration.long2} ${y.motion.easing.standard}, \n        overlay ${y.motion.duration.long2} ${y.motion.easing.standard} allow-discrete,\n        visibility ${y.motion.duration.long2} ${y.motion.easing.standard} allow-discrete`)}; } :host(:state(-bottom)) { transform-origin: top; } :host(:state(-top)) { transform-origin: bottom; } @starting-style { :host(:popover-open) { transform: scaleY(0.8); } :host(:state(-modal):popover-open)::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${y.color.scrim}) 0%, transparent); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; border: 1px solid CanvasText; } }`,a([l()],J.prototype,"_date",void 0),a([l()],J.prototype,"_rangeStart",void 0),a([l()],J.prototype,"_rangeEnd",void 0),a([d("m3e-calendar")],J.prototype,"_calendar",void 0),a([l()],J.prototype,"_variant",void 0),a([c()],J.prototype,"variant",void 0),a([c({attribute:"start-view"})],J.prototype,"startView",void 0),a([c({converter:$})],J.prototype,"date",void 0),a([c({attribute:"start-at",converter:$})],J.prototype,"startAt",void 0),a([c({attribute:"min-date",converter:$})],J.prototype,"minDate",void 0),a([c({attribute:"max-date",converter:$})],J.prototype,"maxDate",void 0),a([c({attribute:"range-start",converter:$})],J.prototype,"rangeStart",void 0),a([c({attribute:"range-end",converter:$})],J.prototype,"rangeEnd",void 0),a([c({attribute:!1})],J.prototype,"blackoutDates",void 0),a([c({attribute:!1})],J.prototype,"specialDates",void 0),a([c({attribute:"previous-month-label"})],J.prototype,"previousMonthLabel",void 0),a([c({attribute:"previous-year-label"})],J.prototype,"previousYearLabel",void 0),a([c({attribute:"previous-multi-year-label"})],J.prototype,"previousMultiYearLabel",void 0),a([c({attribute:"next-month-label"})],J.prototype,"nextMonthLabel",void 0),a([c({attribute:"next-year-label"})],J.prototype,"nextYearLabel",void 0),a([c({attribute:"next-multi-year-label"})],J.prototype,"nextMultiYearLabel",void 0),a([c({type:Boolean})],J.prototype,"clearable",void 0),a([c({attribute:"clear-label"})],J.prototype,"clearLabel",void 0),a([c({attribute:"confirm-label"})],J.prototype,"confirmLabel",void 0),a([c({attribute:"dismiss-label"})],J.prototype,"dismissLabel",void 0),a([c()],J.prototype,"label",void 0),J=G=a([w("m3e-datepicker")],J);let Q=class extends(x(E)){connectedCallback(){super.connectedCallback(),this.parentElement&&(this.parentElement.ariaHasPopup="dialog")}disconnectedCallback(){super.disconnectedCallback(),this.parentElement&&(this.parentElement.ariaHasPopup=null)}_onClick(){this.control instanceof J&&this.parentElement&&this.control.toggle(this.parentElement,this.closest("m3e-form-field")??void 0)}};Q=a([w("m3e-datepicker-toggle")],Q);export{J as M3eDatepickerElement,Q as M3eDatepickerToggleElement};
+//# sourceMappingURL=datepicker.min.js.map

package/dist/datepicker.min.js.map

@@ -0,0 +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} 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-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-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-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(AttachInternals(Role(LitElement, \"dialog\"))) {\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      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      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(:state(-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(:state(-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(:state(-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(:state(-docked))::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:state(-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(:state(-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(:state(-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(:state(-bottom)) {\r\n      transform-origin: top;\r\n    }\r\n    :host(:state(-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(:state(-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(:state(-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   * 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    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  /**\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    this._calendar.date = this.date;\r\n    this._calendar.rangeStart = this.rangeStart;\r\n    this._calendar.rangeEnd = this.rangeEnd;\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 selectedDate = this._date ?? this.date;\r\n\r\n    return html`<div class=\"supporting-text\">${this.label}</div>\r\n      <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\r\n    if (changedProperties.has(\"variant\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.variant === \"auto\") {\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      } 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\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  #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 = 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.#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\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","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","rangeStart","rangeEnd","blackoutDates","specialDates","previousMonthLabel","previousYearLabel","previousMultiYearLabel","nextMonthLabel","nextYearLabel","nextMultiYearLabel","clearable","clearLabel","confirmLabel","dismissLabel","label","isOpen","currentVariant","_variant","connectedCallback","super","setAttribute","addEventListener","document","disconnectedCallback","deleteCustomState","removeEventListener","show","trigger","anchor","hide","lock","_calendar","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","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","get","_M3eDatepickerElement_updateVariant","updated","_changedProperties","selectedDate","_date","Intl","DateTimeFormat","navigator","language","weekday","month","day","format","composedPath","_rangeStart","_rangeEnd","dispatchEvent","Event","bubbles","key","shiftKey","ctrlKey","preventDefault","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","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

@@ -212,7 +212,7 @@ let M3eFabMenuElement = class M3eFabMenuElement extends SuppressInitialAnimation
     __classPrivateFieldSet(this, _M3eFabMenuElement_anchoringCleanup, await positionAnchor(this, trigger, {
       position: "top-end",
       inline: true,
-      shift: true,
+      shift: "main",
       flip: true,
       offset: 8
     }, (x, y, position) => {

package/dist/fab-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab-menu.js","sources":["../../src/fab-menu/FabMenuItemElement.ts","../../src/fab-menu/FabMenuElement.ts","../../src/fab-menu/FabMenuTriggerElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eElevationElement,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport type { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An item of a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-fab-menu-item-height - Height of the menu item.\r\n * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-line-height - Line height of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-tracking - Letter spacing of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-shape - Border radius of the menu item.\r\n * @cssprop --m3e-fab-menu-item-leading-space - Padding at the start of the menu item.\r\n * @cssprop --m3e-fab-menu-item-trailing-space - Padding at the end of the menu item.\r\n * @cssprop --m3e-fab-menu-item-spacing - Gap between icon and label.\r\n * @cssprop --m3e-fab-menu-item-icon-size - Size of the icon in the menu item.\r\n */\r\n@customElement(\"m3e-fab-menu-item\")\r\nexport class M3eFabMenuItemElement extends KeyboardClick(\r\n  LinkButton(Disabled(AttachInternals(Role(LitElement, \"menuitem\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n      height: var(--m3e-fab-menu-item-height, 3.5rem);\r\n      font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not(:disabled)) .label,\r\n    :host(:not(:disabled)) .icon {\r\n      color: var(--_fab-menu-item-color);\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      background-color: var(--_fab-menu-item-container-color);\r\n      --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color);\r\n      --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color);\r\n      --m3e-ripple-color: var(--_fab-menu-ripple-color);\r\n    }\r\n    :host(:disabled) .base {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-container-opacity, 10%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .label,\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem);\r\n      padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem);\r\n      column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      text-align: center;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem);\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      font-size: inherit !important;\r\n      flex: none;\r\n    }\r\n    ::slotted(svg[slot=\"icon\"]) {\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n      :host(:not(:disabled)) .base {\r\n        background-color: Menu;\r\n      }\r\n      :host(:not(:disabled)) .label,\r\n      :host(:not(:disabled)) .icon {\r\n        color: MenuText;\r\n      }\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** The floating action button (FAB) menu to which this item belongs. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.closest(\"m3e-fab-menu\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation class=\"elevation\" ?disabled=\"${this.disabled}\"></m3e-elevation>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      ${this[renderPseudoLink]()}\r\n      <div class=\"wrapper\">\r\n        <slot class=\"icon\" name=\"icon\" aria-hidden=\"true\"></slot>\r\n        <div class=\"label\"><slot></slot></div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented) {\r\n      this.menu?.hide(true);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-item\": M3eFabMenuItemElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  DisabledMixin,\r\n  Role,\r\n  ScrollController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { RovingTabIndexManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eFabElement } from \"@m3e/web/fab\";\r\n\r\nimport { FabMenuVariant } from \"./FabMenuVariant\";\r\nimport { M3eFabMenuItemElement } from \"./FabMenuItemElement\";\r\n\r\n/**\r\n * A menu, opened from a floating action button (FAB), used to display multiple related actions.\r\n *\r\n * @description\r\n * The `m3e-fab-menu` component presents a dynamic menu of related actions, elegantly revealed from a\r\n * floating action button (FAB). Designed using expressive, adaptive surfaces, it enables seamless access\r\n * to contextual actions in modern, visually rich interfaces.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu\r\n *\r\n * @slot - Renders the contents of the menu.\r\n *\r\n * @attr variant - The appearance variant of the menu.\r\n *\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-fab-menu-spacing - Vertical gap between menu items.\r\n * @cssprop --m3e-fab-menu-max-width - Maximum width of the menu.\r\n * @cssprop --m3e-primary-fab-color - Foreground color for primary variant items.\r\n * @cssprop --m3e-primary-fab-container-color - Container color for primary variant items.\r\n * @cssprop --m3e-primary-fab-hover-color - Hover background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-focus-color - Focus background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-ripple-color - Ripple color for primary variant items.\r\n * @cssprop --m3e-secondary-fab-color - Foreground color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-container-color - Container color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-hover-color - Hover background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-focus-color - Focus background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-ripple-color - Ripple color for secondary variant items.\r\n * @cssprop --m3e-tertiary-fab-color - Foreground color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-container-color - Container color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-hover-color - Hover background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-focus-color - Focus background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-ripple-color - Ripple color for tertiary variant items.\r\n */\r\n@customElement(\"m3e-fab-menu\")\r\nexport class M3eFabMenuElement extends SuppressInitialAnimation(AttachInternals(Role(LitElement, \"menu\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: absolute;\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-fab-menu-spacing, 0.25rem);\r\n      padding: unset;\r\n      margin: unset;\r\n      border: unset;\r\n      overflow: visible;\r\n      max-width: var(--m3e-fab-menu-max-width, 17.5rem);\r\n      opacity: 0;\r\n      background-color: transparent;\r\n      display: none;\r\n    }\r\n    :host(:not(:state(-no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.spring.fastEffects}, \r\n        transform ${DesignToken.motion.spring.fastSpatial},\r\n        overlay ${DesignToken.motion.spring.fastEffects} allow-discrete,\r\n        display ${DesignToken.motion.spring.fastEffects} allow-discrete`,\r\n      )};\r\n    }\r\n    .base {\r\n      display: contents;\r\n    }\r\n    :host([variant=\"primary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken.color.primaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    :host([variant=\"secondary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken.color.onSecondaryContainer});\r\n      --_fab-menu-item-container-color: var(\r\n        --m3e-secondary-fab-container-color,\r\n        ${DesignToken.color.secondaryContainer}\r\n      );\r\n      --_fab-menu-background-hover-color: var(\r\n        --m3e-secondary-fab-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-background-focus-color: var(\r\n        --m3e-secondary-fab-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([variant=\"tertiary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host {\r\n      transform: scaleX(0.8);\r\n    }\r\n    :host(:state(-left)) {\r\n      align-items: flex-start;\r\n      transform-origin: left;\r\n    }\r\n    :host(:state(-right)) {\r\n      align-items: flex-end;\r\n      transform-origin: right;\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleX(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n      }\r\n      :host(:popover-open) {\r\n        transform: scaleX(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:state(-no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        border-radius: ${DesignToken.shape.corner.medium};\r\n        outline: 1px solid MenuText;\r\n        background-color: Menu;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #fabTabIndex?: number;\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchoringCleanup?: () => void;\r\n\r\n  /** @private */\r\n  readonly #listManager = new RovingTabIndexManager<LitElement & DisabledMixin>()\r\n    .withWrap()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation();\r\n\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, { target: null, callback: () => this.hide() });\r\n\r\n  /** @private */\r\n  readonly #toggleHandler = (e: ToggleEvent) => {\r\n    if (e.newState === \"closed\") {\r\n      this.#anchoringCleanup?.();\r\n      this.#anchoringCleanup = undefined;\r\n    } else {\r\n      setTimeout(() => {\r\n        this.#listManager.setActiveItem(this.#listManager.items.find((x) => !x.disabled));\r\n      }, 40);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The appearance variant of the menu.\r\n   * @default \"primary\"\r\n   */\r\n  @property({ reflect: true }) variant: FabMenuVariant = \"primary\";\r\n\r\n  /** Whether the menu is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /**\r\n   * Opens the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.\r\n   */\r\n  async show(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = await positionAnchor(\r\n      this,\r\n      trigger,\r\n      {\r\n        position: \"top-end\",\r\n        inline: true,\r\n        shift: true,\r\n        flip: true,\r\n        offset: 8,\r\n      },\r\n      (x, y, position) => {\r\n        setCustomState(this, \"-right\", position.includes(\"end\"));\r\n        setCustomState(this, \"-left\", position.includes(\"start\"));\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        this.style.top = `${y}px`;\r\n      },\r\n    );\r\n\r\n    this.showPopover();\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#scrollController.observe(this.#trigger);\r\n\r\n    this.#attachFab();\r\n  }\r\n\r\n  /**\r\n   * Hides the menu.\r\n   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = undefined;\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\r\n      this.#detachFab();\r\n\r\n      this.#scrollController.unobserve(this.#trigger);\r\n      this.#trigger = undefined;\r\n    }\r\n    this.hidePopover();\r\n  }\r\n\r\n  /**\r\n   * Toggles the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.tabIndex = -1;\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot @slotchange=\"${this.#handleSlotChange}\"></slot></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added } = this.#listManager.setItems([...this.querySelectorAll(\"m3e-fab-menu-item\")]);\r\n    if (!this.#listManager.activeItem) {\r\n      this.#listManager.updateActiveItem(added.find((x) => !x.disabled));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"Tab\":\r\n        this.hide();\r\n        break;\r\n\r\n      case \"Escape\":\r\n        if (!e.shiftKey && !e.ctrlKey) {\r\n          this.hide(true);\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this.#listManager.onKeyDown(e);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!e.composedPath().some((x) => x instanceof M3eFabMenuItemElement || x === this.#trigger)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #attachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      this.#fabTabIndex = fab.tabIndex;\r\n      fab.addEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items, fab]);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #detachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      if (this.#fabTabIndex !== undefined) {\r\n        fab.tabIndex = this.#fabTabIndex;\r\n      }\r\n      fab.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items.filter((x) => x !== fab)]);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eFabMenuElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eFabMenuElement {\r\n  addEventListener<K extends keyof M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[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 M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[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-fab-menu\": M3eFabMenuElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu-trigger\r\n */\r\n@customElement(\"m3e-fab-menu-trigger\")\r\nexport class M3eFabMenuTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /** The menu triggered by the element. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.control instanceof M3eFabMenuElement ? this.control : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (this.parentElement && control instanceof M3eFabMenuElement) {\r\n      this.parentElement.ariaHasPopup = \"menu\";\r\n      this.parentElement.ariaExpanded = \"false\";\r\n      if (control.id) {\r\n        addAriaReferencedId(this.parentElement, \"aria-controls\", control.id);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n      this.parentElement.ariaExpanded = null;\r\n      if (this.control?.id) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", this.control.id);\r\n      }\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.parentElement) {\r\n      this.menu?.toggle(this.parentElement);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-trigger\": M3eFabMenuTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eFabMenuItemElement","KeyboardClick","LinkButton","Disabled","AttachInternals","Role","LitElement","constructor","_M3eFabMenuItemElement_clickHandler","set","e","__classPrivateFieldGet","call","menu","closest","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","attach","render","html","disabled","renderPseudoLink","defaultPrevented","hide","styles","css","unsafeCSS","DesignToken","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","color","onSurface","__decorate","query","prototype","customElement","M3eFabMenuElement","SuppressInitialAnimation","_M3eFabMenuElement_fabTabIndex","_M3eFabMenuElement_trigger","_M3eFabMenuElement_anchoringCleanup","_M3eFabMenuElement_listManager","RovingTabIndexManager","withWrap","withHomeAndEnd","withVerticalOrientation","_M3eFabMenuElement_keyDownHandler","_M3eFabMenuElement_documentClickHandler","_M3eFabMenuElement_scrollController","ScrollController","target","callback","_M3eFabMenuElement_toggleHandler","newState","__classPrivateFieldSet","undefined","setTimeout","setActiveItem","items","find","variant","isOpen","show","trigger","positionAnchor","position","inline","shift","flip","offset","y","setCustomState","includes","M3eDirectionality","current","style","right","window","innerWidth","clientWidth","left","top","showPopover","ariaExpanded","observe","_M3eFabMenuElement_instances","_M3eFabMenuElement_attachFab","restoreFocus","focus","_M3eFabMenuElement_detachFab","unobserve","hidePopover","toggle","tabIndex","setAttribute","document","_M3eFabMenuElement_handleSlotChange","added","setItems","querySelectorAll","activeItem","updateActiveItem","key","shiftKey","ctrlKey","onKeyDown","composedPath","some","fab","filter","spring","fastEffects","fastSpatial","onPrimaryContainer","primaryContainer","onSecondaryContainer","secondaryContainer","onTertiaryContainer","tertiaryContainer","medium","property","reflect","M3eFabMenuTriggerElement","HtmlFor","ActionElementBase","control","parentElement","ariaHasPopup","id","addAriaReferencedId","detach","removeAriaReferencedId","_onClick"],"mappings":"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"}
+{"version":3,"file":"fab-menu.js","sources":["../../src/fab-menu/FabMenuItemElement.ts","../../src/fab-menu/FabMenuElement.ts","../../src/fab-menu/FabMenuTriggerElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eElevationElement,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport type { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An item of a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-fab-menu-item-height - Height of the menu item.\r\n * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-line-height - Line height of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-tracking - Letter spacing of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-shape - Border radius of the menu item.\r\n * @cssprop --m3e-fab-menu-item-leading-space - Padding at the start of the menu item.\r\n * @cssprop --m3e-fab-menu-item-trailing-space - Padding at the end of the menu item.\r\n * @cssprop --m3e-fab-menu-item-spacing - Gap between icon and label.\r\n * @cssprop --m3e-fab-menu-item-icon-size - Size of the icon in the menu item.\r\n */\r\n@customElement(\"m3e-fab-menu-item\")\r\nexport class M3eFabMenuItemElement extends KeyboardClick(\r\n  LinkButton(Disabled(AttachInternals(Role(LitElement, \"menuitem\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n      height: var(--m3e-fab-menu-item-height, 3.5rem);\r\n      font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not(:disabled)) .label,\r\n    :host(:not(:disabled)) .icon {\r\n      color: var(--_fab-menu-item-color);\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      background-color: var(--_fab-menu-item-container-color);\r\n      --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color);\r\n      --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color);\r\n      --m3e-ripple-color: var(--_fab-menu-ripple-color);\r\n    }\r\n    :host(:disabled) .base {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-container-opacity, 10%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .label,\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem);\r\n      padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem);\r\n      column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      text-align: center;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem);\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      font-size: inherit !important;\r\n      flex: none;\r\n    }\r\n    ::slotted(svg[slot=\"icon\"]) {\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n      :host(:not(:disabled)) .base {\r\n        background-color: Menu;\r\n      }\r\n      :host(:not(:disabled)) .label,\r\n      :host(:not(:disabled)) .icon {\r\n        color: MenuText;\r\n      }\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** The floating action button (FAB) menu to which this item belongs. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.closest(\"m3e-fab-menu\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation class=\"elevation\" ?disabled=\"${this.disabled}\"></m3e-elevation>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      ${this[renderPseudoLink]()}\r\n      <div class=\"wrapper\">\r\n        <slot class=\"icon\" name=\"icon\" aria-hidden=\"true\"></slot>\r\n        <div class=\"label\"><slot></slot></div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented) {\r\n      this.menu?.hide(true);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-item\": M3eFabMenuItemElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  DisabledMixin,\r\n  Role,\r\n  ScrollController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { RovingTabIndexManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eFabElement } from \"@m3e/web/fab\";\r\n\r\nimport { FabMenuVariant } from \"./FabMenuVariant\";\r\nimport { M3eFabMenuItemElement } from \"./FabMenuItemElement\";\r\n\r\n/**\r\n * A menu, opened from a floating action button (FAB), used to display multiple related actions.\r\n *\r\n * @description\r\n * The `m3e-fab-menu` component presents a dynamic menu of related actions, elegantly revealed from a\r\n * floating action button (FAB). Designed using expressive, adaptive surfaces, it enables seamless access\r\n * to contextual actions in modern, visually rich interfaces.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu\r\n *\r\n * @slot - Renders the contents of the menu.\r\n *\r\n * @attr variant - The appearance variant of the menu.\r\n *\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-fab-menu-spacing - Vertical gap between menu items.\r\n * @cssprop --m3e-fab-menu-max-width - Maximum width of the menu.\r\n * @cssprop --m3e-primary-fab-color - Foreground color for primary variant items.\r\n * @cssprop --m3e-primary-fab-container-color - Container color for primary variant items.\r\n * @cssprop --m3e-primary-fab-hover-color - Hover background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-focus-color - Focus background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-ripple-color - Ripple color for primary variant items.\r\n * @cssprop --m3e-secondary-fab-color - Foreground color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-container-color - Container color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-hover-color - Hover background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-focus-color - Focus background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-ripple-color - Ripple color for secondary variant items.\r\n * @cssprop --m3e-tertiary-fab-color - Foreground color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-container-color - Container color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-hover-color - Hover background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-focus-color - Focus background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-ripple-color - Ripple color for tertiary variant items.\r\n */\r\n@customElement(\"m3e-fab-menu\")\r\nexport class M3eFabMenuElement extends SuppressInitialAnimation(AttachInternals(Role(LitElement, \"menu\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: absolute;\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-fab-menu-spacing, 0.25rem);\r\n      padding: unset;\r\n      margin: unset;\r\n      border: unset;\r\n      overflow: visible;\r\n      max-width: var(--m3e-fab-menu-max-width, 17.5rem);\r\n      opacity: 0;\r\n      background-color: transparent;\r\n      display: none;\r\n    }\r\n    :host(:not(:state(-no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.spring.fastEffects}, \r\n        transform ${DesignToken.motion.spring.fastSpatial},\r\n        overlay ${DesignToken.motion.spring.fastEffects} allow-discrete,\r\n        display ${DesignToken.motion.spring.fastEffects} allow-discrete`,\r\n      )};\r\n    }\r\n    .base {\r\n      display: contents;\r\n    }\r\n    :host([variant=\"primary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken.color.primaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    :host([variant=\"secondary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken.color.onSecondaryContainer});\r\n      --_fab-menu-item-container-color: var(\r\n        --m3e-secondary-fab-container-color,\r\n        ${DesignToken.color.secondaryContainer}\r\n      );\r\n      --_fab-menu-background-hover-color: var(\r\n        --m3e-secondary-fab-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-background-focus-color: var(\r\n        --m3e-secondary-fab-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([variant=\"tertiary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host {\r\n      transform: scaleX(0.8);\r\n    }\r\n    :host(:state(-left)) {\r\n      align-items: flex-start;\r\n      transform-origin: left;\r\n    }\r\n    :host(:state(-right)) {\r\n      align-items: flex-end;\r\n      transform-origin: right;\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleX(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n      }\r\n      :host(:popover-open) {\r\n        transform: scaleX(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:state(-no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        border-radius: ${DesignToken.shape.corner.medium};\r\n        outline: 1px solid MenuText;\r\n        background-color: Menu;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #fabTabIndex?: number;\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchoringCleanup?: () => void;\r\n\r\n  /** @private */\r\n  readonly #listManager = new RovingTabIndexManager<LitElement & DisabledMixin>()\r\n    .withWrap()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation();\r\n\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, { target: null, callback: () => this.hide() });\r\n\r\n  /** @private */\r\n  readonly #toggleHandler = (e: ToggleEvent) => {\r\n    if (e.newState === \"closed\") {\r\n      this.#anchoringCleanup?.();\r\n      this.#anchoringCleanup = undefined;\r\n    } else {\r\n      setTimeout(() => {\r\n        this.#listManager.setActiveItem(this.#listManager.items.find((x) => !x.disabled));\r\n      }, 40);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The appearance variant of the menu.\r\n   * @default \"primary\"\r\n   */\r\n  @property({ reflect: true }) variant: FabMenuVariant = \"primary\";\r\n\r\n  /** Whether the menu is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /**\r\n   * Opens the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.\r\n   */\r\n  async show(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = await positionAnchor(\r\n      this,\r\n      trigger,\r\n      {\r\n        position: \"top-end\",\r\n        inline: true,\r\n        shift: \"main\",\r\n        flip: true,\r\n        offset: 8,\r\n      },\r\n      (x, y, position) => {\r\n        setCustomState(this, \"-right\", position.includes(\"end\"));\r\n        setCustomState(this, \"-left\", position.includes(\"start\"));\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        this.style.top = `${y}px`;\r\n      },\r\n    );\r\n\r\n    this.showPopover();\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#scrollController.observe(this.#trigger);\r\n\r\n    this.#attachFab();\r\n  }\r\n\r\n  /**\r\n   * Hides the menu.\r\n   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = undefined;\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\r\n      this.#detachFab();\r\n\r\n      this.#scrollController.unobserve(this.#trigger);\r\n      this.#trigger = undefined;\r\n    }\r\n    this.hidePopover();\r\n  }\r\n\r\n  /**\r\n   * Toggles the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.tabIndex = -1;\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot @slotchange=\"${this.#handleSlotChange}\"></slot></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added } = this.#listManager.setItems([...this.querySelectorAll(\"m3e-fab-menu-item\")]);\r\n    if (!this.#listManager.activeItem) {\r\n      this.#listManager.updateActiveItem(added.find((x) => !x.disabled));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"Tab\":\r\n        this.hide();\r\n        break;\r\n\r\n      case \"Escape\":\r\n        if (!e.shiftKey && !e.ctrlKey) {\r\n          this.hide(true);\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this.#listManager.onKeyDown(e);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!e.composedPath().some((x) => x instanceof M3eFabMenuItemElement || x === this.#trigger)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #attachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      this.#fabTabIndex = fab.tabIndex;\r\n      fab.addEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items, fab]);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #detachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      if (this.#fabTabIndex !== undefined) {\r\n        fab.tabIndex = this.#fabTabIndex;\r\n      }\r\n      fab.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items.filter((x) => x !== fab)]);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eFabMenuElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eFabMenuElement {\r\n  addEventListener<K extends keyof M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[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 M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[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-fab-menu\": M3eFabMenuElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu-trigger\r\n */\r\n@customElement(\"m3e-fab-menu-trigger\")\r\nexport class M3eFabMenuTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /** The menu triggered by the element. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.control instanceof M3eFabMenuElement ? this.control : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (this.parentElement && control instanceof M3eFabMenuElement) {\r\n      this.parentElement.ariaHasPopup = \"menu\";\r\n      this.parentElement.ariaExpanded = \"false\";\r\n      if (control.id) {\r\n        addAriaReferencedId(this.parentElement, \"aria-controls\", control.id);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n      this.parentElement.ariaExpanded = null;\r\n      if (this.control?.id) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", this.control.id);\r\n      }\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.parentElement) {\r\n      this.menu?.toggle(this.parentElement);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-trigger\": M3eFabMenuTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eFabMenuItemElement","KeyboardClick","LinkButton","Disabled","AttachInternals","Role","LitElement","constructor","_M3eFabMenuItemElement_clickHandler","set","e","__classPrivateFieldGet","call","menu","closest","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","attach","render","html","disabled","renderPseudoLink","defaultPrevented","hide","styles","css","unsafeCSS","DesignToken","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","color","onSurface","__decorate","query","prototype","customElement","M3eFabMenuElement","SuppressInitialAnimation","_M3eFabMenuElement_fabTabIndex","_M3eFabMenuElement_trigger","_M3eFabMenuElement_anchoringCleanup","_M3eFabMenuElement_listManager","RovingTabIndexManager","withWrap","withHomeAndEnd","withVerticalOrientation","_M3eFabMenuElement_keyDownHandler","_M3eFabMenuElement_documentClickHandler","_M3eFabMenuElement_scrollController","ScrollController","target","callback","_M3eFabMenuElement_toggleHandler","newState","__classPrivateFieldSet","undefined","setTimeout","setActiveItem","items","find","variant","isOpen","show","trigger","positionAnchor","position","inline","shift","flip","offset","y","setCustomState","includes","M3eDirectionality","current","style","right","window","innerWidth","clientWidth","left","top","showPopover","ariaExpanded","observe","_M3eFabMenuElement_instances","_M3eFabMenuElement_attachFab","restoreFocus","focus","_M3eFabMenuElement_detachFab","unobserve","hidePopover","toggle","tabIndex","setAttribute","document","_M3eFabMenuElement_handleSlotChange","added","setItems","querySelectorAll","activeItem","updateActiveItem","key","shiftKey","ctrlKey","onKeyDown","composedPath","some","fab","filter","spring","fastEffects","fastSpatial","onPrimaryContainer","primaryContainer","onSecondaryContainer","secondaryContainer","onTertiaryContainer","tertiaryContainer","medium","property","reflect","M3eFabMenuTriggerElement","HtmlFor","ActionElementBase","control","parentElement","ariaHasPopup","id","addAriaReferencedId","detach","removeAriaReferencedId","_onClick"],"mappings":"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"}

package/dist/fab-menu.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as o,html as a,unsafeCSS as r,css as n}from"lit";import{query as s,property as l}from"lit/decorators.js";import{KeyboardClick as c,LinkButton as d,Disabled as m,AttachInternals as h,Role as f,renderPseudoLink as p,DesignToken as b,customElement as u,SuppressInitialAnimation as v,ScrollController as g,setCustomState as y,HtmlFor as k,ActionElementBase as w}from"@m3e/web/core";import{RovingTabIndexManager as $,addAriaReferencedId as x,removeAriaReferencedId as E}from"@m3e/web/core/a11y";import{M3eDirectionality as _}from"@m3e/web/core/bidi";import{positionAnchor as C}from"@m3e/web/core/anchoring";var W,M,L;let S=class extends(c(d(m(h(f(o,"menuitem"),!0))))){constructor(){super(...arguments),W.add(this),M.set(this,t=>e(this,W,"m",L).call(this,t))}get menu(){return this.closest("m3e-fab-menu")}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,M,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,M,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return a`<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[p]()}<div class="wrapper"><slot class="icon" name="icon" aria-hidden="true"></slot><div class="label"><slot></slot></div></div></div>`}};var P,I,T,z,A,H,j,K,X,O,R,U,q,D;M=new WeakMap,W=new WeakSet,L=function(e){e.defaultPrevented||this.menu?.hide(!0)},S.styles=n`: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: ${r(`background-color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; height: var(--m3e-fab-menu-item-height, 3.5rem); font-size: var(--m3e-fab-menu-item-font-size, ${b.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-fab-menu-item-font-weight, ${b.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-fab-menu-item-line-height, ${b.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-fab-menu-item-tracking, ${b.typescale.standard.label.large.tracking}); border-radius: var(--m3e-fab-menu-item-shape, ${b.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, ${b.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, ${b.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: ${r(`color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; } .icon { font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem); transition: ${r(`color ${b.motion.duration.short4} ${b.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; } }`,t([s(".elevation")],S.prototype,"_elevation",void 0),t([s(".focus-ring")],S.prototype,"_focusRing",void 0),t([s(".state-layer")],S.prototype,"_stateLayer",void 0),t([s(".ripple")],S.prototype,"_ripple",void 0),S=t([u("m3e-fab-menu-item")],S);let G=class extends(v(h(f(o,"menu")))){constructor(){super(...arguments),P.add(this),I.set(this,void 0),T.set(this,void 0),z.set(this,void 0),A.set(this,(new $).withWrap().withHomeAndEnd().withVerticalOrientation()),H.set(this,t=>e(this,P,"m",R).call(this,t)),j.set(this,t=>e(this,P,"m",U).call(this,t)),K.set(this,new g(this,{target:null,callback:()=>this.hide()})),X.set(this,t=>{"closed"===t.newState?(e(this,z,"f")?.call(this),i(this,z,void 0,"f")):setTimeout(()=>{e(this,A,"f").setActiveItem(e(this,A,"f").items.find(e=>!e.disabled))},40)}),this.variant="primary"}get isOpen(){return void 0!==e(this,T,"f")}async show(t){e(this,T,"f")&&e(this,T,"f")!==t&&this.hide(),e(this,z,"f")?.call(this),i(this,z,await C(this,t,{position:"top-end",inline:!0,shift:!0,flip:!0,offset:8},(e,t,i)=>{y(this,"-right",i.includes("end")),y(this,"-left",i.includes("start")),"rtl"===_.current?(this.style.right=window.innerWidth-e-this.clientWidth+"px",this.style.left=""):(this.style.left=`${e}px`,this.style.right=""),this.style.top=`${t}px`}),"f"),this.showPopover(),i(this,T,t,"f"),e(this,T,"f").ariaExpanded="true",e(this,K,"f").observe(e(this,T,"f")),e(this,P,"m",q).call(this)}hide(t=!1){e(this,z,"f")?.call(this),i(this,z,void 0,"f"),e(this,T,"f")&&(e(this,T,"f").ariaExpanded="false",t&&e(this,T,"f").focus(),e(this,P,"m",D).call(this),e(this,K,"f").unobserve(e(this,T,"f")),i(this,T,void 0,"f")),this.hidePopover()}async toggle(t){e(this,T,"f")?this.hide():await this.show(t)}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.setAttribute("popover","manual"),this.addEventListener("keydown",e(this,H,"f")),this.addEventListener("toggle",e(this,X,"f")),document.addEventListener("click",e(this,j,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,H,"f")),this.removeEventListener("toggle",e(this,X,"f")),document.removeEventListener("click",e(this,j,"f"))}render(){return a`<div class="base"><slot @slotchange="${e(this,P,"m",O)}"></slot></div>`}};I=new WeakMap,T=new WeakMap,z=new WeakMap,A=new WeakMap,H=new WeakMap,j=new WeakMap,K=new WeakMap,X=new WeakMap,P=new WeakSet,O=function(){const{added:t}=e(this,A,"f").setItems([...this.querySelectorAll("m3e-fab-menu-item")]);e(this,A,"f").activeItem||e(this,A,"f").updateActiveItem(t.find(e=>!e.disabled))},R=function(t){switch(t.key){case"Tab":this.hide();break;case"Escape":t.shiftKey||t.ctrlKey||this.hide(!0);break;default:e(this,A,"f").onKeyDown(t)}},U=function(t){t.composedPath().some(t=>t instanceof S||t===e(this,T,"f"))||this.hide()},q=function(){const t=e(this,T,"f")?.closest("m3e-fab");t&&(i(this,I,t.tabIndex,"f"),t.addEventListener("keydown",e(this,H,"f")),e(this,A,"f").setItems([...e(this,A,"f").items,t]))},D=function(){const t=e(this,T,"f")?.closest("m3e-fab");t&&(void 0!==e(this,I,"f")&&(t.tabIndex=e(this,I,"f")),t.removeEventListener("keydown",e(this,H,"f")),e(this,A,"f").setItems([...e(this,A,"f").items.filter(e=>e!==t)]))},G.styles=n`:host { position: absolute; flex-direction: column; row-gap: var(--m3e-fab-menu-spacing, 0.25rem); padding: unset; margin: unset; border: unset; overflow: visible; max-width: var(--m3e-fab-menu-max-width, 17.5rem); opacity: 0; background-color: transparent; display: none; } :host(:not(:state(-no-animate))) { transition: ${r(`opacity ${b.motion.spring.fastEffects}, \n        transform ${b.motion.spring.fastSpatial},\n        overlay ${b.motion.spring.fastEffects} allow-discrete,\n        display ${b.motion.spring.fastEffects} allow-discrete`)}; } .base { display: contents; } :host([variant="primary"]) .base { --_fab-menu-item-color: var(--m3e-primary-fab-color, ${b.color.onPrimaryContainer}); --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${b.color.primaryContainer}); --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${b.color.onPrimaryContainer}); --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${b.color.onPrimaryContainer}); --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${b.color.onPrimaryContainer}); } :host([variant="secondary"]) .base { --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${b.color.onSecondaryContainer}); --_fab-menu-item-container-color: var( --m3e-secondary-fab-container-color, ${b.color.secondaryContainer} ); --_fab-menu-background-hover-color: var( --m3e-secondary-fab-hover-color, ${b.color.onSecondaryContainer} ); --_fab-menu-background-focus-color: var( --m3e-secondary-fab-focus-color, ${b.color.onSecondaryContainer} ); --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${b.color.onSecondaryContainer}); } :host([variant="tertiary"]) .base { --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${b.color.onTertiaryContainer}); --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${b.color.tertiaryContainer}); --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${b.color.onTertiaryContainer}); --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${b.color.onTertiaryContainer}); --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${b.color.onTertiaryContainer}); } :host { transform: scaleX(0.8); } :host(:state(-left)) { align-items: flex-start; transform-origin: left; } :host(:state(-right)) { align-items: flex-end; transform-origin: right; } :host(:popover-open) { transform: scaleX(1); display: inline-flex; opacity: 1; } :host::backdrop { background-color: transparent; } @starting-style { :host(:popover-open) { opacity: 0; } :host(:popover-open) { transform: scaleX(0.8); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { border-radius: ${b.shape.corner.medium}; outline: 1px solid MenuText; background-color: Menu; } }`,t([l({reflect:!0})],G.prototype,"variant",void 0),G=t([u("m3e-fab-menu")],G);let V=class extends(k(w)){get menu(){return this.control instanceof G?this.control:null}attach(e){super.attach(e),this.parentElement&&e instanceof G&&(this.parentElement.ariaHasPopup="menu",this.parentElement.ariaExpanded="false",e.id&&x(this.parentElement,"aria-controls",e.id))}detach(){this.parentElement&&(this.parentElement.ariaHasPopup=null,this.parentElement.ariaExpanded=null,this.control?.id&&E(this.parentElement,"aria-controls",this.control.id)),super.detach()}_onClick(){this.parentElement&&this.menu?.toggle(this.parentElement)}};V=t([u("m3e-fab-menu-trigger")],V);export{G as M3eFabMenuElement,S as M3eFabMenuItemElement,V as M3eFabMenuTriggerElement};
+import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as o,html as a,unsafeCSS as r,css as n}from"lit";import{query as s,property as l}from"lit/decorators.js";import{KeyboardClick as c,LinkButton as d,Disabled as m,AttachInternals as h,Role as f,renderPseudoLink as p,DesignToken as b,customElement as u,SuppressInitialAnimation as v,ScrollController as g,setCustomState as y,HtmlFor as k,ActionElementBase as w}from"@m3e/web/core";import{RovingTabIndexManager as $,addAriaReferencedId as x,removeAriaReferencedId as E}from"@m3e/web/core/a11y";import{M3eDirectionality as _}from"@m3e/web/core/bidi";import{positionAnchor as C}from"@m3e/web/core/anchoring";var W,M,L;let S=class extends(c(d(m(h(f(o,"menuitem"),!0))))){constructor(){super(...arguments),W.add(this),M.set(this,t=>e(this,W,"m",L).call(this,t))}get menu(){return this.closest("m3e-fab-menu")}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,M,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,M,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return a`<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[p]()}<div class="wrapper"><slot class="icon" name="icon" aria-hidden="true"></slot><div class="label"><slot></slot></div></div></div>`}};var P,I,T,z,A,H,j,K,X,O,R,U,q,D;M=new WeakMap,W=new WeakSet,L=function(e){e.defaultPrevented||this.menu?.hide(!0)},S.styles=n`: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: ${r(`background-color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; height: var(--m3e-fab-menu-item-height, 3.5rem); font-size: var(--m3e-fab-menu-item-font-size, ${b.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-fab-menu-item-font-weight, ${b.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-fab-menu-item-line-height, ${b.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-fab-menu-item-tracking, ${b.typescale.standard.label.large.tracking}); border-radius: var(--m3e-fab-menu-item-shape, ${b.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, ${b.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, ${b.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: ${r(`color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; } .icon { font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem); transition: ${r(`color ${b.motion.duration.short4} ${b.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; } }`,t([s(".elevation")],S.prototype,"_elevation",void 0),t([s(".focus-ring")],S.prototype,"_focusRing",void 0),t([s(".state-layer")],S.prototype,"_stateLayer",void 0),t([s(".ripple")],S.prototype,"_ripple",void 0),S=t([u("m3e-fab-menu-item")],S);let G=class extends(v(h(f(o,"menu")))){constructor(){super(...arguments),P.add(this),I.set(this,void 0),T.set(this,void 0),z.set(this,void 0),A.set(this,(new $).withWrap().withHomeAndEnd().withVerticalOrientation()),H.set(this,t=>e(this,P,"m",R).call(this,t)),j.set(this,t=>e(this,P,"m",U).call(this,t)),K.set(this,new g(this,{target:null,callback:()=>this.hide()})),X.set(this,t=>{"closed"===t.newState?(e(this,z,"f")?.call(this),i(this,z,void 0,"f")):setTimeout(()=>{e(this,A,"f").setActiveItem(e(this,A,"f").items.find(e=>!e.disabled))},40)}),this.variant="primary"}get isOpen(){return void 0!==e(this,T,"f")}async show(t){e(this,T,"f")&&e(this,T,"f")!==t&&this.hide(),e(this,z,"f")?.call(this),i(this,z,await C(this,t,{position:"top-end",inline:!0,shift:"main",flip:!0,offset:8},(e,t,i)=>{y(this,"-right",i.includes("end")),y(this,"-left",i.includes("start")),"rtl"===_.current?(this.style.right=window.innerWidth-e-this.clientWidth+"px",this.style.left=""):(this.style.left=`${e}px`,this.style.right=""),this.style.top=`${t}px`}),"f"),this.showPopover(),i(this,T,t,"f"),e(this,T,"f").ariaExpanded="true",e(this,K,"f").observe(e(this,T,"f")),e(this,P,"m",q).call(this)}hide(t=!1){e(this,z,"f")?.call(this),i(this,z,void 0,"f"),e(this,T,"f")&&(e(this,T,"f").ariaExpanded="false",t&&e(this,T,"f").focus(),e(this,P,"m",D).call(this),e(this,K,"f").unobserve(e(this,T,"f")),i(this,T,void 0,"f")),this.hidePopover()}async toggle(t){e(this,T,"f")?this.hide():await this.show(t)}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.setAttribute("popover","manual"),this.addEventListener("keydown",e(this,H,"f")),this.addEventListener("toggle",e(this,X,"f")),document.addEventListener("click",e(this,j,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,H,"f")),this.removeEventListener("toggle",e(this,X,"f")),document.removeEventListener("click",e(this,j,"f"))}render(){return a`<div class="base"><slot @slotchange="${e(this,P,"m",O)}"></slot></div>`}};I=new WeakMap,T=new WeakMap,z=new WeakMap,A=new WeakMap,H=new WeakMap,j=new WeakMap,K=new WeakMap,X=new WeakMap,P=new WeakSet,O=function(){const{added:t}=e(this,A,"f").setItems([...this.querySelectorAll("m3e-fab-menu-item")]);e(this,A,"f").activeItem||e(this,A,"f").updateActiveItem(t.find(e=>!e.disabled))},R=function(t){switch(t.key){case"Tab":this.hide();break;case"Escape":t.shiftKey||t.ctrlKey||this.hide(!0);break;default:e(this,A,"f").onKeyDown(t)}},U=function(t){t.composedPath().some(t=>t instanceof S||t===e(this,T,"f"))||this.hide()},q=function(){const t=e(this,T,"f")?.closest("m3e-fab");t&&(i(this,I,t.tabIndex,"f"),t.addEventListener("keydown",e(this,H,"f")),e(this,A,"f").setItems([...e(this,A,"f").items,t]))},D=function(){const t=e(this,T,"f")?.closest("m3e-fab");t&&(void 0!==e(this,I,"f")&&(t.tabIndex=e(this,I,"f")),t.removeEventListener("keydown",e(this,H,"f")),e(this,A,"f").setItems([...e(this,A,"f").items.filter(e=>e!==t)]))},G.styles=n`:host { position: absolute; flex-direction: column; row-gap: var(--m3e-fab-menu-spacing, 0.25rem); padding: unset; margin: unset; border: unset; overflow: visible; max-width: var(--m3e-fab-menu-max-width, 17.5rem); opacity: 0; background-color: transparent; display: none; } :host(:not(:state(-no-animate))) { transition: ${r(`opacity ${b.motion.spring.fastEffects}, \n        transform ${b.motion.spring.fastSpatial},\n        overlay ${b.motion.spring.fastEffects} allow-discrete,\n        display ${b.motion.spring.fastEffects} allow-discrete`)}; } .base { display: contents; } :host([variant="primary"]) .base { --_fab-menu-item-color: var(--m3e-primary-fab-color, ${b.color.onPrimaryContainer}); --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${b.color.primaryContainer}); --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${b.color.onPrimaryContainer}); --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${b.color.onPrimaryContainer}); --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${b.color.onPrimaryContainer}); } :host([variant="secondary"]) .base { --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${b.color.onSecondaryContainer}); --_fab-menu-item-container-color: var( --m3e-secondary-fab-container-color, ${b.color.secondaryContainer} ); --_fab-menu-background-hover-color: var( --m3e-secondary-fab-hover-color, ${b.color.onSecondaryContainer} ); --_fab-menu-background-focus-color: var( --m3e-secondary-fab-focus-color, ${b.color.onSecondaryContainer} ); --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${b.color.onSecondaryContainer}); } :host([variant="tertiary"]) .base { --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${b.color.onTertiaryContainer}); --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${b.color.tertiaryContainer}); --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${b.color.onTertiaryContainer}); --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${b.color.onTertiaryContainer}); --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${b.color.onTertiaryContainer}); } :host { transform: scaleX(0.8); } :host(:state(-left)) { align-items: flex-start; transform-origin: left; } :host(:state(-right)) { align-items: flex-end; transform-origin: right; } :host(:popover-open) { transform: scaleX(1); display: inline-flex; opacity: 1; } :host::backdrop { background-color: transparent; } @starting-style { :host(:popover-open) { opacity: 0; } :host(:popover-open) { transform: scaleX(0.8); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { border-radius: ${b.shape.corner.medium}; outline: 1px solid MenuText; background-color: Menu; } }`,t([l({reflect:!0})],G.prototype,"variant",void 0),G=t([u("m3e-fab-menu")],G);let V=class extends(k(w)){get menu(){return this.control instanceof G?this.control:null}attach(e){super.attach(e),this.parentElement&&e instanceof G&&(this.parentElement.ariaHasPopup="menu",this.parentElement.ariaExpanded="false",e.id&&x(this.parentElement,"aria-controls",e.id))}detach(){this.parentElement&&(this.parentElement.ariaHasPopup=null,this.parentElement.ariaExpanded=null,this.control?.id&&E(this.parentElement,"aria-controls",this.control.id)),super.detach()}_onClick(){this.parentElement&&this.menu?.toggle(this.parentElement)}};V=t([u("m3e-fab-menu-trigger")],V);export{G as M3eFabMenuElement,S as M3eFabMenuItemElement,V as M3eFabMenuTriggerElement};
 //# sourceMappingURL=fab-menu.min.js.map