@rcarls/rc-navigation-rail 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +67 -0
  2. package/dist/custom-elements.json +1 -1
  3. package/dist/rc-navigation-rail-ChRHnIGn.js +161 -0
  4. package/dist/rc-navigation-rail-ChRHnIGn.js.map +1 -0
  5. package/dist/rc-navigation-rail-define.js +1 -1
  6. package/dist/rc-navigation-rail.js +1 -1
  7. package/dist/types/packages/rc-navigation-rail/src/index.d.ts +1 -1
  8. package/dist/types/packages/rc-navigation-rail/src/rc-navigation-rail.d.ts +1 -1
  9. package/package.json +2 -2
  10. package/dist/rc-navigation-rail-DOaY6_kH.js +0 -385
  11. package/dist/rc-navigation-rail-DOaY6_kH.js.map +0 -1
  12. package/dist/types/packages/rc-navigation-rail/src/rc-navigation-rail.test.d.ts +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,72 @@
1
1
  # @rcarls/rc-navigation-rail
2
2
 
3
+ ## 0.7.0
4
+
5
+ ### Patch Changes
6
+
7
+ - 38cd00c: Convert viewport measurements to local CSS pixels when reordering items,
8
+ positioning navigation indicators, and clamping anchored popups under CSS zoom.
9
+ Reorder previews now account for the scroll container's zoom, while anchor
10
+ corrections settle without repeated overshoot.
11
+ - 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
12
+ and light-DOM structural styles through Lightning CSS, removing comments and
13
+ whitespace while keeping source maps that resolve to each template. Rendered
14
+ styles are unchanged.
15
+
16
+ `@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
17
+ string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
18
+ depend on `@rcarls/rc-common` for it.
19
+
20
+ - b9175e9: Position the navigation indicator in logical coordinates, so it lands on the
21
+ current link in RTL and in vertical writing modes instead of mirroring to
22
+ the opposite side or swapping its width and height.
23
+
24
+ Add `physicalOffset`, the inverse of `logicalRect`: it turns a logical
25
+ offset from the start corner into the physical `translate` an element
26
+ anchored at `inset-inline-start`/`inset-block-start` needs.
27
+
28
+ - Updated dependencies [e3dfa59]
29
+ - Updated dependencies [50d5610]
30
+ - Updated dependencies [9ee769c]
31
+ - Updated dependencies [1179f24]
32
+ - Updated dependencies [595fe37]
33
+ - Updated dependencies [38cd00c]
34
+ - Updated dependencies [5c006de]
35
+ - Updated dependencies [a6553ff]
36
+ - Updated dependencies [2205478]
37
+ - Updated dependencies [4341311]
38
+ - Updated dependencies [899bb5e]
39
+ - Updated dependencies [25fcfe0]
40
+ - Updated dependencies [51f6403]
41
+ - Updated dependencies [9caca6b]
42
+ - Updated dependencies [b764a3c]
43
+ - Updated dependencies [54d9ead]
44
+ - Updated dependencies [b9175e9]
45
+ - Updated dependencies [c8b762b]
46
+ - Updated dependencies [55e1e7f]
47
+ - Updated dependencies [f1ca82d]
48
+ - Updated dependencies [b87f27b]
49
+ - Updated dependencies [32ebead]
50
+ - Updated dependencies [bfefedd]
51
+ - Updated dependencies [c130173]
52
+ - Updated dependencies [11680b6]
53
+ - Updated dependencies [223d36c]
54
+ - Updated dependencies [7b91a44]
55
+ - Updated dependencies [aa04ead]
56
+ - Updated dependencies [ac65b5b]
57
+ - Updated dependencies [afcfef8]
58
+ - Updated dependencies [11ef1ad]
59
+ - @rcarls/rc-common@0.7.0
60
+
61
+ ## 0.6.0
62
+
63
+ ### Patch Changes
64
+
65
+ - Updated dependencies [6683eb9]
66
+ - Updated dependencies [ee7ba6c]
67
+ - Updated dependencies [30eb232]
68
+ - @rcarls/rc-common@0.6.0
69
+
3
70
  ## 0.5.0
4
71
 
5
72
  ### Patch Changes
package/dist/custom-elements.json CHANGED
@@ -35,7 +35,7 @@
35
35
  "name": "*",
36
36
  "declaration": {
37
37
  "name": "*",
38
- "module": "src/rc-navigation-rail"
38
+ "module": "src/rc-navigation-rail.js"
39
39
  }
40
40
  }
41
41
  ]
package/dist/rc-navigation-rail-ChRHnIGn.js ADDED
@@ -0,0 +1,161 @@
1
+ import { css as h, LitElement as v, html as u } from "lit";
2
+ import { property as l, state as c, query as g } from "lit/decorators.js";
3
+ import { NavigationIndicatorController as x, cssText as f } from "@rcarls/rc-common";
4
+ const m = h`:host{color-scheme:inherit;color:var(--rc-navigation-rail-color,CanvasText);background:var(--rc-navigation-rail-bg,Canvas);display:inline-flex}:host([hidden]){display:none}#root{align-items:stretch;gap:var(--rc-navigation-rail-gap,.75rem);inline-size:var(--rc-navigation-rail-inline-size,5rem);min-block-size:0;padding-block:var(--rc-navigation-rail-padding-block,.75rem);padding-inline:var(--rc-navigation-rail-padding-inline,.5rem);box-sizing:border-box;transition:inline-size var(--rc-navigation-rail-duration,.2s) var(--rc-navigation-rail-easing,ease), padding var(--rc-navigation-rail-duration,.2s) var(--rc-navigation-rail-easing,ease);flex-direction:column;display:flex;overflow:hidden auto}:host([expanded]) #root{inline-size:var(--rc-navigation-rail-expanded-inline-size,16rem)}#toggle-wrap,#header,#footer{flex-direction:column;display:flex}#header{align-items:center}:host([expanded]) #footer{align-items:stretch}#toggle-wrap{min-block-size:var(--rc-navigation-rail-toggle-size,3rem);align-items:flex-start;padding-inline-start:var(--rc-navigation-rail-toggle-inline-offset,.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]{flex:auto;min-block-size:0;display:flex;position:relative}slot:not([name]){align-items:center;gap:var(--rc-navigation-rail-item-gap,.75rem);flex-direction:column;flex:auto;display:flex}:host([expanded]) slot:not([name]){align-items:stretch}::slotted(a){z-index:1;justify-content:center;align-items:center;gap:var(--rc-navigation-rail-link-gap,.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,.25rem);padding-inline:var(--rc-navigation-rail-item-padding-inline,.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;flex-direction:column;display:inline-flex;position:relative}::slotted(a:focus-visible){outline:var(--rc-navigation-rail-focus-ring,revert)}:host([expanded]) ::slotted(a){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);flex-direction:row;justify-content:flex-start}::slotted(a[aria-current]:not([aria-current=false])){color:var(--rc-navigation-rail-active-color,LinkText)}#indicator{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,0s) var(--rc-navigation-rail-indicator-easing,ease), inline-size var(--rc-navigation-rail-indicator-duration,0s) var(--rc-navigation-rail-indicator-easing,ease), block-size var(--rc-navigation-rail-indicator-duration,0s) var(--rc-navigation-rail-indicator-easing,ease), opacity var(--rc-navigation-rail-indicator-duration,0s) ease;position:absolute;inset-block-start:0;inset-inline-start:0}#indicator[hidden]{opacity:0;display:block}#footer{margin-block-start:auto}@supports (transition-behavior:allow-discrete){#root{transition-behavior:allow-discrete}}@media (forced-colors:active){#indicator{background:0 0;border:1px solid highlight}}@media (prefers-reduced-motion:reduce){#root,#indicator{transition-duration:0s}}`;
5
+ var _ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (p, e, t, a) => {
6
+ for (var o = a > 1 ? void 0 : a ? b(e, t) : e, d = p.length - 1, s; d >= 0; d--)
7
+ (s = p[d]) && (o = (a ? s(e, t, o) : s(o)) || o);
8
+ return a && o && _(e, t, o), o;
9
+ };
10
+ const y = f`@layer rc-base{rc-navigation-rail>a>[data-rc-navigation-icon]{vertical-align:middle;align-self:center}rc-navigation-rail:not([expanded])>a>[data-rc-navigation-label]{max-inline-size:var(--rc-navigation-rail-collapsed-label-inline-size,4rem);text-align:center;overflow-wrap:anywhere;font-size:smaller;line-height:1.2}rc-navigation-rail>a>[data-rc-navigation-indicator]{align-items:center;gap:var(--rc-navigation-rail-link-gap,.25rem);vertical-align:middle;flex-direction:column;max-inline-size:100%;display:inline-flex;position:relative}rc-navigation-rail>a>[data-rc-navigation-indicator]>[data-rc-navigation-icon]{vertical-align:middle;flex:none}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);text-align:center;overflow-wrap:anywhere;font-size:smaller;line-height:1.2}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}}`;
11
+ var n;
12
+ const i = (n = class extends v {
13
+ constructor() {
14
+ 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, {
15
+ slot: () => this._$slot ?? null,
16
+ container: () => this._$nav ?? null,
17
+ indicator: () => this._$indicator ?? null,
18
+ activeSelector: () => this.activeSelector,
19
+ indicatorTargetSelector: () => this.indicatorTarget
20
+ });
21
+ }
22
+ static _ensureBaseStyles(e) {
23
+ if (n._styledRoots.has(e))
24
+ return;
25
+ n._styledRoots.add(e);
26
+ const t = document.createElement("style");
27
+ t.setAttribute("data-rc-light-dom-base", "rc-navigation-rail"), t.textContent = y, e instanceof Document ? e.head.append(t) : e.append(t);
28
+ }
29
+ get expanded() {
30
+ return this._expanded ?? this._defaultExpanded;
31
+ }
32
+ set expanded(e) {
33
+ const t = this.expanded;
34
+ this._expanded = e, this._expandedInitialized = !0, this.requestUpdate("expanded", t);
35
+ }
36
+ get defaultExpanded() {
37
+ return this._defaultExpanded;
38
+ }
39
+ set defaultExpanded(e) {
40
+ const t = this._defaultExpanded;
41
+ this._defaultExpanded = e, !this._expandedInitialized && this._expanded === void 0 && this.requestUpdate("expanded", t), this.requestUpdate("defaultExpanded", t);
42
+ }
43
+ connectedCallback() {
44
+ super.connectedCallback(), n._ensureBaseStyles(this.getRootNode());
45
+ }
46
+ /** Expands the rail and dispatches `rc-navigation-rail-toggle` when it changes. */
47
+ expand() {
48
+ this._setExpanded(!0, !0);
49
+ }
50
+ /** Collapses the rail and dispatches `rc-navigation-rail-toggle` when it changes. */
51
+ collapse() {
52
+ this._setExpanded(!1, !0);
53
+ }
54
+ /** Toggles expanded state and dispatches `rc-navigation-rail-toggle` when it changes. */
55
+ toggleExpanded() {
56
+ this._setExpanded(!this.expanded, !0);
57
+ }
58
+ firstUpdated() {
59
+ this._indicatorCtrl.sync();
60
+ }
61
+ updated(e) {
62
+ (e.has("activeSelector") || e.has("indicatorTarget") || e.has("expanded")) && this._indicatorCtrl.sync(), e.has("expanded") && this._syncToggleButton();
63
+ }
64
+ render() {
65
+ return u`
66
+ <div id="root" part="root">
67
+ <div
68
+ id="toggle-wrap"
69
+ part="toggle"
70
+ ?hidden=${!this._hasToggle}
71
+ @click=${this._handleToggleClick}
72
+ >
73
+ <slot name="toggle" @slotchange=${this._handleToggleSlotChange}></slot>
74
+ </div>
75
+ <div id="header" part="header" ?hidden=${!this._hasHeader}>
76
+ <slot name="header" @slotchange=${this._handleHeaderSlotChange}></slot>
77
+ </div>
78
+ <div part="nav">
79
+ <div id="indicator" part="indicator" hidden></div>
80
+ <slot @slotchange=${this._handleSlotChange}></slot>
81
+ </div>
82
+ <div id="footer" part="footer" ?hidden=${!this._hasFooter}>
83
+ <slot name="footer" @slotchange=${this._handleFooterSlotChange}></slot>
84
+ </div>
85
+ </div>
86
+ `;
87
+ }
88
+ _handleSlotChange() {
89
+ this._indicatorCtrl.sync();
90
+ }
91
+ _handleToggleSlotChange(e) {
92
+ const t = e.currentTarget;
93
+ this._hasToggle = t.assignedElements({ flatten: !0 }).length > 0, this._syncToggleButton();
94
+ }
95
+ _handleHeaderSlotChange(e) {
96
+ const t = e.currentTarget;
97
+ this._hasHeader = t.assignedElements({ flatten: !0 }).length > 0;
98
+ }
99
+ _handleFooterSlotChange(e) {
100
+ const t = e.currentTarget;
101
+ this._hasFooter = t.assignedElements({ flatten: !0 }).length > 0;
102
+ }
103
+ _handleToggleClick(e) {
104
+ e.target?.closest("button") && this.toggleExpanded();
105
+ }
106
+ _getToggleButton() {
107
+ const e = this.querySelector(':scope > [slot="toggle"]');
108
+ return e instanceof HTMLButtonElement ? e : e?.querySelector(":scope > button") ?? null;
109
+ }
110
+ _syncToggleButton() {
111
+ const e = this.querySelector(':scope > [slot="toggle"]'), t = this._getToggleButton();
112
+ 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);
113
+ }
114
+ _setExpanded(e, t) {
115
+ if (e === this.expanded)
116
+ return;
117
+ const a = this.expanded;
118
+ this._expanded = e, this._expandedInitialized = !0, this.requestUpdate("expanded", a), t && this.dispatchEvent(
119
+ new CustomEvent("rc-navigation-rail-toggle", {
120
+ bubbles: !0,
121
+ composed: !0,
122
+ detail: { expanded: e }
123
+ })
124
+ );
125
+ }
126
+ }, n.styles = [m], n._styledRoots = /* @__PURE__ */ new Set(), n);
127
+ r([
128
+ l({ type: Boolean, reflect: !0 })
129
+ ], i.prototype, "expanded", 1);
130
+ r([
131
+ l({ type: Boolean, attribute: "default-expanded" })
132
+ ], i.prototype, "defaultExpanded", 1);
133
+ r([
134
+ l({ type: String, attribute: "active-selector" })
135
+ ], i.prototype, "activeSelector", 2);
136
+ r([
137
+ l({ type: String, attribute: "indicator-target" })
138
+ ], i.prototype, "indicatorTarget", 2);
139
+ r([
140
+ c()
141
+ ], i.prototype, "_hasToggle", 2);
142
+ r([
143
+ c()
144
+ ], i.prototype, "_hasHeader", 2);
145
+ r([
146
+ c()
147
+ ], i.prototype, "_hasFooter", 2);
148
+ r([
149
+ g("slot:not([name])")
150
+ ], i.prototype, "_$slot", 2);
151
+ r([
152
+ g('[part="nav"]')
153
+ ], i.prototype, "_$nav", 2);
154
+ r([
155
+ g("#indicator")
156
+ ], i.prototype, "_$indicator", 2);
157
+ let E = i;
158
+ export {
159
+ E as R
160
+ };
161
+ //# sourceMappingURL=rc-navigation-rail-ChRHnIGn.js.map
package/dist/rc-navigation-rail-ChRHnIGn.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"rc-navigation-rail-ChRHnIGn.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 { cssText, NavigationIndicatorController } from '@rcarls/rc-common';\n\nimport navigationRailStyles from './rc-navigation-rail.styles.js';\n\nconst LIGHT_DOM_CSS = cssText`\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","cssText","_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 CHANGED
@@ -1,4 +1,4 @@
1
- import { R as i } from "./rc-navigation-rail-DOaY6_kH.js";
1
+ import { R as i } from "./rc-navigation-rail-ChRHnIGn.js";
2
2
  customElements.get("rc-navigation-rail") || customElements.define("rc-navigation-rail", i);
3
3
  export {
4
4
  i as RCNavigationRail
package/dist/rc-navigation-rail.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as o } from "./rc-navigation-rail-DOaY6_kH.js";
1
+ import { R as o } from "./rc-navigation-rail-ChRHnIGn.js";
2
2
  export {
3
3
  o as RCNavigationRail
4
4
  };
package/dist/types/packages/rc-navigation-rail/src/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from './rc-navigation-rail';
1
+ export * from './rc-navigation-rail.js';
package/dist/types/packages/rc-navigation-rail/src/rc-navigation-rail.d.ts CHANGED
@@ -110,7 +110,7 @@ export declare class RCNavigationRail extends LitElement {
110
110
  toggleExpanded(): void;
111
111
  protected firstUpdated(): void;
112
112
  protected updated(changed: PropertyValues<this>): void;
113
- protected render(): import('lit').TemplateResult<1>;
113
+ protected render(): import('lit-html').TemplateResult<1>;
114
114
  private _handleSlotChange;
115
115
  private _handleToggleSlotChange;
116
116
  private _handleHeaderSlotChange;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "0.5.0",
6
+ "version": "0.7.0",
7
7
  "description": "Navigation rail layout that styles consumer-authored links.",
8
8
  "repository": {
9
9
  "type": "git",
@@ -45,7 +45,7 @@
45
45
  "test:browser:firefox": "vitest --run --project=firefox"
46
46
  },
47
47
  "dependencies": {
48
- "@rcarls/rc-common": "0.5.0"
48
+ "@rcarls/rc-common": "0.7.0"
49
49
  },
50
50
  "devDependencies": {
51
51
  "@custom-elements-manifest/analyzer": "0.11.0",
package/dist/rc-navigation-rail-DOaY6_kH.js DELETED
@@ -1,385 +0,0 @@
1
- import { css as h, LitElement as v, html as u } from "lit";
2
- import { property as l, state as c, query as g } from "lit/decorators.js";
3
- import { NavigationIndicatorController as x } from "@rcarls/rc-common";
4
- const f = h`
5
- :host {
6
- display: inline-flex;
7
- color-scheme: inherit;
8
- color: var(--rc-navigation-rail-color, CanvasText);
9
- background: var(--rc-navigation-rail-bg, Canvas);
10
- }
11
-
12
- :host([hidden]) {
13
- display: none;
14
- }
15
-
16
- #root {
17
- display: flex;
18
- flex-direction: column;
19
- align-items: stretch;
20
- gap: var(--rc-navigation-rail-gap, 0.75rem);
21
- inline-size: var(--rc-navigation-rail-inline-size, 5rem);
22
- min-block-size: 0;
23
- padding-block: var(--rc-navigation-rail-padding-block, 0.75rem);
24
- padding-inline: var(--rc-navigation-rail-padding-inline, 0.5rem);
25
- box-sizing: border-box;
26
- overflow: hidden auto;
27
- transition:
28
- inline-size var(--rc-navigation-rail-duration, 200ms) var(--rc-navigation-rail-easing, ease),
29
- padding var(--rc-navigation-rail-duration, 200ms) var(--rc-navigation-rail-easing, ease);
30
- }
31
-
32
- :host([expanded]) #root {
33
- inline-size: var(--rc-navigation-rail-expanded-inline-size, 16rem);
34
- }
35
-
36
- #toggle-wrap,
37
- #header,
38
- #footer {
39
- display: flex;
40
- flex-direction: column;
41
- }
42
-
43
- #header {
44
- align-items: center;
45
- }
46
-
47
- :host([expanded]) #footer {
48
- align-items: stretch;
49
- }
50
-
51
- #toggle-wrap {
52
- align-items: flex-start;
53
- min-block-size: var(--rc-navigation-rail-toggle-size, 3rem);
54
- padding-inline-start: var(--rc-navigation-rail-toggle-inline-offset, 0.5rem);
55
- }
56
-
57
- #toggle-wrap[hidden],
58
- #header[hidden],
59
- #footer[hidden] {
60
- display: none;
61
- }
62
-
63
- ::slotted([slot='toggle']) {
64
- flex: none;
65
- }
66
-
67
- :host(:not([expanded])) ::slotted([data-rc-navigation-collapse-icon]),
68
- :host([expanded]) ::slotted([data-rc-navigation-expand-icon]) {
69
- display: none;
70
- }
71
-
72
- [part='nav'] {
73
- position: relative;
74
- display: flex;
75
- flex: 1 1 auto;
76
- min-block-size: 0;
77
- }
78
-
79
- slot:not([name]) {
80
- display: flex;
81
- flex: 1 1 auto;
82
- flex-direction: column;
83
- align-items: center;
84
- gap: var(--rc-navigation-rail-item-gap, 0.75rem);
85
- }
86
-
87
- :host([expanded]) slot:not([name]) {
88
- align-items: stretch;
89
- }
90
-
91
- ::slotted(a) {
92
- position: relative;
93
- z-index: 1;
94
- display: inline-flex;
95
- flex-direction: column;
96
- align-items: center;
97
- justify-content: center;
98
- gap: var(--rc-navigation-rail-link-gap, 0.25rem);
99
- min-inline-size: 0;
100
- min-block-size: var(--rc-navigation-rail-item-min-block-size, 3.5rem);
101
- padding-block: var(--rc-navigation-rail-item-padding-block, 0.25rem);
102
- padding-inline: var(--rc-navigation-rail-item-padding-inline, 0.5rem);
103
- box-sizing: border-box;
104
- color: var(--rc-navigation-rail-item-color, inherit);
105
- font: inherit;
106
- text-align: center;
107
- text-decoration: var(--rc-navigation-rail-item-text-decoration, revert);
108
- outline-offset: var(--rc-navigation-rail-focus-ring-offset, 2px);
109
- -webkit-tap-highlight-color: transparent;
110
- }
111
-
112
- ::slotted(a:focus-visible) {
113
- outline: var(--rc-navigation-rail-focus-ring, revert);
114
- }
115
-
116
- :host([expanded]) ::slotted(a) {
117
- flex-direction: row;
118
- justify-content: flex-start;
119
- min-block-size: var(--rc-navigation-rail-expanded-item-min-block-size, 3.5rem);
120
- padding-inline: var(--rc-navigation-rail-expanded-item-padding-inline, 1rem);
121
- }
122
-
123
- ::slotted(a[aria-current]:not([aria-current='false'])) {
124
- color: var(--rc-navigation-rail-active-color, LinkText);
125
- }
126
-
127
- #indicator {
128
- position: absolute;
129
- inset-block-start: 0;
130
- inset-inline-start: 0;
131
- z-index: 0;
132
- box-sizing: border-box;
133
- border: var(--rc-navigation-rail-indicator-border, 1px solid Highlight);
134
- border-radius: var(--rc-navigation-rail-indicator-radius, 0);
135
- background: var(--rc-navigation-rail-indicator-bg, transparent);
136
- pointer-events: none;
137
- transition:
138
- transform var(--rc-navigation-rail-indicator-duration, 0ms)
139
- var(--rc-navigation-rail-indicator-easing, ease),
140
- inline-size var(--rc-navigation-rail-indicator-duration, 0ms)
141
- var(--rc-navigation-rail-indicator-easing, ease),
142
- block-size var(--rc-navigation-rail-indicator-duration, 0ms)
143
- var(--rc-navigation-rail-indicator-easing, ease),
144
- opacity var(--rc-navigation-rail-indicator-duration, 0ms) ease;
145
- }
146
-
147
- #indicator[hidden] {
148
- display: block;
149
- opacity: 0;
150
- }
151
-
152
- #footer {
153
- margin-block-start: auto;
154
- }
155
-
156
- @supports (transition-behavior: allow-discrete) {
157
- #root {
158
- transition-behavior: allow-discrete;
159
- }
160
- }
161
-
162
- @media (forced-colors: active) {
163
- #indicator {
164
- border: 1px solid Highlight;
165
- background: transparent;
166
- }
167
- }
168
-
169
- @media (prefers-reduced-motion: reduce) {
170
- #root,
171
- #indicator {
172
- transition-duration: 0s;
173
- }
174
- }
175
- `;
176
- var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (p, e, t, a) => {
177
- for (var o = a > 1 ? void 0 : a ? _(e, t) : e, d = p.length - 1, s; d >= 0; d--)
178
- (s = p[d]) && (o = (a ? s(e, t, o) : s(o)) || o);
179
- return a && o && m(e, t, o), o;
180
- };
181
- const b = `
182
- @layer rc-base {
183
- rc-navigation-rail > a > [data-rc-navigation-icon] {
184
- align-self: center;
185
- vertical-align: middle;
186
- }
187
-
188
- rc-navigation-rail:not([expanded])
189
- > a
190
- > [data-rc-navigation-label] {
191
- max-inline-size: var(--rc-navigation-rail-collapsed-label-inline-size, 4rem);
192
- font-size: smaller;
193
- line-height: 1.2;
194
- text-align: center;
195
- overflow-wrap: anywhere;
196
- }
197
-
198
- rc-navigation-rail > a > [data-rc-navigation-indicator] {
199
- position: relative;
200
- display: inline-flex;
201
- flex-direction: column;
202
- align-items: center;
203
- gap: var(--rc-navigation-rail-link-gap, 0.25rem);
204
- max-inline-size: 100%;
205
- vertical-align: middle;
206
- }
207
-
208
- rc-navigation-rail > a > [data-rc-navigation-indicator] > [data-rc-navigation-icon] {
209
- flex: none;
210
- vertical-align: middle;
211
- }
212
-
213
- rc-navigation-rail:not([expanded])
214
- > a
215
- > [data-rc-navigation-indicator]
216
- > :not([data-rc-navigation-icon]) {
217
- max-inline-size: var(--rc-navigation-rail-collapsed-label-inline-size, 4rem);
218
- font-size: smaller;
219
- line-height: 1.2;
220
- text-align: center;
221
- overflow-wrap: anywhere;
222
- }
223
-
224
- rc-navigation-rail[expanded] > a > [data-rc-navigation-indicator] {
225
- flex-direction: row;
226
- justify-content: flex-start;
227
- }
228
-
229
- rc-navigation-rail
230
- :is([data-rc-navigation-expand-icon], [data-rc-navigation-collapse-icon])[hidden] {
231
- display: none !important;
232
- }
233
- }
234
- `;
235
- var n;
236
- const i = (n = class extends v {
237
- constructor() {
238
- 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, {
239
- slot: () => this._$slot ?? null,
240
- container: () => this._$nav ?? null,
241
- indicator: () => this._$indicator ?? null,
242
- activeSelector: () => this.activeSelector,
243
- indicatorTargetSelector: () => this.indicatorTarget
244
- });
245
- }
246
- static _ensureBaseStyles(e) {
247
- if (n._styledRoots.has(e))
248
- return;
249
- n._styledRoots.add(e);
250
- const t = document.createElement("style");
251
- t.setAttribute("data-rc-light-dom-base", "rc-navigation-rail"), t.textContent = b, e instanceof Document ? e.head.append(t) : e.append(t);
252
- }
253
- get expanded() {
254
- return this._expanded ?? this._defaultExpanded;
255
- }
256
- set expanded(e) {
257
- const t = this.expanded;
258
- this._expanded = e, this._expandedInitialized = !0, this.requestUpdate("expanded", t);
259
- }
260
- get defaultExpanded() {
261
- return this._defaultExpanded;
262
- }
263
- set defaultExpanded(e) {
264
- const t = this._defaultExpanded;
265
- this._defaultExpanded = e, !this._expandedInitialized && this._expanded === void 0 && this.requestUpdate("expanded", t), this.requestUpdate("defaultExpanded", t);
266
- }
267
- connectedCallback() {
268
- super.connectedCallback(), n._ensureBaseStyles(this.getRootNode());
269
- }
270
- /** Expands the rail and dispatches `rc-navigation-rail-toggle` when it changes. */
271
- expand() {
272
- this._setExpanded(!0, !0);
273
- }
274
- /** Collapses the rail and dispatches `rc-navigation-rail-toggle` when it changes. */
275
- collapse() {
276
- this._setExpanded(!1, !0);
277
- }
278
- /** Toggles expanded state and dispatches `rc-navigation-rail-toggle` when it changes. */
279
- toggleExpanded() {
280
- this._setExpanded(!this.expanded, !0);
281
- }
282
- firstUpdated() {
283
- this._indicatorCtrl.sync();
284
- }
285
- updated(e) {
286
- (e.has("activeSelector") || e.has("indicatorTarget") || e.has("expanded")) && this._indicatorCtrl.sync(), e.has("expanded") && this._syncToggleButton();
287
- }
288
- render() {
289
- return u`
290
- <div id="root" part="root">
291
- <div
292
- id="toggle-wrap"
293
- part="toggle"
294
- ?hidden=${!this._hasToggle}
295
- @click=${this._handleToggleClick}
296
- >
297
- <slot name="toggle" @slotchange=${this._handleToggleSlotChange}></slot>
298
- </div>
299
- <div id="header" part="header" ?hidden=${!this._hasHeader}>
300
- <slot name="header" @slotchange=${this._handleHeaderSlotChange}></slot>
301
- </div>
302
- <div part="nav">
303
- <div id="indicator" part="indicator" hidden></div>
304
- <slot @slotchange=${this._handleSlotChange}></slot>
305
- </div>
306
- <div id="footer" part="footer" ?hidden=${!this._hasFooter}>
307
- <slot name="footer" @slotchange=${this._handleFooterSlotChange}></slot>
308
- </div>
309
- </div>
310
- `;
311
- }
312
- _handleSlotChange() {
313
- this._indicatorCtrl.sync();
314
- }
315
- _handleToggleSlotChange(e) {
316
- const t = e.currentTarget;
317
- this._hasToggle = t.assignedElements({ flatten: !0 }).length > 0, this._syncToggleButton();
318
- }
319
- _handleHeaderSlotChange(e) {
320
- const t = e.currentTarget;
321
- this._hasHeader = t.assignedElements({ flatten: !0 }).length > 0;
322
- }
323
- _handleFooterSlotChange(e) {
324
- const t = e.currentTarget;
325
- this._hasFooter = t.assignedElements({ flatten: !0 }).length > 0;
326
- }
327
- _handleToggleClick(e) {
328
- e.target?.closest("button") && this.toggleExpanded();
329
- }
330
- _getToggleButton() {
331
- const e = this.querySelector(':scope > [slot="toggle"]');
332
- return e instanceof HTMLButtonElement ? e : e?.querySelector(":scope > button") ?? null;
333
- }
334
- _syncToggleButton() {
335
- const e = this.querySelector(':scope > [slot="toggle"]'), t = this._getToggleButton();
336
- 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);
337
- }
338
- _setExpanded(e, t) {
339
- if (e === this.expanded)
340
- return;
341
- const a = this.expanded;
342
- this._expanded = e, this._expandedInitialized = !0, this.requestUpdate("expanded", a), t && this.dispatchEvent(
343
- new CustomEvent("rc-navigation-rail-toggle", {
344
- bubbles: !0,
345
- composed: !0,
346
- detail: { expanded: e }
347
- })
348
- );
349
- }
350
- }, n.styles = [f], n._styledRoots = /* @__PURE__ */ new Set(), n);
351
- r([
352
- l({ type: Boolean, reflect: !0 })
353
- ], i.prototype, "expanded", 1);
354
- r([
355
- l({ type: Boolean, attribute: "default-expanded" })
356
- ], i.prototype, "defaultExpanded", 1);
357
- r([
358
- l({ type: String, attribute: "active-selector" })
359
- ], i.prototype, "activeSelector", 2);
360
- r([
361
- l({ type: String, attribute: "indicator-target" })
362
- ], i.prototype, "indicatorTarget", 2);
363
- r([
364
- c()
365
- ], i.prototype, "_hasToggle", 2);
366
- r([
367
- c()
368
- ], i.prototype, "_hasHeader", 2);
369
- r([
370
- c()
371
- ], i.prototype, "_hasFooter", 2);
372
- r([
373
- g("slot:not([name])")
374
- ], i.prototype, "_$slot", 2);
375
- r([
376
- g('[part="nav"]')
377
- ], i.prototype, "_$nav", 2);
378
- r([
379
- g("#indicator")
380
- ], i.prototype, "_$indicator", 2);
381
- let E = i;
382
- export {
383
- E as R
384
- };
385
- //# sourceMappingURL=rc-navigation-rail-DOaY6_kH.js.map
package/dist/rc-navigation-rail-DOaY6_kH.js.map DELETED
@@ -1 +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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"}