@m3e/web 2.5.12 → 2.5.14

package/dist/bottom-sheet.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-sheet.min.js","sources":["../../src/bottom-sheet/BottomSheetActionElement.ts","../../src/bottom-sheet/BottomSheetElement.ts","../../src/bottom-sheet/BottomSheetTriggerElement.ts"],"sourcesContent":["import { ActionElementBase, customElement } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to close a parenting bottom sheet.\r\n * @tag m3e-bottom-sheet-action\r\n *\r\n * @slot - Renders the content of the action.\r\n */\r\n@customElement(\"m3e-bottom-sheet-action\")\r\nexport class M3eBottomSheetActionElement extends ActionElementBase {\r\n  /** @inheritdoc */\r\n  protected override _onClick(): void {\r\n    this.closest(\"m3e-bottom-sheet\")?.hide();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-bottom-sheet-action\": M3eBottomSheetActionElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  computeCssSize,\r\n  DesignToken,\r\n  focusWhenReady,\r\n  hasCustomState,\r\n  prefersReducedMotion,\r\n  ResizeController,\r\n  ScrollLockController,\r\n  setCustomState,\r\n  spaceSeparatedStringConverter,\r\n  VelocityTracker,\r\n  SuppressInitialAnimation,\r\n  ReconnectedCallback,\r\n  registerStyleSheet,\r\n  InertController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { isModifierAllowed, M3eInteractivityChecker } from \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * A sheet used to show secondary content anchored to the bottom of the screen.\r\n *\r\n * @description\r\n * The `m3e-bottom-sheet` component implements a Material 3 bottom sheet with\r\n * gesture‑driven resizing, detent snapping, and adaptive motion. It behaves as\r\n * a heavy surface: transitions use non‑bouncy, decelerating motion.\r\n *\r\n * The sheet supports direct manipulation through vertical drag gestures.\r\n * Movement below an 8px threshold is ignored to ensure reliable tap‑to‑cycle\r\n * behavior on the handle. Once activated, dragging updates the sheet height\r\n * with friction near the minimum height to prevent abrupt collapse.\r\n *\r\n * When detents are defined, the sheet snaps to the nearest detent on release.\r\n * If hideable, downward gestures may dismiss the sheet using either velocity\r\n * or a small distance threshold below the collapsed detent. When no detents\r\n * are present, the sheet behaves as a simple open/hidden surface with a\r\n * bottom‑measured hide threshold.\r\n *\r\n * @example\r\n * The following example shows a modal bottom sheet with a drag handle,\r\n * three detents (`fit`, `half`, and `full`), and an action list. The sheet\r\n * is opened using a dedicated `m3e-bottom-sheet-trigger` associated by ID.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-bottom-sheet-trigger for=\"bottomSheet\">\r\n *     Open Bottom sheet\r\n *   </m3e-bottom-sheet-trigger>\r\n * </m3e-button>\r\n *\r\n * <m3e-bottom-sheet id=\"bottomSheet\" modal handle hideable detents=\"fit half full\">\r\n *   <m3e-action-list>\r\n *     <m3e-list-action autofocus>\r\n *       <m3e-bottom-sheet-action>Google Keep</m3e-bottom-sheet-action>\r\n *       <span slot=\"supporting-text\">Add to a note</span>\r\n *     </m3e-list-action>\r\n *     <m3e-list-action>\r\n *       <m3e-bottom-sheet-action>Google Docs</m3e-bottom-sheet-action>\r\n *       <span slot=\"supporting-text\">Embed in a document</span>\r\n *     </m3e-list-action>\r\n *   </m3e-action-list>\r\n * </m3e-bottom-sheet>\r\n * ```\r\n *\r\n * @tag m3e-bottom-sheet\r\n *\r\n * @slot - Renders the content of the sheet.\r\n * @slot header - Renders the header of the sheet.\r\n *\r\n * @attr detent - The zero‑based index of the detent the sheet should open to.\r\n * @attr detents - Detents (discrete height states) the sheet can snap to.\r\n * @attr handle - Whether to display a drag handle and enable the top region of the sheet as a gesture surface for dragging between detents.\r\n * @attr handle-label - The accessible label given to the drag handle.\r\n * @attr hideable - Whether the bottom sheet can hide when its swiped down.\r\n * @attr hide-friction - The friction coefficient to hide the sheet.\r\n * @attr modal - Whether the bottom sheet behaves as modal.\r\n * @attr open - Whether the bottom sheet is open.\r\n * @attr overshoot-limit - A fractional value, between 0 and 100, indicating the maximum visual overshoot allowed when dragging past the minimum or maximum size.\r\n *\r\n * @fires opening - Dispatched when the sheet begins to open.\r\n * @fires opened - Dispatched when the sheet has opened.\r\n * @fires cancel - Dispatched when the sheet is cancelled.\r\n * @fires closing - Dispatched when the sheet begins to close.\r\n * @fires closed - Dispatched when the sheet has closed.\r\n *\r\n * @cssprop --m3e-bottom-sheet-width - The width of the sheet.\r\n * @cssprop --m3e-bottom-sheet-max-width - The maximum width of the sheet.\r\n * @cssprop --m3e-bottom-sheet-container-color - The background color of the sheet container.\r\n * @cssprop --m3e-bottom-sheet-elevation - The elevation level when not modal.\r\n * @cssprop --m3e-bottom-sheet-modal-elevation - The elevation level when modal.\r\n * @cssprop --m3e-bottom-sheet-full-elevation - The elevation level when full height.\r\n * @cssprop --m3e-bottom-sheet-z-index - The z-index of the non-modal sheet.\r\n * @cssprop --m3e-bottom-sheet-minimized-container-shape - The border radius when minimized.\r\n * @cssprop --m3e-bottom-sheet-container-shape - The border radius of the sheet container.\r\n * @cssprop --m3e-bottom-sheet-full-container-shape - The border radius when full height.\r\n * @cssprop --m3e-bottom-sheet-scrim-color - The color of the scrim overlay.\r\n * @cssprop --m3e-bottom-sheet-scrim-opacity - The opacity of the scrim overlay.\r\n * @cssprop --m3e-bottom-sheet-peek-height - The visible height when minimized.\r\n * @cssprop --m3e-bottom-sheet-compact-top-space - The top space in compact mode.\r\n * @cssprop --m3e-bottom-sheet-top-space - The top space in standard mode.\r\n * @cssprop --m3e-bottom-sheet-padding-block - The vertical padding.\r\n * @cssprop --m3e-bottom-sheet-padding-inline - The horizontal padding.\r\n * @cssprop --m3e-bottom-sheet-handle-container-height - The height of the drag handle container.\r\n * @cssprop --m3e-bottom-sheet-handle-width - The width of the drag handle.\r\n * @cssprop --m3e-bottom-sheet-handle-height - The height of the drag handle.\r\n * @cssprop --m3e-bottom-sheet-handle-shape - The border radius of the handle.\r\n * @cssprop --m3e-bottom-sheet-handle-color - The color of the drag handle.\r\n * @cssprop --m3e-bottom-sheet-handle-focus-ring-offset - The offset of the focus ring around the handle.\r\n * @cssprop --m3e-bottom-sheet-color - The foreground (text) color of the sheet.\r\n * @cssprop --m3e-bottom-sheet-content-font-size - Font size for the sheet content.\r\n * @cssprop --m3e-bottom-sheet-content-font-weight - Font weight for the sheet content.\r\n * @cssprop --m3e-bottom-sheet-content-line-height - Line height for the sheet content.\r\n * @cssprop --m3e-bottom-sheet-content-tracking - Letter spacing (tracking) for the sheet content.\r\n * @cssprop --m3e-bottom-sheet-header-font-size - Font size for the sheet header.\r\n * @cssprop --m3e-bottom-sheet-header-font-weight - Font weight for the sheet header.\r\n * @cssprop --m3e-bottom-sheet-header-line-height - Line height for the sheet header.\r\n * @cssprop --m3e-bottom-sheet-header-tracking - Letter spacing (tracking) for the sheet header.\r\n */\r\n@customElement(\"m3e-bottom-sheet\")\r\nexport class M3eBottomSheetElement extends ReconnectedCallback(SuppressInitialAnimation(AttachInternals(LitElement))) {\r\n  static {\r\n    registerStyleSheet(css`\r\n      @property --_bottom-sheet-height {\r\n        syntax: \"<length>\";\r\n        inherits: false;\r\n        initial-value: 50vh;\r\n      }\r\n      m3e-bottom-sheet > [slot=\"header\"] {\r\n        margin-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem);\r\n        margin-inline: var(--m3e-bottom-sheet-padding-inline, 1rem);\r\n      }\r\n    `);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      position: fixed;\r\n      left: 50%;\r\n      top: calc(100vh - var(--_bottom-sheet-height));\r\n      margin: 0;\r\n      padding: 0;\r\n      outline: none;\r\n      overflow: hidden;\r\n      border: none;\r\n      box-sizing: border-box;\r\n      width: var(--m3e-bottom-sheet-width, 100%);\r\n      max-width: var(--m3e-bottom-sheet-max-width, 40rem);\r\n      height: var(--_bottom-sheet-height);\r\n      color: var(--m3e-bottom-sheet-color, ${DesignToken.color.onSurface});\r\n      background-color: var(--m3e-bottom-sheet-container-color, ${DesignToken.color.surfaceContainerLow});\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `transform ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standardDecelerate},\r\n        border-radius ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host(:not([modal]):not(:is(:state(--full), :--full))) .elevation {\r\n      --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${DesignToken.elevation.level1});\r\n    }\r\n    :host([modal]:not(:is(:state(--full), :--full))) .elevation {\r\n      --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${DesignToken.elevation.level1});\r\n    }\r\n    :host(:is(:state(--full), :--full)) .elevation {\r\n      --m3e-elevation-level: var(--m3e-bottom-sheet-full-elevation, ${DesignToken.elevation.level1});\r\n    }\r\n    :host(:not([modal])) {\r\n      z-index: var(--m3e-bottom-sheet-z-index, 10);\r\n    }\r\n    :host(:not([modal]):not([open])),\r\n    :host([modal]:not(:popover-open)) {\r\n      border-radius: var(--m3e-bottom-sheet-minimized-container-shape, ${DesignToken.shape.corner.none});\r\n      transform: translateX(-50%) translateY(100%);\r\n    }\r\n    :host(:not([modal])[open]:not(:is(:state(--full), :--full))),\r\n    :host([modal]:not(:is(:state(--full), :--full)):popover-open) {\r\n      border-radius: var(--m3e-bottom-sheet-container-shape, ${DesignToken.shape.corner.extraLargeTop});\r\n    }\r\n    :host(:not([modal])[open]:is(:state(--full), :--full)),\r\n    :host([modal]:is(:state(--full), :--full):popover-open) {\r\n      border-radius: var(--m3e-bottom-sheet-full-container-shape, ${DesignToken.shape.corner.extraLargeTop});\r\n    }\r\n    :host(:not([modal])[open]),\r\n    :host([modal]:popover-open) {\r\n      transform: translateX(-50%) translateY(0);\r\n    }\r\n    :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::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([modal]:popover-open)::backdrop {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%),\r\n        transparent\r\n      );\r\n    }\r\n    :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop {\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      :host([modal]:popover-open)::backdrop {\r\n        background-color: color-mix(\r\n          in srgb,\r\n          var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) 0%,\r\n          transparent\r\n        );\r\n      }\r\n    }\r\n    .base {\r\n      display: flex;\r\n      border-radius: inherit;\r\n      flex-direction: column;\r\n      height: 100%;\r\n      --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0);\r\n      --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem);\r\n    }\r\n    @media (max-height: 640px) {\r\n      .base {\r\n        --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem);\r\n      }\r\n    }\r\n    .body {\r\n      flex: 1 1 auto;\r\n      overflow-y: auto;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem);\r\n      padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem);\r\n      font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize});\r\n      font-weight: var(\r\n        --m3e-bottom-sheet-content-font-weight,\r\n        ${DesignToken.typescale.standard.body.medium.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-bottom-sheet-content-line-height,\r\n        ${DesignToken.typescale.standard.body.medium.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking});\r\n    }\r\n    .content {\r\n      height: fit-content;\r\n    }\r\n    :host(:not([handle])) .header {\r\n      display: none;\r\n    }\r\n    :host(:not([handle])) .body,\r\n    .header {\r\n      border-top-left-radius: inherit;\r\n      border-top-right-radius: inherit;\r\n      padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem);\r\n      font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken.typescale.standard.title.large.fontSize});\r\n      font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight});\r\n      line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken.typescale.standard.title.large.lineHeight});\r\n      letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken.typescale.standard.title.large.tracking});\r\n    }\r\n    .header {\r\n      cursor: grab;\r\n      touch-action: none;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n      box-sizing: border-box;\r\n      flex: none;\r\n      display: flex;\r\n      flex-direction: column;\r\n      min-height: 3rem;\r\n      --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken.color.surfaceContainerLow});\r\n    }\r\n    .handle-row {\r\n      position: relative;\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      opacity: 1;\r\n      visibility: visible;\r\n      height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem);\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n        padding ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n        height ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    .handle {\r\n      position: relative;\r\n      width: var(--m3e-bottom-sheet-handle-width, 2rem);\r\n      height: var(--m3e-bottom-sheet-handle-height, 4px);\r\n      border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken.shape.corner.full});\r\n      background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    .handle-touch {\r\n      position: absolute;\r\n      aspect-ratio: 1 / 1;\r\n      height: 3rem;\r\n      left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2));\r\n      right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2));\r\n      top: calc(\r\n        0px - calc(\r\n            calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc(\r\n                var(--m3e-bottom-sheet-handle-height, 4px) / 2\r\n              )\r\n          )\r\n      );\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))),\r\n      :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop,\r\n      :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop,\r\n      :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::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      .handle {\r\n        background-color: ButtonText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __openSheet?: M3eBottomSheetElement;\r\n\r\n  /** @private */ readonly #documentClickHandler = (e: Event) => this.#handleDocumentClick(e);\r\n  /** @private */ readonly #documentKeyDownHandler = (e: KeyboardEvent) => this.#handleDocumentKeyDown(e);\r\n  /** @private */ readonly #windowResizeHandler = () => this.#handleWindowResize();\r\n  /** @private */ readonly #velocityTracker = new VelocityTracker();\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n  /** @private */ readonly #inertController = new InertController(this);\r\n\r\n  /** @private */\r\n  readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    skipInitial: true,\r\n    callback: (x) => this.#handleSectionResize(x),\r\n  });\r\n\r\n  /** @private */ #trigger: Element | null = null;\r\n  /** @private */ #dragState?: {\r\n    startY: number;\r\n    startHeight: number;\r\n    effectiveMaxHeight: number;\r\n    maxHeight: number;\r\n    minHeight: number;\r\n  };\r\n  /** @private */ #dragged = false;\r\n  /** @private */ #activeDetent = 0;\r\n  /** @private */ #requestDetent?: number;\r\n  /** @private */ #cachedContentHeight = 0;\r\n  /** @private */ #cachedHeaderHeight = 0;\r\n  /** @private */ #snapAnimation?: Animation;\r\n\r\n  /**\r\n   * Whether the bottom sheet behaves as modal.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) modal = false;\r\n\r\n  /**\r\n   * Whether the bottom sheet is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n  /**\r\n   * Whether to display a drag handle and enable the top region of the sheet as a gesture\r\n   * surface for dragging between detents.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) handle = false;\r\n\r\n  /**\r\n   * The accessible label given to the drag handle.\r\n   * @default \"Drag handle\"\r\n   */\r\n  @property({ attribute: \"handle-label\" }) handleLabel = \"Drag handle\";\r\n\r\n  /**\r\n   * Detents (discrete height states) the sheet can snap to.\r\n   * @default []\r\n   */\r\n  @property({ attribute: \"detents\", converter: spaceSeparatedStringConverter }) detents: string[] = [];\r\n\r\n  /**\r\n   * The zero‑based index of the detent the sheet should open to.\r\n   * @default 0\r\n   */\r\n  @property({ type: Number }) detent = 0;\r\n\r\n  /**\r\n   * Whether the bottom sheet can hide when its swiped down.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) hideable = false;\r\n\r\n  /**\r\n   * The friction coefficient to hide the sheet.\r\n   * @default 0.5\r\n   */\r\n  @property({ attribute: \"hide-friction\", type: Number }) hideFriction = 0.5;\r\n\r\n  /**\r\n   * A fractional value, between 0 and 100, indicating the maximum visual overshoot allowed when dragging past the minimum or maximum size.\r\n   * @default 4\r\n   */\r\n  @property({ attribute: \"overshoot-limit\", type: Number }) overshootLimit = 4;\r\n\r\n  /**\r\n   * Shows the sheet.\r\n   * @param {number} detent The zero‑based index of the detent the sheet should open to.\r\n   */\r\n  show(detent: number = this.detent): void {\r\n    if (!this.open) {\r\n      this.#requestDetent = detent;\r\n      this.open = true;\r\n    } else if (detent !== undefined && this.#activeDetent !== detent) {\r\n      this.#snapToDetent(detent);\r\n    }\r\n  }\r\n\r\n  /** Hides the sheet. */\r\n  hide(): void {\r\n    this.open = false;\r\n  }\r\n\r\n  /**\r\n   * Toggles the opened state of the sheet.\r\n   * @param {number} detent The zero‑based index of the detent the sheet should open to.\r\n   */\r\n  toggle(detent?: number): void {\r\n    if (this.open) {\r\n      this.hide();\r\n    } else {\r\n      this.show(detent);\r\n    }\r\n  }\r\n\r\n  /** Moves the sheet to the next detent. */\r\n  cycle(): void {\r\n    if (!this.open) {\r\n      this.show();\r\n    } else if (this.detents.length > 0) {\r\n      if (this.#activeDetent < this.detents.length - 1) {\r\n        this.#activeDetent++;\r\n        this.#snapToDetent(this.#activeDetent);\r\n      } else if (this.hideable) {\r\n        this.hide();\r\n      }\r\n    } else {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"modal\")) {\r\n      this.role = this.modal ? \"dialog\" : \"region\";\r\n      this.ariaModal = this.modal ? \"true\" : null;\r\n      this.popover = this.modal ? \"manual\" : null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"open\")) {\r\n      if (this.open) {\r\n        if (!this.dispatchEvent(new Event(\"opening\", { cancelable: true }))) {\r\n          this.open = false;\r\n          return;\r\n        }\r\n\r\n        // Only one sheet can be open at a time.\r\n        if (M3eBottomSheetElement.__openSheet !== this) {\r\n          M3eBottomSheetElement.__openSheet?.hide();\r\n        }\r\n        M3eBottomSheetElement.__openSheet = this;\r\n\r\n        this.inert = false;\r\n\r\n        window.addEventListener(\"resize\", this.#windowResizeHandler);\r\n\r\n        // If there are detents (regardless of handle) open to the requested, default (or first) detent.\r\n        // Otherwise, open to fit unless its greater than half.\r\n\r\n        if (this.detents.length > 0) {\r\n          this.#activeDetent = Math.min(Math.max(0, this.#requestDetent ?? this.detent), this.detents.length - 1);\r\n          this.#updateHeight(this.#computeDetentHeight(this.detents[this.#activeDetent]));\r\n        } else {\r\n          this.#updateHeight(Math.min(this.#computeDetentHeight(\"fit\"), this.#computeDetentHeight(\"half\")));\r\n        }\r\n        this.#requestDetent = undefined;\r\n      } else {\r\n        if (!this.dispatchEvent(new Event(\"closing\", { cancelable: true }))) {\r\n          this.open = true;\r\n          return;\r\n        }\r\n\r\n        // The following ensures layout is stable so that first tab isn't \"skipped\"\r\n        requestAnimationFrame(() => (this.inert = true));\r\n\r\n        window.removeEventListener(\"resize\", this.#windowResizeHandler);\r\n\r\n        if (M3eBottomSheetElement.__openSheet === this) {\r\n          M3eBottomSheetElement.__openSheet = undefined;\r\n        }\r\n      }\r\n\r\n      if (this.modal) {\r\n        if (this.open) {\r\n          this.#trigger = document.activeElement;\r\n          this.#inertController.lock();\r\n          this.#scrollLockController.lock();\r\n          this.showPopover();\r\n          requestAnimationFrame(() => {\r\n            document.addEventListener(\"click\", this.#documentClickHandler);\r\n            document.addEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n          });\r\n\r\n          let focusable: HTMLElement | null | undefined = this.querySelector<HTMLElement>(\"[autofocus]\");\r\n          if (!focusable || !M3eInteractivityChecker.isFocusable(focusable)) {\r\n            focusable = this.shadowRoot?.querySelector(\".handle\");\r\n          }\r\n          if (focusable) {\r\n            focusWhenReady(focusable);\r\n          }\r\n        } else {\r\n          this.#snapToHeight(0).then(() => {\r\n            this.#inertController.unlock();\r\n            this.#scrollLockController.unlock();\r\n            document.removeEventListener(\"click\", this.#documentClickHandler);\r\n            document.removeEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n            this.hidePopover();\r\n            if (this.#trigger instanceof HTMLElement) {\r\n              this.#trigger.focus();\r\n            }\r\n            this.#trigger = null;\r\n          });\r\n        }\r\n      }\r\n\r\n      this.dispatchEvent(new Event(this.open ? \"opened\" : \"closed\"));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-trap ?disabled=\"${!this.modal}\">\r\n      <div class=\"base\">\r\n        <m3e-elevation class=\"elevation\"></m3e-elevation>\r\n        <div\r\n          class=\"header\"\r\n          @pointerdown=\"${this.#handleHeaderPointerDown}\"\r\n          @pointermove=\"${this.#handleHeaderPointerMove}\"\r\n          @pointerup=\"${this.#handleHeaderPointerUp}\"\r\n        >\r\n          ${this.handle\r\n            ? html`<div class=\"handle-row\">\r\n                <div\r\n                  id=\"handle\"\r\n                  class=\"handle\"\r\n                  role=\"button\"\r\n                  aria-label=\"${this.handleLabel}\"\r\n                  tabindex=\"0\"\r\n                  @click=\"${this.#handleDragHandleClick}\"\r\n                  @keydown=\"${this.#handleDragHandleKeyDown}\"\r\n                >\r\n                  <m3e-focus-ring class=\"focus-ring\" for=\"handle\"></m3e-focus-ring>\r\n                  <div class=\"handle-touch\" aria-hidden=\"true\"></div>\r\n                </div>\r\n              </div>`\r\n            : nothing}\r\n          <slot name=\"header\"></slot>\r\n        </div>\r\n        <div class=\"body\">\r\n          <div class=\"content\">\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </m3e-focus-trap>`;\r\n  }\r\n\r\n  /** @private */\r\n  #initialize(): void {\r\n    const content = this.shadowRoot?.querySelector<HTMLElement>(\".content\");\r\n    if (content) {\r\n      this.#cachedContentHeight = content.clientHeight;\r\n      this.#resizeController.observe(content);\r\n    }\r\n\r\n    const header = this.shadowRoot?.querySelector<HTMLElement>(\".header\");\r\n    if (header) {\r\n      this.#cachedHeaderHeight = header.clientHeight;\r\n      this.#resizeController.observe(header);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleHeaderPointerDown(e: PointerEvent): void {\r\n    if (e.target instanceof HTMLElement && M3eInteractivityChecker.isFocusable(e.target)) {\r\n      return;\r\n    }\r\n\r\n    (<HTMLElement>e.target).setPointerCapture(e.pointerId);\r\n    (<HTMLElement>e.target).style.cursor = \"grabbing\";\r\n\r\n    this.#velocityTracker.reset();\r\n    this.#velocityTracker.add(e.clientY);\r\n\r\n    const maxHeight = this.#computeMaxHeight();\r\n    const effectiveMaxHeight =\r\n      this.detents.length > 0 ? Math.max(...this.detents.map((x) => this.#computeDetentHeight(x))) : maxHeight;\r\n\r\n    this.#dragState = {\r\n      startY: e.clientY,\r\n      startHeight: this.clientHeight,\r\n      effectiveMaxHeight,\r\n      maxHeight,\r\n      minHeight: this.#computeMinHeight(),\r\n    };\r\n    this.#dragged = false;\r\n  }\r\n\r\n  /** @private */\r\n  #handleHeaderPointerMove(e: PointerEvent): void {\r\n    if (!this.#dragState) {\r\n      return;\r\n    }\r\n\r\n    const minDragThreshold = 8;\r\n    if (Math.abs(e.clientY - this.#dragState.startY) <= minDragThreshold) {\r\n      // Ignore movement under threshold\r\n      return;\r\n    }\r\n\r\n    (e.getCoalescedEvents?.() ?? [e]).forEach((x) => this.#velocityTracker.add(x.clientY, e.timeStamp));\r\n\r\n    let newHeight = this.#dragState.startHeight - (e.clientY - this.#dragState.startY);\r\n    if (newHeight < this.#dragState.minHeight) {\r\n      if (this.hideable) {\r\n        const overshoot = (this.#dragState.minHeight - newHeight) * this.hideFriction;\r\n        newHeight = this.#dragState.minHeight - overshoot;\r\n      } else {\r\n        const overshoot = this.#dragState.minHeight - newHeight;\r\n        const overshootLimit = this.#dragState.maxHeight * (this.overshootLimit / 100);\r\n        const compressed = (overshootLimit * overshoot) / (overshoot + overshootLimit);\r\n        newHeight = this.#dragState.minHeight - compressed;\r\n      }\r\n    } else if (newHeight > this.#dragState.effectiveMaxHeight) {\r\n      const overshoot = newHeight - this.#dragState.effectiveMaxHeight;\r\n      const overshootLimit = this.#dragState.maxHeight * (this.overshootLimit / 100);\r\n      const compressed = (overshootLimit * overshoot) / (overshoot + overshootLimit);\r\n      newHeight = this.#dragState.effectiveMaxHeight + compressed;\r\n    }\r\n\r\n    this.#updateHeight(newHeight);\r\n    this.#dragged = true;\r\n  }\r\n\r\n  /** @private */\r\n  #handleHeaderPointerUp(e: PointerEvent): void {\r\n    if (!this.#dragState) return;\r\n\r\n    try {\r\n      (<HTMLElement>e.target).releasePointerCapture(e.pointerId);\r\n      (<HTMLElement>e.target).style.cursor = \"\";\r\n\r\n      if (!this.#dragged) return;\r\n\r\n      const significantVelocityThreshold = e.pointerType === \"touch\" ? 1200 : 500;\r\n      const velocity = this.#velocityTracker.getVelocity();\r\n\r\n      this.#velocityTracker.reset();\r\n\r\n      if (this.hideable && velocity >= significantVelocityThreshold) {\r\n        if (this.dispatchEvent(new Event(\"cancel\", { cancelable: true }))) {\r\n          this.hide();\r\n        }\r\n      } else if (Math.abs(velocity) >= significantVelocityThreshold) {\r\n        if (this.detents.length > 0) {\r\n          const nextDetent = this.#getNextHigherDetent();\r\n          if (nextDetent !== this.#activeDetent) {\r\n            this.#snapToDetent(nextDetent);\r\n          }\r\n        } else {\r\n          this.#snapToHeight(this.#computeDetentHeight(\"full\"));\r\n        }\r\n      } else {\r\n        const hideDistanceThreshold = 20;\r\n        if (this.hideable) {\r\n          const collapsed = this.#dragState.minHeight;\r\n          if (this.clientHeight < collapsed - hideDistanceThreshold) {\r\n            this.hide();\r\n            return;\r\n          }\r\n        }\r\n\r\n        if (this.detents.length > 0) {\r\n          this.#snapToDetent(this.#getClosestDetent());\r\n        } else if (this.clientHeight < this.#dragState.minHeight) {\r\n          this.#snapToHeight(this.#dragState.minHeight);\r\n        } else if (this.clientHeight > this.#dragState.effectiveMaxHeight) {\r\n          this.#snapToHeight(this.#dragState.effectiveMaxHeight);\r\n        }\r\n      }\r\n    } finally {\r\n      this.#dragState = undefined;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: Event): void {\r\n    if (\r\n      this.open &&\r\n      this.modal &&\r\n      !e.composedPath().includes(this) &&\r\n      this.dispatchEvent(new Event(\"cancel\", { cancelable: true }))\r\n    ) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentKeyDown(e: KeyboardEvent): void {\r\n    if (this.open && this.modal && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n\r\n      if (this.dispatchEvent(new Event(\"cancel\", { cancelable: true }))) {\r\n        this.hide();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleWindowResize(): void {\r\n    if (this.detents.length > 0 && this.detents[this.#activeDetent] === \"half\") {\r\n      this.#updateHeight(this.#computeDetentHeight(\"half\"));\r\n      return;\r\n    }\r\n\r\n    const maxHeight = this.#computeMaxHeight();\r\n    if (hasCustomState(this, \"--full\")) {\r\n      this.#updateHeight(maxHeight);\r\n    } else if (this.clientHeight > maxHeight) {\r\n      this.#updateHeight(maxHeight);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDragHandleClick(): void {\r\n    if (!this.#dragged) {\r\n      this.cycle();\r\n    }\r\n    this.#dragged = false;\r\n  }\r\n\r\n  /** @private */\r\n  #handleDragHandleKeyDown(e: KeyboardEvent): void {\r\n    if (e.defaultPrevented || !isModifierAllowed(e)) return;\r\n\r\n    switch (e.key) {\r\n      case \"Up\":\r\n      case \"ArrowUp\":\r\n        e.preventDefault();\r\n        if (this.detents.length > 0) {\r\n          const nextDetent = this.#getNextHigherDetent();\r\n          if (nextDetent !== this.#activeDetent) {\r\n            this.#snapToDetent(nextDetent);\r\n          }\r\n        } else {\r\n          this.#snapToHeight(this.#computeDetentHeight(\"full\"));\r\n        }\r\n        break;\r\n\r\n      case \"Down\":\r\n      case \"ArrowDown\":\r\n        e.preventDefault();\r\n        if (this.detents.length > 0) {\r\n          const nextDetent = this.#getNextLowerDetent();\r\n          if (nextDetent !== this.#activeDetent) {\r\n            this.#snapToDetent(nextDetent);\r\n          } else if (this.hideable) {\r\n            this.hide();\r\n          }\r\n        } else if (this.hideable) {\r\n          this.hide();\r\n        }\r\n\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #getNextHigherDetent(): number {\r\n    const currentHeight = this.clientHeight;\r\n    let nextHeight = Infinity;\r\n    let nextDetent = this.#activeDetent;\r\n    for (let i = 0; i < this.detents.length; i++) {\r\n      if (i === this.#activeDetent) continue;\r\n      const detentHeight = this.#computeDetentHeight(this.detents[i]);\r\n      if (detentHeight > currentHeight && detentHeight < nextHeight) {\r\n        nextHeight = detentHeight;\r\n        nextDetent = i;\r\n      }\r\n    }\r\n    return nextDetent;\r\n  }\r\n\r\n  /** @private */\r\n  #getNextLowerDetent(): number {\r\n    const currentHeight = this.clientHeight;\r\n    let nextHeight = -Infinity;\r\n    let nextDetent = this.#activeDetent;\r\n    for (let i = 0; i < this.detents.length; i++) {\r\n      if (i === this.#activeDetent) continue;\r\n      const detentHeight = this.#computeDetentHeight(this.detents[i]);\r\n      if (detentHeight < currentHeight && detentHeight > nextHeight) {\r\n        nextHeight = detentHeight;\r\n        nextDetent = i;\r\n      }\r\n    }\r\n    return nextDetent;\r\n  }\r\n\r\n  /** @private */\r\n  #getClosestDetent(): number {\r\n    const currentHeight = this.clientHeight;\r\n    let closestDetent = this.#activeDetent;\r\n    let closestDistance = Infinity;\r\n\r\n    for (let i = 0; i < this.detents.length; i++) {\r\n      const detentHeight = this.#computeDetentHeight(this.detents[i]);\r\n      const distance = Math.abs(currentHeight - detentHeight);\r\n\r\n      if (distance < closestDistance) {\r\n        closestDistance = distance;\r\n        closestDetent = i;\r\n      }\r\n    }\r\n    return closestDetent;\r\n  }\r\n\r\n  /** @private */\r\n  #computeDetentHeight(detent: string): number {\r\n    switch (detent) {\r\n      case \"collapsed\":\r\n        return this.#computeMinHeight();\r\n      case \"half\":\r\n        return this.#computeMaxHeight() * 0.5;\r\n      case \"full\":\r\n        return this.#computeMaxHeight();\r\n      case \"fit\":\r\n        return this.#computeFitHeight();\r\n    }\r\n\r\n    if (detent.endsWith(\"%\")) {\r\n      return this.#computeMaxHeight() * (parseFloat(detent) / 100);\r\n    }\r\n\r\n    if (detent.endsWith(\"px\")) {\r\n      return parseFloat(detent);\r\n    }\r\n\r\n    return this.#computeMinHeight();\r\n  }\r\n\r\n  /** @private */\r\n  #computeMaxHeight(): number {\r\n    const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n    return window.innerHeight - (base ? computeCssSize(base, \"var(--_bottom-sheet-top-space)\") : 0);\r\n  }\r\n\r\n  /** @private */\r\n  #computeMinHeight(): number {\r\n    return this.detents.includes(\"fit\") && !this.detents.includes(\"collapsed\")\r\n      ? this.#computeFitHeight()\r\n      : this.#computePeekHeight();\r\n  }\r\n\r\n  /** @private */\r\n  #computePeekHeight(): number {\r\n    const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n    return this.#cachedHeaderHeight + (base ? computeCssSize(base, \"var(--_bottom-sheet-peek-height)\") : 0);\r\n  }\r\n\r\n  /** @private */\r\n  #computeFitHeight(): number {\r\n    const body = this.shadowRoot?.querySelector<HTMLElement>(\".body\");\r\n    if (!body) {\r\n      return 0;\r\n    }\r\n\r\n    const bodyStyle = getComputedStyle(body);\r\n    return (\r\n      this.#cachedHeaderHeight +\r\n      this.#cachedContentHeight +\r\n      parseFloat(bodyStyle.paddingBlockStart) +\r\n      parseFloat(bodyStyle.paddingBlockEnd)\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleSectionResize(entries: ResizeObserverEntry[]): void {\r\n    const oldCachedContentHeight = this.#cachedContentHeight;\r\n    const oldCachedHeaderHeight = this.#cachedHeaderHeight;\r\n\r\n    for (const entry of entries) {\r\n      if (entry.target.classList.contains(\"content\")) {\r\n        this.#cachedContentHeight = (<ResizeObserverSize>(\r\n          (Array.isArray(entry.borderBoxSize) ? entry.borderBoxSize[0] : entry.borderBoxSize)\r\n        )).blockSize;\r\n      } else if (entry.target.classList.contains(\"header\")) {\r\n        this.#cachedHeaderHeight = (<ResizeObserverSize>(\r\n          (Array.isArray(entry.borderBoxSize) ? entry.borderBoxSize[0] : entry.borderBoxSize)\r\n        )).blockSize;\r\n      }\r\n    }\r\n\r\n    if (\r\n      this.open &&\r\n      this.detents.length > 0 &&\r\n      (oldCachedContentHeight !== this.#cachedContentHeight || oldCachedHeaderHeight !== this.#cachedHeaderHeight)\r\n    ) {\r\n      switch (this.detents[this.#activeDetent]) {\r\n        case \"fit\":\r\n          this.#updateHeight(this.#computeFitHeight());\r\n          break;\r\n\r\n        case \"collapsed\":\r\n          this.#updateHeight(this.#computeMinHeight());\r\n          break;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #snapToDetent(detent: number): void {\r\n    if (detent >= 0 && detent < this.detents.length) {\r\n      this.#activeDetent = detent;\r\n      this.#snapToHeight(this.#computeDetentHeight(this.detents[detent]));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #snapToHeight(height: number): Promise<void> {\r\n    if (this.#snapAnimation) {\r\n      this.#updateHeight(this.clientHeight);\r\n      this.#snapAnimation?.cancel();\r\n      this.#snapAnimation = undefined;\r\n    }\r\n\r\n    if (!prefersReducedMotion()) {\r\n      this.#snapAnimation = this.animate(\r\n        [{ \"--_bottom-sheet-height\": `${this.clientHeight}px` }, { \"--_bottom-sheet-height\": `${height}px` }],\r\n        {\r\n          duration: 250,\r\n          easing: \"cubic-bezier(0.2, 0.0, 0, 1.0)\",\r\n        },\r\n      );\r\n      this.#snapAnimation.onfinish = () => {\r\n        this.#updateHeight(height);\r\n        this.#snapAnimation = undefined;\r\n      };\r\n      await this.#snapAnimation.finished;\r\n    } else {\r\n      this.#updateHeight(height);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateHeight(height: number): void {\r\n    this.style.setProperty(\"--_bottom-sheet-height\", `${height}px`);\r\n    setCustomState(this, \"--full\", height === this.#computeMaxHeight());\r\n    const content = this.shadowRoot?.querySelector<HTMLElement>(\".content\");\r\n    if (content) {\r\n      content.inert = height <= this.#computePeekHeight();\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eBottomSheetElementEventMap 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 M3eBottomSheetElement {\r\n  addEventListener<K extends keyof M3eBottomSheetElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eBottomSheetElement, ev: M3eBottomSheetElementEventMap[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 M3eBottomSheetElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eBottomSheetElement, ev: M3eBottomSheetElementEventMap[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-bottom-sheet\": M3eBottomSheetElement;\r\n  }\r\n}\r\n","import { property } from \"lit/decorators.js\";\r\n\r\nimport { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eBottomSheetElement } from \"./BottomSheetElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to trigger a bottom sheet.\r\n * @tag m3e-bottom-sheet-trigger\r\n *\r\n * @slot - Renders the content of the trigger.\r\n *\r\n * @attr detent - The zero‑based index of the detent the sheet should open to.\r\n * @attr secondary - Marks this trigger as a secondary trigger for accessibility. Secondary triggers do not receive ARIA ownership.\r\n */\r\n@customElement(\"m3e-bottom-sheet-trigger\")\r\nexport class M3eBottomSheetTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /**\r\n   * The zero‑based index of the detent the sheet should open to.\r\n   * @default undefined\r\n   */\r\n  @property({ type: Number }) detent?: number;\r\n\r\n  /**\r\n   * Marks this trigger as a secondary trigger for accessibility. Secondary triggers do not receive ARIA ownership.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) secondary = false;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    if (control instanceof M3eBottomSheetElement) {\r\n      super.attach(control);\r\n\r\n      if (this.parentElement) {\r\n        if (!control.modal) {\r\n          if (!this.secondary) {\r\n            this.parentElement.ariaExpanded = \"false\";\r\n            addAriaReferencedId(this.parentElement, \"aria-controls\", control.id);\r\n            if (this.parentElement.id) {\r\n              addAriaReferencedId(control, \"aria-labelledby\", this.parentElement.id);\r\n            }\r\n          }\r\n        } else {\r\n          this.parentElement.ariaHasPopup = \"dialog\";\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control && this.parentElement && !this.secondary) {\r\n      removeAriaReferencedId(this.parentElement, \"aria-controls\", this.control.id);\r\n    }\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override _onClick(): void {\r\n    if (this.control instanceof M3eBottomSheetElement) {\r\n      if (this.control.modal) {\r\n        this.control.show(this.detent);\r\n      } else {\r\n        this.control.toggle(this.detent);\r\n        if (!this.secondary && this.parentElement) {\r\n          this.parentElement.ariaExpanded = `${this.control.open}`;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-bottom-sheet-trigger\": M3eBottomSheetTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eBottomSheetActionElement","ActionElementBase","_onClick","this","closest","hide","__decorate","customElement","M3eBottomSheetElement","M3eBottomSheetElement_1","ReconnectedCallback","SuppressInitialAnimation","AttachInternals","LitElement","constructor","_M3eBottomSheetElement_documentClickHandler","set","e","__classPrivateFieldGet","call","_M3eBottomSheetElement_documentKeyDownHandler","_M3eBottomSheetElement_windowResizeHandler","_M3eBottomSheetElement_instances","_M3eBottomSheetElement_handleWindowResize","_M3eBottomSheetElement_velocityTracker","VelocityTracker","_M3eBottomSheetElement_scrollLockController","ScrollLockController","_M3eBottomSheetElement_inertController","InertController","_M3eBottomSheetElement_resizeController","ResizeController","target","skipInitial","callback","x","_M3eBottomSheetElement_handleSectionResize","_M3eBottomSheetElement_trigger","_M3eBottomSheetElement_dragState","_M3eBottomSheetElement_dragged","_M3eBottomSheetElement_activeDetent","_M3eBottomSheetElement_requestDetent","_M3eBottomSheetElement_cachedContentHeight","_M3eBottomSheetElement_cachedHeaderHeight","_M3eBottomSheetElement_snapAnimation","modal","open","handle","handleLabel","detents","detent","hideable","hideFriction","overshootLimit","show","undefined","_M3eBottomSheetElement_snapToDetent","__classPrivateFieldSet","toggle","cycle","length","_a","update","changedProperties","super","has","role","ariaModal","popover","reconnectedCallback","_M3eBottomSheetElement_initialize","firstUpdated","_changedProperties","updated","dispatchEvent","Event","cancelable","__openSheet","inert","window","addEventListener","Math","min","max","_M3eBottomSheetElement_updateHeight","_M3eBottomSheetElement_computeDetentHeight","requestAnimationFrame","removeEventListener","document","activeElement","lock","showPopover","focusable","querySelector","M3eInteractivityChecker","isFocusable","shadowRoot","focusWhenReady","_M3eBottomSheetElement_snapToHeight","then","unlock","hidePopover","HTMLElement","focus","render","html","_M3eBottomSheetElement_handleHeaderPointerDown","_M3eBottomSheetElement_handleHeaderPointerMove","_M3eBottomSheetElement_handleHeaderPointerUp","_M3eBottomSheetElement_handleDragHandleClick","_M3eBottomSheetElement_handleDragHandleKeyDown","nothing","content","clientHeight","observe","header","setPointerCapture","pointerId","style","cursor","reset","add","clientY","maxHeight","effectiveMaxHeight","map","startY","startHeight","minHeight","_M3eBottomSheetElement_computeMinHeight","abs","getCoalescedEvents","forEach","timeStamp","newHeight","overshoot","compressed","releasePointerCapture","significantVelocityThreshold","pointerType","velocity","getVelocity","nextDetent","hideDistanceThreshold","collapsed","_M3eBottomSheetElement_getClosestDetent","composedPath","includes","key","shiftKey","ctrlKey","preventDefault","hasCustomState","defaultPrevented","isModifierAllowed","currentHeight","nextHeight","Infinity","i","detentHeight","closestDetent","closestDistance","distance","_M3eBottomSheetElement_computeMaxHeight","_M3eBottomSheetElement_computeFitHeight","endsWith","parseFloat","base","innerHeight","computeCssSize","body","bodyStyle","getComputedStyle","paddingBlockStart","paddingBlockEnd","entries","oldCachedContentHeight","oldCachedHeaderHeight","entry","classList","contains","Array","isArray","borderBoxSize","blockSize","async","height","cancel","prefersReducedMotion","animate","duration","easing","onfinish","finished","setProperty","setCustomState","_M3eBottomSheetElement_computePeekHeight","registerStyleSheet","css","styles","DesignToken","color","onSurface","surfaceContainerLow","unsafeCSS","motion","medium2","standardDecelerate","standard","elevation","level1","shape","corner","none","extraLargeTop","short3","scrim","long2","scrollbar","thinWidth","typescale","medium","fontSize","fontWeight","lineHeight","tracking","title","large","full","onSurfaceVariant","property","type","Boolean","reflect","prototype","attribute","converter","spaceSeparatedStringConverter","Number","M3eBottomSheetTriggerElement","HtmlFor","secondary","attach","control","parentElement","ariaHasPopup","ariaExpanded","addAriaReferencedId","id","detach","removeAriaReferencedId"],"mappings":"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"}
+{"version":3,"file":"bottom-sheet.min.js","sources":["../../src/bottom-sheet/BottomSheetActionElement.ts","../../src/bottom-sheet/BottomSheetElement.ts","../../src/bottom-sheet/BottomSheetTriggerElement.ts"],"sourcesContent":["import { ActionElementBase, customElement } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to close a parenting bottom sheet.\r\n * @tag m3e-bottom-sheet-action\r\n *\r\n * @slot - Renders the content of the action.\r\n */\r\n@customElement(\"m3e-bottom-sheet-action\")\r\nexport class M3eBottomSheetActionElement extends ActionElementBase {\r\n  /** @inheritdoc */\r\n  protected override _onClick(): void {\r\n    this.closest(\"m3e-bottom-sheet\")?.hide();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-bottom-sheet-action\": M3eBottomSheetActionElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  computeCssSize,\r\n  DesignToken,\r\n  focusWhenReady,\r\n  hasCustomState,\r\n  prefersReducedMotion,\r\n  ResizeController,\r\n  ScrollLockController,\r\n  setCustomState,\r\n  spaceSeparatedStringConverter,\r\n  VelocityTracker,\r\n  SuppressInitialAnimation,\r\n  ReconnectedCallback,\r\n  registerStyleSheet,\r\n  InertController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { isModifierAllowed, M3eInteractivityChecker } from \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * A sheet used to show secondary content anchored to the bottom of the screen.\r\n *\r\n * @description\r\n * The `m3e-bottom-sheet` component implements a Material 3 bottom sheet with\r\n * gesture‑driven resizing, detent snapping, and adaptive motion. It behaves as\r\n * a heavy surface: transitions use non‑bouncy, decelerating motion.\r\n *\r\n * The sheet supports direct manipulation through vertical drag gestures.\r\n * Movement below an 8px threshold is ignored to ensure reliable tap‑to‑cycle\r\n * behavior on the handle. Once activated, dragging updates the sheet height\r\n * with friction near the minimum height to prevent abrupt collapse.\r\n *\r\n * When detents are defined, the sheet snaps to the nearest detent on release.\r\n * If hideable, downward gestures may dismiss the sheet using either velocity\r\n * or a small distance threshold below the collapsed detent. When no detents\r\n * are present, the sheet behaves as a simple open/hidden surface with a\r\n * bottom‑measured hide threshold.\r\n *\r\n * @example\r\n * The following example shows a modal bottom sheet with a drag handle,\r\n * three detents (`fit`, `half`, and `full`), and an action list. The sheet\r\n * is opened using a dedicated `m3e-bottom-sheet-trigger` associated by ID.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-bottom-sheet-trigger for=\"bottomSheet\">\r\n *     Open Bottom sheet\r\n *   </m3e-bottom-sheet-trigger>\r\n * </m3e-button>\r\n *\r\n * <m3e-bottom-sheet id=\"bottomSheet\" modal handle hideable detents=\"fit half full\">\r\n *   <m3e-action-list>\r\n *     <m3e-list-action autofocus>\r\n *       <m3e-bottom-sheet-action>Google Keep</m3e-bottom-sheet-action>\r\n *       <span slot=\"supporting-text\">Add to a note</span>\r\n *     </m3e-list-action>\r\n *     <m3e-list-action>\r\n *       <m3e-bottom-sheet-action>Google Docs</m3e-bottom-sheet-action>\r\n *       <span slot=\"supporting-text\">Embed in a document</span>\r\n *     </m3e-list-action>\r\n *   </m3e-action-list>\r\n * </m3e-bottom-sheet>\r\n * ```\r\n *\r\n * @tag m3e-bottom-sheet\r\n *\r\n * @slot - Renders the content of the sheet.\r\n * @slot header - Renders the header of the sheet.\r\n *\r\n * @attr detent - The zero‑based index of the detent the sheet should open to.\r\n * @attr detents - Detents (discrete height states) the sheet can snap to.\r\n * @attr handle - Whether to display a drag handle and enable the top region of the sheet as a gesture surface for dragging between detents.\r\n * @attr handle-label - The accessible label given to the drag handle.\r\n * @attr hideable - Whether the bottom sheet can hide when its swiped down.\r\n * @attr hide-friction - The friction coefficient to hide the sheet.\r\n * @attr modal - Whether the bottom sheet behaves as modal.\r\n * @attr open - Whether the bottom sheet is open.\r\n * @attr overshoot-limit - A fractional value, between 0 and 100, indicating the maximum visual overshoot allowed when dragging past the minimum or maximum size.\r\n *\r\n * @fires opening - Dispatched when the sheet begins to open.\r\n * @fires opened - Dispatched when the sheet has opened.\r\n * @fires cancel - Dispatched when the sheet is cancelled.\r\n * @fires closing - Dispatched when the sheet begins to close.\r\n * @fires closed - Dispatched when the sheet has closed.\r\n *\r\n * @cssprop --m3e-bottom-sheet-width - The width of the sheet.\r\n * @cssprop --m3e-bottom-sheet-max-width - The maximum width of the sheet.\r\n * @cssprop --m3e-bottom-sheet-container-color - The background color of the sheet container.\r\n * @cssprop --m3e-bottom-sheet-elevation - The elevation level when not modal.\r\n * @cssprop --m3e-bottom-sheet-modal-elevation - The elevation level when modal.\r\n * @cssprop --m3e-bottom-sheet-full-elevation - The elevation level when full height.\r\n * @cssprop --m3e-bottom-sheet-z-index - The z-index of the non-modal sheet.\r\n * @cssprop --m3e-bottom-sheet-minimized-container-shape - The border radius when minimized.\r\n * @cssprop --m3e-bottom-sheet-container-shape - The border radius of the sheet container.\r\n * @cssprop --m3e-bottom-sheet-full-container-shape - The border radius when full height.\r\n * @cssprop --m3e-bottom-sheet-scrim-color - The color of the scrim overlay.\r\n * @cssprop --m3e-bottom-sheet-scrim-opacity - The opacity of the scrim overlay.\r\n * @cssprop --m3e-bottom-sheet-peek-height - The visible height when minimized.\r\n * @cssprop --m3e-bottom-sheet-compact-top-space - The top space in compact mode.\r\n * @cssprop --m3e-bottom-sheet-top-space - The top space in standard mode.\r\n * @cssprop --m3e-bottom-sheet-padding-block - The vertical padding.\r\n * @cssprop --m3e-bottom-sheet-padding-inline - The horizontal padding.\r\n * @cssprop --m3e-bottom-sheet-handle-container-height - The height of the drag handle container.\r\n * @cssprop --m3e-bottom-sheet-handle-width - The width of the drag handle.\r\n * @cssprop --m3e-bottom-sheet-handle-height - The height of the drag handle.\r\n * @cssprop --m3e-bottom-sheet-handle-shape - The border radius of the handle.\r\n * @cssprop --m3e-bottom-sheet-handle-color - The color of the drag handle.\r\n * @cssprop --m3e-bottom-sheet-handle-focus-ring-offset - The offset of the focus ring around the handle.\r\n * @cssprop --m3e-bottom-sheet-color - The foreground (text) color of the sheet.\r\n * @cssprop --m3e-bottom-sheet-content-font-size - Font size for the sheet content.\r\n * @cssprop --m3e-bottom-sheet-content-font-weight - Font weight for the sheet content.\r\n * @cssprop --m3e-bottom-sheet-content-line-height - Line height for the sheet content.\r\n * @cssprop --m3e-bottom-sheet-content-tracking - Letter spacing (tracking) for the sheet content.\r\n * @cssprop --m3e-bottom-sheet-header-font-size - Font size for the sheet header.\r\n * @cssprop --m3e-bottom-sheet-header-font-weight - Font weight for the sheet header.\r\n * @cssprop --m3e-bottom-sheet-header-line-height - Line height for the sheet header.\r\n * @cssprop --m3e-bottom-sheet-header-tracking - Letter spacing (tracking) for the sheet header.\r\n */\r\n@customElement(\"m3e-bottom-sheet\")\r\nexport class M3eBottomSheetElement extends ReconnectedCallback(SuppressInitialAnimation(AttachInternals(LitElement))) {\r\n  static {\r\n    registerStyleSheet(css`\r\n      @property --_bottom-sheet-height {\r\n        syntax: \"<length>\";\r\n        inherits: false;\r\n        initial-value: 50vh;\r\n      }\r\n      m3e-bottom-sheet > [slot=\"header\"] {\r\n        margin-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem);\r\n        margin-inline: var(--m3e-bottom-sheet-padding-inline, 1rem);\r\n      }\r\n    `);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      position: fixed;\r\n      left: 50%;\r\n      top: calc(100vh - var(--_bottom-sheet-height));\r\n      margin: 0;\r\n      padding: 0;\r\n      outline: none;\r\n      overflow: hidden;\r\n      border: none;\r\n      box-sizing: border-box;\r\n      width: var(--m3e-bottom-sheet-width, 100%);\r\n      max-width: var(--m3e-bottom-sheet-max-width, 40rem);\r\n      height: var(--_bottom-sheet-height);\r\n      color: var(--m3e-bottom-sheet-color, ${DesignToken.color.onSurface});\r\n      background-color: var(--m3e-bottom-sheet-container-color, ${DesignToken.color.surfaceContainerLow});\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `transform ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standardDecelerate},\r\n        border-radius ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host(:not([modal]):not(:is(:state(--full), :--full))) .elevation {\r\n      --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${DesignToken.elevation.level1});\r\n    }\r\n    :host([modal]:not(:is(:state(--full), :--full))) .elevation {\r\n      --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${DesignToken.elevation.level1});\r\n    }\r\n    :host(:is(:state(--full), :--full)) .elevation {\r\n      --m3e-elevation-level: var(--m3e-bottom-sheet-full-elevation, ${DesignToken.elevation.level1});\r\n    }\r\n    :host(:not([modal])) {\r\n      z-index: var(--m3e-bottom-sheet-z-index, 10);\r\n    }\r\n    :host(:not([modal]):not([open])),\r\n    :host([modal]:not(:popover-open)) {\r\n      border-radius: var(--m3e-bottom-sheet-minimized-container-shape, ${DesignToken.shape.corner.none});\r\n      transform: translateX(-50%) translateY(100%);\r\n    }\r\n    :host(:not([modal])[open]:not(:is(:state(--full), :--full))),\r\n    :host([modal]:not(:is(:state(--full), :--full)):popover-open) {\r\n      border-radius: var(--m3e-bottom-sheet-container-shape, ${DesignToken.shape.corner.extraLargeTop});\r\n    }\r\n    :host(:not([modal])[open]:is(:state(--full), :--full)),\r\n    :host([modal]:is(:state(--full), :--full):popover-open) {\r\n      border-radius: var(--m3e-bottom-sheet-full-container-shape, ${DesignToken.shape.corner.extraLargeTop});\r\n    }\r\n    :host(:not([modal])[open]),\r\n    :host([modal]:popover-open) {\r\n      transform: translateX(-50%) translateY(0);\r\n    }\r\n    :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::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([modal]:popover-open)::backdrop {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%),\r\n        transparent\r\n      );\r\n    }\r\n    :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop {\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      :host([modal]:popover-open)::backdrop {\r\n        background-color: color-mix(\r\n          in srgb,\r\n          var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) 0%,\r\n          transparent\r\n        );\r\n      }\r\n    }\r\n    .base {\r\n      contain: layout style paint;\r\n      display: flex;\r\n      border-radius: inherit;\r\n      flex-direction: column;\r\n      height: 100%;\r\n      --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0);\r\n      --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem);\r\n    }\r\n    @media (max-height: 640px) {\r\n      .base {\r\n        --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem);\r\n      }\r\n    }\r\n    .body {\r\n      flex: 1 1 auto;\r\n      overflow-y: auto;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem);\r\n      padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem);\r\n      font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize});\r\n      font-weight: var(\r\n        --m3e-bottom-sheet-content-font-weight,\r\n        ${DesignToken.typescale.standard.body.medium.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-bottom-sheet-content-line-height,\r\n        ${DesignToken.typescale.standard.body.medium.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking});\r\n    }\r\n    .content {\r\n      height: fit-content;\r\n    }\r\n    :host(:not([handle])) .header {\r\n      display: none;\r\n    }\r\n    :host(:not([handle])) .body,\r\n    .header {\r\n      border-top-left-radius: inherit;\r\n      border-top-right-radius: inherit;\r\n      padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem);\r\n      font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken.typescale.standard.title.large.fontSize});\r\n      font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight});\r\n      line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken.typescale.standard.title.large.lineHeight});\r\n      letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken.typescale.standard.title.large.tracking});\r\n    }\r\n    .header {\r\n      cursor: grab;\r\n      touch-action: none;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n      box-sizing: border-box;\r\n      flex: none;\r\n      display: flex;\r\n      flex-direction: column;\r\n      min-height: 3rem;\r\n      --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken.color.surfaceContainerLow});\r\n    }\r\n    .handle-row {\r\n      position: relative;\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      opacity: 1;\r\n      visibility: visible;\r\n      height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem);\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n        padding ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n        height ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    .handle {\r\n      position: relative;\r\n      width: var(--m3e-bottom-sheet-handle-width, 2rem);\r\n      height: var(--m3e-bottom-sheet-handle-height, 4px);\r\n      border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken.shape.corner.full});\r\n      background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    .handle-touch {\r\n      position: absolute;\r\n      aspect-ratio: 1 / 1;\r\n      height: 3rem;\r\n      left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2));\r\n      right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2));\r\n      top: calc(\r\n        0px - calc(\r\n            calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc(\r\n                var(--m3e-bottom-sheet-handle-height, 4px) / 2\r\n              )\r\n          )\r\n      );\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))),\r\n      :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop,\r\n      :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop,\r\n      :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::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      .handle {\r\n        background-color: ButtonText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __openSheet?: M3eBottomSheetElement;\r\n\r\n  /** @private */ readonly #documentClickHandler = (e: Event) => this.#handleDocumentClick(e);\r\n  /** @private */ readonly #documentKeyDownHandler = (e: KeyboardEvent) => this.#handleDocumentKeyDown(e);\r\n  /** @private */ readonly #windowResizeHandler = () => this.#handleWindowResize();\r\n  /** @private */ readonly #velocityTracker = new VelocityTracker();\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n  /** @private */ readonly #inertController = new InertController(this);\r\n\r\n  /** @private */\r\n  readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    skipInitial: true,\r\n    callback: (x) => this.#handleSectionResize(x),\r\n  });\r\n\r\n  /** @private */ #trigger: Element | null = null;\r\n  /** @private */ #dragState?: {\r\n    startY: number;\r\n    startHeight: number;\r\n    effectiveMaxHeight: number;\r\n    maxHeight: number;\r\n    minHeight: number;\r\n  };\r\n  /** @private */ #dragged = false;\r\n  /** @private */ #activeDetent = 0;\r\n  /** @private */ #requestDetent?: number;\r\n  /** @private */ #cachedContentHeight = 0;\r\n  /** @private */ #cachedHeaderHeight = 0;\r\n  /** @private */ #snapAnimation?: Animation;\r\n\r\n  /**\r\n   * Whether the bottom sheet behaves as modal.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) modal = false;\r\n\r\n  /**\r\n   * Whether the bottom sheet is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n  /**\r\n   * Whether to display a drag handle and enable the top region of the sheet as a gesture\r\n   * surface for dragging between detents.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) handle = false;\r\n\r\n  /**\r\n   * The accessible label given to the drag handle.\r\n   * @default \"Drag handle\"\r\n   */\r\n  @property({ attribute: \"handle-label\" }) handleLabel = \"Drag handle\";\r\n\r\n  /**\r\n   * Detents (discrete height states) the sheet can snap to.\r\n   * @default []\r\n   */\r\n  @property({ attribute: \"detents\", converter: spaceSeparatedStringConverter }) detents: string[] = [];\r\n\r\n  /**\r\n   * The zero‑based index of the detent the sheet should open to.\r\n   * @default 0\r\n   */\r\n  @property({ type: Number }) detent = 0;\r\n\r\n  /**\r\n   * Whether the bottom sheet can hide when its swiped down.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) hideable = false;\r\n\r\n  /**\r\n   * The friction coefficient to hide the sheet.\r\n   * @default 0.5\r\n   */\r\n  @property({ attribute: \"hide-friction\", type: Number }) hideFriction = 0.5;\r\n\r\n  /**\r\n   * A fractional value, between 0 and 100, indicating the maximum visual overshoot allowed when dragging past the minimum or maximum size.\r\n   * @default 4\r\n   */\r\n  @property({ attribute: \"overshoot-limit\", type: Number }) overshootLimit = 4;\r\n\r\n  /**\r\n   * Shows the sheet.\r\n   * @param {number} detent The zero‑based index of the detent the sheet should open to.\r\n   */\r\n  show(detent: number = this.detent): void {\r\n    if (!this.open) {\r\n      this.#requestDetent = detent;\r\n      this.open = true;\r\n    } else if (detent !== undefined && this.#activeDetent !== detent) {\r\n      this.#snapToDetent(detent);\r\n    }\r\n  }\r\n\r\n  /** Hides the sheet. */\r\n  hide(): void {\r\n    this.open = false;\r\n  }\r\n\r\n  /**\r\n   * Toggles the opened state of the sheet.\r\n   * @param {number} detent The zero‑based index of the detent the sheet should open to.\r\n   */\r\n  toggle(detent?: number): void {\r\n    if (this.open) {\r\n      this.hide();\r\n    } else {\r\n      this.show(detent);\r\n    }\r\n  }\r\n\r\n  /** Moves the sheet to the next detent. */\r\n  cycle(): void {\r\n    if (!this.open) {\r\n      this.show();\r\n    } else if (this.detents.length > 0) {\r\n      if (this.#activeDetent < this.detents.length - 1) {\r\n        this.#activeDetent++;\r\n        this.#snapToDetent(this.#activeDetent);\r\n      } else if (this.hideable) {\r\n        this.hide();\r\n      }\r\n    } else {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"modal\")) {\r\n      this.role = this.modal ? \"dialog\" : \"region\";\r\n      this.ariaModal = this.modal ? \"true\" : null;\r\n      this.popover = this.modal ? \"manual\" : null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"open\")) {\r\n      if (this.open) {\r\n        if (!this.dispatchEvent(new Event(\"opening\", { cancelable: true }))) {\r\n          this.open = false;\r\n          return;\r\n        }\r\n\r\n        // Only one sheet can be open at a time.\r\n        if (M3eBottomSheetElement.__openSheet !== this) {\r\n          M3eBottomSheetElement.__openSheet?.hide();\r\n        }\r\n        M3eBottomSheetElement.__openSheet = this;\r\n\r\n        this.inert = false;\r\n\r\n        window.addEventListener(\"resize\", this.#windowResizeHandler);\r\n\r\n        // If there are detents (regardless of handle) open to the requested, default (or first) detent.\r\n        // Otherwise, open to fit unless its greater than half.\r\n\r\n        if (this.detents.length > 0) {\r\n          this.#activeDetent = Math.min(Math.max(0, this.#requestDetent ?? this.detent), this.detents.length - 1);\r\n          this.#updateHeight(this.#computeDetentHeight(this.detents[this.#activeDetent]));\r\n        } else {\r\n          this.#updateHeight(Math.min(this.#computeDetentHeight(\"fit\"), this.#computeDetentHeight(\"half\")));\r\n        }\r\n        this.#requestDetent = undefined;\r\n      } else {\r\n        if (!this.dispatchEvent(new Event(\"closing\", { cancelable: true }))) {\r\n          this.open = true;\r\n          return;\r\n        }\r\n\r\n        // The following ensures layout is stable so that first tab isn't \"skipped\"\r\n        requestAnimationFrame(() => (this.inert = true));\r\n\r\n        window.removeEventListener(\"resize\", this.#windowResizeHandler);\r\n\r\n        if (M3eBottomSheetElement.__openSheet === this) {\r\n          M3eBottomSheetElement.__openSheet = undefined;\r\n        }\r\n      }\r\n\r\n      if (this.modal) {\r\n        if (this.open) {\r\n          this.#trigger = document.activeElement;\r\n          this.#inertController.lock();\r\n          this.#scrollLockController.lock();\r\n          this.showPopover();\r\n          requestAnimationFrame(() => {\r\n            document.addEventListener(\"click\", this.#documentClickHandler);\r\n            document.addEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n          });\r\n\r\n          let focusable: HTMLElement | null | undefined = this.querySelector<HTMLElement>(\"[autofocus]\");\r\n          if (!focusable || !M3eInteractivityChecker.isFocusable(focusable)) {\r\n            focusable = this.shadowRoot?.querySelector(\".handle\");\r\n          }\r\n          if (focusable) {\r\n            focusWhenReady(focusable);\r\n          }\r\n        } else {\r\n          this.#snapToHeight(0).then(() => {\r\n            this.#inertController.unlock();\r\n            this.#scrollLockController.unlock();\r\n            document.removeEventListener(\"click\", this.#documentClickHandler);\r\n            document.removeEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n            this.hidePopover();\r\n            if (this.#trigger instanceof HTMLElement) {\r\n              this.#trigger.focus();\r\n            }\r\n            this.#trigger = null;\r\n          });\r\n        }\r\n      }\r\n\r\n      this.dispatchEvent(new Event(this.open ? \"opened\" : \"closed\"));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-trap ?disabled=\"${!this.modal}\">\r\n      <div class=\"base\">\r\n        <m3e-elevation class=\"elevation\"></m3e-elevation>\r\n        <div\r\n          class=\"header\"\r\n          @pointerdown=\"${this.#handleHeaderPointerDown}\"\r\n          @pointermove=\"${this.#handleHeaderPointerMove}\"\r\n          @pointerup=\"${this.#handleHeaderPointerUp}\"\r\n        >\r\n          ${this.handle\r\n            ? html`<div class=\"handle-row\">\r\n                <div\r\n                  id=\"handle\"\r\n                  class=\"handle\"\r\n                  role=\"button\"\r\n                  aria-label=\"${this.handleLabel}\"\r\n                  tabindex=\"0\"\r\n                  @click=\"${this.#handleDragHandleClick}\"\r\n                  @keydown=\"${this.#handleDragHandleKeyDown}\"\r\n                >\r\n                  <m3e-focus-ring class=\"focus-ring\" for=\"handle\"></m3e-focus-ring>\r\n                  <div class=\"handle-touch\" aria-hidden=\"true\"></div>\r\n                </div>\r\n              </div>`\r\n            : nothing}\r\n          <slot name=\"header\"></slot>\r\n        </div>\r\n        <div class=\"body\">\r\n          <div class=\"content\">\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </m3e-focus-trap>`;\r\n  }\r\n\r\n  /** @private */\r\n  #initialize(): void {\r\n    const content = this.shadowRoot?.querySelector<HTMLElement>(\".content\");\r\n    if (content) {\r\n      this.#cachedContentHeight = content.clientHeight;\r\n      this.#resizeController.observe(content);\r\n    }\r\n\r\n    const header = this.shadowRoot?.querySelector<HTMLElement>(\".header\");\r\n    if (header) {\r\n      this.#cachedHeaderHeight = header.clientHeight;\r\n      this.#resizeController.observe(header);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleHeaderPointerDown(e: PointerEvent): void {\r\n    if (e.target instanceof HTMLElement && M3eInteractivityChecker.isFocusable(e.target)) {\r\n      return;\r\n    }\r\n\r\n    (<HTMLElement>e.target).setPointerCapture(e.pointerId);\r\n    (<HTMLElement>e.target).style.cursor = \"grabbing\";\r\n\r\n    this.#velocityTracker.reset();\r\n    this.#velocityTracker.add(e.clientY);\r\n\r\n    const maxHeight = this.#computeMaxHeight();\r\n    const effectiveMaxHeight =\r\n      this.detents.length > 0 ? Math.max(...this.detents.map((x) => this.#computeDetentHeight(x))) : maxHeight;\r\n\r\n    this.#dragState = {\r\n      startY: e.clientY,\r\n      startHeight: this.clientHeight,\r\n      effectiveMaxHeight,\r\n      maxHeight,\r\n      minHeight: this.#computeMinHeight(),\r\n    };\r\n    this.#dragged = false;\r\n  }\r\n\r\n  /** @private */\r\n  #handleHeaderPointerMove(e: PointerEvent): void {\r\n    if (!this.#dragState) {\r\n      return;\r\n    }\r\n\r\n    const minDragThreshold = 8;\r\n    if (Math.abs(e.clientY - this.#dragState.startY) <= minDragThreshold) {\r\n      // Ignore movement under threshold\r\n      return;\r\n    }\r\n\r\n    (e.getCoalescedEvents?.() ?? [e]).forEach((x) => this.#velocityTracker.add(x.clientY, e.timeStamp));\r\n\r\n    let newHeight = this.#dragState.startHeight - (e.clientY - this.#dragState.startY);\r\n    if (newHeight < this.#dragState.minHeight) {\r\n      if (this.hideable) {\r\n        const overshoot = (this.#dragState.minHeight - newHeight) * this.hideFriction;\r\n        newHeight = this.#dragState.minHeight - overshoot;\r\n      } else {\r\n        const overshoot = this.#dragState.minHeight - newHeight;\r\n        const overshootLimit = this.#dragState.maxHeight * (this.overshootLimit / 100);\r\n        const compressed = (overshootLimit * overshoot) / (overshoot + overshootLimit);\r\n        newHeight = this.#dragState.minHeight - compressed;\r\n      }\r\n    } else if (newHeight > this.#dragState.effectiveMaxHeight) {\r\n      const overshoot = newHeight - this.#dragState.effectiveMaxHeight;\r\n      const overshootLimit = this.#dragState.maxHeight * (this.overshootLimit / 100);\r\n      const compressed = (overshootLimit * overshoot) / (overshoot + overshootLimit);\r\n      newHeight = this.#dragState.effectiveMaxHeight + compressed;\r\n    }\r\n\r\n    this.#updateHeight(newHeight);\r\n    this.#dragged = true;\r\n  }\r\n\r\n  /** @private */\r\n  #handleHeaderPointerUp(e: PointerEvent): void {\r\n    if (!this.#dragState) return;\r\n\r\n    try {\r\n      (<HTMLElement>e.target).releasePointerCapture(e.pointerId);\r\n      (<HTMLElement>e.target).style.cursor = \"\";\r\n\r\n      if (!this.#dragged) return;\r\n\r\n      const significantVelocityThreshold = e.pointerType === \"touch\" ? 1200 : 500;\r\n      const velocity = this.#velocityTracker.getVelocity();\r\n\r\n      this.#velocityTracker.reset();\r\n\r\n      if (this.hideable && velocity >= significantVelocityThreshold) {\r\n        if (this.dispatchEvent(new Event(\"cancel\", { cancelable: true }))) {\r\n          this.hide();\r\n        }\r\n      } else if (Math.abs(velocity) >= significantVelocityThreshold) {\r\n        if (this.detents.length > 0) {\r\n          const nextDetent = this.#getNextHigherDetent();\r\n          if (nextDetent !== this.#activeDetent) {\r\n            this.#snapToDetent(nextDetent);\r\n          }\r\n        } else {\r\n          this.#snapToHeight(this.#computeDetentHeight(\"full\"));\r\n        }\r\n      } else {\r\n        const hideDistanceThreshold = 20;\r\n        if (this.hideable) {\r\n          const collapsed = this.#dragState.minHeight;\r\n          if (this.clientHeight < collapsed - hideDistanceThreshold) {\r\n            this.hide();\r\n            return;\r\n          }\r\n        }\r\n\r\n        if (this.detents.length > 0) {\r\n          this.#snapToDetent(this.#getClosestDetent());\r\n        } else if (this.clientHeight < this.#dragState.minHeight) {\r\n          this.#snapToHeight(this.#dragState.minHeight);\r\n        } else if (this.clientHeight > this.#dragState.effectiveMaxHeight) {\r\n          this.#snapToHeight(this.#dragState.effectiveMaxHeight);\r\n        }\r\n      }\r\n    } finally {\r\n      this.#dragState = undefined;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: Event): void {\r\n    if (\r\n      this.open &&\r\n      this.modal &&\r\n      !e.composedPath().includes(this) &&\r\n      this.dispatchEvent(new Event(\"cancel\", { cancelable: true }))\r\n    ) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentKeyDown(e: KeyboardEvent): void {\r\n    if (this.open && this.modal && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n\r\n      if (this.dispatchEvent(new Event(\"cancel\", { cancelable: true }))) {\r\n        this.hide();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleWindowResize(): void {\r\n    if (this.detents.length > 0 && this.detents[this.#activeDetent] === \"half\") {\r\n      this.#updateHeight(this.#computeDetentHeight(\"half\"));\r\n      return;\r\n    }\r\n\r\n    const maxHeight = this.#computeMaxHeight();\r\n    if (hasCustomState(this, \"--full\")) {\r\n      this.#updateHeight(maxHeight);\r\n    } else if (this.clientHeight > maxHeight) {\r\n      this.#updateHeight(maxHeight);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDragHandleClick(): void {\r\n    if (!this.#dragged) {\r\n      this.cycle();\r\n    }\r\n    this.#dragged = false;\r\n  }\r\n\r\n  /** @private */\r\n  #handleDragHandleKeyDown(e: KeyboardEvent): void {\r\n    if (e.defaultPrevented || !isModifierAllowed(e)) return;\r\n\r\n    switch (e.key) {\r\n      case \"Up\":\r\n      case \"ArrowUp\":\r\n        e.preventDefault();\r\n        if (this.detents.length > 0) {\r\n          const nextDetent = this.#getNextHigherDetent();\r\n          if (nextDetent !== this.#activeDetent) {\r\n            this.#snapToDetent(nextDetent);\r\n          }\r\n        } else {\r\n          this.#snapToHeight(this.#computeDetentHeight(\"full\"));\r\n        }\r\n        break;\r\n\r\n      case \"Down\":\r\n      case \"ArrowDown\":\r\n        e.preventDefault();\r\n        if (this.detents.length > 0) {\r\n          const nextDetent = this.#getNextLowerDetent();\r\n          if (nextDetent !== this.#activeDetent) {\r\n            this.#snapToDetent(nextDetent);\r\n          } else if (this.hideable) {\r\n            this.hide();\r\n          }\r\n        } else if (this.hideable) {\r\n          this.hide();\r\n        }\r\n\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #getNextHigherDetent(): number {\r\n    const currentHeight = this.clientHeight;\r\n    let nextHeight = Infinity;\r\n    let nextDetent = this.#activeDetent;\r\n    for (let i = 0; i < this.detents.length; i++) {\r\n      if (i === this.#activeDetent) continue;\r\n      const detentHeight = this.#computeDetentHeight(this.detents[i]);\r\n      if (detentHeight > currentHeight && detentHeight < nextHeight) {\r\n        nextHeight = detentHeight;\r\n        nextDetent = i;\r\n      }\r\n    }\r\n    return nextDetent;\r\n  }\r\n\r\n  /** @private */\r\n  #getNextLowerDetent(): number {\r\n    const currentHeight = this.clientHeight;\r\n    let nextHeight = -Infinity;\r\n    let nextDetent = this.#activeDetent;\r\n    for (let i = 0; i < this.detents.length; i++) {\r\n      if (i === this.#activeDetent) continue;\r\n      const detentHeight = this.#computeDetentHeight(this.detents[i]);\r\n      if (detentHeight < currentHeight && detentHeight > nextHeight) {\r\n        nextHeight = detentHeight;\r\n        nextDetent = i;\r\n      }\r\n    }\r\n    return nextDetent;\r\n  }\r\n\r\n  /** @private */\r\n  #getClosestDetent(): number {\r\n    const currentHeight = this.clientHeight;\r\n    let closestDetent = this.#activeDetent;\r\n    let closestDistance = Infinity;\r\n\r\n    for (let i = 0; i < this.detents.length; i++) {\r\n      const detentHeight = this.#computeDetentHeight(this.detents[i]);\r\n      const distance = Math.abs(currentHeight - detentHeight);\r\n\r\n      if (distance < closestDistance) {\r\n        closestDistance = distance;\r\n        closestDetent = i;\r\n      }\r\n    }\r\n    return closestDetent;\r\n  }\r\n\r\n  /** @private */\r\n  #computeDetentHeight(detent: string): number {\r\n    switch (detent) {\r\n      case \"collapsed\":\r\n        return this.#computeMinHeight();\r\n      case \"half\":\r\n        return this.#computeMaxHeight() * 0.5;\r\n      case \"full\":\r\n        return this.#computeMaxHeight();\r\n      case \"fit\":\r\n        return this.#computeFitHeight();\r\n    }\r\n\r\n    if (detent.endsWith(\"%\")) {\r\n      return this.#computeMaxHeight() * (parseFloat(detent) / 100);\r\n    }\r\n\r\n    if (detent.endsWith(\"px\")) {\r\n      return parseFloat(detent);\r\n    }\r\n\r\n    return this.#computeMinHeight();\r\n  }\r\n\r\n  /** @private */\r\n  #computeMaxHeight(): number {\r\n    const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n    return window.innerHeight - (base ? computeCssSize(base, \"var(--_bottom-sheet-top-space)\") : 0);\r\n  }\r\n\r\n  /** @private */\r\n  #computeMinHeight(): number {\r\n    return this.detents.includes(\"fit\") && !this.detents.includes(\"collapsed\")\r\n      ? this.#computeFitHeight()\r\n      : this.#computePeekHeight();\r\n  }\r\n\r\n  /** @private */\r\n  #computePeekHeight(): number {\r\n    const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n    return this.#cachedHeaderHeight + (base ? computeCssSize(base, \"var(--_bottom-sheet-peek-height)\") : 0);\r\n  }\r\n\r\n  /** @private */\r\n  #computeFitHeight(): number {\r\n    const body = this.shadowRoot?.querySelector<HTMLElement>(\".body\");\r\n    if (!body) {\r\n      return 0;\r\n    }\r\n\r\n    const bodyStyle = getComputedStyle(body);\r\n    return (\r\n      this.#cachedHeaderHeight +\r\n      this.#cachedContentHeight +\r\n      parseFloat(bodyStyle.paddingBlockStart) +\r\n      parseFloat(bodyStyle.paddingBlockEnd)\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleSectionResize(entries: ResizeObserverEntry[]): void {\r\n    const oldCachedContentHeight = this.#cachedContentHeight;\r\n    const oldCachedHeaderHeight = this.#cachedHeaderHeight;\r\n\r\n    for (const entry of entries) {\r\n      if (entry.target.classList.contains(\"content\")) {\r\n        this.#cachedContentHeight = (<ResizeObserverSize>(\r\n          (Array.isArray(entry.borderBoxSize) ? entry.borderBoxSize[0] : entry.borderBoxSize)\r\n        )).blockSize;\r\n      } else if (entry.target.classList.contains(\"header\")) {\r\n        this.#cachedHeaderHeight = (<ResizeObserverSize>(\r\n          (Array.isArray(entry.borderBoxSize) ? entry.borderBoxSize[0] : entry.borderBoxSize)\r\n        )).blockSize;\r\n      }\r\n    }\r\n\r\n    if (\r\n      this.open &&\r\n      this.detents.length > 0 &&\r\n      (oldCachedContentHeight !== this.#cachedContentHeight || oldCachedHeaderHeight !== this.#cachedHeaderHeight)\r\n    ) {\r\n      switch (this.detents[this.#activeDetent]) {\r\n        case \"fit\":\r\n          this.#updateHeight(this.#computeFitHeight());\r\n          break;\r\n\r\n        case \"collapsed\":\r\n          this.#updateHeight(this.#computeMinHeight());\r\n          break;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #snapToDetent(detent: number): void {\r\n    if (detent >= 0 && detent < this.detents.length) {\r\n      this.#activeDetent = detent;\r\n      this.#snapToHeight(this.#computeDetentHeight(this.detents[detent]));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #snapToHeight(height: number): Promise<void> {\r\n    if (this.#snapAnimation) {\r\n      this.#updateHeight(this.clientHeight);\r\n      this.#snapAnimation?.cancel();\r\n      this.#snapAnimation = undefined;\r\n    }\r\n\r\n    if (!prefersReducedMotion()) {\r\n      this.#snapAnimation = this.animate(\r\n        [{ \"--_bottom-sheet-height\": `${this.clientHeight}px` }, { \"--_bottom-sheet-height\": `${height}px` }],\r\n        {\r\n          duration: 250,\r\n          easing: \"cubic-bezier(0.2, 0.0, 0, 1.0)\",\r\n        },\r\n      );\r\n      this.#snapAnimation.onfinish = () => {\r\n        this.#updateHeight(height);\r\n        this.#snapAnimation = undefined;\r\n      };\r\n      await this.#snapAnimation.finished;\r\n    } else {\r\n      this.#updateHeight(height);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateHeight(height: number): void {\r\n    this.style.setProperty(\"--_bottom-sheet-height\", `${height}px`);\r\n    setCustomState(this, \"--full\", height === this.#computeMaxHeight());\r\n    const content = this.shadowRoot?.querySelector<HTMLElement>(\".content\");\r\n    if (content) {\r\n      content.inert = height <= this.#computePeekHeight();\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eBottomSheetElementEventMap 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 M3eBottomSheetElement {\r\n  addEventListener<K extends keyof M3eBottomSheetElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eBottomSheetElement, ev: M3eBottomSheetElementEventMap[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 M3eBottomSheetElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eBottomSheetElement, ev: M3eBottomSheetElementEventMap[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-bottom-sheet\": M3eBottomSheetElement;\r\n  }\r\n}\r\n","import { property } from \"lit/decorators.js\";\r\n\r\nimport { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eBottomSheetElement } from \"./BottomSheetElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to trigger a bottom sheet.\r\n * @tag m3e-bottom-sheet-trigger\r\n *\r\n * @slot - Renders the content of the trigger.\r\n *\r\n * @attr detent - The zero‑based index of the detent the sheet should open to.\r\n * @attr secondary - Marks this trigger as a secondary trigger for accessibility. Secondary triggers do not receive ARIA ownership.\r\n */\r\n@customElement(\"m3e-bottom-sheet-trigger\")\r\nexport class M3eBottomSheetTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /**\r\n   * The zero‑based index of the detent the sheet should open to.\r\n   * @default undefined\r\n   */\r\n  @property({ type: Number }) detent?: number;\r\n\r\n  /**\r\n   * Marks this trigger as a secondary trigger for accessibility. Secondary triggers do not receive ARIA ownership.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) secondary = false;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    if (control instanceof M3eBottomSheetElement) {\r\n      super.attach(control);\r\n\r\n      if (this.parentElement) {\r\n        if (!control.modal) {\r\n          if (!this.secondary) {\r\n            this.parentElement.ariaExpanded = \"false\";\r\n            addAriaReferencedId(this.parentElement, \"aria-controls\", control.id);\r\n            if (this.parentElement.id) {\r\n              addAriaReferencedId(control, \"aria-labelledby\", this.parentElement.id);\r\n            }\r\n          }\r\n        } else {\r\n          this.parentElement.ariaHasPopup = \"dialog\";\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control && this.parentElement && !this.secondary) {\r\n      removeAriaReferencedId(this.parentElement, \"aria-controls\", this.control.id);\r\n    }\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override _onClick(): void {\r\n    if (this.control instanceof M3eBottomSheetElement) {\r\n      if (this.control.modal) {\r\n        this.control.show(this.detent);\r\n      } else {\r\n        this.control.toggle(this.detent);\r\n        if (!this.secondary && this.parentElement) {\r\n          this.parentElement.ariaExpanded = `${this.control.open}`;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-bottom-sheet-trigger\": M3eBottomSheetTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eBottomSheetActionElement","ActionElementBase","_onClick","this","closest","hide","__decorate","customElement","M3eBottomSheetElement","M3eBottomSheetElement_1","ReconnectedCallback","SuppressInitialAnimation","AttachInternals","LitElement","constructor","_M3eBottomSheetElement_documentClickHandler","set","e","__classPrivateFieldGet","call","_M3eBottomSheetElement_documentKeyDownHandler","_M3eBottomSheetElement_windowResizeHandler","_M3eBottomSheetElement_instances","_M3eBottomSheetElement_handleWindowResize","_M3eBottomSheetElement_velocityTracker","VelocityTracker","_M3eBottomSheetElement_scrollLockController","ScrollLockController","_M3eBottomSheetElement_inertController","InertController","_M3eBottomSheetElement_resizeController","ResizeController","target","skipInitial","callback","x","_M3eBottomSheetElement_handleSectionResize","_M3eBottomSheetElement_trigger","_M3eBottomSheetElement_dragState","_M3eBottomSheetElement_dragged","_M3eBottomSheetElement_activeDetent","_M3eBottomSheetElement_requestDetent","_M3eBottomSheetElement_cachedContentHeight","_M3eBottomSheetElement_cachedHeaderHeight","_M3eBottomSheetElement_snapAnimation","modal","open","handle","handleLabel","detents","detent","hideable","hideFriction","overshootLimit","show","undefined","_M3eBottomSheetElement_snapToDetent","__classPrivateFieldSet","toggle","cycle","length","_a","update","changedProperties","super","has","role","ariaModal","popover","reconnectedCallback","_M3eBottomSheetElement_initialize","firstUpdated","_changedProperties","updated","dispatchEvent","Event","cancelable","__openSheet","inert","window","addEventListener","Math","min","max","_M3eBottomSheetElement_updateHeight","_M3eBottomSheetElement_computeDetentHeight","requestAnimationFrame","removeEventListener","document","activeElement","lock","showPopover","focusable","querySelector","M3eInteractivityChecker","isFocusable","shadowRoot","focusWhenReady","_M3eBottomSheetElement_snapToHeight","then","unlock","hidePopover","HTMLElement","focus","render","html","_M3eBottomSheetElement_handleHeaderPointerDown","_M3eBottomSheetElement_handleHeaderPointerMove","_M3eBottomSheetElement_handleHeaderPointerUp","_M3eBottomSheetElement_handleDragHandleClick","_M3eBottomSheetElement_handleDragHandleKeyDown","nothing","content","clientHeight","observe","header","setPointerCapture","pointerId","style","cursor","reset","add","clientY","maxHeight","effectiveMaxHeight","map","startY","startHeight","minHeight","_M3eBottomSheetElement_computeMinHeight","abs","getCoalescedEvents","forEach","timeStamp","newHeight","overshoot","compressed","releasePointerCapture","significantVelocityThreshold","pointerType","velocity","getVelocity","nextDetent","hideDistanceThreshold","collapsed","_M3eBottomSheetElement_getClosestDetent","composedPath","includes","key","shiftKey","ctrlKey","preventDefault","hasCustomState","defaultPrevented","isModifierAllowed","currentHeight","nextHeight","Infinity","i","detentHeight","closestDetent","closestDistance","distance","_M3eBottomSheetElement_computeMaxHeight","_M3eBottomSheetElement_computeFitHeight","endsWith","parseFloat","base","innerHeight","computeCssSize","body","bodyStyle","getComputedStyle","paddingBlockStart","paddingBlockEnd","entries","oldCachedContentHeight","oldCachedHeaderHeight","entry","classList","contains","Array","isArray","borderBoxSize","blockSize","async","height","cancel","prefersReducedMotion","animate","duration","easing","onfinish","finished","setProperty","setCustomState","_M3eBottomSheetElement_computePeekHeight","registerStyleSheet","css","styles","DesignToken","color","onSurface","surfaceContainerLow","unsafeCSS","motion","medium2","standardDecelerate","standard","elevation","level1","shape","corner","none","extraLargeTop","short3","scrim","long2","scrollbar","thinWidth","typescale","medium","fontSize","fontWeight","lineHeight","tracking","title","large","full","onSurfaceVariant","property","type","Boolean","reflect","prototype","attribute","converter","spaceSeparatedStringConverter","Number","M3eBottomSheetTriggerElement","HtmlFor","secondary","attach","control","parentElement","ariaHasPopup","ariaExpanded","addAriaReferencedId","id","detach","removeAriaReferencedId"],"mappings":"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"}

package/dist/calendar.js

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license text.
  */
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
-import { css, LitElement, html, nothing, unsafeCSS } from 'lit';
+import { css, LitElement, nothing, html, unsafeCSS } from 'lit';
 import { query, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -94,6 +94,8 @@ const MONTHS_PER_ROW = 4;
 class CalendarViewElementBase extends LitElement {
   constructor() {
     super(...arguments);
+    /** Whether the view is active. */
+    this.active = false;
     /** Today's date. */
     this.today = new Date();
     /** The selected date. */
@@ -134,6 +136,9 @@ class CalendarViewElementBase extends LitElement {
 /** The styles of the element. */
 CalendarViewElementBase.styles = css`:host { display: inline-block; user-select: none; vertical-align: top; } .visually-hidden { position: absolute; appearance: none; visibility: hidden; border: none; outline: none; overflow: hidden; left: 0; height: 1px; width: 1px; margin: -1px; padding: 0; white-space: nowrap; } table { border-collapse: collapse; border-spacing: 0; width: calc(3rem * 7); } td, th { font: inherit; text-align: center; padding: unset; } td { box-sizing: border-box; height: 3rem; padding: 0.25rem; position: relative; color: var(--m3e-calendar-item-color, ${DesignToken.color.onSurface}); } .item, .item > span { position: relative; } .item { display: flex; align-items: center; justify-content: center; border-radius: inherit; outline: none; width: 100%; height: 100%; border-radius: ${DesignToken.shape.corner.full}; } .item:not([aria-disabled]) { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } td:not(:has(.item[aria-disabled])).selected { color: var(--m3e-calendar-item-selected-color, ${DesignToken.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-hover-color: var(--m3e-calendar-item-selected-hover-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-focus-color: var(--m3e-calendar-item-selected-focus-color, ${DesignToken.color.onPrimary}); } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: var(--m3e-calendar-item-current-outline-color, ${DesignToken.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { outline-style: solid; outline-offset: -1px; outline-width: var(--m3e-calendar-item-current-outline-thickness, 1px); outline-color: var(--m3e-calendar-item-current-outline-color, ${DesignToken.color.primary}); } td:has(.item[aria-disabled]) { color: color-mix( in srgb, var(--m3e-calendar-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-calendar-item-disabled-color-opacity, 38%), transparent ); } @media (forced-colors: active) { td:not(:has(.item[aria-disabled])).selected { forced-color-adjust: none; color: ButtonFace; } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: ButtonText; } td:has(.item[aria-disabled]) { color: GrayText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: ButtonText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { border-color: ButtonText; } }`;
 __decorate([query(".active > .item")], CalendarViewElementBase.prototype, "_activeItem", void 0);
+__decorate([property({
+  type: Boolean
+})], CalendarViewElementBase.prototype, "active", void 0);
 __decorate([property({
   converter: dateConverter
 })], CalendarViewElementBase.prototype, "today", void 0);
@@ -218,7 +223,7 @@ let M3eMonthViewElement = class M3eMonthViewElement extends CalendarViewElementB
       dayOfWeek = (dayOfWeek + 1) % 7;
     }
     weeks = weeks.filter(x => !!x.length);
-    return html`<table role="grid"><thead><tr>${weekdays.map(x => html`<th scope="col"><span class="visually-hidden">${x.long}</span><div id="weekday-${x.id}-month-${month}" aria-hidden="true">${x.narrow}</div><m3e-tooltip for="weekday-${x.id}-month-${month}">${x.long}</m3e-tooltip></th>`)}</tr></thead><tbody>${weeks.map((row, i) => html`<tr role="row">${i === 0 && row.length < 7 ? html`<td colspan="${7 - row.length}"></td>` : nothing} ${row.map(y => __classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_renderItem).call(this, new Date(year, month, y)))} ${i > 0 && row.length < 7 ? html`<td colspan="${7 - row.length}"></td>` : nothing}</tr>`)}</tbody></table>`;
+    return html`<table role="grid"><thead><tr>${weekdays.map(x => html`<th scope="col"><span class="visually-hidden">${x.long}</span><div id="weekday-${x.id}-month-${month}" aria-hidden="true">${x.narrow}</div>${this.active ? html`<m3e-tooltip for="weekday-${x.id}-month-${month}">${x.long}</m3e-tooltip>` : nothing}</th>`)}</tr></thead><tbody>${weeks.map((row, i) => html`<tr role="row">${i === 0 && row.length < 7 ? html`<td colspan="${7 - row.length}"></td>` : nothing} ${row.map(y => __classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_renderItem).call(this, new Date(year, month, y)))} ${i > 0 && row.length < 7 ? html`<td colspan="${7 - row.length}"></td>` : nothing}</tr>`)}</tbody></table>`;
   }
 };
 _M3eMonthViewElement_instances = new WeakSet();
@@ -253,6 +258,18 @@ _M3eMonthViewElement_renderItem = function _M3eMonthViewElement_renderItem(value
       }
     }
   }
+  if (!this.active) {
+    return html`<td role="gridcell" class="${classMap({
+      current,
+      selected,
+      active,
+      special,
+      range,
+      "range-start": rangeStart,
+      "range-start-range": rangeStartRange,
+      "range-end": rangeEnd
+    })}"><div id="${id}" role="button" class="item" data-value="${value.toISOString()}" tabindex="${active ? "0" : "-1"}" aria-disabled="${ifDefined(disabled || undefined)}" aria-current="${ifDefined(current ? "date" : undefined)}" aria-pressed="${selected || rangeStart || rangeEnd}"><m3e-state-layer class="state-layer" disabled="disabled" disable-hover></m3e-state-layer><span aria-hidden="true">${value.getDate()}</span></div></td>`;
+  }
   return html`<td role="gridcell" class="${classMap({
     current,
     selected,
@@ -418,6 +435,13 @@ _M3eMultiYearViewElement_renderItem = function _M3eMultiYearViewElement_renderIt
   const current = this.today.getFullYear() === year;
   const disabled = this.minDate && year < this.minDate.getFullYear() || this.maxDate && year > this.maxDate.getFullYear();
   const id = `year-${year}`;
+  if (!this.active) {
+    return html`<td role="gridcell" class="${classMap({
+      current,
+      selected,
+      active
+    })}"><div id="${id}" class="item" role="button" tabindex="${active ? "0" : "-1"}" data-value="${year}" aria-disabled="${ifDefined(disabled || undefined)}" aria-current="${ifDefined(current ? "date" : undefined)}" aria-pressed="${selected}"><m3e-state-layer class="state-layer" disabled="disabled" disable-hover></m3e-state-layer><span>${yearFormat.format(new Date(year, 0, 1))}</span></div></td>`;
+  }
   return html`<td role="gridcell" class="${classMap({
     current,
     selected,
@@ -530,6 +554,13 @@ _M3eYearViewElement_renderItem = function _M3eYearViewElement_renderItem(month)
   const current = this.today.getFullYear() === month.date.getFullYear() && this.today.getMonth() === month.date.getMonth();
   const disabled = this.minDate && (month.date.getFullYear() < this.minDate.getFullYear() || month.date.getFullYear() === this.minDate.getFullYear() && month.date.getMonth() < this.minDate.getMonth()) || this.maxDate && (month.date.getFullYear() > this.maxDate.getFullYear() || month.date.getFullYear() === this.maxDate.getFullYear() && month.date.getMonth() > this.maxDate.getMonth());
   const id = `month-${month.date.getMonth()}`;
+  if (!this.active) {
+    return html`<td role="gridcell" class="${classMap({
+      current,
+      selected,
+      active
+    })}"><div id="${id}" class="item" role="button" tabindex="${active ? "0" : "-1"}" data-value="${month.date.toISOString()}" aria-disabled="${ifDefined(disabled || undefined)}" aria-current="${ifDefined(current ? "date" : undefined)}" aria-pressed="${selected}"><m3e-state-layer class="state-layer" disabled="disabled" disable-hover></m3e-state-layer><span aria-hidden="true">${month.narrow}</span></div></td>`;
+  }
   return html`<td role="gridcell" class="${classMap({
     current,
     selected,
@@ -817,6 +848,10 @@ let M3eCalendarElement = class M3eCalendarElement extends LitElement {
   updateTodayDate() {
     this._today = new Date();
   }
+  /** Resets the active view. */
+  resetActiveView() {
+    this._activeView = this.startView;
+  }
   /**
    * Moves the calendar to the previous period.
    * @returns {Promise<void>} A promise that resolves when the operation is complete.
@@ -914,7 +949,7 @@ let M3eCalendarElement = class M3eCalendarElement extends LitElement {
       }
     }
     if (changedProperties.has("startView")) {
-      this._activeView = this.startView;
+      this.resetActiveView();
     }
   }
   /** @inheritdoc */
@@ -942,26 +977,27 @@ _M3eCalendarElement_renderHeader = function _M3eCalendarElement_renderHeader() {
   })}" slot="trailing-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg></m3e-button><div class="spacer"></div><m3e-icon-button ?disabled="${!this.canMovePreviousPeriod}" @click="${this.movePreviousPeriod}" aria-label="${this._activeView === "month" ? this.previousMonthLabel : this._activeView === "year" ? this.previousYearLabel : this.previousMultiYearLabel}">${M3eDirectionality.current === "ltr" ? html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>` : html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>`}</m3e-icon-button><m3e-icon-button ?disabled="${!this.canMoveNextPeriod}" @click="${this.moveNextPeriod}" aria-label="${this._activeView === "month" ? this.nextMonthLabel : this._activeView === "year" ? this.nextYearLabel : this.nextMultiYearLabel}">${M3eDirectionality.current === "ltr" ? html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>` : html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>`}</m3e-icon-button></div>`;
 };
 _M3eCalendarElement_renderView = function _M3eCalendarElement_renderView(view, offset) {
+  const active = view === this._activeView && offset === 0;
   const activeDate = offset < 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getPreviousPeriod).call(this, view) : offset > 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getNextPeriod).call(this, view) : new Date(this._activeDate);
   switch (view) {
     case "month":
       return html`<m3e-month-view class="view ${classMap({
         before: offset < 0,
         after: offset > 0,
-        active: view === this._activeView && offset === 0
-      })}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" range-start="${ifDefined(this.rangeStart?.toISOString())}" range-end="${ifDefined(this.rangeEnd?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleDateChange) : undefined}"></m3e-month-view>`;
+        active
+      })}" ?active="${active}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" range-start="${ifDefined(this.rangeStart?.toISOString())}" range-end="${ifDefined(this.rangeEnd?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleDateChange) : undefined}"></m3e-month-view>`;
     case "year":
       return html`<m3e-year-view class="view ${classMap({
         before: offset < 0,
         after: offset > 0,
-        active: view === this._activeView && offset === 0
-      })}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleMonthChange) : undefined}"></m3e-year-view>`;
+        active
+      })}" ?active="${active}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleMonthChange) : undefined}"></m3e-year-view>`;
     case "multi-year":
       return html`<m3e-multi-year-view class="view ${classMap({
         before: offset < 0,
         after: offset > 0,
-        active: view === this._activeView && offset === 0
-      })}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleYearChange) : undefined}"></m3e-multi-year-view>`;
+        active
+      })}" ?active="${active}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleYearChange) : undefined}"></m3e-multi-year-view>`;
   }
 };
 _M3eCalendarElement_handleDateChange = function _M3eCalendarElement_handleDateChange(e) {
@@ -1036,7 +1072,7 @@ _M3eCalendarElement_getNextPeriod = function _M3eCalendarElement_getNextPeriod(v
   return activeDate;
 };
 /** The styles of the element. */
-M3eCalendarElement.styles = css`:host { display: inline-block; vertical-align: top; width: fit-content; height: fit-content; } .base { display: flex; flex-direction: column; width: fit-content; overflow: hidden; padding: var(--m3e-calendar-padding, 0.5rem); background-color: var(--m3e-calendar-container-color); box-shadow: var(--m3e-calendar-container-elevation); border-radius: var(--m3e-calendar-container-shape); } .header { display: flex; align-items: center; --m3e-text-button-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-hover-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-focus-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-pressed-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); } .spacer { flex: 1 1 auto; } svg { transition: transform ${DesignToken.motion.spring.fastEffects}; } svg.rotate { transform: rotate(-180deg); } .body { position: relative; } .view:not(.no-animate) { transition: ${unsafeCSS(`margin var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
+M3eCalendarElement.styles = css`:host { display: inline-block; vertical-align: top; width: fit-content; height: fit-content; } .base { contain: layout style paint; display: flex; flex-direction: column; width: fit-content; overflow: hidden; padding: var(--m3e-calendar-padding, 0.5rem); background-color: var(--m3e-calendar-container-color); box-shadow: var(--m3e-calendar-container-elevation); border-radius: var(--m3e-calendar-container-shape); } .header { display: flex; align-items: center; --m3e-text-button-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-hover-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-focus-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-pressed-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); } .spacer { flex: 1 1 auto; } svg { transition: transform ${DesignToken.motion.spring.fastEffects}; } svg.rotate { transform: rotate(-180deg); } .body { position: relative; } .view:not(.no-animate) { transition: ${unsafeCSS(`margin var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
         visibility var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } .view.before, .view.after { visibility: hidden; position: absolute; } .view.before { margin-inline-start: -100%; } .view.after { margin-inline-start: 100%; } .view:not(.before):not(.after) { visibility: visible; position: relative; left: 0; margin-inline-start: 0; } .row { opacity: 1; transform: translateY(0); } .row.multi-year { transition: ${unsafeCSS(`transform var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete,
         opacity var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } .row:not(.multi-year) { transition: ${unsafeCSS(`opacity var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } .body.month > .row:not(.month), .body.year > .row:not(.year), .body.multi-year > .row:not(.multi-year) { visibility: hidden; position: absolute; transform: translateY(-10%); opacity: 0; } .body.month > .row:not(.month) .view:not(.before):not(.after), .body.year > .row:not(.year) .view:not(.before):not(.after), .body.multi-year > .row:not(.multi-year) .view:not(.before):not(.after) { visibility: hidden; transition: none; } @media (prefers-reduced-motion) { .row:not(.multi-year), .row.multi-year, .view:not(.no-animate), svg { transition: none; } }`;
 __decorate([state()], M3eCalendarElement.prototype, "_today", void 0);