@m3e/web 2.4.0 → 2.5.0

package/dist/breadcrumb.js

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

package/dist/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.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(-1)});\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(:state(-icon-only)) .overflow {\r\n      flex: none;\r\n    }\r\n    :host(:not(:state(-icon-only))),\r\n    :host(:not(:state(-icon-only))) .base {\r\n      min-width: 0;\r\n    }\r\n    :host(:state(-icon-only):not([current]):not(:disabled)) .base {\r\n      color: var(--m3e-breadcrumb-item-icon-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:state(-icon-only)) .base {\r\n      width: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken.density.calc(-1)});\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(:state(-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(:state(-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(:state(-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(:state(-icon-only):not([current]):not(:disabled)) .base,\r\n      :host(:not(:state(-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 *\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 - Emitted 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(:state(-icon-only))[current]),\r\n    :host(:not(:state(-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","wrap","render","html","__classPrivateFieldGet","_M3eBreadcrumbElement_instances","_M3eBreadcrumbElement_handleSlotChange","_M3eBreadcrumbElement_handleSeparatorSlotChange","items","querySelectorAll","i","length","item","removeAttribute","hasAttribute","setAttribute","_M3eBreadcrumbElement_setSeparator","call","e","__classPrivateFieldSet","target","assignedElements","flatten","forEach","x","_setSeparator","map","clone","cloneNode","part","styles","css","__decorate","property","type","Boolean","reflect","prototype","customElement","isIconOnly","slot","elements","rect","getBoundingClientRect","width","height","M3eBreadcrumbItemButtonElement","KeyboardClick","LinkButton","Focusable","Disabled","AttachInternals","_M3eBreadcrumbItemButtonElement_clickHandler","connectedCallback","addEventListener","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/breadcrumb.min.js

@@ -0,0 +1,7 @@
+/**
+ * @license MIT
+ * Copyright (c) 2025–2026 matraic
+ * See LICENSE file in the project root for full license text.
+ */
+import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as r}from"tslib";import{LitElement as i,html as o,css as a,nothing as s}from"lit";import{property as l,query as n}from"lit/decorators.js";import{Role as c,customElement as d,KeyboardClick as m,LinkButton as h,Focusable as u,Disabled as b,AttachInternals as p,renderPseudoLink as f,setCustomState as v,DesignToken as y}from"@m3e/web/core";import{ifDefined as g}from"lit/directives/if-defined.js";var $,w,x,k,S;let z=class extends(c(i,"navigation")){constructor(){super(...arguments),$.add(this),w.set(this,[]),this.wrap=!1}render(){return o`<div class="base" role="list"><slot @slotchange="${e(this,$,"m",x)}"></slot><slot name="separator" @slotchange="${e(this,$,"m",k)}"></slot></div>`}};function _(e){const t=e.assignedElements({flatten:!0});if(1===t.length){const e=t[0].getBoundingClientRect();return e.width<=28&&e.height<=28}return!1}var C,E,L,A;w=new WeakMap,$=new WeakSet,x=function(){const t=this.querySelectorAll("m3e-breadcrumb-item");for(let r=0;r<t.length;r++){const i=t[r];r<t.length-1?i.removeAttribute("current"):i.hasAttribute("current")||i.setAttribute("current","page"),e(this,$,"m",S).call(this,i)}},k=function(r){t(this,w,r.target.assignedElements({flatten:!0}),"f"),this.querySelectorAll("m3e-breadcrumb-item").forEach(t=>e(this,$,"m",S).call(this,t))},S=function(t){t._setSeparator(e(this,w,"f").map(e=>{const t=e.cloneNode(!0);return t.part="separator",t}))},z.styles=a`:host { display: block; } .base { display: flex; align-items: center; } :host([wrap]) .base { flex-wrap: wrap; } slot[name="separator"] { display: none; }`,r([l({type:Boolean,reflect:!0})],z.prototype,"wrap",void 0),z=r([d("m3e-breadcrumb")],z);let W=class extends(m(h(u(b(p(c(i,"button"),!0)))))){constructor(){super(...arguments),C.add(this),E.set(this,t=>e(this,C,"m",A).call(this,t))}connectedCallback(){this.addEventListener("click",e(this,E,"f")),super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,E,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){super.update(e),(e.has("disabled")||e.has("current"))&&(this.ariaDisabled=this.disabled&&!this.current?"true":null),e.has("current")&&(this.current?this.role=null:this.hasAttribute("href")?this.role="link":this.role="button")}render(){return o`<div class="base" aria-current="${g(this.current)}">${this.current?s:o`<m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>${this[f]()}`}<slot class="icon" name="icon" aria-hidden="true"></slot><m3e-text-overflow class="overflow"><slot @slotchange="${e(this,C,"m",L)}"></slot></m3e-text-overflow>${this.current?s:o`<div class="touch" aria-hidden="true"></div>`}</div>`}};var j,q,B,M,R,T;E=new WeakMap,C=new WeakSet,L=function(e){v(this,"-icon-only",_(e.target))},A=function(e){this.current&&this.href&&e.preventDefault()},W.styles=a`:host { display: block; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; justify-content: center; position: relative; border-radius: var(--m3e-breadcrumb-item-shape, ${y.shape.corner.full}); height: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${y.density.calc(-1)}); column-gap: var(--m3e-breadcrumb-item-icon-label-space, 0.5rem); } .icon { font-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem); --m3e-icon-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem); } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } :host(:state(-icon-only)) .overflow { flex: none; } :host(:not(:state(-icon-only))), :host(:not(:state(-icon-only))) .base { min-width: 0; } :host(:state(-icon-only):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-icon-color, ${y.color.onSurfaceVariant}); } :host(:state(-icon-only)) .base { width: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${y.density.calc(-1)}); padding-inline: var(--m3e-breadcrumb-item-icon-padding-inline, 0px); --m3e-state-layer-hover-color: var( --m3e-breadcrumb-item-icon-hover-state-layer-color, ${y.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-breadcrumb-item-icon-focus-state-layer-color, ${y.color.onSurface} ); --m3e-ripple-color: var(--m3e-breadcrumb-item-icon-pressed-state-layer-color, ${y.color.onSurface}); } :host(:not(:state(-icon-only)):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-label-color, ${y.color.primary}); } :host(:not(:state(-icon-only))) .base { font-size: var(--m3e-breadcrumb-item-label-font-size, ${y.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-breadcrumb-item-label-font-weight, ${y.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-breadcrumb-item-label-line-height, ${y.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-breadcrumb-item-label-tracking, ${y.typescale.standard.label.large.tracking}); } :host(:not(:state(-icon-only))) .base { padding-inline: var(--m3e-breadcrumb-item-label-padding-inline, 0.75rem); --m3e-state-layer-hover-color: var( --m3e-breadcrumb-item-label-hover-state-layer-color, ${y.color.primary} ); --m3e-state-layer-focus-color: var( --m3e-breadcrumb-item-label-focus-state-layer-color, ${y.color.primary} ); --m3e-ripple-color: var(--m3e-breadcrumb-item-label-pressed-state-layer-color, ${y.color.primary}); } :host([current]) .base { color: var(--m3e-breadcrumb-item-last-color, ${y.color.onSurface}); } :host(:not(:disabled):not([current])) { cursor: pointer; user-select: none; } :host(:disabled:not([current])) .base { color: color-mix( in srgb, var(--m3e-breadcrumb-item-disabled-color, ${y.color.onSurface}) var(--m3e-breadcrumb-item-disabled-opacity, 38%), transparent ); } .touch { position: absolute; height: 3rem; width: max(3rem, 100%); margin: auto; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:state(-icon-only):not([current]):not(:disabled)) .base, :host(:not(:state(-icon-only)):not([current]):not(:disabled)) .base { color: LinkText; outline: 1px solid LinkText; } :host(:disabled) .base { color: GrayText; } }`,r([n(".focus-ring")],W.prototype,"_focusRing",void 0),r([n(".state-layer")],W.prototype,"_stateLayer",void 0),r([n(".ripple")],W.prototype,"_ripple",void 0),r([l({reflect:!0})],W.prototype,"current",void 0),W=r([d("m3e-breadcrumb-item-button")],W);let D=class extends(h(p(c(i,"listitem")),!0)){constructor(){super(...arguments),j.add(this),q.set(this,void 0),this.itemLabel="",this.disabled=!1}focus(e){this._button?.focus(e)}blur(){this._button?.blur()}click(){this._button?.click()}updated(t){super.updated(t),t.has("current")&&e(this,j,"m",T).call(this)}render(){return o`<div class="base"><m3e-breadcrumb-item-button class="button" aria-label="${g(this.itemLabel||void 0)}" ?disabled="${this.disabled}" current="${g(this.current)}" href="${g(this.href||void 0)}" target="${g(this.target||void 0)}" download="${g(this.download||void 0)}" rel="${g(this.rel||void 0)}"><slot name="icon" slot="icon" @slotchange="${e(this,j,"m",M)}"></slot><slot @slotchange="${e(this,j,"m",R)}"></slot></m3e-breadcrumb-item-button>${e(this,j,"m",B).call(this)}</div>`}_setSeparator(r){const i=this.shadowRoot?.querySelector(".separator");i&&(r.length>0?(!e(this,q,"f")&&i.firstElementChild&&t(this,q,i.firstElementChild,"f"),i.replaceChildren(...r)):e(this,q,"f")&&(i.replaceChildren(e(this,q,"f")),t(this,q,void 0,"f")))}};q=new WeakMap,j=new WeakSet,B=function(){return this.current?s:o`<div class="separator" aria-hidden="true"><svg class="separator-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg></div>`},M=function(){e(this,j,"m",T).call(this)},R=function(t){v(this,"-icon-only",_(t.target)),e(this,j,"m",T).call(this)},T=function(){this.querySelectorAll("m3e-icon").forEach(e=>e.filled=void 0!==this.current&&null!==this.current)},D.styles=a`:host { display: block; } .base { display: flex; align-items: center; height: 100%; } :host(:not(:state(-icon-only))[current]), :host(:not(:state(-icon-only))[current]) .base { min-width: 0; } .button { flex: 1 1 auto; } .separator { flex: none; display: flex; justify-content: center; align-items: center; min-width: 0.5rem; --m3e-icon-size: var(--m3e-breadcrumb-separator-icon-size, 1.5rem); } .separator-icon { width: 1em; height: 1em; font-size: var(--m3e-icon-size); vertical-align: middle; }`,r([n(".button")],D.prototype,"_button",void 0),r([l({attribute:"item-label"})],D.prototype,"itemLabel",void 0),r([l({type:Boolean,reflect:!0})],D.prototype,"disabled",void 0),r([l({reflect:!0})],D.prototype,"current",void 0),D=r([d("m3e-breadcrumb-item")],D);export{z as M3eBreadcrumbElement,D as M3eBreadcrumbItemElement};
+//# sourceMappingURL=breadcrumb.min.js.map

package/dist/breadcrumb.min.js.map

@@ -0,0 +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(-1)});\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(:state(-icon-only)) .overflow {\r\n      flex: none;\r\n    }\r\n    :host(:not(:state(-icon-only))),\r\n    :host(:not(:state(-icon-only))) .base {\r\n      min-width: 0;\r\n    }\r\n    :host(:state(-icon-only):not([current]):not(:disabled)) .base {\r\n      color: var(--m3e-breadcrumb-item-icon-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:state(-icon-only)) .base {\r\n      width: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken.density.calc(-1)});\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(:state(-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(:state(-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(:state(-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(:state(-icon-only):not([current]):not(:disabled)) .base,\r\n      :host(:not(:state(-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 *\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 - Emitted 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(:state(-icon-only))[current]),\r\n    :host(:not(:state(-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/content-pane.js

@@ -0,0 +1,69 @@
+/**
+ * @license MIT
+ * Copyright (c) 2025–2026 matraic
+ * See LICENSE file in the project root for full license text.
+ */
+import { __classPrivateFieldGet, __decorate } from 'tslib';
+import { LitElement, html, css } from 'lit';
+import { ReconnectedCallback, getScrollbarWidth, DesignToken, customElement } from '@m3e/web/core';
+
+var _M3eContentPaneElement_instances, _M3eContentPaneElement_updateScrollbarWidth;
+/**
+ * A shaped surface for vertically scrollable content.
+ *
+ * @description
+ * The `m3e-content-pane` component renders a shaped surface with padding and vertical
+ * scrolling for document‑like content.
+ *
+ * @example
+ * The following example illustrates basic usage of the content pane.
+ * ```html
+ * <m3e-content-pane>
+ *   <p>This is some scrollable content.</p>
+ *   <p>More content here...</p>
+ * </m3e-content-pane>
+ * ```
+ *
+ * @tag m3e-content-pane
+ *
+ * @slot - Renders the content of the pane.
+ *
+ * @cssprop --m3e-content-pane-container-shape - Corner radius applied to the pane’s outer surface.
+ * @cssprop --m3e-content-pane-container-color - Background color of the pane’s surface.
+ * @cssprop --m3e-content-pane-container-padding - Internal padding applied to all sides of the scrollable content.
+ */
+let M3eContentPaneElement = class M3eContentPaneElement extends ReconnectedCallback(LitElement) {
+  constructor() {
+    super(...arguments);
+    _M3eContentPaneElement_instances.add(this);
+  }
+  /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eContentPaneElement_instances, "m", _M3eContentPaneElement_updateScrollbarWidth).call(this);
+  }
+  /** @inheritdoc */
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    __classPrivateFieldGet(this, _M3eContentPaneElement_instances, "m", _M3eContentPaneElement_updateScrollbarWidth).call(this);
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<div class="base"><div class="scroll-container"><slot></slot></div></div>`;
+  }
+};
+_M3eContentPaneElement_instances = new WeakSet();
+_M3eContentPaneElement_updateScrollbarWidth = function _M3eContentPaneElement_updateScrollbarWidth() {
+  const base = this.shadowRoot?.querySelector(".base");
+  if (!base) return;
+  const style = getComputedStyle(base);
+  const scrollbarThinWidth = style.getPropertyValue("--m3e-scrollbar-thin-width");
+  const scrollbarWidth = scrollbarThinWidth.endsWith("px") ? parseFloat(scrollbarThinWidth) : getScrollbarWidth(!scrollbarThinWidth || scrollbarThinWidth === "thin");
+  base.style.setProperty("--_scrollbar-width", `${scrollbarWidth}px`);
+};
+/** The styles of the element. */
+M3eContentPaneElement.styles = css`:host { display: block; } .base { width: 100%; height: 100%; overflow: hidden; border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge}); background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface}); } .scroll-container { width: inherit; height: inherit; border-radius: inherit; box-sizing: border-box; overflow-y: auto; outline: none; padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}); padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}); padding-inline-end: calc( var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var( --_scrollbar-width, 0px ) ); scrollbar-color: ${DesignToken.scrollbar.color}; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; }`;
+M3eContentPaneElement = __decorate([customElement("m3e-content-pane")], M3eContentPaneElement);
+
+export { M3eContentPaneElement };
+//# sourceMappingURL=content-pane.js.map

package/dist/content-pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-pane.js","sources":["../../src/content-pane/ContentPaneElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\n\r\nimport { customElement, DesignToken, getScrollbarWidth, ReconnectedCallback } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A shaped surface for vertically scrollable content.\r\n *\r\n * @description\r\n * The `m3e-content-pane` component renders a shaped surface with padding and vertical\r\n * scrolling for document‑like content.\r\n *\r\n * @example\r\n * The following example illustrates basic usage of the content pane.\r\n * ```html\r\n * <m3e-content-pane>\r\n *   <p>This is some scrollable content.</p>\r\n *   <p>More content here...</p>\r\n * </m3e-content-pane>\r\n * ```\r\n *\r\n * @tag m3e-content-pane\r\n *\r\n * @slot - Renders the content of the pane.\r\n *\r\n * @cssprop --m3e-content-pane-container-shape - Corner radius applied to the pane’s outer surface.\r\n * @cssprop --m3e-content-pane-container-color - Background color of the pane’s surface.\r\n * @cssprop --m3e-content-pane-container-padding - Internal padding applied to all sides of the scrollable content.\r\n */\r\n@customElement(\"m3e-content-pane\")\r\nexport class M3eContentPaneElement extends ReconnectedCallback(LitElement) {\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      width: 100%;\r\n      height: 100%;\r\n      overflow: hidden;\r\n      border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n      background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface});\r\n    }\r\n    .scroll-container {\r\n      width: inherit;\r\n      height: inherit;\r\n      border-radius: inherit;\r\n      box-sizing: border-box;\r\n      overflow-y: auto;\r\n      outline: none;\r\n      padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n      padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n      padding-inline-end: calc(\r\n        var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var(\r\n            --_scrollbar-width,\r\n            0px\r\n          )\r\n      );\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#updateScrollbarWidth();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#updateScrollbarWidth();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <div class=\"scroll-container\"><slot></slot></div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateScrollbarWidth(): void {\r\n    const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n    if (!base) return;\r\n\r\n    const style = getComputedStyle(base);\r\n    const scrollbarThinWidth = style.getPropertyValue(\"--m3e-scrollbar-thin-width\");\r\n    const scrollbarWidth = scrollbarThinWidth.endsWith(\"px\")\r\n      ? parseFloat(scrollbarThinWidth)\r\n      : getScrollbarWidth(!scrollbarThinWidth || scrollbarThinWidth === \"thin\");\r\n\r\n    base.style.setProperty(\"--_scrollbar-width\", `${scrollbarWidth}px`);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-content-pane\": M3eContentPaneElement;\r\n  }\r\n}\r\n"],"names":["M3eContentPaneElement","ReconnectedCallback","LitElement","constructor","reconnectedCallback","__classPrivateFieldGet","_M3eContentPaneElement_instances","_M3eContentPaneElement_updateScrollbarWidth","call","firstUpdated","_changedProperties","render","html","base","shadowRoot","querySelector","style","getComputedStyle","scrollbarThinWidth","getPropertyValue","scrollbarWidth","endsWith","parseFloat","getScrollbarWidth","setProperty","styles","css","DesignToken","shape","corner","extraLarge","color","surface","value","scrollbar","thinWidth","__decorate","customElement"],"mappings":";;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AAEI,IAAMA,qBAAqB,GAA3B,MAAMA,qBAAsB,SAAQC,mBAAmB,CAACC,UAAU,CAAC,CAAA;AAAnEC,EAAAA,WAAAA,GAAA;;;AAiEP,EAAA;AAhCE;AACSC,EAAAA,mBAAmBA,GAAA;IAC1B,KAAK,CAACA,mBAAmB,EAAE;AAC3BC,IAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAC,2CAAA,CAAsB,CAAAC,IAAA,CAA1B,IAAI,CAAwB;AAC9B,EAAA;AAEA;EACmBC,YAAYA,CAACC,kBAAkC,EAAA;AAChE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;AACtCL,IAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAC,2CAAA,CAAsB,CAAAC,IAAA,CAA1B,IAAI,CAAwB;AAC9B,EAAA;AAEA;AACmBG,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,yEAAA,CAEJ;AACT,EAAA;;;;EAIE,MAAMC,IAAI,GAAG,IAAI,CAACC,UAAU,EAAEC,aAAa,CAAc,OAAO,CAAC;EACjE,IAAI,CAACF,IAAI,EAAE;AAEX,EAAA,MAAMG,KAAK,GAAGC,gBAAgB,CAACJ,IAAI,CAAC;AACpC,EAAA,MAAMK,kBAAkB,GAAGF,KAAK,CAACG,gBAAgB,CAAC,4BAA4B,CAAC;EAC/E,MAAMC,cAAc,GAAGF,kBAAkB,CAACG,QAAQ,CAAC,IAAI,CAAC,GACpDC,UAAU,CAACJ,kBAAkB,CAAC,GAC9BK,iBAAiB,CAAC,CAACL,kBAAkB,IAAIA,kBAAkB,KAAK,MAAM,CAAC;EAE3EL,IAAI,CAACG,KAAK,CAACQ,WAAW,CAAC,oBAAoB,EAAE,CAAA,EAAGJ,cAAc,CAAA,EAAA,CAAI,CAAC;AACrE,CAAC;AA/DD;AACgBpB,qBAAA,CAAAyB,MAAM,GAAmBC,GAAG,CAAA,sIAAA,EAQiBC,WAAW,CAACC,KAAK,CAACC,MAAM,CAACC,UAAU,CAAA,6DAAA,EAChCH,WAAW,CAACI,KAAK,CAACC,OAAO,CAAA,oMAAA,EAS1BL,WAAW,CAACC,KAAK,CAACC,MAAM,CAACI,KAAK,CAACH,UAAU,CAAA,mEAAA,EAClCH,WAAW,CAACC,KAAK,CAACC,MAAM,CAACI,KAAK,CAACH,UAAU,CAAA,uEAAA,EAE7DH,WAAW,CAACC,KAAK,CAACC,MAAM,CAACI,KAAK,CAACH,UAAU,CAAA,uDAAA,EAKpEH,WAAW,CAACO,SAAS,CAACH,KAAK,CAAA,mBAAA,EAC3BJ,WAAW,CAACO,SAAS,CAACC,SAAS,CAAA,GAAA,CA3BhC;AAFXnC,qBAAqB,GAAAoC,UAAA,CAAA,CADjCC,aAAa,CAAC,kBAAkB,CAAC,CACrB,EAAArC,qBAAqB,CAiEjC;;;;"}

package/dist/content-pane.min.js

@@ -0,0 +1,7 @@
+/**
+ * @license MIT
+ * Copyright (c) 2025–2026 matraic
+ * See LICENSE file in the project root for full license text.
+ */
+import{__classPrivateFieldGet as e,__decorate as r}from"tslib";import{LitElement as t,html as a,css as o}from"lit";import{ReconnectedCallback as n,getScrollbarWidth as i,DesignToken as l,customElement as c}from"@m3e/web/core";var s,d;let p=class extends(n(t)){constructor(){super(...arguments),s.add(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,s,"m",d).call(this)}firstUpdated(r){super.firstUpdated(r),e(this,s,"m",d).call(this)}render(){return a`<div class="base"><div class="scroll-container"><slot></slot></div></div>`}};s=new WeakSet,d=function(){const e=this.shadowRoot?.querySelector(".base");if(!e)return;const r=getComputedStyle(e).getPropertyValue("--m3e-scrollbar-thin-width"),t=r.endsWith("px")?parseFloat(r):i(!r||"thin"===r);e.style.setProperty("--_scrollbar-width",`${t}px`)},p.styles=o`:host { display: block; } .base { width: 100%; height: 100%; overflow: hidden; border-radius: var(--m3e-content-pane-container-shape, ${l.shape.corner.extraLarge}); background-color: var(--m3e-content-pane-container-color, ${l.color.surface}); } .scroll-container { width: inherit; height: inherit; border-radius: inherit; box-sizing: border-box; overflow-y: auto; outline: none; padding-block: var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}); padding-inline-start: var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}); padding-inline-end: calc( var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}) - var( --_scrollbar-width, 0px ) ); scrollbar-color: ${l.scrollbar.color}; scrollbar-width: ${l.scrollbar.thinWidth}; }`,p=r([c("m3e-content-pane")],p);export{p as M3eContentPaneElement};
+//# sourceMappingURL=content-pane.min.js.map

package/dist/content-pane.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-pane.min.js","sources":["../../src/content-pane/ContentPaneElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\n\r\nimport { customElement, DesignToken, getScrollbarWidth, ReconnectedCallback } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A shaped surface for vertically scrollable content.\r\n *\r\n * @description\r\n * The `m3e-content-pane` component renders a shaped surface with padding and vertical\r\n * scrolling for document‑like content.\r\n *\r\n * @example\r\n * The following example illustrates basic usage of the content pane.\r\n * ```html\r\n * <m3e-content-pane>\r\n *   <p>This is some scrollable content.</p>\r\n *   <p>More content here...</p>\r\n * </m3e-content-pane>\r\n * ```\r\n *\r\n * @tag m3e-content-pane\r\n *\r\n * @slot - Renders the content of the pane.\r\n *\r\n * @cssprop --m3e-content-pane-container-shape - Corner radius applied to the pane’s outer surface.\r\n * @cssprop --m3e-content-pane-container-color - Background color of the pane’s surface.\r\n * @cssprop --m3e-content-pane-container-padding - Internal padding applied to all sides of the scrollable content.\r\n */\r\n@customElement(\"m3e-content-pane\")\r\nexport class M3eContentPaneElement extends ReconnectedCallback(LitElement) {\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      width: 100%;\r\n      height: 100%;\r\n      overflow: hidden;\r\n      border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n      background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface});\r\n    }\r\n    .scroll-container {\r\n      width: inherit;\r\n      height: inherit;\r\n      border-radius: inherit;\r\n      box-sizing: border-box;\r\n      overflow-y: auto;\r\n      outline: none;\r\n      padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n      padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n      padding-inline-end: calc(\r\n        var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var(\r\n            --_scrollbar-width,\r\n            0px\r\n          )\r\n      );\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#updateScrollbarWidth();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#updateScrollbarWidth();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <div class=\"scroll-container\"><slot></slot></div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateScrollbarWidth(): void {\r\n    const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n    if (!base) return;\r\n\r\n    const style = getComputedStyle(base);\r\n    const scrollbarThinWidth = style.getPropertyValue(\"--m3e-scrollbar-thin-width\");\r\n    const scrollbarWidth = scrollbarThinWidth.endsWith(\"px\")\r\n      ? parseFloat(scrollbarThinWidth)\r\n      : getScrollbarWidth(!scrollbarThinWidth || scrollbarThinWidth === \"thin\");\r\n\r\n    base.style.setProperty(\"--_scrollbar-width\", `${scrollbarWidth}px`);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-content-pane\": M3eContentPaneElement;\r\n  }\r\n}\r\n"],"names":["M3eContentPaneElement","ReconnectedCallback","LitElement","constructor","reconnectedCallback","super","__classPrivateFieldGet","this","_M3eContentPaneElement_instances","_M3eContentPaneElement_updateScrollbarWidth","call","firstUpdated","_changedProperties","render","html","base","shadowRoot","querySelector","scrollbarThinWidth","getComputedStyle","getPropertyValue","scrollbarWidth","endsWith","parseFloat","getScrollbarWidth","style","setProperty","styles","css","DesignToken","shape","corner","extraLarge","color","surface","value","scrollbar","thinWidth","__decorate","customElement"],"mappings":";;;;;0OA6BO,IAAMA,EAAN,cAAoCC,EAAoBC,IAAxDC,WAAAA,kCAiEP,CA/BWC,mBAAAA,GACPC,MAAMD,sBACNE,EAAAC,KAAIC,EAAA,IAAAC,GAAsBC,KAA1BH,KACF,CAGmBI,YAAAA,CAAaC,GAC9BP,MAAMM,aAAaC,GACnBN,EAAAC,KAAIC,EAAA,IAAAC,GAAsBC,KAA1BH,KACF,CAGmBM,MAAAA,GACjB,OAAOC,CAAI,2EAGb,8BAIE,MAAMC,EAAOR,KAAKS,YAAYC,cAA2B,SACzD,IAAKF,EAAM,OAEX,MACMG,EADQC,iBAAiBJ,GACEK,iBAAiB,8BAC5CC,EAAiBH,EAAmBI,SAAS,MAC/CC,WAAWL,GACXM,GAAmBN,GAA6C,SAAvBA,GAE7CH,EAAKU,MAAMC,YAAY,qBAAsB,GAAGL,MAClD,EA9DgBrB,EAAA2B,OAAyBC,CAAG,yIAQiBC,EAAYC,MAAMC,OAAOC,0EACtBH,EAAYI,MAAMC,8MASnBL,EAAYC,MAAMC,OAAOI,MAAMH,gFACxBH,EAAYC,MAAMC,OAAOI,MAAMH,oFAEnDH,EAAYC,MAAMC,OAAOI,MAAMH,oEAK1DH,EAAYO,UAAUH,2BACtBJ,EAAYO,UAAUC,eA7BlCrC,EAAqBsC,EAAA,CADjCC,EAAc,qBACFvC"}