@helixui/library 1.0.0 → 1.0.1
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 +213 -22
- package/dist/components/hx-accordion/hx-accordion-item.d.ts +20 -0
- package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
- package/dist/components/hx-accordion/index.js +1 -1
- package/dist/components/hx-alert/hx-alert.d.ts +10 -0
- package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
- package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
- package/dist/components/hx-alert/index.js +1 -1
- package/dist/components/hx-badge/hx-badge.d.ts +2 -0
- package/dist/components/hx-badge/hx-badge.d.ts.map +1 -1
- package/dist/components/hx-badge/hx-badge.styles.d.ts.map +1 -1
- package/dist/components/hx-badge/index.js +1 -1
- package/dist/components/hx-banner/hx-banner.d.ts +6 -0
- package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
- package/dist/components/hx-banner/index.js +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb-item.styles.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/index.js +1 -1
- package/dist/components/hx-card/hx-card.d.ts +1 -0
- package/dist/components/hx-card/hx-card.d.ts.map +1 -1
- package/dist/components/hx-card/hx-card.styles.d.ts.map +1 -1
- package/dist/components/hx-card/index.js +1 -1
- package/dist/components/hx-carousel/hx-carousel.styles.d.ts.map +1 -1
- package/dist/components/hx-carousel/index.js +1 -1
- package/dist/components/hx-checkbox/hx-checkbox.styles.d.ts.map +1 -1
- package/dist/components/hx-checkbox/index.js +1 -1
- package/dist/components/hx-code-snippet/index.js +1 -1
- package/dist/components/hx-color-picker/hx-color-picker.d.ts +44 -10
- package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
- package/dist/components/hx-color-picker/index.js +1 -1
- package/dist/components/hx-combobox/hx-combobox.styles.d.ts.map +1 -1
- package/dist/components/hx-combobox/index.js +1 -1
- package/dist/components/hx-data-table/hx-data-table.styles.d.ts.map +1 -1
- package/dist/components/hx-data-table/index.js +1 -1
- package/dist/components/hx-date-picker/hx-date-picker.styles.d.ts.map +1 -1
- package/dist/components/hx-date-picker/index.js +1 -1
- package/dist/components/hx-dialog/hx-dialog.styles.d.ts.map +1 -1
- package/dist/components/hx-dialog/index.js +1 -1
- package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
- package/dist/components/hx-drawer/hx-drawer.styles.d.ts.map +1 -1
- package/dist/components/hx-drawer/index.js +1 -1
- package/dist/components/hx-dropdown/hx-dropdown.d.ts +20 -5
- package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
- package/dist/components/hx-dropdown/index.js +1 -1
- package/dist/components/hx-file-upload/hx-file-upload.styles.d.ts.map +1 -1
- package/dist/components/hx-file-upload/index.js +1 -1
- package/dist/components/hx-icon-button/hx-icon-button.styles.d.ts.map +1 -1
- package/dist/components/hx-icon-button/index.js +1 -1
- package/dist/components/hx-menu/hx-menu-item.d.ts +1 -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/index.js +1 -1
- package/dist/components/hx-meter/hx-meter.d.ts +1 -0
- package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
- package/dist/components/hx-meter/hx-meter.styles.d.ts.map +1 -1
- package/dist/components/hx-meter/index.js +1 -1
- package/dist/components/hx-nav/hx-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-nav/index.js +1 -1
- package/dist/components/hx-overflow-menu/hx-overflow-menu.styles.d.ts.map +1 -1
- package/dist/components/hx-overflow-menu/index.js +1 -1
- package/dist/components/hx-pagination/hx-pagination.styles.d.ts.map +1 -1
- package/dist/components/hx-pagination/index.js +1 -1
- package/dist/components/hx-popover/hx-popover.d.ts +41 -9
- package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
- package/dist/components/hx-popover/hx-popover.styles.d.ts.map +1 -1
- package/dist/components/hx-popover/index.js +1 -1
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts +2 -0
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
- package/dist/components/hx-progress-bar/index.js +1 -1
- package/dist/components/hx-radio-group/hx-radio.styles.d.ts.map +1 -1
- package/dist/components/hx-radio-group/index.js +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-slider/hx-slider.d.ts.map +1 -1
- package/dist/components/hx-slider/index.js +1 -1
- package/dist/components/hx-split-button/index.js +1 -1
- package/dist/components/hx-split-panel/hx-split-panel.d.ts +44 -11
- package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
- package/dist/components/hx-split-panel/hx-split-panel.styles.d.ts.map +1 -1
- package/dist/components/hx-split-panel/index.js +1 -1
- 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-tag/hx-tag.d.ts +2 -0
- package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
- package/dist/components/hx-tag/hx-tag.styles.d.ts.map +1 -1
- package/dist/components/hx-tag/index.js +1 -1
- package/dist/components/hx-text-input/hx-text-input.d.ts +1 -1
- package/dist/components/hx-text-input/index.js +1 -1
- package/dist/components/hx-time-picker/hx-time-picker.d.ts +80 -19
- package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
- package/dist/components/hx-time-picker/index.js +1 -1
- package/dist/components/hx-toast/hx-toast.d.ts +10 -0
- package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
- package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
- package/dist/components/hx-toast/index.js +1 -1
- package/dist/components/hx-top-nav/index.js +1 -1
- package/dist/components/hx-tree-view/hx-tree-item.d.ts +11 -1
- package/dist/components/hx-tree-view/hx-tree-item.d.ts.map +1 -1
- package/dist/components/hx-tree-view/hx-tree-item.styles.d.ts.map +1 -1
- package/dist/components/hx-tree-view/hx-tree-view.d.ts +1 -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/index.js +37 -37
- package/dist/shared/{hx-accordion-Cyswa6J3.js → hx-accordion-DT8qHOay.js} +54 -37
- package/dist/shared/hx-accordion-DT8qHOay.js.map +1 -0
- package/dist/shared/{hx-alert-Cg-zxRiU.js → hx-alert-D6uok29t.js} +95 -28
- package/dist/shared/hx-alert-D6uok29t.js.map +1 -0
- package/dist/shared/{hx-badge-CjT0d8NK.js → hx-badge-BeuWuUj_.js} +57 -31
- package/dist/shared/hx-badge-BeuWuUj_.js.map +1 -0
- package/dist/shared/{hx-banner-lxAIJ2kR.js → hx-banner-DnCBJtRR.js} +27 -23
- package/dist/shared/{hx-banner-lxAIJ2kR.js.map → hx-banner-DnCBJtRR.js.map} +1 -1
- package/dist/shared/{hx-breadcrumb-item-C0rz0fzV.js → hx-breadcrumb-item-Bj2UqhzR.js} +12 -8
- package/dist/shared/{hx-breadcrumb-item-C0rz0fzV.js.map → hx-breadcrumb-item-Bj2UqhzR.js.map} +1 -1
- package/dist/shared/{hx-card-Bg4W4uXC.js → hx-card-B9j2SHyI.js} +15 -11
- package/dist/shared/hx-card-B9j2SHyI.js.map +1 -0
- package/dist/shared/{hx-carousel-item-BKpmFbUT.js → hx-carousel-item-Be0bC-7o.js} +91 -77
- package/dist/shared/hx-carousel-item-Be0bC-7o.js.map +1 -0
- package/dist/shared/{hx-checkbox-BMayOpAM.js → hx-checkbox-CuaJqEo7.js} +3 -1
- package/dist/shared/hx-checkbox-CuaJqEo7.js.map +1 -0
- package/dist/shared/{hx-code-snippet-B4hV7rWG.js → hx-code-snippet-DBwIjl5p.js} +11 -11
- package/dist/shared/{hx-code-snippet-B4hV7rWG.js.map → hx-code-snippet-DBwIjl5p.js.map} +1 -1
- package/dist/shared/{hx-color-picker-BvfJ_h16.js → hx-color-picker-Bb2UPVc3.js} +2 -2
- package/dist/shared/hx-color-picker-Bb2UPVc3.js.map +1 -0
- package/dist/shared/{hx-combobox-BBi3izKJ.js → hx-combobox-CNvY-es8.js} +42 -39
- package/dist/shared/hx-combobox-CNvY-es8.js.map +1 -0
- package/dist/shared/{hx-data-table-DNiDVWR2.js → hx-data-table-BwoJCFgs.js} +9 -8
- package/dist/shared/hx-data-table-BwoJCFgs.js.map +1 -0
- package/dist/shared/{hx-date-picker-D7yCK0nk.js → hx-date-picker-DDcIBJir.js} +43 -37
- package/dist/shared/hx-date-picker-DDcIBJir.js.map +1 -0
- package/dist/shared/{hx-dialog-Z7Ou_AZ9.js → hx-dialog-M7so0sRT.js} +41 -34
- package/dist/shared/hx-dialog-M7so0sRT.js.map +1 -0
- package/dist/shared/{hx-drawer-Dk-_xzy0.js → hx-drawer-CYxuhIQ0.js} +50 -43
- package/dist/shared/hx-drawer-CYxuhIQ0.js.map +1 -0
- package/dist/shared/{hx-dropdown-DnjLnkTj.js → hx-dropdown-7cfowTWv.js} +30 -30
- package/dist/shared/hx-dropdown-7cfowTWv.js.map +1 -0
- package/dist/shared/{hx-file-upload-CUORgnKc.js → hx-file-upload-9HbONfqt.js} +49 -43
- package/dist/shared/hx-file-upload-9HbONfqt.js.map +1 -0
- package/dist/shared/{hx-icon-button-C83bCR0K.js → hx-icon-button-iu0i_faq.js} +39 -29
- package/dist/shared/hx-icon-button-iu0i_faq.js.map +1 -0
- package/dist/shared/{hx-menu-divider-11Dp2VfM.js → hx-menu-divider-DR8klkFT.js} +32 -26
- package/dist/shared/hx-menu-divider-DR8klkFT.js.map +1 -0
- package/dist/shared/{hx-meter-UinDQjl6.js → hx-meter-CZ7lnMra.js} +67 -35
- package/dist/shared/hx-meter-CZ7lnMra.js.map +1 -0
- package/dist/shared/{hx-nav-DSpwWYUX.js → hx-nav-DM6-cGKF.js} +49 -47
- package/dist/shared/hx-nav-DM6-cGKF.js.map +1 -0
- package/dist/shared/{hx-overflow-menu-C7k5wlZy.js → hx-overflow-menu-CobkjAb8.js} +17 -9
- package/dist/shared/{hx-overflow-menu-C7k5wlZy.js.map → hx-overflow-menu-CobkjAb8.js.map} +1 -1
- package/dist/shared/{hx-pagination-BQ0cLTuB.js → hx-pagination-10dpXS95.js} +14 -12
- package/dist/shared/hx-pagination-10dpXS95.js.map +1 -0
- package/dist/shared/hx-popover-ULjonbaO.js +269 -0
- package/dist/shared/hx-popover-ULjonbaO.js.map +1 -0
- package/dist/shared/{hx-progress-bar-C_mdPVF-.js → hx-progress-bar-CnTibV63.js} +67 -57
- package/dist/shared/{hx-progress-bar-C_mdPVF-.js.map → hx-progress-bar-CnTibV63.js.map} +1 -1
- package/dist/shared/{hx-radio-Bqyi8re3.js → hx-radio-BnKcRuQu.js} +10 -8
- package/dist/shared/{hx-radio-Bqyi8re3.js.map → hx-radio-BnKcRuQu.js.map} +1 -1
- package/dist/shared/{hx-select-BBae2LqN.js → hx-select-C50lD7NS.js} +4 -3
- package/dist/shared/hx-select-C50lD7NS.js.map +1 -0
- package/dist/shared/{hx-slider-CpnxH2UP.js → hx-slider-CprSNrRi.js} +3 -2
- package/dist/shared/hx-slider-CprSNrRi.js.map +1 -0
- package/dist/shared/{hx-split-button-BvwoG8h2.js → hx-split-button-CHGy4FUc.js} +11 -11
- package/dist/shared/{hx-split-button-BvwoG8h2.js.map → hx-split-button-CHGy4FUc.js.map} +1 -1
- package/dist/shared/{hx-split-panel-Cxkeauwe.js → hx-split-panel-DYtB45Tr.js} +16 -8
- package/dist/shared/hx-split-panel-DYtB45Tr.js.map +1 -0
- package/dist/shared/{hx-tab-panel-CHB0u1zF.js → hx-tab-panel-BRNcLICw.js} +55 -52
- package/dist/shared/hx-tab-panel-BRNcLICw.js.map +1 -0
- package/dist/shared/{hx-tag-SJJtMlOS.js → hx-tag-B3N-vZ6B.js} +80 -55
- package/dist/shared/hx-tag-B3N-vZ6B.js.map +1 -0
- package/dist/shared/{hx-text-input-BrCjo4fJ.js → hx-text-input-CCZZbWQ9.js} +6 -6
- package/dist/shared/hx-text-input-CCZZbWQ9.js.map +1 -0
- package/dist/shared/{hx-time-picker-DRRAFuVd.js → hx-time-picker-CJcIjH3C.js} +5 -2
- package/dist/shared/hx-time-picker-CJcIjH3C.js.map +1 -0
- package/dist/shared/{hx-top-nav-DzW7XLv-.js → hx-top-nav-D2bQpns3.js} +2 -2
- package/dist/shared/{hx-top-nav-DzW7XLv-.js.map → hx-top-nav-D2bQpns3.js.map} +1 -1
- package/dist/shared/{hx-tree-item-DdH6RbMs.js → hx-tree-item-BobGN76x.js} +119 -96
- package/dist/shared/hx-tree-item-BobGN76x.js.map +1 -0
- package/dist/shared/{toast-factory-B8jicczW.js → toast-factory-MvMMreTu.js} +178 -94
- package/dist/shared/toast-factory-MvMMreTu.js.map +1 -0
- package/package.json +1 -1
- package/dist/shared/hx-accordion-Cyswa6J3.js.map +0 -1
- package/dist/shared/hx-alert-Cg-zxRiU.js.map +0 -1
- package/dist/shared/hx-badge-CjT0d8NK.js.map +0 -1
- package/dist/shared/hx-card-Bg4W4uXC.js.map +0 -1
- package/dist/shared/hx-carousel-item-BKpmFbUT.js.map +0 -1
- package/dist/shared/hx-checkbox-BMayOpAM.js.map +0 -1
- package/dist/shared/hx-color-picker-BvfJ_h16.js.map +0 -1
- package/dist/shared/hx-combobox-BBi3izKJ.js.map +0 -1
- package/dist/shared/hx-data-table-DNiDVWR2.js.map +0 -1
- package/dist/shared/hx-date-picker-D7yCK0nk.js.map +0 -1
- package/dist/shared/hx-dialog-Z7Ou_AZ9.js.map +0 -1
- package/dist/shared/hx-drawer-Dk-_xzy0.js.map +0 -1
- package/dist/shared/hx-dropdown-DnjLnkTj.js.map +0 -1
- package/dist/shared/hx-file-upload-CUORgnKc.js.map +0 -1
- package/dist/shared/hx-icon-button-C83bCR0K.js.map +0 -1
- package/dist/shared/hx-menu-divider-11Dp2VfM.js.map +0 -1
- package/dist/shared/hx-meter-UinDQjl6.js.map +0 -1
- package/dist/shared/hx-nav-DSpwWYUX.js.map +0 -1
- package/dist/shared/hx-pagination-BQ0cLTuB.js.map +0 -1
- package/dist/shared/hx-popover-BQsgrJCW.js +0 -226
- package/dist/shared/hx-popover-BQsgrJCW.js.map +0 -1
- package/dist/shared/hx-select-BBae2LqN.js.map +0 -1
- package/dist/shared/hx-slider-CpnxH2UP.js.map +0 -1
- package/dist/shared/hx-split-panel-Cxkeauwe.js.map +0 -1
- package/dist/shared/hx-tab-panel-CHB0u1zF.js.map +0 -1
- package/dist/shared/hx-tag-SJJtMlOS.js.map +0 -1
- package/dist/shared/hx-text-input-BrCjo4fJ.js.map +0 -1
- package/dist/shared/hx-time-picker-DRRAFuVd.js.map +0 -1
- package/dist/shared/hx-tree-item-DdH6RbMs.js.map +0 -1
- package/dist/shared/toast-factory-B8jicczW.js.map +0 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as d, state as s, customElement as
|
|
1
|
+
import { css as x, LitElement as p, nothing as l, html as g } from "lit";
|
|
2
|
+
import { property as d, state as s, customElement as v } from "lit/decorators.js";
|
|
3
3
|
import { classMap as f } from "lit/directives/class-map.js";
|
|
4
4
|
import { tokenStyles as m } from "@helixui/tokens/lit";
|
|
5
|
-
const _ =
|
|
5
|
+
const _ = x`
|
|
6
6
|
:host {
|
|
7
7
|
display: block;
|
|
8
8
|
color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));
|
|
@@ -84,7 +84,8 @@ const _ = g`
|
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
.card--interactive:focus-visible {
|
|
87
|
-
outline: var(--hx-focus-ring-width, 2px) solid
|
|
87
|
+
outline: var(--hx-focus-ring-width, 2px) solid
|
|
88
|
+
var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
|
|
88
89
|
outline-offset: var(--hx-focus-ring-offset, 2px);
|
|
89
90
|
}
|
|
90
91
|
|
|
@@ -163,10 +164,10 @@ const _ = g`
|
|
|
163
164
|
margin-top: auto;
|
|
164
165
|
}
|
|
165
166
|
`;
|
|
166
|
-
var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (a, r,
|
|
167
|
-
for (var o = i > 1 ? void 0 : i ? b(r,
|
|
168
|
-
(c = a[
|
|
169
|
-
return i && o && u(r,
|
|
167
|
+
var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (a, r, h, i) => {
|
|
168
|
+
for (var o = i > 1 ? void 0 : i ? b(r, h) : r, n = a.length - 1, c; n >= 0; n--)
|
|
169
|
+
(c = a[n]) && (o = (i ? c(r, h, o) : c(o)) || o);
|
|
170
|
+
return i && o && u(r, h, o), o;
|
|
170
171
|
};
|
|
171
172
|
let e = class extends p {
|
|
172
173
|
constructor() {
|
|
@@ -188,6 +189,9 @@ let e = class extends p {
|
|
|
188
189
|
const r = a.target;
|
|
189
190
|
this._hasActions = r.assignedNodes({ flatten: !0 }).length > 0, this._hasActions && this.hxHref;
|
|
190
191
|
}
|
|
192
|
+
updated(a) {
|
|
193
|
+
super.updated(a), (a.has("hxHref") || a.has("hxAriaLabel")) && this.hxHref && this.hxAriaLabel;
|
|
194
|
+
}
|
|
191
195
|
// ─── Event Handling ───
|
|
192
196
|
_dispatchCardClick(a) {
|
|
193
197
|
this.hxHref && this.dispatchEvent(
|
|
@@ -212,7 +216,7 @@ let e = class extends p {
|
|
|
212
216
|
[`card--${this.elevation}`]: !0,
|
|
213
217
|
"card--interactive": a
|
|
214
218
|
};
|
|
215
|
-
return
|
|
219
|
+
return g`
|
|
216
220
|
<div
|
|
217
221
|
part="card"
|
|
218
222
|
class=${f(r)}
|
|
@@ -275,9 +279,9 @@ t([
|
|
|
275
279
|
s()
|
|
276
280
|
], e.prototype, "_hasActions", 2);
|
|
277
281
|
e = t([
|
|
278
|
-
|
|
282
|
+
v("hx-card")
|
|
279
283
|
], e);
|
|
280
284
|
export {
|
|
281
285
|
e as H
|
|
282
286
|
};
|
|
283
|
-
//# sourceMappingURL=hx-card-
|
|
287
|
+
//# sourceMappingURL=hx-card-B9j2SHyI.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hx-card-B9j2SHyI.js","sources":["../../src/components/hx-card/hx-card.styles.ts","../../src/components/hx-card/hx-card.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCardStyles = css`\n :host {\n display: block;\n color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));\n background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));\n }\n\n .card {\n display: flex;\n flex-direction: column;\n gap: var(--hx-card-gap, var(--hx-space-4, 1rem));\n background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));\n color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));\n border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));\n overflow: hidden;\n font-family: var(--hx-font-family-sans, sans-serif);\n transition:\n box-shadow var(--hx-transition-normal, 250ms ease),\n transform var(--hx-transition-normal, 250ms ease);\n }\n\n /* ─── Elevation Variants ─── */\n\n .card--flat {\n box-shadow: none;\n }\n\n .card--raised {\n box-shadow: var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));\n }\n\n .card--floating {\n box-shadow: var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));\n }\n\n /* ─── Style Variants ─── */\n\n .card--default {\n /* Default styling — uses base styles */\n }\n\n .card--featured {\n border-color: var(--hx-color-primary-500, #2563eb);\n border-width: var(--hx-border-width-medium, 2px);\n }\n\n .card--compact .card__body {\n padding: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__heading {\n padding-top: var(--hx-space-3, 0.75rem);\n padding-right: var(--hx-space-3, 0.75rem);\n padding-left: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__footer {\n padding-right: var(--hx-space-3, 0.75rem);\n padding-bottom: var(--hx-space-3, 0.75rem);\n padding-left: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__actions {\n padding-right: var(--hx-space-3, 0.75rem);\n padding-bottom: var(--hx-space-3, 0.75rem);\n padding-left: var(--hx-space-3, 0.75rem);\n }\n\n /* ─── Interactive ─── */\n\n .card--interactive {\n cursor: pointer;\n }\n\n .card--interactive:hover {\n box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));\n transform: translateY(var(--hx-lift-md, -2px));\n }\n\n .card--interactive:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .card--interactive:active {\n transform: translateY(0);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .card {\n transition: none;\n }\n\n .card--interactive:hover {\n transform: none;\n }\n\n .card--interactive:active {\n transform: none;\n }\n }\n\n /* ─── Hidden empty slot wrappers ─── */\n\n [hidden] {\n display: none !important;\n }\n\n /* ─── Sections ─── */\n\n .card__image {\n overflow: hidden;\n line-height: 0;\n }\n\n .card__image ::slotted(img) {\n width: 100%;\n aspect-ratio: var(--hx-card-image-aspect-ratio, 16 / 9);\n display: block;\n object-fit: cover;\n }\n\n .card__heading {\n padding-top: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: 0;\n padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n font-size: var(--hx-font-size-xl, 1.25rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n line-height: var(--hx-line-height-tight, 1.25);\n }\n\n .card__body {\n padding: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n flex: 1;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n color: var(--hx-color-neutral-600, #495057);\n }\n\n .card__footer {\n padding-top: 0;\n padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n }\n\n .card__actions {\n display: flex;\n gap: var(--hx-space-2, 0.5rem);\n padding-top: var(--hx-space-4, 1rem);\n padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));\n margin-top: auto;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCardStyles } from './hx-card.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A flexible card component for displaying grouped content.\n *\n * @summary Content container with image, heading, body, footer, and action slots.\n *\n * @tag hx-card\n *\n * @slot image - Optional image or media content at the top of the card.\n * @slot heading - The card heading/title content. Use a semantic heading element (h2, h3, etc.) for proper accessibility.\n * @slot - Default slot for the card body content.\n * @slot footer - Optional footer content below the body.\n * @slot actions - Optional action buttons, rendered with a top border separator. Do NOT use together with hx-href (interactive card + focusable actions is an ARIA anti-pattern).\n *\n * @fires {CustomEvent<{href: string, originalEvent: MouseEvent | KeyboardEvent}>} hx-click - Dispatched when an interactive card (with hx-href) is clicked.\n *\n * @csspart card - The outer card container element.\n * @csspart image - The image slot container.\n * @csspart heading - The heading slot container.\n * @csspart body - The body slot container.\n * @csspart footer - The footer slot container.\n * @csspart actions - The actions slot container.\n *\n * @cssprop [--hx-card-bg=var(--hx-color-neutral-0)] - Card background color.\n * @cssprop [--hx-card-color=var(--hx-color-neutral-800)] - Card text color.\n * @cssprop [--hx-card-border-color=var(--hx-color-neutral-200)] - Card border color.\n * @cssprop [--hx-card-border-radius=var(--hx-border-radius-lg)] - Card border radius.\n * @cssprop [--hx-card-padding=var(--hx-space-6)] - Internal padding for card sections.\n * @cssprop [--hx-card-gap=var(--hx-space-4)] - Gap between card sections.\n * @cssprop [--hx-card-image-aspect-ratio=16/9] - Aspect ratio for the image slot.\n */\n@customElement('hx-card')\nexport class HelixCard extends LitElement {\n /** Enable delegatesFocus so :focus on the host works when the inner card div has focus. */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static override styles = [tokenStyles, helixCardStyles];\n\n /**\n * Visual style variant of the card.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'featured' | 'compact' = 'default';\n\n /**\n * Elevation (shadow depth) of the card.\n * @attr elevation\n */\n @property({ type: String, reflect: true })\n elevation: 'flat' | 'raised' | 'floating' = 'flat';\n\n /**\n * Optional URL. When set, the card becomes interactive (clickable)\n * and navigates to this URL on click.\n * Uses hx-href to avoid conflicting with the native HTML href attribute.\n * @attr hx-href\n */\n @property({ type: String, attribute: 'hx-href' })\n hxHref: string | undefined = undefined;\n\n /**\n * Accessible label for interactive cards. Use this to provide a meaningful\n * description of the card's purpose rather than exposing the raw URL.\n * Only applies when hx-href is set.\n * @attr hx-aria-label\n */\n @property({ type: String, attribute: 'hx-aria-label' })\n hxAriaLabel: string | undefined = undefined;\n\n // ─── Slot Detection ───\n\n /**\n * Tracks whether any content is assigned to the image slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasImage = false;\n\n /**\n * Tracks whether any content is assigned to the heading slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasHeading = false;\n\n /**\n * Tracks whether any content is assigned to the footer slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasFooter = false;\n\n /**\n * Tracks whether any content is assigned to the actions slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasActions = false;\n\n private _onImageSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasImage = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _onHeadingSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHeading = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _onFooterSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _onActionsSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasActions = slot.assignedNodes({ flatten: true }).length > 0;\n if (this._hasActions && this.hxHref) {\n devWarn(\n 'hx-card',\n 'Using hx-href (interactive card) together with the actions slot is an ARIA anti-pattern: ' +\n 'interactive controls cannot be nested inside role=\"link\". ' +\n 'Use either hx-href or the actions slot, not both.',\n );\n }\n }\n\n override updated(changedProperties: Map<PropertyKey, unknown>): void {\n super.updated(changedProperties);\n // WCAG 4.1.2: interactive cards (with hx-href) must have an accessible name\n if (\n (changedProperties.has('hxHref') || changedProperties.has('hxAriaLabel')) &&\n this.hxHref &&\n !this.hxAriaLabel\n ) {\n devWarn(\n 'hx-card',\n \"Interactive card (hx-href is set) is missing an accessible name. Set `hx-aria-label` to describe the card's destination or purpose (WCAG 4.1.2).\",\n );\n }\n }\n\n // ─── Event Handling ───\n\n private _dispatchCardClick(originalEvent: MouseEvent | KeyboardEvent): void {\n if (!this.hxHref) return;\n\n /**\n * Dispatched when an interactive card is clicked.\n * Includes the target href in the detail.\n * @event hx-click\n */\n this.dispatchEvent(\n new CustomEvent<{ href: string; originalEvent: MouseEvent | KeyboardEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { href: this.hxHref, originalEvent },\n }),\n );\n }\n\n private _handleClick(e: MouseEvent): void {\n this._dispatchCardClick(e);\n }\n\n private _handleKeyDown(e: KeyboardEvent): void {\n if (!this.hxHref) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this._dispatchCardClick(e);\n }\n }\n\n // ─── Render ───\n\n override render() {\n const isInteractive = !!this.hxHref;\n\n const classes = {\n card: true,\n [`card--${this.variant}`]: true,\n [`card--${this.elevation}`]: true,\n 'card--interactive': isInteractive,\n };\n\n return html`\n <div\n part=\"card\"\n class=${classMap(classes)}\n role=${isInteractive ? 'link' : nothing}\n tabindex=${isInteractive ? '0' : nothing}\n aria-label=${isInteractive && this.hxAriaLabel ? this.hxAriaLabel : nothing}\n @click=${this._handleClick}\n @keydown=${this._handleKeyDown}\n >\n <div class=\"card__image\" part=\"image\" ?hidden=${!this._hasImage}>\n <slot name=\"image\" @slotchange=${this._onImageSlotChange}></slot>\n </div>\n\n <div class=\"card__heading\" part=\"heading\" ?hidden=${!this._hasHeading}>\n <slot name=\"heading\" @slotchange=${this._onHeadingSlotChange}></slot>\n </div>\n\n <div class=\"card__body\" part=\"body\">\n <slot></slot>\n </div>\n\n <div class=\"card__footer\" part=\"footer\" ?hidden=${!this._hasFooter}>\n <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n </div>\n\n <div class=\"card__actions\" part=\"actions\" ?hidden=${!this._hasActions}>\n <slot name=\"actions\" @slotchange=${this._onActionsSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-card': HelixCard;\n }\n}\n"],"names":["helixCardStyles","css","HelixCard","LitElement","e","slot","changedProperties","originalEvent","isInteractive","classes","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { css as g, html as l, LitElement as f, nothing as p } from "lit";
|
|
2
|
-
import { property as
|
|
3
|
-
import { classMap as
|
|
4
|
-
import { tokenStyles as
|
|
5
|
-
const
|
|
2
|
+
import { property as n, state as c, customElement as _ } from "lit/decorators.js";
|
|
3
|
+
import { classMap as m } from "lit/directives/class-map.js";
|
|
4
|
+
import { tokenStyles as x } from "@helixui/tokens/lit";
|
|
5
|
+
const y = g`
|
|
6
6
|
:host {
|
|
7
7
|
display: block;
|
|
8
8
|
position: relative;
|
|
@@ -39,6 +39,9 @@ const b = g`
|
|
|
39
39
|
justify-content: center;
|
|
40
40
|
width: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));
|
|
41
41
|
height: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));
|
|
42
|
+
/* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
|
|
43
|
+
min-width: var(--hx-touch-target-min, 2.75rem);
|
|
44
|
+
min-height: var(--hx-touch-target-min, 2.75rem);
|
|
42
45
|
border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);
|
|
43
46
|
border-radius: var(--hx-border-radius-full, 9999px);
|
|
44
47
|
background: var(--hx-color-neutral-0, #fff);
|
|
@@ -58,7 +61,8 @@ const b = g`
|
|
|
58
61
|
}
|
|
59
62
|
|
|
60
63
|
.nav-btn:focus-visible {
|
|
61
|
-
outline: var(--hx-focus-ring-width, 2px) solid
|
|
64
|
+
outline: var(--hx-focus-ring-width, 2px) solid
|
|
65
|
+
var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
|
|
62
66
|
outline-offset: var(--hx-focus-ring-offset, 2px);
|
|
63
67
|
}
|
|
64
68
|
|
|
@@ -78,8 +82,11 @@ const b = g`
|
|
|
78
82
|
display: inline-flex;
|
|
79
83
|
align-items: center;
|
|
80
84
|
justify-content: center;
|
|
81
|
-
|
|
82
|
-
|
|
85
|
+
/* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
|
|
86
|
+
min-width: var(--hx-touch-target-min, 2.75rem);
|
|
87
|
+
min-height: var(--hx-touch-target-min, 2.75rem);
|
|
88
|
+
width: var(--hx-touch-target-min, 2.75rem);
|
|
89
|
+
height: var(--hx-touch-target-min, 2.75rem);
|
|
83
90
|
border: var(--hx-border-width-thin, 1px) solid transparent;
|
|
84
91
|
border-radius: var(--hx-border-radius-md, 0.375rem);
|
|
85
92
|
background: transparent;
|
|
@@ -96,7 +103,8 @@ const b = g`
|
|
|
96
103
|
}
|
|
97
104
|
|
|
98
105
|
.play-pause-btn:focus-visible {
|
|
99
|
-
outline: var(--hx-focus-ring-width, 2px) solid
|
|
106
|
+
outline: var(--hx-focus-ring-width, 2px) solid
|
|
107
|
+
var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
|
|
100
108
|
outline-offset: var(--hx-focus-ring-offset, 2px);
|
|
101
109
|
}
|
|
102
110
|
|
|
@@ -137,6 +145,11 @@ const b = g`
|
|
|
137
145
|
|
|
138
146
|
.pagination-item {
|
|
139
147
|
display: inline-flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
/* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
|
|
151
|
+
min-width: var(--hx-touch-target-min, 2.75rem);
|
|
152
|
+
min-height: var(--hx-touch-target-min, 2.75rem);
|
|
140
153
|
padding: 0;
|
|
141
154
|
border: none;
|
|
142
155
|
cursor: pointer;
|
|
@@ -162,7 +175,8 @@ const b = g`
|
|
|
162
175
|
}
|
|
163
176
|
|
|
164
177
|
.pagination-item:focus-visible {
|
|
165
|
-
outline: var(--hx-focus-ring-width, 2px) solid
|
|
178
|
+
outline: var(--hx-focus-ring-width, 2px) solid
|
|
179
|
+
var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
|
|
166
180
|
outline-offset: var(--hx-focus-ring-offset, 2px);
|
|
167
181
|
border-radius: var(--hx-border-radius-full, 9999px);
|
|
168
182
|
}
|
|
@@ -200,10 +214,10 @@ const b = g`
|
|
|
200
214
|
}
|
|
201
215
|
}
|
|
202
216
|
`;
|
|
203
|
-
var
|
|
204
|
-
for (var
|
|
205
|
-
(u = t[h]) && (
|
|
206
|
-
return i &&
|
|
217
|
+
var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (t, e, r, i) => {
|
|
218
|
+
for (var o = i > 1 ? void 0 : i ? w(e, r) : e, h = t.length - 1, u; h >= 0; h--)
|
|
219
|
+
(u = t[h]) && (o = (i ? u(e, r, o) : u(o)) || o);
|
|
220
|
+
return i && o && b(e, r, o), o;
|
|
207
221
|
};
|
|
208
222
|
const P = l`<svg
|
|
209
223
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -269,7 +283,7 @@ const P = l`<svg
|
|
|
269
283
|
<rect x="6" y="4" width="4" height="16"></rect>
|
|
270
284
|
<rect x="14" y="4" width="4" height="16"></rect>
|
|
271
285
|
</svg>`;
|
|
272
|
-
let
|
|
286
|
+
let s = class extends f {
|
|
273
287
|
constructor() {
|
|
274
288
|
super(...arguments), this.label = "Carousel", this.loop = !1, this.autoplay = !1, this.autoplayInterval = 3e3, this.slidesPerPage = 1, this.slidesPerMove = 1, this.orientation = "horizontal", this.mouseDragging = !1, this.labelPrevSlide = "Previous slide", this.labelNextSlide = "Next slide", this.labelPauseAutoplay = "Pause autoplay", this.labelPlayAutoplay = "Play autoplay", this._currentIndex = 0, this._slides = [], this._isPlaying = !1, this._liveText = "", this._livePolite = !0, this._autoplayTimer = null, this._reducedMotion = !1, this._mql = null, this._isHovered = !1, this._isFocused = !1, this._dragStartCoord = 0, this._isDragging = !1, this._dragMoved = !1, this._touchStartCoord = 0, this._touchMoved = !1, this._autoplayTick = () => {
|
|
275
289
|
this._livePolite = !1, this.loop ? this.goTo(this._currentIndex + this.slidesPerMove) : this._currentIndex < this._maxIndex ? this.goTo(this._currentIndex + this.slidesPerMove) : this.goTo(0);
|
|
@@ -304,8 +318,8 @@ let o = class extends f {
|
|
|
304
318
|
const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot:not([name])");
|
|
305
319
|
if (!t) return;
|
|
306
320
|
const e = t.assignedElements({ flatten: !0 }).filter((i) => i.tagName.toLowerCase() === "hx-carousel-item");
|
|
307
|
-
this._slides = e, e.forEach((i,
|
|
308
|
-
i.slideIndex =
|
|
321
|
+
this._slides = e, e.forEach((i, o) => {
|
|
322
|
+
i.slideIndex = o, i.totalSlides = e.length;
|
|
309
323
|
const h = `${100 / this.slidesPerPage}%`;
|
|
310
324
|
i.style.setProperty("--_hx-carousel-slide-width", h);
|
|
311
325
|
}), this._currentIndex >= e.length && (this._currentIndex = Math.max(0, e.length - 1));
|
|
@@ -386,8 +400,8 @@ let o = class extends f {
|
|
|
386
400
|
if (!this._isDragging) return;
|
|
387
401
|
const e = t.changedTouches[0];
|
|
388
402
|
if (!e) return;
|
|
389
|
-
const i = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this._touchStartCoord,
|
|
390
|
-
this._touchMoved && (i >
|
|
403
|
+
const i = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this._touchStartCoord, o = 50;
|
|
404
|
+
this._touchMoved && (i > o ? this.previous() : i < -o && this.next()), this._isDragging = !1, this._touchMoved = !1;
|
|
391
405
|
}
|
|
392
406
|
_goToManual(t) {
|
|
393
407
|
this._livePolite = !0, this.goTo(t);
|
|
@@ -467,7 +481,7 @@ let o = class extends f {
|
|
|
467
481
|
${e.map(
|
|
468
482
|
(r) => l`
|
|
469
483
|
<button
|
|
470
|
-
class=${
|
|
484
|
+
class=${m({
|
|
471
485
|
"pagination-item": !0,
|
|
472
486
|
"is-active": r === this._currentIndex
|
|
473
487
|
})}
|
|
@@ -538,65 +552,65 @@ let o = class extends f {
|
|
|
538
552
|
`;
|
|
539
553
|
}
|
|
540
554
|
};
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
],
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
],
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
],
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
],
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
],
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
],
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
],
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
],
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
],
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
],
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
],
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
],
|
|
578
|
-
|
|
555
|
+
s.styles = [x, y];
|
|
556
|
+
a([
|
|
557
|
+
n({ type: String, reflect: !0 })
|
|
558
|
+
], s.prototype, "label", 2);
|
|
559
|
+
a([
|
|
560
|
+
n({ type: Boolean, reflect: !0 })
|
|
561
|
+
], s.prototype, "loop", 2);
|
|
562
|
+
a([
|
|
563
|
+
n({ type: Boolean, reflect: !0 })
|
|
564
|
+
], s.prototype, "autoplay", 2);
|
|
565
|
+
a([
|
|
566
|
+
n({ type: Number, attribute: "autoplay-interval" })
|
|
567
|
+
], s.prototype, "autoplayInterval", 2);
|
|
568
|
+
a([
|
|
569
|
+
n({ type: Number, attribute: "slides-per-page" })
|
|
570
|
+
], s.prototype, "slidesPerPage", 2);
|
|
571
|
+
a([
|
|
572
|
+
n({ type: Number, attribute: "slides-per-move" })
|
|
573
|
+
], s.prototype, "slidesPerMove", 2);
|
|
574
|
+
a([
|
|
575
|
+
n({ type: String, reflect: !0 })
|
|
576
|
+
], s.prototype, "orientation", 2);
|
|
577
|
+
a([
|
|
578
|
+
n({ type: Boolean, attribute: "mouse-dragging", reflect: !0 })
|
|
579
|
+
], s.prototype, "mouseDragging", 2);
|
|
580
|
+
a([
|
|
581
|
+
n({ type: String, attribute: "label-prev-slide" })
|
|
582
|
+
], s.prototype, "labelPrevSlide", 2);
|
|
583
|
+
a([
|
|
584
|
+
n({ type: String, attribute: "label-next-slide" })
|
|
585
|
+
], s.prototype, "labelNextSlide", 2);
|
|
586
|
+
a([
|
|
587
|
+
n({ type: String, attribute: "label-pause-autoplay" })
|
|
588
|
+
], s.prototype, "labelPauseAutoplay", 2);
|
|
589
|
+
a([
|
|
590
|
+
n({ type: String, attribute: "label-play-autoplay" })
|
|
591
|
+
], s.prototype, "labelPlayAutoplay", 2);
|
|
592
|
+
a([
|
|
579
593
|
c()
|
|
580
|
-
],
|
|
581
|
-
|
|
594
|
+
], s.prototype, "_currentIndex", 2);
|
|
595
|
+
a([
|
|
582
596
|
c()
|
|
583
|
-
],
|
|
584
|
-
|
|
597
|
+
], s.prototype, "_slides", 2);
|
|
598
|
+
a([
|
|
585
599
|
c()
|
|
586
|
-
],
|
|
587
|
-
|
|
600
|
+
], s.prototype, "_isPlaying", 2);
|
|
601
|
+
a([
|
|
588
602
|
c()
|
|
589
|
-
],
|
|
590
|
-
|
|
603
|
+
], s.prototype, "_liveText", 2);
|
|
604
|
+
a([
|
|
591
605
|
c()
|
|
592
|
-
],
|
|
593
|
-
|
|
606
|
+
], s.prototype, "_livePolite", 2);
|
|
607
|
+
s = a([
|
|
594
608
|
_("hx-carousel")
|
|
595
|
-
],
|
|
596
|
-
var
|
|
597
|
-
for (var
|
|
598
|
-
(u = t[h]) && (
|
|
599
|
-
return i &&
|
|
609
|
+
], s);
|
|
610
|
+
var C = Object.defineProperty, T = Object.getOwnPropertyDescriptor, v = (t, e, r, i) => {
|
|
611
|
+
for (var o = i > 1 ? void 0 : i ? T(e, r) : e, h = t.length - 1, u; h >= 0; h--)
|
|
612
|
+
(u = t[h]) && (o = (i ? u(e, r, o) : u(o)) || o);
|
|
613
|
+
return i && o && C(e, r, o), o;
|
|
600
614
|
};
|
|
601
615
|
let d = class extends f {
|
|
602
616
|
constructor() {
|
|
@@ -612,7 +626,7 @@ let d = class extends f {
|
|
|
612
626
|
}
|
|
613
627
|
};
|
|
614
628
|
d.styles = [
|
|
615
|
-
|
|
629
|
+
x,
|
|
616
630
|
g`
|
|
617
631
|
:host {
|
|
618
632
|
display: block;
|
|
@@ -640,16 +654,16 @@ d.styles = [
|
|
|
640
654
|
`
|
|
641
655
|
];
|
|
642
656
|
v([
|
|
643
|
-
|
|
657
|
+
n({ type: Number, attribute: "slide-index" })
|
|
644
658
|
], d.prototype, "slideIndex", 2);
|
|
645
659
|
v([
|
|
646
|
-
|
|
660
|
+
n({ type: Number, attribute: "total-slides" })
|
|
647
661
|
], d.prototype, "totalSlides", 2);
|
|
648
662
|
d = v([
|
|
649
663
|
_("hx-carousel-item")
|
|
650
664
|
], d);
|
|
651
665
|
export {
|
|
652
|
-
|
|
666
|
+
s as H,
|
|
653
667
|
d as a
|
|
654
668
|
};
|
|
655
|
-
//# sourceMappingURL=hx-carousel-item-
|
|
669
|
+
//# sourceMappingURL=hx-carousel-item-Be0bC-7o.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hx-carousel-item-Be0bC-7o.js","sources":["../../src/components/hx-carousel/hx-carousel.styles.ts","../../src/components/hx-carousel/hx-carousel.ts","../../src/components/hx-carousel/hx-carousel-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCarouselStyles = css`\n :host {\n display: block;\n position: relative;\n }\n\n /* ─── Base ─── */\n\n .base {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-3, 0.75rem);\n }\n\n :host([orientation='vertical']) .base {\n flex-direction: row;\n }\n\n /* ─── Navigation ─── */\n\n .navigation {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n }\n\n :host([orientation='vertical']) .navigation {\n flex-direction: column;\n }\n\n .nav-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));\n height: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));\n /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);\n border-radius: var(--hx-border-radius-full, 9999px);\n background: var(--hx-color-neutral-0, #fff);\n color: var(--hx-color-neutral-700, #374151);\n cursor: pointer;\n padding: 0;\n transition:\n background-color var(--hx-transition-fast, 0.15s ease),\n color var(--hx-transition-fast, 0.15s ease),\n border-color var(--hx-transition-fast, 0.15s ease);\n flex-shrink: 0;\n }\n\n .nav-btn:hover:not([disabled]) {\n background: var(--hx-color-neutral-50, #f9fafb);\n border-color: var(--hx-color-neutral-400, #9ca3af);\n }\n\n .nav-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .nav-btn[disabled] {\n opacity: var(--hx-opacity-disabled, 0.4);\n cursor: not-allowed;\n }\n\n .nav-btn svg {\n width: 1.25em;\n height: 1.25em;\n }\n\n /* ─── Play/Pause ─── */\n\n .play-pause-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n width: var(--hx-touch-target-min, 2.75rem);\n height: var(--hx-touch-target-min, 2.75rem);\n border: var(--hx-border-width-thin, 1px) solid transparent;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n background: transparent;\n color: var(--hx-color-neutral-500, #6b7280);\n cursor: pointer;\n padding: 0;\n font-size: var(--hx-font-size-sm, 0.875rem);\n transition: background-color var(--hx-transition-fast, 0.15s ease);\n flex-shrink: 0;\n }\n\n .play-pause-btn:hover {\n background: var(--hx-color-neutral-100, #f3f4f6);\n }\n\n .play-pause-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Scroll Container ─── */\n\n .scroll-container-wrapper {\n flex: 1;\n overflow: hidden;\n }\n\n .slide-viewport {\n overflow: hidden;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n .track {\n display: flex;\n transition: transform var(--hx-transition-base, 0.3s ease);\n }\n\n :host([orientation='vertical']) .track {\n flex-direction: column;\n }\n\n /* ─── Pagination ─── */\n\n .pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n flex-wrap: wrap;\n }\n\n :host([orientation='vertical']) .pagination {\n flex-direction: column;\n }\n\n .pagination-item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n padding: 0;\n border: none;\n cursor: pointer;\n background: transparent;\n border-radius: var(--hx-border-radius-full, 9999px);\n }\n\n .pagination-dot {\n display: block;\n width: var(--hx-carousel-pagination-dot-size, 0.5rem);\n height: var(--hx-carousel-pagination-dot-size, 0.5rem);\n border-radius: var(--hx-border-radius-full, 9999px);\n background: var(--hx-color-neutral-300, #d1d5db);\n transition:\n background-color var(--hx-transition-fast, 0.15s ease),\n transform var(--hx-transition-fast, 0.15s ease);\n }\n\n .pagination-item[aria-current='true'] .pagination-dot,\n .pagination-item.is-active .pagination-dot {\n background: var(--hx-color-primary-600, #2563eb);\n transform: scale(1.25);\n }\n\n .pagination-item:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-full, 9999px);\n }\n\n /* ─── Controls row ─── */\n\n .controls {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-3, 0.75rem);\n }\n\n /* ─── Live Region ─── */\n\n .live-region {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .track,\n .nav-btn,\n .pagination-dot,\n .play-pause-btn {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCarouselStyles } from './hx-carousel.styles.js';\nimport type { HelixCarouselItem } from './hx-carousel-item.js';\n\n// ─── Module-level SVG icon constants ───\n\nconst _svgChevronLeft = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"15 18 9 12 15 6\"></polyline>\n</svg>`;\n\nconst _svgChevronUp = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"18 15 12 9 6 15\"></polyline>\n</svg>`;\n\nconst _svgChevronRight = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n</svg>`;\n\nconst _svgChevronDown = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n</svg>`;\n\nconst _svgPlay = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\"\n>\n <polygon points=\"5 3 19 12 5 21 5 3\"></polygon>\n</svg>`;\n\nconst _svgPause = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\"\n>\n <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"></rect>\n <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"></rect>\n</svg>`;\n\n/**\n * A scrollable carousel/slider for images or content slides.\n *\n * @summary Scrollable carousel with navigation, pagination, autoplay, and an accessible label.\n *\n * @tag hx-carousel\n *\n * @slot - `hx-carousel-item` elements (the slides).\n * @slot next-button - Custom next navigation button.\n * @slot previous-button - Custom previous navigation button.\n *\n * @fires {CustomEvent<{index: number, slide: HelixCarouselItem}>} hx-slide-change - Dispatched when the active slide changes.\n *\n * @csspart base - The outer wrapper element.\n * @csspart slide-viewport - The slide viewport/overflow container.\n * @csspart pagination - The pagination dot container.\n * @csspart pagination-item - Individual pagination dot button.\n * @csspart navigation - The previous/next button wrapper.\n * @csspart prev-btn - The previous navigation button.\n * @csspart next-btn - The next navigation button.\n * @csspart play-pause-btn - The autoplay play/pause toggle button.\n *\n * @cssprop [--hx-carousel-gap=0px] - Gap between slides.\n * @cssprop [--hx-carousel-slide-width=100%] - Width override for each slide.\n * @cssprop [--hx-carousel-nav-btn-size=2.5rem] - Size of previous/next navigation buttons.\n * @cssprop [--hx-carousel-pagination-dot-size=0.5rem] - Size of pagination dots.\n */\n@customElement('hx-carousel')\nexport class HelixCarousel extends LitElement {\n static override styles = [tokenStyles, helixCarouselStyles];\n\n /**\n * Accessible label identifying this carousel to assistive technology.\n * When multiple carousels appear on the same page, each must have a unique label.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = 'Carousel';\n\n /**\n * Whether the carousel wraps around from last to first slide and vice-versa.\n * @attr loop\n */\n @property({ type: Boolean, reflect: true })\n loop = false;\n\n /**\n * Whether the carousel auto-advances slides.\n * Automatically pauses on hover, focus, and when prefers-reduced-motion is active.\n * @attr autoplay\n */\n @property({ type: Boolean, reflect: true })\n autoplay = false;\n\n /**\n * Milliseconds between auto-advance transitions.\n * @attr autoplay-interval\n */\n @property({ type: Number, attribute: 'autoplay-interval' })\n autoplayInterval = 3000;\n\n /**\n * Number of slides visible at once.\n * @attr slides-per-page\n */\n @property({ type: Number, attribute: 'slides-per-page' })\n slidesPerPage = 1;\n\n /**\n * Number of slides to advance per navigation action.\n * @attr slides-per-move\n */\n @property({ type: Number, attribute: 'slides-per-move' })\n slidesPerMove = 1;\n\n /**\n * Scroll axis of the carousel.\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Whether click-drag scrolling is enabled.\n * @attr mouse-dragging\n */\n @property({ type: Boolean, attribute: 'mouse-dragging', reflect: true })\n mouseDragging = false;\n\n /**\n * Accessible label for the previous slide button.\n * @attr label-prev-slide\n */\n @property({ type: String, attribute: 'label-prev-slide' })\n labelPrevSlide = 'Previous slide';\n\n /**\n * Accessible label for the next slide button.\n * @attr label-next-slide\n */\n @property({ type: String, attribute: 'label-next-slide' })\n labelNextSlide = 'Next slide';\n\n /**\n * Accessible label for the autoplay pause button.\n * @attr label-pause-autoplay\n */\n @property({ type: String, attribute: 'label-pause-autoplay' })\n labelPauseAutoplay = 'Pause autoplay';\n\n /**\n * Accessible label for the autoplay play button.\n * @attr label-play-autoplay\n */\n @property({ type: String, attribute: 'label-play-autoplay' })\n labelPlayAutoplay = 'Play autoplay';\n\n /**\n * Index of the currently visible slide.\n * @internal\n */\n @state() private _currentIndex = 0;\n /**\n * Array of carousel item elements assigned to the default slot.\n * @internal\n */\n @state() private _slides: HelixCarouselItem[] = [];\n /**\n * Whether the autoplay is currently active and advancing slides.\n * @internal\n */\n @state() private _isPlaying = false;\n /**\n * Text content for the ARIA live region announcing slide changes.\n * @internal\n */\n @state() private _liveText = '';\n @state() private _livePolite = true;\n\n /**\n * Reference to the active autoplay interval timer, or null when stopped.\n * @internal\n */\n private _autoplayTimer: ReturnType<typeof setInterval> | null = null;\n /**\n * Whether the user has requested reduced motion via the OS media preference.\n * @internal\n */\n private _reducedMotion = false;\n /**\n * MediaQueryList instance for monitoring the prefers-reduced-motion media feature.\n * @internal\n */\n private _mql: MediaQueryList | null = null;\n /**\n * Whether the carousel is currently being hovered, used to pause autoplay on hover.\n * @internal\n */\n private _isHovered = false;\n /**\n * Whether a descendant of the carousel currently has focus, used to pause autoplay on focus.\n * @internal\n */\n private _isFocused = false;\n\n // ─── Drag state ───\n /**\n * Pointer coordinate at the start of a mouse drag gesture.\n * @internal\n */\n private _dragStartCoord = 0;\n /**\n * Whether a mouse drag gesture is currently in progress.\n * @internal\n */\n private _isDragging = false;\n /**\n * Whether the pointer has moved beyond the drag threshold during the current drag gesture.\n * @internal\n */\n private _dragMoved = false;\n /**\n * Touch coordinate at the start of a touch swipe gesture.\n * @internal\n */\n private _touchStartCoord = 0;\n /**\n * Whether the touch has moved beyond the swipe threshold during the current touch gesture.\n * @internal\n */\n private _touchMoved = false;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._mql = window.matchMedia('(prefers-reduced-motion: reduce)');\n this._reducedMotion = this._mql.matches;\n this._mql.addEventListener('change', this._handleMotionChange);\n\n this.addEventListener('mouseenter', this._handleMouseEnter);\n this.addEventListener('mouseleave', this._handleMouseLeave);\n this.addEventListener('focusin', this._handleFocusIn);\n this.addEventListener('focusout', this._handleFocusOut);\n this.addEventListener('keydown', this._handleKeydown);\n // Touch events are registered directly on the scroll-container in the template\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._mql?.removeEventListener('change', this._handleMotionChange);\n this._stopAutoplay();\n this.removeEventListener('mouseenter', this._handleMouseEnter);\n this.removeEventListener('mouseleave', this._handleMouseLeave);\n this.removeEventListener('focusin', this._handleFocusIn);\n this.removeEventListener('focusout', this._handleFocusOut);\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n override firstUpdated(): void {\n this._syncSlides();\n if (this.autoplay && !this._reducedMotion) {\n this._startAutoplay();\n }\n }\n\n // ─── Slide Management ───\n\n private _syncSlides(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (!slot) return;\n\n const items = slot\n .assignedElements({ flatten: true })\n .filter((el) => el.tagName.toLowerCase() === 'hx-carousel-item') as HelixCarouselItem[];\n\n this._slides = items;\n\n // Update aria labels on each item\n items.forEach((item, i) => {\n item.slideIndex = i;\n item.totalSlides = items.length;\n const slideWidth = `${100 / this.slidesPerPage}%`;\n (item as HTMLElement).style.setProperty('--_hx-carousel-slide-width', slideWidth);\n });\n\n // Clamp currentIndex if slides changed\n if (this._currentIndex >= items.length) {\n this._currentIndex = Math.max(0, items.length - 1);\n }\n }\n\n private _handleSlotChange(): void {\n this._syncSlides();\n }\n\n // ─── Navigation ───\n\n /**\n * Maximum valid slide index accounting for the number of slides visible per page.\n * @internal\n */\n private get _maxIndex(): number {\n return Math.max(0, this._slides.length - this.slidesPerPage);\n }\n\n goTo(index: number): void {\n if (this._slides.length === 0) return;\n\n let next = index;\n if (this.loop) {\n next = ((index % this._slides.length) + this._slides.length) % this._slides.length;\n } else {\n next = Math.max(0, Math.min(index, this._maxIndex));\n }\n\n if (next === this._currentIndex) return;\n\n this._currentIndex = next;\n this._liveText = `Slide ${next + 1} of ${this._slides.length}`;\n this.dispatchEvent(\n new CustomEvent('hx-slide-change', {\n bubbles: true,\n composed: true,\n detail: { index: next, slide: this._slides[next] },\n }),\n );\n }\n\n next(): void {\n const nextIndex = this._currentIndex + this.slidesPerMove;\n if (!this.loop && nextIndex > this._maxIndex) {\n return;\n }\n this._livePolite = true;\n this.goTo(nextIndex);\n }\n\n previous(): void {\n const prevIndex = this._currentIndex - this.slidesPerMove;\n if (!this.loop && prevIndex < 0) {\n return;\n }\n this._livePolite = true;\n this.goTo(prevIndex);\n }\n\n // ─── Autoplay ───\n\n /**\n * Callback invoked on each autoplay interval tick to advance to the next slide.\n * @internal\n */\n private _autoplayTick = (): void => {\n this._livePolite = false;\n if (this.loop) {\n this.goTo(this._currentIndex + this.slidesPerMove);\n } else if (this._currentIndex < this._maxIndex) {\n this.goTo(this._currentIndex + this.slidesPerMove);\n } else {\n this.goTo(0);\n }\n };\n\n private _startAutoplay(): void {\n if (this._autoplayTimer !== null) return;\n this._isPlaying = true;\n this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval);\n }\n\n private _stopAutoplay(): void {\n if (this._autoplayTimer !== null) {\n clearInterval(this._autoplayTimer);\n this._autoplayTimer = null;\n }\n this._isPlaying = false;\n }\n\n private _toggleAutoplay(): void {\n if (this._isPlaying) {\n this._stopAutoplay();\n } else if (!this._reducedMotion) {\n this._startAutoplay();\n }\n }\n\n private _pauseAutoplay(): void {\n if (!this._isPlaying || this._autoplayTimer === null) return;\n clearInterval(this._autoplayTimer);\n this._autoplayTimer = null;\n }\n\n private _resumeAutoplay(): void {\n if (!this.autoplay || !this._isPlaying || this._reducedMotion) return;\n if (this._autoplayTimer !== null) return;\n this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval);\n }\n\n // ─── Event Handlers ───\n\n /**\n * Handles changes to the prefers-reduced-motion media query, stopping or resuming autoplay accordingly.\n * @internal\n */\n private _handleMotionChange = (e: MediaQueryListEvent): void => {\n this._reducedMotion = e.matches;\n if (this._reducedMotion) {\n this._stopAutoplay();\n } else if (this.autoplay && !this._isHovered && !this._isFocused) {\n this._startAutoplay();\n }\n };\n\n /**\n * Handles the mouseenter event to pause autoplay while the user hovers over the carousel.\n * @internal\n */\n private _handleMouseEnter = (): void => {\n this._isHovered = true;\n this._pauseAutoplay();\n };\n\n /**\n * Handles the mouseleave event to resume autoplay when the user stops hovering.\n * @internal\n */\n private _handleMouseLeave = (): void => {\n this._isHovered = false;\n if (!this._isFocused) {\n this._resumeAutoplay();\n }\n };\n\n /**\n * Handles the focusin event to pause autoplay while a descendant has focus.\n * @internal\n */\n private _handleFocusIn = (): void => {\n this._isFocused = true;\n this._pauseAutoplay();\n };\n\n /**\n * Handles the focusout event to resume autoplay when focus leaves the carousel.\n * @internal\n */\n private _handleFocusOut = (): void => {\n this._isFocused = false;\n if (!this._isHovered) {\n this._resumeAutoplay();\n }\n };\n\n /**\n * Handles keyboard navigation to move between slides using arrow, Home, and End keys.\n * @internal\n */\n private _handleKeydown = (e: KeyboardEvent): void => {\n if (this.orientation === 'horizontal') {\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this.previous();\n } else if (e.key === 'ArrowRight') {\n e.preventDefault();\n this.next();\n }\n } else {\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n this.previous();\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n this.next();\n }\n }\n\n if (e.key === 'Home') {\n e.preventDefault();\n this.goTo(0);\n } else if (e.key === 'End') {\n e.preventDefault();\n this.goTo(this._slides.length - 1);\n }\n };\n\n // ─── Drag Handlers ───\n\n private _handleDragStart(e: MouseEvent): void {\n if (!this.mouseDragging) return;\n this._isDragging = true;\n this._dragMoved = false;\n this._dragStartCoord = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n (e.currentTarget as HTMLElement).style.cursor = 'grabbing';\n e.preventDefault();\n }\n\n private _handleDragMove(e: MouseEvent): void {\n if (!this._isDragging) return;\n const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n const diff = current - this._dragStartCoord;\n if (Math.abs(diff) > 5) {\n this._dragMoved = true;\n }\n }\n\n private _handleDragEnd(e: MouseEvent): void {\n if (!this._isDragging) return;\n const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n const diff = current - this._dragStartCoord;\n const threshold = 50;\n if (this._dragMoved) {\n if (diff > threshold) {\n this.previous();\n } else if (diff < -threshold) {\n this.next();\n }\n }\n this._isDragging = false;\n this._dragMoved = false;\n (e.currentTarget as HTMLElement).style.cursor = '';\n }\n\n // ─── Touch Handlers ───\n\n private _handleTouchStart(e: TouchEvent): void {\n if (!this.mouseDragging) return;\n const touch = e.touches[0];\n if (!touch) return;\n this._isDragging = true;\n this._touchMoved = false;\n this._touchStartCoord = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n }\n\n private _handleTouchMove(e: TouchEvent): void {\n if (!this._isDragging) return;\n const touch = e.touches[0];\n if (!touch) return;\n const current = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n const diff = current - this._touchStartCoord;\n if (Math.abs(diff) > 5) {\n this._touchMoved = true;\n }\n }\n\n private _handleTouchEnd(e: TouchEvent): void {\n if (!this._isDragging) return;\n const touch = e.changedTouches[0];\n if (!touch) return;\n const current = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n const diff = current - this._touchStartCoord;\n const threshold = 50;\n if (this._touchMoved) {\n if (diff > threshold) {\n this.previous();\n } else if (diff < -threshold) {\n this.next();\n }\n }\n this._isDragging = false;\n this._touchMoved = false;\n }\n\n private _goToManual(index: number): void {\n this._livePolite = true;\n this.goTo(index);\n }\n\n // ─── Computed ───\n\n /**\n * CSS transform value applied to the slide track to scroll to the current index.\n * @internal\n */\n private get _trackTransform(): string {\n const slideSize = 100 / this.slidesPerPage;\n const offset = this._currentIndex * slideSize;\n return this.orientation === 'horizontal'\n ? `translateX(-${offset}%)`\n : `translateY(-${offset}%)`;\n }\n\n /**\n * Whether the previous navigation button should be enabled.\n * @internal\n */\n private get _canGoPrev(): boolean {\n return this.loop || this._currentIndex > 0;\n }\n\n /**\n * Whether the next navigation button should be enabled.\n * @internal\n */\n private get _canGoNext(): boolean {\n return this.loop || this._currentIndex < this._maxIndex;\n }\n\n // ─── Render Helpers ───\n\n private _renderNavigation() {\n return html`\n <div class=\"navigation\" part=\"navigation\">\n <slot name=\"previous-button\">\n <button\n class=\"nav-btn\"\n part=\"prev-btn\"\n type=\"button\"\n aria-label=${this.labelPrevSlide}\n ?disabled=${!this._canGoPrev}\n @click=${() => this.previous()}\n >\n ${this._renderPrevIcon()}\n </button>\n </slot>\n ${this.autoplay\n ? html`\n <button\n class=\"play-pause-btn\"\n part=\"play-pause-btn\"\n type=\"button\"\n aria-label=${this._isPlaying ? this.labelPauseAutoplay : this.labelPlayAutoplay}\n @click=${() => this._toggleAutoplay()}\n >\n ${this._isPlaying ? this._renderPauseIcon() : this._renderPlayIcon()}\n </button>\n `\n : nothing}\n <slot name=\"next-button\">\n <button\n class=\"nav-btn\"\n part=\"next-btn\"\n type=\"button\"\n aria-label=${this.labelNextSlide}\n ?disabled=${!this._canGoNext}\n @click=${() => this.next()}\n >\n ${this._renderNextIcon()}\n </button>\n </slot>\n </div>\n `;\n }\n\n private _renderPagination() {\n const count = this._slides.length;\n if (count <= 1) return nothing;\n const dots = Array.from({ length: count }, (_, i) => i);\n return html`\n <div class=\"controls\">\n <div class=\"pagination\" part=\"pagination\">\n ${dots.map(\n (i) => html`\n <button\n class=${classMap({\n 'pagination-item': true,\n 'is-active': i === this._currentIndex,\n })}\n part=\"pagination-item\"\n type=\"button\"\n aria-label=\"Slide ${i + 1} of ${count}\"\n aria-current=${i === this._currentIndex ? 'true' : nothing}\n @click=${() => this._goToManual(i)}\n >\n <span class=\"pagination-dot\"></span>\n </button>\n `,\n )}\n </div>\n </div>\n `;\n }\n\n private _renderPrevIcon() {\n return this.orientation === 'horizontal' ? _svgChevronLeft : _svgChevronUp;\n }\n\n private _renderNextIcon() {\n return this.orientation === 'horizontal' ? _svgChevronRight : _svgChevronDown;\n }\n\n private _renderPlayIcon() {\n return _svgPlay;\n }\n\n private _renderPauseIcon() {\n return _svgPause;\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div\n class=\"base\"\n part=\"base\"\n role=\"region\"\n aria-label=${this.label}\n aria-roledescription=\"carousel\"\n >\n <div\n class=\"live-region\"\n role=\"status\"\n aria-live=${this._livePolite ? 'polite' : 'off'}\n aria-atomic=\"true\"\n >\n ${this._liveText}\n </div>\n ${this._renderNavigation()}\n <div class=\"scroll-container-wrapper\">\n <div\n class=\"slide-viewport\"\n part=\"slide-viewport\"\n @mousedown=${this._handleDragStart}\n @mousemove=${this._handleDragMove}\n @mouseup=${this._handleDragEnd}\n @mouseleave=${this._handleDragEnd}\n @touchstart=${this._handleTouchStart}\n @touchmove=${this._handleTouchMove}\n @touchend=${this._handleTouchEnd}\n >\n <div class=\"track\" style=\"transform: ${this._trackTransform};\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n </div>\n ${this._renderPagination()}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-carousel': HelixCarousel;\n }\n}\n","import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\n\n/**\n * A wrapper for individual carousel slides.\n *\n * @summary Individual slide wrapper for use inside hx-carousel.\n *\n * @tag hx-carousel-item\n *\n * @slot - Slide content.\n */\n@customElement('hx-carousel-item')\nexport class HelixCarouselItem extends LitElement {\n static override styles = [\n tokenStyles,\n css`\n :host {\n display: block;\n flex-shrink: 0;\n width: var(--_hx-carousel-slide-width, 100%);\n box-sizing: border-box;\n }\n\n .slide-group {\n height: 100%;\n outline: none;\n }\n\n /*\n * Show focus ring for both keyboard-initiated focus (:focus-visible) and\n * programmatic focus (.focus() calls from JS). tabindex=\"-1\" elements only\n * receive focus programmatically, so :focus-visible may not trigger in all\n * browsers — :focus-within on the host ensures the ring is always visible.\n */\n .slide-group:focus-visible,\n .slide-group:focus {\n outline: var(--hx-focus-ring-width) solid var(--hx-focus-ring-color);\n outline-offset: var(--hx-focus-ring-offset);\n }\n `,\n ];\n\n /**\n * The 0-based index of this slide within the carousel. Set by hx-carousel.\n * @attr slide-index\n */\n @property({ type: Number, attribute: 'slide-index' })\n slideIndex = 0;\n\n /**\n * Total number of slides in the carousel. Set by hx-carousel.\n * @attr total-slides\n */\n @property({ type: Number, attribute: 'total-slides' })\n totalSlides = 0;\n\n override render() {\n const label = `Slide ${this.slideIndex + 1} of ${this.totalSlides}`;\n return html`\n <div class=\"slide-group\" role=\"group\" aria-label=${label} tabindex=\"-1\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-carousel-item': HelixCarouselItem;\n }\n}\n"],"names":["helixCarouselStyles","css","_svgChevronLeft","html","_svgChevronUp","_svgChevronRight","_svgChevronDown","_svgPlay","_svgPause","HelixCarousel","LitElement","e","_a","slot","items","el","item","i","slideWidth","index","next","nextIndex","prevIndex","diff","threshold","touch","slideSize","offset","nothing","count","dots","_","classMap","tokenStyles","__decorateClass","property","state","customElement","HelixCarouselItem","label"],"mappings":";;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACOnC,MAAMC,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAalBC,IAAgBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}
|
|
@@ -31,6 +31,8 @@ const g = p`
|
|
|
31
31
|
display: inline-flex;
|
|
32
32
|
align-items: flex-start;
|
|
33
33
|
gap: var(--hx-space-2, 0.5rem);
|
|
34
|
+
/* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height */
|
|
35
|
+
min-height: var(--hx-touch-target-min, 2.75rem);
|
|
34
36
|
cursor: pointer;
|
|
35
37
|
}
|
|
36
38
|
|
|
@@ -433,4 +435,4 @@ r = t([
|
|
|
433
435
|
export {
|
|
434
436
|
r as H
|
|
435
437
|
};
|
|
436
|
-
//# sourceMappingURL=hx-checkbox-
|
|
438
|
+
//# sourceMappingURL=hx-checkbox-CuaJqEo7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hx-checkbox-CuaJqEo7.js","sources":["../../src/components/hx-checkbox/hx-checkbox.styles.ts","../../src/components/hx-checkbox/hx-checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCheckboxStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n .checkbox {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n /* ─── Control (checkbox + label row) ─── */\n\n .checkbox__control {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--hx-space-2, 0.5rem);\n /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height */\n min-height: var(--hx-touch-target-min, 2.75rem);\n cursor: pointer;\n }\n\n :host([disabled]) .checkbox__control {\n cursor: not-allowed;\n }\n\n /* ─── Hidden Native Input ─── */\n\n .checkbox__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Visual Checkbox ─── */\n\n .checkbox__box {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n border: var(--hx-border-width-medium, 2px) solid\n var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));\n border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));\n background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n margin-top: var(--hx-space-px, 1px);\n }\n\n /* ─── Focus Ring ─── */\n\n .checkbox__input:focus-visible ~ .checkbox__box {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Checked State ─── */\n\n .checkbox--checked .checkbox__box {\n background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\n border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\n }\n\n /* ─── Indeterminate State ─── */\n\n .checkbox--indeterminate .checkbox__box {\n background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\n border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\n }\n\n /* ─── Error State ─── */\n\n .checkbox--error .checkbox__box {\n border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n }\n\n .checkbox--error.checkbox--checked .checkbox__box,\n .checkbox--error.checkbox--indeterminate .checkbox__box {\n background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n }\n\n /* ─── Hover ─── */\n\n /* P1-03: use component token so consumer overrides of --hx-checkbox-border-color work on hover */\n .checkbox__control:hover .checkbox__box {\n border-color: var(\n --hx-checkbox-hover-border-color,\n var(--hx-checkbox-border-color, var(--hx-color-primary-500, #2563eb))\n );\n }\n\n .checkbox--checked .checkbox__control:hover .checkbox__box {\n filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n }\n\n .checkbox--error .checkbox__control:hover .checkbox__box {\n border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n }\n\n /* ─── Checkmark Icon ─── */\n\n .checkbox__icon {\n display: none;\n width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n fill: none;\n stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n .checkbox--checked .checkbox__icon--check {\n display: block;\n }\n\n .checkbox--indeterminate .checkbox__icon--indeterminate {\n display: block;\n }\n\n /* ─── Label ─── */\n\n .checkbox__label {\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));\n line-height: var(--hx-line-height-normal, 1.5);\n user-select: none;\n -webkit-user-select: none;\n }\n\n .checkbox__required-marker {\n color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n /* ─── Help Text & Error Messages ─── */\n\n .checkbox__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #6c757d));\n line-height: var(--hx-line-height-normal, 1.5);\n padding-left: calc(\n var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n );\n }\n\n .checkbox__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal, 1.5);\n padding-left: calc(\n var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n );\n }\n\n /* ─── Size Variants ─── */\n\n :host([hx-size='sm']) {\n --hx-checkbox-size: var(--hx-size-4, 1rem);\n }\n\n :host([hx-size='sm']) .checkbox__label {\n font-size: var(--hx-font-size-xs, 0.75rem);\n }\n\n :host([hx-size='sm']) .checkbox__help-text,\n :host([hx-size='sm']) .checkbox__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n padding-left: calc(var(--hx-size-4, 1rem) + var(--hx-space-2, 0.5rem));\n }\n\n :host([hx-size='lg']) {\n --hx-checkbox-size: var(--hx-size-6, 1.5rem);\n }\n\n :host([hx-size='lg']) .checkbox__label {\n font-size: var(--hx-font-size-base, 1rem);\n }\n\n :host([hx-size='lg']) .checkbox__help-text,\n :host([hx-size='lg']) .checkbox__error {\n font-size: var(--hx-font-size-sm, 0.875rem);\n padding-left: calc(var(--hx-size-6, 1.5rem) + var(--hx-space-2, 0.5rem));\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .checkbox__box {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCheckboxStyles } from './hx-checkbox.styles.js';\n\n// P2-05: monotonic counter — collision-free, deterministic, SSR-safe\nlet _checkboxCounter = 0;\n\n/**\n * A checkbox component with label, validation, and form association.\n *\n * @summary Form-associated checkbox with built-in label, error, and help text.\n *\n * @tag hx-checkbox\n *\n * @slot - Custom label content (overrides the label property). Rich HTML allowed — Drupal can include links in consent labels.\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} hx-change - Dispatched when the checkbox is toggled.\n *\n * @csspart checkbox - The visual checkbox element.\n * @csspart checkmark - The SVG checkmark icon inside the checkbox.\n * @csspart label - The label element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n * @csspart control - The wrapper around checkbox and label.\n *\n * @cssprop [--hx-checkbox-size=var(--hx-size-5, 1.25rem)] - Checkbox dimensions.\n * @cssprop [--hx-checkbox-bg=var(--hx-color-neutral-0, #ffffff)] - Unchecked background color.\n * @cssprop [--hx-checkbox-border-color=var(--hx-color-neutral-300, #ced4da)] - Checkbox border color.\n * @cssprop [--hx-checkbox-border-radius=var(--hx-border-radius-sm, 0.25rem)] - Checkbox border radius.\n * @cssprop [--hx-checkbox-checked-bg=var(--hx-color-primary-500, #2563EB)] - Checked background color.\n * @cssprop [--hx-checkbox-checked-border-color=var(--hx-color-primary-500, #2563EB)] - Checked border color.\n * @cssprop [--hx-checkbox-checkmark-color=var(--hx-color-neutral-0, #ffffff)] - Checkmark color.\n * @cssprop [--hx-checkbox-focus-ring-color=var(--hx-focus-ring-color, #2563EB)] - Focus ring color.\n * @cssprop [--hx-checkbox-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n * @cssprop [--hx-checkbox-help-text-color=var(--hx-color-neutral-500, #6c757d)] - Help text color.\n * @cssprop [--hx-checkbox-hover-border-color=var(--hx-checkbox-border-color)] - Border color on hover.\n * @cssprop [--hx-checkbox-error-color=var(--hx-color-error-500, #dc3545)] - Error state color.\n */\n@customElement('hx-checkbox')\nexport class HelixCheckbox extends LitElement {\n static override styles = [tokenStyles, helixCheckboxStyles];\n\n // P0-02: observe aria-label on host to forward to inner input\n static override get observedAttributes(): string[] {\n return [...(super.observedAttributes ?? []), 'aria-label'];\n }\n\n override attributeChangedCallback(name: string, old: string | null, next: string | null): void {\n super.attributeChangedCallback(name, old, next);\n if (name === 'aria-label') this.requestUpdate();\n }\n\n // ─── Form Association ───\n\n static formAssociated = true;\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /**\n * Whether the checkbox is checked.\n * @attr checked\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * Whether the checkbox is in an indeterminate state (e.g., for \"select all\" patterns).\n * @attr indeterminate\n */\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n /**\n * Whether the checkbox is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the checkbox is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * The name of the checkbox, used for form submission.\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * The value submitted when the checkbox is checked.\n * @attr value\n */\n @property({ type: String })\n value = 'on';\n\n /**\n * The visible label text for the checkbox.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Error message to display. When set, the checkbox enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the checkbox for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * The size of the checkbox.\n * @attr hx-size\n */\n @property({ type: String, attribute: 'hx-size', reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n @query('.checkbox__input')\n private _inputEl: HTMLInputElement | undefined;\n\n @state() private _hasErrorSlot = false;\n\n // ─── Slot Handlers ───\n\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('checked') || changedProperties.has('value')) {\n this._internals.setFormValue(this.checked ? this.value : null);\n this._updateValidity();\n }\n if (changedProperties.has('required')) {\n this._updateValidity();\n }\n }\n\n // ─── Form Integration ───\n\n /** Returns the associated form element, if any. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** Returns the validation message. */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Returns the ValidityState object. */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Checks whether the checkbox satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n private _updateValidity(): void {\n if (this.required && !this.checked) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || 'This field is required.',\n this._inputEl ?? undefined,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /** Called by the form when it resets. */\n formResetCallback(): void {\n this.checked = false;\n this.indeterminate = false;\n this._internals.setFormValue(null);\n }\n\n /** Called when the form restores state (e.g., back/forward navigation). */\n formStateRestoreCallback(state: string | File | FormData | null, _reason: string): void {\n this.checked = typeof state === 'string' && state === this.value;\n }\n\n /** Called when a parent fieldset is disabled/enabled. */\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Event Handling ───\n\n private _handleChange(): void {\n if (this.disabled) return;\n\n this.indeterminate = false;\n this.checked = !this.checked;\n\n this._internals.setFormValue(this.checked ? this.value : null);\n this._updateValidity();\n\n /**\n * Dispatched when the checkbox is toggled.\n * @event hx-change\n */\n this.dispatchEvent(\n new CustomEvent('hx-change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.checked, value: this.value },\n }),\n );\n }\n\n private _handleKeyDown(e: KeyboardEvent): void {\n if (e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n this._handleChange();\n }\n }\n\n // ─── Public Methods ───\n\n /** Moves focus to the checkbox input element. */\n override focus(options?: FocusOptions): void {\n this._inputEl?.focus(options);\n }\n\n // ─── Render ───\n\n // P2-05: monotonic counter — collision-free and deterministic\n private _id = `hx-checkbox-${++_checkboxCounter}`;\n private _helpTextId = `${this._id}-help`;\n private _errorId = `${this._id}-error`;\n private _labelId = `${this._id}-label`;\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n\n const containerClasses = {\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--error': hasError,\n 'checkbox--disabled': this.disabled,\n 'checkbox--required': this.required,\n 'checkbox--sm': this.size === 'sm',\n 'checkbox--md': this.size === 'md',\n 'checkbox--lg': this.size === 'lg',\n };\n\n // P2-06: simplified — hasError already includes _hasErrorSlot\n const describedBy =\n [hasError ? this._errorId : null, this.helpText && !hasError ? this._helpTextId : null]\n .filter(Boolean)\n .join(' ') || undefined;\n\n // P0-02: forward aria-label from host to inner input\n const hostAriaLabel = this.getAttribute('aria-label') ?? undefined;\n\n return html`\n <div class=${classMap(containerClasses)}>\n <label part=\"control\" class=\"checkbox__control\" @click=${this._handleChange}>\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n id=${this._id}\n .checked=${live(this.checked)}\n .indeterminate=${live(this.indeterminate)}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name || undefined)}\n .value=${this.value}\n aria-checked=${this.indeterminate ? 'mixed' : nothing}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-label=${ifDefined(hostAriaLabel)}\n aria-labelledby=${ifDefined(!hostAriaLabel ? this._labelId : undefined)}\n @keydown=${this._handleKeyDown}\n @click=${(e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n @change=${(e: Event) => e.stopPropagation()}\n />\n\n <span part=\"checkbox\" class=\"checkbox__box\">\n <svg\n part=\"checkmark\"\n class=\"checkbox__icon checkbox__icon--check\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <polyline points=\"3.5 8 6.5 11 12.5 5\"></polyline>\n </svg>\n <svg\n class=\"checkbox__icon checkbox__icon--indeterminate\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <line x1=\"4\" y1=\"8\" x2=\"12\" y2=\"8\"></line>\n </svg>\n </span>\n\n <span part=\"label\" class=\"checkbox__label\" id=${this._labelId}>\n <slot>${this.label}</slot>\n ${this.required\n ? html`<span class=\"checkbox__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </span>\n </label>\n\n <!--\n P0-01: wrapper div always owns _errorId so aria-describedby works regardless\n of whether error content comes from the .error property or the named slot.\n P1-02: role=\"status\" (implicit aria-live=\"polite\") replaces role=\"alert\" +\n aria-live=\"polite\" which was semantically contradictory.\n -->\n <div\n part=\"error\"\n class=\"checkbox__error\"\n id=${this._errorId}\n role=\"status\"\n ?hidden=${!hasError}\n >\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>\n </div>\n\n ${this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"checkbox__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\n/** Canonical type alias for the hx-checkbox component. */\nexport type HxCheckbox = HelixCheckbox;\n\n/** @deprecated Use {@link HxCheckbox} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcCheckbox = HelixCheckbox;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-checkbox': HelixCheckbox;\n }\n}\n"],"names":["helixCheckboxStyles","css","_checkboxCounter","HelixCheckbox","LitElement","name","old","next","slot","changedProperties","state","_reason","disabled","options","_a","hasError","containerClasses","describedBy","hostAriaLabel","html","classMap","live","ifDefined","nothing","e","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}
|