@m3e/web 2.5.5 → 2.5.7

package/dist/datepicker.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.min.js","sources":["../../src/datepicker/DatepickerElement.ts","../../src/datepicker/DatepickerToggleElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  customElement,\r\n  AttachInternals,\r\n  dateConverter,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  Role,\r\n  ScrollLockController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n  InertController,\r\n  ReconnectedCallback,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\nimport { M3eCalendarElement, CalendarView } from \"@m3e/web/calendar\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/calendar\";\r\n\r\nimport { DatepickerVariant } from \"./DatepickerVariant\";\r\n\r\n/**\r\n * Presents a date picker on a temporary surface.\r\n *\r\n * @description\r\n * The `m3e-datepicker` component provides a date‑selection experience\r\n * consistent with Material 3 guidance for layout, motion, and accessibility.\r\n * It displays a temporary surface that allows users to select a date or date\r\n * range using calendar-based views. The picker supports month, year, and\r\n * multi‑year views, enabling users to navigate across time efficiently.\r\n *\r\n * While open, the picker uses a focused selection flow. Users review their\r\n * choice and complete the interaction through confirm, dismiss, or clear\r\n * actions, ensuring intentional updates to the field or control that invoked it.\r\n *\r\n * It accepts and emits plain `Date` values, allowing applications to apply their\r\n * own formatting, parsing, and localization.\r\n *\r\n * @tag m3e-datepicker\r\n *\r\n * @attr variant - The appearance variant of the picker.\r\n * @attr clearable - Whether the user can clear the selected date and close the picker.\r\n * @attr date - The selected date.\r\n * @attr max-date - The maximum date that can be selected.\r\n * @attr min-date - The minimum date that can be selected.\r\n * @attr range-end - End of a date range.\r\n * @attr range-start - Start of a date range.\r\n * @attr start-at - A date specifying the period (month or year) to start the calendar in.\r\n * @attr start-view - The initial view used to select a date.\r\n * @attr previous-month-label - The accessible label given to the button used to move to the previous month.\r\n * @attr next-month-label - The accessible label given to the button used to move to the next month.\r\n * @attr previous-year-label - The accessible label given to the button used to move to the previous year.\r\n * @attr next-year-label - The accessible label given to the button used to move to the next year.\r\n * @attr previous-multi-year-label - The accessible label given to the button used to move to the previous 24 years.\r\n * @attr next-multi-year-label - The accessible label given to the button used to move to the next 24 years.\r\n * @attr clear-label - The label given to the button used clear the selected date and close the picker.\r\n * @attr confirm-label - The label given to the button used apply the selected date and close the picker.\r\n * @attr dismiss-label - The label given to the button used discard the selected date and close the picker.\r\n * @attr label - The label given to the the picker.\r\n *\r\n * @fires change - Dispatched when the selected date changes.\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-datepicker-container-padding-block - Block‑axis padding of the date picker container.\r\n * @cssprop --m3e-datepicker-container-padding-inline - Inline‑axis padding of the date picker container.\r\n * @cssprop --m3e-datepicker-container-color - Background color of the standard container surface.\r\n * @cssprop --m3e-datepicker-container-elevation - Elevation shadow applied to the container surface.\r\n * @cssprop --m3e-datepicker-modal-headline-color - Color used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-font-size - Font size used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-font-weight - Font weight used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-line-height - Line height used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-tracking - Letter spacing used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-color - Color used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-font-size - Font size used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-font-weight - Font weight used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-line-height - Line height used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-tracking - Letter spacing used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-actions-padding-inline - Inline‑axis padding of the action row.\r\n * @cssprop --m3e-datepicker-docked-container-color - Background color of the container in docked mode.\r\n * @cssprop --m3e-datepicker-docked-container-shape - Corner radius of the container in docked mode.\r\n * @cssprop --m3e-datepicker-modal-container-color - Background color of the container in modal mode.\r\n * @cssprop --m3e-datepicker-modal-container-shape - Corner radius of the container in modal mode.\r\n * @cssprop --m3e-divider-thickness - Thickness of divider elements within the picker.\r\n * @cssprop --m3e-divider-color - Color of divider rules within the picker.\r\n * @cssprop --m3e-dialog-scrim-color - Base color used for the modal scrim behind the picker.\r\n * @cssprop --m3e-dialog-scrim-opacity - Opacity applied to the scrim color in modal mode.\r\n */\r\n@customElement(\"m3e-datepicker\")\r\nexport class M3eDatepickerElement extends SuppressInitialAnimation(\r\n  ReconnectedCallback(AttachInternals(Role(LitElement, \"dialog\"))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      flex-direction: column;\r\n      margin: unset;\r\n      border: unset;\r\n      padding-block: var(--m3e-datepicker-container-padding-block, 0.75rem);\r\n      padding-inline: var(--m3e-datepicker-container-padding-inline, 0.25rem);\r\n      background-color: var(--m3e-datepicker-container-color, ${DesignToken.color.surfaceContainer});\r\n      box-shadow: var(--m3e-datepicker-container-elevation, ${DesignToken.elevation.level3});\r\n      opacity: 0;\r\n      display: none;\r\n    }\r\n    .calendar {\r\n      --m3e-calendar-container-color: transparent;\r\n      --m3e-calendar-container-elevation: ${DesignToken.elevation.level0};\r\n      --m3e-calendar-container-shape: ${DesignToken.shape.corner.none};\r\n    }\r\n    .headline {\r\n      color: var(--m3e-datepicker-modal-headline-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(\r\n        --m3e-datepicker-modal-headline-font-size,\r\n        ${DesignToken.typescale.standard.headline.large.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-datepicker-modal-headline-font-weight,\r\n        ${DesignToken.typescale.standard.headline.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-datepicker-modal-headline-line-height,\r\n        ${DesignToken.typescale.standard.headline.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-datepicker-modal-headline-tracking,\r\n        ${DesignToken.typescale.standard.headline.large.tracking}\r\n      );\r\n      margin-block-start: 2.25rem;\r\n      margin-block-end: 0.75rem;\r\n      margin-inline: 1.5rem;\r\n    }\r\n    .supporting-text {\r\n      color: var(--m3e-datepicker-modal-supporting-text-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(\r\n        --m3e-datepicker-modal-supporting-text-font-size,\r\n        ${DesignToken.typescale.standard.label.large.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-datepicker-modal-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-datepicker-modal-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-datepicker-modal-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.label.large.tracking}\r\n      );\r\n      margin-block-start: 1rem;\r\n      margin-inline: 1.5rem;\r\n    }\r\n    .divider {\r\n      height: var(--m3e-divider-thickness, 1px);\r\n      width: 100%;\r\n      position: relative;\r\n    }\r\n    .divider::before {\r\n      content: \"\";\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      border-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n      height: inherit;\r\n      left: -0.25rem;\r\n      right: -0.25rem;\r\n    }\r\n    .actions {\r\n      display: flex;\r\n      align-items: center;\r\n      column-gap: 0.5rem;\r\n      padding-inline: var(--m3e-datepicker-actions-padding-inline, 0.5rem);\r\n    }\r\n    .spacer {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host(:is(:state(--docked), :--docked)) {\r\n      position: absolute;\r\n      background-color: var(--m3e-datepicker-docked-container-color, ${DesignToken.color.surfaceContainer});\r\n      border-radius: var(--m3e-datepicker-docked-container-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host(:is(:state(--modal), :--modal)) {\r\n      position: fixed;\r\n      inset: 0;\r\n      margin: auto;\r\n      transform-origin: top;\r\n      background-color: var(--m3e-datepicker-modal-container-color, ${DesignToken.color.surfaceContainerHigh});\r\n      border-radius: var(--m3e-datepicker-modal-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},\r\n        overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host {\r\n      transform: scaleY(0.8);\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleY(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host(:is(:state(--docked), :--docked))::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:is(:state(--modal), :--modal))::backdrop {\r\n      background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      margin-inline-end: -20px;\r\n    }\r\n    :host(:is(:state(--modal), :--modal):not(:popover-open))::backdrop {\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--modal), :--modal):popover-open)::backdrop {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%),\r\n        transparent\r\n      );\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--bottom), :--bottom)) {\r\n      transform-origin: top;\r\n    }\r\n    :host(:is(:state(--top), :--top)) {\r\n      transform-origin: bottom;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        transform: scaleY(0.8);\r\n      }\r\n      :host(:is(:state(--modal), :--modal):popover-open)::backdrop {\r\n        background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n        border: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @state() private _date?: Date | null;\r\n  /** @private */ @state() private _rangeStart?: Date | null;\r\n  /** @private */ @state() private _rangeEnd?: Date | null;\r\n\r\n  /** @private */ @query(\"m3e-calendar\") private readonly _calendar!: M3eCalendarElement;\r\n  /** @private */ @state() private _variant?: Exclude<DatepickerVariant, \"auto\">;\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchor?: HTMLElement;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n  /** @private */ readonly #inertController = new InertController(this);\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n  /** @private */ readonly #documentKeyDownHandler = (e: KeyboardEvent) => this.#handleDocumentKeyDown(e);\r\n\r\n  /** @private */\r\n  readonly #toggleHandler = (e: ToggleEvent) => {\r\n    if (e.newState === \"closed\") {\r\n      this.#clearSelectionState();\r\n      this.#anchorCleanup?.();\r\n      this.#anchorCleanup = undefined;\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The appearance variant of the picker.\r\n   * @default \"docked\"\r\n   */\r\n  @property() variant: DatepickerVariant = \"docked\";\r\n\r\n  /**\r\n   * The initial view used to select a date.\r\n   * @default \"month\"\r\n   */\r\n  @property({ attribute: \"start-view\" }) startView: CalendarView = \"month\";\r\n\r\n  /**\r\n   * The selected date.\r\n   * @default null\r\n   */\r\n  @property({ converter: dateConverter }) date: Date | null = null;\r\n\r\n  /**\r\n   * A date specifying the period (month or year) to start the calendar in.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"start-at\", converter: dateConverter }) startAt: Date | null = null;\r\n\r\n  /**\r\n   * The minimum date that can be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"min-date\", converter: dateConverter }) minDate: Date | null = null;\r\n\r\n  /**\r\n   * The maximum date that can be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"max-date\", converter: dateConverter }) maxDate: Date | null = null;\r\n\r\n  /**\r\n   * Start of a date range.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"range-start\", converter: dateConverter }) rangeStart: Date | null = null;\r\n\r\n  /**\r\n   * End of a date range.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"range-end\", converter: dateConverter }) rangeEnd: Date | null = null;\r\n\r\n  /**\r\n   * A function used to determine whether a date cannot be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: false }) blackoutDates: ((date: Date) => boolean) | null = null;\r\n\r\n  /**\r\n   * A function used to determine whether a date is special.\r\n   * @default null\r\n   */\r\n  @property({ attribute: false }) specialDates: ((date: Date) => boolean) | null = null;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous month.\r\n   * @default \"Previous month\"\r\n   */\r\n  @property({ attribute: \"previous-month-label\" }) previousMonthLabel = \"Previous month\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous year.\r\n   * @default \"Previous year\"\r\n   */\r\n  @property({ attribute: \"previous-year-label\" }) previousYearLabel = \"Previous year\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous 24 years.\r\n   * @default \"Previous 24 years\"\r\n   */\r\n  @property({ attribute: \"previous-multi-year-label\" }) previousMultiYearLabel = \"Previous 24 years\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next month.\r\n   * @default \"Next month\"\r\n   */\r\n  @property({ attribute: \"next-month-label\" }) nextMonthLabel = \"Next month\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next year.\r\n   * @default \"Next year\"\r\n   */\r\n  @property({ attribute: \"next-year-label\" }) nextYearLabel = \"Next year\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next 24 years.\r\n   * @default \"Next 24 years\"\r\n   */\r\n  @property({ attribute: \"next-multi-year-label\" }) nextMultiYearLabel = \"Next 24 years\";\r\n\r\n  /**\r\n   * Whether the user can clear the selected date and close the picker.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) clearable = false;\r\n\r\n  /**\r\n   * The label given to the button used clear the selected date and close the picker.\r\n   * @default \"Clear\"\r\n   */\r\n  @property({ attribute: \"clear-label\" }) clearLabel = \"Clear\";\r\n\r\n  /**\r\n   * The label given to the button used apply the selected date and close the picker.\r\n   * @default \"OK\"\r\n   */\r\n  @property({ attribute: \"confirm-label\" }) confirmLabel = \"OK\";\r\n\r\n  /**\r\n   * The label given to the button used discard the selected date and close the picker.\r\n   * @default \"Cancel\"\r\n   */\r\n  @property({ attribute: \"dismiss-label\" }) dismissLabel = \"Cancel\";\r\n\r\n  /**\r\n   * The label given to the the picker.\r\n   * @default \"Select date\"\r\n   */\r\n  @property() label = \"Select date\";\r\n\r\n  /** Whether the picker is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /** The current variant applied to the picker. */\r\n  get currentVariant(): Exclude<DatepickerVariant, \"auto\"> {\r\n    return this._variant ?? (this.variant !== \"modal\" ? \"docked\" : \"modal\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n    document.addEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._variant = undefined;\r\n    this.#breakpointUnobserve?.();\r\n\r\n    this.#clearAnchoring();\r\n\r\n    deleteCustomState(this, \"--docked\");\r\n    deleteCustomState(this, \"--modal\");\r\n\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n    document.removeEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n\r\n    if (this.variant === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Opens the picker.\r\n   * @param {HTMLElement} trigger The element that triggered the picker.\r\n   * @param {HTMLElement | undefined} anchor The element used to position the picker.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the picker is opened.\r\n   */\r\n  async show(trigger: HTMLElement, anchor?: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    if (this.currentVariant === \"modal\") {\r\n      this.#scrollLockController.lock();\r\n      this.#inertController.lock();\r\n    }\r\n\r\n    const calendar = this._calendar;\r\n\r\n    calendar.date = this.date;\r\n    calendar.rangeStart = this.rangeStart;\r\n    calendar.rangeEnd = this.rangeEnd;\r\n\r\n    // Reset the start-view\r\n    calendar.requestUpdate(\"startView\");\r\n    if (calendar.isUpdatePending) {\r\n      await calendar.updateComplete;\r\n    }\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#anchor = anchor;\r\n\r\n    await this.#updatePosition();\r\n    this.showPopover();\r\n\r\n    await this._calendar.focusActiveCell();\r\n  }\r\n\r\n  /**\r\n   * Hides the picker.\r\n   * @param {boolean} [restoreFocus=false] Whether to restore focus to the picker's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    if (this.currentVariant === \"modal\") {\r\n      this.#scrollLockController.unlock();\r\n      this.#inertController.unlock();\r\n    }\r\n\r\n    this.hidePopover();\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n      this.#trigger = undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Toggles the picker.\r\n   * @param {HTMLElement} trigger The element that triggered the picker.\r\n   * @param {HTMLElement | undefined} anchor The element used to position the picker.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the picker is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement, anchor?: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger, anchor);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-trap>\r\n      ${this.#renderHeader()}\r\n      <m3e-calendar\r\n        class=\"calendar\"\r\n        start-view=\"${this.startView}\"\r\n        start-at=\"${ifDefined(this.startAt?.toISOString())}\"\r\n        min-date=\"${ifDefined(this.minDate?.toISOString())}\"\r\n        max-date=\"${ifDefined(this.maxDate?.toISOString())}\"\r\n        @change=\"${this.#handleCalendarChange}\"\r\n      ></m3e-calendar>\r\n      <div class=\"actions\">\r\n        ${this.clearable\r\n          ? html`<m3e-button @click=\"${this.#handleClearClick}\">${this.clearLabel}</m3e-button>`\r\n          : nothing}\r\n        <div class=\"spacer\" aria-hidden=\"true\"></div>\r\n        <m3e-button @click=\"${this.#handleDismissClick}\">${this.dismissLabel}</m3e-button>\r\n        <m3e-button @click=\"${this.#handleConfirmClick}\">${this.confirmLabel}</m3e-button>\r\n      </div>\r\n    </m3e-focus-trap>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  #renderHeader(): unknown {\r\n    if (this.currentVariant === \"docked\") return nothing;\r\n\r\n    const 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    if (changedProperties.has(\"rangeStart\") && this.rangeStart && !changedProperties.has(\"date\")) {\r\n      this.date = new Date(this.rangeStart);\r\n    }\r\n    if (changedProperties.has(\"rangeEnd\") && this.rangeEnd && !changedProperties.has(\"date\")) {\r\n      this.date = new Date(this.rangeEnd);\r\n    }\r\n    if (changedProperties.has(\"variant\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.variant === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this._variant = undefined;\r\n        this.#updateVariant();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"specialDates\") || _changedProperties.has(\"blackoutDates\")) {\r\n      this._calendar.specialDates = this.specialDates;\r\n      this._calendar.blackoutDates = this.blackoutDates;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!e.composedPath().some((x) => x instanceof M3eDatepickerElement || x === this.#trigger || x === this.#anchor)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleCalendarChange(): void {\r\n    this._date = this._calendar.date;\r\n    this._rangeStart = this._calendar.rangeStart;\r\n    this._rangeEnd = this._calendar.rangeEnd;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClearClick(): void {\r\n    this.date = null;\r\n    this.rangeStart = null;\r\n    this.rangeEnd = null;\r\n\r\n    this.hide(true);\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleDismissClick(): void {\r\n    this.hide(true);\r\n  }\r\n\r\n  /** @private */\r\n  #handleConfirmClick(): void {\r\n    this.date = this._date ?? this.date;\r\n    this.rangeStart = this._rangeStart === undefined ? this.rangeStart : this._rangeStart;\r\n    this.rangeEnd = this._rangeEnd === undefined ? this.rangeEnd : this._rangeEnd;\r\n    this.hide(true);\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentKeyDown(e: KeyboardEvent): void {\r\n    if (this.isOpen && this.currentVariant === \"modal\" && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      this.hide(true);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) => {\r\n      this._variant = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? \"modal\" : \"docked\";\r\n      this.#updateVariant();\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #updateVariant(): void {\r\n    switch (this.currentVariant) {\r\n      case \"docked\":\r\n        this.ariaModal = null;\r\n        deleteCustomState(this, \"--modal\");\r\n        addCustomState(this, \"--docked\");\r\n        this.#scrollLockController.unlock();\r\n        this.#inertController.unlock();\r\n        break;\r\n\r\n      case \"modal\":\r\n        this.ariaModal = \"true\";\r\n        deleteCustomState(this, \"--docked\");\r\n        addCustomState(this, \"--modal\");\r\n        if (this.isOpen) {\r\n          this.#scrollLockController.lock();\r\n          this.#inertController.lock();\r\n        }\r\n\r\n        break;\r\n    }\r\n\r\n    if (this.isOpen) {\r\n      this.#updatePosition();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #updatePosition(): Promise<void> {\r\n    if (this.currentVariant === \"docked\" && this.#trigger) {\r\n      this.#anchorCleanup?.();\r\n      this.#anchorCleanup = await positionAnchor(\r\n        this,\r\n        this.#anchor ?? this.#trigger,\r\n        {\r\n          position: \"bottom-start\",\r\n          inline: true,\r\n          flip: true,\r\n          shift: \"both\",\r\n        },\r\n        (x, y, position) => {\r\n          setCustomState(this, \"--top\", position.includes(\"top\"));\r\n          setCustomState(this, \"--bottom\", position.includes(\"bottom\"));\r\n\r\n          if (M3eDirectionality.current === \"rtl\") {\r\n            this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n            this.style.left = \"\";\r\n          } else {\r\n            this.style.left = `${x}px`;\r\n            this.style.right = \"\";\r\n          }\r\n\r\n          this.style.top = `${y}px`;\r\n        },\r\n      );\r\n    } else {\r\n      this.#clearAnchoring();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #clearAnchoring(): void {\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n    this.style.left = \"\";\r\n    this.style.right = \"\";\r\n    this.style.top = \"\";\r\n  }\r\n\r\n  /** @private */\r\n  #clearSelectionState(): void {\r\n    this._date = this._rangeStart = this._rangeEnd = undefined;\r\n  }\r\n}\r\n\r\ninterface M3eDatepickerElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eDatepickerElement {\r\n  addEventListener<K extends keyof M3eDatepickerElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDatepickerElement, ev: M3eDatepickerElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eDatepickerElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDatepickerElement, ev: M3eDatepickerElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-datepicker\": M3eDatepickerElement;\r\n  }\r\n}\r\n","import { customElement, ActionElementBase, HtmlFor } from \"@m3e/web/core\";\r\nimport type { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\nimport { M3eDatepickerElement } from \"./DatepickerElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle a datepicker.\r\n * @tag m3e-datepicker-toggle\r\n */\r\n@customElement(\"m3e-datepicker-toggle\")\r\nexport class M3eDatepickerToggleElement extends HtmlFor(ActionElementBase) {\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = \"dialog\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.control instanceof M3eDatepickerElement && this.parentElement) {\r\n      this.control.toggle(this.parentElement, this.closest<M3eFormFieldElement>(\"m3e-form-field\") ?? undefined);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-datepicker-toggle\": M3eDatepickerToggleElement;\r\n  }\r\n}\r\n"],"names":["M3eDatepickerElement","M3eDatepickerElement_1","SuppressInitialAnimation","ReconnectedCallback","AttachInternals","Role","LitElement","constructor","_M3eDatepickerElement_breakpointUnobserve","set","this","_M3eDatepickerElement_trigger","_M3eDatepickerElement_anchor","_M3eDatepickerElement_anchorCleanup","_M3eDatepickerElement_scrollLockController","ScrollLockController","_M3eDatepickerElement_inertController","InertController","_M3eDatepickerElement_documentClickHandler","e","__classPrivateFieldGet","call","_M3eDatepickerElement_documentKeyDownHandler","_M3eDatepickerElement_toggleHandler","newState","_M3eDatepickerElement_instances","_M3eDatepickerElement_clearSelectionState","__classPrivateFieldSet","undefined","variant","startView","date","startAt","minDate","maxDate","rangeStart","rangeEnd","blackoutDates","specialDates","previousMonthLabel","previousYearLabel","previousMultiYearLabel","nextMonthLabel","nextYearLabel","nextMultiYearLabel","clearable","clearLabel","confirmLabel","dismissLabel","label","isOpen","currentVariant","_variant","connectedCallback","super","setAttribute","addEventListener","document","disconnectedCallback","_M3eDatepickerElement_clearAnchoring","deleteCustomState","removeEventListener","reconnectedCallback","_M3eDatepickerElement_initBreakpointMonitoring","show","trigger","anchor","hide","lock","calendar","_calendar","requestUpdate","isUpdatePending","updateComplete","ariaExpanded","_M3eDatepickerElement_updatePosition","showPopover","focusActiveCell","restoreFocus","unlock","hidePopover","focus","toggle","render","html","_M3eDatepickerElement_renderHeader","ifDefined","toISOString","_M3eDatepickerElement_handleCalendarChange","_M3eDatepickerElement_handleClearClick","nothing","_M3eDatepickerElement_handleDismissClick","_M3eDatepickerElement_handleConfirmClick","willUpdate","changedProperties","some","x","has","Date","_M3eDatepickerElement_updateVariant","updated","_changedProperties","selectedDate","_date","Intl","DateTimeFormat","navigator","language","weekday","month","day","format","composedPath","_rangeStart","_rangeEnd","dispatchEvent","Event","bubbles","key","shiftKey","ctrlKey","preventDefault","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","get","ariaModal","addCustomState","async","positionAnchor","position","inline","flip","shift","y","setCustomState","includes","M3eDirectionality","current","style","right","window","innerWidth","clientWidth","left","top","styles","css","DesignToken","color","surfaceContainer","elevation","level3","level0","shape","corner","none","onSurfaceVariant","typescale","standard","headline","large","fontSize","fontWeight","lineHeight","tracking","outlineVariant","surfaceContainerHigh","extraLarge","unsafeCSS","motion","duration","short2","easing","scrim","short3","long2","__decorate","state","prototype","query","property","attribute","converter","dateConverter","type","Boolean","customElement","M3eDatepickerToggleElement","HtmlFor","ActionElementBase","parentElement","ariaHasPopup","_onClick","control","closest"],"mappings":";;;;;65BAmGO,IAAMA,EAAoBC,EAA1B,cAAmCC,EACxCC,EAAoBC,EAAgBC,EAAKC,EAAY,cADhDC,WAAAA,mCAiLWC,EAAAC,IAAAC,aAEAC,EAAAF,IAAAC,aACAE,EAAAH,IAAAC,aACAG,EAAAJ,IAAAC,aAESI,EAAAL,IAAAC,KAAwB,IAAIK,EAAqBL,OACjDM,EAAAP,IAAAC,KAAmB,IAAIO,EAAgBP,OACvCQ,EAAAT,IAAAC,KAAyBS,GAAkBC,EAAAV,cAAyBW,KAAzBX,KAA0BS,IACrEG,EAAAb,IAAAC,KAA2BS,GAAqBC,EAAAV,cAA2BW,KAA3BX,KAA4BS,IAG5FI,EAAAd,IAAAC,KAAkBS,IACN,WAAfA,EAAEK,WACJJ,EAAAV,KAAIe,EAAA,IAAAC,GAAqBL,KAAzBX,MACAU,EAAAV,KAAIG,EAAA,MAAiBQ,KAArBX,MACAiB,EAAAjB,KAAIG,OAAkBe,EAAS,QAQvBlB,KAAAmB,QAA6B,SAMFnB,KAAAoB,UAA0B,QAMzBpB,KAAAqB,KAAoB,KAMGrB,KAAAsB,QAAuB,KAMvBtB,KAAAuB,QAAuB,KAMvBvB,KAAAwB,QAAuB,KAMpBxB,KAAAyB,WAA0B,KAM5BzB,KAAA0B,SAAwB,KAMxD1B,KAAA2B,cAAkD,KAMlD3B,KAAA4B,aAAiD,KAMhC5B,KAAA6B,mBAAqB,iBAMtB7B,KAAA8B,kBAAoB,gBAMd9B,KAAA+B,uBAAyB,oBAMlC/B,KAAAgC,eAAiB,aAMlBhC,KAAAiC,cAAgB,YAMVjC,KAAAkC,mBAAqB,gBAM1ClC,KAAAmC,WAAY,EAMDnC,KAAAoC,WAAa,QAMXpC,KAAAqC,aAAe,KAMfrC,KAAAsC,aAAe,SAM7CtC,KAAAuC,MAAQ,aAsUtB,CAnUE,UAAIC,GACF,YAAyBtB,IAAlBR,EAAAV,KAAIC,EAAA,IACb,CAGA,kBAAIwC,GACF,OAAOzC,KAAK0C,WAA8B,UAAjB1C,KAAKmB,QAAsB,SAAW,QACjE,CAGSwB,iBAAAA,GACPC,MAAMD,oBAEN3C,KAAK6C,aAAa,UAAW,UAC7B7C,KAAK8C,iBAAiB,SAAUpC,EAAAV,KAAIa,EAAA,MACpCkC,SAASD,iBAAiB,QAASpC,EAAAV,KAAIQ,EAAA,MACvCuC,SAASD,iBAAiB,UAAWpC,EAAAV,KAAIY,EAAA,KAC3C,CAGSoC,oBAAAA,GACPJ,MAAMI,uBAENhD,KAAK0C,cAAWxB,EAChBR,EAAAV,KAAIF,EAAA,MAAuBa,KAA3BX,MAEAU,EAAAV,KAAIe,EAAA,IAAAkC,GAAgBtC,KAApBX,MAEAkD,EAAkBlD,KAAM,YACxBkD,EAAkBlD,KAAM,WAExBA,KAAKmD,oBAAoB,SAAUzC,EAAAV,KAAIa,EAAA,MACvCkC,SAASI,oBAAoB,QAASzC,EAAAV,KAAIQ,EAAA,MAC1CuC,SAASI,oBAAoB,UAAWzC,EAAAV,KAAIY,EAAA,KAC9C,CAGSwC,mBAAAA,GACPR,MAAMQ,sBAEe,SAAjBpD,KAAKmB,SACPT,EAAAV,KAAIe,EAAA,IAAAsC,GAA0B1C,KAA9BX,KAEJ,CAQA,UAAMsD,CAAKC,EAAsBC,GAC3B9C,EAAAV,KAAIC,EAAA,MAAaS,EAAAV,KAAIC,EAAA,OAAcsD,GACrCvD,KAAKyD,OAGqB,UAAxBzD,KAAKyC,iBACP/B,EAAAV,KAAII,EAAA,KAAuBsD,OAC3BhD,EAAAV,KAAIM,EAAA,KAAkBoD,QAGxB,MAAMC,EAAW3D,KAAK4D,UAEtBD,EAAStC,KAAOrB,KAAKqB,KACrBsC,EAASlC,WAAazB,KAAKyB,WAC3BkC,EAASjC,SAAW1B,KAAK0B,SAGzBiC,EAASE,cAAc,aACnBF,EAASG,uBACLH,EAASI,eAGjB9C,EAAAjB,KAAIC,EAAYsD,EAAO,KACvB7C,EAAAV,KAAIC,EAAA,KAAU+D,aAAe,OAC7B/C,EAAAjB,KAAIE,EAAWsD,EAAM,WAEf9C,EAAAV,KAAIe,EAAA,IAAAkD,GAAgBtD,KAApBX,MACNA,KAAKkE,oBAEClE,KAAK4D,UAAUO,iBACvB,CAMAV,IAAAA,CAAKW,GAAwB,GACC,UAAxBpE,KAAKyC,iBACP/B,EAAAV,KAAII,EAAA,KAAuBiE,SAC3B3D,EAAAV,KAAIM,EAAA,KAAkB+D,UAGxBrE,KAAKsE,cAED5D,EAAAV,KAAIC,EAAA,OACNS,EAAAV,KAAIC,EAAA,KAAU+D,aAAe,QACzBI,GACF1D,EAAAV,KAAIC,EAAA,KAAUsE,QAEhBtD,EAAAjB,KAAIC,OAAYiB,EAAS,KAE7B,CAQA,YAAMsD,CAAOjB,EAAsBC,GAC7B9C,EAAAV,KAAIC,EAAA,KACND,KAAKyD,aAECzD,KAAKsD,KAAKC,EAASC,EAE7B,CAGmBiB,MAAAA,GACjB,OAAOC,CAAI,mBACPhE,EAAAV,KAAIe,EAAA,IAAA4D,GAAchE,KAAlBX,mDAGcA,KAAKoB,wBACPwD,EAAU5E,KAAKsB,SAASuD,6BACxBD,EAAU5E,KAAKuB,SAASsD,6BACxBD,EAAU5E,KAAKwB,SAASqD,4BACzBnE,EAAAV,KAAIe,EAAA,IAAA+D,2CAGb9E,KAAKmC,UACHuC,CAAI,uBAAuBhE,EAAAV,KAAIe,EAAA,IAAAgE,OAAuB/E,KAAKoC,0BAC3D4C,qEAEkBtE,EAAAV,KAAIe,EAAA,IAAAkE,OAAyBjF,KAAKsC,gDAClC5B,EAAAV,KAAIe,EAAA,IAAAmE,OAAyBlF,KAAKqC,kDAG9D,CAsBmB8C,UAAAA,CAAWC,GAC5BxC,MAAMuC,WAAWC,GAEb,CAAC,OAAQ,aAAc,YAAYC,KAAMC,GAAMF,EAAkBG,IAAgCD,KACnG5E,EAAAV,KAAIe,EAAA,IAAAC,GAAqBL,KAAzBX,MAEEoF,EAAkBG,IAAI,eAAiBvF,KAAKyB,aAAe2D,EAAkBG,IAAI,UACnFvF,KAAKqB,KAAO,IAAImE,KAAKxF,KAAKyB,aAExB2D,EAAkBG,IAAI,aAAevF,KAAK0B,WAAa0D,EAAkBG,IAAI,UAC/EvF,KAAKqB,KAAO,IAAImE,KAAKxF,KAAK0B,WAExB0D,EAAkBG,IAAI,aACxB7E,EAAAV,KAAIF,EAAA,MAAuBa,KAA3BX,MAEqB,SAAjBA,KAAKmB,QACPT,EAAAV,KAAIe,EAAA,IAAAsC,GAA0B1C,KAA9BX,OAEAA,KAAK0C,cAAWxB,EAChBR,EAAAV,KAAIe,EAAA,IAAA0E,GAAe9E,KAAnBX,OAGN,CAGmB0F,OAAAA,CAAQC,GACzB/C,MAAM8C,QAAQC,IAEVA,EAAmBJ,IAAI,iBAAmBI,EAAmBJ,IAAI,oBACnEvF,KAAK4D,UAAUhC,aAAe5B,KAAK4B,aACnC5B,KAAK4D,UAAUjC,cAAgB3B,KAAK2B,cAExC,4JAlDE,GAA4B,WAAxB3B,KAAKyC,eAA6B,OAAOuC,EAE7C,MAAMY,EAAe5F,KAAK6F,OAAS7F,KAAKqB,KAExC,OAAOqD,CAAI,gCAAgC1E,KAAKuC,oCAE1CqD,EACE,IAAIE,KAAKC,eAAeC,UAAUC,SAAU,CAC1CC,QAAS,QACTC,MAAO,QACPC,IAAK,YACJC,OAAOT,GACV,uCAGV,aAsCqBnF,GACdA,EAAE6F,eAAejB,KAAMC,GAAMA,aAAa/F,GAAwB+F,IAAM5E,EAAAV,KAAIC,EAAA,MAAaqF,IAAM5E,EAAAV,KAAIE,EAAA,OACtGF,KAAKyD,MAET,eAIEzD,KAAK6F,MAAQ7F,KAAK4D,UAAUvC,KAC5BrB,KAAKuG,YAAcvG,KAAK4D,UAAUnC,WAClCzB,KAAKwG,UAAYxG,KAAK4D,UAAUlC,QAClC,eAIE1B,KAAKqB,KAAO,KACZrB,KAAKyB,WAAa,KAClBzB,KAAK0B,SAAW,KAEhB1B,KAAKyD,MAAK,GACVzD,KAAKyG,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,IACpD,eAIE3G,KAAKyD,MAAK,EACZ,eAIEzD,KAAKqB,KAAOrB,KAAK6F,OAAS7F,KAAKqB,KAC/BrB,KAAKyB,gBAAkCP,IAArBlB,KAAKuG,YAA4BvG,KAAKyB,WAAazB,KAAKuG,YAC1EvG,KAAK0B,cAA8BR,IAAnBlB,KAAKwG,UAA0BxG,KAAK0B,SAAW1B,KAAKwG,UACpExG,KAAKyD,MAAK,GACVzD,KAAKyG,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,IACpD,aAGuBlG,IACjBT,KAAKwC,QAAkC,UAAxBxC,KAAKyC,gBAAwC,WAAVhC,EAAEmG,KAAqBnG,EAAEoG,UAAapG,EAAEqG,UAC5FrG,EAAEsG,iBACF/G,KAAKyD,MAAK,GAEd,eAIExC,EAAAjB,KAAIF,EAAwBkH,EAAsBC,QAAQ,CAACC,EAAWC,OAAQD,EAAWE,OAASC,IAChGrH,KAAK0C,SAAW2E,EAAQC,IAAIJ,EAAWC,SAAWE,EAAQC,IAAIJ,EAAWE,OAAS,QAAU,SAC5F1G,EAAAV,KAAIe,EAAA,IAAA0E,GAAe9E,KAAnBX,YAEJ,eAIE,OAAQA,KAAKyC,gBACX,IAAK,SACHzC,KAAKuH,UAAY,KACjBrE,EAAkBlD,KAAM,WACxBwH,EAAexH,KAAM,YACrBU,EAAAV,KAAII,EAAA,KAAuBiE,SAC3B3D,EAAAV,KAAIM,EAAA,KAAkB+D,SACtB,MAEF,IAAK,QACHrE,KAAKuH,UAAY,OACjBrE,EAAkBlD,KAAM,YACxBwH,EAAexH,KAAM,WACjBA,KAAKwC,SACP9B,EAAAV,KAAII,EAAA,KAAuBsD,OAC3BhD,EAAAV,KAAIM,EAAA,KAAkBoD,QAMxB1D,KAAKwC,QACP9B,EAAAV,KAAIe,EAAA,IAAAkD,GAAgBtD,KAApBX,KAEJ,IAGAyH,iBAC8B,WAAxBzH,KAAKyC,gBAA+B/B,EAAAV,KAAIC,EAAA,MAC1CS,EAAAV,KAAIG,EAAA,MAAiBQ,KAArBX,MACAiB,EAAAjB,KAAIG,QAAwBuH,EAC1B1H,KACAU,EAAAV,KAAIE,EAAA,MAAYQ,EAAAV,YAChB,CACE2H,SAAU,eACVC,QAAQ,EACRC,MAAM,EACNC,MAAO,QAET,CAACxC,EAAGyC,EAAGJ,KACLK,EAAehI,KAAM,QAAS2H,EAASM,SAAS,QAChDD,EAAehI,KAAM,WAAY2H,EAASM,SAAS,WAEjB,QAA9BC,EAAkBC,SACpBnI,KAAKoI,MAAMC,MAAWC,OAAOC,WAAajD,EAAItF,KAAKwI,YAAhC,KACnBxI,KAAKoI,MAAMK,KAAO,KAElBzI,KAAKoI,MAAMK,KAAO,GAAGnD,MACrBtF,KAAKoI,MAAMC,MAAQ,IAGrBrI,KAAKoI,MAAMM,IAAM,GAAGX,cAIxBrH,EAAAV,KAAIe,EAAA,IAAAkC,GAAgBtC,KAApBX,KAEJ,eAIEU,EAAAV,KAAIG,EAAA,MAAiBQ,KAArBX,MACAiB,EAAAjB,KAAIG,OAAkBe,EAAS,KAC/BlB,KAAKoI,MAAMK,KAAO,GAClBzI,KAAKoI,MAAMC,MAAQ,GACnBrI,KAAKoI,MAAMM,IAAM,EACnB,eAIE1I,KAAK6F,MAAQ7F,KAAKuG,YAAcvG,KAAKwG,eAAYtF,CACnD,EAloBgB5B,EAAAqJ,OAAyBC,CAAG,yQAOkBC,EAAYC,MAAMC,4EACpBF,EAAYG,UAAUC,sIAMxCJ,EAAYG,UAAUE,2CAC1BL,EAAYM,MAAMC,OAAOC,yEAGPR,EAAYC,MAAMQ,iFAGlET,EAAYU,UAAUC,SAASC,SAASC,MAAMC,8EAI9Cd,EAAYU,UAAUC,SAASC,SAASC,MAAME,gFAI9Cf,EAAYU,UAAUC,SAASC,SAASC,MAAMG,gFAI9ChB,EAAYU,UAAUC,SAASC,SAASC,MAAMI,4KAOSjB,EAAYC,MAAMQ,wFAGzET,EAAYU,UAAUC,SAASjH,MAAMmH,MAAMC,qFAI3Cd,EAAYU,UAAUC,SAASjH,MAAMmH,MAAME,uFAI3Cf,EAAYU,UAAUC,SAASjH,MAAMmH,MAAMG,uFAI3ChB,EAAYU,UAAUC,SAASjH,MAAMmH,MAAMI,uTAelBjB,EAAYC,MAAMiB,4WAgBkBlB,EAAYC,MAAMC,kFACrBF,EAAYM,MAAMC,OAAOM,mLAOvBb,EAAYC,MAAMkB,qFACrBnB,EAAYM,MAAMC,OAAOa,sFAGxEC,EACZ,WAAWrB,EAAYsB,OAAOC,SAASC,UAAUxB,EAAYsB,OAAOG,OAAOd,iCAC/DX,EAAYsB,OAAOC,SAASC,UAAUxB,EAAYsB,OAAOG,OAAOd,8BAClEX,EAAYsB,OAAOC,SAASC,UAAUxB,EAAYsB,OAAOG,OAAOd,6CAChEX,EAAYsB,OAAOC,SAASC,UAAUxB,EAAYsB,OAAOG,OAAOd,8VAePX,EAAYC,MAAMyB,yIAIzEL,EACZ,oBAAoBrB,EAAYsB,OAAOC,SAASI,UAAU3B,EAAYsB,OAAOG,OAAOd,+BAC1EX,EAAYsB,OAAOC,SAASI,UAAU3B,EAAYsB,OAAOG,OAAOd,gDAC7DX,EAAYsB,OAAOC,SAASI,UAAU3B,EAAYsB,OAAOG,OAAOd,oKAM7CX,EAAYC,MAAMyB,2EAGtCL,EACZ,oBAAoBrB,EAAYsB,OAAOC,SAASK,SAAS5B,EAAYsB,OAAOG,OAAOd,+BACzEX,EAAYsB,OAAOC,SAASK,SAAS5B,EAAYsB,OAAOG,OAAOd,gDAC5DX,EAAYsB,OAAOC,SAASK,SAAS5B,EAAYsB,OAAOG,OAAOd,yWAcPX,EAAYC,MAAMyB,mQAiB5DG,EAAA,CAAhBC,KAAoCrL,EAAAsL,UAAA,gBACpBF,EAAA,CAAhBC,KAA0CrL,EAAAsL,UAAA,sBAC1BF,EAAA,CAAhBC,KAAwCrL,EAAAsL,UAAA,oBAEDF,EAAA,CAAvCG,EAAM,iBAAgEvL,EAAAsL,UAAA,oBACtDF,EAAA,CAAhBC,KAA8DrL,EAAAsL,UAAA,mBAyBnEF,EAAA,CAAXI,KAAiDxL,EAAAsL,UAAA,kBAMXF,EAAA,CAAtCI,EAAS,CAAEC,UAAW,gBAAkDzL,EAAAsL,UAAA,iBAAA,GAMjCF,EAAA,CAAvCI,EAAS,CAAEE,UAAWC,KAA0C3L,EAAAsL,UAAA,YAAA,GAMFF,EAAA,CAA9DI,EAAS,CAAEC,UAAW,WAAYC,UAAWC,KAA6C3L,EAAAsL,UAAA,eAAA,GAM5BF,EAAA,CAA9DI,EAAS,CAAEC,UAAW,WAAYC,UAAWC,KAA6C3L,EAAAsL,UAAA,eAAA,GAM5BF,EAAA,CAA9DI,EAAS,CAAEC,UAAW,WAAYC,UAAWC,KAA6C3L,EAAAsL,UAAA,eAAA,GAMzBF,EAAA,CAAjEI,EAAS,CAAEC,UAAW,cAAeC,UAAWC,KAAgD3L,EAAAsL,UAAA,kBAAA,GAMjCF,EAAA,CAA/DI,EAAS,CAAEC,UAAW,YAAaC,UAAWC,KAA8C3L,EAAAsL,UAAA,gBAAA,GAM7DF,EAAA,CAA/BI,EAAS,CAAEC,WAAW,KAAgEzL,EAAAsL,UAAA,qBAAA,GAMvDF,EAAA,CAA/BI,EAAS,CAAEC,WAAW,KAA+DzL,EAAAsL,UAAA,oBAAA,GAMrCF,EAAA,CAAhDI,EAAS,CAAEC,UAAW,0BAAgEzL,EAAAsL,UAAA,0BAAA,GAMvCF,EAAA,CAA/CI,EAAS,CAAEC,UAAW,yBAA6DzL,EAAAsL,UAAA,yBAAA,GAM9BF,EAAA,CAArDI,EAAS,CAAEC,UAAW,+BAA4EzL,EAAAsL,UAAA,8BAAA,GAMtDF,EAAA,CAA5CI,EAAS,CAAEC,UAAW,sBAAoDzL,EAAAsL,UAAA,sBAAA,GAM/BF,EAAA,CAA3CI,EAAS,CAAEC,UAAW,qBAAiDzL,EAAAsL,UAAA,qBAAA,GAMtBF,EAAA,CAAjDI,EAAS,CAAEC,UAAW,2BAAgEzL,EAAAsL,UAAA,0BAAA,GAM1DF,EAAA,CAA5BI,EAAS,CAAEI,KAAMC,WAA6B7L,EAAAsL,UAAA,iBAAA,GAMPF,EAAA,CAAvCI,EAAS,CAAEC,UAAW,iBAAsCzL,EAAAsL,UAAA,kBAAA,GAMnBF,EAAA,CAAzCI,EAAS,CAAEC,UAAW,mBAAuCzL,EAAAsL,UAAA,oBAAA,GAMpBF,EAAA,CAAzCI,EAAS,CAAEC,UAAW,mBAA2CzL,EAAAsL,UAAA,oBAAA,GAMtDF,EAAA,CAAXI,KAAiCxL,EAAAsL,UAAA,gBAjUvBtL,EAAoBC,EAAAmL,EAAA,CADhCU,EAAc,mBACF9L,GCzFN,IAAM+L,GAAN,cAAyCC,EAAQC,IAE7C5I,iBAAAA,GACPC,MAAMD,oBAEF3C,KAAKwL,gBACPxL,KAAKwL,cAAcC,aAAe,SAEtC,CAGSzI,oBAAAA,GACPJ,MAAMI,uBAEFhD,KAAKwL,gBACPxL,KAAKwL,cAAcC,aAAe,KAEtC,CAGSC,QAAAA,GACH1L,KAAK2L,mBAAmBrM,GAAwBU,KAAKwL,eACvDxL,KAAK2L,QAAQnH,OAAOxE,KAAKwL,cAAexL,KAAK4L,QAA6B,wBAAqB1K,EAEnG,GAxBWmK,GAA0BX,EAAA,CADtCU,EAAc,0BACFC"}
+{"version":3,"file":"datepicker.min.js","sources":["../../src/datepicker/DatepickerElement.ts","../../src/datepicker/DatepickerToggleElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  customElement,\r\n  AttachInternals,\r\n  dateConverter,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  Role,\r\n  ScrollLockController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n  InertController,\r\n  ReconnectedCallback,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\nimport { M3eCalendarElement, CalendarView } from \"@m3e/web/calendar\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/calendar\";\r\n\r\nimport { DatepickerVariant } from \"./DatepickerVariant\";\r\n\r\n/**\r\n * Presents a date picker on a temporary surface.\r\n *\r\n * @description\r\n * The `m3e-datepicker` component provides a date‑selection experience\r\n * consistent with Material 3 guidance for layout, motion, and accessibility.\r\n * It displays a temporary surface that allows users to select a date or date\r\n * range using calendar-based views. The picker supports month, year, and\r\n * multi‑year views, enabling users to navigate across time efficiently.\r\n *\r\n * While open, the picker uses a focused selection flow. Users review their\r\n * choice and complete the interaction through confirm, dismiss, or clear\r\n * actions, ensuring intentional updates to the field or control that invoked it.\r\n *\r\n * It accepts and emits plain `Date` values, allowing applications to apply their\r\n * own formatting, parsing, and localization.\r\n *\r\n * @tag m3e-datepicker\r\n *\r\n * @attr variant - The appearance variant of the picker.\r\n * @attr clearable - Whether the user can clear the selected date and close the picker.\r\n * @attr date - The selected date.\r\n * @attr max-date - The maximum date that can be selected.\r\n * @attr min-date - The minimum date that can be selected.\r\n * @attr range - Whether a range of dates can be selected.\r\n * @attr range-end - End of a date range.\r\n * @attr range-start - Start of a date range.\r\n * @attr start-at - A date specifying the period (month or year) to start the calendar in.\r\n * @attr start-view - The initial view used to select a date.\r\n * @attr previous-month-label - The accessible label given to the button used to move to the previous month.\r\n * @attr next-month-label - The accessible label given to the button used to move to the next month.\r\n * @attr previous-year-label - The accessible label given to the button used to move to the previous year.\r\n * @attr next-year-label - The accessible label given to the button used to move to the next year.\r\n * @attr previous-multi-year-label - The accessible label given to the button used to move to the previous 24 years.\r\n * @attr next-multi-year-label - The accessible label given to the button used to move to the next 24 years.\r\n * @attr clear-label - The label given to the button used clear the selected date and close the picker.\r\n * @attr confirm-label - The label given to the button used apply the selected date and close the picker.\r\n * @attr dismiss-label - The label given to the button used discard the selected date and close the picker.\r\n * @attr label - The label given to the the picker.\r\n *\r\n * @fires change - Dispatched when the selected date changes.\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-datepicker-container-padding-block - Block‑axis padding of the date picker container.\r\n * @cssprop --m3e-datepicker-container-padding-inline - Inline‑axis padding of the date picker container.\r\n * @cssprop --m3e-datepicker-container-color - Background color of the standard container surface.\r\n * @cssprop --m3e-datepicker-container-elevation - Elevation shadow applied to the container surface.\r\n * @cssprop --m3e-datepicker-modal-headline-color - Color used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-font-size - Font size used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-font-weight - Font weight used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-line-height - Line height used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-headline-tracking - Letter spacing used for the modal headline text.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-color - Color used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-font-size - Font size used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-font-weight - Font weight used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-line-height - Line height used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-modal-supporting-text-tracking - Letter spacing used for supporting text in modal mode.\r\n * @cssprop --m3e-datepicker-actions-padding-inline - Inline‑axis padding of the action row.\r\n * @cssprop --m3e-datepicker-docked-container-color - Background color of the container in docked mode.\r\n * @cssprop --m3e-datepicker-docked-container-shape - Corner radius of the container in docked mode.\r\n * @cssprop --m3e-datepicker-modal-container-color - Background color of the container in modal mode.\r\n * @cssprop --m3e-datepicker-modal-container-shape - Corner radius of the container in modal mode.\r\n * @cssprop --m3e-divider-thickness - Thickness of divider elements within the picker.\r\n * @cssprop --m3e-divider-color - Color of divider rules within the picker.\r\n * @cssprop --m3e-dialog-scrim-color - Base color used for the modal scrim behind the picker.\r\n * @cssprop --m3e-dialog-scrim-opacity - Opacity applied to the scrim color in modal mode.\r\n */\r\n@customElement(\"m3e-datepicker\")\r\nexport class M3eDatepickerElement extends SuppressInitialAnimation(\r\n  ReconnectedCallback(AttachInternals(Role(LitElement, \"dialog\"))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      flex-direction: column;\r\n      margin: unset;\r\n      border: unset;\r\n      padding-block: var(--m3e-datepicker-container-padding-block, 0.75rem);\r\n      padding-inline: var(--m3e-datepicker-container-padding-inline, 0.25rem);\r\n      background-color: var(--m3e-datepicker-container-color, ${DesignToken.color.surfaceContainer});\r\n      box-shadow: var(--m3e-datepicker-container-elevation, ${DesignToken.elevation.level3});\r\n      opacity: 0;\r\n      display: none;\r\n    }\r\n    .calendar {\r\n      --m3e-calendar-container-color: transparent;\r\n      --m3e-calendar-container-elevation: ${DesignToken.elevation.level0};\r\n      --m3e-calendar-container-shape: ${DesignToken.shape.corner.none};\r\n    }\r\n    .headline {\r\n      color: var(--m3e-datepicker-modal-headline-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(\r\n        --m3e-datepicker-modal-headline-font-size,\r\n        ${DesignToken.typescale.standard.headline.large.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-datepicker-modal-headline-font-weight,\r\n        ${DesignToken.typescale.standard.headline.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-datepicker-modal-headline-line-height,\r\n        ${DesignToken.typescale.standard.headline.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-datepicker-modal-headline-tracking,\r\n        ${DesignToken.typescale.standard.headline.large.tracking}\r\n      );\r\n      margin-block-start: 2.25rem;\r\n      margin-block-end: 0.75rem;\r\n      margin-inline: 1.5rem;\r\n    }\r\n    .supporting-text {\r\n      color: var(--m3e-datepicker-modal-supporting-text-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(\r\n        --m3e-datepicker-modal-supporting-text-font-size,\r\n        ${DesignToken.typescale.standard.label.large.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-datepicker-modal-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-datepicker-modal-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-datepicker-modal-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.label.large.tracking}\r\n      );\r\n      margin-block-start: 1rem;\r\n      margin-inline: 1.5rem;\r\n    }\r\n    .divider {\r\n      height: var(--m3e-divider-thickness, 1px);\r\n      width: 100%;\r\n      position: relative;\r\n    }\r\n    .divider::before {\r\n      content: \"\";\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      border-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n      height: inherit;\r\n      left: -0.25rem;\r\n      right: -0.25rem;\r\n    }\r\n    .actions {\r\n      display: flex;\r\n      align-items: center;\r\n      column-gap: 0.5rem;\r\n      padding-inline: var(--m3e-datepicker-actions-padding-inline, 0.5rem);\r\n    }\r\n    .spacer {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host(:is(:state(--docked), :--docked)) {\r\n      position: absolute;\r\n      background-color: var(--m3e-datepicker-docked-container-color, ${DesignToken.color.surfaceContainer});\r\n      border-radius: var(--m3e-datepicker-docked-container-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host(:is(:state(--modal), :--modal)) {\r\n      position: fixed;\r\n      inset: 0;\r\n      margin: auto;\r\n      transform-origin: top;\r\n      background-color: var(--m3e-datepicker-modal-container-color, ${DesignToken.color.surfaceContainerHigh});\r\n      border-radius: var(--m3e-datepicker-modal-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},\r\n        overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host {\r\n      transform: scaleY(0.8);\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleY(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host(:is(:state(--docked), :--docked))::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:is(:state(--modal), :--modal))::backdrop {\r\n      background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      margin-inline-end: -20px;\r\n    }\r\n    :host(:is(:state(--modal), :--modal):not(:popover-open))::backdrop {\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--modal), :--modal):popover-open)::backdrop {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%),\r\n        transparent\r\n      );\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--bottom), :--bottom)) {\r\n      transform-origin: top;\r\n    }\r\n    :host(:is(:state(--top), :--top)) {\r\n      transform-origin: bottom;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        transform: scaleY(0.8);\r\n      }\r\n      :host(:is(:state(--modal), :--modal):popover-open)::backdrop {\r\n        background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n        border: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @state() private _date?: Date | null;\r\n  /** @private */ @state() private _rangeStart?: Date | null;\r\n  /** @private */ @state() private _rangeEnd?: Date | null;\r\n\r\n  /** @private */ @query(\"m3e-calendar\") private readonly _calendar!: M3eCalendarElement;\r\n  /** @private */ @state() private _variant?: Exclude<DatepickerVariant, \"auto\">;\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchor?: HTMLElement;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n  /** @private */ readonly #inertController = new InertController(this);\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n  /** @private */ readonly #documentKeyDownHandler = (e: KeyboardEvent) => this.#handleDocumentKeyDown(e);\r\n\r\n  /** @private */\r\n  readonly #toggleHandler = (e: ToggleEvent) => {\r\n    if (e.newState === \"closed\") {\r\n      this.#clearSelectionState();\r\n      this.#anchorCleanup?.();\r\n      this.#anchorCleanup = undefined;\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The appearance variant of the picker.\r\n   * @default \"docked\"\r\n   */\r\n  @property() variant: DatepickerVariant = \"docked\";\r\n\r\n  /**\r\n   * The initial view used to select a date.\r\n   * @default \"month\"\r\n   */\r\n  @property({ attribute: \"start-view\" }) startView: CalendarView = \"month\";\r\n\r\n  /**\r\n   * The selected date.\r\n   * @default null\r\n   */\r\n  @property({ converter: dateConverter }) date: Date | null = null;\r\n\r\n  /**\r\n   * A date specifying the period (month or year) to start the calendar in.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"start-at\", converter: dateConverter }) startAt: Date | null = null;\r\n\r\n  /**\r\n   * The minimum date that can be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"min-date\", converter: dateConverter }) minDate: Date | null = null;\r\n\r\n  /**\r\n   * The maximum date that can be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"max-date\", converter: dateConverter }) maxDate: Date | null = null;\r\n\r\n  /**\r\n   * Whether a range of dates can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) range = false;\r\n\r\n  /**\r\n   * Start of a date range.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"range-start\", converter: dateConverter }) rangeStart: Date | null = null;\r\n\r\n  /**\r\n   * End of a date range.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"range-end\", converter: dateConverter }) rangeEnd: Date | null = null;\r\n\r\n  /**\r\n   * A function used to determine whether a date cannot be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: false }) blackoutDates: ((date: Date) => boolean) | null = null;\r\n\r\n  /**\r\n   * A function used to determine whether a date is special.\r\n   * @default null\r\n   */\r\n  @property({ attribute: false }) specialDates: ((date: Date) => boolean) | null = null;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous month.\r\n   * @default \"Previous month\"\r\n   */\r\n  @property({ attribute: \"previous-month-label\" }) previousMonthLabel = \"Previous month\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous year.\r\n   * @default \"Previous year\"\r\n   */\r\n  @property({ attribute: \"previous-year-label\" }) previousYearLabel = \"Previous year\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous 24 years.\r\n   * @default \"Previous 24 years\"\r\n   */\r\n  @property({ attribute: \"previous-multi-year-label\" }) previousMultiYearLabel = \"Previous 24 years\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next month.\r\n   * @default \"Next month\"\r\n   */\r\n  @property({ attribute: \"next-month-label\" }) nextMonthLabel = \"Next month\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next year.\r\n   * @default \"Next year\"\r\n   */\r\n  @property({ attribute: \"next-year-label\" }) nextYearLabel = \"Next year\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next 24 years.\r\n   * @default \"Next 24 years\"\r\n   */\r\n  @property({ attribute: \"next-multi-year-label\" }) nextMultiYearLabel = \"Next 24 years\";\r\n\r\n  /**\r\n   * Whether the user can clear the selected date and close the picker.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) clearable = false;\r\n\r\n  /**\r\n   * The label given to the button used clear the selected date and close the picker.\r\n   * @default \"Clear\"\r\n   */\r\n  @property({ attribute: \"clear-label\" }) clearLabel = \"Clear\";\r\n\r\n  /**\r\n   * The label given to the button used apply the selected date and close the picker.\r\n   * @default \"OK\"\r\n   */\r\n  @property({ attribute: \"confirm-label\" }) confirmLabel = \"OK\";\r\n\r\n  /**\r\n   * The label given to the button used discard the selected date and close the picker.\r\n   * @default \"Cancel\"\r\n   */\r\n  @property({ attribute: \"dismiss-label\" }) dismissLabel = \"Cancel\";\r\n\r\n  /**\r\n   * The label given to the the picker.\r\n   * @default \"Select date\"\r\n   */\r\n  @property() label = \"Select date\";\r\n\r\n  /** Whether the picker is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /** The current variant applied to the picker. */\r\n  get currentVariant(): Exclude<DatepickerVariant, \"auto\"> {\r\n    return this._variant ?? (this.variant !== \"modal\" ? \"docked\" : \"modal\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n    document.addEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._variant = undefined;\r\n    this.#breakpointUnobserve?.();\r\n\r\n    this.#clearAnchoring();\r\n\r\n    deleteCustomState(this, \"--docked\");\r\n    deleteCustomState(this, \"--modal\");\r\n\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n    document.removeEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n\r\n    if (this.variant === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Opens the picker.\r\n   * @param {HTMLElement} trigger The element that triggered the picker.\r\n   * @param {HTMLElement | undefined} anchor The element used to position the picker.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the picker is opened.\r\n   */\r\n  async show(trigger: HTMLElement, anchor?: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    if (this.currentVariant === \"modal\") {\r\n      this.#scrollLockController.lock();\r\n      this.#inertController.lock();\r\n    }\r\n\r\n    const calendar = this._calendar;\r\n\r\n    calendar.date = this.date;\r\n    calendar.rangeStart = this.rangeStart;\r\n    calendar.rangeEnd = this.rangeEnd;\r\n\r\n    // Reset the start-view\r\n    calendar.requestUpdate(\"startView\");\r\n    if (calendar.isUpdatePending) {\r\n      await calendar.updateComplete;\r\n    }\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#anchor = anchor;\r\n\r\n    await this.#updatePosition();\r\n    this.showPopover();\r\n\r\n    await this._calendar.focusActiveCell();\r\n  }\r\n\r\n  /**\r\n   * Hides the picker.\r\n   * @param {boolean} [restoreFocus=false] Whether to restore focus to the picker's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    if (this.currentVariant === \"modal\") {\r\n      this.#scrollLockController.unlock();\r\n      this.#inertController.unlock();\r\n    }\r\n\r\n    this.hidePopover();\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n      this.#trigger = undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Toggles the picker.\r\n   * @param {HTMLElement} trigger The element that triggered the picker.\r\n   * @param {HTMLElement | undefined} anchor The element used to position the picker.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the picker is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement, anchor?: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger, anchor);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-trap>\r\n      ${this.#renderHeader()}\r\n      <m3e-calendar\r\n        class=\"calendar\"\r\n        start-view=\"${this.startView}\"\r\n        start-at=\"${ifDefined(this.startAt?.toISOString())}\"\r\n        min-date=\"${ifDefined(this.minDate?.toISOString())}\"\r\n        max-date=\"${ifDefined(this.maxDate?.toISOString())}\"\r\n        @change=\"${this.#handleCalendarChange}\"\r\n      ></m3e-calendar>\r\n      <div class=\"actions\">\r\n        ${this.clearable\r\n          ? html`<m3e-button @click=\"${this.#handleClearClick}\">${this.clearLabel}</m3e-button>`\r\n          : nothing}\r\n        <div class=\"spacer\" aria-hidden=\"true\"></div>\r\n        <m3e-button @click=\"${this.#handleDismissClick}\">${this.dismissLabel}</m3e-button>\r\n        <m3e-button @click=\"${this.#handleConfirmClick}\">${this.confirmLabel}</m3e-button>\r\n      </div>\r\n    </m3e-focus-trap>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  #renderHeader(): unknown {\r\n    if (this.currentVariant === \"docked\") return nothing;\r\n\r\n    const rangeStart = this._rangeStart ?? this.rangeStart;\r\n    const rangeEnd = this._rangeStart ? this._rangeEnd : (this._rangeEnd ?? this.rangeEnd);\r\n    const selectedDate = this._date ?? this.date;\r\n\r\n    return html`<div class=\"supporting-text\">${this.label}</div>\r\n      ${rangeStart\r\n        ? html`<div class=\"headline\">\r\n            ${new Intl.DateTimeFormat(navigator.language, {\r\n              month: \"short\",\r\n              day: \"numeric\",\r\n            }).format(rangeStart) +\r\n            \" – \" +\r\n            (rangeEnd\r\n              ? new Intl.DateTimeFormat(navigator.language, {\r\n                  month: \"short\",\r\n                  day: \"numeric\",\r\n                }).format(rangeEnd)\r\n              : \"\")}\r\n          </div>`\r\n        : html`<div class=\"headline\">\r\n            ${selectedDate\r\n              ? new Intl.DateTimeFormat(navigator.language, {\r\n                  weekday: \"short\",\r\n                  month: \"short\",\r\n                  day: \"numeric\",\r\n                }).format(selectedDate)\r\n              : \"––\"}\r\n          </div>`}\r\n      <div class=\"divider\"></div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if ([\"date\", \"rangeStart\", \"rangeEnd\"].some((x) => changedProperties.has(<keyof M3eDatepickerElement>x))) {\r\n      this.#clearSelectionState();\r\n    }\r\n    if (changedProperties.has(\"rangeStart\") && this.rangeStart) {\r\n      this.range = true;\r\n    }\r\n    if (changedProperties.has(\"rangeStart\") && this.rangeStart && !changedProperties.has(\"date\")) {\r\n      this.date = new Date(this.rangeStart);\r\n    }\r\n    if (changedProperties.has(\"rangeEnd\") && this.rangeEnd && !changedProperties.has(\"date\")) {\r\n      this.date = new Date(this.rangeEnd);\r\n    }\r\n    if (changedProperties.has(\"variant\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.variant === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this._variant = undefined;\r\n        this.#updateVariant();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"specialDates\") || _changedProperties.has(\"blackoutDates\")) {\r\n      this._calendar.specialDates = this.specialDates;\r\n      this._calendar.blackoutDates = this.blackoutDates;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!e.composedPath().some((x) => x instanceof M3eDatepickerElement || x === this.#trigger || x === this.#anchor)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleCalendarChange(): void {\r\n    this._date = this._calendar.date;\r\n    this._rangeStart = this._calendar.rangeStart;\r\n    this._rangeEnd = this._calendar.rangeEnd;\r\n\r\n    if (this.range && !this._rangeStart && this._date) {\r\n      this._rangeStart = new Date(this._date);\r\n      this._calendar.rangeStart = this._rangeStart;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClearClick(): void {\r\n    this.date = null;\r\n    this.rangeStart = null;\r\n    this.rangeEnd = null;\r\n\r\n    this.hide(true);\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleDismissClick(): void {\r\n    this.hide(true);\r\n  }\r\n\r\n  /** @private */\r\n  #handleConfirmClick(): void {\r\n    this.date = this._date ?? this.date;\r\n    this.rangeStart = this._rangeStart === undefined ? this.rangeStart : this._rangeStart;\r\n    this.rangeEnd = this._rangeEnd === undefined ? this.rangeEnd : this._rangeEnd;\r\n    this.hide(true);\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentKeyDown(e: KeyboardEvent): void {\r\n    if (this.isOpen && this.currentVariant === \"modal\" && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      this.hide(true);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) => {\r\n      this._variant = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? \"modal\" : \"docked\";\r\n      this.#updateVariant();\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #updateVariant(): void {\r\n    switch (this.currentVariant) {\r\n      case \"docked\":\r\n        this.ariaModal = null;\r\n        deleteCustomState(this, \"--modal\");\r\n        addCustomState(this, \"--docked\");\r\n        this.#scrollLockController.unlock();\r\n        this.#inertController.unlock();\r\n        break;\r\n\r\n      case \"modal\":\r\n        this.ariaModal = \"true\";\r\n        deleteCustomState(this, \"--docked\");\r\n        addCustomState(this, \"--modal\");\r\n        if (this.isOpen) {\r\n          this.#scrollLockController.lock();\r\n          this.#inertController.lock();\r\n        }\r\n\r\n        break;\r\n    }\r\n\r\n    if (this.isOpen) {\r\n      this.#updatePosition();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #updatePosition(): Promise<void> {\r\n    if (this.currentVariant === \"docked\" && this.#trigger) {\r\n      this.#anchorCleanup?.();\r\n      this.#anchorCleanup = await positionAnchor(\r\n        this,\r\n        this.#anchor ?? this.#trigger,\r\n        {\r\n          position: \"bottom-start\",\r\n          inline: true,\r\n          flip: true,\r\n          shift: \"both\",\r\n        },\r\n        (x, y, position) => {\r\n          setCustomState(this, \"--top\", position.includes(\"top\"));\r\n          setCustomState(this, \"--bottom\", position.includes(\"bottom\"));\r\n\r\n          if (M3eDirectionality.current === \"rtl\") {\r\n            this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n            this.style.left = \"\";\r\n          } else {\r\n            this.style.left = `${x}px`;\r\n            this.style.right = \"\";\r\n          }\r\n\r\n          this.style.top = `${y}px`;\r\n        },\r\n      );\r\n    } else {\r\n      this.#clearAnchoring();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #clearAnchoring(): void {\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n    this.style.left = \"\";\r\n    this.style.right = \"\";\r\n    this.style.top = \"\";\r\n  }\r\n\r\n  /** @private */\r\n  #clearSelectionState(): void {\r\n    this._date = this._rangeStart = this._rangeEnd = undefined;\r\n  }\r\n}\r\n\r\ninterface M3eDatepickerElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eDatepickerElement {\r\n  addEventListener<K extends keyof M3eDatepickerElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDatepickerElement, ev: M3eDatepickerElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eDatepickerElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDatepickerElement, ev: M3eDatepickerElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-datepicker\": M3eDatepickerElement;\r\n  }\r\n}\r\n","import { customElement, ActionElementBase, HtmlFor } from \"@m3e/web/core\";\r\nimport type { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\nimport { M3eDatepickerElement } from \"./DatepickerElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle a datepicker.\r\n * @tag m3e-datepicker-toggle\r\n */\r\n@customElement(\"m3e-datepicker-toggle\")\r\nexport class M3eDatepickerToggleElement extends HtmlFor(ActionElementBase) {\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = \"dialog\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.control instanceof M3eDatepickerElement && this.parentElement) {\r\n      this.control.toggle(this.parentElement, this.closest<M3eFormFieldElement>(\"m3e-form-field\") ?? undefined);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-datepicker-toggle\": M3eDatepickerToggleElement;\r\n  }\r\n}\r\n"],"names":["M3eDatepickerElement","M3eDatepickerElement_1","SuppressInitialAnimation","ReconnectedCallback","AttachInternals","Role","LitElement","constructor","_M3eDatepickerElement_breakpointUnobserve","set","this","_M3eDatepickerElement_trigger","_M3eDatepickerElement_anchor","_M3eDatepickerElement_anchorCleanup","_M3eDatepickerElement_scrollLockController","ScrollLockController","_M3eDatepickerElement_inertController","InertController","_M3eDatepickerElement_documentClickHandler","e","__classPrivateFieldGet","call","_M3eDatepickerElement_documentKeyDownHandler","_M3eDatepickerElement_toggleHandler","newState","_M3eDatepickerElement_instances","_M3eDatepickerElement_clearSelectionState","__classPrivateFieldSet","undefined","variant","startView","date","startAt","minDate","maxDate","range","rangeStart","rangeEnd","blackoutDates","specialDates","previousMonthLabel","previousYearLabel","previousMultiYearLabel","nextMonthLabel","nextYearLabel","nextMultiYearLabel","clearable","clearLabel","confirmLabel","dismissLabel","label","isOpen","currentVariant","_variant","connectedCallback","super","setAttribute","addEventListener","document","disconnectedCallback","_M3eDatepickerElement_clearAnchoring","deleteCustomState","removeEventListener","reconnectedCallback","_M3eDatepickerElement_initBreakpointMonitoring","show","trigger","anchor","hide","lock","calendar","_calendar","requestUpdate","isUpdatePending","updateComplete","ariaExpanded","_M3eDatepickerElement_updatePosition","showPopover","focusActiveCell","restoreFocus","unlock","hidePopover","focus","toggle","render","html","_M3eDatepickerElement_renderHeader","ifDefined","toISOString","_M3eDatepickerElement_handleCalendarChange","_M3eDatepickerElement_handleClearClick","nothing","_M3eDatepickerElement_handleDismissClick","_M3eDatepickerElement_handleConfirmClick","willUpdate","changedProperties","some","x","has","Date","_M3eDatepickerElement_updateVariant","updated","_changedProperties","_rangeStart","_rangeEnd","selectedDate","_date","Intl","DateTimeFormat","navigator","language","month","day","format","weekday","composedPath","dispatchEvent","Event","bubbles","key","shiftKey","ctrlKey","preventDefault","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","get","ariaModal","addCustomState","async","positionAnchor","position","inline","flip","shift","y","setCustomState","includes","M3eDirectionality","current","style","right","window","innerWidth","clientWidth","left","top","styles","css","DesignToken","color","surfaceContainer","elevation","level3","level0","shape","corner","none","onSurfaceVariant","typescale","standard","headline","large","fontSize","fontWeight","lineHeight","tracking","outlineVariant","surfaceContainerHigh","extraLarge","unsafeCSS","motion","duration","short2","easing","scrim","short3","long2","__decorate","state","prototype","query","property","attribute","converter","dateConverter","type","Boolean","customElement","M3eDatepickerToggleElement","HtmlFor","ActionElementBase","parentElement","ariaHasPopup","_onClick","control","closest"],"mappings":"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"}

package/dist/dialog.js

@@ -76,11 +76,11 @@ var M3eDialogElement_1;
  * @attr no-focus-trap - Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.
  * @attr open - Whether the dialog is open.
  *
- * @fires opening - Emitted when the dialog begins to open.
- * @fires opened - Emitted when the dialog has opened.
- * @fires cancel - Emitted when the dialog is cancelled.
- * @fires closing - Emitted when the dialog begins to close.
- * @fires closed - Emitted when the dialog has closed.
+ * @fires opening - Dispatched when the dialog begins to open.
+ * @fires opened - Dispatched when the dialog has opened.
+ * @fires cancel - Dispatched when the dialog is cancelled.
+ * @fires closing - Dispatched when the dialog begins to close.
+ * @fires closed - Dispatched when the dialog has closed.
  *
  * @cssprop --m3e-dialog-shape - Border radius of the dialog container.
  * @cssprop --m3e-dialog-min-width - Minimum width of the dialog.

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../src/dialog/DialogActionElement.ts","../../src/dialog/DialogElement.ts","../../src/dialog/DialogTriggerElement.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\r\n\r\nimport { ActionElementBase, customElement } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to close a parenting dialog.\r\n * @tag m3e-dialog-action\r\n *\r\n * @slot - Renders the content of the action.\r\n *\r\n * @attr return-value - The value to return from the dialog.\r\n */\r\n@customElement(\"m3e-dialog-action\")\r\nexport class M3eDialogActionElement extends ActionElementBase {\r\n  /**\r\n   * The value to return from the dialog.\r\n   * @default \"\"\r\n   */\r\n  @property({ attribute: \"return-value\" }) returnValue = \"\";\r\n\r\n  /** @inheritdoc */\r\n  protected override _onClick(): void {\r\n    this.closest(\"m3e-dialog\")?.hide(this.returnValue);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog-action\": M3eDialogActionElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, 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  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  focusWhenReady,\r\n  ScrollLockController,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * A dialog that provides important prompts in a user flow.\r\n *\r\n * @description\r\n * The `m3e-dialog` component presents important prompts, alerts, and actions in user flows.\r\n * Designed according to Material 3 principles, it supports custom header, content, and\r\n * close icon slots, ARIA accessibility, focus management, and theming via CSS custom properties.\r\n *\r\n * @example\r\n * ```html\r\n * <m3e-button variant=\"filled\">\r\n *   <m3e-dialog-trigger for=\"dlg\">Open Dialog</m3e-dialog-trigger>\r\n * </m3e-button>\r\n * <m3e-dialog id=\"dlg\" dismissible onclosed=\"console.log(this.returnValue)\">\r\n *   <span slot=\"header\">Dialog Title</span>\r\n *   Dialog content goes here.\r\n *   <div slot=\"actions\" end>\r\n *     <m3e-button autofocus><m3e-dialog-action return-value=\"ok\">Close</m3e-dialog-action></m3e-button>\r\n *   </div>\r\n * </m3e-dialog>\r\n * ```\r\n *\r\n * @tag m3e-dialog\r\n *\r\n * @slot - Renders the content of the dialog.\r\n * @slot header - Renders the header of the dialog.\r\n * @slot actions - Renders the actions of the dialog.\r\n * @slot close-icon - Renders the icon of the button used to close the dialog.\r\n *\r\n * @attr alert - Whether the dialog is an alert.\r\n * @attr close-label - The accessible label given to the button used to dismiss the dialog.\r\n * @attr disable-close -Whether users cannot click the backdrop or press escape to dismiss the dialog.\r\n * @attr dismissible - Whether a button is presented that can be used to close the dialog.\r\n * @attr no-focus-trap - Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.\r\n * @attr open - Whether the dialog is open.\r\n *\r\n * @fires opening - Emitted when the dialog begins to open.\r\n * @fires opened - Emitted when the dialog has opened.\r\n * @fires cancel - Emitted when the dialog is cancelled.\r\n * @fires closing - Emitted when the dialog begins to close.\r\n * @fires closed - Emitted when the dialog has closed.\r\n *\r\n * @cssprop --m3e-dialog-shape - Border radius of the dialog container.\r\n * @cssprop --m3e-dialog-min-width - Minimum width of the dialog.\r\n * @cssprop --m3e-dialog-max-width - Maximum width of the dialog.\r\n * @cssprop --m3e-dialog-color - Foreground color of the dialog.\r\n * @cssprop --m3e-dialog-container-color - Background color of the dialog container.\r\n * @cssprop --m3e-dialog-scrim-color - Color of the scrim (backdrop overlay).\r\n * @cssprop --m3e-dialog-scrim-opacity - Opacity of the scrim when open.\r\n * @cssprop --m3e-dialog-header-container-color - Background color of the dialog header.\r\n * @cssprop --m3e-dialog-header-color - Foreground color of the dialog header.\r\n * @cssprop --m3e-dialog-header-font-size - Font size for the dialog header.\r\n * @cssprop --m3e-dialog-header-font-weight - Font weight for the dialog header.\r\n * @cssprop --m3e-dialog-header-line-height - Line height for the dialog header.\r\n * @cssprop --m3e-dialog-header-tracking - Letter spacing for the dialog header.\r\n * @cssprop --m3e-dialog-content-color - Foreground color of the dialog content.\r\n * @cssprop --m3e-dialog-content-font-size - Font size for the dialog content.\r\n * @cssprop --m3e-dialog-content-font-weight - Font weight for the dialog content.\r\n * @cssprop --m3e-dialog-content-line-height - Line height for the dialog content.\r\n * @cssprop --m3e-dialog-content-tracking - Letter spacing for the dialog content.\r\n */\r\n@customElement(\"m3e-dialog\")\r\nexport class M3eDialogElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .base {\r\n      font: inherit;\r\n      border: unset;\r\n      outline: unset;\r\n      padding: unset;\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: fixed;\r\n      overflow: visible;\r\n      border-radius: var(--m3e-dialog-shape, ${DesignToken.shape.corner.extraLarge});\r\n      min-width: var(--m3e-dialog-min-width, 17.5rem);\r\n      max-width: var(--m3e-dialog-max-width, 35rem);\r\n      color: var(--m3e-dialog-color, ${DesignToken.color.onSurface});\r\n      background-color: var(--m3e-dialog-container-color, ${DesignToken.color.surfaceContainerHigh});\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transform-origin: top;\r\n      transform: translateY(-3.125rem) scaleY(0.8);\r\n    }\r\n    .base::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    .base:not([open]) {\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transform: translateY(-3.125rem) scaleY(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized},\r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete`,\r\n      )};\r\n    }\r\n    .base[open] {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      transform: translateY(0) scaleY(1);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized}, \r\n        transform ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized},\r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete`,\r\n      )};\r\n    }\r\n    .base:not([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    .base[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    @starting-style {\r\n      .base[open] {\r\n        opacity: 0;\r\n        transform: translateY(-3.125rem) scaleY(0.8);\r\n      }\r\n      .base[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    .header {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      padding: 1.5rem 1.5rem 1rem 1.5rem;\r\n      background-color: var(--m3e-dialog-header-container-color, transparent);\r\n    }\r\n    ::slotted([slot=\"header\"]) {\r\n      margin: unset;\r\n      flex: 1 1 auto;\r\n      color: var(--m3e-dialog-header-color, inherit);\r\n      font-size: var(--m3e-dialog-header-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});\r\n      font-weight: var(--m3e-dialog-header-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});\r\n      line-height: var(--m3e-dialog-header-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});\r\n      letter-spacing: var(--m3e-dialog-header-tracking, ${DesignToken.typescale.standard.headline.small.tracking});\r\n    }\r\n    .content {\r\n      padding-inline: 1.5rem;\r\n      color: var(--m3e-dialog-content-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(--m3e-dialog-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize});\r\n      font-weight: var(--m3e-dialog-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight});\r\n      line-height: var(--m3e-dialog-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight});\r\n      letter-spacing: var(--m3e-dialog-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking});\r\n    }\r\n    .actions {\r\n      padding: 1.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"]) {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      min-height: 1.5rem;\r\n      column-gap: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"][end]) {\r\n      justify-content: flex-end;\r\n    }\r\n    :host(:not(:is(:state(--with-actions), :--with-actions))) .content {\r\n      margin-bottom: 1.5rem;\r\n    }\r\n    :host(:not(:is(:state(--with-actions), :--with-actions))) .actions {\r\n      display: none;\r\n    }\r\n    .close {\r\n      margin-inline-start: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"close-icon\"]),\r\n    .close-icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base:not([open])::backdrop,\r\n      .base[open]::backdrop {\r\n        transition: none;\r\n      }\r\n      .base {\r\n        border-style: solid;\r\n        border-width: 1px;\r\n        border-color: CanvasText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base:not([open]),\r\n      .base[open],\r\n      .base:not([open])::backdrop,\r\n      .base[open]::backdrop {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #id = M3eDialogElement.__nextId++;\r\n\r\n  /** @private */ #open = false;\r\n  /** @private */ #escapePressedWithoutCancel = false;\r\n  /** @private */ @state() private _withActions = false;\r\n  /** @private */ @query(\".base\") private readonly _base!: HTMLDialogElement;\r\n  /** @private */ @query(\".content\") private readonly _content!: HTMLDialogElement;\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n\r\n  /**\r\n   * Whether the dialog is an alert.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) alert = false;\r\n\r\n  /**\r\n   * Whether the dialog is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) get open() {\r\n    return this.#open;\r\n  }\r\n  set open(value: boolean) {\r\n    if (value === this.#open) return;\r\n    this.#open = value;\r\n    if (this.#open) {\r\n      this.show();\r\n    } else {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Whether a button is presented that can be used to close the dialog.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) dismissible = false;\r\n\r\n  /**\r\n   * Whether users cannot click the backdrop or press ESC to dismiss the dialog.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-close\", type: Boolean }) disableClose = false;\r\n\r\n  /**\r\n   * Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"no-focus-trap\", type: Boolean }) noFocusTrap = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to dismiss the dialog.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /**\r\n   * The return value of the dialog.\r\n   * @default \"\"\r\n   */\r\n  returnValue = \"\";\r\n\r\n  /**\r\n   * Asynchronously opens the dialog.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the dialog is open.\r\n   */\r\n  async show(): Promise<void> {\r\n    await this.updateComplete;\r\n\r\n    if (this._base.open) {\r\n      return;\r\n    }\r\n\r\n    if (!this.dispatchEvent(new Event(\"opening\", { cancelable: true }))) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    this.#scrollLockController.lock();\r\n    this._base.showModal();\r\n    this._content.scrollTop = 0;\r\n    const focusable = this.querySelector<HTMLElement>(\"[autofocus]\");\r\n\r\n    if (focusable) {\r\n      focusWhenReady(focusable);\r\n    }\r\n\r\n    this.dispatchEvent(new Event(\"opened\"));\r\n  }\r\n\r\n  /**\r\n   * Asynchronously closes the dialog.\r\n   * @param {string} returnValue The value to return.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the dialog is closed.\r\n   */\r\n  async hide(returnValue: string = this.returnValue): Promise<void> {\r\n    if (!this.isConnected) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    await this.updateComplete;\r\n\r\n    this.#scrollLockController.unlock();\r\n\r\n    if (!this._base.open) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    const prevReturnValue = this.returnValue;\r\n    this.returnValue = returnValue;\r\n\r\n    if (!this.dispatchEvent(new Event(\"closing\", { cancelable: true }))) {\r\n      this.returnValue = prevReturnValue;\r\n      return;\r\n    }\r\n\r\n    this.open = false;\r\n    this._base.close(returnValue);\r\n    this.dispatchEvent(new Event(\"closed\"));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<dialog\r\n      class=\"base\"\r\n      role=\"${ifDefined(this.alert ? \"alertdialog\" : undefined)}\"\r\n      aria-labelledby=\"m3e-dialog-${this.#id}-header\"\r\n      .returnValue=\"${this.returnValue}\"\r\n      @close=\"${this.#handleClose}\"\r\n      @cancel=\"${this.#handleCancel}\"\r\n      @click=\"${this.#handleClick}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n    >\r\n      <m3e-elevation level=\"3\"></m3e-elevation>\r\n      <m3e-focus-trap ?disabled=\"${this.noFocusTrap}\">\r\n        <div class=\"header\">\r\n          <slot name=\"header\" id=\"m3e-dialog-${this.#id}-header\"></slot>\r\n          ${this.#renderCloseButton()}\r\n        </div>\r\n        <m3e-scroll-container class=\"content\" dividers=\"${this._withActions ? \"above-below\" : \"above\"}\">\r\n          <slot></slot>\r\n        </m3e-scroll-container>\r\n        <div class=\"actions\">\r\n          <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n        </div>\r\n      </m3e-focus-trap>\r\n    </dialog>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCloseButton(): unknown {\r\n    return !this.dismissible\r\n      ? nothing\r\n      : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" class=\"close\" @click=\"${this.hide}\">\r\n          <slot name=\"close-icon\">\r\n            <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n              />\r\n            </svg>\r\n          </slot>\r\n        </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClose(): void {\r\n    if (!this.#escapePressedWithoutCancel) {\r\n      return;\r\n    }\r\n    this.#escapePressedWithoutCancel = true;\r\n    this._base?.dispatchEvent(new Event(\"cancel\", { cancelable: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleCancel(e: Event): void {\r\n    if (e.target !== this._base) return;\r\n    this.#escapePressedWithoutCancel = false;\r\n    e.preventDefault();\r\n    if (this.dispatchEvent(new Event(\"cancel\", { cancelable: true }))) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!this.disableClose && e.target === this._base) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      if (!this.disableClose) {\r\n        this.hide();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    this._withActions = (<HTMLSlotElement>e.target).assignedNodes({ flatten: true }).length > 0;\r\n    setCustomState(this, \"--with-actions\", this._withActions);\r\n  }\r\n}\r\n\r\ninterface M3eDialogElementEventMap extends HTMLElementEventMap {\r\n  opening: Event;\r\n  opened: Event;\r\n  closing: Event;\r\n  closed: Event;\r\n  cancel: Event;\r\n}\r\n\r\nexport interface M3eDialogElement {\r\n  addEventListener<K extends keyof M3eDialogElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[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 M3eDialogElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[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-dialog\": M3eDialogElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\n\r\nimport { M3eDialogElement } from \"./DialogElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a dialog.\r\n * @tag m3e-dialog-trigger\r\n */\r\n@customElement(\"m3e-dialog-trigger\")\r\nexport class M3eDialogTriggerElement 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 M3eDialogElement) {\r\n      this.control.show();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog-trigger\": M3eDialogTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eDialogActionElement","ActionElementBase","constructor","returnValue","_onClick","closest","hide","__decorate","property","attribute","prototype","customElement","M3eDialogElement","AttachInternals","LitElement","_M3eDialogElement_id","set","M3eDialogElement_1","__nextId","_M3eDialogElement_open","_M3eDialogElement_escapePressedWithoutCancel","_withActions","_M3eDialogElement_scrollLockController","ScrollLockController","alert","dismissible","disableClose","noFocusTrap","closeLabel","open","__classPrivateFieldGet","value","__classPrivateFieldSet","show","updateComplete","_base","dispatchEvent","Event","cancelable","lock","showModal","_content","scrollTop","focusable","querySelector","focusWhenReady","isConnected","unlock","prevReturnValue","close","render","html","ifDefined","undefined","_M3eDialogElement_instances","_M3eDialogElement_handleClose","_M3eDialogElement_handleCancel","_M3eDialogElement_handleClick","_M3eDialogElement_handleKeyDown","_M3eDialogElement_renderCloseButton","call","_M3eDialogElement_handleActionsSlotChange","nothing","e","target","preventDefault","key","shiftKey","ctrlKey","assignedNodes","flatten","length","setCustomState","styles","css","DesignToken","shape","corner","extraLarge","color","onSurface","surfaceContainerHigh","scrim","unsafeCSS","motion","duration","short3","easing","emphasized","long2","standard","typescale","headline","small","fontSize","fontWeight","lineHeight","tracking","onSurfaceVariant","body","medium","state","query","type","Boolean","reflect","M3eDialogTriggerElement","HtmlFor","connectedCallback","parentElement","ariaHasPopup","disconnectedCallback","control"],"mappings":"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"}
+{"version":3,"file":"dialog.js","sources":["../../src/dialog/DialogActionElement.ts","../../src/dialog/DialogElement.ts","../../src/dialog/DialogTriggerElement.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\r\n\r\nimport { ActionElementBase, customElement } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to close a parenting dialog.\r\n * @tag m3e-dialog-action\r\n *\r\n * @slot - Renders the content of the action.\r\n *\r\n * @attr return-value - The value to return from the dialog.\r\n */\r\n@customElement(\"m3e-dialog-action\")\r\nexport class M3eDialogActionElement extends ActionElementBase {\r\n  /**\r\n   * The value to return from the dialog.\r\n   * @default \"\"\r\n   */\r\n  @property({ attribute: \"return-value\" }) returnValue = \"\";\r\n\r\n  /** @inheritdoc */\r\n  protected override _onClick(): void {\r\n    this.closest(\"m3e-dialog\")?.hide(this.returnValue);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog-action\": M3eDialogActionElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, 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  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  focusWhenReady,\r\n  ScrollLockController,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * A dialog that provides important prompts in a user flow.\r\n *\r\n * @description\r\n * The `m3e-dialog` component presents important prompts, alerts, and actions in user flows.\r\n * Designed according to Material 3 principles, it supports custom header, content, and\r\n * close icon slots, ARIA accessibility, focus management, and theming via CSS custom properties.\r\n *\r\n * @example\r\n * ```html\r\n * <m3e-button variant=\"filled\">\r\n *   <m3e-dialog-trigger for=\"dlg\">Open Dialog</m3e-dialog-trigger>\r\n * </m3e-button>\r\n * <m3e-dialog id=\"dlg\" dismissible onclosed=\"console.log(this.returnValue)\">\r\n *   <span slot=\"header\">Dialog Title</span>\r\n *   Dialog content goes here.\r\n *   <div slot=\"actions\" end>\r\n *     <m3e-button autofocus><m3e-dialog-action return-value=\"ok\">Close</m3e-dialog-action></m3e-button>\r\n *   </div>\r\n * </m3e-dialog>\r\n * ```\r\n *\r\n * @tag m3e-dialog\r\n *\r\n * @slot - Renders the content of the dialog.\r\n * @slot header - Renders the header of the dialog.\r\n * @slot actions - Renders the actions of the dialog.\r\n * @slot close-icon - Renders the icon of the button used to close the dialog.\r\n *\r\n * @attr alert - Whether the dialog is an alert.\r\n * @attr close-label - The accessible label given to the button used to dismiss the dialog.\r\n * @attr disable-close -Whether users cannot click the backdrop or press escape to dismiss the dialog.\r\n * @attr dismissible - Whether a button is presented that can be used to close the dialog.\r\n * @attr no-focus-trap - Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.\r\n * @attr open - Whether the dialog is open.\r\n *\r\n * @fires opening - Dispatched when the dialog begins to open.\r\n * @fires opened - Dispatched when the dialog has opened.\r\n * @fires cancel - Dispatched when the dialog is cancelled.\r\n * @fires closing - Dispatched when the dialog begins to close.\r\n * @fires closed - Dispatched when the dialog has closed.\r\n *\r\n * @cssprop --m3e-dialog-shape - Border radius of the dialog container.\r\n * @cssprop --m3e-dialog-min-width - Minimum width of the dialog.\r\n * @cssprop --m3e-dialog-max-width - Maximum width of the dialog.\r\n * @cssprop --m3e-dialog-color - Foreground color of the dialog.\r\n * @cssprop --m3e-dialog-container-color - Background color of the dialog container.\r\n * @cssprop --m3e-dialog-scrim-color - Color of the scrim (backdrop overlay).\r\n * @cssprop --m3e-dialog-scrim-opacity - Opacity of the scrim when open.\r\n * @cssprop --m3e-dialog-header-container-color - Background color of the dialog header.\r\n * @cssprop --m3e-dialog-header-color - Foreground color of the dialog header.\r\n * @cssprop --m3e-dialog-header-font-size - Font size for the dialog header.\r\n * @cssprop --m3e-dialog-header-font-weight - Font weight for the dialog header.\r\n * @cssprop --m3e-dialog-header-line-height - Line height for the dialog header.\r\n * @cssprop --m3e-dialog-header-tracking - Letter spacing for the dialog header.\r\n * @cssprop --m3e-dialog-content-color - Foreground color of the dialog content.\r\n * @cssprop --m3e-dialog-content-font-size - Font size for the dialog content.\r\n * @cssprop --m3e-dialog-content-font-weight - Font weight for the dialog content.\r\n * @cssprop --m3e-dialog-content-line-height - Line height for the dialog content.\r\n * @cssprop --m3e-dialog-content-tracking - Letter spacing for the dialog content.\r\n */\r\n@customElement(\"m3e-dialog\")\r\nexport class M3eDialogElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .base {\r\n      font: inherit;\r\n      border: unset;\r\n      outline: unset;\r\n      padding: unset;\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: fixed;\r\n      overflow: visible;\r\n      border-radius: var(--m3e-dialog-shape, ${DesignToken.shape.corner.extraLarge});\r\n      min-width: var(--m3e-dialog-min-width, 17.5rem);\r\n      max-width: var(--m3e-dialog-max-width, 35rem);\r\n      color: var(--m3e-dialog-color, ${DesignToken.color.onSurface});\r\n      background-color: var(--m3e-dialog-container-color, ${DesignToken.color.surfaceContainerHigh});\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transform-origin: top;\r\n      transform: translateY(-3.125rem) scaleY(0.8);\r\n    }\r\n    .base::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    .base:not([open]) {\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transform: translateY(-3.125rem) scaleY(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized},\r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete`,\r\n      )};\r\n    }\r\n    .base[open] {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      transform: translateY(0) scaleY(1);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized}, \r\n        transform ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized},\r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete`,\r\n      )};\r\n    }\r\n    .base:not([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    .base[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    @starting-style {\r\n      .base[open] {\r\n        opacity: 0;\r\n        transform: translateY(-3.125rem) scaleY(0.8);\r\n      }\r\n      .base[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    .header {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      padding: 1.5rem 1.5rem 1rem 1.5rem;\r\n      background-color: var(--m3e-dialog-header-container-color, transparent);\r\n    }\r\n    ::slotted([slot=\"header\"]) {\r\n      margin: unset;\r\n      flex: 1 1 auto;\r\n      color: var(--m3e-dialog-header-color, inherit);\r\n      font-size: var(--m3e-dialog-header-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});\r\n      font-weight: var(--m3e-dialog-header-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});\r\n      line-height: var(--m3e-dialog-header-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});\r\n      letter-spacing: var(--m3e-dialog-header-tracking, ${DesignToken.typescale.standard.headline.small.tracking});\r\n    }\r\n    .content {\r\n      padding-inline: 1.5rem;\r\n      color: var(--m3e-dialog-content-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(--m3e-dialog-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize});\r\n      font-weight: var(--m3e-dialog-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight});\r\n      line-height: var(--m3e-dialog-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight});\r\n      letter-spacing: var(--m3e-dialog-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking});\r\n    }\r\n    .actions {\r\n      padding: 1.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"]) {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      min-height: 1.5rem;\r\n      column-gap: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"][end]) {\r\n      justify-content: flex-end;\r\n    }\r\n    :host(:not(:is(:state(--with-actions), :--with-actions))) .content {\r\n      margin-bottom: 1.5rem;\r\n    }\r\n    :host(:not(:is(:state(--with-actions), :--with-actions))) .actions {\r\n      display: none;\r\n    }\r\n    .close {\r\n      margin-inline-start: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"close-icon\"]),\r\n    .close-icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base:not([open])::backdrop,\r\n      .base[open]::backdrop {\r\n        transition: none;\r\n      }\r\n      .base {\r\n        border-style: solid;\r\n        border-width: 1px;\r\n        border-color: CanvasText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base:not([open]),\r\n      .base[open],\r\n      .base:not([open])::backdrop,\r\n      .base[open]::backdrop {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #id = M3eDialogElement.__nextId++;\r\n\r\n  /** @private */ #open = false;\r\n  /** @private */ #escapePressedWithoutCancel = false;\r\n  /** @private */ @state() private _withActions = false;\r\n  /** @private */ @query(\".base\") private readonly _base!: HTMLDialogElement;\r\n  /** @private */ @query(\".content\") private readonly _content!: HTMLDialogElement;\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n\r\n  /**\r\n   * Whether the dialog is an alert.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) alert = false;\r\n\r\n  /**\r\n   * Whether the dialog is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) get open() {\r\n    return this.#open;\r\n  }\r\n  set open(value: boolean) {\r\n    if (value === this.#open) return;\r\n    this.#open = value;\r\n    if (this.#open) {\r\n      this.show();\r\n    } else {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Whether a button is presented that can be used to close the dialog.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) dismissible = false;\r\n\r\n  /**\r\n   * Whether users cannot click the backdrop or press ESC to dismiss the dialog.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-close\", type: Boolean }) disableClose = false;\r\n\r\n  /**\r\n   * Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"no-focus-trap\", type: Boolean }) noFocusTrap = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to dismiss the dialog.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /**\r\n   * The return value of the dialog.\r\n   * @default \"\"\r\n   */\r\n  returnValue = \"\";\r\n\r\n  /**\r\n   * Asynchronously opens the dialog.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the dialog is open.\r\n   */\r\n  async show(): Promise<void> {\r\n    await this.updateComplete;\r\n\r\n    if (this._base.open) {\r\n      return;\r\n    }\r\n\r\n    if (!this.dispatchEvent(new Event(\"opening\", { cancelable: true }))) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    this.#scrollLockController.lock();\r\n    this._base.showModal();\r\n    this._content.scrollTop = 0;\r\n    const focusable = this.querySelector<HTMLElement>(\"[autofocus]\");\r\n\r\n    if (focusable) {\r\n      focusWhenReady(focusable);\r\n    }\r\n\r\n    this.dispatchEvent(new Event(\"opened\"));\r\n  }\r\n\r\n  /**\r\n   * Asynchronously closes the dialog.\r\n   * @param {string} returnValue The value to return.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the dialog is closed.\r\n   */\r\n  async hide(returnValue: string = this.returnValue): Promise<void> {\r\n    if (!this.isConnected) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    await this.updateComplete;\r\n\r\n    this.#scrollLockController.unlock();\r\n\r\n    if (!this._base.open) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    const prevReturnValue = this.returnValue;\r\n    this.returnValue = returnValue;\r\n\r\n    if (!this.dispatchEvent(new Event(\"closing\", { cancelable: true }))) {\r\n      this.returnValue = prevReturnValue;\r\n      return;\r\n    }\r\n\r\n    this.open = false;\r\n    this._base.close(returnValue);\r\n    this.dispatchEvent(new Event(\"closed\"));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<dialog\r\n      class=\"base\"\r\n      role=\"${ifDefined(this.alert ? \"alertdialog\" : undefined)}\"\r\n      aria-labelledby=\"m3e-dialog-${this.#id}-header\"\r\n      .returnValue=\"${this.returnValue}\"\r\n      @close=\"${this.#handleClose}\"\r\n      @cancel=\"${this.#handleCancel}\"\r\n      @click=\"${this.#handleClick}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n    >\r\n      <m3e-elevation level=\"3\"></m3e-elevation>\r\n      <m3e-focus-trap ?disabled=\"${this.noFocusTrap}\">\r\n        <div class=\"header\">\r\n          <slot name=\"header\" id=\"m3e-dialog-${this.#id}-header\"></slot>\r\n          ${this.#renderCloseButton()}\r\n        </div>\r\n        <m3e-scroll-container class=\"content\" dividers=\"${this._withActions ? \"above-below\" : \"above\"}\">\r\n          <slot></slot>\r\n        </m3e-scroll-container>\r\n        <div class=\"actions\">\r\n          <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n        </div>\r\n      </m3e-focus-trap>\r\n    </dialog>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCloseButton(): unknown {\r\n    return !this.dismissible\r\n      ? nothing\r\n      : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" class=\"close\" @click=\"${this.hide}\">\r\n          <slot name=\"close-icon\">\r\n            <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n              />\r\n            </svg>\r\n          </slot>\r\n        </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClose(): void {\r\n    if (!this.#escapePressedWithoutCancel) {\r\n      return;\r\n    }\r\n    this.#escapePressedWithoutCancel = true;\r\n    this._base?.dispatchEvent(new Event(\"cancel\", { cancelable: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleCancel(e: Event): void {\r\n    if (e.target !== this._base) return;\r\n    this.#escapePressedWithoutCancel = false;\r\n    e.preventDefault();\r\n    if (this.dispatchEvent(new Event(\"cancel\", { cancelable: true }))) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!this.disableClose && e.target === this._base) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      if (!this.disableClose) {\r\n        this.hide();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    this._withActions = (<HTMLSlotElement>e.target).assignedNodes({ flatten: true }).length > 0;\r\n    setCustomState(this, \"--with-actions\", this._withActions);\r\n  }\r\n}\r\n\r\ninterface M3eDialogElementEventMap extends HTMLElementEventMap {\r\n  opening: Event;\r\n  opened: Event;\r\n  closing: Event;\r\n  closed: Event;\r\n  cancel: Event;\r\n}\r\n\r\nexport interface M3eDialogElement {\r\n  addEventListener<K extends keyof M3eDialogElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[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 M3eDialogElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[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-dialog\": M3eDialogElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\n\r\nimport { M3eDialogElement } from \"./DialogElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a dialog.\r\n * @tag m3e-dialog-trigger\r\n */\r\n@customElement(\"m3e-dialog-trigger\")\r\nexport class M3eDialogTriggerElement 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 M3eDialogElement) {\r\n      this.control.show();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog-trigger\": M3eDialogTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eDialogActionElement","ActionElementBase","constructor","returnValue","_onClick","closest","hide","__decorate","property","attribute","prototype","customElement","M3eDialogElement","AttachInternals","LitElement","_M3eDialogElement_id","set","M3eDialogElement_1","__nextId","_M3eDialogElement_open","_M3eDialogElement_escapePressedWithoutCancel","_withActions","_M3eDialogElement_scrollLockController","ScrollLockController","alert","dismissible","disableClose","noFocusTrap","closeLabel","open","__classPrivateFieldGet","value","__classPrivateFieldSet","show","updateComplete","_base","dispatchEvent","Event","cancelable","lock","showModal","_content","scrollTop","focusable","querySelector","focusWhenReady","isConnected","unlock","prevReturnValue","close","render","html","ifDefined","undefined","_M3eDialogElement_instances","_M3eDialogElement_handleClose","_M3eDialogElement_handleCancel","_M3eDialogElement_handleClick","_M3eDialogElement_handleKeyDown","_M3eDialogElement_renderCloseButton","call","_M3eDialogElement_handleActionsSlotChange","nothing","e","target","preventDefault","key","shiftKey","ctrlKey","assignedNodes","flatten","length","setCustomState","styles","css","DesignToken","shape","corner","extraLarge","color","onSurface","surfaceContainerHigh","scrim","unsafeCSS","motion","duration","short3","easing","emphasized","long2","standard","typescale","headline","small","fontSize","fontWeight","lineHeight","tracking","onSurfaceVariant","body","medium","state","query","type","Boolean","reflect","M3eDialogTriggerElement","HtmlFor","connectedCallback","parentElement","ariaHasPopup","disconnectedCallback","control"],"mappings":"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"}

package/dist/dialog.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.min.js","sources":["../../src/dialog/DialogActionElement.ts","../../src/dialog/DialogElement.ts","../../src/dialog/DialogTriggerElement.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\r\n\r\nimport { ActionElementBase, customElement } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to close a parenting dialog.\r\n * @tag m3e-dialog-action\r\n *\r\n * @slot - Renders the content of the action.\r\n *\r\n * @attr return-value - The value to return from the dialog.\r\n */\r\n@customElement(\"m3e-dialog-action\")\r\nexport class M3eDialogActionElement extends ActionElementBase {\r\n  /**\r\n   * The value to return from the dialog.\r\n   * @default \"\"\r\n   */\r\n  @property({ attribute: \"return-value\" }) returnValue = \"\";\r\n\r\n  /** @inheritdoc */\r\n  protected override _onClick(): void {\r\n    this.closest(\"m3e-dialog\")?.hide(this.returnValue);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog-action\": M3eDialogActionElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, 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  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  focusWhenReady,\r\n  ScrollLockController,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * A dialog that provides important prompts in a user flow.\r\n *\r\n * @description\r\n * The `m3e-dialog` component presents important prompts, alerts, and actions in user flows.\r\n * Designed according to Material 3 principles, it supports custom header, content, and\r\n * close icon slots, ARIA accessibility, focus management, and theming via CSS custom properties.\r\n *\r\n * @example\r\n * ```html\r\n * <m3e-button variant=\"filled\">\r\n *   <m3e-dialog-trigger for=\"dlg\">Open Dialog</m3e-dialog-trigger>\r\n * </m3e-button>\r\n * <m3e-dialog id=\"dlg\" dismissible onclosed=\"console.log(this.returnValue)\">\r\n *   <span slot=\"header\">Dialog Title</span>\r\n *   Dialog content goes here.\r\n *   <div slot=\"actions\" end>\r\n *     <m3e-button autofocus><m3e-dialog-action return-value=\"ok\">Close</m3e-dialog-action></m3e-button>\r\n *   </div>\r\n * </m3e-dialog>\r\n * ```\r\n *\r\n * @tag m3e-dialog\r\n *\r\n * @slot - Renders the content of the dialog.\r\n * @slot header - Renders the header of the dialog.\r\n * @slot actions - Renders the actions of the dialog.\r\n * @slot close-icon - Renders the icon of the button used to close the dialog.\r\n *\r\n * @attr alert - Whether the dialog is an alert.\r\n * @attr close-label - The accessible label given to the button used to dismiss the dialog.\r\n * @attr disable-close -Whether users cannot click the backdrop or press escape to dismiss the dialog.\r\n * @attr dismissible - Whether a button is presented that can be used to close the dialog.\r\n * @attr no-focus-trap - Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.\r\n * @attr open - Whether the dialog is open.\r\n *\r\n * @fires opening - Emitted when the dialog begins to open.\r\n * @fires opened - Emitted when the dialog has opened.\r\n * @fires cancel - Emitted when the dialog is cancelled.\r\n * @fires closing - Emitted when the dialog begins to close.\r\n * @fires closed - Emitted when the dialog has closed.\r\n *\r\n * @cssprop --m3e-dialog-shape - Border radius of the dialog container.\r\n * @cssprop --m3e-dialog-min-width - Minimum width of the dialog.\r\n * @cssprop --m3e-dialog-max-width - Maximum width of the dialog.\r\n * @cssprop --m3e-dialog-color - Foreground color of the dialog.\r\n * @cssprop --m3e-dialog-container-color - Background color of the dialog container.\r\n * @cssprop --m3e-dialog-scrim-color - Color of the scrim (backdrop overlay).\r\n * @cssprop --m3e-dialog-scrim-opacity - Opacity of the scrim when open.\r\n * @cssprop --m3e-dialog-header-container-color - Background color of the dialog header.\r\n * @cssprop --m3e-dialog-header-color - Foreground color of the dialog header.\r\n * @cssprop --m3e-dialog-header-font-size - Font size for the dialog header.\r\n * @cssprop --m3e-dialog-header-font-weight - Font weight for the dialog header.\r\n * @cssprop --m3e-dialog-header-line-height - Line height for the dialog header.\r\n * @cssprop --m3e-dialog-header-tracking - Letter spacing for the dialog header.\r\n * @cssprop --m3e-dialog-content-color - Foreground color of the dialog content.\r\n * @cssprop --m3e-dialog-content-font-size - Font size for the dialog content.\r\n * @cssprop --m3e-dialog-content-font-weight - Font weight for the dialog content.\r\n * @cssprop --m3e-dialog-content-line-height - Line height for the dialog content.\r\n * @cssprop --m3e-dialog-content-tracking - Letter spacing for the dialog content.\r\n */\r\n@customElement(\"m3e-dialog\")\r\nexport class M3eDialogElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .base {\r\n      font: inherit;\r\n      border: unset;\r\n      outline: unset;\r\n      padding: unset;\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: fixed;\r\n      overflow: visible;\r\n      border-radius: var(--m3e-dialog-shape, ${DesignToken.shape.corner.extraLarge});\r\n      min-width: var(--m3e-dialog-min-width, 17.5rem);\r\n      max-width: var(--m3e-dialog-max-width, 35rem);\r\n      color: var(--m3e-dialog-color, ${DesignToken.color.onSurface});\r\n      background-color: var(--m3e-dialog-container-color, ${DesignToken.color.surfaceContainerHigh});\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transform-origin: top;\r\n      transform: translateY(-3.125rem) scaleY(0.8);\r\n    }\r\n    .base::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    .base:not([open]) {\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transform: translateY(-3.125rem) scaleY(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized},\r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete`,\r\n      )};\r\n    }\r\n    .base[open] {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      transform: translateY(0) scaleY(1);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized}, \r\n        transform ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized},\r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete`,\r\n      )};\r\n    }\r\n    .base:not([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    .base[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    @starting-style {\r\n      .base[open] {\r\n        opacity: 0;\r\n        transform: translateY(-3.125rem) scaleY(0.8);\r\n      }\r\n      .base[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    .header {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      padding: 1.5rem 1.5rem 1rem 1.5rem;\r\n      background-color: var(--m3e-dialog-header-container-color, transparent);\r\n    }\r\n    ::slotted([slot=\"header\"]) {\r\n      margin: unset;\r\n      flex: 1 1 auto;\r\n      color: var(--m3e-dialog-header-color, inherit);\r\n      font-size: var(--m3e-dialog-header-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});\r\n      font-weight: var(--m3e-dialog-header-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});\r\n      line-height: var(--m3e-dialog-header-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});\r\n      letter-spacing: var(--m3e-dialog-header-tracking, ${DesignToken.typescale.standard.headline.small.tracking});\r\n    }\r\n    .content {\r\n      padding-inline: 1.5rem;\r\n      color: var(--m3e-dialog-content-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(--m3e-dialog-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize});\r\n      font-weight: var(--m3e-dialog-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight});\r\n      line-height: var(--m3e-dialog-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight});\r\n      letter-spacing: var(--m3e-dialog-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking});\r\n    }\r\n    .actions {\r\n      padding: 1.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"]) {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      min-height: 1.5rem;\r\n      column-gap: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"][end]) {\r\n      justify-content: flex-end;\r\n    }\r\n    :host(:not(:is(:state(--with-actions), :--with-actions))) .content {\r\n      margin-bottom: 1.5rem;\r\n    }\r\n    :host(:not(:is(:state(--with-actions), :--with-actions))) .actions {\r\n      display: none;\r\n    }\r\n    .close {\r\n      margin-inline-start: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"close-icon\"]),\r\n    .close-icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base:not([open])::backdrop,\r\n      .base[open]::backdrop {\r\n        transition: none;\r\n      }\r\n      .base {\r\n        border-style: solid;\r\n        border-width: 1px;\r\n        border-color: CanvasText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base:not([open]),\r\n      .base[open],\r\n      .base:not([open])::backdrop,\r\n      .base[open]::backdrop {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #id = M3eDialogElement.__nextId++;\r\n\r\n  /** @private */ #open = false;\r\n  /** @private */ #escapePressedWithoutCancel = false;\r\n  /** @private */ @state() private _withActions = false;\r\n  /** @private */ @query(\".base\") private readonly _base!: HTMLDialogElement;\r\n  /** @private */ @query(\".content\") private readonly _content!: HTMLDialogElement;\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n\r\n  /**\r\n   * Whether the dialog is an alert.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) alert = false;\r\n\r\n  /**\r\n   * Whether the dialog is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) get open() {\r\n    return this.#open;\r\n  }\r\n  set open(value: boolean) {\r\n    if (value === this.#open) return;\r\n    this.#open = value;\r\n    if (this.#open) {\r\n      this.show();\r\n    } else {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Whether a button is presented that can be used to close the dialog.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) dismissible = false;\r\n\r\n  /**\r\n   * Whether users cannot click the backdrop or press ESC to dismiss the dialog.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-close\", type: Boolean }) disableClose = false;\r\n\r\n  /**\r\n   * Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"no-focus-trap\", type: Boolean }) noFocusTrap = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to dismiss the dialog.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /**\r\n   * The return value of the dialog.\r\n   * @default \"\"\r\n   */\r\n  returnValue = \"\";\r\n\r\n  /**\r\n   * Asynchronously opens the dialog.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the dialog is open.\r\n   */\r\n  async show(): Promise<void> {\r\n    await this.updateComplete;\r\n\r\n    if (this._base.open) {\r\n      return;\r\n    }\r\n\r\n    if (!this.dispatchEvent(new Event(\"opening\", { cancelable: true }))) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    this.#scrollLockController.lock();\r\n    this._base.showModal();\r\n    this._content.scrollTop = 0;\r\n    const focusable = this.querySelector<HTMLElement>(\"[autofocus]\");\r\n\r\n    if (focusable) {\r\n      focusWhenReady(focusable);\r\n    }\r\n\r\n    this.dispatchEvent(new Event(\"opened\"));\r\n  }\r\n\r\n  /**\r\n   * Asynchronously closes the dialog.\r\n   * @param {string} returnValue The value to return.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the dialog is closed.\r\n   */\r\n  async hide(returnValue: string = this.returnValue): Promise<void> {\r\n    if (!this.isConnected) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    await this.updateComplete;\r\n\r\n    this.#scrollLockController.unlock();\r\n\r\n    if (!this._base.open) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    const prevReturnValue = this.returnValue;\r\n    this.returnValue = returnValue;\r\n\r\n    if (!this.dispatchEvent(new Event(\"closing\", { cancelable: true }))) {\r\n      this.returnValue = prevReturnValue;\r\n      return;\r\n    }\r\n\r\n    this.open = false;\r\n    this._base.close(returnValue);\r\n    this.dispatchEvent(new Event(\"closed\"));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<dialog\r\n      class=\"base\"\r\n      role=\"${ifDefined(this.alert ? \"alertdialog\" : undefined)}\"\r\n      aria-labelledby=\"m3e-dialog-${this.#id}-header\"\r\n      .returnValue=\"${this.returnValue}\"\r\n      @close=\"${this.#handleClose}\"\r\n      @cancel=\"${this.#handleCancel}\"\r\n      @click=\"${this.#handleClick}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n    >\r\n      <m3e-elevation level=\"3\"></m3e-elevation>\r\n      <m3e-focus-trap ?disabled=\"${this.noFocusTrap}\">\r\n        <div class=\"header\">\r\n          <slot name=\"header\" id=\"m3e-dialog-${this.#id}-header\"></slot>\r\n          ${this.#renderCloseButton()}\r\n        </div>\r\n        <m3e-scroll-container class=\"content\" dividers=\"${this._withActions ? \"above-below\" : \"above\"}\">\r\n          <slot></slot>\r\n        </m3e-scroll-container>\r\n        <div class=\"actions\">\r\n          <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n        </div>\r\n      </m3e-focus-trap>\r\n    </dialog>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCloseButton(): unknown {\r\n    return !this.dismissible\r\n      ? nothing\r\n      : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" class=\"close\" @click=\"${this.hide}\">\r\n          <slot name=\"close-icon\">\r\n            <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n              />\r\n            </svg>\r\n          </slot>\r\n        </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClose(): void {\r\n    if (!this.#escapePressedWithoutCancel) {\r\n      return;\r\n    }\r\n    this.#escapePressedWithoutCancel = true;\r\n    this._base?.dispatchEvent(new Event(\"cancel\", { cancelable: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleCancel(e: Event): void {\r\n    if (e.target !== this._base) return;\r\n    this.#escapePressedWithoutCancel = false;\r\n    e.preventDefault();\r\n    if (this.dispatchEvent(new Event(\"cancel\", { cancelable: true }))) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!this.disableClose && e.target === this._base) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      if (!this.disableClose) {\r\n        this.hide();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    this._withActions = (<HTMLSlotElement>e.target).assignedNodes({ flatten: true }).length > 0;\r\n    setCustomState(this, \"--with-actions\", this._withActions);\r\n  }\r\n}\r\n\r\ninterface M3eDialogElementEventMap extends HTMLElementEventMap {\r\n  opening: Event;\r\n  opened: Event;\r\n  closing: Event;\r\n  closed: Event;\r\n  cancel: Event;\r\n}\r\n\r\nexport interface M3eDialogElement {\r\n  addEventListener<K extends keyof M3eDialogElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[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 M3eDialogElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[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-dialog\": M3eDialogElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\n\r\nimport { M3eDialogElement } from \"./DialogElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a dialog.\r\n * @tag m3e-dialog-trigger\r\n */\r\n@customElement(\"m3e-dialog-trigger\")\r\nexport class M3eDialogTriggerElement 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 M3eDialogElement) {\r\n      this.control.show();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog-trigger\": M3eDialogTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eDialogActionElement","ActionElementBase","constructor","this","returnValue","_onClick","closest","hide","__decorate","property","attribute","prototype","customElement","M3eDialogElement","AttachInternals","LitElement","_M3eDialogElement_id","set","M3eDialogElement_1","__nextId","_M3eDialogElement_open","_M3eDialogElement_escapePressedWithoutCancel","_withActions","_M3eDialogElement_scrollLockController","ScrollLockController","alert","dismissible","disableClose","noFocusTrap","closeLabel","open","__classPrivateFieldGet","value","__classPrivateFieldSet","show","updateComplete","_base","dispatchEvent","Event","cancelable","lock","showModal","_content","scrollTop","focusable","querySelector","focusWhenReady","isConnected","unlock","prevReturnValue","close","render","html","ifDefined","undefined","_M3eDialogElement_instances","_M3eDialogElement_handleClose","_M3eDialogElement_handleCancel","_M3eDialogElement_handleClick","_M3eDialogElement_handleKeyDown","_M3eDialogElement_renderCloseButton","call","_M3eDialogElement_handleActionsSlotChange","nothing","e","target","preventDefault","key","shiftKey","ctrlKey","assignedNodes","flatten","length","setCustomState","styles","css","DesignToken","shape","corner","extraLarge","color","onSurface","surfaceContainerHigh","scrim","unsafeCSS","motion","duration","short3","easing","emphasized","long2","standard","typescale","headline","small","fontSize","fontWeight","lineHeight","tracking","onSurfaceVariant","body","medium","state","query","type","Boolean","reflect","M3eDialogTriggerElement","HtmlFor","connectedCallback","super","parentElement","ariaHasPopup","disconnectedCallback","control"],"mappings":"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"}
+{"version":3,"file":"dialog.min.js","sources":["../../src/dialog/DialogActionElement.ts","../../src/dialog/DialogElement.ts","../../src/dialog/DialogTriggerElement.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\r\n\r\nimport { ActionElementBase, customElement } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to close a parenting dialog.\r\n * @tag m3e-dialog-action\r\n *\r\n * @slot - Renders the content of the action.\r\n *\r\n * @attr return-value - The value to return from the dialog.\r\n */\r\n@customElement(\"m3e-dialog-action\")\r\nexport class M3eDialogActionElement extends ActionElementBase {\r\n  /**\r\n   * The value to return from the dialog.\r\n   * @default \"\"\r\n   */\r\n  @property({ attribute: \"return-value\" }) returnValue = \"\";\r\n\r\n  /** @inheritdoc */\r\n  protected override _onClick(): void {\r\n    this.closest(\"m3e-dialog\")?.hide(this.returnValue);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog-action\": M3eDialogActionElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, 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  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  focusWhenReady,\r\n  ScrollLockController,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * A dialog that provides important prompts in a user flow.\r\n *\r\n * @description\r\n * The `m3e-dialog` component presents important prompts, alerts, and actions in user flows.\r\n * Designed according to Material 3 principles, it supports custom header, content, and\r\n * close icon slots, ARIA accessibility, focus management, and theming via CSS custom properties.\r\n *\r\n * @example\r\n * ```html\r\n * <m3e-button variant=\"filled\">\r\n *   <m3e-dialog-trigger for=\"dlg\">Open Dialog</m3e-dialog-trigger>\r\n * </m3e-button>\r\n * <m3e-dialog id=\"dlg\" dismissible onclosed=\"console.log(this.returnValue)\">\r\n *   <span slot=\"header\">Dialog Title</span>\r\n *   Dialog content goes here.\r\n *   <div slot=\"actions\" end>\r\n *     <m3e-button autofocus><m3e-dialog-action return-value=\"ok\">Close</m3e-dialog-action></m3e-button>\r\n *   </div>\r\n * </m3e-dialog>\r\n * ```\r\n *\r\n * @tag m3e-dialog\r\n *\r\n * @slot - Renders the content of the dialog.\r\n * @slot header - Renders the header of the dialog.\r\n * @slot actions - Renders the actions of the dialog.\r\n * @slot close-icon - Renders the icon of the button used to close the dialog.\r\n *\r\n * @attr alert - Whether the dialog is an alert.\r\n * @attr close-label - The accessible label given to the button used to dismiss the dialog.\r\n * @attr disable-close -Whether users cannot click the backdrop or press escape to dismiss the dialog.\r\n * @attr dismissible - Whether a button is presented that can be used to close the dialog.\r\n * @attr no-focus-trap - Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.\r\n * @attr open - Whether the dialog is open.\r\n *\r\n * @fires opening - Dispatched when the dialog begins to open.\r\n * @fires opened - Dispatched when the dialog has opened.\r\n * @fires cancel - Dispatched when the dialog is cancelled.\r\n * @fires closing - Dispatched when the dialog begins to close.\r\n * @fires closed - Dispatched when the dialog has closed.\r\n *\r\n * @cssprop --m3e-dialog-shape - Border radius of the dialog container.\r\n * @cssprop --m3e-dialog-min-width - Minimum width of the dialog.\r\n * @cssprop --m3e-dialog-max-width - Maximum width of the dialog.\r\n * @cssprop --m3e-dialog-color - Foreground color of the dialog.\r\n * @cssprop --m3e-dialog-container-color - Background color of the dialog container.\r\n * @cssprop --m3e-dialog-scrim-color - Color of the scrim (backdrop overlay).\r\n * @cssprop --m3e-dialog-scrim-opacity - Opacity of the scrim when open.\r\n * @cssprop --m3e-dialog-header-container-color - Background color of the dialog header.\r\n * @cssprop --m3e-dialog-header-color - Foreground color of the dialog header.\r\n * @cssprop --m3e-dialog-header-font-size - Font size for the dialog header.\r\n * @cssprop --m3e-dialog-header-font-weight - Font weight for the dialog header.\r\n * @cssprop --m3e-dialog-header-line-height - Line height for the dialog header.\r\n * @cssprop --m3e-dialog-header-tracking - Letter spacing for the dialog header.\r\n * @cssprop --m3e-dialog-content-color - Foreground color of the dialog content.\r\n * @cssprop --m3e-dialog-content-font-size - Font size for the dialog content.\r\n * @cssprop --m3e-dialog-content-font-weight - Font weight for the dialog content.\r\n * @cssprop --m3e-dialog-content-line-height - Line height for the dialog content.\r\n * @cssprop --m3e-dialog-content-tracking - Letter spacing for the dialog content.\r\n */\r\n@customElement(\"m3e-dialog\")\r\nexport class M3eDialogElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .base {\r\n      font: inherit;\r\n      border: unset;\r\n      outline: unset;\r\n      padding: unset;\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: fixed;\r\n      overflow: visible;\r\n      border-radius: var(--m3e-dialog-shape, ${DesignToken.shape.corner.extraLarge});\r\n      min-width: var(--m3e-dialog-min-width, 17.5rem);\r\n      max-width: var(--m3e-dialog-max-width, 35rem);\r\n      color: var(--m3e-dialog-color, ${DesignToken.color.onSurface});\r\n      background-color: var(--m3e-dialog-container-color, ${DesignToken.color.surfaceContainerHigh});\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transform-origin: top;\r\n      transform: translateY(-3.125rem) scaleY(0.8);\r\n    }\r\n    .base::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    .base:not([open]) {\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transform: translateY(-3.125rem) scaleY(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized},\r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete`,\r\n      )};\r\n    }\r\n    .base[open] {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      transform: translateY(0) scaleY(1);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized}, \r\n        transform ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized},\r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete`,\r\n      )};\r\n    }\r\n    .base:not([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    .base[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    @starting-style {\r\n      .base[open] {\r\n        opacity: 0;\r\n        transform: translateY(-3.125rem) scaleY(0.8);\r\n      }\r\n      .base[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    .header {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      padding: 1.5rem 1.5rem 1rem 1.5rem;\r\n      background-color: var(--m3e-dialog-header-container-color, transparent);\r\n    }\r\n    ::slotted([slot=\"header\"]) {\r\n      margin: unset;\r\n      flex: 1 1 auto;\r\n      color: var(--m3e-dialog-header-color, inherit);\r\n      font-size: var(--m3e-dialog-header-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});\r\n      font-weight: var(--m3e-dialog-header-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});\r\n      line-height: var(--m3e-dialog-header-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});\r\n      letter-spacing: var(--m3e-dialog-header-tracking, ${DesignToken.typescale.standard.headline.small.tracking});\r\n    }\r\n    .content {\r\n      padding-inline: 1.5rem;\r\n      color: var(--m3e-dialog-content-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(--m3e-dialog-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize});\r\n      font-weight: var(--m3e-dialog-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight});\r\n      line-height: var(--m3e-dialog-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight});\r\n      letter-spacing: var(--m3e-dialog-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking});\r\n    }\r\n    .actions {\r\n      padding: 1.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"]) {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      min-height: 1.5rem;\r\n      column-gap: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"][end]) {\r\n      justify-content: flex-end;\r\n    }\r\n    :host(:not(:is(:state(--with-actions), :--with-actions))) .content {\r\n      margin-bottom: 1.5rem;\r\n    }\r\n    :host(:not(:is(:state(--with-actions), :--with-actions))) .actions {\r\n      display: none;\r\n    }\r\n    .close {\r\n      margin-inline-start: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"close-icon\"]),\r\n    .close-icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base:not([open])::backdrop,\r\n      .base[open]::backdrop {\r\n        transition: none;\r\n      }\r\n      .base {\r\n        border-style: solid;\r\n        border-width: 1px;\r\n        border-color: CanvasText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base:not([open]),\r\n      .base[open],\r\n      .base:not([open])::backdrop,\r\n      .base[open]::backdrop {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #id = M3eDialogElement.__nextId++;\r\n\r\n  /** @private */ #open = false;\r\n  /** @private */ #escapePressedWithoutCancel = false;\r\n  /** @private */ @state() private _withActions = false;\r\n  /** @private */ @query(\".base\") private readonly _base!: HTMLDialogElement;\r\n  /** @private */ @query(\".content\") private readonly _content!: HTMLDialogElement;\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n\r\n  /**\r\n   * Whether the dialog is an alert.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) alert = false;\r\n\r\n  /**\r\n   * Whether the dialog is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) get open() {\r\n    return this.#open;\r\n  }\r\n  set open(value: boolean) {\r\n    if (value === this.#open) return;\r\n    this.#open = value;\r\n    if (this.#open) {\r\n      this.show();\r\n    } else {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Whether a button is presented that can be used to close the dialog.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) dismissible = false;\r\n\r\n  /**\r\n   * Whether users cannot click the backdrop or press ESC to dismiss the dialog.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-close\", type: Boolean }) disableClose = false;\r\n\r\n  /**\r\n   * Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"no-focus-trap\", type: Boolean }) noFocusTrap = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to dismiss the dialog.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /**\r\n   * The return value of the dialog.\r\n   * @default \"\"\r\n   */\r\n  returnValue = \"\";\r\n\r\n  /**\r\n   * Asynchronously opens the dialog.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the dialog is open.\r\n   */\r\n  async show(): Promise<void> {\r\n    await this.updateComplete;\r\n\r\n    if (this._base.open) {\r\n      return;\r\n    }\r\n\r\n    if (!this.dispatchEvent(new Event(\"opening\", { cancelable: true }))) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    this.#scrollLockController.lock();\r\n    this._base.showModal();\r\n    this._content.scrollTop = 0;\r\n    const focusable = this.querySelector<HTMLElement>(\"[autofocus]\");\r\n\r\n    if (focusable) {\r\n      focusWhenReady(focusable);\r\n    }\r\n\r\n    this.dispatchEvent(new Event(\"opened\"));\r\n  }\r\n\r\n  /**\r\n   * Asynchronously closes the dialog.\r\n   * @param {string} returnValue The value to return.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the dialog is closed.\r\n   */\r\n  async hide(returnValue: string = this.returnValue): Promise<void> {\r\n    if (!this.isConnected) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    await this.updateComplete;\r\n\r\n    this.#scrollLockController.unlock();\r\n\r\n    if (!this._base.open) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    const prevReturnValue = this.returnValue;\r\n    this.returnValue = returnValue;\r\n\r\n    if (!this.dispatchEvent(new Event(\"closing\", { cancelable: true }))) {\r\n      this.returnValue = prevReturnValue;\r\n      return;\r\n    }\r\n\r\n    this.open = false;\r\n    this._base.close(returnValue);\r\n    this.dispatchEvent(new Event(\"closed\"));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<dialog\r\n      class=\"base\"\r\n      role=\"${ifDefined(this.alert ? \"alertdialog\" : undefined)}\"\r\n      aria-labelledby=\"m3e-dialog-${this.#id}-header\"\r\n      .returnValue=\"${this.returnValue}\"\r\n      @close=\"${this.#handleClose}\"\r\n      @cancel=\"${this.#handleCancel}\"\r\n      @click=\"${this.#handleClick}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n    >\r\n      <m3e-elevation level=\"3\"></m3e-elevation>\r\n      <m3e-focus-trap ?disabled=\"${this.noFocusTrap}\">\r\n        <div class=\"header\">\r\n          <slot name=\"header\" id=\"m3e-dialog-${this.#id}-header\"></slot>\r\n          ${this.#renderCloseButton()}\r\n        </div>\r\n        <m3e-scroll-container class=\"content\" dividers=\"${this._withActions ? \"above-below\" : \"above\"}\">\r\n          <slot></slot>\r\n        </m3e-scroll-container>\r\n        <div class=\"actions\">\r\n          <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n        </div>\r\n      </m3e-focus-trap>\r\n    </dialog>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCloseButton(): unknown {\r\n    return !this.dismissible\r\n      ? nothing\r\n      : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" class=\"close\" @click=\"${this.hide}\">\r\n          <slot name=\"close-icon\">\r\n            <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n              />\r\n            </svg>\r\n          </slot>\r\n        </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClose(): void {\r\n    if (!this.#escapePressedWithoutCancel) {\r\n      return;\r\n    }\r\n    this.#escapePressedWithoutCancel = true;\r\n    this._base?.dispatchEvent(new Event(\"cancel\", { cancelable: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleCancel(e: Event): void {\r\n    if (e.target !== this._base) return;\r\n    this.#escapePressedWithoutCancel = false;\r\n    e.preventDefault();\r\n    if (this.dispatchEvent(new Event(\"cancel\", { cancelable: true }))) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!this.disableClose && e.target === this._base) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      if (!this.disableClose) {\r\n        this.hide();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    this._withActions = (<HTMLSlotElement>e.target).assignedNodes({ flatten: true }).length > 0;\r\n    setCustomState(this, \"--with-actions\", this._withActions);\r\n  }\r\n}\r\n\r\ninterface M3eDialogElementEventMap extends HTMLElementEventMap {\r\n  opening: Event;\r\n  opened: Event;\r\n  closing: Event;\r\n  closed: Event;\r\n  cancel: Event;\r\n}\r\n\r\nexport interface M3eDialogElement {\r\n  addEventListener<K extends keyof M3eDialogElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[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 M3eDialogElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[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-dialog\": M3eDialogElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\n\r\nimport { M3eDialogElement } from \"./DialogElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a dialog.\r\n * @tag m3e-dialog-trigger\r\n */\r\n@customElement(\"m3e-dialog-trigger\")\r\nexport class M3eDialogTriggerElement 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 M3eDialogElement) {\r\n      this.control.show();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog-trigger\": M3eDialogTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eDialogActionElement","ActionElementBase","constructor","this","returnValue","_onClick","closest","hide","__decorate","property","attribute","prototype","customElement","M3eDialogElement","AttachInternals","LitElement","_M3eDialogElement_id","set","M3eDialogElement_1","__nextId","_M3eDialogElement_open","_M3eDialogElement_escapePressedWithoutCancel","_withActions","_M3eDialogElement_scrollLockController","ScrollLockController","alert","dismissible","disableClose","noFocusTrap","closeLabel","open","__classPrivateFieldGet","value","__classPrivateFieldSet","show","updateComplete","_base","dispatchEvent","Event","cancelable","lock","showModal","_content","scrollTop","focusable","querySelector","focusWhenReady","isConnected","unlock","prevReturnValue","close","render","html","ifDefined","undefined","_M3eDialogElement_instances","_M3eDialogElement_handleClose","_M3eDialogElement_handleCancel","_M3eDialogElement_handleClick","_M3eDialogElement_handleKeyDown","_M3eDialogElement_renderCloseButton","call","_M3eDialogElement_handleActionsSlotChange","nothing","e","target","preventDefault","key","shiftKey","ctrlKey","assignedNodes","flatten","length","setCustomState","styles","css","DesignToken","shape","corner","extraLarge","color","onSurface","surfaceContainerHigh","scrim","unsafeCSS","motion","duration","short3","easing","emphasized","long2","standard","typescale","headline","small","fontSize","fontWeight","lineHeight","tracking","onSurfaceVariant","body","medium","state","query","type","Boolean","reflect","M3eDialogTriggerElement","HtmlFor","connectedCallback","super","parentElement","ariaHasPopup","disconnectedCallback","control"],"mappings":"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"}

package/dist/drawer-container.js

@@ -76,7 +76,7 @@ var _M3eDrawerContainerElement_instances, _M3eDrawerContainerElement_breakpointU
  * @attr start-mode - The behavior mode of the start drawer.
  * @attr start-divider - Whether to show a divider between the start drawer and content for `side` mode.
  *
- * @fires change - Emitted when the state of the start or end drawers change.
+ * @fires change - Dispatched when the state of the start or end drawers change.
  *
  * @cssprop --m3e-drawer-container-color - The background color of the drawer container.
  * @cssprop --m3e-drawer-container-elevation - The elevation level of the drawer container.