@m3e/web 2.5.11 → 2.5.13

package/dist/breadcrumb.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.min.js","sources":["../../src/breadcrumb/BreadcrumbElement.ts","../../src/breadcrumb/isIconOnly.ts","../../src/breadcrumb/BreadcrumbItemButtonElement.ts","../../src/breadcrumb/BreadcrumbItemElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, Role } from \"@m3e/web/core\";\r\n\r\nimport type { M3eBreadcrumbItemElement } from \"./BreadcrumbItemElement\";\r\n\r\n/**\r\n * Displays a hierarchical navigation path and identifies the user's\r\n * current location within an application.\r\n *\r\n * @description\r\n * The `m3e-breadcrumb` component arranges `m3e-breadcrumb-item` children into\r\n * a trail of navigation steps. It tracks the last item as the current page and\r\n * supports a custom separator slot for alternate divider content.\r\n *\r\n * @example\r\n * The following example illustrates a simple breadcrumb with three items.\r\n * ```html\r\n * <m3e-breadcrumb>\r\n *   <m3e-breadcrumb-item href=\"/dashboard\">Dashboard</m3e-breadcrumb-item>\r\n *   <m3e-breadcrumb-item href=\"/dashboard/reports\">Reports</m3e-breadcrumb-item>\r\n *   <m3e-breadcrumb-item href=\"/dashboard/reports/annual\">Annual</m3e-breadcrumb-item>\r\n * </m3e-breadcrumb>\r\n * ```\r\n *\r\n * @tag m3e-breadcrumb\r\n *\r\n * @slot - Renders breadcrumb items.\r\n * @slot separator - Renders a custom separator between breadcrumb items.\r\n *\r\n * @attr wrap - Whether breadcrumb items should wrap onto a new line.\r\n */\r\n@customElement(\"m3e-breadcrumb\")\r\nexport class M3eBreadcrumbElement extends Role(LitElement, \"navigation\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n    :host([wrap]) .base {\r\n      flex-wrap: wrap;\r\n    }\r\n    slot[name=\"separator\"] {\r\n      display: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #customSeparator: Element[] = [];\r\n\r\n  /**\r\n   * Whether items wrap to a new line.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) wrap = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" role=\"list\">\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      <slot name=\"separator\" @slotchange=\"${this.#handleSeparatorSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const items = this.querySelectorAll(\"m3e-breadcrumb-item\");\r\n    for (let i = 0; i < items.length; i++) {\r\n      const item = items[i];\r\n      if (i < items.length - 1) {\r\n        item.removeAttribute(\"current\");\r\n      } else if (!item.hasAttribute(\"current\")) {\r\n        item.setAttribute(\"current\", \"page\");\r\n      }\r\n      this.#setSeparator(item);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleSeparatorSlotChange(e: Event): void {\r\n    this.#customSeparator = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\r\n    this.querySelectorAll(\"m3e-breadcrumb-item\").forEach((x) => this.#setSeparator(x));\r\n  }\r\n\r\n  /** @private */\r\n  #setSeparator(item: M3eBreadcrumbItemElement): void {\r\n    item._setSeparator(\r\n      this.#customSeparator.map((x) => {\r\n        const clone = <Element>x.cloneNode(true);\r\n        clone.part = \"separator\";\r\n        return clone;\r\n      }),\r\n    );\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-breadcrumb\": M3eBreadcrumbElement;\r\n  }\r\n}\r\n","/** @internal */\r\nexport function isIconOnly(slot: HTMLSlotElement): boolean {\r\n  const elements = slot.assignedElements({ flatten: true });\r\n  if (elements.length === 1) {\r\n    const rect = elements[0].getBoundingClientRect();\r\n    return rect.width <= 28 && rect.height <= 28;\r\n  }\r\n  return false;\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  Focusable,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { BreadcrumbItemCurrent } from \"./BreadcrumbItemCurrent\";\r\nimport { isIconOnly } from \"./isIconOnly\";\r\n\r\n/**\r\n * @internal\r\n * An internal interactive element used to present the content of a breadcrumb item.\r\n */\r\n@customElement(\"m3e-breadcrumb-item-button\")\r\nexport class M3eBreadcrumbItemButtonElement extends KeyboardClick(\r\n  LinkButton(Focusable(Disabled(AttachInternals(Role(LitElement, \"button\"), true)))),\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      outline: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      border-radius: var(--m3e-breadcrumb-item-shape, ${DesignToken.shape.corner.full});\r\n      height: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      column-gap: var(--m3e-breadcrumb-item-icon-label-space, 0.5rem);\r\n    }\r\n    .icon {\r\n      font-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem);\r\n      --m3e-icon-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem);\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      font-size: inherit !important;\r\n      flex: none;\r\n    }\r\n    ::slotted(svg[slot=\"icon\"]) {\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n    :host(:is(:state(--icon-only), :--icon-only)) .overflow {\r\n      flex: none;\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))),\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))) .base {\r\n      min-width: 0;\r\n    }\r\n    :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base {\r\n      color: var(--m3e-breadcrumb-item-icon-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:is(:state(--icon-only), :--icon-only)) .base {\r\n      width: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      padding-inline: var(--m3e-breadcrumb-item-icon-padding-inline, 0px);\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-breadcrumb-item-icon-hover-state-layer-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-breadcrumb-item-icon-focus-state-layer-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-breadcrumb-item-icon-pressed-state-layer-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base {\r\n      color: var(--m3e-breadcrumb-item-label-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))) .base {\r\n      font-size: var(--m3e-breadcrumb-item-label-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-breadcrumb-item-label-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-breadcrumb-item-label-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-breadcrumb-item-label-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))) .base {\r\n      padding-inline: var(--m3e-breadcrumb-item-label-padding-inline, 0.75rem);\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-breadcrumb-item-label-hover-state-layer-color,\r\n        ${DesignToken.color.primary}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-breadcrumb-item-label-focus-state-layer-color,\r\n        ${DesignToken.color.primary}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-breadcrumb-item-label-pressed-state-layer-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([current]) .base {\r\n      color: var(--m3e-breadcrumb-item-last-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([current])) {\r\n      cursor: pointer;\r\n      user-select: none;\r\n    }\r\n    :host(:disabled:not([current])) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-breadcrumb-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-breadcrumb-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      width: max(3rem, 100%);\r\n      margin: auto;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base,\r\n      :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base {\r\n        color: LinkText;\r\n        outline: 1px solid LinkText;\r\n      }\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /**\r\n   * Indicates the current item in the breadcrumb path.\r\n   * @default undefined\r\n   */\r\n  @property({ reflect: true }) current?: BreadcrumbItemCurrent;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    super.connectedCallback();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\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(\"disabled\") || changedProperties.has(\"current\")) {\r\n      this.ariaDisabled = this.disabled && !this.current ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"current\")) {\r\n      if (this.current) {\r\n        this.role = null;\r\n      } else if (this.hasAttribute(\"href\")) {\r\n        this.role = \"link\";\r\n      } else {\r\n        this.role = \"button\";\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" aria-current=\"${ifDefined(this.current)}\">\r\n      ${this.current\r\n        ? nothing\r\n        : html`<m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"> </m3e-state-layer>\r\n            <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n            <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n            ${this[renderPseudoLink]()}`}\r\n      <slot class=\"icon\" name=\"icon\" aria-hidden=\"true\"></slot>\r\n      <m3e-text-overflow class=\"overflow\">\r\n        <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      </m3e-text-overflow>\r\n      ${this.current ? nothing : html`<div class=\"touch\" aria-hidden=\"true\"></div>`}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    setCustomState(this, \"--icon-only\", isIconOnly(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    // If current and link, disable default link click handler behavior.\r\n    if (this.current && this.href) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-breadcrumb-item-button\": M3eBreadcrumbItemButtonElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport { AttachInternals, customElement, LinkButton, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\nimport { M3eBreadcrumbItemButtonElement } from \"./BreadcrumbItemButtonElement\";\r\nimport { BreadcrumbItemCurrent } from \"./BreadcrumbItemCurrent\";\r\nimport { isIconOnly } from \"./isIconOnly\";\r\n\r\nimport \"./BreadcrumbItemButtonElement\";\r\n\r\n/**\r\n * An item in a breadcrumb.\r\n *\r\n * @description\r\n * The `m3e-breadcrumb-item` element represents a single item in a breadcrumb\r\n * navigation trail. It renders an internal button and supports navigation\r\n * attributes for link behavior.\r\n *\r\n * @tag m3e-breadcrumb-item\r\n *\r\n * @slot - Renders the content of the breadcrumb item.\r\n * @slot icon - Renders an icon before the item's label.\r\n *\r\n * @attr item-label - The accessible label used by the internal breadcrumb button.\r\n * @attr disabled - Whether the breadcrumb item is disabled.\r\n * @attr current - Marks the breadcrumb item as the current location in the trail.\r\n * @attr href - The URL to which the internal breadcrumb link button points.\r\n * @attr target - The target of the internal breadcrumb link button.\r\n * @attr download - A value indicating whether the internal link target will be downloaded, optionally specifying a file name.\r\n * @attr rel - The relationship between the internal link target and the document.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-breadcrumb-item-shape - Shape of the internal breadcrumb item button.\r\n * @cssprop --m3e-breadcrumb-item-container-height - Height of the internal breadcrumb item button container.\r\n * @cssprop --m3e-breadcrumb-item-icon-color - Color of breadcrumb item icon-only content.\r\n * @cssprop --m3e-breadcrumb-item-icon-padding-inline - Horizontal padding for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-icon-hover-state-layer-color - Hover state layer color for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-icon-focus-state-layer-color - Focus state layer color for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-icon-pressed-state-layer-color - Pressed state layer color for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-color - Color of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-font-size - Font size of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-font-weight - Font weight of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-line-height - Line height of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-tracking - Letter spacing of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-padding-inline - Horizontal padding for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-hover-state-layer-color - Hover state layer color for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-focus-state-layer-color - Focus state layer color for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-pressed-state-layer-color - Pressed state layer color for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-last-color - Color used for the current breadcrumb item.\r\n * @cssprop --m3e-breadcrumb-item-icon-label-space - Space between icon and label.\r\n * @cssprop --m3e-breadcrumb-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-breadcrumb-item-disabled-color - Disabled color used by the breadcrumb item button.\r\n * @cssprop --m3e-breadcrumb-item-disabled-opacity - Disabled opacity used by the breadcrumb item button.\r\n */\r\n@customElement(\"m3e-breadcrumb-item\")\r\nexport class M3eBreadcrumbItemElement extends LinkButton(AttachInternals(Role(LitElement, \"listitem\")), true) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      height: 100%;\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))[current]),\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))[current]) .base {\r\n      min-width: 0;\r\n    }\r\n    .button {\r\n      flex: 1 1 auto;\r\n    }\r\n    .separator {\r\n      flex: none;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-width: 0.5rem;\r\n      --m3e-icon-size: var(--m3e-breadcrumb-separator-icon-size, 1.5rem);\r\n    }\r\n    .separator-icon {\r\n      width: 1em;\r\n      height: 1em;\r\n      font-size: var(--m3e-icon-size);\r\n      vertical-align: middle;\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".button\") private readonly _button!: M3eBreadcrumbItemButtonElement;\r\n  /** @private */ #defaultSeparator?: Element;\r\n\r\n  /**\r\n   * The accessible label given to the item's internal button.\r\n   * @default \"\"\r\n   */\r\n  @property({ attribute: \"item-label\" }) itemLabel = \"\";\r\n\r\n  /**\r\n   * Whether the element is disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Indicates the current item in the breadcrumb path.\r\n   * @default undefined\r\n   */\r\n  @property({ reflect: true }) current?: BreadcrumbItemCurrent;\r\n\r\n  /** @inheritdoc */\r\n  override focus(options?: FocusOptions): void {\r\n    this._button?.focus(options);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override blur(): void {\r\n    this._button?.blur();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override click(): void {\r\n    this._button?.click();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n    if (_changedProperties.has(\"current\")) {\r\n      this.#updateIconFilled();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-breadcrumb-item-button\r\n        class=\"button\"\r\n        aria-label=\"${ifDefined(this.itemLabel || undefined)}\"\r\n        ?disabled=\"${this.disabled}\"\r\n        current=\"${ifDefined(this.current)}\"\r\n        href=\"${ifDefined(this.href || undefined)}\"\r\n        target=\"${ifDefined(this.target || undefined)}\"\r\n        download=\"${ifDefined(this.download || undefined)}\"\r\n        rel=\"${ifDefined(this.rel || undefined)}\"\r\n      >\r\n        <slot name=\"icon\" slot=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n        <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      </m3e-breadcrumb-item-button>\r\n      ${this.#renderSeparator()}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderSeparator(): unknown {\r\n    return this.current\r\n      ? nothing\r\n      : html`<div class=\"separator\" aria-hidden=\"true\">\r\n          <svg class=\"separator-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n          </svg>\r\n        </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(): void {\r\n    this.#updateIconFilled();\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    setCustomState(this, \"--icon-only\", isIconOnly(e.target as HTMLSlotElement));\r\n    this.#updateIconFilled();\r\n  }\r\n\r\n  /** @private */\r\n  #updateIconFilled(): void {\r\n    this.querySelectorAll(\"m3e-icon\").forEach((x) => (x.filled = this.current !== undefined && this.current !== null));\r\n  }\r\n\r\n  /** @internal */\r\n  _setSeparator(nodes: Array<Node>) {\r\n    const separator = this.shadowRoot?.querySelector(\".separator\");\r\n    if (!separator) return;\r\n\r\n    if (nodes.length > 0) {\r\n      if (!this.#defaultSeparator && separator.firstElementChild) {\r\n        this.#defaultSeparator = separator.firstElementChild;\r\n      }\r\n      separator.replaceChildren(...nodes);\r\n    } else if (this.#defaultSeparator) {\r\n      separator.replaceChildren(this.#defaultSeparator);\r\n      this.#defaultSeparator = undefined;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-breadcrumb-item\": M3eBreadcrumbItemElement;\r\n  }\r\n}\r\n"],"names":["M3eBreadcrumbElement","Role","LitElement","constructor","_M3eBreadcrumbElement_customSeparator","set","this","wrap","render","html","__classPrivateFieldGet","_M3eBreadcrumbElement_instances","_M3eBreadcrumbElement_handleSlotChange","_M3eBreadcrumbElement_handleSeparatorSlotChange","isIconOnly","slot","elements","assignedElements","flatten","length","rect","getBoundingClientRect","width","height","items","querySelectorAll","i","item","removeAttribute","hasAttribute","setAttribute","_M3eBreadcrumbElement_setSeparator","call","e","__classPrivateFieldSet","target","forEach","x","_setSeparator","map","clone","cloneNode","part","styles","css","__decorate","property","type","Boolean","reflect","prototype","customElement","M3eBreadcrumbItemButtonElement","KeyboardClick","LinkButton","Focusable","Disabled","AttachInternals","_M3eBreadcrumbItemButtonElement_clickHandler","connectedCallback","addEventListener","super","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","attach","update","changedProperties","has","ariaDisabled","disabled","current","role","ifDefined","nothing","renderPseudoLink","_M3eBreadcrumbItemButtonElement_instances","_M3eBreadcrumbItemButtonElement_handleSlotChange","setCustomState","href","preventDefault","DesignToken","shape","corner","full","density","calc","color","onSurfaceVariant","onSurface","primary","typescale","standard","label","large","fontSize","fontWeight","lineHeight","tracking","query","M3eBreadcrumbItemElement","_M3eBreadcrumbItemElement_defaultSeparator","itemLabel","focus","options","_button","blur","click","updated","_M3eBreadcrumbItemElement_instances","_M3eBreadcrumbItemElement_updateIconFilled","undefined","download","rel","_M3eBreadcrumbItemElement_handleIconSlotChange","_M3eBreadcrumbItemElement_handleSlotChange","_M3eBreadcrumbItemElement_renderSeparator","nodes","separator","shadowRoot","querySelector","firstElementChild","replaceChildren","filled","attribute"],"mappings":"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"}
+{"version":3,"file":"breadcrumb.min.js","sources":["../../src/breadcrumb/BreadcrumbElement.ts","../../src/breadcrumb/isIconOnly.ts","../../src/breadcrumb/BreadcrumbItemButtonElement.ts","../../src/breadcrumb/BreadcrumbItemElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, Role } from \"@m3e/web/core\";\r\n\r\nimport type { M3eBreadcrumbItemElement } from \"./BreadcrumbItemElement\";\r\n\r\n/**\r\n * Displays a hierarchical navigation path and identifies the user's\r\n * current location within an application.\r\n *\r\n * @description\r\n * The `m3e-breadcrumb` component arranges `m3e-breadcrumb-item` children into\r\n * a trail of navigation steps. It tracks the last item as the current page and\r\n * supports a custom separator slot for alternate divider content.\r\n *\r\n * @example\r\n * The following example illustrates a simple breadcrumb with three items.\r\n * ```html\r\n * <m3e-breadcrumb>\r\n *   <m3e-breadcrumb-item href=\"/dashboard\">Dashboard</m3e-breadcrumb-item>\r\n *   <m3e-breadcrumb-item href=\"/dashboard/reports\">Reports</m3e-breadcrumb-item>\r\n *   <m3e-breadcrumb-item href=\"/dashboard/reports/annual\">Annual</m3e-breadcrumb-item>\r\n * </m3e-breadcrumb>\r\n * ```\r\n *\r\n * @tag m3e-breadcrumb\r\n *\r\n * @slot - Renders breadcrumb items.\r\n * @slot separator - Renders a custom separator between breadcrumb items.\r\n *\r\n * @attr wrap - Whether breadcrumb items should wrap onto a new line.\r\n */\r\n@customElement(\"m3e-breadcrumb\")\r\nexport class M3eBreadcrumbElement extends Role(LitElement, \"navigation\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n    :host([wrap]) .base {\r\n      flex-wrap: wrap;\r\n    }\r\n    slot[name=\"separator\"] {\r\n      display: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #customSeparator: Element[] = [];\r\n\r\n  /**\r\n   * Whether items wrap to a new line.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) wrap = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" role=\"list\">\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      <slot name=\"separator\" @slotchange=\"${this.#handleSeparatorSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const items = this.querySelectorAll(\"m3e-breadcrumb-item\");\r\n    for (let i = 0; i < items.length; i++) {\r\n      const item = items[i];\r\n      if (i < items.length - 1) {\r\n        item.removeAttribute(\"current\");\r\n      } else if (!item.hasAttribute(\"current\")) {\r\n        item.setAttribute(\"current\", \"page\");\r\n      }\r\n      this.#setSeparator(item);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleSeparatorSlotChange(e: Event): void {\r\n    this.#customSeparator = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\r\n    this.querySelectorAll(\"m3e-breadcrumb-item\").forEach((x) => this.#setSeparator(x));\r\n  }\r\n\r\n  /** @private */\r\n  #setSeparator(item: M3eBreadcrumbItemElement): void {\r\n    item._setSeparator(\r\n      this.#customSeparator.map((x) => {\r\n        const clone = <Element>x.cloneNode(true);\r\n        clone.part = \"separator\";\r\n        return clone;\r\n      }),\r\n    );\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-breadcrumb\": M3eBreadcrumbElement;\r\n  }\r\n}\r\n","/** @internal */\r\nexport function isIconOnly(slot: HTMLSlotElement): boolean {\r\n  const elements = slot.assignedElements({ flatten: true });\r\n  if (elements.length === 1) {\r\n    const rect = elements[0].getBoundingClientRect();\r\n    return rect.width <= 28 && rect.height <= 28;\r\n  }\r\n  return false;\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  Focusable,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { BreadcrumbItemCurrent } from \"./BreadcrumbItemCurrent\";\r\nimport { isIconOnly } from \"./isIconOnly\";\r\n\r\n/**\r\n * @internal\r\n * An internal interactive element used to present the content of a breadcrumb item.\r\n */\r\n@customElement(\"m3e-breadcrumb-item-button\")\r\nexport class M3eBreadcrumbItemButtonElement extends KeyboardClick(\r\n  LinkButton(Focusable(Disabled(AttachInternals(Role(LitElement, \"button\"), true)))),\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      outline: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      border-radius: var(--m3e-breadcrumb-item-shape, ${DesignToken.shape.corner.full});\r\n      height: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      column-gap: var(--m3e-breadcrumb-item-icon-label-space, 0.5rem);\r\n    }\r\n    .icon {\r\n      font-size: var(--m3e-breadcrumb-item-icon-size, 1.25rem);\r\n      --m3e-icon-size: var(--m3e-breadcrumb-item-icon-size, 1.25rem);\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      font-size: inherit !important;\r\n      flex: none;\r\n    }\r\n    ::slotted(svg[slot=\"icon\"]) {\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n    :host(:is(:state(--icon-only), :--icon-only)) .overflow {\r\n      flex: none;\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))),\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))) .base {\r\n      min-width: 0;\r\n    }\r\n    :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base {\r\n      color: var(--m3e-breadcrumb-item-icon-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:is(:state(--icon-only), :--icon-only)) .base {\r\n      width: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      padding-inline: var(--m3e-breadcrumb-item-icon-padding-inline, 0px);\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-breadcrumb-item-icon-hover-state-layer-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-breadcrumb-item-icon-focus-state-layer-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-breadcrumb-item-icon-pressed-state-layer-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base {\r\n      color: var(--m3e-breadcrumb-item-label-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))) .base {\r\n      font-size: var(--m3e-breadcrumb-item-label-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-breadcrumb-item-label-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-breadcrumb-item-label-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-breadcrumb-item-label-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))) .base {\r\n      padding-inline: var(--m3e-breadcrumb-item-label-padding-inline, 0.75rem);\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-breadcrumb-item-label-hover-state-layer-color,\r\n        ${DesignToken.color.primary}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-breadcrumb-item-label-focus-state-layer-color,\r\n        ${DesignToken.color.primary}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-breadcrumb-item-label-pressed-state-layer-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([current]) .base {\r\n      color: var(--m3e-breadcrumb-item-last-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([current])) {\r\n      cursor: pointer;\r\n      user-select: none;\r\n    }\r\n    :host(:disabled:not([current])) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-breadcrumb-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-breadcrumb-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      width: max(3rem, 100%);\r\n      margin: auto;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base,\r\n      :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base {\r\n        color: LinkText;\r\n        outline: 1px solid LinkText;\r\n      }\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /**\r\n   * Indicates the current item in the breadcrumb path.\r\n   * @default undefined\r\n   */\r\n  @property({ reflect: true }) current?: BreadcrumbItemCurrent;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    super.connectedCallback();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\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(\"disabled\") || changedProperties.has(\"current\")) {\r\n      this.ariaDisabled = this.disabled && !this.current ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"current\")) {\r\n      if (this.current) {\r\n        this.role = null;\r\n      } else if (this.hasAttribute(\"href\")) {\r\n        this.role = \"link\";\r\n      } else {\r\n        this.role = \"button\";\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" aria-current=\"${ifDefined(this.current)}\">\r\n      ${this.current\r\n        ? nothing\r\n        : html`<m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"> </m3e-state-layer>\r\n            <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n            <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n            ${this[renderPseudoLink]()}`}\r\n      <slot class=\"icon\" name=\"icon\" aria-hidden=\"true\"></slot>\r\n      <m3e-text-overflow class=\"overflow\">\r\n        <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      </m3e-text-overflow>\r\n      ${this.current ? nothing : html`<div class=\"touch\" aria-hidden=\"true\"></div>`}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    setCustomState(this, \"--icon-only\", isIconOnly(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    // If current and link, disable default link click handler behavior.\r\n    if (this.current && this.href) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-breadcrumb-item-button\": M3eBreadcrumbItemButtonElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport { AttachInternals, customElement, LinkButton, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\nimport { M3eBreadcrumbItemButtonElement } from \"./BreadcrumbItemButtonElement\";\r\nimport { BreadcrumbItemCurrent } from \"./BreadcrumbItemCurrent\";\r\nimport { isIconOnly } from \"./isIconOnly\";\r\n\r\nimport \"./BreadcrumbItemButtonElement\";\r\n\r\n/**\r\n * An item in a breadcrumb.\r\n *\r\n * @description\r\n * The `m3e-breadcrumb-item` element represents a single item in a breadcrumb\r\n * navigation trail. It renders an internal button and supports navigation\r\n * attributes for link behavior.\r\n *\r\n * @tag m3e-breadcrumb-item\r\n *\r\n * @slot - Renders the content of the breadcrumb item.\r\n * @slot icon - Renders an icon before the item's label.\r\n *\r\n * @attr item-label - The accessible label used by the internal breadcrumb button.\r\n * @attr disabled - Whether the breadcrumb item is disabled.\r\n * @attr current - Marks the breadcrumb item as the current location in the trail.\r\n * @attr href - The URL to which the internal breadcrumb link button points.\r\n * @attr target - The target of the internal breadcrumb link button.\r\n * @attr download - A value indicating whether the internal link target will be downloaded, optionally specifying a file name.\r\n * @attr rel - The relationship between the internal link target and the document.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-breadcrumb-item-shape - Shape of the internal breadcrumb item button.\r\n * @cssprop --m3e-breadcrumb-item-container-height - Height of the internal breadcrumb item button container.\r\n * @cssprop --m3e-breadcrumb-item-icon-color - Color of breadcrumb item icon-only content.\r\n * @cssprop --m3e-breadcrumb-item-icon-padding-inline - Horizontal padding for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-icon-hover-state-layer-color - Hover state layer color for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-icon-focus-state-layer-color - Focus state layer color for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-icon-pressed-state-layer-color - Pressed state layer color for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-color - Color of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-font-size - Font size of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-font-weight - Font weight of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-line-height - Line height of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-tracking - Letter spacing of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-padding-inline - Horizontal padding for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-hover-state-layer-color - Hover state layer color for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-focus-state-layer-color - Focus state layer color for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-pressed-state-layer-color - Pressed state layer color for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-last-color - Color used for the current breadcrumb item.\r\n * @cssprop --m3e-breadcrumb-item-icon-label-space - Space between icon and label.\r\n * @cssprop --m3e-breadcrumb-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-breadcrumb-item-disabled-color - Disabled color used by the breadcrumb item button.\r\n * @cssprop --m3e-breadcrumb-item-disabled-opacity - Disabled opacity used by the breadcrumb item button.\r\n */\r\n@customElement(\"m3e-breadcrumb-item\")\r\nexport class M3eBreadcrumbItemElement extends LinkButton(AttachInternals(Role(LitElement, \"listitem\")), true) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      height: 100%;\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))[current]),\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))[current]) .base {\r\n      min-width: 0;\r\n    }\r\n    .button {\r\n      flex: 1 1 auto;\r\n    }\r\n    .separator {\r\n      flex: none;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-width: 0.5rem;\r\n      --m3e-icon-size: var(--m3e-breadcrumb-separator-icon-size, 1.5rem);\r\n    }\r\n    .separator-icon {\r\n      width: 1em;\r\n      height: 1em;\r\n      font-size: var(--m3e-icon-size);\r\n      vertical-align: middle;\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".button\") private readonly _button!: M3eBreadcrumbItemButtonElement;\r\n  /** @private */ #defaultSeparator?: Element;\r\n\r\n  /**\r\n   * The accessible label given to the item's internal button.\r\n   * @default \"\"\r\n   */\r\n  @property({ attribute: \"item-label\" }) itemLabel = \"\";\r\n\r\n  /**\r\n   * Whether the element is disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Indicates the current item in the breadcrumb path.\r\n   * @default undefined\r\n   */\r\n  @property({ reflect: true }) current?: BreadcrumbItemCurrent;\r\n\r\n  /** @inheritdoc */\r\n  override focus(options?: FocusOptions): void {\r\n    this._button?.focus(options);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override blur(): void {\r\n    this._button?.blur();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override click(): void {\r\n    this._button?.click();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n    if (_changedProperties.has(\"current\")) {\r\n      this.#updateIconFilled();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-breadcrumb-item-button\r\n        class=\"button\"\r\n        aria-label=\"${ifDefined(this.itemLabel || undefined)}\"\r\n        ?disabled=\"${this.disabled}\"\r\n        current=\"${ifDefined(this.current)}\"\r\n        href=\"${ifDefined(this.href || undefined)}\"\r\n        target=\"${ifDefined(this.target || undefined)}\"\r\n        download=\"${ifDefined(this.download || undefined)}\"\r\n        rel=\"${ifDefined(this.rel || undefined)}\"\r\n      >\r\n        <slot name=\"icon\" slot=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n        <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      </m3e-breadcrumb-item-button>\r\n      ${this.#renderSeparator()}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderSeparator(): unknown {\r\n    return this.current\r\n      ? nothing\r\n      : html`<div class=\"separator\" aria-hidden=\"true\">\r\n          <svg class=\"separator-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n          </svg>\r\n        </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(): void {\r\n    this.#updateIconFilled();\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    setCustomState(this, \"--icon-only\", isIconOnly(e.target as HTMLSlotElement));\r\n    this.#updateIconFilled();\r\n  }\r\n\r\n  /** @private */\r\n  #updateIconFilled(): void {\r\n    this.querySelectorAll(\"m3e-icon\").forEach((x) => (x.filled = this.current !== undefined && this.current !== null));\r\n  }\r\n\r\n  /** @internal */\r\n  _setSeparator(nodes: Array<Node>) {\r\n    const separator = this.shadowRoot?.querySelector(\".separator\");\r\n    if (!separator) return;\r\n\r\n    if (nodes.length > 0) {\r\n      if (!this.#defaultSeparator && separator.firstElementChild) {\r\n        this.#defaultSeparator = separator.firstElementChild;\r\n      }\r\n      separator.replaceChildren(...nodes);\r\n    } else if (this.#defaultSeparator) {\r\n      separator.replaceChildren(this.#defaultSeparator);\r\n      this.#defaultSeparator = undefined;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-breadcrumb-item\": M3eBreadcrumbItemElement;\r\n  }\r\n}\r\n"],"names":["M3eBreadcrumbElement","Role","LitElement","constructor","_M3eBreadcrumbElement_customSeparator","set","this","wrap","render","html","__classPrivateFieldGet","_M3eBreadcrumbElement_instances","_M3eBreadcrumbElement_handleSlotChange","_M3eBreadcrumbElement_handleSeparatorSlotChange","isIconOnly","slot","elements","assignedElements","flatten","length","rect","getBoundingClientRect","width","height","items","querySelectorAll","i","item","removeAttribute","hasAttribute","setAttribute","_M3eBreadcrumbElement_setSeparator","call","e","__classPrivateFieldSet","target","forEach","x","_setSeparator","map","clone","cloneNode","part","styles","css","__decorate","property","type","Boolean","reflect","prototype","customElement","M3eBreadcrumbItemButtonElement","KeyboardClick","LinkButton","Focusable","Disabled","AttachInternals","_M3eBreadcrumbItemButtonElement_clickHandler","connectedCallback","addEventListener","super","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","attach","update","changedProperties","has","ariaDisabled","disabled","current","role","ifDefined","nothing","renderPseudoLink","_M3eBreadcrumbItemButtonElement_instances","_M3eBreadcrumbItemButtonElement_handleSlotChange","setCustomState","href","preventDefault","DesignToken","shape","corner","full","density","calc","color","onSurfaceVariant","onSurface","primary","typescale","standard","label","large","fontSize","fontWeight","lineHeight","tracking","query","M3eBreadcrumbItemElement","_M3eBreadcrumbItemElement_defaultSeparator","itemLabel","focus","options","_button","blur","click","updated","_M3eBreadcrumbItemElement_instances","_M3eBreadcrumbItemElement_updateIconFilled","undefined","download","rel","_M3eBreadcrumbItemElement_handleIconSlotChange","_M3eBreadcrumbItemElement_handleSlotChange","_M3eBreadcrumbItemElement_renderSeparator","nodes","separator","shadowRoot","querySelector","firstElementChild","replaceChildren","filled","attribute"],"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) {