@helixui/library 1.1.2-next.2 → 1.1.2-next.25
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.
- package/custom-elements.json +387 -405
- package/dist/components/hx-avatar/hx-avatar.styles.d.ts.map +1 -1
- package/dist/components/hx-avatar/index.js +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb-item.d.ts +1 -0
- package/dist/components/hx-breadcrumb/hx-breadcrumb-item.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts +10 -8
- package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/index.js +1 -1
- package/dist/components/hx-button/hx-button.d.ts +12 -6
- package/dist/components/hx-button/hx-button.d.ts.map +1 -1
- package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
- package/dist/components/hx-button/index.js +1 -1
- package/dist/components/hx-clinical-status/hx-clinical-status.d.ts +14 -6
- package/dist/components/hx-clinical-status/hx-clinical-status.d.ts.map +1 -1
- package/dist/components/hx-clinical-status/hx-clinical-status.styles.d.ts.map +1 -1
- package/dist/components/hx-clinical-status/index.d.ts +1 -1
- package/dist/components/hx-clinical-status/index.d.ts.map +1 -1
- package/dist/components/hx-clinical-status/index.js +1 -1
- package/dist/components/hx-menu/hx-menu-item.d.ts +5 -0
- package/dist/components/hx-menu/hx-menu-item.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu.d.ts +1 -0
- package/dist/components/hx-menu/hx-menu.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu.styles.d.ts.map +1 -1
- package/dist/components/hx-menu/index.js +1 -1
- package/dist/components/hx-nav/hx-nav.d.ts +10 -0
- package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
- package/dist/components/hx-nav/index.js +1 -1
- package/dist/components/hx-pagination/hx-pagination.d.ts.map +1 -1
- package/dist/components/hx-pagination/index.js +1 -1
- package/dist/components/hx-patient-banner/hx-patient-banner.d.ts +8 -0
- package/dist/components/hx-patient-banner/hx-patient-banner.d.ts.map +1 -1
- package/dist/components/hx-patient-banner/hx-patient-banner.styles.d.ts.map +1 -1
- package/dist/components/hx-patient-banner/index.js +1 -1
- package/dist/components/hx-phi-field/hx-phi-field.d.ts +27 -2
- package/dist/components/hx-phi-field/hx-phi-field.d.ts.map +1 -1
- package/dist/components/hx-phi-field/hx-phi-field.styles.d.ts.map +1 -1
- package/dist/components/hx-phi-field/index.js +1 -1
- package/dist/components/hx-select/hx-select.d.ts +1 -0
- package/dist/components/hx-select/hx-select.d.ts.map +1 -1
- package/dist/components/hx-select/hx-select.styles.d.ts.map +1 -1
- package/dist/components/hx-select/index.js +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.d.ts +5 -0
- package/dist/components/hx-side-nav/hx-nav-item.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
- package/dist/components/hx-side-nav/index.js +1 -1
- package/dist/components/hx-status-indicator/hx-status-indicator.d.ts +17 -1
- package/dist/components/hx-status-indicator/hx-status-indicator.d.ts.map +1 -1
- package/dist/components/hx-status-indicator/hx-status-indicator.styles.d.ts.map +1 -1
- package/dist/components/hx-status-indicator/index.js +1 -1
- package/dist/components/hx-steps/hx-step.d.ts +7 -0
- package/dist/components/hx-steps/hx-step.d.ts.map +1 -1
- package/dist/components/hx-steps/hx-steps.d.ts.map +1 -1
- package/dist/components/hx-steps/index.js +1 -1
- package/dist/components/hx-tabs/hx-tab.styles.d.ts.map +1 -1
- package/dist/components/hx-tabs/hx-tabs.d.ts +10 -0
- package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
- package/dist/components/hx-tabs/index.js +1 -1
- package/dist/components/hx-tree-view/hx-tree-item.d.ts +5 -0
- package/dist/components/hx-tree-view/hx-tree-item.d.ts.map +1 -1
- package/dist/components/hx-tree-view/hx-tree-view.d.ts +6 -0
- package/dist/components/hx-tree-view/hx-tree-view.d.ts.map +1 -1
- package/dist/components/hx-tree-view/index.js +1 -1
- package/dist/css/helix-all.css +202 -51
- package/dist/css/helix-core.css +52 -1
- package/dist/css/helix-feedback.css +33 -4
- package/dist/css/helix-forms.css +68 -41
- package/dist/css/helix-navigation.css +2 -0
- package/dist/css/hx-avatar.css +18 -1
- package/dist/css/hx-button.css +34 -0
- package/dist/css/hx-clinical-status.css +4 -2
- package/dist/css/hx-menu.css +2 -0
- package/dist/css/hx-patient-banner.css +31 -3
- package/dist/css/hx-phi-field.css +12 -0
- package/dist/css/hx-select.css +68 -41
- package/dist/css/hx-status-indicator.css +33 -4
- package/dist/css/index.css +1 -1
- package/dist/css/manifest.json +13 -5
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +15 -15
- package/dist/shared/{hx-avatar-7p1cj3lG.js → hx-avatar-CZfA9KEl.js} +27 -10
- package/dist/shared/hx-avatar-CZfA9KEl.js.map +1 -0
- package/dist/shared/{hx-breadcrumb-item-B2rjepqy.js → hx-breadcrumb-item-CObc-WJl.js} +8 -6
- package/dist/shared/hx-breadcrumb-item-CObc-WJl.js.map +1 -0
- package/dist/shared/{hx-button-6S3DwuIj.js → hx-button-CC1YH9RZ.js} +52 -12
- package/dist/shared/hx-button-CC1YH9RZ.js.map +1 -0
- package/dist/shared/{hx-clinical-status-De8yrA5I.js → hx-clinical-status-D6eaplvs.js} +5 -3
- package/dist/shared/hx-clinical-status-D6eaplvs.js.map +1 -0
- package/dist/shared/{hx-menu-divider-DR4G_rqw.js → hx-menu-divider-puPmRAdN.js} +40 -20
- package/dist/shared/hx-menu-divider-puPmRAdN.js.map +1 -0
- package/dist/shared/{hx-nav-D377Ngz4.js → hx-nav-CiyqaW2I.js} +112 -99
- package/dist/shared/hx-nav-CiyqaW2I.js.map +1 -0
- package/dist/shared/{hx-nav-item-CuGiJPAf.js → hx-nav-item-tM_6bolB.js} +132 -92
- package/dist/shared/hx-nav-item-tM_6bolB.js.map +1 -0
- package/dist/shared/{hx-pagination-DYhYPqDn.js → hx-pagination-Cb9UEWXz.js} +74 -66
- package/dist/shared/{hx-pagination-DYhYPqDn.js.map → hx-pagination-Cb9UEWXz.js.map} +1 -1
- package/dist/shared/{hx-patient-banner-BoJHddAL.js → hx-patient-banner-wk4qWmsH.js} +88 -47
- package/dist/shared/hx-patient-banner-wk4qWmsH.js.map +1 -0
- package/dist/shared/{hx-phi-field-EDWna59z.js → hx-phi-field-DX9z3nu0.js} +67 -33
- package/dist/shared/hx-phi-field-DX9z3nu0.js.map +1 -0
- package/dist/shared/{hx-select-4-nHL0vd.js → hx-select-BWzxWZs_.js} +82 -55
- package/dist/shared/hx-select-BWzxWZs_.js.map +1 -0
- package/dist/shared/{hx-status-indicator-4ClvA5mU.js → hx-status-indicator-Dl3Y34mc.js} +76 -35
- package/dist/shared/hx-status-indicator-Dl3Y34mc.js.map +1 -0
- package/dist/shared/{hx-step-DlANlr2A.js → hx-step-CmNwfcJx.js} +30 -26
- package/dist/shared/hx-step-CmNwfcJx.js.map +1 -0
- package/dist/shared/{hx-tab-panel-GGjk6Qg4.js → hx-tab-panel-Dnt8aA74.js} +89 -61
- package/dist/shared/hx-tab-panel-Dnt8aA74.js.map +1 -0
- package/dist/shared/{hx-tree-item-DTDIBRrI.js → hx-tree-item-C1PhX-HE.js} +50 -19
- package/dist/shared/hx-tree-item-C1PhX-HE.js.map +1 -0
- package/package.json +2 -2
- package/dist/shared/hx-avatar-7p1cj3lG.js.map +0 -1
- package/dist/shared/hx-breadcrumb-item-B2rjepqy.js.map +0 -1
- package/dist/shared/hx-button-6S3DwuIj.js.map +0 -1
- package/dist/shared/hx-clinical-status-De8yrA5I.js.map +0 -1
- package/dist/shared/hx-menu-divider-DR4G_rqw.js.map +0 -1
- package/dist/shared/hx-nav-D377Ngz4.js.map +0 -1
- package/dist/shared/hx-nav-item-CuGiJPAf.js.map +0 -1
- package/dist/shared/hx-patient-banner-BoJHddAL.js.map +0 -1
- package/dist/shared/hx-phi-field-EDWna59z.js.map +0 -1
- package/dist/shared/hx-select-4-nHL0vd.js.map +0 -1
- package/dist/shared/hx-status-indicator-4ClvA5mU.js.map +0 -1
- package/dist/shared/hx-step-DlANlr2A.js.map +0 -1
- package/dist/shared/hx-tab-panel-GGjk6Qg4.js.map +0 -1
- package/dist/shared/hx-tree-item-DTDIBRrI.js.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as
|
|
3
|
-
import { tokenStyles as
|
|
4
|
-
const
|
|
1
|
+
import { css as A, LitElement as $, html as c, nothing as h } from "lit";
|
|
2
|
+
import { property as p, customElement as S, state as E } from "lit/decorators.js";
|
|
3
|
+
import { tokenStyles as I } from "@helixui/tokens/lit";
|
|
4
|
+
const T = A`
|
|
5
5
|
:host {
|
|
6
6
|
display: block;
|
|
7
7
|
height: 100%;
|
|
@@ -151,12 +151,12 @@ const k = u`
|
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
153
|
`;
|
|
154
|
-
var
|
|
155
|
-
for (var
|
|
156
|
-
(n = e[
|
|
157
|
-
return
|
|
154
|
+
var D = Object.defineProperty, N = Object.getOwnPropertyDescriptor, g = (e, a, o, i) => {
|
|
155
|
+
for (var t = i > 1 ? void 0 : i ? N(a, o) : a, l = e.length - 1, n; l >= 0; l--)
|
|
156
|
+
(n = e[l]) && (t = (i ? n(a, o, t) : n(t)) || t);
|
|
157
|
+
return i && t && D(a, o, t), t;
|
|
158
158
|
};
|
|
159
|
-
let
|
|
159
|
+
let x = class extends $ {
|
|
160
160
|
constructor() {
|
|
161
161
|
super(...arguments), this.collapsed = !1, this.label = "Main Navigation";
|
|
162
162
|
}
|
|
@@ -172,12 +172,12 @@ let p = class extends _ {
|
|
|
172
172
|
*/
|
|
173
173
|
/** @internal */
|
|
174
174
|
_propagateCollapsedToChildren() {
|
|
175
|
-
var
|
|
176
|
-
const e = (
|
|
175
|
+
var o;
|
|
176
|
+
const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot:not([name])");
|
|
177
177
|
if (!e) return;
|
|
178
|
-
const a = e.assignedElements({ flatten: !0 }).filter((
|
|
179
|
-
for (const
|
|
180
|
-
|
|
178
|
+
const a = e.assignedElements({ flatten: !0 }).filter((i) => i.tagName.toLowerCase() === "hx-nav-item");
|
|
179
|
+
for (const i of a)
|
|
180
|
+
i instanceof HTMLElement && (this.collapsed ? i.setAttribute("data-collapsed", "") : i.removeAttribute("data-collapsed"));
|
|
181
181
|
}
|
|
182
182
|
/**
|
|
183
183
|
* Handles the default slot's slotchange event so that if items are added
|
|
@@ -196,28 +196,67 @@ let p = class extends _ {
|
|
|
196
196
|
*/
|
|
197
197
|
/** @internal */
|
|
198
198
|
_handleKeydown(e) {
|
|
199
|
-
var
|
|
200
|
-
if (
|
|
201
|
-
const
|
|
202
|
-
if (!
|
|
203
|
-
const
|
|
204
|
-
(
|
|
199
|
+
var b, w, y, C, k;
|
|
200
|
+
if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End"].includes(e.key)) return;
|
|
201
|
+
const o = (b = this.shadowRoot) == null ? void 0 : b.querySelector("slot:not([name])");
|
|
202
|
+
if (!o) return;
|
|
203
|
+
const i = o.assignedElements({ flatten: !0 }).filter(
|
|
204
|
+
(r) => r.tagName.toLowerCase() === "hx-nav-item" && !r.hasAttribute("disabled")
|
|
205
205
|
);
|
|
206
|
+
if (i.length === 0) return;
|
|
207
|
+
const t = [];
|
|
208
|
+
for (const r of i)
|
|
209
|
+
if (t.push(r), r.hasAttribute("expanded")) {
|
|
210
|
+
const s = (w = r.shadowRoot) == null ? void 0 : w.querySelector('slot[name="children"]');
|
|
211
|
+
if (s) {
|
|
212
|
+
const u = s.assignedElements({ flatten: !0 }).filter(
|
|
213
|
+
(m) => m.tagName.toLowerCase() === "hx-nav-item" && !m.hasAttribute("disabled")
|
|
214
|
+
);
|
|
215
|
+
t.push(...u);
|
|
216
|
+
}
|
|
217
|
+
}
|
|
206
218
|
if (t.length === 0) return;
|
|
207
|
-
const
|
|
208
|
-
let
|
|
209
|
-
for (let
|
|
210
|
-
const
|
|
211
|
-
if (
|
|
212
|
-
|
|
219
|
+
const l = document.activeElement;
|
|
220
|
+
let n = -1;
|
|
221
|
+
for (let r = 0; r < t.length; r++) {
|
|
222
|
+
const s = t[r];
|
|
223
|
+
if (s && (s === l || s.contains(l) || ((y = s.shadowRoot) == null ? void 0 : y.contains(l)) === !0)) {
|
|
224
|
+
n = r;
|
|
213
225
|
break;
|
|
214
226
|
}
|
|
215
227
|
}
|
|
228
|
+
if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
|
|
229
|
+
e.preventDefault();
|
|
230
|
+
const r = n >= 0 ? t[n] : null;
|
|
231
|
+
if (!r) return;
|
|
232
|
+
if (e.key === "ArrowRight") {
|
|
233
|
+
if (r.hasAttribute("expanded") === !1 && r.querySelector('[slot="children"]'))
|
|
234
|
+
r.setAttribute("expanded", ""), r.expanded = !0;
|
|
235
|
+
else if (r.hasAttribute("expanded")) {
|
|
236
|
+
const s = (C = r.shadowRoot) == null ? void 0 : C.querySelector('slot[name="children"]');
|
|
237
|
+
if (s) {
|
|
238
|
+
const u = s.assignedElements({ flatten: !0 }).find(
|
|
239
|
+
(m) => m.tagName.toLowerCase() === "hx-nav-item" && !m.hasAttribute("disabled")
|
|
240
|
+
);
|
|
241
|
+
if (u) {
|
|
242
|
+
u.focus();
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
} else if (r.hasAttribute("expanded"))
|
|
248
|
+
r.removeAttribute("expanded"), r.expanded = !1;
|
|
249
|
+
else {
|
|
250
|
+
const s = r.closest("hx-nav-item:not(:scope)") ?? ((k = r.parentElement) == null ? void 0 : k.closest("hx-nav-item")) ?? null;
|
|
251
|
+
s && !s.hasAttribute("disabled") && s.focus();
|
|
252
|
+
}
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
216
255
|
e.preventDefault();
|
|
217
|
-
let
|
|
218
|
-
e.key === "ArrowDown" ?
|
|
219
|
-
const
|
|
220
|
-
|
|
256
|
+
let f;
|
|
257
|
+
e.key === "ArrowDown" ? f = n < t.length - 1 ? n + 1 : 0 : e.key === "ArrowUp" ? f = n > 0 ? n - 1 : t.length - 1 : e.key === "Home" ? f = 0 : f = t.length - 1;
|
|
258
|
+
const _ = t[f];
|
|
259
|
+
_ && _.focus();
|
|
221
260
|
}
|
|
222
261
|
// ─── Event Handling ───
|
|
223
262
|
/** @internal */
|
|
@@ -239,14 +278,14 @@ let p = class extends _ {
|
|
|
239
278
|
// ─── Render ───
|
|
240
279
|
/** @internal */
|
|
241
280
|
_renderToggleIcon() {
|
|
242
|
-
return
|
|
281
|
+
return c`<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
243
282
|
<path
|
|
244
283
|
d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
|
|
245
284
|
/>
|
|
246
285
|
</svg>`;
|
|
247
286
|
}
|
|
248
287
|
render() {
|
|
249
|
-
return
|
|
288
|
+
return c`
|
|
250
289
|
<nav part="nav" class="side-nav" aria-label=${this.label}>
|
|
251
290
|
<div part="header" class="side-nav__header">
|
|
252
291
|
<slot name="header"></slot>
|
|
@@ -272,17 +311,17 @@ let p = class extends _ {
|
|
|
272
311
|
`;
|
|
273
312
|
}
|
|
274
313
|
};
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
],
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
],
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
],
|
|
285
|
-
const
|
|
314
|
+
x.styles = [I, T];
|
|
315
|
+
g([
|
|
316
|
+
p({ type: Boolean, reflect: !0 })
|
|
317
|
+
], x.prototype, "collapsed", 2);
|
|
318
|
+
g([
|
|
319
|
+
p({ type: String })
|
|
320
|
+
], x.prototype, "label", 2);
|
|
321
|
+
x = g([
|
|
322
|
+
S("hx-side-nav")
|
|
323
|
+
], x);
|
|
324
|
+
const L = A`
|
|
286
325
|
:host {
|
|
287
326
|
display: block;
|
|
288
327
|
/* The host background must be a concrete color so that axe-core can
|
|
@@ -522,21 +561,21 @@ const $ = u`
|
|
|
522
561
|
}
|
|
523
562
|
}
|
|
524
563
|
`;
|
|
525
|
-
var
|
|
526
|
-
for (var
|
|
527
|
-
(n = e[
|
|
528
|
-
return
|
|
564
|
+
var j = Object.defineProperty, B = Object.getOwnPropertyDescriptor, v = (e, a, o, i) => {
|
|
565
|
+
for (var t = i > 1 ? void 0 : i ? B(a, o) : a, l = e.length - 1, n; l >= 0; l--)
|
|
566
|
+
(n = e[l]) && (t = (i ? n(a, o, t) : n(t)) || t);
|
|
567
|
+
return i && t && j(a, o, t), t;
|
|
529
568
|
};
|
|
530
|
-
let
|
|
569
|
+
let d = class extends $ {
|
|
531
570
|
constructor() {
|
|
532
|
-
super(
|
|
571
|
+
super(), this.href = "", this.active = !1, this.expanded = !1, this.disabled = !1, this._hasChildren = !1, this._isCollapsed = !1, this._tooltipId = `nav-item-tooltip-${++d._instanceCounter}`;
|
|
533
572
|
}
|
|
534
573
|
// ─── Attribute Observer ───
|
|
535
574
|
static get observedAttributes() {
|
|
536
575
|
return [...super.observedAttributes, "data-collapsed"];
|
|
537
576
|
}
|
|
538
|
-
attributeChangedCallback(e, a,
|
|
539
|
-
super.attributeChangedCallback(e, a,
|
|
577
|
+
attributeChangedCallback(e, a, o) {
|
|
578
|
+
super.attributeChangedCallback(e, a, o), e === "data-collapsed" && (this._isCollapsed = o !== null);
|
|
540
579
|
}
|
|
541
580
|
// ─── Public API ───
|
|
542
581
|
/**
|
|
@@ -546,8 +585,8 @@ let s = class extends _ {
|
|
|
546
585
|
* direct shadowRoot queries.
|
|
547
586
|
*/
|
|
548
587
|
focus(e) {
|
|
549
|
-
var
|
|
550
|
-
const a = (
|
|
588
|
+
var o;
|
|
589
|
+
const a = (o = this.shadowRoot) == null ? void 0 : o.querySelector('[part="link"]');
|
|
551
590
|
a ? a.focus(e) : super.focus(e);
|
|
552
591
|
}
|
|
553
592
|
// ─── Slot Change Handler ───
|
|
@@ -570,7 +609,7 @@ let s = class extends _ {
|
|
|
570
609
|
}
|
|
571
610
|
/** @internal */
|
|
572
611
|
_renderExpandArrow() {
|
|
573
|
-
return
|
|
612
|
+
return c`<span class="nav-item__arrow" aria-hidden="true">
|
|
574
613
|
<svg viewBox="0 0 20 20">
|
|
575
614
|
<path
|
|
576
615
|
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
|
|
@@ -580,7 +619,7 @@ let s = class extends _ {
|
|
|
580
619
|
}
|
|
581
620
|
// ─── Render ───
|
|
582
621
|
render() {
|
|
583
|
-
const e = this._getDirectText(), a =
|
|
622
|
+
const e = this._getDirectText(), a = c`
|
|
584
623
|
<span part="icon" class="nav-item__icon">
|
|
585
624
|
<slot name="icon"></slot>
|
|
586
625
|
</span>
|
|
@@ -590,32 +629,32 @@ let s = class extends _ {
|
|
|
590
629
|
<span part="badge" class="nav-item__badge">
|
|
591
630
|
<slot name="badge"></slot>
|
|
592
631
|
</span>
|
|
593
|
-
${this._hasChildren ? this._renderExpandArrow() :
|
|
594
|
-
${this._isCollapsed ?
|
|
595
|
-
`,
|
|
632
|
+
${this._hasChildren ? this._renderExpandArrow() : h}
|
|
633
|
+
${this._isCollapsed ? c`<span id=${this._tooltipId} class="nav-item__tooltip" role="tooltip">${e}</span>` : h}
|
|
634
|
+
`, o = this.href && !this._hasChildren ? c`<a
|
|
596
635
|
part="link"
|
|
597
636
|
class="nav-item__link"
|
|
598
637
|
href=${this.href}
|
|
599
|
-
aria-current=${this.active ? "page" :
|
|
600
|
-
aria-disabled=${this.disabled ? "true" :
|
|
601
|
-
aria-describedby=${this._isCollapsed ?
|
|
638
|
+
aria-current=${this.active ? "page" : h}
|
|
639
|
+
aria-disabled=${this.disabled ? "true" : h}
|
|
640
|
+
aria-describedby=${this._isCollapsed ? this._tooltipId : h}
|
|
602
641
|
tabindex=${this.disabled ? "-1" : "0"}
|
|
603
642
|
>
|
|
604
643
|
${a}
|
|
605
|
-
</a>` :
|
|
644
|
+
</a>` : c`<button
|
|
606
645
|
part="link"
|
|
607
646
|
class="nav-item__link"
|
|
608
|
-
aria-disabled=${this.disabled ? "true" :
|
|
609
|
-
aria-expanded=${this._hasChildren ? String(this.expanded) :
|
|
610
|
-
aria-describedby=${this._isCollapsed ?
|
|
647
|
+
aria-disabled=${this.disabled ? "true" : h}
|
|
648
|
+
aria-expanded=${this._hasChildren ? String(this.expanded) : h}
|
|
649
|
+
aria-describedby=${this._isCollapsed ? this._tooltipId : h}
|
|
611
650
|
tabindex=${this.disabled ? "-1" : "0"}
|
|
612
651
|
@click=${this._handleToggle}
|
|
613
652
|
>
|
|
614
653
|
${a}
|
|
615
654
|
</button>`;
|
|
616
|
-
return
|
|
655
|
+
return c`
|
|
617
656
|
<div class="nav-item">
|
|
618
|
-
${
|
|
657
|
+
${o}
|
|
619
658
|
<div part="children" class="nav-item__children" role="group">
|
|
620
659
|
<div class="nav-item__children-inner">
|
|
621
660
|
<slot name="children" @slotchange=${this._onChildrenSlotChange}></slot>
|
|
@@ -625,30 +664,31 @@ let s = class extends _ {
|
|
|
625
664
|
`;
|
|
626
665
|
}
|
|
627
666
|
};
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
667
|
+
d.styles = [I, L];
|
|
668
|
+
d._instanceCounter = 0;
|
|
669
|
+
v([
|
|
670
|
+
p({ type: String })
|
|
671
|
+
], d.prototype, "href", 2);
|
|
672
|
+
v([
|
|
673
|
+
p({ type: Boolean, reflect: !0 })
|
|
674
|
+
], d.prototype, "active", 2);
|
|
675
|
+
v([
|
|
676
|
+
p({ type: Boolean, reflect: !0 })
|
|
677
|
+
], d.prototype, "expanded", 2);
|
|
678
|
+
v([
|
|
679
|
+
p({ type: Boolean, reflect: !0 })
|
|
680
|
+
], d.prototype, "disabled", 2);
|
|
681
|
+
v([
|
|
682
|
+
E()
|
|
683
|
+
], d.prototype, "_hasChildren", 2);
|
|
684
|
+
v([
|
|
685
|
+
E()
|
|
686
|
+
], d.prototype, "_isCollapsed", 2);
|
|
687
|
+
d = v([
|
|
688
|
+
S("hx-nav-item")
|
|
689
|
+
], d);
|
|
650
690
|
export {
|
|
651
|
-
|
|
652
|
-
|
|
691
|
+
d as H,
|
|
692
|
+
x as a
|
|
653
693
|
};
|
|
654
|
-
//# sourceMappingURL=hx-nav-item-
|
|
694
|
+
//# sourceMappingURL=hx-nav-item-tM_6bolB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hx-nav-item-tM_6bolB.js","sources":["../../src/components/hx-side-nav/hx-side-nav.styles.ts","../../src/components/hx-side-nav/hx-side-nav.ts","../../src/components/hx-side-nav/hx-nav-item.styles.ts","../../src/components/hx-side-nav/hx-nav-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSideNavStyles = css`\n :host {\n display: block;\n height: 100%;\n /* Mirror the nav background and text on the host so slotted light-DOM\n content (header, footer slots) inherits the correct dark surface color.\n Without this, axe-core cannot resolve the background for slotted nodes\n and evaluates their text against the page white background, producing\n false-positive color-contrast violations (WCAG 2.1 AA). */\n background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));\n color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Nav Container ─── */\n\n .side-nav {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: var(--hx-side-nav-width, 16rem);\n background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));\n color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));\n transition: width var(--hx-transition-normal, 300ms) ease;\n overflow: hidden;\n border-inline-end: var(--hx-border-width-thin, 1px) solid\n var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));\n }\n\n /* ─── Collapsed State ─── */\n\n :host([collapsed]) .side-nav {\n width: var(--hx-side-nav-collapsed-width, 3.5rem);\n }\n\n /* ─── Header ─── */\n\n .side-nav__header {\n display: flex;\n align-items: center;\n padding: var(--hx-side-nav-header-padding, var(--hx-space-4, 1rem));\n flex-shrink: 0;\n min-height: var(--hx-space-14, 3.5rem);\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));\n overflow: hidden;\n }\n\n :host([collapsed]) .side-nav__header {\n justify-content: center;\n padding: var(--hx-space-3, 0.75rem);\n }\n\n /* ─── Body ─── */\n\n .side-nav__body {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: var(--hx-space-2, 0.5rem) 0;\n }\n\n /* ─── Footer ─── */\n\n .side-nav__footer {\n display: flex;\n align-items: center;\n padding: var(--hx-side-nav-footer-padding, var(--hx-space-4, 1rem));\n flex-shrink: 0;\n min-height: var(--hx-space-14, 3.5rem);\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));\n overflow: hidden;\n }\n\n :host([collapsed]) .side-nav__footer {\n justify-content: center;\n padding: var(--hx-space-3, 0.75rem);\n }\n\n /* ─── Toggle Button ─── */\n\n .side-nav__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--hx-space-8, 2rem);\n height: var(--hx-space-8, 2rem);\n margin-inline-start: auto;\n flex-shrink: 0;\n padding: 0;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-side-nav-toggle-color, var(--hx-color-neutral-400, #94a3b8));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms) ease,\n color var(--hx-transition-fast, 150ms) ease;\n }\n\n .side-nav__toggle:hover {\n background-color: var(\n --hx-overlay-white-10,\n rgba(255, 255, 255, 0.1)\n ); /* fallback for browsers without color-mix() */\n color: var(--hx-color-neutral-100, #f1f5f9);\n }\n\n @supports (color: color-mix(in srgb, red 50%, blue)) {\n .side-nav__toggle:hover {\n background-color: color-mix(in srgb, currentColor 15%, transparent);\n }\n }\n\n .side-nav__toggle:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .side-nav__toggle svg {\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n fill: currentColor;\n flex-shrink: 0;\n transition: transform var(--hx-transition-normal, 300ms) ease;\n }\n\n :host([collapsed]) .side-nav__toggle svg {\n transform: rotate(180deg);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .side-nav {\n transition: none;\n }\n\n .side-nav__toggle {\n transition: none;\n }\n\n .side-nav__toggle svg {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSideNavStyles } from './hx-side-nav.styles.js';\n\n/**\n * A collapsible left-side navigation panel with nested menu item support.\n * Designed for clinical portals, admin dashboards, and department navigation.\n *\n * @summary Collapsible side navigation panel for enterprise healthcare applications.\n *\n * @tag hx-side-nav\n *\n * @slot - Default slot for hx-nav-item children.\n * @slot header - Logo or branding content.\n * @slot footer - User profile or settings content.\n *\n * @fires {CustomEvent<{ collapsed: boolean }>} hx-collapse - Dispatched when the nav collapses to icon-only mode.\n * @fires {CustomEvent<{ collapsed: boolean }>} hx-expand - Dispatched when the nav expands to full width.\n *\n * @csspart nav - The outer nav element.\n * @csspart header - The header section.\n * @csspart body - The scrollable body section.\n * @csspart footer - The footer section.\n * @csspart toggle - The collapse/expand toggle button.\n *\n * @cssprop [--hx-side-nav-width=16rem] - Full expanded width.\n * @cssprop [--hx-side-nav-collapsed-width=3.5rem] - Collapsed icon-only width.\n * @cssprop [--hx-side-nav-bg=var(--hx-color-neutral-900)] - Background color.\n * @cssprop [--hx-side-nav-color=var(--hx-color-neutral-100)] - Text color.\n * @cssprop [--hx-side-nav-border-color=var(--hx-color-neutral-700)] - Border color.\n * @cssprop [--hx-side-nav-header-padding=var(--hx-space-4)] - Header padding.\n * @cssprop [--hx-side-nav-footer-padding=var(--hx-space-4)] - Footer padding.\n * @cssprop [--hx-side-nav-toggle-color=var(--hx-color-neutral-400)] - Toggle button icon color.\n */\n@customElement('hx-side-nav')\nexport class HelixSideNav extends LitElement {\n static override styles = [tokenStyles, helixSideNavStyles];\n\n // ─── Properties ───\n\n /**\n * When true, the nav collapses to show icons only.\n * @attr collapsed\n */\n @property({ type: Boolean, reflect: true })\n collapsed = false;\n\n /**\n * The accessible label for the nav landmark.\n * @attr label\n */\n @property({ type: String })\n label = 'Main Navigation';\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('collapsed')) {\n this._propagateCollapsedToChildren();\n }\n }\n\n // ─── Collapsed State Propagation ───\n\n /**\n * Propagates the collapsed state to all slotted hx-nav-item children by\n * setting or removing the `data-collapsed` attribute. This allows child\n * items to respond to collapsed mode via their CSS selectors.\n */\n /** @internal */\n private _propagateCollapsedToChildren(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (!slot) return;\n\n const navItems = slot\n .assignedElements({ flatten: true })\n .filter((el) => el.tagName.toLowerCase() === 'hx-nav-item');\n\n for (const item of navItems) {\n if (!(item instanceof HTMLElement)) continue;\n if (this.collapsed) {\n item.setAttribute('data-collapsed', '');\n } else {\n item.removeAttribute('data-collapsed');\n }\n }\n }\n\n /**\n * Handles the default slot's slotchange event so that if items are added\n * after initial render, they immediately receive the correct collapsed state.\n */\n /** @internal */\n private _onDefaultSlotChange(): void {\n this._propagateCollapsedToChildren();\n }\n\n // ─── Keyboard Navigation ───\n\n /**\n * Implements roving tabindex-style ArrowUp/ArrowDown keyboard navigation\n * among direct hx-nav-item children in the body slot. Disabled items are\n * skipped. Focus is applied to the interactive element inside the shadow DOM\n * of each item (anchor or button with part=\"link\").\n */\n /** @internal */\n private _handleKeydown(e: KeyboardEvent): void {\n const validKeys = ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Home', 'End'];\n if (!validKeys.includes(e.key)) return;\n\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (!slot) return;\n\n const topLevelItems = slot\n .assignedElements({ flatten: true })\n .filter(\n (el): el is HTMLElement =>\n el.tagName.toLowerCase() === 'hx-nav-item' && !el.hasAttribute('disabled'),\n );\n\n if (topLevelItems.length === 0) return;\n\n // Build a flattened list of navigable items: direct children plus visible\n // child items from expanded parent items (per ARIA APG tree pattern).\n const navItems: HTMLElement[] = [];\n for (const item of topLevelItems) {\n navItems.push(item);\n // If this item is expanded, include its non-disabled children\n if (item.hasAttribute('expanded')) {\n const childrenSlot =\n item.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"children\"]');\n if (childrenSlot) {\n const childItems = childrenSlot\n .assignedElements({ flatten: true })\n .filter(\n (el): el is HTMLElement =>\n el.tagName.toLowerCase() === 'hx-nav-item' && !el.hasAttribute('disabled'),\n );\n navItems.push(...childItems);\n }\n }\n }\n\n if (navItems.length === 0) return;\n\n // Find which item currently contains focus\n const activeEl = document.activeElement;\n let currentIndex = -1;\n for (let i = 0; i < navItems.length; i++) {\n const item = navItems[i];\n if (!item) continue;\n if (\n item === activeEl ||\n item.contains(activeEl) ||\n item.shadowRoot?.contains(activeEl) === true\n ) {\n currentIndex = i;\n break;\n }\n }\n\n // Handle ArrowRight/ArrowLeft for expand/collapse (ARIA APG tree pattern)\n if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {\n e.preventDefault();\n const currentItem = currentIndex >= 0 ? navItems[currentIndex] : null;\n if (!currentItem) return;\n\n if (e.key === 'ArrowRight') {\n // If the item has children and is collapsed, expand it\n if (\n currentItem.hasAttribute('expanded') === false &&\n currentItem.querySelector('[slot=\"children\"]')\n ) {\n currentItem.setAttribute('expanded', '');\n (currentItem as HTMLElement & { expanded?: boolean }).expanded = true;\n } else if (currentItem.hasAttribute('expanded')) {\n // Already expanded: move focus to first child item\n const childrenSlot =\n currentItem.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"children\"]');\n if (childrenSlot) {\n const firstChild = childrenSlot\n .assignedElements({ flatten: true })\n .find(\n (el): el is HTMLElement =>\n el.tagName.toLowerCase() === 'hx-nav-item' && !el.hasAttribute('disabled'),\n );\n if (firstChild) {\n firstChild.focus();\n return;\n }\n }\n }\n } else {\n // ArrowLeft: if expanded, collapse; if collapsed or non-expandable, find parent\n if (currentItem.hasAttribute('expanded')) {\n currentItem.removeAttribute('expanded');\n (currentItem as HTMLElement & { expanded?: boolean }).expanded = false;\n } else {\n // Move focus to parent item if this item is a child in another item's slot\n const parentNavItem =\n currentItem.closest<HTMLElement>('hx-nav-item:not(:scope)') ??\n currentItem.parentElement?.closest<HTMLElement>('hx-nav-item') ??\n null;\n if (parentNavItem && !parentNavItem.hasAttribute('disabled')) {\n parentNavItem.focus();\n }\n }\n }\n return;\n }\n\n e.preventDefault();\n\n let nextIndex: number;\n if (e.key === 'ArrowDown') {\n nextIndex = currentIndex < navItems.length - 1 ? currentIndex + 1 : 0;\n } else if (e.key === 'ArrowUp') {\n nextIndex = currentIndex > 0 ? currentIndex - 1 : navItems.length - 1;\n } else if (e.key === 'Home') {\n nextIndex = 0;\n } else {\n nextIndex = navItems.length - 1;\n }\n\n const targetItem = navItems[nextIndex];\n if (!targetItem) return;\n // WCAG 2.1.1: call the public focus() method on the nav item rather than\n // piercing its Shadow DOM directly. hx-nav-item.focus() delegates to the\n // internal [part=\"link\"] element, preserving shadow encapsulation.\n targetItem.focus();\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleToggle(): void {\n this.collapsed = !this.collapsed;\n\n if (this.collapsed) {\n /**\n * Dispatched when the nav collapses to icon-only mode.\n * @event hx-collapse\n */\n this.dispatchEvent(\n new CustomEvent<{ collapsed: boolean }>('hx-collapse', {\n bubbles: true,\n composed: true,\n detail: { collapsed: true },\n }),\n );\n } else {\n /**\n * Dispatched when the nav expands to full width.\n * @event hx-expand\n */\n this.dispatchEvent(\n new CustomEvent<{ collapsed: boolean }>('hx-expand', {\n bubbles: true,\n composed: true,\n detail: { collapsed: false },\n }),\n );\n }\n }\n\n // ─── Render ───\n\n /** @internal */\n private _renderToggleIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n />\n </svg>`;\n }\n\n override render() {\n return html`\n <nav part=\"nav\" class=\"side-nav\" aria-label=${this.label}>\n <div part=\"header\" class=\"side-nav__header\">\n <slot name=\"header\"></slot>\n <button\n part=\"toggle\"\n class=\"side-nav__toggle\"\n aria-label=${this.collapsed ? 'Expand navigation' : 'Collapse navigation'}\n aria-expanded=${!this.collapsed}\n @click=${this._handleToggle}\n >\n ${this._renderToggleIcon()}\n </button>\n </div>\n\n <div part=\"body\" class=\"side-nav__body\" id=\"side-nav-body\" @keydown=${this._handleKeydown}>\n <slot @slotchange=${this._onDefaultSlotChange}></slot>\n </div>\n\n <div part=\"footer\" class=\"side-nav__footer\">\n <slot name=\"footer\"></slot>\n </div>\n </nav>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-side-nav': HelixSideNav;\n }\n}\n\nexport type { HelixSideNav as HxSideNav };\n","import { css } from 'lit';\n\nexport const helixNavItemStyles = css`\n :host {\n display: block;\n /* The host background must be a concrete color so that axe-core can\n resolve text contrast ratios for shadow-DOM content correctly.\n WCAG 2.1 AA: neutral-300 (#cbd5e1) on neutral-900 (#0f172a) = 12.02:1. */\n background-color: var(--hx-nav-item-host-bg, var(--hx-color-neutral-900, #0f172a));\n color: var(--hx-nav-item-color, var(--hx-color-neutral-300, #cbd5e1));\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Nav Item ─── */\n\n .nav-item {\n display: flex;\n flex-direction: column;\n }\n\n /* ─── Link / Button ─── */\n\n .nav-item__link {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));\n min-height: var(--hx-space-10, 2.5rem);\n text-decoration: none;\n color: var(--hx-nav-item-color, var(--hx-color-neutral-300, #cbd5e1));\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n margin: 0 var(--hx-space-2, 0.5rem);\n transition:\n background-color var(--hx-transition-fast, 150ms) ease,\n color var(--hx-transition-fast, 150ms) ease;\n white-space: nowrap;\n overflow: hidden;\n cursor: pointer;\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n line-height: var(--hx-line-height-normal, 1.5);\n position: relative;\n border: none;\n background: transparent;\n width: calc(100% - var(--hx-space-4, 1rem));\n text-align: start;\n }\n\n /* Link variant */\n a.nav-item__link {\n display: flex;\n }\n\n .nav-item__link:hover {\n background-color: var(\n --hx-nav-item-hover-bg,\n var(--hx-overlay-white-8, rgba(255, 255, 255, 0.08))\n ); /* fallback for browsers without color-mix() */\n color: var(--hx-nav-item-hover-color, var(--hx-color-neutral-100, #f1f5f9));\n }\n\n @supports (color: color-mix(in srgb, red 50%, blue)) {\n .nav-item__link:hover {\n background-color: var(\n --hx-nav-item-hover-bg,\n color-mix(in srgb, currentColor 10%, transparent)\n );\n }\n }\n\n .nav-item__link:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Active State ─── */\n\n :host([active]) .nav-item__link {\n /* neutral-50 (#f8fafc) on primary-600 (#1d4ed8) = 6.41:1 — WCAG AA ✓ */\n background-color: var(--hx-nav-item-active-bg, var(--hx-color-primary-600, #1d4ed8));\n color: var(--hx-nav-item-active-color, var(--hx-color-neutral-50, #f8fafc));\n }\n\n :host([active]) .nav-item__link:hover {\n /* neutral-50 (#f8fafc) on primary-700 (#1e40af) = 8.34:1 — WCAG AA ✓ */\n background-color: var(--hx-nav-item-active-hover-bg, var(--hx-color-primary-700, #1e40af));\n }\n\n /* ─── Disabled State ─── */\n\n :host([disabled]) .nav-item__link {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n /* ─── Icon ─── */\n\n .nav-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n }\n\n /* ─── Label ─── */\n\n .nav-item__label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: opacity var(--hx-transition-fast, 150ms) ease;\n }\n\n /* ─── Badge ─── */\n\n .nav-item__badge {\n margin-inline-start: auto;\n flex-shrink: 0;\n }\n\n /* ─── Expand Arrow ─── */\n\n .nav-item__arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-inline-start: auto;\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n transition: transform var(--hx-transition-normal, 300ms) ease;\n }\n\n .nav-item__arrow svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n fill: currentColor;\n }\n\n :host([expanded]) .nav-item__arrow {\n transform: rotate(90deg);\n }\n\n /* ─── Children (sub-nav) ─── */\n\n .nav-item__children {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--hx-transition-normal, 300ms ease);\n overflow: hidden;\n }\n\n :host([expanded]) .nav-item__children {\n grid-template-rows: 1fr;\n }\n\n .nav-item__children-inner {\n overflow: hidden;\n min-height: 0;\n display: flex;\n flex-direction: column;\n padding-inline-start: var(--hx-space-6, 1.5rem);\n }\n\n /* ─── Tooltip (collapsed mode) ─── */\n\n .nav-item__tooltip {\n position: absolute;\n left: calc(100% + var(--hx-space-2, 0.5rem));\n top: 50%;\n transform: translateY(-50%);\n /* neutral-100 (#f1f5f9) on neutral-800 (#1e293b) = 13.35:1 — WCAG AA ✓ */\n background-color: var(--hx-color-neutral-800, #1e293b);\n color: var(--hx-color-neutral-100, #f1f5f9);\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n font-size: var(--hx-font-size-xs, 0.75rem);\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--hx-transition-fast, 150ms) ease;\n z-index: var(--hx-z-index-tooltip, 1600);\n box-shadow: var(--hx-shadow-md, 0 2px 8px rgb(0 0 0 / 0.2));\n }\n\n :host([data-collapsed]) .nav-item__link:hover .nav-item__tooltip,\n :host([data-collapsed]) .nav-item__link:focus-visible .nav-item__tooltip {\n opacity: 1;\n }\n\n /* ─── Collapsed host state (propagated from parent) ─── */\n\n :host([data-collapsed]) .nav-item__label {\n width: 0;\n overflow: hidden;\n opacity: 0;\n }\n\n :host([data-collapsed]) .nav-item__badge {\n display: none;\n }\n\n :host([data-collapsed]) .nav-item__arrow {\n display: none;\n }\n\n :host([data-collapsed]) .nav-item__children {\n display: none !important;\n }\n\n :host([data-collapsed]) .nav-item__link {\n justify-content: center;\n margin: 0 var(--hx-space-1, 0.25rem);\n width: calc(100% - var(--hx-space-2, 0.5rem));\n padding: var(--hx-space-2, 0.5rem);\n position: relative;\n overflow: visible;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .nav-item__link,\n .nav-item__label,\n .nav-item__arrow,\n .nav-item__children,\n .nav-item__tooltip {\n transition: none;\n }\n\n :host([expanded]) .nav-item__children {\n grid-template-rows: 1fr;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixNavItemStyles } from './hx-nav-item.styles.js';\n\n/**\n * A navigation item for use inside hx-side-nav.\n * Supports icons, badges, sub-navigation, and active/disabled states.\n *\n * @summary Navigation item for hx-side-nav with support for icons, badges, and nested children.\n *\n * @tag hx-nav-item\n *\n * @slot - Default slot for item label text.\n * @slot icon - Icon to display before the label.\n * @slot badge - Badge content (e.g., notification count).\n * @slot children - Nested hx-nav-item children for sub-navigation.\n *\n * @csspart link - The anchor or button element.\n * @csspart icon - The icon container.\n * @csspart label - The label container.\n * @csspart badge - The badge container.\n * @csspart children - The children container.\n *\n * @cssprop [--hx-nav-item-color=var(--hx-color-neutral-300)] - Item text color.\n * @cssprop [--hx-nav-item-hover-bg] - Item hover background.\n * @cssprop [--hx-nav-item-hover-color=var(--hx-color-neutral-100)] - Item hover text color.\n * @cssprop [--hx-nav-item-active-bg=var(--hx-color-primary-600)] - Active item background.\n * @cssprop [--hx-nav-item-active-color=var(--hx-color-neutral-50)] - Active item text color.\n * @cssprop [--hx-nav-item-padding] - Item padding.\n * @cssprop [--hx-nav-item-host-bg=var(--hx-color-neutral-900)] - Component host background color.\n */\n@customElement('hx-nav-item')\nexport class HelixNavItem extends LitElement {\n static override styles = [tokenStyles, helixNavItemStyles];\n\n /** @internal — incremented for each instance to guarantee unique tooltip IDs */\n private static _instanceCounter = 0;\n\n /** @internal — per-instance tooltip ID */\n private _tooltipId: string;\n\n constructor() {\n super();\n this._tooltipId = `nav-item-tooltip-${++HelixNavItem._instanceCounter}`;\n }\n\n // ─── Properties ───\n\n /**\n * The URL this nav item links to.\n * @attr href\n */\n @property({ type: String })\n href = '';\n\n /**\n * Whether this item is the current/active page.\n * @attr active\n */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /**\n * Whether the sub-navigation is expanded.\n * @attr expanded\n */\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /**\n * Whether this nav item is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n // ─── State ───\n\n /** Whether the children slot has assigned nodes. Updated via slotchange. */\n /** @internal */\n @state() private _hasChildren = false;\n\n /** Whether this item is in collapsed mode. Set externally by hx-side-nav via data-collapsed attribute. */\n /** @internal */\n @state() private _isCollapsed = false;\n\n // ─── Attribute Observer ───\n\n static override get observedAttributes(): string[] {\n return [...super.observedAttributes, 'data-collapsed'];\n }\n\n override attributeChangedCallback(name: string, old: string | null, value: string | null): void {\n super.attributeChangedCallback(name, old, value);\n if (name === 'data-collapsed') {\n this._isCollapsed = value !== null;\n }\n }\n\n // ─── Public API ───\n\n /**\n * Delegates focus to the internal link or button element (part=\"link\").\n * Allows parent components to focus nav items without piercing the Shadow DOM.\n * WCAG 2.1.1: keyboard navigation must not cross shadow boundaries via\n * direct shadowRoot queries.\n */\n override focus(options?: FocusOptions): void {\n const inner = this.shadowRoot?.querySelector<HTMLElement>('[part=\"link\"]');\n if (inner) {\n inner.focus(options);\n } else {\n super.focus(options);\n }\n }\n\n // ─── Slot Change Handler ───\n\n /** @internal */\n private _onChildrenSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasChildren = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Private Helpers ───\n\n /** @internal */\n private _getDirectText(): string {\n return Array.from(this.childNodes)\n .filter((n) => n.nodeType === Node.TEXT_NODE)\n .map((n) => n.textContent?.trim() ?? '')\n .filter(Boolean)\n .join(' ');\n }\n\n /** @internal */\n private _handleToggle(e: Event): void {\n if (this.disabled) return;\n e.preventDefault();\n this.expanded = !this.expanded;\n }\n\n /** @internal */\n private _renderExpandArrow() {\n return html`<span class=\"nav-item__arrow\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\">\n <path\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n />\n </svg>\n </span>`;\n }\n\n // ─── Render ───\n\n override render() {\n const label = this._getDirectText();\n\n const innerContent = html`\n <span part=\"icon\" class=\"nav-item__icon\">\n <slot name=\"icon\"></slot>\n </span>\n <span part=\"label\" class=\"nav-item__label\">\n <slot></slot>\n </span>\n <span part=\"badge\" class=\"nav-item__badge\">\n <slot name=\"badge\"></slot>\n </span>\n ${this._hasChildren ? this._renderExpandArrow() : nothing}\n ${this._isCollapsed\n ? html`<span id=${this._tooltipId} class=\"nav-item__tooltip\" role=\"tooltip\">${label}</span>`\n : nothing}\n `;\n\n // Render as anchor when href provided and no expandable children\n const linkEl =\n this.href && !this._hasChildren\n ? html`<a\n part=\"link\"\n class=\"nav-item__link\"\n href=${this.href}\n aria-current=${this.active ? 'page' : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-describedby=${this._isCollapsed ? this._tooltipId : nothing}\n tabindex=${this.disabled ? '-1' : '0'}\n >\n ${innerContent}\n </a>`\n : html`<button\n part=\"link\"\n class=\"nav-item__link\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-expanded=${this._hasChildren ? String(this.expanded) : nothing}\n aria-describedby=${this._isCollapsed ? this._tooltipId : nothing}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this._handleToggle}\n >\n ${innerContent}\n </button>`;\n\n return html`\n <div class=\"nav-item\">\n ${linkEl}\n <div part=\"children\" class=\"nav-item__children\" role=\"group\">\n <div class=\"nav-item__children-inner\">\n <slot name=\"children\" @slotchange=${this._onChildrenSlotChange}></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-nav-item': HelixNavItem;\n }\n}\n\nexport type { HelixNavItem as HxNavItem };\n"],"names":["helixSideNavStyles","css","HelixSideNav","LitElement","changedProperties","slot","_a","navItems","el","item","topLevelItems","childrenSlot","_b","childItems","activeEl","currentIndex","i","_c","currentItem","_d","firstChild","parentNavItem","_e","nextIndex","targetItem","html","tokenStyles","__decorateClass","property","customElement","helixNavItemStyles","HelixNavItem","name","old","value","options","inner","n","label","innerContent","nothing","linkEl","state"],"mappings":"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"}
|