@rcarls/rc-navigation-rail 0.4.0

package/dist/rc-navigation-rail-DOaY6_kH.js

@@ -0,0 +1,385 @@
+import { css as h, LitElement as v, html as u } from "lit";
+import { property as l, state as c, query as g } from "lit/decorators.js";
+import { NavigationIndicatorController as x } from "@rcarls/rc-common";
+const f = h`
+  :host {
+    display: inline-flex;
+    color-scheme: inherit;
+    color: var(--rc-navigation-rail-color, CanvasText);
+    background: var(--rc-navigation-rail-bg, Canvas);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  #root {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--rc-navigation-rail-gap, 0.75rem);
+    inline-size: var(--rc-navigation-rail-inline-size, 5rem);
+    min-block-size: 0;
+    padding-block: var(--rc-navigation-rail-padding-block, 0.75rem);
+    padding-inline: var(--rc-navigation-rail-padding-inline, 0.5rem);
+    box-sizing: border-box;
+    overflow: hidden auto;
+    transition:
+      inline-size var(--rc-navigation-rail-duration, 200ms) var(--rc-navigation-rail-easing, ease),
+      padding var(--rc-navigation-rail-duration, 200ms) var(--rc-navigation-rail-easing, ease);
+  }
+
+  :host([expanded]) #root {
+    inline-size: var(--rc-navigation-rail-expanded-inline-size, 16rem);
+  }
+
+  #toggle-wrap,
+  #header,
+  #footer {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #header {
+    align-items: center;
+  }
+
+  :host([expanded]) #footer {
+    align-items: stretch;
+  }
+
+  #toggle-wrap {
+    align-items: flex-start;
+    min-block-size: var(--rc-navigation-rail-toggle-size, 3rem);
+    padding-inline-start: var(--rc-navigation-rail-toggle-inline-offset, 0.5rem);
+  }
+
+  #toggle-wrap[hidden],
+  #header[hidden],
+  #footer[hidden] {
+    display: none;
+  }
+
+  ::slotted([slot='toggle']) {
+    flex: none;
+  }
+
+  :host(:not([expanded])) ::slotted([data-rc-navigation-collapse-icon]),
+  :host([expanded]) ::slotted([data-rc-navigation-expand-icon]) {
+    display: none;
+  }
+
+  [part='nav'] {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    min-block-size: 0;
+  }
+
+  slot:not([name]) {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--rc-navigation-rail-item-gap, 0.75rem);
+  }
+
+  :host([expanded]) slot:not([name]) {
+    align-items: stretch;
+  }
+
+  ::slotted(a) {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rc-navigation-rail-link-gap, 0.25rem);
+    min-inline-size: 0;
+    min-block-size: var(--rc-navigation-rail-item-min-block-size, 3.5rem);
+    padding-block: var(--rc-navigation-rail-item-padding-block, 0.25rem);
+    padding-inline: var(--rc-navigation-rail-item-padding-inline, 0.5rem);
+    box-sizing: border-box;
+    color: var(--rc-navigation-rail-item-color, inherit);
+    font: inherit;
+    text-align: center;
+    text-decoration: var(--rc-navigation-rail-item-text-decoration, revert);
+    outline-offset: var(--rc-navigation-rail-focus-ring-offset, 2px);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  ::slotted(a:focus-visible) {
+    outline: var(--rc-navigation-rail-focus-ring, revert);
+  }
+
+  :host([expanded]) ::slotted(a) {
+    flex-direction: row;
+    justify-content: flex-start;
+    min-block-size: var(--rc-navigation-rail-expanded-item-min-block-size, 3.5rem);
+    padding-inline: var(--rc-navigation-rail-expanded-item-padding-inline, 1rem);
+  }
+
+  ::slotted(a[aria-current]:not([aria-current='false'])) {
+    color: var(--rc-navigation-rail-active-color, LinkText);
+  }
+
+  #indicator {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    z-index: 0;
+    box-sizing: border-box;
+    border: var(--rc-navigation-rail-indicator-border, 1px solid Highlight);
+    border-radius: var(--rc-navigation-rail-indicator-radius, 0);
+    background: var(--rc-navigation-rail-indicator-bg, transparent);
+    pointer-events: none;
+    transition:
+      transform var(--rc-navigation-rail-indicator-duration, 0ms)
+        var(--rc-navigation-rail-indicator-easing, ease),
+      inline-size var(--rc-navigation-rail-indicator-duration, 0ms)
+        var(--rc-navigation-rail-indicator-easing, ease),
+      block-size var(--rc-navigation-rail-indicator-duration, 0ms)
+        var(--rc-navigation-rail-indicator-easing, ease),
+      opacity var(--rc-navigation-rail-indicator-duration, 0ms) ease;
+  }
+
+  #indicator[hidden] {
+    display: block;
+    opacity: 0;
+  }
+
+  #footer {
+    margin-block-start: auto;
+  }
+
+  @supports (transition-behavior: allow-discrete) {
+    #root {
+      transition-behavior: allow-discrete;
+    }
+  }
+
+  @media (forced-colors: active) {
+    #indicator {
+      border: 1px solid Highlight;
+      background: transparent;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    #root,
+    #indicator {
+      transition-duration: 0s;
+    }
+  }
+`;
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (p, e, t, a) => {
+  for (var o = a > 1 ? void 0 : a ? _(e, t) : e, d = p.length - 1, s; d >= 0; d--)
+    (s = p[d]) && (o = (a ? s(e, t, o) : s(o)) || o);
+  return a && o && m(e, t, o), o;
+};
+const b = `
+@layer rc-base {
+  rc-navigation-rail > a > [data-rc-navigation-icon] {
+    align-self: center;
+    vertical-align: middle;
+  }
+
+  rc-navigation-rail:not([expanded])
+    > a
+    > [data-rc-navigation-label] {
+    max-inline-size: var(--rc-navigation-rail-collapsed-label-inline-size, 4rem);
+    font-size: smaller;
+    line-height: 1.2;
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+
+  rc-navigation-rail > a > [data-rc-navigation-indicator] {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--rc-navigation-rail-link-gap, 0.25rem);
+    max-inline-size: 100%;
+    vertical-align: middle;
+  }
+
+  rc-navigation-rail > a > [data-rc-navigation-indicator] > [data-rc-navigation-icon] {
+    flex: none;
+    vertical-align: middle;
+  }
+
+  rc-navigation-rail:not([expanded])
+    > a
+    > [data-rc-navigation-indicator]
+    > :not([data-rc-navigation-icon]) {
+    max-inline-size: var(--rc-navigation-rail-collapsed-label-inline-size, 4rem);
+    font-size: smaller;
+    line-height: 1.2;
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+
+  rc-navigation-rail[expanded] > a > [data-rc-navigation-indicator] {
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+
+  rc-navigation-rail
+    :is([data-rc-navigation-expand-icon], [data-rc-navigation-collapse-icon])[hidden] {
+    display: none !important;
+  }
+}
+`;
+var n;
+const i = (n = class extends v {
+  constructor() {
+    super(...arguments), this._defaultExpanded = !1, this._expandedInitialized = !1, this.activeSelector = 'a[aria-current]:not([aria-current="false"])', this.indicatorTarget = "[data-rc-navigation-indicator], [data-rc-navigation-icon]", this._hasToggle = !1, this._hasHeader = !1, this._hasFooter = !1, this._indicatorCtrl = new x(this, {
+      slot: () => this._$slot ?? null,
+      container: () => this._$nav ?? null,
+      indicator: () => this._$indicator ?? null,
+      activeSelector: () => this.activeSelector,
+      indicatorTargetSelector: () => this.indicatorTarget
+    });
+  }
+  static _ensureBaseStyles(e) {
+    if (n._styledRoots.has(e))
+      return;
+    n._styledRoots.add(e);
+    const t = document.createElement("style");
+    t.setAttribute("data-rc-light-dom-base", "rc-navigation-rail"), t.textContent = b, e instanceof Document ? e.head.append(t) : e.append(t);
+  }
+  get expanded() {
+    return this._expanded ?? this._defaultExpanded;
+  }
+  set expanded(e) {
+    const t = this.expanded;
+    this._expanded = e, this._expandedInitialized = !0, this.requestUpdate("expanded", t);
+  }
+  get defaultExpanded() {
+    return this._defaultExpanded;
+  }
+  set defaultExpanded(e) {
+    const t = this._defaultExpanded;
+    this._defaultExpanded = e, !this._expandedInitialized && this._expanded === void 0 && this.requestUpdate("expanded", t), this.requestUpdate("defaultExpanded", t);
+  }
+  connectedCallback() {
+    super.connectedCallback(), n._ensureBaseStyles(this.getRootNode());
+  }
+  /** Expands the rail and dispatches `rc-navigation-rail-toggle` when it changes. */
+  expand() {
+    this._setExpanded(!0, !0);
+  }
+  /** Collapses the rail and dispatches `rc-navigation-rail-toggle` when it changes. */
+  collapse() {
+    this._setExpanded(!1, !0);
+  }
+  /** Toggles expanded state and dispatches `rc-navigation-rail-toggle` when it changes. */
+  toggleExpanded() {
+    this._setExpanded(!this.expanded, !0);
+  }
+  firstUpdated() {
+    this._indicatorCtrl.sync();
+  }
+  updated(e) {
+    (e.has("activeSelector") || e.has("indicatorTarget") || e.has("expanded")) && this._indicatorCtrl.sync(), e.has("expanded") && this._syncToggleButton();
+  }
+  render() {
+    return u`
+      <div id="root" part="root">
+        <div
+          id="toggle-wrap"
+          part="toggle"
+          ?hidden=${!this._hasToggle}
+          @click=${this._handleToggleClick}
+        >
+          <slot name="toggle" @slotchange=${this._handleToggleSlotChange}></slot>
+        </div>
+        <div id="header" part="header" ?hidden=${!this._hasHeader}>
+          <slot name="header" @slotchange=${this._handleHeaderSlotChange}></slot>
+        </div>
+        <div part="nav">
+          <div id="indicator" part="indicator" hidden></div>
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+        <div id="footer" part="footer" ?hidden=${!this._hasFooter}>
+          <slot name="footer" @slotchange=${this._handleFooterSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+  _handleSlotChange() {
+    this._indicatorCtrl.sync();
+  }
+  _handleToggleSlotChange(e) {
+    const t = e.currentTarget;
+    this._hasToggle = t.assignedElements({ flatten: !0 }).length > 0, this._syncToggleButton();
+  }
+  _handleHeaderSlotChange(e) {
+    const t = e.currentTarget;
+    this._hasHeader = t.assignedElements({ flatten: !0 }).length > 0;
+  }
+  _handleFooterSlotChange(e) {
+    const t = e.currentTarget;
+    this._hasFooter = t.assignedElements({ flatten: !0 }).length > 0;
+  }
+  _handleToggleClick(e) {
+    e.target?.closest("button") && this.toggleExpanded();
+  }
+  _getToggleButton() {
+    const e = this.querySelector(':scope > [slot="toggle"]');
+    return e instanceof HTMLButtonElement ? e : e?.querySelector(":scope > button") ?? null;
+  }
+  _syncToggleButton() {
+    const e = this.querySelector(':scope > [slot="toggle"]'), t = this._getToggleButton();
+    e?.localName === "rc-button" && e.toggleAttribute("selected", this.expanded), t?.setAttribute("aria-expanded", String(this.expanded)), t?.querySelectorAll("[data-rc-navigation-expand-icon]").forEach((a) => a.hidden = this.expanded), t?.querySelectorAll("[data-rc-navigation-collapse-icon]").forEach((a) => a.hidden = !this.expanded);
+  }
+  _setExpanded(e, t) {
+    if (e === this.expanded)
+      return;
+    const a = this.expanded;
+    this._expanded = e, this._expandedInitialized = !0, this.requestUpdate("expanded", a), t && this.dispatchEvent(
+      new CustomEvent("rc-navigation-rail-toggle", {
+        bubbles: !0,
+        composed: !0,
+        detail: { expanded: e }
+      })
+    );
+  }
+}, n.styles = [f], n._styledRoots = /* @__PURE__ */ new Set(), n);
+r([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "expanded", 1);
+r([
+  l({ type: Boolean, attribute: "default-expanded" })
+], i.prototype, "defaultExpanded", 1);
+r([
+  l({ type: String, attribute: "active-selector" })
+], i.prototype, "activeSelector", 2);
+r([
+  l({ type: String, attribute: "indicator-target" })
+], i.prototype, "indicatorTarget", 2);
+r([
+  c()
+], i.prototype, "_hasToggle", 2);
+r([
+  c()
+], i.prototype, "_hasHeader", 2);
+r([
+  c()
+], i.prototype, "_hasFooter", 2);
+r([
+  g("slot:not([name])")
+], i.prototype, "_$slot", 2);
+r([
+  g('[part="nav"]')
+], i.prototype, "_$nav", 2);
+r([
+  g("#indicator")
+], i.prototype, "_$indicator", 2);
+let E = i;
+export {
+  E as R
+};
+//# sourceMappingURL=rc-navigation-rail-DOaY6_kH.js.map

package/dist/rc-navigation-rail-DOaY6_kH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-navigation-rail-DOaY6_kH.js","sources":["../src/rc-navigation-rail.styles.ts","../src/rc-navigation-rail.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const navigationRailStyles = css`\n  :host {\n    display: inline-flex;\n    color-scheme: inherit;\n    color: var(--rc-navigation-rail-color, CanvasText);\n    background: var(--rc-navigation-rail-bg, Canvas);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  #root {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--rc-navigation-rail-gap, 0.75rem);\n    inline-size: var(--rc-navigation-rail-inline-size, 5rem);\n    min-block-size: 0;\n    padding-block: var(--rc-navigation-rail-padding-block, 0.75rem);\n    padding-inline: var(--rc-navigation-rail-padding-inline, 0.5rem);\n    box-sizing: border-box;\n    overflow: hidden auto;\n    transition:\n      inline-size var(--rc-navigation-rail-duration, 200ms) var(--rc-navigation-rail-easing, ease),\n      padding var(--rc-navigation-rail-duration, 200ms) var(--rc-navigation-rail-easing, ease);\n  }\n\n  :host([expanded]) #root {\n    inline-size: var(--rc-navigation-rail-expanded-inline-size, 16rem);\n  }\n\n  #toggle-wrap,\n  #header,\n  #footer {\n    display: flex;\n    flex-direction: column;\n  }\n\n  #header {\n    align-items: center;\n  }\n\n  :host([expanded]) #footer {\n    align-items: stretch;\n  }\n\n  #toggle-wrap {\n    align-items: flex-start;\n    min-block-size: var(--rc-navigation-rail-toggle-size, 3rem);\n    padding-inline-start: var(--rc-navigation-rail-toggle-inline-offset, 0.5rem);\n  }\n\n  #toggle-wrap[hidden],\n  #header[hidden],\n  #footer[hidden] {\n    display: none;\n  }\n\n  ::slotted([slot='toggle']) {\n    flex: none;\n  }\n\n  :host(:not([expanded])) ::slotted([data-rc-navigation-collapse-icon]),\n  :host([expanded]) ::slotted([data-rc-navigation-expand-icon]) {\n    display: none;\n  }\n\n  [part='nav'] {\n    position: relative;\n    display: flex;\n    flex: 1 1 auto;\n    min-block-size: 0;\n  }\n\n  slot:not([name]) {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--rc-navigation-rail-item-gap, 0.75rem);\n  }\n\n  :host([expanded]) slot:not([name]) {\n    align-items: stretch;\n  }\n\n  ::slotted(a) {\n    position: relative;\n    z-index: 1;\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--rc-navigation-rail-link-gap, 0.25rem);\n    min-inline-size: 0;\n    min-block-size: var(--rc-navigation-rail-item-min-block-size, 3.5rem);\n    padding-block: var(--rc-navigation-rail-item-padding-block, 0.25rem);\n    padding-inline: var(--rc-navigation-rail-item-padding-inline, 0.5rem);\n    box-sizing: border-box;\n    color: var(--rc-navigation-rail-item-color, inherit);\n    font: inherit;\n    text-align: center;\n    text-decoration: var(--rc-navigation-rail-item-text-decoration, revert);\n    outline-offset: var(--rc-navigation-rail-focus-ring-offset, 2px);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  ::slotted(a:focus-visible) {\n    outline: var(--rc-navigation-rail-focus-ring, revert);\n  }\n\n  :host([expanded]) ::slotted(a) {\n    flex-direction: row;\n    justify-content: flex-start;\n    min-block-size: var(--rc-navigation-rail-expanded-item-min-block-size, 3.5rem);\n    padding-inline: var(--rc-navigation-rail-expanded-item-padding-inline, 1rem);\n  }\n\n  ::slotted(a[aria-current]:not([aria-current='false'])) {\n    color: var(--rc-navigation-rail-active-color, LinkText);\n  }\n\n  #indicator {\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    z-index: 0;\n    box-sizing: border-box;\n    border: var(--rc-navigation-rail-indicator-border, 1px solid Highlight);\n    border-radius: var(--rc-navigation-rail-indicator-radius, 0);\n    background: var(--rc-navigation-rail-indicator-bg, transparent);\n    pointer-events: none;\n    transition:\n      transform var(--rc-navigation-rail-indicator-duration, 0ms)\n        var(--rc-navigation-rail-indicator-easing, ease),\n      inline-size var(--rc-navigation-rail-indicator-duration, 0ms)\n        var(--rc-navigation-rail-indicator-easing, ease),\n      block-size var(--rc-navigation-rail-indicator-duration, 0ms)\n        var(--rc-navigation-rail-indicator-easing, ease),\n      opacity var(--rc-navigation-rail-indicator-duration, 0ms) ease;\n  }\n\n  #indicator[hidden] {\n    display: block;\n    opacity: 0;\n  }\n\n  #footer {\n    margin-block-start: auto;\n  }\n\n  @supports (transition-behavior: allow-discrete) {\n    #root {\n      transition-behavior: allow-discrete;\n    }\n  }\n\n  @media (forced-colors: active) {\n    #indicator {\n      border: 1px solid Highlight;\n      background: transparent;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    #root,\n    #indicator {\n      transition-duration: 0s;\n    }\n  }\n`;\n\nexport default navigationRailStyles;\n","import { LitElement, html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { NavigationIndicatorController } from '@rcarls/rc-common';\n\nimport navigationRailStyles from './rc-navigation-rail.styles.js';\n\nconst LIGHT_DOM_CSS = `\n@layer rc-base {\n  rc-navigation-rail > a > [data-rc-navigation-icon] {\n    align-self: center;\n    vertical-align: middle;\n  }\n\n  rc-navigation-rail:not([expanded])\n    > a\n    > [data-rc-navigation-label] {\n    max-inline-size: var(--rc-navigation-rail-collapsed-label-inline-size, 4rem);\n    font-size: smaller;\n    line-height: 1.2;\n    text-align: center;\n    overflow-wrap: anywhere;\n  }\n\n  rc-navigation-rail > a > [data-rc-navigation-indicator] {\n    position: relative;\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--rc-navigation-rail-link-gap, 0.25rem);\n    max-inline-size: 100%;\n    vertical-align: middle;\n  }\n\n  rc-navigation-rail > a > [data-rc-navigation-indicator] > [data-rc-navigation-icon] {\n    flex: none;\n    vertical-align: middle;\n  }\n\n  rc-navigation-rail:not([expanded])\n    > a\n    > [data-rc-navigation-indicator]\n    > :not([data-rc-navigation-icon]) {\n    max-inline-size: var(--rc-navigation-rail-collapsed-label-inline-size, 4rem);\n    font-size: smaller;\n    line-height: 1.2;\n    text-align: center;\n    overflow-wrap: anywhere;\n  }\n\n  rc-navigation-rail[expanded] > a > [data-rc-navigation-indicator] {\n    flex-direction: row;\n    justify-content: flex-start;\n  }\n\n  rc-navigation-rail\n    :is([data-rc-navigation-expand-icon], [data-rc-navigation-collapse-icon])[hidden] {\n    display: none !important;\n  }\n}\n`;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-navigation-rail': RCNavigationRail;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-navigation-rail-toggle': CustomEvent<RCNavigationRailToggleDetail>;\n  }\n}\n\n/** Detail payload for the `rc-navigation-rail-toggle` event. */\nexport interface RCNavigationRailToggleDetail {\n  /** Whether the rail is expanded after the toggle. */\n  expanded: boolean;\n}\n\n/**\n * Navigation rail layout that styles consumer-authored links.\n *\n * `rc-navigation-rail` preserves native `<a>` elements in light DOM for router\n * interop and progressive enhancement. Mark the current link with\n * `aria-current=\"page\"` or provide `active-selector` for router active classes.\n * Wrap the component in a consumer-authored `<nav>` when it represents a\n * navigation landmark; `rc-navigation-rail` deliberately provides no landmark\n * role of its own, matching `rc-navigation-bar`.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-navigation-rail rc-navigation-rail docs}\n * @see {@link https://m3.material.io/components/navigation-rail/overview Material 3 navigation rail}\n *\n * @slot default - Navigation links. Direct `<a>` children are recommended.\n * @slot header - Content above the navigation links.\n * @slot footer - Content pinned after the navigation links.\n * @slot toggle - Native `<button>` or `rc-button` expand/collapse control.\n *\n * @fires rc-navigation-rail-toggle - Fired when user interaction or a method toggles expanded state.\n *\n * @csspart root - The rail layout container.\n * @csspart nav - The navigation layout container.\n * @csspart indicator - The active item indicator.\n * @csspart toggle - Toggle slot container.\n * @csspart header - Header slot container.\n * @csspart footer - Footer slot container.\n *\n * @attr expanded - Whether the rail is expanded. Host writes are silent.\n * @attr default-expanded - Initial expanded state for uncontrolled usage.\n * @attr active-selector - Selector used to find the active link.\n * @attr indicator-target - Selector inside the active link used for indicator geometry.\n *\n * @cssprop [--rc-navigation-rail-bg=Canvas] - Rail surface background.\n * @cssprop [--rc-navigation-rail-color=CanvasText] - Rail text color.\n * @cssprop [--rc-navigation-rail-inline-size=5rem] - Collapsed rail inline size.\n * @cssprop [--rc-navigation-rail-expanded-inline-size=16rem] - Expanded rail inline size.\n * @cssprop [--rc-navigation-rail-padding-block=0.75rem] - Rail block-axis padding.\n * @cssprop [--rc-navigation-rail-padding-inline=0.5rem] - Rail inline-axis padding.\n * @cssprop [--rc-navigation-rail-gap=0.75rem] - Gap between rail regions.\n * @cssprop [--rc-navigation-rail-item-gap=0.75rem] - Gap between navigation items.\n * @cssprop [--rc-navigation-rail-link-gap=0.25rem] - Gap between item icon and label.\n * @cssprop [--rc-navigation-rail-item-min-block-size=3.5rem] - Collapsed item minimum block size.\n * @cssprop [--rc-navigation-rail-expanded-item-min-block-size=3.5rem] - Expanded item minimum block size.\n * @cssprop [--rc-navigation-rail-item-padding-block=0.25rem] - Item block-axis padding.\n * @cssprop [--rc-navigation-rail-item-padding-inline=0.5rem] - Collapsed item inline-axis padding.\n * @cssprop [--rc-navigation-rail-expanded-item-padding-inline=1rem] - Expanded item inline-axis padding.\n * @cssprop [--rc-navigation-rail-collapsed-label-inline-size=4rem] - Collapsed label maximum inline size.\n * @cssprop [--rc-navigation-rail-item-color=inherit] - Resting item text color.\n * @cssprop [--rc-navigation-rail-item-text-decoration] - Slotted link text decoration (defers to\n *   native anchor text-decoration when unset).\n * @cssprop [--rc-navigation-rail-active-color] - Active item text color. Falls back to\n *   `--rc-navigation-rail-item-color`, then `inherit`.\n * @cssprop [--rc-navigation-rail-indicator-bg=transparent] - Active indicator background.\n * @cssprop [--rc-navigation-rail-indicator-border=1px solid Highlight] - Active indicator border.\n * @cssprop [--rc-navigation-rail-indicator-radius=0] - Active indicator corner radius.\n * @cssprop [--rc-navigation-rail-toggle-size=3rem] - Toggle region minimum block size.\n * @cssprop [--rc-navigation-rail-toggle-inline-offset=0.5rem] - Toggle control inline-start offset.\n * @cssprop [--rc-navigation-rail-duration=200ms] - Rail expand/collapse transition duration.\n * @cssprop [--rc-navigation-rail-easing=ease] - Rail expand/collapse transition easing.\n * @cssprop [--rc-navigation-rail-indicator-duration=0ms] - Active indicator transition duration.\n * @cssprop [--rc-navigation-rail-indicator-easing=ease] - Active indicator transition easing.\n * @cssprop [--rc-navigation-rail-focus-ring] - Slotted link focus outline (defers to native\n *   outline when unset).\n * @cssprop [--rc-navigation-rail-focus-ring-offset=2px] - Slotted link outline offset.\n */\nexport class RCNavigationRail extends LitElement {\n  static override styles = [navigationRailStyles];\n\n  private static readonly _styledRoots = new Set<Document | ShadowRoot>();\n\n  private static _ensureBaseStyles(root: Document | ShadowRoot): void {\n    if (RCNavigationRail._styledRoots.has(root)) {\n      return;\n    }\n\n    RCNavigationRail._styledRoots.add(root);\n\n    const $style = document.createElement('style');\n\n    $style.setAttribute('data-rc-light-dom-base', 'rc-navigation-rail');\n    $style.textContent = LIGHT_DOM_CSS;\n\n    if (root instanceof Document) {\n      root.head.append($style);\n    } else {\n      root.append($style);\n    }\n  }\n\n  private _defaultExpanded = false;\n  private _expanded: boolean | undefined;\n  private _expandedInitialized = false;\n\n  /** Whether the rail is expanded. Host writes are silent. */\n  @property({ type: Boolean, reflect: true })\n  get expanded(): boolean {\n    return this._expanded ?? this._defaultExpanded;\n  }\n\n  set expanded(value: boolean | undefined) {\n    const oldValue = this.expanded;\n\n    this._expanded = value;\n    this._expandedInitialized = true;\n    this.requestUpdate('expanded', oldValue);\n  }\n\n  /** Initial expanded state for uncontrolled usage. */\n  @property({ type: Boolean, attribute: 'default-expanded' })\n  get defaultExpanded(): boolean {\n    return this._defaultExpanded;\n  }\n\n  set defaultExpanded(value: boolean) {\n    const oldValue = this._defaultExpanded;\n\n    this._defaultExpanded = value;\n\n    if (!this._expandedInitialized && this._expanded === undefined) {\n      this.requestUpdate('expanded', oldValue);\n    }\n\n    this.requestUpdate('defaultExpanded', oldValue);\n  }\n\n  /** Selector used to find the active link. Defaults to `aria-current`. */\n  @property({ type: String, attribute: 'active-selector' })\n  activeSelector = 'a[aria-current]:not([aria-current=\"false\"])';\n\n  /** Selector inside the active link used for indicator geometry. */\n  @property({ type: String, attribute: 'indicator-target' })\n  indicatorTarget = '[data-rc-navigation-indicator], [data-rc-navigation-icon]';\n\n  @state() private _hasToggle = false;\n\n  @state() private _hasHeader = false;\n\n  @state() private _hasFooter = false;\n\n  @query('slot:not([name])') private _$slot!: HTMLSlotElement;\n\n  @query('[part=\"nav\"]') private _$nav!: HTMLElement;\n\n  @query('#indicator') private _$indicator!: HTMLElement;\n\n  private readonly _indicatorCtrl = new NavigationIndicatorController(this, {\n    slot: () => this._$slot ?? null,\n    container: () => this._$nav ?? null,\n    indicator: () => this._$indicator ?? null,\n    activeSelector: () => this.activeSelector,\n    indicatorTargetSelector: () => this.indicatorTarget,\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    RCNavigationRail._ensureBaseStyles(this.getRootNode() as Document | ShadowRoot);\n  }\n\n  /** Expands the rail and dispatches `rc-navigation-rail-toggle` when it changes. */\n  expand(): void {\n    this._setExpanded(true, true);\n  }\n\n  /** Collapses the rail and dispatches `rc-navigation-rail-toggle` when it changes. */\n  collapse(): void {\n    this._setExpanded(false, true);\n  }\n\n  /** Toggles expanded state and dispatches `rc-navigation-rail-toggle` when it changes. */\n  toggleExpanded(): void {\n    this._setExpanded(!this.expanded, true);\n  }\n\n  protected override firstUpdated(): void {\n    this._indicatorCtrl.sync();\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (\n      changed.has('activeSelector') ||\n      changed.has('indicatorTarget') ||\n      changed.has('expanded')\n    ) {\n      this._indicatorCtrl.sync();\n    }\n\n    if (changed.has('expanded')) {\n      this._syncToggleButton();\n    }\n  }\n\n  protected override render() {\n    return html`\n      <div id=\"root\" part=\"root\">\n        <div\n          id=\"toggle-wrap\"\n          part=\"toggle\"\n          ?hidden=${!this._hasToggle}\n          @click=${this._handleToggleClick}\n        >\n          <slot name=\"toggle\" @slotchange=${this._handleToggleSlotChange}></slot>\n        </div>\n        <div id=\"header\" part=\"header\" ?hidden=${!this._hasHeader}>\n          <slot name=\"header\" @slotchange=${this._handleHeaderSlotChange}></slot>\n        </div>\n        <div part=\"nav\">\n          <div id=\"indicator\" part=\"indicator\" hidden></div>\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div id=\"footer\" part=\"footer\" ?hidden=${!this._hasFooter}>\n          <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _handleSlotChange(): void {\n    this._indicatorCtrl.sync();\n  }\n\n  private _handleToggleSlotChange(event: Event): void {\n    const $slot = event.currentTarget as HTMLSlotElement;\n\n    this._hasToggle = $slot.assignedElements({ flatten: true }).length > 0;\n    this._syncToggleButton();\n  }\n\n  private _handleHeaderSlotChange(event: Event): void {\n    const $slot = event.currentTarget as HTMLSlotElement;\n\n    this._hasHeader = $slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _handleFooterSlotChange(event: Event): void {\n    const $slot = event.currentTarget as HTMLSlotElement;\n\n    this._hasFooter = $slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _handleToggleClick(event: MouseEvent): void {\n    const $target = event.target as Element | null;\n\n    if (!$target?.closest('button')) {\n      return;\n    }\n\n    this.toggleExpanded();\n  }\n\n  private _getToggleButton(): HTMLButtonElement | null {\n    const $toggle = this.querySelector<HTMLElement>(':scope > [slot=\"toggle\"]');\n\n    if ($toggle instanceof HTMLButtonElement) {\n      return $toggle;\n    }\n\n    return $toggle?.querySelector(':scope > button') ?? null;\n  }\n\n  private _syncToggleButton(): void {\n    const $toggle = this.querySelector<HTMLElement>(':scope > [slot=\"toggle\"]');\n    const $button = this._getToggleButton();\n\n    if ($toggle?.localName === 'rc-button') {\n      $toggle.toggleAttribute('selected', this.expanded);\n    }\n\n    $button?.setAttribute('aria-expanded', String(this.expanded));\n\n    $button\n      ?.querySelectorAll<HTMLElement>('[data-rc-navigation-expand-icon]')\n      .forEach(($icon) => ($icon.hidden = this.expanded));\n\n    $button\n      ?.querySelectorAll<HTMLElement>('[data-rc-navigation-collapse-icon]')\n      .forEach(($icon) => ($icon.hidden = !this.expanded));\n  }\n\n  private _setExpanded(expanded: boolean, notify: boolean): void {\n    if (expanded === this.expanded) {\n      return;\n    }\n\n    const oldValue = this.expanded;\n\n    this._expanded = expanded;\n    this._expandedInitialized = true;\n    this.requestUpdate('expanded', oldValue);\n\n    if (notify) {\n      this.dispatchEvent(\n        new CustomEvent<RCNavigationRailToggleDetail>('rc-navigation-rail-toggle', {\n          bubbles: true,\n          composed: true,\n          detail: { expanded },\n        }),\n      );\n    }\n  }\n}\n\nexport default RCNavigationRail;\n"],"names":["navigationRailStyles","css","LIGHT_DOM_CSS","_RCNavigationRail","_a","LitElement","NavigationIndicatorController","root","$style","value","oldValue","changed","html","event","$slot","$toggle","$button","$icon","expanded","notify","__decorateClass","property","state","query","RCNavigationRail"],"mappings":"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"}

package/dist/rc-navigation-rail-define.js

@@ -0,0 +1,6 @@
+import { R as i } from "./rc-navigation-rail-DOaY6_kH.js";
+customElements.get("rc-navigation-rail") || customElements.define("rc-navigation-rail", i);
+export {
+  i as RCNavigationRail
+};
+//# sourceMappingURL=rc-navigation-rail-define.js.map

package/dist/rc-navigation-rail-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-navigation-rail-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCNavigationRail } from './index.js';\n\ncustomElements.get('rc-navigation-rail') ||\n  customElements.define('rc-navigation-rail', RCNavigationRail);\n\nexport * from './index.js';\n"],"names":["RCNavigationRail"],"mappings":";AAEA,eAAe,IAAI,oBAAoB,KACrC,eAAe,OAAO,sBAAsBA,CAAgB;"}

package/dist/rc-navigation-rail.js

@@ -0,0 +1,5 @@
+import { R as o } from "./rc-navigation-rail-DOaY6_kH.js";
+export {
+  o as RCNavigationRail
+};
+//# sourceMappingURL=rc-navigation-rail.js.map

package/dist/rc-navigation-rail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-navigation-rail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/packages/rc-navigation-rail/src/define.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/packages/rc-navigation-rail/src/index.d.ts

@@ -0,0 +1 @@
+export * from './rc-navigation-rail';

package/dist/types/packages/rc-navigation-rail/src/rc-navigation-rail.d.ts

@@ -0,0 +1,123 @@
+import { LitElement, PropertyValues } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-navigation-rail': RCNavigationRail;
+    }
+    interface HTMLElementEventMap {
+        'rc-navigation-rail-toggle': CustomEvent<RCNavigationRailToggleDetail>;
+    }
+}
+/** Detail payload for the `rc-navigation-rail-toggle` event. */
+export interface RCNavigationRailToggleDetail {
+    /** Whether the rail is expanded after the toggle. */
+    expanded: boolean;
+}
+/**
+ * Navigation rail layout that styles consumer-authored links.
+ *
+ * `rc-navigation-rail` preserves native `<a>` elements in light DOM for router
+ * interop and progressive enhancement. Mark the current link with
+ * `aria-current="page"` or provide `active-selector` for router active classes.
+ * Wrap the component in a consumer-authored `<nav>` when it represents a
+ * navigation landmark; `rc-navigation-rail` deliberately provides no landmark
+ * role of its own, matching `rc-navigation-bar`.
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-navigation-rail rc-navigation-rail docs}
+ * @see {@link https://m3.material.io/components/navigation-rail/overview Material 3 navigation rail}
+ *
+ * @slot default - Navigation links. Direct `<a>` children are recommended.
+ * @slot header - Content above the navigation links.
+ * @slot footer - Content pinned after the navigation links.
+ * @slot toggle - Native `<button>` or `rc-button` expand/collapse control.
+ *
+ * @fires rc-navigation-rail-toggle - Fired when user interaction or a method toggles expanded state.
+ *
+ * @csspart root - The rail layout container.
+ * @csspart nav - The navigation layout container.
+ * @csspart indicator - The active item indicator.
+ * @csspart toggle - Toggle slot container.
+ * @csspart header - Header slot container.
+ * @csspart footer - Footer slot container.
+ *
+ * @attr expanded - Whether the rail is expanded. Host writes are silent.
+ * @attr default-expanded - Initial expanded state for uncontrolled usage.
+ * @attr active-selector - Selector used to find the active link.
+ * @attr indicator-target - Selector inside the active link used for indicator geometry.
+ *
+ * @cssprop [--rc-navigation-rail-bg=Canvas] - Rail surface background.
+ * @cssprop [--rc-navigation-rail-color=CanvasText] - Rail text color.
+ * @cssprop [--rc-navigation-rail-inline-size=5rem] - Collapsed rail inline size.
+ * @cssprop [--rc-navigation-rail-expanded-inline-size=16rem] - Expanded rail inline size.
+ * @cssprop [--rc-navigation-rail-padding-block=0.75rem] - Rail block-axis padding.
+ * @cssprop [--rc-navigation-rail-padding-inline=0.5rem] - Rail inline-axis padding.
+ * @cssprop [--rc-navigation-rail-gap=0.75rem] - Gap between rail regions.
+ * @cssprop [--rc-navigation-rail-item-gap=0.75rem] - Gap between navigation items.
+ * @cssprop [--rc-navigation-rail-link-gap=0.25rem] - Gap between item icon and label.
+ * @cssprop [--rc-navigation-rail-item-min-block-size=3.5rem] - Collapsed item minimum block size.
+ * @cssprop [--rc-navigation-rail-expanded-item-min-block-size=3.5rem] - Expanded item minimum block size.
+ * @cssprop [--rc-navigation-rail-item-padding-block=0.25rem] - Item block-axis padding.
+ * @cssprop [--rc-navigation-rail-item-padding-inline=0.5rem] - Collapsed item inline-axis padding.
+ * @cssprop [--rc-navigation-rail-expanded-item-padding-inline=1rem] - Expanded item inline-axis padding.
+ * @cssprop [--rc-navigation-rail-collapsed-label-inline-size=4rem] - Collapsed label maximum inline size.
+ * @cssprop [--rc-navigation-rail-item-color=inherit] - Resting item text color.
+ * @cssprop [--rc-navigation-rail-item-text-decoration] - Slotted link text decoration (defers to
+ *   native anchor text-decoration when unset).
+ * @cssprop [--rc-navigation-rail-active-color] - Active item text color. Falls back to
+ *   `--rc-navigation-rail-item-color`, then `inherit`.
+ * @cssprop [--rc-navigation-rail-indicator-bg=transparent] - Active indicator background.
+ * @cssprop [--rc-navigation-rail-indicator-border=1px solid Highlight] - Active indicator border.
+ * @cssprop [--rc-navigation-rail-indicator-radius=0] - Active indicator corner radius.
+ * @cssprop [--rc-navigation-rail-toggle-size=3rem] - Toggle region minimum block size.
+ * @cssprop [--rc-navigation-rail-toggle-inline-offset=0.5rem] - Toggle control inline-start offset.
+ * @cssprop [--rc-navigation-rail-duration=200ms] - Rail expand/collapse transition duration.
+ * @cssprop [--rc-navigation-rail-easing=ease] - Rail expand/collapse transition easing.
+ * @cssprop [--rc-navigation-rail-indicator-duration=0ms] - Active indicator transition duration.
+ * @cssprop [--rc-navigation-rail-indicator-easing=ease] - Active indicator transition easing.
+ * @cssprop [--rc-navigation-rail-focus-ring] - Slotted link focus outline (defers to native
+ *   outline when unset).
+ * @cssprop [--rc-navigation-rail-focus-ring-offset=2px] - Slotted link outline offset.
+ */
+export declare class RCNavigationRail extends LitElement {
+    static styles: import('lit').CSSResult[];
+    private static readonly _styledRoots;
+    private static _ensureBaseStyles;
+    private _defaultExpanded;
+    private _expanded;
+    private _expandedInitialized;
+    /** Whether the rail is expanded. Host writes are silent. */
+    get expanded(): boolean;
+    set expanded(value: boolean | undefined);
+    /** Initial expanded state for uncontrolled usage. */
+    get defaultExpanded(): boolean;
+    set defaultExpanded(value: boolean);
+    /** Selector used to find the active link. Defaults to `aria-current`. */
+    activeSelector: string;
+    /** Selector inside the active link used for indicator geometry. */
+    indicatorTarget: string;
+    private _hasToggle;
+    private _hasHeader;
+    private _hasFooter;
+    private _$slot;
+    private _$nav;
+    private _$indicator;
+    private readonly _indicatorCtrl;
+    connectedCallback(): void;
+    /** Expands the rail and dispatches `rc-navigation-rail-toggle` when it changes. */
+    expand(): void;
+    /** Collapses the rail and dispatches `rc-navigation-rail-toggle` when it changes. */
+    collapse(): void;
+    /** Toggles expanded state and dispatches `rc-navigation-rail-toggle` when it changes. */
+    toggleExpanded(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): import('lit').TemplateResult<1>;
+    private _handleSlotChange;
+    private _handleToggleSlotChange;
+    private _handleHeaderSlotChange;
+    private _handleFooterSlotChange;
+    private _handleToggleClick;
+    private _getToggleButton;
+    private _syncToggleButton;
+    private _setExpanded;
+}
+export default RCNavigationRail;

package/dist/types/packages/rc-navigation-rail/src/rc-navigation-rail.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const navigationRailStyles: import('lit').CSSResult;
+export default navigationRailStyles;

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@rcarls/rc-navigation-rail",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.4.0",
+  "description": "Navigation rail layout that styles consumer-authored links.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-navigation-rail"
+  },
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-navigation-rail",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-navigation-rail.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-navigation-rail/src/index.d.ts",
+        "default": "./dist/rc-navigation-rail.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-navigation-rail/src/define.d.ts",
+        "default": "./dist/rc-navigation-rail-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-navigation-rail/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-navigation-rail-define.js"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "scripts": {
+    "build": "tsc && vite build && cem analyze",
+    "cem:analyze": "cem analyze",
+    "preview": "vite preview",
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
+  },
+  "dependencies": {
+    "@rcarls/rc-common": "workspace:*"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "playwright": "^1.56.0",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}