@helixui/library 3.0.0-next.65 → 3.1.0-next.66
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 +6549 -318
- package/dist/components/hx-accordion/hx-accordion.d.ts +3 -0
- package/dist/components/hx-accordion/hx-accordion.d.ts.map +1 -1
- package/dist/components/hx-action-bar/hx-action-bar.d.ts +14 -0
- package/dist/components/hx-action-bar/hx-action-bar.d.ts.map +1 -1
- package/dist/components/hx-action-bar/index.js +1 -1
- package/dist/components/hx-alert/hx-alert.d.ts +36 -0
- package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
- package/dist/components/hx-avatar/hx-avatar.d.ts +17 -0
- package/dist/components/hx-avatar/hx-avatar.d.ts.map +1 -1
- package/dist/components/hx-badge/hx-badge.d.ts +35 -0
- package/dist/components/hx-badge/hx-badge.d.ts.map +1 -1
- package/dist/components/hx-banner/hx-banner.d.ts +34 -0
- package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts +3 -0
- 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 +42 -0
- package/dist/components/hx-button/hx-button.d.ts.map +1 -1
- package/dist/components/hx-button/index.js +1 -1
- package/dist/components/hx-button-group/hx-button-group.d.ts +2 -0
- package/dist/components/hx-button-group/hx-button-group.d.ts.map +1 -1
- package/dist/components/hx-card/hx-card.d.ts +28 -0
- package/dist/components/hx-card/hx-card.d.ts.map +1 -1
- package/dist/components/hx-card/index.js +1 -1
- package/dist/components/hx-carousel/hx-carousel.d.ts +25 -0
- package/dist/components/hx-carousel/hx-carousel.d.ts.map +1 -1
- package/dist/components/hx-checkbox/hx-checkbox.d.ts +31 -0
- package/dist/components/hx-checkbox/hx-checkbox.d.ts.map +1 -1
- package/dist/components/hx-checkbox/index.js +1 -1
- package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts +14 -0
- package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts.map +1 -1
- package/dist/components/hx-checkbox-group/index.js +1 -1
- package/dist/components/hx-clinical-status/hx-clinical-status.d.ts +37 -0
- package/dist/components/hx-clinical-status/hx-clinical-status.d.ts.map +1 -1
- package/dist/components/hx-code-snippet/hx-code-snippet.d.ts +35 -0
- package/dist/components/hx-code-snippet/hx-code-snippet.d.ts.map +1 -1
- package/dist/components/hx-color-picker/hx-color-picker.d.ts +29 -0
- package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
- package/dist/components/hx-combobox/hx-combobox.d.ts +49 -0
- package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
- package/dist/components/hx-combobox/index.js +1 -1
- package/dist/components/hx-container/hx-container.d.ts +5 -0
- package/dist/components/hx-container/hx-container.d.ts.map +1 -1
- package/dist/components/hx-copy-button/hx-copy-button.d.ts +24 -0
- package/dist/components/hx-copy-button/hx-copy-button.d.ts.map +1 -1
- package/dist/components/hx-counter/hx-counter.d.ts +7 -0
- package/dist/components/hx-counter/hx-counter.d.ts.map +1 -1
- package/dist/components/hx-data-table/hx-data-table.d.ts +29 -0
- package/dist/components/hx-data-table/hx-data-table.d.ts.map +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.d.ts +44 -0
- package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
- package/dist/components/hx-date-picker/index.js +1 -1
- package/dist/components/hx-dialog/hx-dialog.d.ts +31 -0
- package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
- package/dist/components/hx-dialog/index.js +1 -1
- package/dist/components/hx-divider/hx-divider.d.ts +9 -0
- package/dist/components/hx-divider/hx-divider.d.ts.map +1 -1
- package/dist/components/hx-divider/index.js +1 -1
- package/dist/components/hx-drawer/hx-drawer.d.ts +30 -0
- 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 +6 -0
- 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-field/hx-field.d.ts +15 -0
- package/dist/components/hx-field/hx-field.d.ts.map +1 -1
- package/dist/components/hx-field/index.js +1 -1
- package/dist/components/hx-field-label/hx-field-label.d.ts +11 -0
- package/dist/components/hx-field-label/hx-field-label.d.ts.map +1 -1
- package/dist/components/hx-field-label/index.js +1 -1
- package/dist/components/hx-file-upload/hx-file-upload.d.ts +35 -0
- package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
- package/dist/components/hx-file-upload/index.js +1 -1
- package/dist/components/hx-grid/hx-grid.d.ts +5 -0
- package/dist/components/hx-grid/hx-grid.d.ts.map +1 -1
- package/dist/components/hx-help-text/hx-help-text.d.ts +8 -0
- package/dist/components/hx-help-text/hx-help-text.d.ts.map +1 -1
- package/dist/components/hx-help-text/index.js +1 -1
- package/dist/components/hx-icon/hx-icon.d.ts +5 -0
- package/dist/components/hx-icon/hx-icon.d.ts.map +1 -1
- package/dist/components/hx-icon-button/hx-icon-button.d.ts +27 -0
- package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
- package/dist/components/hx-icon-button/index.js +1 -1
- package/dist/components/hx-image/hx-image.d.ts +4 -0
- package/dist/components/hx-image/hx-image.d.ts.map +1 -1
- package/dist/components/hx-link/hx-link.d.ts +15 -0
- package/dist/components/hx-link/hx-link.d.ts.map +1 -1
- package/dist/components/hx-link/index.js +1 -1
- package/dist/components/hx-list/hx-list.d.ts +3 -0
- package/dist/components/hx-list/hx-list.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu.d.ts +6 -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 +23 -0
- package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
- package/dist/components/hx-nav/hx-nav.d.ts +29 -0
- package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
- package/dist/components/hx-number-input/hx-number-input.d.ts +34 -0
- package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
- package/dist/components/hx-number-input/index.js +1 -1
- package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts +26 -0
- package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts.map +1 -1
- package/dist/components/hx-overflow-menu/index.js +1 -1
- package/dist/components/hx-pagination/hx-pagination.d.ts +21 -0
- 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 +23 -0
- package/dist/components/hx-patient-banner/hx-patient-banner.d.ts.map +1 -1
- package/dist/components/hx-phi-field/hx-phi-field.d.ts +14 -0
- package/dist/components/hx-phi-field/hx-phi-field.d.ts.map +1 -1
- package/dist/components/hx-phi-field/index.js +1 -1
- package/dist/components/hx-popover/hx-popover.d.ts +15 -0
- package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
- package/dist/components/hx-popover/index.js +1 -1
- package/dist/components/hx-popup/hx-popup.d.ts +1 -0
- package/dist/components/hx-popup/hx-popup.d.ts.map +1 -1
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts +17 -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-progress-ring/hx-progress-ring.d.ts +15 -0
- package/dist/components/hx-progress-ring/hx-progress-ring.d.ts.map +1 -1
- package/dist/components/hx-prose/hx-prose.d.ts +2 -0
- package/dist/components/hx-prose/hx-prose.d.ts.map +1 -1
- package/dist/components/hx-radio-group/hx-radio-group.d.ts +14 -0
- package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
- package/dist/components/hx-radio-group/index.js +1 -1
- package/dist/components/hx-rating/hx-rating.d.ts +13 -0
- package/dist/components/hx-rating/hx-rating.d.ts.map +1 -1
- package/dist/components/hx-select/hx-select.d.ts +43 -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.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.d.ts +19 -0
- 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-skeleton/hx-skeleton.d.ts +5 -0
- package/dist/components/hx-skeleton/hx-skeleton.d.ts.map +1 -1
- package/dist/components/hx-slider/hx-slider.d.ts +38 -0
- 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-spinner/hx-spinner.d.ts +10 -0
- package/dist/components/hx-spinner/hx-spinner.d.ts.map +1 -1
- package/dist/components/hx-split-button/hx-split-button.d.ts +39 -0
- package/dist/components/hx-split-button/hx-split-button.d.ts.map +1 -1
- package/dist/components/hx-split-button/index.js +1 -1
- package/dist/components/hx-split-panel/hx-split-panel.d.ts +12 -0
- package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
- package/dist/components/hx-split-panel/index.js +1 -1
- package/dist/components/hx-stack/hx-stack.d.ts +5 -0
- package/dist/components/hx-stack/hx-stack.d.ts.map +1 -1
- package/dist/components/hx-stat/hx-stat.d.ts +24 -0
- package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
- package/dist/components/hx-status-indicator/hx-status-indicator.d.ts +13 -0
- package/dist/components/hx-status-indicator/hx-status-indicator.d.ts.map +1 -1
- package/dist/components/hx-steps/hx-steps.d.ts +15 -0
- package/dist/components/hx-steps/hx-steps.d.ts.map +1 -1
- package/dist/components/hx-structured-list/hx-structured-list.d.ts +7 -0
- package/dist/components/hx-structured-list/hx-structured-list.d.ts.map +1 -1
- package/dist/components/hx-switch/hx-switch.d.ts +42 -0
- package/dist/components/hx-switch/hx-switch.d.ts.map +1 -1
- package/dist/components/hx-switch/index.js +1 -1
- package/dist/components/hx-table/hx-table.d.ts +14 -0
- package/dist/components/hx-table/hx-table.d.ts.map +1 -1
- package/dist/components/hx-tabs/hx-tabs.d.ts +4 -0
- package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
- package/dist/components/hx-tag/hx-tag.d.ts +36 -0
- package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
- package/dist/components/hx-text/hx-text.d.ts +22 -0
- package/dist/components/hx-text/hx-text.d.ts.map +1 -1
- package/dist/components/hx-text-input/hx-text-input.d.ts +30 -0
- package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
- package/dist/components/hx-text-input/index.js +1 -1
- package/dist/components/hx-textarea/hx-textarea.d.ts +27 -0
- package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
- package/dist/components/hx-textarea/index.js +1 -1
- package/dist/components/hx-theme/hx-theme.d.ts +3 -0
- package/dist/components/hx-theme/hx-theme.d.ts.map +1 -1
- package/dist/components/hx-theme/index.js +1 -1
- package/dist/components/hx-time-picker/hx-time-picker.d.ts +32 -0
- 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 +24 -0
- package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
- package/dist/components/hx-toggle-button/hx-toggle-button.d.ts +35 -0
- package/dist/components/hx-toggle-button/hx-toggle-button.d.ts.map +1 -1
- package/dist/components/hx-toggle-button/hx-toggle-button.styles.d.ts.map +1 -1
- package/dist/components/hx-toggle-button/index.js +1 -1
- package/dist/components/hx-tooltip/hx-tooltip.d.ts +13 -0
- package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
- package/dist/components/hx-tooltip/index.js +1 -1
- package/dist/components/hx-top-nav/hx-top-nav.d.ts +21 -0
- package/dist/components/hx-top-nav/hx-top-nav.d.ts.map +1 -1
- package/dist/components/hx-top-nav/index.js +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/css/helix-all.css +263 -253
- package/dist/css/helix-core.css +26 -26
- package/dist/css/helix-data.css +8 -7
- package/dist/css/helix-feedback.css +2 -2
- package/dist/css/helix-forms.css +137 -131
- package/dist/css/helix-layout.css +3 -3
- package/dist/css/helix-navigation.css +35 -35
- package/dist/css/helix-overlay.css +32 -29
- package/dist/css/helix-tokens.css +12 -0
- package/dist/css/helix-utility.css +18 -18
- package/dist/css/hx-action-bar.css +3 -3
- package/dist/css/hx-button.css +10 -10
- package/dist/css/hx-card.css +6 -6
- package/dist/css/hx-checkbox-group.css +2 -2
- package/dist/css/hx-checkbox.css +5 -5
- package/dist/css/hx-combobox.css +13 -13
- package/dist/css/hx-data-table.css +8 -7
- package/dist/css/hx-date-picker.css +20 -20
- package/dist/css/hx-dialog.css +10 -10
- package/dist/css/hx-divider.css +2 -2
- package/dist/css/hx-drawer.css +12 -9
- package/dist/css/hx-dropdown.css +2 -2
- package/dist/css/hx-field-label.css +2 -2
- package/dist/css/hx-field.css +2 -2
- package/dist/css/hx-file-upload.css +11 -11
- package/dist/css/hx-help-text.css +2 -2
- package/dist/css/hx-icon-button.css +6 -6
- package/dist/css/hx-link.css +2 -2
- package/dist/css/hx-menu.css +2 -2
- package/dist/css/hx-number-input.css +12 -12
- package/dist/css/hx-overflow-menu.css +7 -7
- package/dist/css/hx-pagination.css +10 -10
- package/dist/css/hx-phi-field.css +2 -2
- package/dist/css/hx-popover.css +5 -5
- package/dist/css/hx-progress-bar.css +2 -2
- package/dist/css/hx-radio-group.css +2 -2
- package/dist/css/hx-select.css +11 -8
- package/dist/css/hx-side-nav.css +9 -9
- package/dist/css/hx-slider.css +9 -9
- package/dist/css/hx-split-button.css +15 -15
- package/dist/css/hx-split-panel.css +3 -3
- package/dist/css/hx-switch.css +4 -4
- package/dist/css/hx-text-input.css +7 -7
- package/dist/css/hx-textarea.css +7 -7
- package/dist/css/hx-time-picker.css +11 -11
- package/dist/css/hx-toggle-button.css +17 -14
- package/dist/css/hx-tooltip.css +3 -3
- package/dist/css/hx-top-nav.css +7 -7
- package/dist/css/index.css +1 -1
- package/dist/css/manifest.json +162 -163
- package/dist/index.js +40 -40
- package/dist/shared/hx-accordion-Wt52OOZD.js.map +1 -1
- package/dist/shared/{hx-action-bar-BKMADbHj.js → hx-action-bar-6UzmViHI.js} +4 -4
- package/dist/shared/hx-action-bar-6UzmViHI.js.map +1 -0
- package/dist/shared/hx-alert-D7n94HwI.js.map +1 -1
- package/dist/shared/hx-avatar-iLYzu8MJ.js.map +1 -1
- package/dist/shared/hx-badge-CVCmMPyW.js.map +1 -1
- package/dist/shared/hx-banner-C_He7Tr4.js.map +1 -1
- package/dist/shared/{hx-breadcrumb-item-CldCwD1d.js → hx-breadcrumb-item-BgG5RcmA.js} +3 -3
- package/dist/shared/hx-breadcrumb-item-BgG5RcmA.js.map +1 -0
- package/dist/shared/{hx-button-Ddl-T6T-.js → hx-button-CQZswjtQ.js} +15 -15
- package/dist/shared/hx-button-CQZswjtQ.js.map +1 -0
- package/dist/shared/hx-button-group-BJOGWoMa.js.map +1 -1
- package/dist/shared/{hx-card-ycveujjL.js → hx-card-Dy_FuLfS.js} +23 -23
- package/dist/shared/hx-card-Dy_FuLfS.js.map +1 -0
- package/dist/shared/hx-carousel-item-D_dCv61-.js.map +1 -1
- package/dist/shared/{hx-checkbox-DkkoWoye.js → hx-checkbox-ZKjOF7_3.js} +17 -17
- package/dist/shared/{hx-checkbox-DkkoWoye.js.map → hx-checkbox-ZKjOF7_3.js.map} +1 -1
- package/dist/shared/{hx-checkbox-group-C3poJ-Zw.js → hx-checkbox-group-XjOBHLiP.js} +3 -3
- package/dist/shared/hx-checkbox-group-XjOBHLiP.js.map +1 -0
- package/dist/shared/hx-clinical-status-BS5lcddT.js.map +1 -1
- package/dist/shared/hx-code-snippet-B7wUKzyb.js.map +1 -1
- package/dist/shared/hx-color-picker-DBaKTVLr.js.map +1 -1
- package/dist/shared/{hx-combobox-BmgYT7Ar.js → hx-combobox-DLwnvHVd.js} +17 -17
- package/dist/shared/hx-combobox-DLwnvHVd.js.map +1 -0
- package/dist/shared/hx-container-DVI7sxfX.js.map +1 -1
- package/dist/shared/hx-copy-button-8deNUdwP.js.map +1 -1
- package/dist/shared/hx-counter-CKfl_g8K.js.map +1 -1
- package/dist/shared/{hx-data-table-B6h0RPn0.js → hx-data-table-CnLxo9PH.js} +77 -76
- package/dist/shared/hx-data-table-CnLxo9PH.js.map +1 -0
- package/dist/shared/{hx-date-picker-Dq2Nb68_.js → hx-date-picker-D7H7CsVH.js} +21 -21
- package/dist/shared/hx-date-picker-D7H7CsVH.js.map +1 -0
- package/dist/shared/{hx-dialog-CvIlY0Tc.js → hx-dialog-BW-jetzN.js} +33 -33
- package/dist/shared/hx-dialog-BW-jetzN.js.map +1 -0
- package/dist/shared/{hx-divider-DwpOrzMW.js → hx-divider-CvyUVcp-.js} +13 -13
- package/dist/shared/hx-divider-CvyUVcp-.js.map +1 -0
- package/dist/shared/{hx-drawer-Cx2ZJhBe.js → hx-drawer-BT52I4tk.js} +13 -10
- package/dist/shared/hx-drawer-BT52I4tk.js.map +1 -0
- package/dist/shared/{hx-dropdown-BjDrPUq5.js → hx-dropdown-BpVpL6Dz.js} +3 -3
- package/dist/shared/{hx-dropdown-BjDrPUq5.js.map → hx-dropdown-BpVpL6Dz.js.map} +1 -1
- package/dist/shared/{hx-field-Dp3qQMut.js → hx-field-BX4zE3z5.js} +7 -7
- package/dist/shared/hx-field-BX4zE3z5.js.map +1 -0
- package/dist/shared/{hx-field-label-BC8QViXv.js → hx-field-label-DtJzb1r3.js} +8 -8
- package/dist/shared/hx-field-label-DtJzb1r3.js.map +1 -0
- package/dist/shared/{hx-file-upload-B6Yl1u0i.js → hx-file-upload-BNuepoGn.js} +34 -34
- package/dist/shared/hx-file-upload-BNuepoGn.js.map +1 -0
- package/dist/shared/hx-grid-CXZf3jeK.js.map +1 -1
- package/dist/shared/{hx-help-text-D7eytSim.js → hx-help-text-Br3igJv5.js} +7 -7
- package/dist/shared/hx-help-text-Br3igJv5.js.map +1 -0
- package/dist/shared/hx-icon-CcyDPDYY.js.map +1 -1
- package/dist/shared/{hx-icon-button-BHneqPCU.js → hx-icon-button-CqXH5Wwb.js} +7 -7
- package/dist/shared/hx-icon-button-CqXH5Wwb.js.map +1 -0
- package/dist/shared/hx-image-2gt14zZd.js.map +1 -1
- package/dist/shared/{hx-link-BESrWK8M.js → hx-link-Bem4Gn68.js} +8 -8
- package/dist/shared/hx-link-Bem4Gn68.js.map +1 -0
- package/dist/shared/hx-list-_9qVv02L.js.map +1 -1
- package/dist/shared/{hx-menu-divider-Ck-9Os1t.js → hx-menu-divider-DsHWyPHy.js} +37 -37
- package/dist/shared/hx-menu-divider-DsHWyPHy.js.map +1 -0
- package/dist/shared/hx-meter-TbROk-dw.js.map +1 -1
- package/dist/shared/hx-nav-BcYDmjf7.js.map +1 -1
- package/dist/shared/{hx-nav-item-pqPasRUm.js → hx-nav-item-BTMMQv6c.js} +34 -30
- package/dist/shared/hx-nav-item-BTMMQv6c.js.map +1 -0
- package/dist/shared/{hx-number-input-mOIZ3-46.js → hx-number-input-l6jeaGWW.js} +71 -71
- package/dist/shared/hx-number-input-l6jeaGWW.js.map +1 -0
- package/dist/shared/{hx-overflow-menu-Dprb9lnT.js → hx-overflow-menu-DJ4qpgmi.js} +12 -12
- package/dist/shared/hx-overflow-menu-DJ4qpgmi.js.map +1 -0
- package/dist/shared/{hx-pagination-AguTQjYC.js → hx-pagination-5FeVFIve.js} +64 -64
- package/dist/shared/hx-pagination-5FeVFIve.js.map +1 -0
- package/dist/shared/hx-patient-banner-uE6gqLpT.js.map +1 -1
- package/dist/shared/{hx-phi-field-BC_XowhC.js → hx-phi-field-DxeWcRm9.js} +3 -3
- package/dist/shared/hx-phi-field-DxeWcRm9.js.map +1 -0
- package/dist/shared/{hx-popover-B2_203ct.js → hx-popover-C05QcD9m.js} +6 -6
- package/dist/shared/hx-popover-C05QcD9m.js.map +1 -0
- package/dist/shared/hx-popup-DZXpsJ1R.js.map +1 -1
- package/dist/shared/{hx-progress-bar-KjEkEJLy.js → hx-progress-bar-CJdwAeDg.js} +11 -11
- package/dist/shared/hx-progress-bar-CJdwAeDg.js.map +1 -0
- package/dist/shared/hx-progress-ring-3zMwvrwD.js.map +1 -1
- package/dist/shared/hx-prose-BCtK7YL6.js.map +1 -1
- package/dist/shared/{hx-radio-BBC5qZgE.js → hx-radio-QHrhL908.js} +11 -11
- package/dist/shared/hx-radio-QHrhL908.js.map +1 -0
- package/dist/shared/hx-rating-C3E3ENJb.js.map +1 -1
- package/dist/shared/{hx-select-CixTo7jp.js → hx-select-BuMvRDkY.js} +47 -44
- package/dist/shared/hx-select-BuMvRDkY.js.map +1 -0
- package/dist/shared/hx-skeleton-LxkI0pxr.js.map +1 -1
- package/dist/shared/{hx-slider-DFHuzF3N.js → hx-slider-wcF_oyNJ.js} +41 -41
- package/dist/shared/hx-slider-wcF_oyNJ.js.map +1 -0
- package/dist/shared/hx-spinner-BKjuCdZB.js.map +1 -1
- package/dist/shared/{hx-split-button-CGcJMmCG.js → hx-split-button-CEkQqbF9.js} +32 -32
- package/dist/shared/hx-split-button-CEkQqbF9.js.map +1 -0
- package/dist/shared/{hx-split-panel-C-1R10Mc.js → hx-split-panel-BymHlV5e.js} +4 -4
- package/dist/shared/hx-split-panel-BymHlV5e.js.map +1 -0
- package/dist/shared/hx-stack-DGfcOfWJ.js.map +1 -1
- package/dist/shared/hx-stat-BTpykQAt.js.map +1 -1
- package/dist/shared/hx-status-indicator-X2QEWNFt.js.map +1 -1
- package/dist/shared/hx-step-CRNQlmSo.js.map +1 -1
- package/dist/shared/hx-structured-list-CqNbaEXg.js.map +1 -1
- package/dist/shared/{hx-switch-DqOD9JR7.js → hx-switch-CbunfMHW.js} +5 -5
- package/dist/shared/hx-switch-CbunfMHW.js.map +1 -0
- package/dist/shared/hx-tab-panel-BIzKfW5i.js.map +1 -1
- package/dist/shared/hx-tag-CgnrNnte.js.map +1 -1
- package/dist/shared/hx-td-Bra35cH4.js.map +1 -1
- package/dist/shared/hx-text-DMC2CPlL.js.map +1 -1
- package/dist/shared/{hx-text-input--q0GH78x.js → hx-text-input-eSPVURd5.js} +8 -8
- package/dist/shared/hx-text-input-eSPVURd5.js.map +1 -0
- package/dist/shared/{hx-textarea-CK621vSL.js → hx-textarea-C4DjRmo4.js} +12 -12
- package/dist/shared/hx-textarea-C4DjRmo4.js.map +1 -0
- package/dist/shared/{hx-theme-DfEy-SJA.js → hx-theme-DP4oPU1i.js} +44 -35
- package/dist/shared/hx-theme-DP4oPU1i.js.map +1 -0
- package/dist/shared/{hx-time-picker-tPUfgElQ.js → hx-time-picker-BtbHX7A4.js} +28 -28
- package/dist/shared/hx-time-picker-BtbHX7A4.js.map +1 -0
- package/dist/shared/{hx-toggle-button-L-uBJr-a.js → hx-toggle-button-FOvw-ebx.js} +26 -23
- package/dist/shared/hx-toggle-button-FOvw-ebx.js.map +1 -0
- package/dist/shared/{hx-tooltip-B_zfKvwc.js → hx-tooltip-BoZi2crX.js} +4 -4
- package/dist/shared/hx-tooltip-BoZi2crX.js.map +1 -0
- package/dist/shared/{hx-top-nav-CATbRvIv.js → hx-top-nav-Cd9zvv1B.js} +20 -20
- package/dist/shared/hx-top-nav-Cd9zvv1B.js.map +1 -0
- package/dist/shared/hx-tree-item-A45WCiBu.js.map +1 -1
- package/dist/shared/toast-factory-BPPnG3mM.js.map +1 -1
- package/figma-inventory.json +8526 -511
- package/package.json +2 -2
- package/dist/shared/hx-action-bar-BKMADbHj.js.map +0 -1
- package/dist/shared/hx-breadcrumb-item-CldCwD1d.js.map +0 -1
- package/dist/shared/hx-button-Ddl-T6T-.js.map +0 -1
- package/dist/shared/hx-card-ycveujjL.js.map +0 -1
- package/dist/shared/hx-checkbox-group-C3poJ-Zw.js.map +0 -1
- package/dist/shared/hx-combobox-BmgYT7Ar.js.map +0 -1
- package/dist/shared/hx-data-table-B6h0RPn0.js.map +0 -1
- package/dist/shared/hx-date-picker-Dq2Nb68_.js.map +0 -1
- package/dist/shared/hx-dialog-CvIlY0Tc.js.map +0 -1
- package/dist/shared/hx-divider-DwpOrzMW.js.map +0 -1
- package/dist/shared/hx-drawer-Cx2ZJhBe.js.map +0 -1
- package/dist/shared/hx-field-Dp3qQMut.js.map +0 -1
- package/dist/shared/hx-field-label-BC8QViXv.js.map +0 -1
- package/dist/shared/hx-file-upload-B6Yl1u0i.js.map +0 -1
- package/dist/shared/hx-help-text-D7eytSim.js.map +0 -1
- package/dist/shared/hx-icon-button-BHneqPCU.js.map +0 -1
- package/dist/shared/hx-link-BESrWK8M.js.map +0 -1
- package/dist/shared/hx-menu-divider-Ck-9Os1t.js.map +0 -1
- package/dist/shared/hx-nav-item-pqPasRUm.js.map +0 -1
- package/dist/shared/hx-number-input-mOIZ3-46.js.map +0 -1
- package/dist/shared/hx-overflow-menu-Dprb9lnT.js.map +0 -1
- package/dist/shared/hx-pagination-AguTQjYC.js.map +0 -1
- package/dist/shared/hx-phi-field-BC_XowhC.js.map +0 -1
- package/dist/shared/hx-popover-B2_203ct.js.map +0 -1
- package/dist/shared/hx-progress-bar-KjEkEJLy.js.map +0 -1
- package/dist/shared/hx-radio-BBC5qZgE.js.map +0 -1
- package/dist/shared/hx-select-CixTo7jp.js.map +0 -1
- package/dist/shared/hx-slider-DFHuzF3N.js.map +0 -1
- package/dist/shared/hx-split-button-CGcJMmCG.js.map +0 -1
- package/dist/shared/hx-split-panel-C-1R10Mc.js.map +0 -1
- package/dist/shared/hx-switch-DqOD9JR7.js.map +0 -1
- package/dist/shared/hx-text-input--q0GH78x.js.map +0 -1
- package/dist/shared/hx-textarea-CK621vSL.js.map +0 -1
- package/dist/shared/hx-theme-DfEy-SJA.js.map +0 -1
- package/dist/shared/hx-time-picker-tPUfgElQ.js.map +0 -1
- package/dist/shared/hx-toggle-button-L-uBJr-a.js.map +0 -1
- package/dist/shared/hx-tooltip-B_zfKvwc.js.map +0 -1
- package/dist/shared/hx-top-nav-CATbRvIv.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@helixui/library",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.1.0-next.66",
|
|
4
4
|
"description": "Enterprise Web Component Library built with Lit 3.x",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"customElements": "custom-elements.json",
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"lit": "^3.3.2",
|
|
62
|
-
"@helixui/tokens": "3.0.0-next.
|
|
62
|
+
"@helixui/tokens": "3.0.0-next.66"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
65
|
"@floating-ui/dom": "^1.7.6"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-action-bar-BKMADbHj.js","sources":["../../src/components/hx-action-bar/hx-action-bar.styles.ts","../../src/components/hx-action-bar/hx-action-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixActionBarStyles = css`\n :host {\n display: block;\n }\n\n /* ─── Base ─── */\n\n .base {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--hx-action-bar-gap, var(--hx-space-2, 0.5rem));\n padding: var(--hx-action-bar-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n background: var(--hx-action-bar-bg, transparent);\n border: var(--hx-action-bar-border, none);\n box-sizing: border-box;\n width: 100%;\n }\n\n /* ─── Sticky (top) ─── */\n\n .base--sticky {\n position: sticky;\n top: 0;\n padding-top: max(var(--hx-action-bar-padding-block-start, 0px), env(safe-area-inset-top, 0px));\n z-index: var(--hx-action-bar-z-index, 10);\n /*\n * Consumers: when this bar is sticky, add scroll-padding-top to the scroll container\n * equal to the bar's rendered height so anchor targets are not hidden behind the bar.\n * Example: .scroll-container { scroll-padding-top: 2.5rem; }\n */\n }\n\n /* ─── Bottom sticky ─── */\n\n .base--bottom {\n position: sticky;\n bottom: 0;\n /*\n * Respect iOS home-indicator safe area on devices with notch/home bar.\n * Falls back to 0px on devices that do not support env().\n */\n padding-bottom: max(\n var(--hx-action-bar-padding-block-end, 0px),\n env(safe-area-inset-bottom, 0px)\n );\n z-index: var(--hx-action-bar-z-index, 10);\n }\n\n /* ─── Variant: outlined ─── */\n\n .base--outlined {\n background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #ffffff));\n border: var(\n --hx-action-bar-border,\n var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0)\n );\n border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n /* ─── Variant: filled ─── */\n\n .base--filled {\n background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f8fafc));\n border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n /* ─── Size modifiers ─── */\n\n .base--sm {\n padding: var(--hx-action-bar-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n gap: var(--hx-action-bar-gap, var(--hx-space-1, 0.25rem));\n min-height: var(--hx-size-8, 2rem);\n }\n\n .base--md {\n min-height: var(--hx-size-10, 2.5rem);\n }\n\n .base--lg {\n padding: var(--hx-action-bar-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n gap: var(--hx-action-bar-gap, var(--hx-space-3, 0.75rem));\n min-height: var(--hx-size-12, 3rem);\n }\n\n /* ─── Sections ─── */\n\n .section {\n display: flex;\n align-items: center;\n gap: inherit;\n }\n\n /*\n * Equal flex-basis on start and end guarantees the center section is visually centered\n * within the full bar width, regardless of how wide start and end content are.\n */\n .section--start {\n flex: 1 1 0;\n justify-content: flex-start;\n }\n\n .section--center {\n flex: 0 0 auto;\n justify-content: center;\n }\n\n .section--end {\n flex: 1 1 0;\n justify-content: flex-end;\n }\n\n /* ─── Slotted content ─── */\n\n ::slotted(*) {\n flex-shrink: 0;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n /* Outlined variant: border is already present and will be honored by the browser */\n .base--outlined {\n border: 1px solid CanvasText;\n }\n\n /* Filled variant: background is suppressed — add border to maintain visual separation */\n .base--filled {\n border: 1px solid CanvasText;\n }\n }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixActionBarStyles } from './hx-action-bar.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// Re-export size type for external consumers.\nexport type ActionBarSize = 'sm' | 'md' | 'lg';\n\n/**\n * A horizontal toolbar container for grouping related action buttons and controls.\n * Implements the ARIA toolbar pattern with roving tabindex keyboard navigation.\n *\n * @summary Horizontal action bar for grouping related controls.\n *\n * @tag hx-action-bar\n *\n * @slot start - Left-aligned actions.\n * @slot - Center content (default slot).\n * @slot end - Right-aligned actions.\n * @slot overflow - Actions revealed when the bar is constrained for space.\n *\n * @csspart base - The root toolbar container element.\n * @csspart start - The start (left) slot wrapper.\n * @csspart center - The center (default) slot wrapper.\n * @csspart end - The end (right) slot wrapper.\n * @csspart overflow - The overflow slot wrapper (hidden when no overflow content).\n *\n * @cssprop [--hx-action-bar-bg=transparent] - Bar background color (default variant).\n * @cssprop [--hx-action-bar-border=none] - Bar border (default variant).\n * @cssprop [--hx-action-bar-padding=var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)] - Inner padding.\n * @cssprop [--hx-action-bar-gap=var(--hx-space-2,0.5rem)] - Gap between slotted items.\n * @cssprop [--hx-action-bar-z-index=10] - Z-index when sticky or bottom position.\n *\n * @attr {string} accessible-label - Identifies the toolbar to assistive technology.\n * When multiple toolbars appear on the same page, each must have a unique, descriptive label.\n * Falls back to the native `aria-label` attribute if not set.\n *\n * @example\n * ```html\n * <hx-action-bar aria-label=\"Patient actions\">\n * <hx-button slot=\"start\">Save</hx-button>\n * <hx-button slot=\"end\" variant=\"ghost\">Cancel</hx-button>\n * </hx-action-bar>\n * ```\n */\n@customElement('hx-action-bar')\nexport class HelixActionBar extends HelixElement {\n static override styles = [helixActionBarStyles];\n\n /**\n * Size of the action bar — propagated as a data attribute to slotted children.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Visual variant controlling the bar background.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'outlined' | 'filled' = 'default';\n\n /**\n * Position and sticky behavior of the action bar.\n * - `top` — normal flow (default)\n * - `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n * scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n * - `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support\n * @attr position\n */\n @property({ type: String, reflect: true })\n position: 'top' | 'bottom' | 'sticky' = 'top';\n\n // The deprecated `sticky` boolean property has been removed in 3.0.0.\n // Use `position=\"sticky\"` instead.\n\n /**\n * Accessible label for the toolbar.\n * Required when multiple toolbars appear on the same page.\n *\n * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n * The `accessible-label` attribute takes precedence when both are set.\n *\n * Previously this was exposed as the `ariaLabel` JS property, which shadowed\n * the native `HTMLElement.ariaLabel`. That shadowing is removed; use\n * `accessibleLabel` or the HTML attributes instead.\n *\n * @attr accessible-label\n */\n @property({ attribute: 'accessible-label' })\n accessibleLabel: string = '';\n\n /**\n * Observed mirror of the host's `aria-label` attribute so Lit re-renders\n * when consumers set `aria-label` (the standard HTML pattern).\n * @internal\n */\n @property({ attribute: 'aria-label' })\n private _ariaLabelAttr: string = '';\n\n /**\n * Returns the effective label for the toolbar, checking accessible-label first,\n * then the aria-label attribute, falling back to 'Actions'.\n * @internal\n */\n private get _effectiveLabel(): string {\n return this.accessibleLabel || this._ariaLabelAttr || 'Actions';\n }\n\n /** Cached list of focusable items — invalidated on slot change. */\n /** @internal */\n private _focusableCache: HTMLElement[] | null = null;\n\n /** Whether the overflow slot has assigned content. * @internal\n */\n @state()\n private _hasOverflow = false;\n\n // ─── Lifecycle ───\n\n /** Arrow function field — stable reference for add/removeEventListener. */\n /** @internal */\n private _handleKeydown = (e: KeyboardEvent): void => {\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n this._moveFocus('next');\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this._moveFocus('prev');\n } else if (e.key === 'Home') {\n e.preventDefault();\n // Move directly to first item — do NOT call _moveFocus which would visit other items first.\n const items = this._getFocusableItems();\n if (items.length) {\n items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n items[0]?.focus();\n }\n } else if (e.key === 'End') {\n e.preventDefault();\n const items = this._getFocusableItems();\n const last = items.length - 1;\n if (items.length) {\n items.forEach((el, i) => el.setAttribute('tabindex', i === last ? '0' : '-1'));\n items[last]?.focus();\n }\n }\n };\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-action-bar', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as ActionBarSize;\n }\n // Prevent dual aria-label announcement: the host carries the consumer's\n // aria-label attribute while the inner div[role=\"toolbar\"] receives the\n // same value. Setting role=\"none\" on the host hides it from the\n // accessibility tree so only the toolbar is announced.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'none');\n } else if (this.getAttribute('role') !== 'none') {\n devWarn(\n 'hx-action-bar',\n `Setting role=\"${this.getAttribute('role')}\" on the host creates a duplicate toolbar announcement. ` +\n 'The shadow DOM already contains role=\"toolbar\". Set role=\"none\" on the host to suppress it.',\n );\n }\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override firstUpdated(): void {\n // Slot assignments are complete by firstUpdated; initialize roving tabindex\n // immediately rather than waiting for the async slotchange event.\n this._initRovingTabindex();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n // ─── Focusable item discovery ───\n\n /** @internal */\n private _isFocusable(el: HTMLElement): boolean {\n // Check disabled via DOM attribute (native elements) or property (custom elements)\n if (el.hasAttribute('disabled')) return false;\n const elWithDisabled = el as HTMLElement & { disabled?: boolean };\n if (elWithDisabled.disabled === true) return false;\n\n // Use the IDL tabIndex property — covers both DOM attribute and ElementInternals settings.\n // Custom elements (e.g. hx-button) that set tabIndex via ElementInternals are discoverable.\n if (el.tabIndex >= 0) return true;\n\n const tag = el.tagName.toLowerCase();\n return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';\n }\n\n /** @internal */\n private _getFocusableItems(): HTMLElement[] {\n if (this._focusableCache) return this._focusableCache;\n\n const slots = this.shadowRoot?.querySelectorAll('slot') ?? [];\n const items: HTMLElement[] = [];\n\n for (const slot of Array.from(slots)) {\n const assigned = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n for (const el of assigned) {\n if (!(el instanceof HTMLElement)) continue;\n if (this._isFocusable(el)) {\n // Element is itself focusable — include it and do NOT also recurse into its children\n // to prevent double-counting compound components (e.g. <a><button>).\n items.push(el);\n } else {\n // Element is a non-focusable wrapper (e.g. <div>, <span>) — find focusable children.\n const descendants = el.querySelectorAll<HTMLElement>('*');\n for (const d of Array.from(descendants)) {\n if (this._isFocusable(d)) {\n items.push(d);\n }\n }\n }\n }\n }\n\n this._focusableCache = items;\n return items;\n }\n\n // ─── Roving tabindex helpers ───\n\n /** @internal */\n private _initRovingTabindex(): void {\n this._focusableCache = null; // invalidate cache on slot change\n const items = this._getFocusableItems();\n if (!items.length) return;\n // Find the currently active item. If none exists (e.g. first render or active item was\n // removed), fall back to index 0. Then set ALL items explicitly so newly added items and\n // items whose tabindex changed externally are always in a correct state.\n const activeIndex = items.findIndex((el) => el.getAttribute('tabindex') === '0');\n const targetIndex = activeIndex === -1 ? 0 : activeIndex;\n items.forEach((el, i) => el.setAttribute('tabindex', i === targetIndex ? '0' : '-1'));\n }\n\n /** @internal */\n private _moveFocus(direction: 'next' | 'prev'): void {\n const items = this._getFocusableItems();\n if (!items.length) return;\n\n const focused = document.activeElement as HTMLElement | null;\n const currentIndex = items.indexOf(focused as HTMLElement);\n\n let nextIndex: number;\n if (direction === 'next') {\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n } else {\n nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n }\n\n items.forEach((el, i) => {\n el.setAttribute('tabindex', i === nextIndex ? '0' : '-1');\n });\n\n items[nextIndex]?.focus();\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n if (slot.name === 'overflow') {\n this._hasOverflow = slot.assignedElements({ flatten: true }).length > 0;\n }\n this._initRovingTabindex();\n }\n\n // ─── Render ───\n\n override render() {\n const isSticky = this.position === 'sticky';\n const isBottom = this.position === 'bottom';\n const positionClass = isSticky ? ' base--sticky' : isBottom ? ' base--bottom' : '';\n\n return html`\n <div\n part=\"base\"\n role=\"toolbar\"\n aria-label=${this._effectiveLabel}\n aria-orientation=\"horizontal\"\n class=\"base base--${this.size} base--${this.variant}${positionClass}\"\n >\n <div part=\"start\" class=\"section section--start\">\n <slot name=\"start\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"center\" class=\"section section--center\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"end\" class=\"section section--end\">\n <slot name=\"end\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"overflow\" class=\"section section--overflow\" ?hidden=${!this._hasOverflow}>\n <slot name=\"overflow\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-action-bar': HelixActionBar;\n }\n}\n"],"names":["helixActionBarStyles","css","HelixActionBar","HelixElement","items","el","i","_a","last","_b","legacySize","devWarn","tag","slots","slot","assigned","descendants","activeIndex","targetIndex","direction","focused","currentIndex","nextIndex","isSticky","isBottom","positionClass","html","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-breadcrumb-item-CldCwD1d.js","sources":["../../src/components/hx-breadcrumb/hx-breadcrumb.styles.ts","../../src/components/hx-breadcrumb/hx-breadcrumb.ts","../../src/components/hx-breadcrumb/hx-breadcrumb-item.styles.ts","../../src/components/hx-breadcrumb/hx-breadcrumb-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixBreadcrumbStyles = css`\n :host {\n display: block;\n font-family: var(\n --hx-breadcrumb-font-family,\n var(--hx-font-family-sans, system-ui, sans-serif)\n );\n font-size: var(--hx-breadcrumb-font-size, var(--hx-font-size-sm, 0.875rem));\n }\n\n [part='nav'] {\n /* nav landmark — no additional styling needed */\n }\n\n [part='list'] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: 0;\n }\n\n /* Hide middle items when collapsed via maxItems */\n ::slotted([data-bc-hidden]) {\n display: none;\n }\n\n /*\n * Ellipsis ordering when collapsed (FS-014 fix):\n * The ellipsis <hx-breadcrumb-item> lives in shadow DOM to avoid mutating\n * the consumer's light DOM. CSS order places it between the first item\n * (order: 0, default) and the last item (order: 2) in the flex <ol>.\n */\n .hx-bc-ellipsis {\n order: 1;\n }\n\n ::slotted([data-bc-last]) {\n order: 2;\n }\n\n /* Visually hide the separator slot — used only to read text content.\n * display:none is intentional: the slot contains no interactive or focusable\n * content. If a future change adds focusable elements to this slot, switch to\n * visibility:hidden + position:absolute to preserve focus reachability. */\n .separator-slot {\n display: none;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n /*\n * hx-breadcrumb is a nav container. Link colors and separators are handled\n * by hx-breadcrumb-item's own forced-colors block. No additional overrides needed\n * at the container level.\n */\n @media (forced-colors: active) {\n :host {\n forced-color-adjust: auto;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixBreadcrumbStyles } from './hx-breadcrumb.styles.js';\n\n/** Typed schema.org ListItem entry for JSON-LD BreadcrumbList structured data. */\ninterface JsonLdListItem {\n '@type': string;\n position: number;\n name: string;\n item?: string;\n}\n\nconst _nextBreadcrumbId = createIdCounter('hx-breadcrumb');\n\n/**\n * Hierarchical page path navigation showing current location in site structure.\n *\n * @summary Navigation breadcrumb showing the page hierarchy. Works with Drupal's breadcrumb system.\n *\n * @tag hx-breadcrumb\n *\n * @slot - Default slot for hx-breadcrumb-item children.\n * @slot separator - Optional separator element. Its text content overrides the `separator` property.\n *\n * @csspart nav - The nav landmark element.\n * @csspart list - The ordered list containing items.\n *\n * @cssprop [--hx-breadcrumb-separator-content='/'] - Separator character between items.\n * NOTE: If overriding this custom property directly in CSS (rather than via the `separator`\n * attribute), the value MUST be quoted: `--hx-breadcrumb-separator-content: \">\"`. An unquoted\n * value is invalid for the CSS `content` property and will silently render nothing.\n * @cssprop [--hx-breadcrumb-separator-color=var(--hx-color-neutral-400)] - Separator color.\n * @cssprop [--hx-breadcrumb-separator-gap=var(--hx-space-1)] - Horizontal gap around separators.\n * @cssprop [--hx-breadcrumb-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-breadcrumb-link-color=var(--hx-color-primary-600)] - Link color.\n * @cssprop [--hx-breadcrumb-link-hover-color=var(--hx-color-primary-700)] - Link hover color.\n * @cssprop [--hx-breadcrumb-text-color=var(--hx-color-neutral-700)] - Current page text color.\n * @cssprop [--hx-breadcrumb-item-max-width] - Max-width for item text truncation (e.g. `12rem`).\n */\n@customElement('hx-breadcrumb')\nexport class HelixBreadcrumb extends HelixElement {\n static override styles = [helixBreadcrumbStyles];\n\n /**\n * The separator character displayed between breadcrumb items.\n * @attr separator\n */\n @property({ type: String })\n separator = '/';\n\n /**\n * The accessible label for the nav landmark.\n * @attr label\n */\n @property({ type: String })\n label = 'Breadcrumb';\n\n /**\n * Maximum number of items to show before collapsing middle items with an ellipsis.\n * Set to 0 (default) to show all items. The ellipsis is a keyboard-accessible\n * button; activating it expands the full breadcrumb by setting maxItems to 0.\n * @attr max-items\n */\n @property({ type: Number, attribute: 'max-items' })\n maxItems = 0;\n\n /**\n * Accessible label for the expand ellipsis button. Override for i18n.\n * @attr label-ellipsis\n */\n @property({ attribute: 'label-ellipsis' }) labelEllipsis = 'Show all breadcrumb items';\n\n /**\n * When true, injects a JSON-LD BreadcrumbList structured data script into the document head.\n *\n * NOTE: Drupal manages `<head>` content via its own render pipeline. Injecting a\n * `<script>` directly via `document.head.appendChild()` in a Drupal context:\n * 1. Bypasses Drupal's deduplication and `hook_html_head_alter()` hook.\n * 2. Is not cacheable by Drupal's page cache.\n * 3. Will be wiped on BigPipe partial page replacements.\n *\n * For Drupal integrations, leave `json-ld` false and use the structured data\n * Twig template instead (see `hx-breadcrumb.twig` in the component directory).\n *\n * @attr json-ld\n */\n @property({ type: Boolean, attribute: 'json-ld' })\n jsonLd = false;\n\n /**\n * Whether the ellipsis expand button is currently shown (shadow DOM rendered).\n * Driven by maxItems collapse logic; replaces the old light-DOM ellipsis injection.\n * @internal\n */\n @state() private _showEllipsis = false;\n /** @internal */\n private _jsonLdScript: HTMLScriptElement | null = null;\n\n /**\n * Tracks which items had their `current` attribute set by this component\n * (as opposed to set by a consumer/Drupal template). This lets us re-evaluate\n * positional current-page detection on each slotchange without incorrectly\n * treating a previously component-set `current` attribute as a consumer-set\n * explicit override.\n * @internal\n */\n private readonly _managedCurrentItems = new WeakSet<Element>();\n\n /**\n * Stable per-instance ID used to tag the injected script element so that\n * multiple hx-breadcrumb instances on the same page don't produce conflicting\n * or duplicate structured-data blocks. Each instance owns exactly one script\n * tag identified by this ID; any stale tag from a previous render cycle is\n * removed before a new one is inserted.\n *\n * Uses a static counter (not Math.random()) so IDs are deterministic across\n * server and client renders, enabling SSR hydration matching.\n * @internal\n */\n private readonly _jsonLdId = `${_nextBreadcrumbId()}-ld`;\n\n // ─── Item Helpers ───\n\n /**\n * Returns only real breadcrumb items, excluding the managed ellipsis element.\n * @internal\n */\n private _getBreadcrumbItems(slot: HTMLSlotElement): Element[] {\n return slot\n .assignedElements({ flatten: true })\n .filter(\n (el) =>\n el.tagName.toLowerCase() === 'hx-breadcrumb-item' &&\n !el.classList.contains('hx-bc-ellipsis'),\n );\n }\n\n /**\n * Applies aria/state attributes to the item list.\n *\n * Current-page detection: if any item has an explicit `current` attribute\n * (e.g. set by a Drupal Twig template), that item is treated as the current\n * page. Otherwise the last item is the current page (default behaviour).\n *\n * This separation allows Drupal to control current-page marking without\n * relying on item order.\n * @internal\n */\n private _applyItemAttributes(items: Element[]): void {\n // Detect consumer-set 'current' attributes. An item has an explicit consumer\n // current if it has the 'current' attribute AND the component did not set it\n // (tracked via _managedCurrentItems). This prevents component-managed state\n // from being misread as a consumer override on subsequent slotchange events.\n const hasExplicitCurrent = items.some(\n (el) => el.hasAttribute('current') && !this._managedCurrentItems.has(el),\n );\n\n items.forEach((item, i) => {\n const el = item as HTMLElement;\n const isLast = i === items.length - 1;\n\n // Separator hiding: always positional — last item has no trailing separator.\n if (isLast) {\n el.setAttribute('data-bc-last', '');\n } else {\n el.removeAttribute('data-bc-last');\n }\n\n // Current-page marker: explicit consumer attribute wins over positional last.\n // The item component renders aria-current=\"page\" on its inner element\n // based on this attribute (see hx-breadcrumb-item.ts).\n if (!hasExplicitCurrent) {\n if (isLast) {\n el.setAttribute('current', '');\n this._managedCurrentItems.add(el);\n } else {\n el.removeAttribute('current');\n this._managedCurrentItems.delete(el);\n }\n }\n // When hasExplicitCurrent is true, leave 'current' attributes as-is so\n // consumer or Drupal template markup is not overridden.\n });\n }\n\n // ─── Slot Handling ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n if (!(e.target instanceof HTMLSlotElement)) return;\n const items = this._getBreadcrumbItems(e.target);\n\n // Handle collapse behaviour\n if (this.maxItems > 0 && items.length > this.maxItems) {\n this._applyCollapse(items);\n } else {\n this._removeCollapse(items);\n }\n\n this._applyItemAttributes(items);\n\n if (this.jsonLd) {\n this._updateJsonLd(items);\n }\n }\n\n /** @internal */\n private _handleSeparatorSlotChange(e: Event): void {\n if (!(e.target instanceof HTMLSlotElement)) return;\n const assigned = e.target.assignedElements({ flatten: true });\n if (assigned.length > 0) {\n const text = (assigned[0] as HTMLElement).textContent?.trim() ?? '';\n this.style.setProperty('--hx-breadcrumb-separator-content', JSON.stringify(text));\n }\n }\n\n // ─── Collapse ───\n\n /** @internal */\n private _applyCollapse(items: Element[]): void {\n // Show only first and last; hide all middle items via data attribute.\n // The ellipsis is rendered in shadow DOM (see render()) to avoid mutating\n // the consumer's light DOM structure (FS-014).\n items.forEach((item, i) => {\n const el = item as HTMLElement;\n if (i === 0 || i === items.length - 1) {\n el.removeAttribute('data-bc-hidden');\n } else {\n el.setAttribute('data-bc-hidden', '');\n }\n });\n\n this._showEllipsis = true;\n }\n\n /** @internal */\n private _removeCollapse(items: Element[]): void {\n items.forEach((item) => {\n (item as HTMLElement).removeAttribute('data-bc-hidden');\n });\n\n this._showEllipsis = false;\n }\n\n /**\n * Expands a collapsed breadcrumb by resetting maxItems to 0.\n * Called by the ellipsis expand button (click or Enter/Space).\n * @internal\n */\n private _expandBreadcrumb(): void {\n this.maxItems = 0;\n // updated() will detect the maxItems change and call _removeCollapse.\n }\n\n // ─── JSON-LD ───\n\n /**\n * JSON-LD ListItem entry with typed fields to avoid Record<string, unknown>.\n * @internal\n */\n private _buildListItem(item: Element, position: number): JsonLdListItem {\n const href = (item as HTMLElement).getAttribute('href');\n const name = (item as HTMLElement).textContent?.trim() ?? '';\n const entry: JsonLdListItem = {\n '@type': 'ListItem',\n position,\n name,\n };\n if (href) entry.item = href;\n return entry;\n }\n\n /** @internal */\n private _updateJsonLd(items: Element[]): void {\n const schema = {\n '@context': 'https://schema.org',\n '@type': 'BreadcrumbList',\n itemListElement: items.map((item, i) => this._buildListItem(item, i + 1)),\n };\n\n // Guard for SSR — document is unavailable server-side\n if (typeof document === 'undefined') return;\n\n if (!this._jsonLdScript) {\n // Dedup guard: remove any stale script with this instance's ID before\n // creating a fresh one. This handles the edge case where the element was\n // reconnected to the DOM after being disconnected without the script\n // reference being re-established.\n document.getElementById(this._jsonLdId)?.remove();\n\n this._jsonLdScript = document.createElement('script');\n this._jsonLdScript.type = 'application/ld+json';\n this._jsonLdScript.id = this._jsonLdId;\n this._jsonLdScript.setAttribute('data-hx-breadcrumb', '');\n document.head.appendChild(this._jsonLdScript);\n }\n\n this._jsonLdScript.textContent = JSON.stringify(schema);\n }\n\n /** @internal */\n private _removeJsonLd(): void {\n this._jsonLdScript?.remove();\n this._jsonLdScript = null;\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Do NOT set role=\"list\" on the host. The shadow-DOM <nav><ol> provides\n // both navigation landmark and list semantics. Setting role=\"list\" on\n // the host conflicts with the <nav> child — axe-core flags\n // aria-required-children because a list cannot own a navigation landmark.\n // Slotted items no longer need role=\"listitem\" either; the native <ol>\n // handles list semantics in the composed accessibility tree.\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._removeJsonLd();\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('separator')) {\n // JSON.stringify wraps the string in quotes so the value is valid\n // for use in the CSS `content` property (e.g. '/' becomes '\"/\"').\n this.style.setProperty('--hx-breadcrumb-separator-content', JSON.stringify(this.separator));\n }\n\n if (changedProperties.has('maxItems')) {\n // Re-evaluate collapse state when maxItems changes programmatically\n // (e.g. when the expand button resets maxItems to 0).\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) {\n const items = this._getBreadcrumbItems(slot);\n if (this.maxItems > 0 && items.length > this.maxItems) {\n this._applyCollapse(items);\n } else {\n this._removeCollapse(items);\n }\n this._applyItemAttributes(items);\n }\n }\n\n if (changedProperties.has('jsonLd')) {\n if (this.jsonLd) {\n // json-ld toggled on after initial render — inject script immediately.\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) {\n this._updateJsonLd(this._getBreadcrumbItems(slot));\n }\n } else {\n // json-ld toggled off — remove existing script.\n this._removeJsonLd();\n }\n }\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <nav part=\"nav\" aria-label=${this.label}>\n <ol part=\"list\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n ${this._showEllipsis\n ? html`\n <hx-breadcrumb-item class=\"hx-bc-ellipsis\">\n <button\n type=\"button\"\n aria-label=${this.labelEllipsis}\n @click=${this._expandBreadcrumb}\n >\n …\n </button>\n </hx-breadcrumb-item>\n `\n : nothing}\n </ol>\n </nav>\n <slot\n name=\"separator\"\n class=\"separator-slot\"\n @slotchange=${this._handleSeparatorSlotChange}\n ></slot>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-breadcrumb': HelixBreadcrumb;\n }\n}\n","import { css } from 'lit';\n\nexport const helixBreadcrumbItemStyles = css`\n :host {\n display: inline-flex;\n align-items: center;\n }\n\n /*\n * display: contents removes [part='item'] from the box model entirely.\n * This is intentional — the wrapper exists only for slot selection purposes.\n * Consumers using ::part(item) CANNOT apply box-model properties (padding,\n * margin, background, border) to this part. Use ::part(link) or ::part(text)\n * for visual styling of breadcrumb item content.\n */\n [part='item'] {\n display: contents;\n }\n\n [part='link'] {\n color: var(--hx-breadcrumb-link-color, var(--hx-color-primary-600));\n text-decoration: none;\n cursor: pointer;\n font-family: inherit;\n font-size: inherit;\n max-width: var(--hx-breadcrumb-item-max-width);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n [part='link']:hover {\n color: var(--hx-breadcrumb-link-hover-color, var(--hx-color-primary-700));\n text-decoration: underline;\n }\n\n [part='link']:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-breadcrumb-link-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n [part='text'] {\n color: var(--hx-breadcrumb-text-color, var(--hx-color-neutral-700));\n font-family: inherit;\n font-size: inherit;\n max-width: var(--hx-breadcrumb-item-max-width);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .separator {\n margin-inline: var(--hx-breadcrumb-separator-gap, var(--hx-space-1, 0.25rem));\n color: var(--hx-breadcrumb-separator-color, var(--hx-color-neutral-400));\n user-select: none;\n }\n\n .separator::before {\n content: var(--hx-breadcrumb-separator-content, '/');\n }\n\n /* Normalize buttons slotted into breadcrumb items (e.g. the expand-ellipsis button). */\n ::slotted(button) {\n background: none;\n border: none;\n cursor: pointer;\n font: inherit;\n color: inherit;\n padding: 0;\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n [part='link'] {\n color: LinkText;\n }\n\n [part='link']:hover {\n color: LinkText;\n }\n\n .separator {\n color: CanvasText;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixBreadcrumbItemStyles } from './hx-breadcrumb-item.styles.js';\n\n/**\n * A single breadcrumb navigation item.\n *\n * @summary A navigation item within an hx-breadcrumb component. Renders as a link when `href` is\n * provided, or as static text for the current page item. The current page item is determined by\n * the `current` attribute (set explicitly or automatically by the parent `hx-breadcrumb`).\n *\n * @tag hx-breadcrumb-item\n *\n * @slot - The link or page text content. Accepts text, HTML, or icon elements.\n *\n * @csspart item - Wrapper around the link or text content.\n * @csspart link - The anchor element when href is provided (non-current items only).\n * @csspart text - The span element for the current page or items without href.\n * @csspart separator - The separator element rendered after non-last items.\n *\n * @cssprop [--hx-breadcrumb-link-color=var(--hx-color-primary-600)] - Link text color.\n * @cssprop [--hx-breadcrumb-link-hover-color=var(--hx-color-primary-700)] - Link hover text color.\n * @cssprop [--hx-breadcrumb-text-color=var(--hx-color-neutral-700)] - Current page text color.\n * @cssprop [--hx-breadcrumb-separator-content='/'] - Separator character displayed after non-last items.\n * @cssprop [--hx-breadcrumb-separator-color=var(--hx-color-neutral-400)] - Separator color.\n * @cssprop [--hx-breadcrumb-separator-gap=var(--hx-space-1)] - Horizontal margin around separator.\n * @cssprop [--hx-breadcrumb-item-max-width] - Optional max-width for text truncation.\n * @cssprop [--hx-breadcrumb-link-focus-ring-color=var(--hx-focus-ring-color, var(--hx-color-primary-500))] - Focus ring color for breadcrumb links.\n */\n@customElement('hx-breadcrumb-item')\nexport class HelixBreadcrumbItem extends HelixElement {\n static override styles = [helixBreadcrumbItemStyles];\n\n override connectedCallback(): void {\n super.connectedCallback();\n // No explicit role needed. The shadow-DOM <ol> inside hx-breadcrumb\n // provides native list semantics; slotted items are projected into it.\n // Previously role=\"listitem\" was set here, but it conflicted with the\n // host's role=\"list\" + shadow-DOM <nav> structure (aria-required-children).\n // The native <ol> handles the accessibility tree correctly without\n // explicit ARIA roles on host or items.\n }\n\n /**\n * The URL for this breadcrumb link. Omit for the current page item.\n * When `current` is true, this attribute is ignored and the item always\n * renders as static text per WAI-ARIA APG breadcrumb guidance.\n * @attr href\n */\n @property({ type: String, reflect: true })\n href: string | undefined = undefined;\n\n /**\n * Whether this is the last item in the breadcrumb trail. Set by the parent\n * hx-breadcrumb component via the `data-bc-last` boolean attribute. When\n * present the trailing separator is hidden.\n *\n * @attr data-bc-last\n * @internal\n */\n @property({ type: Boolean, attribute: 'data-bc-last', reflect: true })\n dataBcLast = false;\n\n /**\n * Marks this item as the current page. When set, the item always renders as\n * static text (never a navigable link) and `aria-current=\"page\"` is placed on\n * the inner text element per WAI-ARIA APG breadcrumb guidance, yielding the\n * canonical AT announcement (\"current page, Patient Records\").\n *\n * Can be set explicitly by consumers (e.g. Drupal Twig templates) to override\n * the default positional last-item detection in `hx-breadcrumb`. When any item\n * in the breadcrumb has an explicit `current` attribute, the parent will not\n * override it.\n *\n * @attr current\n */\n @property({ type: Boolean, reflect: true })\n current = false;\n\n override render() {\n // Per WAI-ARIA APG, the current page item MUST NOT be a navigable link.\n // aria-current=\"page\" is placed on the inner element (not the listitem host)\n // for canonical AT announcement (\"current page, Patient Records\" vs\n // \"current page, list item\").\n return html`\n <span part=\"item\">\n ${this.current\n ? html`<span part=\"text\" aria-current=\"page\"><slot></slot></span>`\n : this.href\n ? html`<a part=\"link\" href=${this.href}><slot></slot></a>`\n : html`<span part=\"text\"><slot></slot></span>`}\n </span>\n ${!this.dataBcLast\n ? html`<span class=\"separator\" part=\"separator\" aria-hidden=\"true\"></span>`\n : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-breadcrumb-item': HelixBreadcrumbItem;\n }\n}\n"],"names":["helixBreadcrumbStyles","css","_nextBreadcrumbId","createIdCounter","HelixBreadcrumb","HelixElement","slot","el","items","hasExplicitCurrent","item","i","isLast","e","assigned","text","_a","position","href","name","entry","schema","changedProperties","_b","html","nothing","__decorateClass","property","state","customElement","helixBreadcrumbItemStyles","HelixBreadcrumbItem"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-button-Ddl-T6T-.js","sources":["../../src/components/hx-button/hx-button.styles.ts","../../src/components/hx-button/hx-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n :host([full]) {\n display: block;\n width: 100%;\n }\n\n :host([full]) .button {\n width: 100%;\n justify-content: center;\n }\n\n /* ─── Base Button ─── */\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-button-border-color, transparent);\n border-radius: var(--hx-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-button-bg, var(--hx-color-primary-500, #2563eb));\n color: var(--hx-button-color, var(--hx-color-neutral-0, #ffffff));\n font-family: var(--hx-button-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-button-font-weight, var(--hx-font-weight-semibold, 600));\n line-height: var(--hx-line-height-tight, 1.25);\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n 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 text-decoration: none;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-button-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 .button:hover {\n filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n }\n\n .button:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Size Variants ─── */\n\n /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target for sm variant.\n min-height uses --hx-touch-target-min to guarantee the interactive area\n meets the threshold even though the visual size token is smaller. */\n .button--sm {\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n }\n\n .button--md {\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n font-size: var(--hx-font-size-md, 1rem);\n min-height: var(--hx-size-10, 2.5rem);\n }\n\n .button--lg {\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);\n font-size: var(--hx-font-size-lg, 1.125rem);\n min-height: var(--hx-size-12, 3rem);\n }\n\n /* ─── Style Variants ─── */\n\n .button--primary {\n --hx-button-bg: var(--hx-color-primary-500);\n --hx-button-color: var(--hx-color-neutral-0);\n --hx-button-border-color: transparent;\n }\n\n .button--secondary {\n --hx-button-bg: transparent;\n --hx-button-color: var(--hx-color-primary-500);\n --hx-button-border-color: var(--hx-color-primary-500);\n }\n\n .button--secondary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-50));\n }\n\n .button--tertiary {\n --hx-button-bg: var(--hx-color-neutral-100);\n --hx-button-color: var(--hx-color-neutral-900);\n --hx-button-border-color: transparent;\n }\n\n .button--tertiary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-200));\n }\n\n .button--danger {\n --hx-button-bg: var(--hx-color-error-500);\n --hx-button-color: var(--hx-color-neutral-0);\n --hx-button-border-color: transparent;\n }\n\n .button--danger:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600));\n }\n\n .button--ghost {\n --hx-button-bg: transparent;\n --hx-button-color: var(--hx-color-primary-500);\n --hx-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-100));\n }\n\n .button--outline {\n --hx-button-bg: transparent;\n --hx-button-color: var(--hx-color-neutral-900);\n --hx-button-border-color: var(--hx-color-neutral-300);\n }\n\n .button--outline:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-50));\n }\n\n .button--primary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-600));\n }\n\n /* ─── Disabled ─── */\n\n /* Note: opacity is applied on :host([disabled]) above — do NOT add opacity here.\n Stacking opacity on both :host and .button[disabled] would multiply to 0.25. */\n .button[disabled] {\n cursor: not-allowed;\n }\n\n /* ─── Loading State ─── */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button__spinner {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n animation: hx-spin var(--hx-duration-spinner, 750ms) linear infinite;\n }\n\n @keyframes hx-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n\n .button__spinner {\n animation: none;\n opacity: var(--hx-opacity-muted, 0.6);\n }\n }\n\n /* ─── Inverted Mode ─── */\n\n /* Override text color and filter-based hover/active for all variants */\n :host([inverted]) .button {\n color: var(--hx-button-inverted-color, var(--hx-color-neutral-0));\n filter: none;\n }\n\n :host([inverted]) .button:hover {\n filter: none;\n }\n\n :host([inverted]) .button:active {\n filter: none;\n }\n\n :host([inverted]) .button:focus-visible {\n outline-color: var(\n --hx-button-inverted-focus-ring-color,\n var(--hx-overlay-white-50, rgba(255, 255, 255, 0.5))\n );\n }\n\n /* Primary inverted — slight transparent white overlay on hover */\n :host([inverted]) .button--primary:hover {\n --hx-button-bg: var(--hx-color-primary-400, #60a5fa);\n }\n\n /* Secondary inverted — white border and text */\n :host([inverted]) .button--secondary {\n --hx-button-border-color: var(--hx-overlay-white-70, rgba(255, 255, 255, 0.7));\n }\n\n :host([inverted]) .button--secondary:hover {\n --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));\n }\n\n /* Tertiary inverted */\n :host([inverted]) .button--tertiary {\n --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));\n --hx-button-border-color: transparent;\n }\n\n :host([inverted]) .button--tertiary:hover {\n --hx-button-bg: var(--hx-overlay-white-25, rgba(255, 255, 255, 0.25));\n }\n\n /* Ghost inverted — transparent base, white hover bg */\n :host([inverted]) .button--ghost {\n --hx-button-bg: transparent;\n --hx-button-border-color: transparent;\n }\n\n :host([inverted]) .button--ghost:hover {\n --hx-button-bg: var(\n --hx-button-inverted-ghost-hover-bg,\n var(--hx-overlay-white-20, rgba(255, 255, 255, 0.2))\n );\n }\n\n /* Outline inverted — white border */\n :host([inverted]) .button--outline {\n --hx-button-border-color: var(--hx-overlay-white-70, rgba(255, 255, 255, 0.7));\n }\n\n :host([inverted]) .button--outline:hover {\n --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));\n }\n\n /* ─── Prefix / Suffix / Label ─── */\n\n .button__prefix,\n .button__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .button__label {\n flex: 1 1 auto;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .button {\n /* Ensure button outline is visible in Windows High Contrast mode.\n ButtonText/ButtonFace are system colors recognized by the browser. */\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n\n .button:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .button[disabled] {\n background-color: ButtonFace;\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n .button--loading .button__spinner {\n /* Ensure spinner is visible in HCM */\n forced-color-adjust: auto;\n }\n }\n`;\n","import { html, nothing, type TemplateResult, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { helixButtonStyles } from './hx-button.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/** Detail for the hx-click event dispatched by hx-button. */\nexport interface HxButtonClickDetail {\n originalEvent: MouseEvent;\n}\n\n/**\n * A production-grade button component for user interaction. Supports multiple\n * visual variants, sizes, loading state, prefix/suffix slots, anchor rendering,\n * and full ElementInternals form association.\n *\n * @summary Primary interactive element for triggering actions and form submission.\n *\n * @tag hx-button\n *\n * @slot - Default slot for button label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n * the button is clicked and is neither disabled nor loading.\n *\n * @csspart button - The native button or anchor element.\n * @csspart label - The label text wrapper span.\n * @csspart prefix - The prefix slot container span.\n * @csspart suffix - The suffix slot container span.\n * @csspart spinner - The loading spinner SVG element.\n *\n * @cssprop [--hx-button-bg=var(--hx-color-primary-500)] - Button background color.\n * @cssprop [--hx-button-hover-bg] - Hover background color override. When set, overrides the variant default hover background from outside the shadow DOM.\n * @cssprop [--hx-button-color=var(--hx-color-neutral-0)] - Button text color.\n * @cssprop [--hx-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n *\n * @cssprop [--hx-button-inverted-color=#ffffff] - Text color when inverted.\n * @cssprop [--hx-button-inverted-ghost-hover-bg=rgba(255,255,255,0.15)] - Ghost hover bg when inverted.\n * @cssprop [--hx-button-inverted-focus-ring-color=rgba(255,255,255,0.5)] - Focus ring color when inverted.\n */\n@customElement('hx-button')\nexport class HelixButton extends mixinDelegatesAria(HelixElement) {\n static override styles = [helixButtonStyles];\n\n // ─── Form Association ───\n\n /** @internal */\n static override formAssociated = true;\n\n // ─── Public Properties ───\n\n /**\n * Visual style variant of the button.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' | 'outline' = 'primary';\n\n /**\n * Size of the button.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether the button is disabled. Prevents all interaction and form actions.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the button is in a loading state. Shows spinner, prevents interaction,\n * and sets aria-busy. Does not set the disabled attribute.\n * @attr loading\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * The type attribute for the underlying button element. Ignored when href is set.\n * @attr type\n */\n @property({ type: String })\n type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * When set, renders an anchor element instead of a button.\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * Anchor target attribute. Only used when href is set.\n * @attr target\n */\n @property({ type: String })\n target: string | undefined = undefined;\n\n /**\n * Form field name submitted via ElementInternals.setFormValue on submit.\n * @attr name\n */\n @property({ type: String })\n name: string | undefined = undefined;\n\n /**\n * Form field value submitted via ElementInternals.setFormValue on submit.\n * @attr value\n */\n @property({ type: String })\n value: string | undefined = undefined;\n\n /**\n * When true, the button stretches to fill its container width.\n * Sets the host to `display: block` and the inner element to `width: 100%`.\n * @attr full\n */\n @property({ type: Boolean, reflect: true })\n full = false;\n\n /**\n * When true, flips button colors for placement on dark or gradient backgrounds.\n * Forces text to white and adjusts hover/focus ring colors across all variants.\n * @attr inverted\n */\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n /**\n * Accessible label for icon-only or text-less buttons.\n * Required when the button has no visible text content.\n *\n * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n * `accessible-label` takes precedence when both are set.\n *\n * @attr accessible-label\n */\n @property({ type: String, attribute: 'accessible-label' })\n accessibleLabel: string = '';\n\n /**\n * Returns the effective label for the button, checking accessible-label first,\n * then the aria-label attribute, falling back to empty string.\n * @internal\n */\n private get _effectiveLabel(): string {\n return this.accessibleLabel?.trim() || this.ariaLabel?.trim() || '';\n }\n\n // ─── Form API ───\n\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Lifecycle ───\n\n /** @internal */\n private static readonly _VALID_VARIANTS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'danger',\n 'ghost',\n 'outline',\n ] as const;\n\n // Prevents double-warn on browsers that fire slotchange for empty initial slots.\n private _emptySlotWarnEmitted = false;\n\n override firstUpdated(changedProperties: PropertyValues<this>): void {\n super.firstUpdated(changedProperties);\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n const hasContent = (slot?.assignedNodes({ flatten: true }) ?? []).some(\n (n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim().length ?? 0) > 0,\n );\n if (!hasContent && !this._effectiveLabel) {\n this._emptySlotWarnEmitted = true;\n devWarn(\n 'hx-button',\n 'hx-button has no slot content and no accessible-label — button will have no accessible name.',\n );\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('variant')) {\n const validVariants: string[] = [...HelixButton._VALID_VARIANTS];\n if (!validVariants.includes(this.variant)) {\n devWarn(\n 'hx-button',\n `Invalid variant \"${this.variant}\". Expected one of: ${validVariants.join(', ')}. Clamping to \"primary\".`,\n );\n this.variant = 'primary';\n }\n }\n }\n\n // ─── Slot Handlers ───\n\n /** @internal */\n private _handleDefaultSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const hasContent = slot\n .assignedNodes({ flatten: true })\n .some((n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim().length ?? 0) > 0);\n if (!hasContent && !this._effectiveLabel && !this._emptySlotWarnEmitted) {\n devWarn(\n 'hx-button',\n 'hx-button has no slot content and no accessible-label — button will have no accessible name.',\n );\n }\n // Only reset once content arrives so the guard stays armed for browsers\n // that fire a second slotchange for the same empty initial slot.\n if (hasContent) {\n this._emptySlotWarnEmitted = false;\n }\n }\n\n // ─── Event Handling ───\n\n /**\n * @private\n * @internal\n */\n private _handleClick(e: MouseEvent): void {\n if (this.disabled || this.loading) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n /**\n * Dispatched when the button is clicked.\n * @event hx-click\n */\n this.dispatchEvent(\n new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n\n // Handle form submission/reset if form-associated and not in anchor mode\n if (this.href === undefined && this.type === 'submit' && this._internals.form) {\n if (this.name !== undefined && this.value !== undefined) {\n this._internals.setFormValue(this.value);\n }\n this._internals.form.requestSubmit();\n } else if (this.href === undefined && this.type === 'reset' && this._internals.form) {\n this._internals.form.reset();\n }\n }\n\n // ─── Render Helpers ───\n\n /**\n * @private\n * @internal\n */\n private _renderSpinner(): TemplateResult {\n return html`\n <svg\n class=\"button__spinner\"\n part=\"spinner\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <circle\n class=\"button__spinner-track\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n opacity=\"0.3\"\n />\n <path\n class=\"button__spinner-arc\"\n d=\"M12 2a10 10 0 0 1 10 10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n />\n </svg>\n `;\n }\n\n /**\n * @private\n * @internal\n */\n private _renderInner(): TemplateResult {\n return html`\n ${this.loading ? this._renderSpinner() : nothing}\n <span part=\"prefix\" class=\"button__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n button: true,\n [`button--${this.variant}`]: true,\n [`button--${this.size}`]: true,\n 'button--loading': this.loading,\n };\n\n if (this.href !== undefined) {\n return html`\n <a\n part=\"button\"\n class=${classMap(classes)}\n href=${this.disabled || this.loading ? nothing : ifDefined(this.href)}\n target=${ifDefined(this.target)}\n rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\n aria-label=${this._effectiveLabel || nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : nothing}\n @click=${this._handleClick}\n >\n ${this._renderInner()}\n </a>\n `;\n }\n\n return html`\n <button\n part=\"button\"\n class=${classMap(classes)}\n ?disabled=${this.disabled}\n type=${this.type}\n aria-label=${this._effectiveLabel || nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n @click=${this._handleClick}\n >\n ${this._renderInner()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-button': HelixButton;\n }\n interface HTMLElementEventMap {\n 'hx-click': CustomEvent<{ originalEvent: MouseEvent }>;\n }\n}\n"],"names":["helixButtonStyles","css","HelixButton","mixinDelegatesAria","HelixElement","_a","_b","disabled","changedProperties","slot","n","validVariants","devWarn","e","hasContent","html","nothing","classes","classMap","ifDefined","__decorateClass","property","customElement"],"mappings":";;;;;;;AAEO,MAAMA,IAAoBC;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-card-ycveujjL.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, inherit);\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, #1e293b));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));\n border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));\n overflow: hidden;\n font-family: var(--hx-card-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-inline-end: var(--hx-space-3, 0.75rem);\n padding-inline-start: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__footer {\n padding-inline-end: var(--hx-space-3, 0.75rem);\n padding-bottom: var(--hx-space-3, 0.75rem);\n padding-inline-start: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__actions {\n padding-inline-end: var(--hx-space-3, 0.75rem);\n padding-bottom: var(--hx-space-3, 0.75rem);\n padding-inline-start: 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-transform-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-inline-end: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: 0;\n padding-inline-start: 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-card-color, var(--hx-color-neutral-600, #475569));\n }\n\n .card__footer {\n padding-top: 0;\n padding-inline-end: 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-inline-start: 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-inline-end: 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-inline-start: 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, #e2e8f0));\n margin-top: auto;\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .card {\n border-color: CanvasText;\n }\n\n .card__actions {\n border-top-color: CanvasText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixCardStyles } from './hx-card.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextCardId = createIdCounter('hx-card');\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 HelixElement {\n /** @internal */\n static override shadowRootOptions = {\n ...HelixElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static override styles = [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 the hx-href attribute to avoid conflicting with the native HTML href attribute.\n * @attr hx-href\n */\n @property({ type: String, attribute: 'hx-href' })\n href: 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-label\n */\n @property({ type: String, attribute: 'hx-label' })\n label: 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 /**\n * Text content extracted from the heading slot, used as a fallback accessible\n * name for interactive cards when no explicit `hx-label` is provided.\n * @internal\n */\n @state() private _headingText = '';\n\n /**\n * Unique identifier for this card instance, used in ARIA attributes.\n * @internal\n */\n private _cardId = _nextCardId();\n /**\n * Unique identifier for the heading element, used in aria-labelledby.\n * @internal\n */\n private _headingId = `${this._cardId}-heading`;\n\n /** @internal */\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 /** @internal */\n private _onHeadingSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasHeading = nodes.length > 0;\n this._headingText = nodes\n .map((n) => n.textContent?.trim() ?? '')\n .join(' ')\n .trim();\n }\n\n /** @internal */\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 /** @internal */\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.href) {\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: PropertyValues<this>): 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('href') || changedProperties.has('label')) &&\n this.href &&\n !this.label &&\n !this._headingText\n ) {\n devWarn(\n 'hx-card',\n \"Interactive card (hx-href is set) is missing an accessible name. Set `hx-label` or provide heading slot content to describe the card's destination or purpose (WCAG 4.1.2).\",\n );\n }\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _dispatchCardClick(originalEvent: MouseEvent | KeyboardEvent): void {\n if (!this.href) 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.href, originalEvent },\n }),\n );\n }\n\n /** @internal */\n private _handleClick(e: MouseEvent): void {\n this._dispatchCardClick(e);\n }\n\n /** @internal */\n private _handleKeyDown(e: KeyboardEvent): void {\n if (!this.href) return;\n\n // WCAG 2.1.1 / ARIA APG: role=\"link\" activates on Enter only.\n // Space is reserved for scrolling and must not activate links.\n if (e.key === 'Enter') {\n e.preventDefault();\n this._dispatchCardClick(e);\n }\n }\n\n // ─── Render ───\n\n override render() {\n const isInteractive = !!this.href;\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.label ? this.label : nothing}\n aria-labelledby=${this._hasHeading && !this.label ? this._headingId : 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\n class=\"card__heading\"\n part=\"heading\"\n id=${this._headingId}\n ?hidden=${!this._hasHeading}\n >\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","_nextCardId","createIdCounter","HelixCard","HelixElement","e","slot","nodes","n","_a","changedProperties","originalEvent","isInteractive","classes","html","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-checkbox-group-C3poJ-Zw.js","sources":["../../src/components/hx-checkbox-group/hx-checkbox-group.styles.ts","../../src/components/hx-checkbox-group/hx-checkbox-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCheckboxGroupStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled);\n cursor: not-allowed;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Fieldset ─── */\n\n .fieldset {\n border: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-2);\n font-family: var(--hx-checkbox-group-font-family, var(--hx-font-family-sans));\n }\n\n /* ─── Legend ─── */\n\n .fieldset__legend {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1);\n font-size: var(--hx-font-size-sm);\n font-weight: var(--hx-font-weight-medium);\n color: var(--hx-checkbox-group-label-color, var(--hx-color-neutral-700));\n line-height: var(--hx-line-height-normal);\n padding: 0;\n margin-bottom: var(--hx-space-1);\n }\n\n .fieldset__required-marker {\n color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold);\n }\n\n /* ─── Items Container ─── */\n\n .fieldset__items {\n display: flex;\n flex-direction: column;\n gap: var(--hx-checkbox-group-gap, var(--hx-space-3));\n }\n\n :host([orientation='horizontal']) .fieldset__items {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n /* ─── Error State ─── */\n\n .fieldset--error .fieldset__legend {\n color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));\n }\n\n /* ─── Help Text & Error Messages ─── */\n\n .fieldset__help-text {\n font-size: var(--hx-font-size-xs);\n color: var(--hx-checkbox-group-help-text-color, var(--hx-color-neutral-500));\n line-height: var(--hx-line-height-normal);\n }\n\n .fieldset__error {\n font-size: var(--hx-font-size-xs);\n color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal);\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .fieldset {\n border: none;\n }\n\n .fieldset__legend {\n color: CanvasText;\n }\n\n .fieldset--error .fieldset__legend {\n color: LinkText;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n :host([disabled]) .fieldset__legend {\n color: GrayText;\n }\n\n .fieldset__help-text {\n color: GrayText;\n }\n\n .fieldset__error {\n color: LinkText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixCheckboxGroupStyles } from './hx-checkbox-group.styles.js';\nimport type { HelixCheckbox } from '../hx-checkbox/hx-checkbox.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextCheckboxGroupId = createIdCounter('hx-checkbox-group');\n\n/** Detail for the hx-change event dispatched by hx-checkbox-group. */\nexport interface HxCheckboxGroupChangeDetail {\n values: string[];\n}\n\n/**\n * A form-associated checkbox group that manages a set of `<hx-checkbox>` children.\n *\n * @summary Form-associated checkbox group with label, validation, help text, and multi-value form submission.\n *\n * @tag hx-checkbox-group\n *\n * @slot - `<hx-checkbox>` elements.\n * @slot label - Rich HTML group label (overrides the label property when used).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Group-level help text.\n *\n * @fires {CustomEvent<{values: string[]}>} hx-change - Dispatched when any child checkbox changes.\n *\n * @csspart group - The fieldset wrapper.\n * @csspart label - The legend/label.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-checkbox-group-gap=var(--hx-space-3, 0.75rem)] - Gap between checkbox items.\n * @cssprop [--hx-checkbox-group-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n * @cssprop [--hx-checkbox-group-error-color=var(--hx-color-error-500, #dc3545)] - Error message color.\n * @cssprop [--hx-checkbox-group-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n *\n * @drupal\n * Form-associated; render via Twig:\n * ```twig\n * <hx-checkbox-group name=\"{{ field_name }}\" label=\"{{ label }}\"{{ required ? ' required' : '' }}>\n * {% for option in options %}\n * <hx-checkbox value=\"{{ option.value }}\" label=\"{{ option.label }}\"></hx-checkbox>\n * {% endfor %}\n * </hx-checkbox-group>\n * ```\n * The `name` attribute propagates automatically to child checkboxes — no Drupal behavior required.\n */\n@customElement('hx-checkbox-group')\nexport class HelixCheckboxGroup extends FormMixin(HelixElement) {\n static override styles = [helixCheckboxGroupStyles];\n\n // ─── Form Association ───\n\n /** Marks this element as form-associated for ElementInternals support. @internal */\n static override formAssociated = true;\n\n // ─── Properties ───\n\n /**\n * The name used for form submission. Passed to child `hx-checkbox` elements.\n * @attr name\n */\n @property({ type: String, reflect: true })\n name = '';\n\n /**\n * The fieldset legend/label text.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Whether at least one checkbox must be checked for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the entire group is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Error message to display. When set, the group enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text to display below the group. Can also be provided via the help-text slot.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Layout orientation of the checkbox items.\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n get orientation(): 'vertical' | 'horizontal' {\n return this._orientation;\n }\n set orientation(value: string) {\n if (value !== 'vertical' && value !== 'horizontal') {\n devWarn('hx-checkbox-group', `Invalid orientation \"${value}\", defaulting to \"vertical\".`);\n value = 'vertical';\n }\n this._orientation = value as 'vertical' | 'horizontal';\n }\n /** @internal */\n private _orientation: 'vertical' | 'horizontal' = 'vertical';\n\n /** Whether the named error slot contains projected content. @internal */\n @state() private _hasErrorSlot = false;\n /** Whether the named help-text slot contains projected content. @internal */\n @state() private _hasHelpSlot = false;\n\n // ─── Internal IDs ───\n\n /** @internal */\n private _groupId = _nextCheckboxGroupId();\n /** @internal */\n private _helpTextId = `${this._groupId}-help`;\n /** @internal */\n private _errorId = `${this._groupId}-error`;\n\n // ─── Slot Handlers ───\n\n /** @internal */\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 /** @internal */\n private _handleHelpSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('hx-change', this._handleCheckboxChange);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('hx-change', this._handleCheckboxChange);\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('disabled')) {\n this._syncCheckboxes();\n }\n if (changedProperties.has('name')) {\n this._syncCheckboxNames();\n }\n // Force screen reader re-announcement when error text changes (a11y-v3-005)\n if (changedProperties.has('error') && this.error) {\n const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n if (errorEl) {\n const msg = this.error;\n requestAnimationFrame(() => {\n errorEl.textContent = '';\n requestAnimationFrame(() => {\n errorEl.textContent = msg;\n });\n });\n }\n }\n }\n\n override firstUpdated(changedProperties: PropertyValues<this>): void {\n super.firstUpdated(changedProperties);\n this._syncCheckboxes();\n this._syncCheckboxNames();\n const checkedValues = this._getCheckedValues();\n this._updateFormValue(checkedValues);\n this._updateValidity(checkedValues);\n }\n\n // ─── Checkbox Management ───\n\n /** @internal */\n private _getCheckboxes(): HelixCheckbox[] {\n return Array.from(this.children).filter((c): c is HelixCheckbox => c.tagName === 'HX-CHECKBOX');\n }\n\n /** @internal */\n private _getCheckedValues(): string[] {\n return this._getCheckboxes()\n .filter((cb) => cb.checked)\n .map((cb) => cb.value);\n }\n\n /** @internal */\n private _syncCheckboxes(): void {\n const checkboxes = this._getCheckboxes();\n checkboxes.forEach((cb) => {\n cb.disabled = this.disabled;\n });\n }\n\n /** @internal */\n private _syncCheckboxNames(): void {\n if (!this.name) return;\n const checkboxes = this._getCheckboxes();\n checkboxes.forEach((cb) => {\n cb.name = this.name;\n });\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleCheckboxChange = (e: Event): void => {\n // Only intercept events from direct hx-checkbox children — do not re-intercept\n // the hx-change we dispatch ourselves from this element.\n if (e.target === this) return;\n\n e.stopImmediatePropagation();\n\n const values = this._getCheckedValues();\n this._updateFormValue(values);\n this._updateValidity(values);\n this._handleInteractionInput();\n\n /**\n * Dispatched when any child checkbox changes.\n * @event hx-change\n */\n this.dispatchEvent(\n new CustomEvent<{ values: string[] }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { values },\n }),\n );\n };\n\n /** @internal */\n private _handleSlotChange(): void {\n this._syncCheckboxes();\n this._syncCheckboxNames();\n const checkedValues = this._getCheckedValues();\n this._updateFormValue(checkedValues);\n this._updateValidity(checkedValues);\n }\n\n // ─── Form Integration ───\n\n /** @internal */\n private _updateFormValue(values: string[]): void {\n if (values.length === 0) {\n this._internals.setFormValue(null);\n return;\n }\n const formData = new FormData();\n values.forEach((v) => formData.append(this.name, v));\n this._internals.setFormValue(formData);\n }\n\n /** @internal */\n override _updateValidity(values?: string[]): void {\n const checkedValues = values ?? this._getCheckedValues();\n if (this.required && checkedValues.length === 0) {\n const firstCheckbox = this._getCheckboxes()[0];\n this._internals.setValidity(\n { valueMissing: true },\n this.error || 'Please select at least one option.',\n firstCheckbox,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /** @internal */\n protected override _onFormReset(): void {\n const checkboxes = this._getCheckboxes();\n checkboxes.forEach((cb) => {\n cb.checked = false;\n });\n this._internals.setFormValue(null);\n this._updateValidity([]);\n this._resetInteractionState();\n }\n\n /** @internal */\n protected override _onFormStateRestore(\n state: File | string | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (!(state instanceof FormData)) return;\n const restoredValues = state.getAll(this.name).map((v) => String(v));\n const checkboxes = this._getCheckboxes();\n checkboxes.forEach((cb) => {\n cb.checked = restoredValues.includes(cb.value);\n });\n this._updateFormValue(restoredValues);\n this._updateValidity(restoredValues);\n }\n\n /** @internal */\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Render ───\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n\n const fieldsetClasses = {\n fieldset: true,\n 'fieldset--error': hasError,\n 'fieldset--disabled': this.disabled,\n 'fieldset--required': this.required,\n };\n\n const describedBy =\n [\n hasError ? this._errorId : null,\n this.helpText || this._hasHelpSlot ? this._helpTextId : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined;\n\n return html`\n <fieldset\n part=\"group\"\n class=${classMap(fieldsetClasses)}\n aria-describedby=${describedBy ?? nothing}\n >\n <legend part=\"label\" class=\"fieldset__legend\">\n <slot name=\"label\">${this.label}</slot>\n ${this.required\n ? html`<span class=\"fieldset__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </legend>\n\n <div class=\"fieldset__items\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n\n ${hasError\n ? html`<div part=\"error\" class=\"fieldset__error\" id=${this._errorId} role=\"alert\">\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>\n </div>`\n : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n\n <div part=\"help-text\" class=\"fieldset__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>\n </div>\n </fieldset>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-checkbox-group': HelixCheckboxGroup;\n }\n}\n"],"names":["helixCheckboxGroupStyles","css","_nextCheckboxGroupId","createIdCounter","HelixCheckboxGroup","FormMixin","HelixElement","values","value","slot","changedProperties","errorEl","_a","msg","checkedValues","c","cb","formData","v","firstCheckbox","state","_mode","restoredValues","disabled","hasError","fieldsetClasses","describedBy","html","classMap","nothing","__decorateClass","property","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-combobox-BmgYT7Ar.js","sources":["../../src/components/hx-combobox/hx-combobox.styles.ts","../../src/components/hx-combobox/hx-combobox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixComboboxStyles = css`\n :host {\n display: block;\n }\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n * {\n box-sizing: border-box;\n }\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--hx-combobox-font-family, var(--hx-font-family-sans, sans-serif));\n position: relative;\n }\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-combobox-label-color, var(--hx-color-neutral-700, #334155));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n .field__required-marker {\n color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n .field__input-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));\n border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));\n transition:\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n }\n .field__input-wrapper:focus-within {\n border-color: var(\n --hx-combobox-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n );\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(\n --hx-combobox-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n )\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n .field--error .field__input-wrapper {\n border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));\n }\n .field--error .field__input-wrapper:focus-within {\n border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n .field__prefix,\n .field__suffix {\n display: flex;\n align-items: center;\n padding: 0 var(--hx-space-2, 0.5rem);\n color: var(--hx-color-neutral-500, #64748b);\n flex-shrink: 0;\n }\n .field__input {\n flex: 1;\n min-width: 0;\n min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));\n border: none;\n background: transparent;\n outline: none;\n font-family: inherit;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n }\n .field__input::placeholder {\n color: var(--hx-color-neutral-400, #94a3b8);\n }\n .field__input--sm {\n min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));\n font-size: var(--hx-font-size-sm, 0.875rem);\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n }\n .field__input--lg {\n min-height: var(--hx-input-height-lg, var(--hx-size-12, 3rem));\n font-size: var(--hx-font-size-lg, 1.125rem);\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n }\n .field__clear-button,\n .field__loading-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-inline-end: var(--hx-space-2, 0.5rem);\n flex-shrink: 0;\n color: var(--hx-color-neutral-400, #94a3b8);\n }\n .field__clear-button {\n width: 1.25rem;\n height: 1.25rem;\n border: none;\n background: transparent;\n cursor: pointer;\n padding: 0;\n border-radius: var(--hx-border-radius-full, 9999px);\n transition: color var(--hx-transition-fast, 150ms ease);\n }\n .field__clear-button:hover {\n color: var(--hx-color-neutral-700, #334155);\n }\n .field__clear-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n .field__loading-indicator {\n width: 1rem;\n height: 1rem;\n }\n .field__loading-spinner {\n width: 1rem;\n height: 1rem;\n border: 2px solid currentColor;\n border-top-color: transparent;\n border-radius: 50%;\n animation: hx-spin 0.7s linear infinite;\n }\n @keyframes hx-spin {\n to {\n transform: rotate(360deg);\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .field__loading-spinner {\n animation: none;\n }\n }\n .field__listbox {\n position: absolute;\n top: calc(100% + var(--hx-space-1, 0.25rem));\n left: 0;\n right: 0;\n z-index: var(--hx-z-index-dropdown, 1000);\n background-color: var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));\n border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));\n box-shadow: var(\n --hx-combobox-listbox-shadow,\n 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 12%, transparent)\n );\n max-height: var(--hx-combobox-listbox-max-height, 16rem);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n .field__listbox[hidden] {\n display: none;\n }\n .field__options {\n overflow-y: auto;\n flex: 1;\n padding: var(--hx-space-1, 0.25rem) 0;\n }\n .field__option {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n .field__option:hover {\n background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));\n }\n .field__option--selected {\n background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));\n font-weight: var(--hx-font-weight-medium, 500);\n }\n .field__option--focused {\n background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-combobox-option-focus-ring-offset, -2px);\n }\n .field__option--focused.field__option--selected {\n background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));\n }\n .field__option--disabled {\n opacity: var(--hx-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n .field__option-label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .field__no-options {\n padding: var(--hx-space-3, 0.75rem);\n text-align: center;\n color: var(--hx-color-neutral-400, #94a3b8);\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n .field__sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n .field__help-text,\n .field__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n .field__help-text {\n color: var(--hx-color-neutral-500, #64748b);\n }\n .field__error {\n color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));\n }\n @media (prefers-reduced-motion: reduce) {\n .field__input-wrapper,\n .field__option,\n .field__clear-button,\n .field__chip-remove {\n transition: none;\n }\n }\n @media (forced-colors: active) {\n .field__input-wrapper {\n forced-color-adjust: none;\n background-color: Field;\n color: FieldText;\n border: 2px solid ButtonText;\n }\n .field__input {\n color: FieldText;\n }\n .field__input::placeholder {\n color: GrayText;\n }\n .field__input-wrapper:focus-within {\n border-color: Highlight;\n box-shadow: none;\n }\n .field__listbox {\n forced-color-adjust: none;\n background-color: Canvas;\n border: 2px solid CanvasText;\n box-shadow: none;\n }\n .field__option {\n color: CanvasText;\n }\n .field__option:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .field__option--selected {\n background-color: Highlight;\n color: HighlightText;\n }\n .field__option--focused {\n outline-color: Highlight;\n background-color: Highlight;\n color: HighlightText;\n }\n .field__option--disabled {\n color: GrayText;\n opacity: 1;\n }\n .field__chip {\n forced-color-adjust: none;\n background-color: Highlight;\n color: HighlightText;\n border: 1px solid HighlightText;\n }\n .field__chip-remove:focus-visible {\n outline-color: Highlight;\n }\n .field__clear-button:focus-visible {\n outline-color: Highlight;\n }\n .field--error .field__input-wrapper {\n border-color: LinkText;\n }\n :host([disabled]) {\n opacity: 1;\n }\n :host([disabled]) .field__input-wrapper {\n border-color: GrayText;\n color: GrayText;\n }\n :host([disabled]) .field__input {\n color: GrayText;\n }\n .field__label {\n color: CanvasText;\n }\n .field__help-text {\n color: GrayText;\n }\n .field__error {\n color: LinkText;\n }\n }\n :host([multiple]) .field__input-wrapper {\n flex-wrap: wrap;\n padding: var(--hx-space-1, 0.25rem);\n gap: var(--hx-space-1, 0.25rem);\n align-items: center;\n }\n :host([multiple]) .field__input {\n min-width: 8rem;\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n flex-shrink: 1;\n }\n .field__chip {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n padding: 0 var(--hx-space-1, 0.25rem) 0 var(--hx-space-2, 0.5rem);\n height: 1.5rem;\n background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));\n color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e3a8a));\n border-radius: var(--hx-border-radius-full, 9999px);\n font-size: var(--hx-font-size-sm, 0.875rem);\n white-space: nowrap;\n max-width: 12rem;\n flex-shrink: 0;\n }\n .field__chip-label {\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 8rem;\n }\n .field__chip-remove {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n border: none;\n background: none;\n cursor: pointer;\n padding: 0;\n color: inherit;\n opacity: 0.7;\n border-radius: 50%;\n line-height: 1;\n transition: opacity var(--hx-transition-fast, 150ms ease);\n }\n .field__chip-remove:hover {\n opacity: 1;\n background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe));\n }\n .field__chip-remove:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n opacity: 1;\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { helixComboboxStyles } from './hx-combobox.styles.js';\n\n// PERF: hx-combobox exceeds 5KB budget (6.87kb gzipped) -- typeahead filtering, multi-select chips, async loading\n\n// ─── Internal option model ───\n\n// P1-7: Exported so TypeScript consumers can type option arrays programmatically\nexport interface ComboboxOption {\n value: string;\n label: string;\n disabled: boolean;\n}\n\n// P2-13: Exported size type for TypeScript consumers\nexport type HxComboboxSize = 'sm' | 'md' | 'lg';\n\nconst _nextComboboxId = createIdCounter('hx-combobox');\n\n/** Detail for hx-input and hx-change events dispatched by hx-combobox. */\nexport interface HxComboboxDetail {\n value: string;\n}\n\n/**\n * A form-associated combobox component combining a text input with a listbox\n * for autocomplete and typeahead. Supports filtering, free-text entry,\n * keyboard navigation, and async option loading.\n *\n * @summary Form-associated combobox with autocomplete, filtering, and keyboard navigation.\n *\n * @tag hx-combobox\n *\n * @slot option - Slot for `<option>` elements that populate the listbox.\n * @slot prefix - Content to display before the text input.\n * @slot suffix - Content to display after the text input.\n * @slot empty-label - Content shown when no options match the filter.\n * @slot label - Custom label content (overrides the label property).\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<{value: string}>} hx-input - Dispatched on each keystroke as the user types.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when an option is selected.\n * @fires {CustomEvent<void>} hx-clear - Dispatched when the clear button is activated.\n * @fires {CustomEvent<void>} hx-show - Dispatched when the listbox opens.\n * @fires {CustomEvent<void>} hx-hide - Dispatched when the listbox closes.\n *\n * @csspart input - The native text input element.\n * @csspart listbox - The dropdown panel containing options.\n * @csspart trigger - The input wrapper element acting as the combobox trigger.\n * @csspart clear-button - The button that clears the current value.\n * @csspart loading-indicator - The loading spinner shown during async operations.\n * @csspart field - The outer field wrapper element.\n * @csspart label - The label element.\n * @csspart option - An individual option item in the listbox.\n * @csspart error - The error message element.\n * @csspart help-text - The help text element.\n *\n * @cssprop [--hx-combobox-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-combobox-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-combobox-border-color=var(--hx-color-neutral-300)] - Border color.\n * @cssprop [--hx-combobox-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-combobox-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-combobox-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-combobox-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-combobox-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-combobox-listbox-bg=var(--hx-color-neutral-0)] - Listbox background color.\n * @cssprop [--hx-combobox-option-hover-bg=var(--hx-color-primary-50)] - Option hover background.\n * @cssprop [--hx-combobox-option-selected-bg=var(--hx-color-primary-100)] - Selected option background.\n */\n@customElement('hx-combobox')\nexport class HelixCombobox extends FormMixin(HelixElement) {\n static override styles = [helixComboboxStyles];\n\n // ─── Form Association ───\n\n /** Marks this element as form-associated for ElementInternals support. @internal */\n static override formAssociated = true;\n\n // ─── Stable IDs ───\n\n /** @internal */\n private _id = _nextComboboxId();\n /** @internal */\n private _listboxId = `${this._id}-listbox`;\n /** @internal */\n private _helpTextId = `${this._id}-help`;\n /** @internal */\n private _errorId = `${this._id}-error`;\n /** @internal */\n private _labelId = `${this._id}-label`;\n /** @internal */\n private _liveRegionId = `${this._id}-live`;\n\n // ─── Public Properties ───\n\n /**\n * The visible label text for the combobox.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Placeholder text shown in the input when no value is entered.\n * @attr placeholder\n */\n @property({ type: String })\n placeholder = '';\n\n /**\n * The current value of the combobox.\n * @attr value\n */\n @property({ type: String, reflect: true })\n value = '';\n\n /**\n * Whether the combobox is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the combobox is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The name used for form submission.\n * @attr name\n */\n @property({ type: String, reflect: true })\n name = '';\n\n /**\n * Error message to display. When set, the field enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the combobox for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Size variant of the combobox.\n * @attr hx-size\n */\n @property({ type: String, attribute: 'hx-size', reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether multiple options can be selected.\n * @attr multiple\n */\n @property({ type: Boolean, reflect: true })\n multiple = false;\n\n /**\n * Whether the combobox shows a clear button when a value is set.\n * @attr clearable\n */\n @property({ type: Boolean, reflect: true })\n clearable = false;\n\n /**\n * Whether the combobox is in a loading state (shows spinner).\n * @attr loading\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * Debounce delay in milliseconds for the filter input event.\n * @attr filter-debounce\n */\n @property({ type: Number, attribute: 'filter-debounce' })\n filterDebounce = 0;\n\n /**\n * Accessible name for screen readers, if different from the visible label.\n * Uses `accessible-label` attribute instead of `aria-label` to avoid\n * ARIAMixin shadowing on the host element.\n *\n * Note: `mixinDelegatesAria` is not applied to this component because form\n * inputs with associated labels delegate accessible naming via `<label>`\n * association and `aria-labelledby`, not host-level ARIA delegation. The\n * `accessible-label` attribute is a fallback for label-free usage. The value is forwarded to the\n * internal input's `aria-label`.\n * @attr accessible-label\n */\n @property({ type: String, attribute: 'accessible-label' })\n accessibleLabel: string | null = null;\n\n /**\n * Text shown when no options match the current filter.\n * @attr label-no-options\n */\n @property({ type: String, attribute: 'label-no-options' })\n labelNoOptions = 'No options found';\n\n /**\n * Validation message shown when the field is required but empty.\n * @attr label-required\n */\n @property({ type: String, attribute: 'label-required' })\n labelRequired = 'Please select an option.';\n\n /**\n * Generates the accessible label for multi-select chip remove buttons.\n * @param label - the option label text\n */\n @property({ attribute: false })\n labelRemoveOption: (label: string) => string = (label) => `Remove ${label}`;\n\n // ─── Internal State ───\n\n /** Parsed option models derived from slotted `<option>` and `<optgroup>` elements. @internal */\n @state() private _options: ComboboxOption[] = [];\n /** Current text typed in the input, used to filter the option list. @internal */\n @state() private _filterText = '';\n /** Whether the listbox dropdown is currently visible. @internal */\n @state() private _open = false;\n /** Zero-based index of the keyboard-focused option within the filtered list; -1 means none. @internal */\n @state() private _focusedOptionIndex = -1;\n /** Whether the named error slot contains projected content. @internal */\n @state() private _hasErrorSlot = false;\n /** Live-region announcement text describing the current number of filtered options. @internal */\n @state() private _filterAnnouncement = '';\n\n // ─── Queries ───\n\n /** Reference to the native text input element inside the shadow DOM. @internal */\n @query('.field__input')\n private _input: HTMLInputElement | undefined;\n\n // ─── Debounce timer ───\n\n /** @internal */\n private _debounceTimer: ReturnType<typeof setTimeout> | null = null;\n\n // ─── Multiple Selection ───\n\n // P0-1: Derive selected values Set from the comma-separated value property\n /** @internal */\n private get _selectedValuesSet(): Set<string> {\n if (!this.multiple || !this.value) return new Set();\n return new Set(this.value.split(',').filter(Boolean));\n }\n\n // ─── Filtered options ───\n\n /** @internal */\n private get _filteredOptions(): ComboboxOption[] {\n if (!this._filterText) return this._options;\n const lower = this._filterText.toLowerCase();\n return this._options.filter((o) => o.label.toLowerCase().includes(lower));\n }\n\n // ─── Lifecycle ───\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n // Safety net: remove listener if component is removed while dropdown is open\n if (typeof document !== 'undefined') {\n document.removeEventListener('click', this._handleOutsideClick);\n }\n if (this._debounceTimer !== null) {\n clearTimeout(this._debounceTimer);\n }\n // Reset open state to prevent persisted open state on reconnect\n if (this._open) {\n this._open = false;\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this._updateFormValue();\n }\n // Force screen reader re-announcement when error text changes (a11y-v3-005)\n if (changedProperties.has('error') && this.error) {\n const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n if (errorEl) {\n const msg = this.error;\n requestAnimationFrame(() => {\n errorEl.textContent = '';\n requestAnimationFrame(() => {\n errorEl.textContent = msg;\n });\n });\n }\n }\n }\n\n // ─── Form Integration ───\n\n /** @internal */\n private _updateFormValue(): void {\n this._internals.setFormValue(this.value || null);\n }\n\n /** @internal */\n override _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || this.labelRequired,\n this._input,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /** @internal */\n protected override _onFormReset(): void {\n this.value = '';\n this._filterText = '';\n this._internals.setFormValue(null);\n this._resetInteractionState();\n }\n\n /** @internal */\n // P1-6: Correct signature per WHATWG spec — includes mode param and all state types\n protected override _onFormStateRestore(\n state: File | string | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n /** @internal */\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Option Syncing from Slot ───\n\n /** @internal */\n private _handleSlotChange(): void {\n this._readOptions();\n }\n\n /** @internal */\n private _parseOption(el: HTMLOptionElement): ComboboxOption {\n return { value: el.value, label: el.textContent?.trim() ?? el.value, disabled: el.disabled };\n }\n\n /** @internal */\n private _readOptions(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"option\"]');\n if (!slot) return;\n\n const parsed: ComboboxOption[] = [];\n\n for (const el of slot.assignedElements({ flatten: true })) {\n if (el instanceof HTMLOptionElement) {\n parsed.push(this._parseOption(el));\n } else if (el instanceof HTMLOptGroupElement) {\n for (const child of Array.from(el.children)) {\n if (child instanceof HTMLOptionElement) parsed.push(this._parseOption(child));\n }\n }\n }\n\n this._options = parsed;\n }\n\n // ─── Slot Change Handlers ───\n\n /** @internal */\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 // ─── Dropdown Control ───\n\n /** @internal */\n private _openDropdown(): void {\n if (this.disabled || this._open) return;\n this._open = true;\n this._focusedOptionIndex = -1;\n if (typeof document !== 'undefined') {\n document.addEventListener('click', this._handleOutsideClick);\n }\n this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _closeDropdown(): void {\n if (!this._open) return;\n this._open = false;\n this._focusedOptionIndex = -1;\n this._handleInteractionBlur();\n if (typeof document !== 'undefined') {\n document.removeEventListener('click', this._handleOutsideClick);\n }\n this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n }\n\n // ─── Input Handling ───\n\n /** @internal */\n private _handleInput(e: Event): void {\n const input = e.target as HTMLInputElement;\n this._filterText = input.value;\n\n if (!this._open) {\n this._openDropdown();\n }\n\n this._focusedOptionIndex = -1;\n\n if (this.filterDebounce > 0) {\n if (this._debounceTimer !== null) {\n clearTimeout(this._debounceTimer);\n }\n this._debounceTimer = setTimeout(() => {\n this._emitInput();\n this._announceFilterResults();\n }, this.filterDebounce);\n } else {\n this._emitInput();\n this._announceFilterResults();\n }\n }\n\n /** @internal */\n private _announceFilterResults(): void {\n const count = this._filteredOptions.length;\n this._filterAnnouncement =\n count === 0\n ? 'No matching options'\n : `${count} ${count === 1 ? 'option' : 'options'} available`;\n }\n\n /** @internal */\n private _emitInput(): void {\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-input', {\n bubbles: true,\n composed: true,\n detail: { value: this._filterText },\n }),\n );\n }\n\n /** @internal */\n private _handleFocus(): void {\n this._openDropdown();\n }\n\n // ─── Keyboard Navigation ───\n\n /** @internal */\n private _handleKeydown(e: KeyboardEvent): void {\n if (this.disabled) return;\n\n const filtered = this._filteredOptions;\n const enabledIndices = filtered\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled)\n .map(({ i }) => i);\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n if (!this._open) {\n this._openDropdown();\n this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? 0) : -1;\n break;\n }\n const nextDown = enabledIndices.find((i) => i > this._focusedOptionIndex);\n this._focusedOptionIndex =\n nextDown !== undefined ? nextDown : (enabledIndices[0] ?? this._focusedOptionIndex);\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n if (!this._open) {\n this._openDropdown();\n const lastEnabled = enabledIndices[enabledIndices.length - 1];\n this._focusedOptionIndex = lastEnabled !== undefined ? lastEnabled : -1;\n break;\n }\n const prevUp = [...enabledIndices].reverse().find((i) => i < this._focusedOptionIndex);\n const lastEnabledUp = enabledIndices[enabledIndices.length - 1];\n this._focusedOptionIndex =\n prevUp !== undefined ? prevUp : (lastEnabledUp ?? this._focusedOptionIndex);\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (!this._open) {\n this._openDropdown();\n break;\n }\n if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < filtered.length) {\n const opt = filtered[this._focusedOptionIndex];\n if (opt) this._selectOption(opt);\n }\n break;\n }\n case 'Escape': {\n e.preventDefault();\n this._closeDropdown();\n this._filterText = '';\n if (this._input) this._input.value = '';\n break;\n }\n case 'Tab': {\n this._closeDropdown();\n break;\n }\n // P1-1: Home/End keyboard navigation for option list\n case 'Home': {\n e.preventDefault();\n if (!this._open) this._openDropdown();\n this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? -1) : -1;\n break;\n }\n case 'End': {\n e.preventDefault();\n if (!this._open) this._openDropdown();\n this._focusedOptionIndex =\n enabledIndices.length > 0 ? (enabledIndices[enabledIndices.length - 1] ?? -1) : -1;\n break;\n }\n default:\n break;\n }\n }\n\n // ─── Selection ───\n\n // P0-1: Handle both single and multiple selection modes\n /** @internal */\n private _selectOption(option: ComboboxOption): void {\n if (option.disabled) return;\n if (this.multiple) {\n const current = this._selectedValuesSet;\n const next = new Set(current);\n if (next.has(option.value)) {\n next.delete(option.value);\n } else {\n next.add(option.value);\n }\n this.value = [...next].join(',');\n // Keep dropdown open for multiple selection so user can pick more\n } else {\n this.value = option.value;\n this._closeDropdown();\n }\n this._handleInteractionInput();\n this._filterText = '';\n if (this._input) this._input.value = '';\n this._dispatchChange();\n }\n\n // P0-1: Remove a single value from multi-selection\n /** @internal */\n private _removeValue(val: string): void {\n const next = this._selectedValuesSet;\n next.delete(val);\n this.value = [...next].join(',');\n this._dispatchChange();\n }\n\n // ─── Clear ───\n\n /** @internal */\n private _handleClear(e: Event): void {\n e.stopPropagation();\n this.value = '';\n this._filterText = '';\n if (this._input) {\n this._input.value = '';\n this._input.focus();\n }\n this._internals.setFormValue(null);\n this._updateValidity();\n this.dispatchEvent(new CustomEvent<void>('hx-clear', { bubbles: true, composed: true }));\n }\n\n // ─── Event Dispatchers ───\n\n /** @internal */\n private _dispatchChange(): void {\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Outside Click Handler ───\n\n /** @internal */\n private _handleOutsideClick = (e: MouseEvent): void => {\n if (this._open && !e.composedPath().includes(this)) {\n this._closeDropdown();\n }\n };\n\n // ─── Public Methods ───\n\n /** Moves focus to the text input. */\n override focus(options?: FocusOptions): void {\n this._input?.focus(options);\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _optionId(index: number): string {\n return `${this._id}-option-${index}`;\n }\n\n /** @internal */\n private get _displayValue(): string {\n // P0-1: In multiple mode, chips render selected values — input shows only filter text\n if (this.multiple) return '';\n if (!this.value) return '';\n const opt = this._options.find((o) => o.value === this.value);\n return opt ? opt.label : this.value;\n }\n\n /** @internal */\n private _renderOptions() {\n const filtered = this._filteredOptions;\n\n if (filtered.length === 0) {\n return html`\n <slot name=\"empty-label\">\n <div class=\"field__no-options\">${this.labelNoOptions}</div>\n </slot>\n `;\n }\n\n return repeat(\n filtered,\n (opt) => opt.value,\n (opt, index) => {\n // P0-1: Use Set membership for multiple mode, direct equality for single mode\n const isSelected = this.multiple\n ? this._selectedValuesSet.has(opt.value)\n : opt.value === this.value;\n const isFocused = index === this._focusedOptionIndex;\n\n return html`\n <div\n id=${this._optionId(index)}\n part=\"option\"\n role=\"option\"\n class=${classMap({\n field__option: true,\n 'field__option--selected': isSelected,\n 'field__option--focused': isFocused,\n 'field__option--disabled': opt.disabled,\n })}\n aria-selected=${this.multiple\n ? isSelected\n ? 'true'\n : 'false'\n : isSelected\n ? 'true'\n : nothing}\n aria-disabled=${opt.disabled ? 'true' : nothing}\n @click=${() => this._selectOption(opt)}\n >\n <span class=\"field__option-label\">${opt.label}</span>\n </div>\n `;\n },\n );\n }\n\n // ─── Main Render ───\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n const showClear = this.clearable && !!this.value && !this.disabled;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n 'field--open': this._open,\n };\n\n const inputClasses = {\n field__input: true,\n [`field__input--${this.size}`]: true,\n };\n\n const describedBy =\n [\n hasError || this._hasErrorSlot ? this._errorId : null,\n this.helpText ? this._helpTextId : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined;\n\n const activedescendant =\n this._open && this._focusedOptionIndex >= 0\n ? this._optionId(this._focusedOptionIndex)\n : undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <!-- Label -->\n <slot name=\"label\">\n ${this.label\n ? html`<label id=${this._labelId} for=${this._id} part=\"label\" class=\"field__label\">\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </label>`\n : nothing}\n </slot>\n\n <!-- Input Wrapper -->\n <div part=\"trigger\" class=\"field__input-wrapper\">\n <!-- Prefix Slot -->\n <slot name=\"prefix\" class=\"field__prefix\"></slot>\n\n <!-- P0-1: Selected value chips for multiple mode -->\n ${this.multiple && this._selectedValuesSet.size > 0\n ? [...this._selectedValuesSet].map((val) => {\n const opt = this._options.find((o) => o.value === val);\n const label = opt ? opt.label : val;\n return html`\n <span class=\"field__chip\">\n <span class=\"field__chip-label\">${label}</span>\n <button\n type=\"button\"\n class=\"field__chip-remove\"\n aria-label=${this.labelRemoveOption(label)}\n @click=${(e: Event) => {\n e.stopPropagation();\n this._removeValue(val);\n }}\n >\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M1 1L7 7M7 1L1 7\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n </span>\n `;\n })\n : nothing}\n\n <!-- Text Input (combobox role) -->\n <input\n part=\"input\"\n type=\"text\"\n id=${this._id}\n class=${classMap(inputClasses)}\n role=\"combobox\"\n aria-expanded=${this._open ? 'true' : 'false'}\n aria-autocomplete=\"list\"\n aria-controls=${this._listboxId}\n aria-activedescendant=${ifDefined(activedescendant)}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-required=${this.required ? 'true' : nothing}\n aria-label=${ifDefined(this.accessibleLabel || undefined)}\n aria-labelledby=${ifDefined(\n this.label && !this.accessibleLabel ? this._labelId : undefined,\n )}\n aria-busy=${this.loading ? 'true' : nothing}\n .value=${this._filterText || (this._open ? '' : this._displayValue)}\n placeholder=${ifDefined(this.placeholder || undefined)}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name || undefined)}\n autocomplete=\"off\"\n @input=${this._handleInput}\n @focus=${this._handleFocus}\n @keydown=${this._handleKeydown}\n />\n\n <!-- Loading Indicator -->\n ${this.loading\n ? html`\n <div part=\"loading-indicator\" class=\"field__loading-indicator\" aria-hidden=\"true\">\n <div class=\"field__loading-spinner\"></div>\n </div>\n `\n : nothing}\n\n <!-- Clear Button -->\n ${showClear\n ? html`\n <button\n part=\"clear-button\"\n type=\"button\"\n class=\"field__clear-button\"\n aria-label=${`Clear ${this.label || this.accessibleLabel || 'selection'}`}\n tabindex=\"0\"\n @click=${this._handleClear}\n >\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M1 1L11 11M11 1L1 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n `\n : nothing}\n\n <!-- Suffix Slot -->\n <slot name=\"suffix\" class=\"field__suffix\"></slot>\n </div>\n\n <!-- Listbox -->\n <div\n part=\"listbox\"\n role=\"listbox\"\n id=${this._listboxId}\n class=\"field__listbox\"\n aria-label=${ifDefined(this.label || this.accessibleLabel || undefined)}\n aria-multiselectable=${this.multiple ? 'true' : nothing}\n ?hidden=${!this._open}\n >\n <div class=\"field__options\">${this._renderOptions()}</div>\n </div>\n\n <!-- Hidden slot (options read from here) -->\n <slot name=\"option\" @slotchange=${this._handleSlotChange} style=\"display:none;\"></slot>\n\n <!-- Error -->\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${hasError\n ? html`<div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>`\n : nothing}\n </slot>\n\n <!-- Help Text -->\n ${this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n `\n : nothing}\n\n <!-- Filter results live region -->\n <div id=${this._liveRegionId} aria-live=\"polite\" aria-atomic=\"true\" class=\"field__sr-only\">\n ${this._filterAnnouncement}\n </div>\n </div>\n `;\n }\n}\n\n/**\n * Per-component event map for type-safe addEventListener on hx-combobox.\n * The `hx-change` detail is `{ value: string }` only — no `checked` property.\n */\nexport interface HxComboboxEventMap {\n 'hx-input': CustomEvent<{ value: string }>;\n 'hx-change': CustomEvent<{ value: string }>;\n 'hx-clear': CustomEvent<void>;\n 'hx-show': CustomEvent<void>;\n 'hx-hide': CustomEvent<void>;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-combobox': HelixCombobox;\n }\n interface HTMLElementEventMap {\n 'hx-input': CustomEvent<{ value: string }>;\n 'hx-clear': CustomEvent<void>;\n 'hx-show': CustomEvent<void>;\n 'hx-hide': CustomEvent<void>;\n }\n}\n\nexport type { HelixCombobox as HxCombobox };\n"],"names":["helixComboboxStyles","css","_nextComboboxId","createIdCounter","HelixCombobox","FormMixin","HelixElement","label","lower","o","changedProperties","errorEl","_a","msg","state","_mode","disabled","el","slot","parsed","child","input","count","filtered","enabledIndices","i","nextDown","lastEnabled","prevUp","lastEnabledUp","opt","option","current","next","val","options","index","html","repeat","isSelected","isFocused","classMap","nothing","hasError","showClear","fieldClasses","inputClasses","describedBy","activedescendant","e","ifDefined","__decorateClass","property","query","customElement"],"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;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;;;;;;ACsBnC,MAAMC,IAAkBC,EAAgB,aAAa;AAsD9C,IAAMC,IAAN,cAA4BC,EAAUC,CAAY,EAAE;AAAA,EAApD,cAAA;AAAA,UAAA,GAAA,SAAA,GAWL,KAAQ,MAAMJ,EAAA,GAEd,KAAQ,aAAa,GAAG,KAAK,GAAG,YAEhC,KAAQ,cAAc,GAAG,KAAK,GAAG,SAEjC,KAAQ,WAAW,GAAG,KAAK,GAAG,UAE9B,KAAQ,WAAW,GAAG,KAAK,GAAG,UAE9B,KAAQ,gBAAgB,GAAG,KAAK,GAAG,SASnC,KAAA,QAAQ,IAOR,KAAA,cAAc,IAOd,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,OAAO,IAOP,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,OAA2B,MAO3B,KAAA,WAAW,IAOX,KAAA,YAAY,IAOZ,KAAA,UAAU,IAOV,KAAA,iBAAiB,GAejB,KAAA,kBAAiC,MAOjC,KAAA,iBAAiB,oBAOjB,KAAA,gBAAgB,4BAOhB,KAAA,oBAA+C,CAACK,MAAU,UAAUA,CAAK,IAKhE,KAAQ,WAA6B,CAAA,GAErC,KAAQ,cAAc,IAEtB,KAAQ,QAAQ,IAEhB,KAAQ,sBAAsB,IAE9B,KAAQ,gBAAgB,IAExB,KAAQ,sBAAsB,IAWvC,KAAQ,iBAAuD,MA8W/D,KAAQ,sBAAsB,CAAC,MAAwB;AACrD,MAAI,KAAK,SAAS,CAAC,EAAE,eAAe,SAAS,IAAI,KAC/C,KAAK,eAAA;AAAA,IAET;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EA5WA,IAAY,qBAAkC;AAC5C,WAAI,CAAC,KAAK,YAAY,CAAC,KAAK,4BAAkB,IAAA,IACvC,IAAI,IAAI,KAAK,MAAM,MAAM,GAAG,EAAE,OAAO,OAAO,CAAC;AAAA,EACtD;AAAA;AAAA;AAAA,EAKA,IAAY,mBAAqC;AAC/C,QAAI,CAAC,KAAK,YAAa,QAAO,KAAK;AACnC,UAAMC,IAAQ,KAAK,YAAY,YAAA;AAC/B,WAAO,KAAK,SAAS,OAAO,CAACC,MAAMA,EAAE,MAAM,YAAA,EAAc,SAASD,CAAK,CAAC;AAAA,EAC1E;AAAA;AAAA,EAIS,uBAA6B;AACpC,UAAM,qBAAA,GAEF,OAAO,WAAa,OACtB,SAAS,oBAAoB,SAAS,KAAK,mBAAmB,GAE5D,KAAK,mBAAmB,QAC1B,aAAa,KAAK,cAAc,GAG9B,KAAK,UACP,KAAK,QAAQ;AAAA,EAEjB;AAAA,EAES,QAAQE,GAA+C;;AAM9D,QALA,MAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,OAAO,KAC/B,KAAK,iBAAA,GAGHA,EAAkB,IAAI,OAAO,KAAK,KAAK,OAAO;AAChD,YAAMC,KAAUC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAC/C,UAAID,GAAS;AACX,cAAME,IAAM,KAAK;AACjB,8BAAsB,MAAM;AAC1B,UAAAF,EAAQ,cAAc,IACtB,sBAAsB,MAAM;AAC1B,YAAAA,EAAQ,cAAcE;AAAA,UACxB,CAAC;AAAA,QACH,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA,EAKQ,mBAAyB;AAC/B,SAAK,WAAW,aAAa,KAAK,SAAS,IAAI;AAAA,EACjD;AAAA;AAAA,EAGS,kBAAwB;AAC/B,IAAI,KAAK,YAAY,CAAC,KAAK,QACzB,KAAK,WAAW;AAAA,MACd,EAAE,cAAc,GAAA;AAAA,MAChB,KAAK,SAAS,KAAK;AAAA,MACnB,KAAK;AAAA,IAAA,IAGP,KAAK,WAAW,YAAY,EAAE;AAAA,EAElC;AAAA;AAAA,EAGmB,eAAqB;AACtC,SAAK,QAAQ,IACb,KAAK,cAAc,IACnB,KAAK,WAAW,aAAa,IAAI,GACjC,KAAK,uBAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAImB,oBACjBC,GACAC,GACM;AACN,IAAI,OAAOD,KAAU,aACnB,KAAK,QAAQA;AAAAA,EAEjB;AAAA;AAAA,EAGmB,gBAAgBE,GAAyB;AAC1D,SAAK,WAAWA;AAAA,EAClB;AAAA;AAAA;AAAA,EAKQ,oBAA0B;AAChC,SAAK,aAAA;AAAA,EACP;AAAA;AAAA,EAGQ,aAAaC,GAAuC;;AAC1D,WAAO,EAAE,OAAOA,EAAG,OAAO,SAAOL,IAAAK,EAAG,gBAAH,gBAAAL,EAAgB,WAAUK,EAAG,OAAO,UAAUA,EAAG,SAAA;AAAA,EACpF;AAAA;AAAA,EAGQ,eAAqB;;AAC3B,UAAMC,KAAON,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,QAAI,CAACM,EAAM;AAEX,UAAMC,IAA2B,CAAA;AAEjC,eAAWF,KAAMC,EAAK,iBAAiB,EAAE,SAAS,GAAA,CAAM;AACtD,UAAID,aAAc;AAChB,QAAAE,EAAO,KAAK,KAAK,aAAaF,CAAE,CAAC;AAAA,eACxBA,aAAc;AACvB,mBAAWG,KAAS,MAAM,KAAKH,EAAG,QAAQ;AACxC,UAAIG,aAAiB,qBAAmBD,EAAO,KAAK,KAAK,aAAaC,CAAK,CAAC;AAKlF,SAAK,WAAWD;AAAA,EAClB;AAAA;AAAA;AAAA,EAKQ,uBAAuB,GAAgB;AAC7C,UAAMD,IAAO,EAAE;AACf,SAAK,gBAAgBA,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACtE;AAAA;AAAA;AAAA,EAKQ,gBAAsB;AAC5B,IAAI,KAAK,YAAY,KAAK,UAC1B,KAAK,QAAQ,IACb,KAAK,sBAAsB,IACvB,OAAO,WAAa,OACtB,SAAS,iBAAiB,SAAS,KAAK,mBAAmB,GAE7D,KAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA;AAAA,EAGQ,iBAAuB;AAC7B,IAAK,KAAK,UACV,KAAK,QAAQ,IACb,KAAK,sBAAsB,IAC3B,KAAK,uBAAA,GACD,OAAO,WAAa,OACtB,SAAS,oBAAoB,SAAS,KAAK,mBAAmB,GAEhE,KAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA;AAAA;AAAA,EAKQ,aAAa,GAAgB;AACnC,UAAMG,IAAQ,EAAE;AAChB,SAAK,cAAcA,EAAM,OAEpB,KAAK,SACR,KAAK,cAAA,GAGP,KAAK,sBAAsB,IAEvB,KAAK,iBAAiB,KACpB,KAAK,mBAAmB,QAC1B,aAAa,KAAK,cAAc,GAElC,KAAK,iBAAiB,WAAW,MAAM;AACrC,WAAK,WAAA,GACL,KAAK,uBAAA;AAAA,IACP,GAAG,KAAK,cAAc,MAEtB,KAAK,WAAA,GACL,KAAK,uBAAA;AAAA,EAET;AAAA;AAAA,EAGQ,yBAA+B;AACrC,UAAMC,IAAQ,KAAK,iBAAiB;AACpC,SAAK,sBACHA,MAAU,IACN,wBACA,GAAGA,CAAK,IAAIA,MAAU,IAAI,WAAW,SAAS;AAAA,EACtD;AAAA;AAAA,EAGQ,aAAmB;AACzB,SAAK;AAAA,MACH,IAAI,YAA+B,YAAY;AAAA,QAC7C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,YAAA;AAAA,MAAY,CACnC;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,eAAqB;AAC3B,SAAK,cAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAKQ,eAAe,GAAwB;AAC7C,QAAI,KAAK,SAAU;AAEnB,UAAMC,IAAW,KAAK,kBAChBC,IAAiBD,EACpB,IAAI,CAACd,GAAGgB,OAAO,EAAE,GAAAhB,GAAG,GAAAgB,EAAA,EAAI,EACxB,OAAO,CAAC,EAAE,GAAAhB,QAAQ,CAACA,EAAE,QAAQ,EAC7B,IAAI,CAAC,EAAE,EAAA,MAAQ,CAAC;AAEnB,YAAQ,EAAE,KAAA;AAAA,MACR,KAAK,aAAa;AAEhB,YADA,EAAE,eAAA,GACE,CAAC,KAAK,OAAO;AACf,eAAK,cAAA,GACL,KAAK,sBAAsBe,EAAe,SAAS,IAAKA,EAAe,CAAC,KAAK,IAAK;AAClF;AAAA,QACF;AACA,cAAME,IAAWF,EAAe,KAAK,CAACC,MAAMA,IAAI,KAAK,mBAAmB;AACxE,aAAK,sBACHC,MAAa,SAAYA,IAAYF,EAAe,CAAC,KAAK,KAAK;AACjE;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AAEd,YADA,EAAE,eAAA,GACE,CAAC,KAAK,OAAO;AACf,eAAK,cAAA;AACL,gBAAMG,IAAcH,EAAeA,EAAe,SAAS,CAAC;AAC5D,eAAK,sBAAsBG,MAAgB,SAAYA,IAAc;AACrE;AAAA,QACF;AACA,cAAMC,IAAS,CAAC,GAAGJ,CAAc,EAAE,QAAA,EAAU,KAAK,CAACC,MAAMA,IAAI,KAAK,mBAAmB,GAC/EI,IAAgBL,EAAeA,EAAe,SAAS,CAAC;AAC9D,aAAK,sBACHI,MAAW,SAAYA,IAAUC,KAAiB,KAAK;AACzD;AAAA,MACF;AAAA,MACA,KAAK,SAAS;AAEZ,YADA,EAAE,eAAA,GACE,CAAC,KAAK,OAAO;AACf,eAAK,cAAA;AACL;AAAA,QACF;AACA,YAAI,KAAK,uBAAuB,KAAK,KAAK,sBAAsBN,EAAS,QAAQ;AAC/E,gBAAMO,IAAMP,EAAS,KAAK,mBAAmB;AAC7C,UAAIO,KAAK,KAAK,cAAcA,CAAG;AAAA,QACjC;AACA;AAAA,MACF;AAAA,MACA,KAAK,UAAU;AACb,UAAE,eAAA,GACF,KAAK,eAAA,GACL,KAAK,cAAc,IACf,KAAK,WAAQ,KAAK,OAAO,QAAQ;AACrC;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,aAAK,eAAA;AACL;AAAA,MACF;AAAA;AAAA,MAEA,KAAK,QAAQ;AACX,UAAE,eAAA,GACG,KAAK,SAAO,KAAK,cAAA,GACtB,KAAK,sBAAsBN,EAAe,SAAS,IAAKA,EAAe,CAAC,KAAK,KAAM;AACnF;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,UAAE,eAAA,GACG,KAAK,SAAO,KAAK,cAAA,GACtB,KAAK,sBACHA,EAAe,SAAS,IAAKA,EAAeA,EAAe,SAAS,CAAC,KAAK,KAAM;AAClF;AAAA,MACF;AAAA,IAEE;AAAA,EAEN;AAAA;AAAA;AAAA;AAAA,EAMQ,cAAcO,GAA8B;AAClD,QAAI,CAAAA,EAAO,UACX;AAAA,UAAI,KAAK,UAAU;AACjB,cAAMC,IAAU,KAAK,oBACfC,IAAO,IAAI,IAAID,CAAO;AAC5B,QAAIC,EAAK,IAAIF,EAAO,KAAK,IACvBE,EAAK,OAAOF,EAAO,KAAK,IAExBE,EAAK,IAAIF,EAAO,KAAK,GAEvB,KAAK,QAAQ,CAAC,GAAGE,CAAI,EAAE,KAAK,GAAG;AAAA,MAEjC;AACE,aAAK,QAAQF,EAAO,OACpB,KAAK,eAAA;AAEP,WAAK,wBAAA,GACL,KAAK,cAAc,IACf,KAAK,WAAQ,KAAK,OAAO,QAAQ,KACrC,KAAK,gBAAA;AAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAIQ,aAAaG,GAAmB;AACtC,UAAMD,IAAO,KAAK;AAClB,IAAAA,EAAK,OAAOC,CAAG,GACf,KAAK,QAAQ,CAAC,GAAGD,CAAI,EAAE,KAAK,GAAG,GAC/B,KAAK,gBAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAKQ,aAAa,GAAgB;AACnC,MAAE,gBAAA,GACF,KAAK,QAAQ,IACb,KAAK,cAAc,IACf,KAAK,WACP,KAAK,OAAO,QAAQ,IACpB,KAAK,OAAO,MAAA,IAEd,KAAK,WAAW,aAAa,IAAI,GACjC,KAAK,gBAAA,GACL,KAAK,cAAc,IAAI,YAAkB,YAAY,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACzF;AAAA;AAAA;AAAA,EAKQ,kBAAwB;AAC9B,SAAK;AAAA,MACH,IAAI,YAA+B,aAAa;AAAA,QAC9C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAcS,MAAME,GAA8B;;AAC3C,KAAAvB,IAAA,KAAK,WAAL,QAAAA,EAAa,MAAMuB;AAAA,EACrB;AAAA;AAAA;AAAA,EAKQ,UAAUC,GAAuB;AACvC,WAAO,GAAG,KAAK,GAAG,WAAWA,CAAK;AAAA,EACpC;AAAA;AAAA,EAGA,IAAY,gBAAwB;AAGlC,QADI,KAAK,YACL,CAAC,KAAK,MAAO,QAAO;AACxB,UAAMN,IAAM,KAAK,SAAS,KAAK,CAACrB,MAAMA,EAAE,UAAU,KAAK,KAAK;AAC5D,WAAOqB,IAAMA,EAAI,QAAQ,KAAK;AAAA,EAChC;AAAA;AAAA,EAGQ,iBAAiB;AACvB,UAAMP,IAAW,KAAK;AAEtB,WAAIA,EAAS,WAAW,IACfc;AAAA;AAAA,2CAE8B,KAAK,cAAc;AAAA;AAAA,UAKnDC;AAAA,MACLf;AAAA,MACA,CAACO,MAAQA,EAAI;AAAA,MACb,CAACA,GAAKM,MAAU;AAEd,cAAMG,IAAa,KAAK,WACpB,KAAK,mBAAmB,IAAIT,EAAI,KAAK,IACrCA,EAAI,UAAU,KAAK,OACjBU,IAAYJ,MAAU,KAAK;AAEjC,eAAOC;AAAA;AAAA,iBAEE,KAAK,UAAUD,CAAK,CAAC;AAAA;AAAA;AAAA,oBAGlBK,EAAS;AAAA,UACf,eAAe;AAAA,UACf,2BAA2BF;AAAA,UAC3B,0BAA0BC;AAAA,UAC1B,2BAA2BV,EAAI;AAAA,QAAA,CAChC,CAAC;AAAA,4BACc,KAAK,WACjBS,IACE,SACA,UACFA,IACE,SACAG,CAAO;AAAA,4BACGZ,EAAI,WAAW,SAASY,CAAO;AAAA,qBACtC,MAAM,KAAK,cAAcZ,CAAG,CAAC;AAAA;AAAA,gDAEFA,EAAI,KAAK;AAAA;AAAA;AAAA,MAGnD;AAAA,IAAA;AAAA,EAEJ;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMa,IAAW,CAAC,CAAC,KAAK,SAAS,KAAK,eAChCC,IAAY,KAAK,aAAa,CAAC,CAAC,KAAK,SAAS,CAAC,KAAK,UAEpDC,IAAe;AAAA,MACnB,OAAO;AAAA,MACP,gBAAgBF;AAAA,MAChB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB,KAAK;AAAA,MACxB,eAAe,KAAK;AAAA,IAAA,GAGhBG,IAAe;AAAA,MACnB,cAAc;AAAA,MACd,CAAC,iBAAiB,KAAK,IAAI,EAAE,GAAG;AAAA,IAAA,GAG5BC,IACJ;AAAA,MACEJ,KAAY,KAAK,gBAAgB,KAAK,WAAW;AAAA,MACjD,KAAK,WAAW,KAAK,cAAc;AAAA,IAAA,EAElC,OAAO,OAAO,EACd,KAAK,GAAG,KAAK,QAEZK,IACJ,KAAK,SAAS,KAAK,uBAAuB,IACtC,KAAK,UAAU,KAAK,mBAAmB,IACvC;AAEN,WAAOX;AAAA,gCACqBI,EAASI,CAAY,CAAC;AAAA;AAAA;AAAA,YAG1C,KAAK,QACHR,cAAiB,KAAK,QAAQ,QAAQ,KAAK,GAAG;AAAA,kBAC1C,KAAK,KAAK;AAAA,kBACV,KAAK,WACHA,sEACAK,CAAO;AAAA,0BAEbA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAST,KAAK,YAAY,KAAK,mBAAmB,OAAO,IAC9C,CAAC,GAAG,KAAK,kBAAkB,EAAE,IAAI,CAACR,MAAQ;AACxC,YAAMJ,IAAM,KAAK,SAAS,KAAK,CAACrB,MAAMA,EAAE,UAAUyB,CAAG,GAC/C3B,IAAQuB,IAAMA,EAAI,QAAQI;AAChC,aAAOG;AAAA;AAAA,sDAE+B9B,CAAK;AAAA;AAAA;AAAA;AAAA,mCAIxB,KAAK,kBAAkBA,CAAK,CAAC;AAAA,+BACjC,CAAC0C,MAAa;AACrB,QAAAA,EAAE,gBAAA,GACF,KAAK,aAAaf,CAAG;AAAA,MACvB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoBT,CAAC,IACDQ,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMJ,KAAK,GAAG;AAAA,oBACLD,EAASK,CAAY,CAAC;AAAA;AAAA,4BAEd,KAAK,QAAQ,SAAS,OAAO;AAAA;AAAA,4BAE7B,KAAK,UAAU;AAAA,oCACPI,EAAUF,CAAgB,CAAC;AAAA,2BACpCL,IAAW,SAASD,CAAO;AAAA,+BACvBQ,EAAUH,CAAW,CAAC;AAAA,4BACzB,KAAK,WAAW,SAASL,CAAO;AAAA,yBACnCQ,EAAU,KAAK,mBAAmB,MAAS,CAAC;AAAA,8BACvCA;AAAA,MAChB,KAAK,SAAS,CAAC,KAAK,kBAAkB,KAAK,WAAW;AAAA,IAAA,CACvD;AAAA,wBACW,KAAK,UAAU,SAASR,CAAO;AAAA,qBAClC,KAAK,gBAAgB,KAAK,QAAQ,KAAK,KAAK,cAAc;AAAA,0BACrDQ,EAAU,KAAK,eAAe,MAAS,CAAC;AAAA,wBAC1C,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,mBAClBA,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA;AAAA,qBAE/B,KAAK,YAAY;AAAA,qBACjB,KAAK,YAAY;AAAA,uBACf,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA,YAI9B,KAAK,UACHb;AAAA;AAAA;AAAA;AAAA,kBAKAK,CAAO;AAAA;AAAA;AAAA,YAGTE,IACEP;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKiB,SAAS,KAAK,SAAS,KAAK,mBAAmB,WAAW,EAAE;AAAA;AAAA,2BAEhE,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAmB9BK,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAUN,KAAK,UAAU;AAAA;AAAA,uBAEPQ,EAAU,KAAK,SAAS,KAAK,mBAAmB,MAAS,CAAC;AAAA,iCAChD,KAAK,WAAW,SAASR,CAAO;AAAA,oBAC7C,CAAC,KAAK,KAAK;AAAA;AAAA,wCAES,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,0CAInB,KAAK,iBAAiB;AAAA;AAAA;AAAA,yCAGvB,KAAK,sBAAsB;AAAA,YACxDC,IACEN,8CAAiD,KAAK,QAAQ;AAAA,kBAC1D,KAAK,KAAK;AAAA,wBAEdK,CAAO;AAAA;AAAA;AAAA;AAAA,UAIX,KAAK,YAAY,CAACC,IAChBN;AAAA,kEACsD,KAAK,WAAW;AAAA,yCACzC,KAAK,QAAQ;AAAA;AAAA,gBAG1CK,CAAO;AAAA;AAAA;AAAA,kBAGD,KAAK,aAAa;AAAA,YACxB,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA,EAIlC;AACF;AAxzBatC,EACK,SAAS,CAACJ,CAAmB;AADlCI,EAMK,iBAAiB;AAwBjC+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7BfhD,EA8BX,WAAA,SAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApCfhD,EAqCX,WAAA,eAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3C9BhD,EA4CX,WAAA,SAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlD/BhD,EAmDX,WAAA,YAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzD/BhD,EA0DX,WAAA,YAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhE9BhD,EAiEX,WAAA,QAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvEfhD,EAwEX,WAAA,SAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GA9EvChD,EA+EX,WAAA,YAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,SAAS,IAAM;AAAA,GArFpDhD,EAsFX,WAAA,QAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5F/BhD,EA6FX,WAAA,YAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnG/BhD,EAoGX,WAAA,aAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1G/BhD,EA2GX,WAAA,WAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB;AAAA,GAjH7ChD,EAkHX,WAAA,kBAAA,CAAA;AAeA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,oBAAoB;AAAA,GAhI9ChD,EAiIX,WAAA,mBAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,oBAAoB;AAAA,GAvI9ChD,EAwIX,WAAA,kBAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB;AAAA,GA9I5ChD,EA+IX,WAAA,iBAAA,CAAA;AAOA+C,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GArJnBhD,EAsJX,WAAA,qBAAA,CAAA;AAKiB+C,EAAA;AAAA,EAAhBrC,EAAA;AAAM,GA3JIV,EA2JM,WAAA,YAAA,CAAA;AAEA+C,EAAA;AAAA,EAAhBrC,EAAA;AAAM,GA7JIV,EA6JM,WAAA,eAAA,CAAA;AAEA+C,EAAA;AAAA,EAAhBrC,EAAA;AAAM,GA/JIV,EA+JM,WAAA,SAAA,CAAA;AAEA+C,EAAA;AAAA,EAAhBrC,EAAA;AAAM,GAjKIV,EAiKM,WAAA,uBAAA,CAAA;AAEA+C,EAAA;AAAA,EAAhBrC,EAAA;AAAM,GAnKIV,EAmKM,WAAA,iBAAA,CAAA;AAEA+C,EAAA;AAAA,EAAhBrC,EAAA;AAAM,GArKIV,EAqKM,WAAA,uBAAA,CAAA;AAMT+C,EAAA;AAAA,EADPE,EAAM,eAAe;AAAA,GA1KXjD,EA2KH,WAAA,UAAA,CAAA;AA3KGA,IAAN+C,EAAA;AAAA,EADNG,EAAc,aAAa;AAAA,GACflD,CAAA;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-data-table-B6h0RPn0.js","sources":["../../src/components/hx-data-table/hx-data-table.styles.ts","../../src/components/hx-data-table/hx-data-table.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDataTableStyles = css`\n :host {\n display: block;\n overflow-x: auto;\n font-family: var(--hx-data-table-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n /* ─── Scroll Wrapper ─── */\n\n .table-wrapper {\n min-width: 0;\n width: 100%;\n }\n\n /* ─── Table ─── */\n\n table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n min-width: var(--hx-data-table-min-width, 600px);\n }\n\n /* ─── Head ─── */\n\n thead {\n background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));\n }\n\n :host([sticky-header]) thead th {\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));\n }\n\n /* ─── Cells ─── */\n\n th,\n td {\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n text-align: start;\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));\n vertical-align: middle;\n }\n\n th {\n font-weight: var(--hx-font-weight-semibold, 600);\n color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));\n white-space: nowrap;\n }\n\n td {\n color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));\n }\n\n /* ─── Checkbox Column ─── */\n\n th.col-checkbox,\n td.col-checkbox {\n /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n width: var(--hx-touch-target-min, 2.75rem);\n min-width: var(--hx-touch-target-min, 2.75rem);\n padding-inline-end: var(--hx-space-2, 0.5rem);\n }\n\n th.col-checkbox {\n text-align: center;\n }\n\n td.col-checkbox {\n text-align: center;\n }\n\n /* ─── Sort Button ─── */\n\n .sort-btn {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n background: none;\n border: none;\n padding: 0;\n font: inherit;\n font-weight: inherit;\n color: inherit;\n cursor: pointer;\n white-space: nowrap;\n }\n\n .sort-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 2px);\n }\n\n /* ─── Sort Icon ─── */\n\n .sort-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n opacity: var(--hx-opacity-25, 0.25); /* sort icon inactive — intentionally subtle */\n transition:\n opacity var(--hx-transition-fast, 150ms ease),\n transform var(--hx-transition-fast, 150ms ease);\n }\n\n .sort-icon--active {\n opacity: var(--hx-opacity-100, 1);\n color: var(--hx-color-primary-500, #2563eb);\n }\n\n .sort-icon--desc {\n transform: rotate(180deg);\n }\n\n /* ─── Row States ─── */\n\n tbody tr {\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n tbody tr:hover {\n background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));\n }\n\n tbody tr[aria-selected='true'] {\n background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));\n }\n\n /* ─── Checkbox Input ─── */\n\n input[type='checkbox'] {\n width: var(--hx-size-4, 1rem);\n height: var(--hx-size-4, 1rem);\n cursor: pointer;\n accent-color: var(--hx-color-primary-500, #2563eb);\n }\n\n /* ─── Loading Skeleton ─── */\n\n .skeleton-cell {\n display: block;\n height: 1em;\n border-radius: var(--hx-border-radius-sm, 2px);\n background: linear-gradient(\n 90deg,\n var(--hx-color-neutral-200, #e2e8f0) 25%,\n var(--hx-color-neutral-100, #f1f5f9) 50%,\n var(--hx-color-neutral-200, #e2e8f0) 75%\n );\n background-size: 200% 100%;\n animation: hx-shimmer var(--hx-data-table-shimmer-duration, 1.5s) infinite;\n }\n\n @keyframes hx-shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .skeleton-cell {\n animation: none;\n opacity: var(\n --hx-opacity-50,\n 0.5\n ); /* reduced from animation; approximate to available token */\n }\n\n .sort-icon {\n transition: none;\n }\n\n tbody tr {\n transition: none;\n }\n }\n\n /* ─── Cell Focus ─── */\n\n td:focus-visible,\n th:focus-visible,\n [part~='td']:focus-visible,\n [part~='th']:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, -2px);\n border-radius: var(--hx-border-radius-sm, 2px);\n }\n\n /* ─── Empty State ─── */\n\n .empty-cell {\n text-align: center;\n color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));\n padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n table {\n border: 1px solid CanvasText;\n }\n\n th,\n td {\n border-bottom-color: CanvasText;\n }\n\n tbody tr[aria-selected='true'] {\n outline: 2px solid Highlight;\n }\n\n .skeleton-cell {\n animation: none;\n border: 1px solid GrayText;\n background: none;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixDataTableStyles } from './hx-data-table.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * Column definition for `hx-data-table`.\n */\nexport interface HxDataTableColumn {\n key: string;\n label: string;\n sortable?: boolean;\n width?: string;\n}\n\n/**\n * Sort state exported for TypeScript consumers and CEM event types.\n */\nexport interface HxDataTableSortState {\n key: string;\n direction: 'asc' | 'desc';\n}\n\n/** Detail for the hx-select event dispatched by hx-data-table. */\nexport interface HxDataTableSelectDetail {\n selectedRows: Record<string, unknown>[];\n}\n\n/** Detail for the hx-row-click event dispatched by hx-data-table. */\nexport interface HxDataTableRowClickDetail {\n row: Record<string, unknown>;\n index: number;\n}\n\n/**\n * An enterprise data table with sorting, row selection, and keyboard navigation.\n *\n * @summary Enterprise data table with sorting, selection, and responsive scroll.\n *\n * @tag hx-data-table\n *\n * @slot toolbar - Content rendered above the table (e.g., search, actions).\n * @slot empty - Custom empty-state content rendered when `rows` is empty and not loading.\n * @slot loading - Custom loading content rendered when `loading` is true.\n *\n * @fires {CustomEvent<HxDataTableSortState>} hx-sort - Dispatched when a sortable column header is clicked.\n * @fires {CustomEvent<{selectedRows: Record<string, unknown>[]}>} hx-select - Dispatched when row selection changes.\n * @fires {CustomEvent<{row: Record<string, unknown>, index: number}>} hx-row-click - Dispatched when a data row is clicked.\n *\n * @csspart table - The `<table>` element.\n * @csspart thead - The `<thead>` element.\n * @csspart tbody - The `<tbody>` element.\n * @csspart tr - Each `<tr>` element.\n * @csspart th - Each `<th>` element.\n * @csspart td - Each `<td>` element.\n * @csspart sort-icon - The sort indicator icon `<span>` inside sortable headers.\n * @csspart checkbox - Each `<input type=\"checkbox\">` element.\n *\n * @cssprop [--hx-data-table-header-bg=var(--hx-color-neutral-50)] - Header background color.\n * @cssprop [--hx-data-table-header-color=var(--hx-color-neutral-700)] - Header text color.\n * @cssprop [--hx-data-table-cell-color=var(--hx-color-neutral-900)] - Cell text color.\n * @cssprop [--hx-data-table-border-color=var(--hx-color-neutral-200)] - Row border color.\n * @cssprop [--hx-data-table-row-hover-bg=var(--hx-color-neutral-50)] - Row hover background.\n * @cssprop [--hx-data-table-row-selected-bg=var(--hx-color-primary-50)] - Selected row background.\n * @cssprop [--hx-data-table-empty-color=var(--hx-color-neutral-600)] - Empty state text color.\n * @cssprop [--hx-data-table-min-width=600px] - Minimum table width before horizontal scrolling.\n */\n@customElement('hx-data-table')\nexport class HelixDataTable extends HelixElement {\n static override styles = [helixDataTableStyles];\n\n // ─── Public Properties ───\n\n /**\n * Column definitions. Each item: `{ key, label, sortable?, width? }`.\n * Can be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).\n * @attr columns\n */\n @property({\n type: Array,\n converter: {\n fromAttribute(value: string | null) {\n if (!value) return [];\n try {\n return JSON.parse(value);\n } catch {\n return [];\n }\n },\n },\n })\n columns: HxDataTableColumn[] = [];\n\n /**\n * Row data. Each item is a plain object keyed by column `key` values.\n * Can be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).\n * @attr rows\n */\n @property({\n type: Array,\n converter: {\n fromAttribute(value: string | null) {\n if (!value) return [];\n try {\n return JSON.parse(value);\n } catch {\n return [];\n }\n },\n },\n })\n rows: Record<string, unknown>[] = [];\n\n /**\n * When true, renders a checkbox column for row selection.\n * @attr selectable\n */\n @property({ type: Boolean, reflect: true })\n selectable = false;\n\n /**\n * The column key currently used for sorting.\n * @attr sort-key\n */\n @property({ type: String, attribute: 'sort-key' })\n sortKey = '';\n\n /**\n * Current sort direction.\n * @attr sort-direction\n */\n @property({ type: String, attribute: 'sort-direction' })\n sortDirection: 'asc' | 'desc' = 'asc';\n\n /**\n * When true, renders a loading skeleton and sets `aria-busy=\"true\"` on the host.\n * @attr loading\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * Text displayed in the default empty state when `rows` is empty and not loading.\n * @attr empty-label\n */\n @property({ type: String, attribute: 'empty-label' })\n emptyLabel = 'No data';\n\n /**\n * Accessible name for the table. Exposed via `aria-label` on the `<table>` element.\n * Required when the table has columns — a missing label is a WCAG 4.1.2 violation.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Accessible label for the \"select all rows\" checkbox in the table header.\n * @attr select-all-label\n */\n @property({ attribute: 'select-all-label' })\n selectAllLabel = 'Select all rows';\n\n /**\n * When true, the header row is sticky (position: sticky; top: 0).\n * @attr sticky-header\n */\n @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n stickyHeader = false;\n\n /**\n * Current page (1-based). Set to 0 or leave at default (0) to disable pagination.\n * @attr page\n */\n @property({ type: Number })\n page = 1;\n\n /**\n * Number of rows per page. Set to 0 to disable pagination (show all rows).\n * @attr page-size\n */\n @property({ type: Number, attribute: 'page-size' })\n pageSize = 0;\n\n // ─── Internal State ───\n\n /** @internal */\n @state()\n private _selectedRows: Set<number> = new Set();\n\n /**\n * Cached flat list of all td/th cells in the shadow DOM.\n * Invalidated (set to null) whenever rows or columns change so the next keydown\n * re-queries the DOM and re-caches. Avoids repeated querySelectorAll on every keypress.\n * @internal\n */\n private _cachedCells: HTMLElement[] | null = null;\n\n /**\n * Index (within the columns array) of the sortable header that currently holds\n * roving tabindex focus. -1 means no sortable header has been focused yet;\n * the first sortable column will receive tabindex=\"0\" by default.\n * @internal\n */\n @state() private _focusedHeaderIndex = -1;\n\n /**\n * Resolved columns array. Computed in willUpdate from the public `columns`\n * property which may be a JSON string (Drupal/Twig path) or a JS array.\n * All internal reads use this field to avoid mutating reactive properties\n * inside willUpdate (which would trigger extra update cycles).\n * @internal\n */\n @state() private _resolvedColumns: HxDataTableColumn[] = [];\n\n /**\n * Resolved rows array. Computed in willUpdate from the public `rows`\n * property which may be a JSON string (Drupal/Twig path) or a JS array.\n * @internal\n */\n @state() private _resolvedRows: Record<string, unknown>[] = [];\n\n // ─── Lifecycle ───\n\n override willUpdate(changed: PropertyValues<this>): void {\n // Coerce JSON strings to arrays — this is the Drupal/Twig integration path.\n // Lit does not JSON-parse array attributes automatically, so we do it here.\n // Note: Lit's defaultConverter returns null (not a string) when JSON.parse fails for\n // type: Array — so we guard against both string and any non-array value.\n //\n // We write to private @state() resolved fields instead of mutating the public\n // reactive properties. Mutating @property fields inside willUpdate triggers an\n // additional update cycle; writing to separate @state fields does not because\n // Lit batches all changes within the same willUpdate into a single render.\n if (changed.has('columns')) {\n const rawColumns: unknown = this.columns;\n if (typeof rawColumns === 'string') {\n try {\n this._resolvedColumns = JSON.parse(rawColumns) as HxDataTableColumn[];\n } catch {\n this._resolvedColumns = [];\n }\n } else if (Array.isArray(this.columns)) {\n this._resolvedColumns = this.columns;\n } else {\n this._resolvedColumns = [];\n }\n }\n if (changed.has('rows')) {\n const rawRows: unknown = this.rows;\n if (typeof rawRows === 'string') {\n try {\n this._resolvedRows = JSON.parse(rawRows) as Record<string, unknown>[];\n } catch {\n this._resolvedRows = [];\n }\n } else if (Array.isArray(this.rows)) {\n this._resolvedRows = this.rows;\n } else {\n this._resolvedRows = [];\n }\n }\n // Only warn when rows actually changes to avoid noise on every property update.\n if (changed.has('rows') && this._resolvedRows.length > 500) {\n devWarn(\n 'hx-data-table',\n 'Rendering more than 500 rows may impact performance. Consider server-side pagination.',\n );\n }\n // WCAG 4.1.2: data tables must have an accessible name so screen readers can identify them.\n if (\n (changed.has('label') || changed.has('columns')) &&\n this._resolvedColumns.length > 0 &&\n !this.label\n ) {\n devWarn(\n 'hx-data-table',\n 'No accessible name provided. Set the `label` attribute so screen readers can identify this table (WCAG 4.1.2).',\n );\n }\n }\n\n override updated(changed: PropertyValues<this>): void {\n // Invalidate cell cache when rows or columns change so the next keyboard\n // navigation re-queries and re-caches the updated DOM. We check the public\n // properties because _resolvedColumns/_resolvedRows are derived from them\n // in willUpdate and always change in lockstep.\n if (changed.has('rows') || changed.has('columns')) {\n this._cachedCells = null;\n }\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleSort(key: string): void {\n const direction =\n this.sortKey === key ? (this.sortDirection === 'asc' ? 'desc' : 'asc') : 'asc';\n this.sortKey = key;\n this.sortDirection = direction;\n this.dispatchEvent(\n new CustomEvent<HxDataTableSortState>('hx-sort', {\n bubbles: true,\n composed: true,\n detail: { key, direction },\n }),\n );\n }\n\n /** @internal */\n private _handleRowClick(row: Record<string, unknown>, index: number): void {\n this.dispatchEvent(\n new CustomEvent<{ row: Record<string, unknown>; index: number }>('hx-row-click', {\n bubbles: true,\n composed: true,\n detail: { row, index },\n }),\n );\n }\n\n /** @internal */\n private _handleSelect(index: number, checked: boolean): void {\n const next = new Set(this._selectedRows);\n if (checked) {\n next.add(index);\n } else {\n next.delete(index);\n }\n this._selectedRows = next;\n this._dispatchSelect();\n }\n\n /** @internal */\n private _handleSelectAll(checked: boolean): void {\n this._selectedRows = checked ? new Set(this._resolvedRows.map((_, i) => i)) : new Set<number>();\n this._dispatchSelect();\n }\n\n /** @internal */\n private _dispatchSelect(): void {\n this.dispatchEvent(\n new CustomEvent<{ selectedRows: Record<string, unknown>[] }>('hx-select', {\n bubbles: true,\n composed: true,\n detail: {\n selectedRows: [...this._selectedRows].flatMap((i) => {\n const row = this._resolvedRows[i];\n return row !== undefined ? [row] : [];\n }),\n },\n }),\n );\n }\n\n // ─── Keyboard Navigation ───\n\n /** @internal */\n private _handleKeydown(e: KeyboardEvent): void {\n if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', ' '].includes(e.key))\n return;\n\n const root = this.shadowRoot;\n if (!root) return;\n\n // Use cached cell list; re-query only when invalidated by rows/columns change\n if (!this._cachedCells) {\n this._cachedCells = Array.from(\n root.querySelectorAll<HTMLElement>('[part~=\"td\"],[part~=\"th\"]'),\n );\n }\n const cells = this._cachedCells;\n\n // When focus is inside a child element (e.g., the sort <button> inside a <th>),\n // shadowRoot.activeElement returns the child, not the cell. Walk up to find the cell.\n let focused = root.activeElement as HTMLElement | null;\n if (!focused) return;\n\n if (cells.indexOf(focused) === -1) {\n let ancestor = focused.parentElement;\n while (ancestor) {\n if (cells.includes(ancestor as HTMLElement)) {\n focused = ancestor as HTMLElement;\n break;\n }\n ancestor = ancestor.parentElement;\n }\n }\n\n const colCount = this._resolvedColumns.length + (this.selectable ? 1 : 0);\n const idx = cells.indexOf(focused);\n if (idx === -1) return;\n\n let target: HTMLElement | null = null;\n\n if (e.key === 'ArrowRight' && idx + 1 < cells.length) {\n target = cells[idx + 1] ?? null;\n } else if (e.key === 'ArrowLeft' && idx - 1 >= 0) {\n target = cells[idx - 1] ?? null;\n } else if (e.key === 'ArrowDown' && idx + colCount < cells.length) {\n target = cells[idx + colCount] ?? null;\n } else if (e.key === 'ArrowUp' && idx - colCount >= 0) {\n target = cells[idx - colCount] ?? null;\n } else if (e.key === 'Home') {\n // First cell of the current row\n const rowStart = idx - (idx % colCount);\n target = cells[rowStart] ?? null;\n } else if (e.key === 'End') {\n // Last cell of the current row\n const rowEnd = Math.min(idx - (idx % colCount) + colCount - 1, cells.length - 1);\n target = cells[rowEnd] ?? null;\n } else if (e.key === ' ' && focused.getAttribute('part')?.includes('td')) {\n // Toggle selection on Space in a data row\n const rowIdx = Number(focused.dataset['rowIndex']);\n if (this.selectable && !isNaN(rowIdx)) {\n e.preventDefault();\n this._handleSelect(rowIdx, !this._selectedRows.has(rowIdx));\n }\n return;\n }\n\n if (target) {\n e.preventDefault();\n target.setAttribute('tabindex', '0');\n target.focus();\n focused.setAttribute('tabindex', '-1');\n }\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderSortIcon(key: string) {\n const isActive = this.sortKey === key;\n const iconClass = [\n 'sort-icon',\n isActive ? 'sort-icon--active' : '',\n isActive && this.sortDirection === 'desc' ? 'sort-icon--desc' : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return html`\n <span part=\"sort-icon\" class=${iconClass} aria-hidden=\"true\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path d=\"M8 3L5 7h6L8 3zM8 13l3-4H5l3 4z\" fill-rule=\"evenodd\" />\n </svg>\n </span>\n `;\n }\n\n /**\n * Returns the indices (within the columns array) of all sortable columns.\n * @internal\n */\n private get _sortableIndices(): number[] {\n return this._resolvedColumns.reduce<number[]>((acc, col, i) => {\n if (col.sortable) acc.push(i);\n return acc;\n }, []);\n }\n\n /**\n * Handles keyboard navigation between sortable column headers using the\n * roving tabindex pattern (ARIA Grid specification). Supports ArrowLeft/Right\n * to move between sortable headers, Home/End to jump to first/last, and\n * Enter/Space to trigger sort on the focused sortable header.\n * @internal\n */\n private _handleHeaderKeydown(e: KeyboardEvent): void {\n const sortable = this._sortableIndices;\n if (sortable.length === 0) return;\n\n // Enter/Space on a sortable header triggers sort\n if (e.key === 'Enter' || e.key === ' ') {\n const col = this._resolvedColumns[this._focusedHeaderIndex];\n if (col?.sortable) {\n e.preventDefault();\n this._handleSort(col.key);\n }\n return;\n }\n\n if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) return;\n\n // Determine which sortable position is currently focused.\n // If no sortable header is focused (currentPos === -1), let the\n // table-level _handleKeydown handle grid navigation instead.\n const currentPos = sortable.indexOf(this._focusedHeaderIndex);\n if (currentPos === -1) return;\n let nextPos: number;\n\n if (e.key === 'ArrowRight') {\n nextPos = currentPos === -1 ? 0 : Math.min(currentPos + 1, sortable.length - 1);\n } else if (e.key === 'ArrowLeft') {\n nextPos = currentPos <= 0 ? 0 : currentPos - 1;\n } else if (e.key === 'Home') {\n nextPos = 0;\n } else {\n // End\n nextPos = sortable.length - 1;\n }\n\n const nextIndex = sortable[nextPos];\n if (nextIndex === undefined) return;\n\n e.preventDefault();\n this._focusedHeaderIndex = nextIndex;\n\n // Focus the <th> element for the target column\n const headers = this.shadowRoot?.querySelectorAll<HTMLElement>('thead th[data-col-index]');\n const target = headers?.[nextIndex] ?? null;\n if (target) {\n target.focus();\n }\n }\n\n /** @internal */\n private _renderHeaderRow() {\n // Determine which sortable header gets tabindex=\"0\" (roving tabindex).\n // If _focusedHeaderIndex is -1 (initial), the first sortable column wins.\n const sortable = this._sortableIndices;\n const activeIndex =\n this._focusedHeaderIndex >= 0 ? this._focusedHeaderIndex : (sortable[0] ?? -1);\n\n return html`\n <tr part=\"tr\" @keydown=${this._handleHeaderKeydown}>\n ${this.selectable\n ? html`\n <th part=\"th\" class=\"col-checkbox\" tabindex=\"0\">\n <input\n type=\"checkbox\"\n part=\"checkbox\"\n aria-label=${this.selectAllLabel}\n .indeterminate=${this._selectedRows.size > 0 &&\n this._selectedRows.size < this._resolvedRows.length}\n .checked=${this._selectedRows.size === this._resolvedRows.length &&\n this._resolvedRows.length > 0}\n @change=${(e: Event) =>\n this._handleSelectAll((e.target as HTMLInputElement).checked)}\n />\n </th>\n `\n : nothing}\n ${this._resolvedColumns.map(\n (col, i) => html`\n <th\n part=\"th\"\n data-col-index=${i}\n tabindex=${col.sortable ? (i === activeIndex ? '0' : '-1') : '-1'}\n style=${col.width ? `width: ${col.width}` : ''}\n aria-sort=${col.sortable\n ? this.sortKey === col.key\n ? this.sortDirection === 'asc'\n ? 'ascending'\n : 'descending'\n : 'none'\n : nothing}\n @focus=${col.sortable\n ? () => {\n this._focusedHeaderIndex = i;\n }\n : nothing}\n >\n ${col.sortable\n ? html`\n <button\n class=\"sort-btn\"\n @click=${() => this._handleSort(col.key)}\n aria-label=${this.sortKey === col.key\n ? `Sort by ${col.label}, currently sorted ${this.sortDirection === 'asc' ? 'ascending' : 'descending'}`\n : `Sort by ${col.label}`}\n >\n ${col.label} ${this._renderSortIcon(col.key)}\n </button>\n `\n : col.label}\n </th>\n `,\n )}\n </tr>\n `;\n }\n\n /** @internal */\n private _renderSkeletonRows() {\n return Array.from(\n { length: 3 },\n (_) => html`\n <tr part=\"tr\" aria-hidden=\"true\">\n ${this.selectable\n ? html`<td part=\"td\" class=\"col-checkbox\">\n <span class=\"skeleton-cell\" style=\"width:1rem;margin:auto\"></span>\n </td>`\n : nothing}\n ${this._resolvedColumns.map(\n () => html`\n <td part=\"td\">\n <span class=\"skeleton-cell\"></span>\n </td>\n `,\n )}\n </tr>\n `,\n );\n }\n\n /** @internal */\n private _renderEmptyRow() {\n const colSpan = this._resolvedColumns.length + (this.selectable ? 1 : 0);\n return html`\n <tr part=\"tr\">\n <td part=\"td\" colspan=${colSpan} class=\"empty-cell\">\n <slot name=\"empty\">${this.emptyLabel}</slot>\n </td>\n </tr>\n `;\n }\n\n /** @internal */\n private _renderDataRows() {\n let displayRows = this._resolvedRows;\n\n // Client-side pagination when pageSize > 0\n if (this.pageSize > 0) {\n const start = (this.page - 1) * this.pageSize;\n displayRows = this._resolvedRows.slice(start, start + this.pageSize);\n }\n\n return repeat(\n displayRows,\n (_row, pageIndex) => {\n const globalIndex =\n this.pageSize > 0 ? (this.page - 1) * this.pageSize + pageIndex : pageIndex;\n return globalIndex;\n },\n (row, pageIndex) => {\n // The global row index for selection and events\n const globalIndex =\n this.pageSize > 0 ? (this.page - 1) * this.pageSize + pageIndex : pageIndex;\n return html`\n <tr\n part=\"tr\"\n aria-selected=${this.selectable ? String(this._selectedRows.has(globalIndex)) : nothing}\n @click=${() => this._handleRowClick(row, globalIndex)}\n @keydown=${(e: KeyboardEvent) => {\n // WCAG 2.1.1: rows are keyboard-activatable via Enter and Space so that\n // the hx-row-click event fires equivalently for keyboard users.\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this._handleRowClick(row, globalIndex);\n }\n }}\n >\n ${this.selectable\n ? html`\n <td part=\"td\" class=\"col-checkbox\" tabindex=\"-1\" data-row-index=${globalIndex}>\n <input\n type=\"checkbox\"\n part=\"checkbox\"\n aria-label=${`Select row ${globalIndex + 1}`}\n .checked=${this._selectedRows.has(globalIndex)}\n @click=${(e: Event) => e.stopPropagation()}\n @change=${(e: Event) =>\n this._handleSelect(globalIndex, (e.target as HTMLInputElement).checked)}\n />\n </td>\n `\n : nothing}\n ${this._resolvedColumns.map(\n (col) => html`\n <td part=\"td\" tabindex=\"-1\" data-row-index=${globalIndex}>\n ${row[col.key] != null ? String(row[col.key]) : ''}\n </td>\n `,\n )}\n </tr>\n `;\n },\n );\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <slot name=\"toolbar\"></slot>\n <div class=\"table-wrapper\">\n <table\n part=\"table\"\n role=\"grid\"\n aria-label=${this.label.trim() || 'Table'}\n aria-busy=${this.loading ? 'true' : nothing}\n @keydown=${this._handleKeydown}\n >\n <thead part=\"thead\">\n ${this._renderHeaderRow()}\n </thead>\n <tbody part=\"tbody\">\n ${this.loading\n ? html`<slot name=\"loading\">${this._renderSkeletonRows()}</slot>`\n : this._resolvedRows.length === 0\n ? this._renderEmptyRow()\n : this._renderDataRows()}\n </tbody>\n </table>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-data-table': HelixDataTable;\n }\n}\n"],"names":["helixDataTableStyles","css","HelixDataTable","HelixElement","changed","rawColumns","rawRows","key","direction","row","index","checked","next","_","i","root","cells","focused","ancestor","colCount","idx","target","rowStart","rowEnd","_a","rowIdx","isActive","iconClass","html","acc","col","sortable","currentPos","nextPos","nextIndex","headers","activeIndex","e","nothing","colSpan","displayRows","start","repeat","_row","pageIndex","globalIndex","__decorateClass","property","value","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAuBC;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACqE7B,IAAMC,IAAN,cAA6B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"}
|