@helixui/library 3.6.0 → 3.8.0-next.145
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/README.md +41 -0
- package/aaa-verdicts.json +2036 -0
- package/custom-elements.json +3045 -1254
- package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
- package/dist/components/hx-accordion/hx-accordion-item.styles.d.ts.map +1 -1
- package/dist/components/hx-accordion/index.js +1 -1
- package/dist/components/hx-action-bar/hx-action-bar.d.ts +18 -0
- package/dist/components/hx-action-bar/hx-action-bar.d.ts.map +1 -1
- package/dist/components/hx-action-bar/hx-action-bar.styles.d.ts.map +1 -1
- package/dist/components/hx-action-bar/index.js +1 -1
- package/dist/components/hx-alert/hx-alert.d.ts +18 -8
- package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
- package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
- package/dist/components/hx-alert/index.js +1 -1
- package/dist/components/hx-avatar/hx-avatar.d.ts +4 -1
- package/dist/components/hx-avatar/hx-avatar.d.ts.map +1 -1
- package/dist/components/hx-avatar/hx-avatar.styles.d.ts.map +1 -1
- package/dist/components/hx-avatar/index.js +1 -1
- package/dist/components/hx-badge/hx-badge.d.ts.map +1 -1
- package/dist/components/hx-badge/hx-badge.styles.d.ts.map +1 -1
- package/dist/components/hx-badge/index.js +1 -1
- package/dist/components/hx-banner/hx-banner.d.ts +19 -8
- package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
- package/dist/components/hx-banner/hx-banner.styles.d.ts.map +1 -1
- package/dist/components/hx-banner/index.js +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb-item.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb-item.styles.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts +18 -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 +18 -0
- package/dist/components/hx-button/hx-button.d.ts.map +1 -1
- package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
- package/dist/components/hx-button/index.js +1 -1
- package/dist/components/hx-button-group/hx-button-group.d.ts +47 -0
- package/dist/components/hx-button-group/hx-button-group.d.ts.map +1 -1
- package/dist/components/hx-button-group/index.js +1 -1
- package/dist/components/hx-carousel/hx-carousel.d.ts.map +1 -1
- package/dist/components/hx-carousel/hx-carousel.styles.d.ts.map +1 -1
- package/dist/components/hx-carousel/index.js +1 -1
- package/dist/components/hx-checkbox/hx-checkbox.d.ts +18 -0
- package/dist/components/hx-checkbox/hx-checkbox.d.ts.map +1 -1
- package/dist/components/hx-checkbox/hx-checkbox.styles.d.ts.map +1 -1
- package/dist/components/hx-checkbox/index.js +1 -1
- package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts +36 -0
- package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts.map +1 -1
- package/dist/components/hx-checkbox-group/hx-checkbox-group.styles.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 +26 -9
- package/dist/components/hx-clinical-status/hx-clinical-status.d.ts.map +1 -1
- package/dist/components/hx-clinical-status/hx-clinical-status.styles.d.ts.map +1 -1
- package/dist/components/hx-clinical-status/index.js +1 -1
- package/dist/components/hx-color-picker/hx-color-picker.d.ts +18 -0
- package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
- package/dist/components/hx-color-picker/hx-color-picker.styles.d.ts.map +1 -1
- package/dist/components/hx-color-picker/index.js +1 -1
- package/dist/components/hx-combobox/hx-combobox.d.ts +18 -0
- package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
- package/dist/components/hx-combobox/hx-combobox.styles.d.ts.map +1 -1
- package/dist/components/hx-combobox/index.js +1 -1
- package/dist/components/hx-copy-button/hx-copy-button.d.ts +18 -0
- package/dist/components/hx-copy-button/hx-copy-button.d.ts.map +1 -1
- package/dist/components/hx-copy-button/hx-copy-button.styles.d.ts.map +1 -1
- package/dist/components/hx-copy-button/index.js +1 -1
- package/dist/components/hx-date-picker/hx-date-picker.d.ts +18 -0
- package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
- package/dist/components/hx-date-picker/hx-date-picker.styles.d.ts.map +1 -1
- package/dist/components/hx-date-picker/index.js +1 -1
- package/dist/components/hx-dialog/hx-dialog.d.ts +18 -0
- package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
- package/dist/components/hx-drawer/hx-drawer.d.ts +18 -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 +18 -0
- package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
- package/dist/components/hx-dropdown/hx-dropdown.styles.d.ts.map +1 -1
- package/dist/components/hx-dropdown/index.js +1 -1
- package/dist/components/hx-field/hx-field.d.ts +17 -0
- package/dist/components/hx-field/hx-field.d.ts.map +1 -1
- package/dist/components/hx-field-label/hx-field-label.d.ts +17 -0
- package/dist/components/hx-field-label/hx-field-label.d.ts.map +1 -1
- package/dist/components/hx-file-upload/hx-file-upload.d.ts +46 -0
- package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
- package/dist/components/hx-file-upload/hx-file-upload.styles.d.ts.map +1 -1
- package/dist/components/hx-file-upload/index.js +1 -1
- package/dist/components/hx-form/hx-form.d.ts +19 -0
- package/dist/components/hx-form/hx-form.d.ts.map +1 -1
- package/dist/components/hx-help-text/hx-help-text.d.ts +17 -0
- package/dist/components/hx-help-text/hx-help-text.d.ts.map +1 -1
- package/dist/components/hx-help-text/hx-help-text.styles.d.ts.map +1 -1
- package/dist/components/hx-help-text/index.js +1 -1
- package/dist/components/hx-icon/hx-icon.d.ts +108 -12
- package/dist/components/hx-icon/hx-icon.d.ts.map +1 -1
- package/dist/components/hx-icon/hx-icon.styles.d.ts.map +1 -1
- package/dist/components/hx-icon/index.js +1 -1
- package/dist/components/hx-icon-button/hx-icon-button.d.ts +18 -0
- package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
- package/dist/components/hx-icon-button/hx-icon-button.styles.d.ts.map +1 -1
- package/dist/components/hx-icon-button/index.js +1 -1
- package/dist/components/hx-link/hx-link.d.ts.map +1 -1
- package/dist/components/hx-link/hx-link.styles.d.ts.map +1 -1
- package/dist/components/hx-link/index.js +1 -1
- package/dist/components/hx-menu/hx-menu-item.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu-item.styles.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu.d.ts +18 -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-nav/hx-nav.d.ts +18 -0
- package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
- package/dist/components/hx-nav/hx-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-nav/index.js +1 -1
- package/dist/components/hx-number-input/hx-number-input.d.ts +18 -0
- package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
- package/dist/components/hx-number-input/hx-number-input.styles.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 +23 -1
- package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts.map +1 -1
- package/dist/components/hx-overflow-menu/hx-overflow-menu.styles.d.ts.map +1 -1
- package/dist/components/hx-overflow-menu/index.js +1 -1
- package/dist/components/hx-pagination/hx-pagination.styles.d.ts.map +1 -1
- package/dist/components/hx-pagination/index.js +1 -1
- package/dist/components/hx-phi-field/hx-phi-field.d.ts.map +1 -1
- package/dist/components/hx-phi-field/hx-phi-field.styles.d.ts.map +1 -1
- package/dist/components/hx-phi-field/index.js +1 -1
- package/dist/components/hx-popover/hx-popover.d.ts +18 -0
- package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
- package/dist/components/hx-popover/hx-popover.styles.d.ts.map +1 -1
- package/dist/components/hx-popover/index.js +1 -1
- package/dist/components/hx-popup/hx-popup.d.ts +18 -0
- package/dist/components/hx-popup/hx-popup.d.ts.map +1 -1
- package/dist/components/hx-popup/hx-popup.styles.d.ts.map +1 -1
- package/dist/components/hx-popup/index.js +1 -1
- package/dist/components/hx-radio-group/hx-radio-group.d.ts +18 -0
- package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
- package/dist/components/hx-radio-group/hx-radio-group.styles.d.ts.map +1 -1
- package/dist/components/hx-radio-group/hx-radio.styles.d.ts.map +1 -1
- package/dist/components/hx-radio-group/index.js +1 -1
- package/dist/components/hx-rating/hx-rating.d.ts +19 -0
- package/dist/components/hx-rating/hx-rating.d.ts.map +1 -1
- package/dist/components/hx-rating/hx-rating.styles.d.ts.map +1 -1
- package/dist/components/hx-rating/index.js +1 -1
- package/dist/components/hx-select/hx-select.d.ts +18 -0
- package/dist/components/hx-select/hx-select.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.d.ts.map +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 +18 -0
- package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/index.js +1 -1
- package/dist/components/hx-slider/hx-slider.d.ts +47 -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-split-button/hx-split-button.d.ts +18 -0
- package/dist/components/hx-split-button/hx-split-button.d.ts.map +1 -1
- package/dist/components/hx-split-button/hx-split-button.styles.d.ts.map +1 -1
- package/dist/components/hx-split-button/index.js +1 -1
- package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
- package/dist/components/hx-stat/hx-stat.styles.d.ts.map +1 -1
- package/dist/components/hx-stat/index.js +1 -1
- package/dist/components/hx-steps/hx-step.d.ts.map +1 -1
- package/dist/components/hx-steps/hx-step.styles.d.ts.map +1 -1
- package/dist/components/hx-steps/index.js +1 -1
- package/dist/components/hx-switch/hx-switch.d.ts +18 -0
- package/dist/components/hx-switch/hx-switch.d.ts.map +1 -1
- package/dist/components/hx-switch/hx-switch.styles.d.ts.map +1 -1
- package/dist/components/hx-switch/index.js +1 -1
- package/dist/components/hx-tabs/hx-tab.styles.d.ts.map +1 -1
- package/dist/components/hx-tabs/hx-tabs.d.ts +18 -0
- package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
- package/dist/components/hx-tabs/index.js +1 -1
- package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
- package/dist/components/hx-tag/hx-tag.styles.d.ts.map +1 -1
- package/dist/components/hx-tag/index.js +1 -1
- package/dist/components/hx-text-input/hx-text-input.d.ts +18 -0
- package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
- package/dist/components/hx-text-input/hx-text-input.styles.d.ts.map +1 -1
- package/dist/components/hx-text-input/index.js +1 -1
- package/dist/components/hx-textarea/hx-textarea.d.ts +18 -0
- package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
- package/dist/components/hx-time-picker/hx-time-picker.d.ts +18 -0
- package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
- package/dist/components/hx-time-picker/hx-time-picker.styles.d.ts.map +1 -1
- package/dist/components/hx-time-picker/index.js +1 -1
- package/dist/components/hx-toast/hx-toast.d.ts +19 -8
- package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
- package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
- package/dist/components/hx-toast/index.js +1 -1
- package/dist/components/hx-toggle-button/hx-toggle-button.d.ts +18 -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 +18 -0
- package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
- package/dist/components/hx-tooltip/hx-tooltip.styles.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 +18 -0
- package/dist/components/hx-top-nav/hx-top-nav.d.ts.map +1 -1
- package/dist/components/hx-top-nav/hx-top-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-top-nav/index.js +1 -1
- package/dist/components/hx-tree-view/hx-tree-item.d.ts.map +1 -1
- package/dist/components/hx-tree-view/hx-tree-item.styles.d.ts.map +1 -1
- package/dist/components/hx-tree-view/index.js +1 -1
- package/dist/css/helix-all.css +414 -118
- package/dist/css/helix-core.css +43 -19
- package/dist/css/helix-feedback.css +15 -18
- package/dist/css/helix-forms.css +172 -44
- package/dist/css/helix-media.css +6 -3
- package/dist/css/helix-navigation.css +65 -12
- package/dist/css/helix-overlay.css +63 -0
- package/dist/css/helix-tokens.css +18 -15
- package/dist/css/helix-utility.css +44 -12
- package/dist/css/hx-action-bar.css +12 -0
- package/dist/css/hx-alert.css +4 -8
- package/dist/css/hx-avatar.css +1 -2
- package/dist/css/hx-badge.css +10 -5
- package/dist/css/hx-banner.css +4 -8
- package/dist/css/hx-button.css +15 -5
- package/dist/css/hx-carousel.css +6 -3
- package/dist/css/hx-checkbox-group.css +11 -0
- package/dist/css/hx-checkbox.css +24 -13
- package/dist/css/hx-clinical-status.css +4 -7
- package/dist/css/hx-color-picker.css +14 -1
- package/dist/css/hx-combobox.css +8 -0
- package/dist/css/hx-copy-button.css +5 -2
- package/dist/css/hx-date-picker.css +16 -3
- package/dist/css/hx-drawer.css +5 -0
- package/dist/css/hx-dropdown.css +18 -0
- package/dist/css/hx-file-upload.css +4 -0
- package/dist/css/hx-help-text.css +5 -0
- package/dist/css/hx-icon-button.css +4 -5
- package/dist/css/hx-icon.css +7 -0
- package/dist/css/hx-link.css +1 -2
- package/dist/css/hx-nav.css +31 -2
- package/dist/css/hx-number-input.css +10 -11
- package/dist/css/hx-overflow-menu.css +5 -0
- package/dist/css/hx-pagination.css +6 -3
- package/dist/css/hx-phi-field.css +2 -3
- package/dist/css/hx-popover.css +13 -0
- package/dist/css/hx-popup.css +14 -0
- package/dist/css/hx-radio-group.css +10 -0
- package/dist/css/hx-rating.css +6 -0
- package/dist/css/hx-side-nav.css +10 -5
- package/dist/css/hx-split-button.css +27 -10
- package/dist/css/hx-stat.css +1 -2
- package/dist/css/hx-switch.css +19 -1
- package/dist/css/hx-tag.css +5 -0
- package/dist/css/hx-text-input.css +4 -1
- package/dist/css/hx-time-picker.css +12 -2
- package/dist/css/hx-toast.css +6 -0
- package/dist/css/hx-toggle-button.css +29 -12
- package/dist/css/hx-tooltip.css +13 -0
- package/dist/css/hx-top-nav.css +13 -2
- package/dist/css/index.css +1 -1
- package/dist/css/manifest.json +60 -20
- package/dist/index.js +49 -49
- package/dist/shared/{hx-accordion-ZVzgDzTG.js → hx-accordion-DR--Ev4t.js} +48 -54
- package/dist/shared/hx-accordion-DR--Ev4t.js.map +1 -0
- package/dist/shared/{hx-action-bar-CitgcpGv.js → hx-action-bar-BlEG4aZv.js} +41 -29
- package/dist/shared/hx-action-bar-BlEG4aZv.js.map +1 -0
- package/dist/shared/{hx-alert-Bto8-TIi.js → hx-alert-C0axS32J.js} +40 -79
- package/dist/shared/hx-alert-C0axS32J.js.map +1 -0
- package/dist/shared/{hx-avatar-C9hOmlAb.js → hx-avatar-ChAYWnK8.js} +22 -24
- package/dist/shared/hx-avatar-ChAYWnK8.js.map +1 -0
- package/dist/shared/{hx-badge-JlFtAdxS.js → hx-badge-vX-1cuLA.js} +25 -20
- package/dist/shared/hx-badge-vX-1cuLA.js.map +1 -0
- package/dist/shared/{hx-banner-fpRnciIO.js → hx-banner-PbHwFNSb.js} +51 -90
- package/dist/shared/hx-banner-PbHwFNSb.js.map +1 -0
- package/dist/shared/{hx-breadcrumb-item-3tKppF9h.js → hx-breadcrumb-item-D8xYqe3s.js} +56 -43
- package/dist/shared/hx-breadcrumb-item-D8xYqe3s.js.map +1 -0
- package/dist/shared/{hx-button-BOwAEcF1.js → hx-button-DOZTZnz-.js} +29 -19
- package/dist/shared/hx-button-DOZTZnz-.js.map +1 -0
- package/dist/shared/hx-button-group-D3QUmSzl.js +248 -0
- package/dist/shared/hx-button-group-D3QUmSzl.js.map +1 -0
- package/dist/shared/{hx-carousel-item-z1Lc24op.js → hx-carousel-item-BVIKgQ4i.js} +72 -102
- package/dist/shared/hx-carousel-item-BVIKgQ4i.js.map +1 -0
- package/dist/shared/{hx-checkbox-CYd0YV_u.js → hx-checkbox-DDSXXhps.js} +56 -47
- package/dist/shared/hx-checkbox-DDSXXhps.js.map +1 -0
- package/dist/shared/{hx-checkbox-group-D5piJLY8.js → hx-checkbox-group-C0q6HDqn.js} +101 -58
- package/dist/shared/hx-checkbox-group-C0q6HDqn.js.map +1 -0
- package/dist/shared/{hx-clinical-status-D3XQIOqX.js → hx-clinical-status-ZSVEc3Qg.js} +68 -87
- package/dist/shared/hx-clinical-status-ZSVEc3Qg.js.map +1 -0
- package/dist/shared/{hx-color-picker-DBwJzT5f.js → hx-color-picker-CYjx8i8R.js} +97 -84
- package/dist/shared/hx-color-picker-CYjx8i8R.js.map +1 -0
- package/dist/shared/{hx-combobox-NgJaLbs2.js → hx-combobox-Be-mqOv4.js} +35 -45
- package/dist/shared/hx-combobox-Be-mqOv4.js.map +1 -0
- package/dist/shared/{hx-copy-button-sUVuikyH.js → hx-copy-button-DJirFCUL.js} +18 -15
- package/dist/shared/hx-copy-button-DJirFCUL.js.map +1 -0
- package/dist/shared/{hx-date-picker-B49yo4Vm.js → hx-date-picker-CziP3Hm1.js} +85 -84
- package/dist/shared/hx-date-picker-CziP3Hm1.js.map +1 -0
- package/dist/shared/hx-dialog-B4weoj_1.js.map +1 -1
- package/dist/shared/{hx-drawer-CM_upadk.js → hx-drawer-BlU2oX8-.js} +32 -36
- package/dist/shared/hx-drawer-BlU2oX8-.js.map +1 -0
- package/dist/shared/{hx-dropdown-D626S2ZG.js → hx-dropdown-DREqpIpm.js} +51 -33
- package/dist/shared/hx-dropdown-DREqpIpm.js.map +1 -0
- package/dist/shared/hx-field-label-BVRyyKeh.js.map +1 -1
- package/dist/shared/hx-field-zw0U1KVi.js.map +1 -1
- package/dist/shared/{hx-file-upload-D3rKROK5.js → hx-file-upload-CU5QGZSP.js} +137 -80
- package/dist/shared/hx-file-upload-CU5QGZSP.js.map +1 -0
- package/dist/shared/hx-form-CkChEATa.js.map +1 -1
- package/dist/shared/hx-help-text-CNaZ82LT.js +137 -0
- package/dist/shared/hx-help-text-CNaZ82LT.js.map +1 -0
- package/dist/shared/{hx-icon-button-a6OpeQz5.js → hx-icon-button-B2BdVdyK.js} +10 -11
- package/dist/shared/hx-icon-button-B2BdVdyK.js.map +1 -0
- package/dist/shared/hx-icon-bxz9eB9a.js +386 -0
- package/dist/shared/hx-icon-bxz9eB9a.js.map +1 -0
- package/dist/shared/{hx-link-CMnZRUtQ.js → hx-link-BURSdYLp.js} +19 -26
- package/dist/shared/hx-link-BURSdYLp.js.map +1 -0
- package/dist/shared/{hx-menu-divider-A6Guuzi_.js → hx-menu-divider-g0grbWV9.js} +19 -31
- package/dist/shared/hx-menu-divider-g0grbWV9.js.map +1 -0
- package/dist/shared/{hx-nav-ldFM3Fle.js → hx-nav-GTsAZGOx.js} +94 -85
- package/dist/shared/hx-nav-GTsAZGOx.js.map +1 -0
- package/dist/shared/{hx-nav-item-CODtUlew.js → hx-nav-item-CxE7Mp3M.js} +46 -41
- package/dist/shared/hx-nav-item-CxE7Mp3M.js.map +1 -0
- package/dist/shared/{hx-number-input-yUzFOSC1.js → hx-number-input-Bvyc9kOi.js} +59 -64
- package/dist/shared/hx-number-input-Bvyc9kOi.js.map +1 -0
- package/dist/shared/{hx-overflow-menu-DFjJAziP.js → hx-overflow-menu-LrTteeR1.js} +32 -39
- package/dist/shared/{hx-overflow-menu-DFjJAziP.js.map → hx-overflow-menu-LrTteeR1.js.map} +1 -1
- package/dist/shared/{hx-pagination-C7y8GVyU.js → hx-pagination-D726PyTM.js} +7 -4
- package/dist/shared/hx-pagination-D726PyTM.js.map +1 -0
- package/dist/shared/{hx-phi-field-C19oxlrr.js → hx-phi-field-sZt_rYIL.js} +46 -66
- package/dist/shared/hx-phi-field-sZt_rYIL.js.map +1 -0
- package/dist/shared/{hx-popover-BAlAFOH9.js → hx-popover-BjB0nkcq.js} +51 -38
- package/dist/shared/hx-popover-BjB0nkcq.js.map +1 -0
- package/dist/shared/{hx-popup-COUXXZ9X.js → hx-popup-BiV_2evC.js} +59 -45
- package/dist/shared/hx-popup-BiV_2evC.js.map +1 -0
- package/dist/shared/{hx-radio-C7eTj5YI.js → hx-radio-BD_c9NJy.js} +52 -39
- package/dist/shared/hx-radio-BD_c9NJy.js.map +1 -0
- package/dist/shared/{hx-rating-C3QP53k9.js → hx-rating-BGK4AxvI.js} +45 -71
- package/dist/shared/hx-rating-BGK4AxvI.js.map +1 -0
- package/dist/shared/hx-select-DahFehiZ.js.map +1 -1
- package/dist/shared/{hx-slider-Blmv_rwS.js → hx-slider-CkOk5BCY.js} +83 -23
- package/dist/shared/hx-slider-CkOk5BCY.js.map +1 -0
- package/dist/shared/{hx-split-button-Ddle8iVx.js → hx-split-button-Bg9FHrFK.js} +73 -65
- package/dist/shared/hx-split-button-Bg9FHrFK.js.map +1 -0
- package/dist/shared/{hx-stat-Gtw_SpK8.js → hx-stat-wKxbyep6.js} +22 -55
- package/dist/shared/hx-stat-wKxbyep6.js.map +1 -0
- package/dist/shared/{hx-step-R2rjp1fT.js → hx-step-CyGQAuiB.js} +7 -27
- package/dist/shared/hx-step-CyGQAuiB.js.map +1 -0
- package/dist/shared/{hx-switch-TvKGvZJz.js → hx-switch-BCXuNxEH.js} +42 -24
- package/dist/shared/hx-switch-BCXuNxEH.js.map +1 -0
- package/dist/shared/{hx-tab-panel-DzsX8BHV.js → hx-tab-panel-BfisavKo.js} +47 -32
- package/dist/shared/hx-tab-panel-BfisavKo.js.map +1 -0
- package/dist/shared/{hx-tag-C5aCUpVi.js → hx-tag-BqO6HY6V.js} +26 -21
- package/dist/shared/hx-tag-BqO6HY6V.js.map +1 -0
- package/dist/shared/{hx-text-input-D6FlOZM-.js → hx-text-input-V5sQOpDh.js} +5 -2
- package/dist/shared/hx-text-input-V5sQOpDh.js.map +1 -0
- package/dist/shared/hx-textarea-CNG590KY.js.map +1 -1
- package/dist/shared/{hx-time-picker-Bo7FWzmf.js → hx-time-picker-if5Cl0Ei.js} +42 -43
- package/dist/shared/hx-time-picker-if5Cl0Ei.js.map +1 -0
- package/dist/shared/{hx-toggle-button-DwBers3A.js → hx-toggle-button-xNVYeA3X.js} +64 -47
- package/dist/shared/hx-toggle-button-xNVYeA3X.js.map +1 -0
- package/dist/shared/{hx-tooltip-DVqtKPCD.js → hx-tooltip-CamO-9nd.js} +24 -11
- package/dist/shared/hx-tooltip-CamO-9nd.js.map +1 -0
- package/dist/shared/{hx-top-nav-DP6OFS8C.js → hx-top-nav-vP6oDWMV.js} +42 -44
- package/dist/shared/hx-top-nav-vP6oDWMV.js.map +1 -0
- package/dist/shared/{hx-tree-item-CXyspGxI.js → hx-tree-item-D8hwKd5m.js} +54 -57
- package/dist/shared/hx-tree-item-D8hwKd5m.js.map +1 -0
- package/dist/shared/{toast-factory-Dht3pVsw.js → toast-factory-DgnbFxVs.js} +127 -153
- package/dist/shared/toast-factory-DgnbFxVs.js.map +1 -0
- package/figma-inventory.json +1280 -429
- package/package.json +8 -4
- package/dist/shared/hx-accordion-ZVzgDzTG.js.map +0 -1
- package/dist/shared/hx-action-bar-CitgcpGv.js.map +0 -1
- package/dist/shared/hx-alert-Bto8-TIi.js.map +0 -1
- package/dist/shared/hx-avatar-C9hOmlAb.js.map +0 -1
- package/dist/shared/hx-badge-JlFtAdxS.js.map +0 -1
- package/dist/shared/hx-banner-fpRnciIO.js.map +0 -1
- package/dist/shared/hx-breadcrumb-item-3tKppF9h.js.map +0 -1
- package/dist/shared/hx-button-BOwAEcF1.js.map +0 -1
- package/dist/shared/hx-button-group-4NUBpkyC.js +0 -181
- package/dist/shared/hx-button-group-4NUBpkyC.js.map +0 -1
- package/dist/shared/hx-carousel-item-z1Lc24op.js.map +0 -1
- package/dist/shared/hx-checkbox-CYd0YV_u.js.map +0 -1
- package/dist/shared/hx-checkbox-group-D5piJLY8.js.map +0 -1
- package/dist/shared/hx-clinical-status-D3XQIOqX.js.map +0 -1
- package/dist/shared/hx-color-picker-DBwJzT5f.js.map +0 -1
- package/dist/shared/hx-combobox-NgJaLbs2.js.map +0 -1
- package/dist/shared/hx-copy-button-sUVuikyH.js.map +0 -1
- package/dist/shared/hx-date-picker-B49yo4Vm.js.map +0 -1
- package/dist/shared/hx-drawer-CM_upadk.js.map +0 -1
- package/dist/shared/hx-dropdown-D626S2ZG.js.map +0 -1
- package/dist/shared/hx-file-upload-D3rKROK5.js.map +0 -1
- package/dist/shared/hx-help-text-Xb2Yr8x2.js +0 -156
- package/dist/shared/hx-help-text-Xb2Yr8x2.js.map +0 -1
- package/dist/shared/hx-icon-button-a6OpeQz5.js.map +0 -1
- package/dist/shared/hx-icon-fuVm4-bk.js +0 -283
- package/dist/shared/hx-icon-fuVm4-bk.js.map +0 -1
- package/dist/shared/hx-link-CMnZRUtQ.js.map +0 -1
- package/dist/shared/hx-menu-divider-A6Guuzi_.js.map +0 -1
- package/dist/shared/hx-nav-item-CODtUlew.js.map +0 -1
- package/dist/shared/hx-nav-ldFM3Fle.js.map +0 -1
- package/dist/shared/hx-number-input-yUzFOSC1.js.map +0 -1
- package/dist/shared/hx-pagination-C7y8GVyU.js.map +0 -1
- package/dist/shared/hx-phi-field-C19oxlrr.js.map +0 -1
- package/dist/shared/hx-popover-BAlAFOH9.js.map +0 -1
- package/dist/shared/hx-popup-COUXXZ9X.js.map +0 -1
- package/dist/shared/hx-radio-C7eTj5YI.js.map +0 -1
- package/dist/shared/hx-rating-C3QP53k9.js.map +0 -1
- package/dist/shared/hx-slider-Blmv_rwS.js.map +0 -1
- package/dist/shared/hx-split-button-Ddle8iVx.js.map +0 -1
- package/dist/shared/hx-stat-Gtw_SpK8.js.map +0 -1
- package/dist/shared/hx-step-R2rjp1fT.js.map +0 -1
- package/dist/shared/hx-switch-TvKGvZJz.js.map +0 -1
- package/dist/shared/hx-tab-panel-DzsX8BHV.js.map +0 -1
- package/dist/shared/hx-tag-C5aCUpVi.js.map +0 -1
- package/dist/shared/hx-text-input-D6FlOZM-.js.map +0 -1
- package/dist/shared/hx-time-picker-Bo7FWzmf.js.map +0 -1
- package/dist/shared/hx-toggle-button-DwBers3A.js.map +0 -1
- package/dist/shared/hx-tooltip-DVqtKPCD.js.map +0 -1
- package/dist/shared/hx-top-nav-DP6OFS8C.js.map +0 -1
- package/dist/shared/hx-tree-item-CXyspGxI.js.map +0 -1
- package/dist/shared/toast-factory-Dht3pVsw.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-button-BOwAEcF1.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, #429797));\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, #0f7078));\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-action-primary-bg, #429797);\n /* Inline #0d1825 matches text.on-primary's resolved primitive (neutral-900);\n cold-start without the semantic still paints AA-tuned dark-on-primary\n rather than white-on-primary (3.43:1 fail). */\n --hx-button-color: var(--hx-color-text-on-primary, #0d1825);\n --hx-button-border-color: transparent;\n }\n\n .button--secondary {\n --hx-button-bg: transparent;\n /* primary-500 (#429797) text on white surface = 3.44:1 — fails AA.\n primary-600 (#0F7078) on white = 5.82:1 — AA pass. */\n --hx-button-color: var(--hx-color-action-secondary-fg, #0f7078);\n --hx-button-border-color: var(--hx-color-action-secondary-border, #0f7078);\n }\n\n .button--secondary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-secondary-bg-hover, #ebf8f8));\n }\n\n .button--tertiary {\n --hx-button-bg: var(--hx-color-surface-sunken, #ebeee9);\n --hx-button-color: var(--hx-color-text-primary, #0d1825);\n --hx-button-border-color: transparent;\n }\n\n .button--tertiary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));\n }\n\n .button--danger {\n --hx-button-bg: var(--hx-color-action-danger-bg, #e5493e);\n /* Inline #0d1825 matches text.on-error's resolved primitive (neutral-900);\n cold-start without the semantic still paints AA-tuned dark-on-error\n rather than white-on-error (3.92:1 fail). */\n --hx-button-color: var(--hx-color-text-on-error, #0d1825);\n --hx-button-border-color: transparent;\n }\n\n /* on-error tokens are tuned for error-500 (neutral-900 on #E5493E ≈ 4.59:1).\n error-600 (#C92A2A) drops that to 3.28:1 — AA fail. text.on-error-strong\n resolves to neutral-0 across modes (no dark flip) so the darker hover fill\n stays legible. Mirrors hx-toast precedent (commit 300e21ab0); routed\n through the semantic tier in 3.2.1 token-cascade remediation. */\n .button--danger:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-hover, #c92a2a));\n --hx-button-color: var(--hx-color-text-on-error-strong, #ffffff);\n }\n\n /* Pressed state binds explicitly to action.danger.bg-active (error-700,\n #A21312) + text.on-error-strong (neutral-0) = 7.96:1 AA. Base\n .button:active filter:brightness(0.8) would compound on top of bg-hover\n (#C92A2A) and produce ~3.3:1 sub-AA on the bound colors. Override the\n filter to none. HC override on action.danger.bg-active flips to HC\n error-500 so the on-error-strong (HC = #000) pair is AA in HC too. */\n .button--danger:active {\n --hx-button-bg: var(--hx-button-active-bg, var(--hx-color-action-danger-bg-active, #a21312));\n --hx-button-color: var(--hx-color-text-on-error-strong, #ffffff);\n filter: none;\n }\n\n .button--ghost {\n --hx-button-bg: transparent;\n /* primary-500 (#429797) text on white surface = 3.44:1 — fails AA.\n primary-600 (#0F7078) on white = 5.82:1 — AA pass. */\n --hx-button-color: var(--hx-color-action-ghost-fg, #0f7078);\n --hx-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-ghost-bg-hover, #ebf8f8));\n }\n\n .button--outline {\n --hx-button-bg: transparent;\n --hx-button-color: var(--hx-color-text-primary, #0d1825);\n --hx-button-border-color: var(--hx-color-border-strong, #66787b);\n }\n\n .button--outline:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));\n }\n\n /* on-primary token resolves to neutral-900 (#0D1825) — tuned for primary-500.\n primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail. text.on-primary-strong\n resolves to neutral-0 across modes (no dark flip) for the darker hover fill.\n Mirrors hx-toast precedent (commit 300e21ab0); routed through the semantic\n tier in 3.2.1 token-cascade remediation. */\n .button--primary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-hover, #0f7078));\n --hx-button-color: var(--hx-color-text-on-primary-strong, #ffffff);\n }\n\n /* Pressed state binds explicitly to action.primary.bg-active (primary-700,\n #0F6363) + text.on-primary-strong (neutral-0) = 7.03:1 AA. The base\n .button:active filter:brightness(0.8) would compound on top of bg-hover\n (#0F7078) and produce ~3.7:1 sub-AA on the bound colors. Override the\n filter to none so the action.*.bg-active token is what actually paints. */\n .button--primary:active {\n --hx-button-bg: var(--hx-button-active-bg, var(--hx-color-action-primary-bg-active, #0f6363));\n --hx-button-color: var(--hx-color-text-on-primary-strong, #ffffff);\n filter: none;\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 /* Inline-fallback contract for the on-dark-* tokens in this section:\n the literal rgba(255, 255, 255, 0.X) arms are a LIGHT-MODE-only last\n resort (cold-start, CSS-not-loaded). At runtime, hx-theme injects\n the dark.* override (overlay-black-* for the strong border and the\n surface.on-dark-overlay-* fills) so dark-mode inverted buttons stay\n visible on the now-light surface.inverse (#EBEEE9). The inline white\n overlays would render invisible (≈1.1:1) on a light surface, but\n they never paint when the theme is mounted. If a future change\n moves these into a context where hx-theme is not guaranteed,\n replace with mode-aware tokens. */\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-text-inverse, #ffffff));\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 /* WCAG 1.4.11: focus indicator needs ≥3:1 against adjacent colors.\n border-on-dark-strong (overlay-white-70) ≈ 5:1 on neutral-900 — passes.\n The lower-alpha siblings used to live in border.* but were sub-3:1\n against any plausible surface and could not honour a border contract;\n they're now surface.on-dark-overlay-{default,subtle} (translucent\n fills, not borders) and used elsewhere in this file. See\n tokens.json color.surface.on-dark-overlay-* for canonical ratios. */\n outline-color: var(\n --hx-button-inverted-focus-ring-color,\n var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))\n );\n }\n\n /* Primary inverted — resting bg routes through action.primary.bg-inverted-rest\n so dark mode can flip the fill to primary-600. surface.inverse becomes light\n (#EBEEE9) in dark mode; primary-500 on #EBEEE9 = 2.94:1 (sub-3:1 UI floor\n fail for the inverted-button boundary). primary-600 on #EBEEE9 = 4.97:1\n (AA pass). Light mode tracks action.primary.bg-inverted-rest's base value\n (primary-500, 5.20:1 on dark surface.inverse).\n\n Override path note (codex round-11): this binds --hx-button-bg directly,\n matching the cascade convention every other .button--{variant} rule uses\n (light primary at line 89, danger at 120, secondary, tertiary, ghost). The\n consumer override path for inverted-primary rest is\n --hx-color-action-primary-bg-inverted-rest, NOT --hx-button-bg — the same\n pattern as light primary (consumers override --hx-color-action-primary-bg).\n Pinned by dark-mode-resolution.test.ts:185-197 across both modes. */\n :host([inverted]) .button--primary {\n --hx-button-bg: var(--hx-color-action-primary-bg-inverted-rest, #429797);\n }\n\n /* Primary inverted — hover/pressed lift to action.primary.bg-inverted-hover\n (primary-400, light teal). The base :host([inverted]) .button rule binds\n color to text.inverse, which flips by mode (neutral-0 in light, neutral-900\n in dark). On a permanent light-teal fill, white text drops to 2.4:1 in\n light mode (AA fail). Pin color to text.on-primary (neutral-900, no\n dark-mode flip) for both hover and active so the foreground is dark in\n both modes — neutral-900 on primary-400 = 7.27:1 (AA pass).\n Pressed === hover visually in inverted mode is acceptable UX (the\n transient absence of pointer over the button signals release).\n The fallback chain wraps --hx-button-active-bg (highest precedence) and\n --hx-button-hover-bg so consumer overrides on either prop apply under\n :host([inverted]) — the two share a paint here, so either knob is\n honored, with active-bg winning when both are set. */\n :host([inverted]) .button--primary:hover,\n :host([inverted]) .button--primary:active {\n --hx-button-bg: var(\n --hx-button-active-bg,\n var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1))\n );\n color: var(\n --hx-button-inverted-primary-interactive-color,\n var(--hx-color-text-on-primary, #0d1825)\n );\n }\n\n /* Danger inverted — sister to primary. Hover/pressed lift to\n action.danger.bg-inverted-hover (error-400, #FC7264). Same foreground\n contract: text.inverse fails in light mode (white on light red ≈ 2.6:1);\n pin to text.on-error (neutral-900, no dark-mode flip) for 6.58:1 in both\n modes. Same active-bg → hover-bg → semantic fallback chain as primary. */\n :host([inverted]) .button--danger:hover,\n :host([inverted]) .button--danger:active {\n --hx-button-bg: var(\n --hx-button-active-bg,\n var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-inverted-hover, #fc7264))\n );\n color: var(\n --hx-button-inverted-danger-interactive-color,\n var(--hx-color-text-on-error, #0d1825)\n );\n }\n\n /* Secondary inverted — white border and translucent hover fill */\n :host([inverted]) .button--secondary {\n --hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));\n }\n\n /* Inverted overlay fills read both names so consumer overrides reach paint\n regardless of which token they target: the deprecated --hx-color-border-on-dark-*\n names (3.2.0/3.2.1 public API, scheduled for removal in 4.0.0) and the canonical\n --hx-color-surface-on-dark-overlay-* names (round-8 rename). Deprecated name\n wins when set; otherwise resolves through the canonical alias chain. */\n :host([inverted]) .button--secondary:hover {\n --hx-button-bg: var(\n --hx-color-border-on-dark-default,\n var(--hx-color-surface-on-dark-overlay-default, rgba(255, 255, 255, 0.3))\n );\n }\n\n /* Tertiary inverted — resting at the subtle overlay (10%) lifts to the default\n overlay (30%) on hover so the runtime hover delta is visually distinct, not\n collapsed onto a single token. */\n :host([inverted]) .button--tertiary {\n --hx-button-bg: var(\n --hx-color-border-on-dark-subtle,\n var(--hx-color-surface-on-dark-overlay-subtle, rgba(255, 255, 255, 0.1))\n );\n --hx-button-border-color: transparent;\n }\n\n :host([inverted]) .button--tertiary:hover {\n --hx-button-bg: var(\n --hx-color-border-on-dark-default,\n var(--hx-color-surface-on-dark-overlay-default, rgba(255, 255, 255, 0.3))\n );\n }\n\n /* Ghost inverted — transparent base, translucent 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(\n --hx-color-border-on-dark-default,\n var(--hx-color-surface-on-dark-overlay-default, rgba(255, 255, 255, 0.3))\n )\n );\n }\n\n /* Outline inverted — white border */\n :host([inverted]) .button--outline {\n --hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));\n }\n\n :host([inverted]) .button--outline:hover {\n --hx-button-bg: var(\n --hx-color-border-on-dark-default,\n var(--hx-color-surface-on-dark-overlay-default, rgba(255, 255, 255, 0.3))\n );\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:hover {\n /* Hover affordance must survive in HC. Highlight/HighlightText is the\n OS-level \"selected\" pair, mirroring the forcedColorsInteractive mixin's\n hover contract — kept inline since this component owns its bespoke HC\n block (XOR rule). */\n background-color: Highlight;\n color: HighlightText;\n border-color: Highlight;\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-action-primary-bg)] - Button background color. **Variant-shadowed**: every `.button--{variant}` rule rebinds this property at descendant scope, so a host-level override (`style=\"--hx-button-bg: …\"` or `:host`-targeting CSS) does not reach paint for primary/secondary/tertiary/danger/ghost/outline buttons. To recolor a variant fill, override the upstream semantic instead — e.g. `--hx-color-action-primary-bg` (light primary), `--hx-color-action-primary-bg-inverted-rest` (inverted primary), `--hx-color-action-danger-bg` (danger), or the inverted overlay tokens for tertiary/secondary/ghost/outline. The `--hx-button-bg` hook still works for the rare case of an unstyled base button without a `variant` class, and is internally rebound by the variant rules to participate in the active/hover override chain.\n * @cssprop [--hx-button-hover-bg] - Hover background override (primary and danger variants only). Other variants (secondary/outline, ghost) keep their hover fills routed through their semantic action.* tokens and do not consume this hook. Under [inverted] for primary/danger, hover and active share a paint (combined :hover, :active rule), so this override applies to both states unless --hx-button-active-bg also takes precedence.\n * @cssprop [--hx-button-active-bg] - Pressed/active background override (primary and danger variants only, including their inverted modes). Takes precedence over --hx-button-hover-bg in the fallback chain. Standard-mode primary/danger default to action.{primary,danger}.bg-active (with filter:none) for AA-pinned pressed contrast. Inverted-mode primary/danger reuse action.{primary,danger}.bg-inverted-hover (combined :hover, :active rule); setting --hx-button-active-bg under [inverted] therefore overrides the lifted hover fill as well as the pressed fill — the two share a paint in inverted mode. Other variants do not consume this hook.\n * @cssprop [--hx-button-color=var(--hx-color-text-on-primary)] - Button text color (variants route through text.on-{role} / text.on-{role}-strong).\n * @cssprop [--hx-button-border-color=transparent] - Button border color (secondary/outline variants route through action.secondary.border).\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=var(--hx-color-text-inverse)] - Text color when inverted (resolves to neutral-0).\n * @cssprop [--hx-button-inverted-primary-interactive-color=var(--hx-color-text-on-primary)] - Foreground override for inverted primary hover and pressed (combined :hover, :active rule). Defaults to text.on-primary (neutral-900, no dark-mode flip) so dark text rides the lifted primary-400 fill — text.inverse on light teal collapses to ~2.4:1 in light mode.\n * @cssprop [--hx-button-inverted-danger-interactive-color=var(--hx-color-text-on-error)] - Foreground override for inverted danger hover and pressed (combined :hover, :active rule). Defaults to text.on-error (neutral-900); same rationale as the primary override.\n * @cssprop [--hx-button-inverted-ghost-hover-bg=var(--hx-color-surface-on-dark-overlay-default)] - Ghost hover bg when inverted (overlay-white-30 — translucent fill, not a border; contrast not applicable).\n * @cssprop [--hx-button-inverted-focus-ring-color=var(--hx-color-border-on-dark-strong)] - Focus ring color when inverted (overlay-white-70 ≈ 5:1 vs neutral-900 — clears WCAG 1.4.11 3:1 floor for non-text UI).\n *\n * @cssprop [--hx-color-action-primary-bg] - Primary variant resting fill (3.2.1 semantic action layer).\n * @cssprop [--hx-color-action-primary-bg-hover] - Primary variant hover fill.\n * @cssprop [--hx-color-action-primary-bg-active] - Primary variant active/pressed fill.\n * @cssprop [--hx-color-action-secondary-fg] - Secondary/outline variant fg (resolves to primary-600 light, primary-400 dark). Consumed only by .button--secondary; the actual border/surface paint for outline currently routes through --hx-color-border-strong / --hx-color-surface-raised in styles, with this token reserved for the foreground.\n * @cssprop [--hx-color-action-secondary-border] - Secondary/outline variant border (3.2.1 semantic; outline still routes through --hx-color-border-strong by default).\n * @cssprop [--hx-color-action-secondary-bg-hover] - Secondary/outline variant hover fill (3.2.1 semantic; outline still routes through --hx-color-surface-raised by default).\n * @cssprop [--hx-color-action-ghost-fg] - Ghost variant fg.\n * @cssprop [--hx-color-action-ghost-bg-hover] - Ghost variant hover fill.\n * @cssprop [--hx-color-action-danger-bg] - Danger variant resting fill.\n * @cssprop [--hx-color-action-danger-bg-hover] - Danger variant hover fill.\n * @cssprop [--hx-color-action-danger-bg-active] - Danger variant active fill.\n * @cssprop [--hx-color-action-primary-bg-inverted-hover] - Primary variant hover/pressed fill on dark/inverted surface (resolves to primary-400, 7.27:1 on neutral-900).\n * @cssprop [--hx-color-action-danger-bg-inverted-hover] - Danger variant hover/pressed fill on dark/inverted surface (resolves to error-400, 6.58:1 on neutral-900).\n * @cssprop [--hx-color-text-on-primary] - Foreground for primary fill (resolves to neutral-900 — AA-tuned for primary-500).\n * @cssprop [--hx-color-text-on-primary-strong] - Foreground for primary-hover fill (resolves to neutral-0 across modes).\n * @cssprop [--hx-color-text-on-error] - Foreground for danger fill (resolves to neutral-900).\n * @cssprop [--hx-color-text-on-error-strong] - Foreground for danger-hover fill (resolves to neutral-0 across modes).\n * @cssprop [--hx-color-text-primary] - Foreground for tertiary variant on surface.sunken.\n * @cssprop [--hx-color-surface-sunken] - Tertiary variant resting fill.\n * @cssprop [--hx-color-surface-raised] - Tertiary variant hover fill.\n * @cssprop [--hx-color-surface-on-dark-overlay-subtle] - Inverted-tertiary resting fill (overlay-white-10 — translucent fill, not a border).\n * @cssprop [--hx-color-surface-on-dark-overlay-default] - Inverted-tertiary hover fill + inverted-secondary/ghost/outline hover fill (overlay-white-30 — translucent fill, not a border).\n * @cssprop [--hx-color-border-on-dark-strong] - Inverted-secondary/outline border + inverted focus-visible outline (overlay-white-70 ≈ 5:1 — clears WCAG 1.4.11 3:1 floor).\n * @cssprop [--hx-color-border-on-dark-subtle] - DEPRECATED 3.2.2; renamed to --hx-color-surface-on-dark-overlay-subtle (the value paints a translucent fill, not a border). Consume sites read both names via deprecated-first fallback so existing overrides keep working until removal in 4.0.0.\n * @cssprop [--hx-color-border-on-dark-default] - DEPRECATED 3.2.2; renamed to --hx-color-surface-on-dark-overlay-default (the value paints a translucent fill, not a border). Consume sites read both names via deprecated-first fallback so existing overrides keep working until removal in 4.0.0.\n */\n@customElement('hx-button')\nexport class HelixButton extends mixinDelegatesAria(HelixElement) {\n // 3.2.1: forced-colors deference is owned by the bespoke @media block in\n // hx-button.styles.ts (covers loading/disabled/focus, not just the base).\n // Do NOT also compose forcedColorsInteractive here — the mixin's docstring\n // forbids dual composition (XOR rule) and the dual approach was flagged in\n // the token-cascade campaign findings.\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 *\n * **Mode scope:** `[inverted]` is validated for placement on a dark *region*\n * within a light-mode-active page (hero banners, gradient sections, dark\n * cards). It is NOT validated for use within a dark-mode-active root\n * context: in dark mode, `surface.inverse` flips to a light surface\n * (neutral-100), and the lifted `-400` hover/active fills lose UI-floor\n * contrast against it (primary 2.10:1, danger 2.32:1 vs WCAG 1.4.11's 3:1\n * floor). Mode-aware fill stops + foreground for the dark-mode-inverted\n * combination are tracked as a 3.2.x follow-up.\n *\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 consumer-set aria-label attribute (read via data-aria-label which\n * mixinDelegatesAria writes when consumers set the host's `aria-label`),\n * then the still-pending `aria-label` attribute (in case the mixin has not\n * yet processed it), falling back to empty string.\n *\n * HX-015 migration: never read `this.ariaLabel` (the native HTMLElement IDL\n * property). The mixin overrides `ariaLabel` to read `data-aria-label` in\n * modern browsers, but the IDL fallback path breaks in fallback browsers and\n * confuses consumers who follow the v3 upgrade guide. Read the attribute\n * storage directly so the source-of-truth is unambiguous.\n *\n * @internal\n */\n private get _effectiveLabel(): string {\n return (\n this.accessibleLabel?.trim() ||\n this.getAttribute('data-aria-label')?.trim() ||\n this.getAttribute('aria-label')?.trim() ||\n ''\n );\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 // mixinDelegatesAria forwarding: consumer-set aria-* (aria-pressed for\n // toggle buttons, aria-expanded/aria-haspopup/aria-controls for\n // menu/dropdown triggers, aria-describedby for inline help, aria-current\n // for active-link semantics in href mode) land in data-aria-* on the\n // host. Project them onto the inner role-bearing native element so AT\n // walks them on the <button>/<a>, not the generic host.\n const projectedPressed = this.getAttribute('data-aria-pressed');\n const projectedExpanded = this.getAttribute('data-aria-expanded');\n const projectedHasPopup = this.getAttribute('data-aria-haspopup');\n const projectedControls = this.getAttribute('data-aria-controls');\n const projectedDescribedBy = this.getAttribute('data-aria-describedby');\n const projectedCurrent = this.getAttribute('data-aria-current');\n const projectedLabelledBy = this.getAttribute('data-aria-labelledby');\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-labelledby=${ifDefined(projectedLabelledBy ?? undefined)}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n aria-pressed=${ifDefined(projectedPressed ?? undefined)}\n aria-expanded=${ifDefined(projectedExpanded ?? undefined)}\n aria-haspopup=${ifDefined(projectedHasPopup ?? undefined)}\n aria-controls=${ifDefined(projectedControls ?? undefined)}\n aria-describedby=${ifDefined(projectedDescribedBy ?? undefined)}\n aria-current=${ifDefined(projectedCurrent ?? undefined)}\n tabindex=${this.disabled || this.loading ? '-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-labelledby=${ifDefined(projectedLabelledBy ?? undefined)}\n aria-busy=${this.loading ? 'true' : nothing}\n aria-pressed=${ifDefined(projectedPressed ?? undefined)}\n aria-expanded=${ifDefined(projectedExpanded ?? undefined)}\n aria-haspopup=${ifDefined(projectedHasPopup ?? undefined)}\n aria-controls=${ifDefined(projectedControls ?? undefined)}\n aria-describedby=${ifDefined(projectedDescribedBy ?? undefined)}\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","_c","disabled","changedProperties","slot","n","validVariants","devWarn","e","hasContent","html","nothing","classes","projectedPressed","projectedExpanded","projectedHasPopup","projectedControls","projectedDescribedBy","projectedCurrent","projectedLabelledBy","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,181 +0,0 @@
|
|
|
1
|
-
import { css as u, html as h } from "lit";
|
|
2
|
-
import { property as d, customElement as c } from "lit/decorators.js";
|
|
3
|
-
import { classMap as b } from "lit/directives/class-map.js";
|
|
4
|
-
import { f as p } from "./forced-colors-CTEDFRGa.js";
|
|
5
|
-
import { H as m } from "./helix-element-BNEYeiys.js";
|
|
6
|
-
const g = u`
|
|
7
|
-
:host {
|
|
8
|
-
display: inline-flex;
|
|
9
|
-
contain: layout style;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.group {
|
|
13
|
-
display: inline-flex;
|
|
14
|
-
align-items: stretch;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
/* ─── Orientation Variants ─── */
|
|
18
|
-
|
|
19
|
-
.group--horizontal {
|
|
20
|
-
flex-direction: row;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.group--vertical {
|
|
24
|
-
flex-direction: column;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
/* ─── No Double Borders: Horizontal ─── */
|
|
28
|
-
|
|
29
|
-
.group--horizontal ::slotted(*:not(:first-child)) {
|
|
30
|
-
margin-inline-start: var(
|
|
31
|
-
--hx-button-group-divider-offset,
|
|
32
|
-
calc(-1 * var(--hx-border-width-thin, 1px))
|
|
33
|
-
);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/* ─── No Double Borders: Vertical ─── */
|
|
37
|
-
|
|
38
|
-
.group--vertical ::slotted(*:not(:first-child)) {
|
|
39
|
-
margin-top: var(--hx-button-group-divider-offset, calc(-1 * var(--hx-border-width-thin, 1px)));
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
/* ─── Border Radius: Horizontal — Single child keeps all corners ─── */
|
|
43
|
-
|
|
44
|
-
.group--horizontal ::slotted(:only-child) {
|
|
45
|
-
--hx-button-border-radius: var(
|
|
46
|
-
--hx-button-group-border-radius,
|
|
47
|
-
var(--hx-border-radius-md, 0.375rem)
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
/* ─── Border Radius: Horizontal — First child keeps left corners ─── */
|
|
52
|
-
|
|
53
|
-
.group--horizontal ::slotted(:first-child:not(:only-child)) {
|
|
54
|
-
--hx-button-border-radius: var(
|
|
55
|
-
--hx-button-group-border-radius,
|
|
56
|
-
var(--hx-border-radius-md, 0.375rem)
|
|
57
|
-
)
|
|
58
|
-
0 0 var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
/* ─── Border Radius: Horizontal — Last child keeps right corners ─── */
|
|
62
|
-
|
|
63
|
-
.group--horizontal ::slotted(:last-child:not(:only-child)) {
|
|
64
|
-
--hx-button-border-radius: 0
|
|
65
|
-
var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))
|
|
66
|
-
var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* ─── Border Radius: Horizontal — Middle children have no radius ─── */
|
|
70
|
-
|
|
71
|
-
.group--horizontal ::slotted(:not(:first-child):not(:last-child)) {
|
|
72
|
-
--hx-button-border-radius: 0;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
/* ─── Border Radius: Vertical — Single child keeps all corners ─── */
|
|
76
|
-
|
|
77
|
-
.group--vertical ::slotted(:only-child) {
|
|
78
|
-
--hx-button-border-radius: var(
|
|
79
|
-
--hx-button-group-border-radius,
|
|
80
|
-
var(--hx-border-radius-md, 0.375rem)
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/* ─── Border Radius: Vertical — First child keeps top corners ─── */
|
|
85
|
-
|
|
86
|
-
.group--vertical ::slotted(:first-child:not(:only-child)) {
|
|
87
|
-
--hx-button-border-radius: var(
|
|
88
|
-
--hx-button-group-border-radius,
|
|
89
|
-
var(--hx-border-radius-md, 0.375rem)
|
|
90
|
-
)
|
|
91
|
-
var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
/* ─── Border Radius: Vertical — Last child keeps bottom corners ─── */
|
|
95
|
-
|
|
96
|
-
.group--vertical ::slotted(:last-child:not(:only-child)) {
|
|
97
|
-
--hx-button-border-radius: 0 0
|
|
98
|
-
var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))
|
|
99
|
-
var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
/* ─── Border Radius: Vertical — Middle children have no radius ─── */
|
|
103
|
-
|
|
104
|
-
.group--vertical ::slotted(:not(:first-child):not(:last-child)) {
|
|
105
|
-
--hx-button-border-radius: 0;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
/* ─── Z-index: Raise focused child above siblings to show full focus ring ─── */
|
|
109
|
-
|
|
110
|
-
.group ::slotted(:focus-within) {
|
|
111
|
-
z-index: var(--hx-button-group-focus-z-index, 1);
|
|
112
|
-
position: relative;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
116
|
-
|
|
117
|
-
@media (forced-colors: active) {
|
|
118
|
-
/*
|
|
119
|
-
* In forced-colors mode, negative margins that collapse borders between grouped
|
|
120
|
-
* buttons can obscure focus rings. Raise focused children so the Highlight
|
|
121
|
-
* outline from hx-button's own forced-colors block is fully visible.
|
|
122
|
-
*/
|
|
123
|
-
.group ::slotted(:focus-within) {
|
|
124
|
-
z-index: var(--hx-button-group-focus-z-index-hc, 2);
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
`;
|
|
128
|
-
var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (r, o, l, i) => {
|
|
129
|
-
for (var t = i > 1 ? void 0 : i ? x(o, l) : o, a = r.length - 1, n; a >= 0; a--)
|
|
130
|
-
(n = r[a]) && (t = (i ? n(o, l, t) : n(t)) || t);
|
|
131
|
-
return i && t && f(o, l, t), t;
|
|
132
|
-
};
|
|
133
|
-
let e = class extends m {
|
|
134
|
-
constructor() {
|
|
135
|
-
super(...arguments), this._orientation = "horizontal", this.size = "md", this.label = "", this._consumerAriaLabel = null, this._consumerRole = null, this._emptyLabelWarnEmitted = !1;
|
|
136
|
-
}
|
|
137
|
-
get orientation() {
|
|
138
|
-
return this._orientation;
|
|
139
|
-
}
|
|
140
|
-
set orientation(r) {
|
|
141
|
-
r !== "horizontal" && r !== "vertical" && (r = "horizontal"), this._orientation = r;
|
|
142
|
-
}
|
|
143
|
-
updated(r) {
|
|
144
|
-
super.updated(r), r.has("size") && this.style.setProperty("--hx-button-group-size", this.size), r.has("label") && (this.label ? this.setAttribute("aria-label", this.label) : this._consumerAriaLabel !== null ? this.setAttribute("aria-label", this._consumerAriaLabel) : this.removeAttribute("aria-label"));
|
|
145
|
-
}
|
|
146
|
-
connectedCallback() {
|
|
147
|
-
super.connectedCallback(), this._consumerAriaLabel === null && this.hasAttribute("aria-label") && (this._consumerAriaLabel = this.getAttribute("aria-label")), this._consumerRole === null && this.hasAttribute("role") && (this._consumerRole = this.getAttribute("role")), this._consumerRole ? this._internals.role = this._consumerRole : (this._internals.role = "group", this.setAttribute("role", "group")), this.style.setProperty("--hx-button-group-size", this.size), this.label ? this.setAttribute("aria-label", this.label) : this._consumerAriaLabel !== null || this._emptyLabelWarnEmitted || (this._emptyLabelWarnEmitted = !0);
|
|
148
|
-
}
|
|
149
|
-
// ─── Render ───
|
|
150
|
-
render() {
|
|
151
|
-
return h`
|
|
152
|
-
<div
|
|
153
|
-
part="group"
|
|
154
|
-
class=${b({
|
|
155
|
-
group: !0,
|
|
156
|
-
"group--horizontal": this.orientation === "horizontal",
|
|
157
|
-
"group--vertical": this.orientation === "vertical"
|
|
158
|
-
})}
|
|
159
|
-
>
|
|
160
|
-
<slot></slot>
|
|
161
|
-
</div>
|
|
162
|
-
`;
|
|
163
|
-
}
|
|
164
|
-
};
|
|
165
|
-
e.styles = [g, p];
|
|
166
|
-
s([
|
|
167
|
-
d({ type: String, reflect: !0 })
|
|
168
|
-
], e.prototype, "orientation", 1);
|
|
169
|
-
s([
|
|
170
|
-
d({ type: String, reflect: !0, attribute: "hx-size" })
|
|
171
|
-
], e.prototype, "size", 2);
|
|
172
|
-
s([
|
|
173
|
-
d({ type: String })
|
|
174
|
-
], e.prototype, "label", 2);
|
|
175
|
-
e = s([
|
|
176
|
-
c("hx-button-group")
|
|
177
|
-
], e);
|
|
178
|
-
export {
|
|
179
|
-
e as H
|
|
180
|
-
};
|
|
181
|
-
//# sourceMappingURL=hx-button-group-4NUBpkyC.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-button-group-4NUBpkyC.js","sources":["../../src/components/hx-button-group/hx-button-group.styles.ts","../../src/components/hx-button-group/hx-button-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonGroupStyles = css`\n :host {\n display: inline-flex;\n contain: layout style;\n }\n\n .group {\n display: inline-flex;\n align-items: stretch;\n }\n\n /* ─── Orientation Variants ─── */\n\n .group--horizontal {\n flex-direction: row;\n }\n\n .group--vertical {\n flex-direction: column;\n }\n\n /* ─── No Double Borders: Horizontal ─── */\n\n .group--horizontal ::slotted(*:not(:first-child)) {\n margin-inline-start: var(\n --hx-button-group-divider-offset,\n calc(-1 * var(--hx-border-width-thin, 1px))\n );\n }\n\n /* ─── No Double Borders: Vertical ─── */\n\n .group--vertical ::slotted(*:not(:first-child)) {\n margin-top: var(--hx-button-group-divider-offset, calc(-1 * var(--hx-border-width-thin, 1px)));\n }\n\n /* ─── Border Radius: Horizontal — Single child keeps all corners ─── */\n\n .group--horizontal ::slotted(:only-child) {\n --hx-button-border-radius: var(\n --hx-button-group-border-radius,\n var(--hx-border-radius-md, 0.375rem)\n );\n }\n\n /* ─── Border Radius: Horizontal — First child keeps left corners ─── */\n\n .group--horizontal ::slotted(:first-child:not(:only-child)) {\n --hx-button-border-radius: var(\n --hx-button-group-border-radius,\n var(--hx-border-radius-md, 0.375rem)\n )\n 0 0 var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));\n }\n\n /* ─── Border Radius: Horizontal — Last child keeps right corners ─── */\n\n .group--horizontal ::slotted(:last-child:not(:only-child)) {\n --hx-button-border-radius: 0\n var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))\n var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;\n }\n\n /* ─── Border Radius: Horizontal — Middle children have no radius ─── */\n\n .group--horizontal ::slotted(:not(:first-child):not(:last-child)) {\n --hx-button-border-radius: 0;\n }\n\n /* ─── Border Radius: Vertical — Single child keeps all corners ─── */\n\n .group--vertical ::slotted(:only-child) {\n --hx-button-border-radius: var(\n --hx-button-group-border-radius,\n var(--hx-border-radius-md, 0.375rem)\n );\n }\n\n /* ─── Border Radius: Vertical — First child keeps top corners ─── */\n\n .group--vertical ::slotted(:first-child:not(:only-child)) {\n --hx-button-border-radius: var(\n --hx-button-group-border-radius,\n var(--hx-border-radius-md, 0.375rem)\n )\n var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0;\n }\n\n /* ─── Border Radius: Vertical — Last child keeps bottom corners ─── */\n\n .group--vertical ::slotted(:last-child:not(:only-child)) {\n --hx-button-border-radius: 0 0\n var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))\n var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));\n }\n\n /* ─── Border Radius: Vertical — Middle children have no radius ─── */\n\n .group--vertical ::slotted(:not(:first-child):not(:last-child)) {\n --hx-button-border-radius: 0;\n }\n\n /* ─── Z-index: Raise focused child above siblings to show full focus ring ─── */\n\n .group ::slotted(:focus-within) {\n z-index: var(--hx-button-group-focus-z-index, 1);\n position: relative;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n /*\n * In forced-colors mode, negative margins that collapse borders between grouped\n * buttons can obscure focus rings. Raise focused children so the Highlight\n * outline from hx-button's own forced-colors block is fully visible.\n */\n .group ::slotted(:focus-within) {\n z-index: var(--hx-button-group-focus-z-index-hc, 2);\n }\n }\n`;\n","import { html, 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 { HelixElement } from '../../base/index.js';\nimport { helixButtonGroupStyles } from './hx-button-group.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A container component that groups related hx-button elements into a cohesive\n * horizontal or vertical action set. Eliminates double borders between adjacent\n * buttons and squares off inner border-radius for a unified visual appearance.\n *\n * **Accessibility:** Always provide an accessible label via `aria-label` or\n * `aria-labelledby` so screen readers can announce the group purpose.\n *\n * @summary Groups hx-button elements into a horizontal or vertical action set with shared borders.\n *\n * @tag hx-button-group\n *\n * @slot - Default slot accepting hx-button children.\n *\n * @csspart group - The container div element wrapping all slotted buttons.\n *\n * @cssprop [--hx-button-group-size=md] - Size token forwarded to child buttons. Accepts 'sm', 'md', or 'lg'.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n */\n@customElement('hx-button-group')\nexport class HelixButtonGroup extends HelixElement {\n static override styles = [helixButtonGroupStyles, forcedColorsInteractive];\n\n /**\n * Layout orientation of the button group.\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n get orientation(): 'horizontal' | 'vertical' {\n return this._orientation;\n }\n set orientation(value: string) {\n if (value !== 'horizontal' && value !== 'vertical') {\n devWarn('hx-button-group', `Invalid orientation \"${value}\", defaulting to \"horizontal\".`);\n value = 'horizontal';\n }\n this._orientation = value as 'horizontal' | 'vertical';\n }\n /**\n * Backing store for the orientation property, holding the validated orientation value.\n * @internal\n */\n private _orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Size applied to the button group and cascaded to child buttons via\n * the --hx-button-group-size CSS custom property.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Accessible label for the button group. Sets aria-label on the host element.\n * **Strongly recommended** for WCAG 2.1 AA compliance — without it, screen\n * readers announce an unnamed \"group\". For Drupal/Twig compatibility, prefer\n * applying `aria-label` directly as an HTML attribute instead.\n * @attr label\n */\n @property({ type: String })\n label: string = '';\n\n // ─── Lifecycle ───\n\n /**\n * Tracks whether the consumer set `aria-label` directly as an HTML attribute\n * BEFORE the `label` property fired. Used to avoid clobbering consumer-set\n * aria-label when `label` is empty.\n * @internal\n */\n private _consumerAriaLabel: string | null = null;\n\n /**\n * Snapshot of the consumer-set `role` attribute taken at connect time.\n * When non-null, the consumer has explicitly set a role (e.g. `toolbar`,\n * `radiogroup`) and the host-canonical mirror MUST defer to that role\n * rather than overwriting `internals.role` with the default `\"group\"`.\n * Mirrors the `_consumerAriaLabel` snapshot pattern above.\n * @internal\n */\n private _consumerRole: string | null = null;\n\n /**\n * Tracks whether the no-label devWarn has already fired for this instance,\n * so disconnect/reconnect cycles do not spam the console.\n * @internal\n */\n private _emptyLabelWarnEmitted = false;\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('size')) {\n this.style.setProperty('--hx-button-group-size', this.size);\n }\n\n if (changedProperties.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else if (this._consumerAriaLabel !== null) {\n // Restore consumer-set aria-label rather than removing it. The\n // consumer's HTML attribute is the documented Drupal/Twig path\n // (lines 67-68 narrative) and must not be clobbered by an empty\n // `label` property.\n this.setAttribute('aria-label', this._consumerAriaLabel);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Capture any consumer-set aria-label BEFORE the `label` property writes\n // overwrite it. This snapshot wins back the host attribute when `label`\n // is later cleared.\n if (this._consumerAriaLabel === null && this.hasAttribute('aria-label')) {\n this._consumerAriaLabel = this.getAttribute('aria-label');\n }\n // CodeRabbit SHOULD-FIX (PR #1649 follow-up): snapshot the consumer's\n // explicit `role` BEFORE the host-canonical mirror overwrites it. When\n // a consumer sets `role=\"toolbar\"` (or `radiogroup`, etc.), the mirror\n // must defer to that role; otherwise two surfaces disagree (host attr\n // says toolbar, internals says group) and AT picks one inconsistently.\n if (this._consumerRole === null && this.hasAttribute('role')) {\n this._consumerRole = this.getAttribute('role');\n }\n // Host-canonical role: use ElementInternals so the role survives in the\n // a11y tree even if a consumer attribute-strips the host. Mirror to the\n // host attribute as well for older AT/devtools that walk attributes.\n if (this._consumerRole) {\n // Defer to the consumer's role on both surfaces.\n this._internals.role = this._consumerRole;\n } else {\n this._internals.role = 'group';\n this.setAttribute('role', 'group');\n }\n this.style.setProperty('--hx-button-group-size', this.size);\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else if (this._consumerAriaLabel !== null) {\n // Consumer-set aria-label is fine — no warning needed.\n } else if (!this._emptyLabelWarnEmitted) {\n this._emptyLabelWarnEmitted = true;\n devWarn(\n 'hx-button-group',\n 'Missing accessible label. Provide a `label` attribute so screen readers can announce the group purpose (WCAG 4.1.2).',\n );\n }\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div\n part=\"group\"\n class=${classMap({\n group: true,\n 'group--horizontal': this.orientation === 'horizontal',\n 'group--vertical': this.orientation === 'vertical',\n })}\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-button-group': HelixButtonGroup;\n }\n}\n"],"names":["helixButtonGroupStyles","css","HelixButtonGroup","HelixElement","value","changedProperties","html","classMap","forcedColorsInteractive","__decorateClass","property","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-carousel-item-z1Lc24op.js","sources":["../../src/components/hx-carousel/hx-carousel.styles.ts","../../src/components/hx-carousel/hx-carousel.ts","../../src/components/hx-carousel/hx-carousel-item.styles.ts","../../src/components/hx-carousel/hx-carousel-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCarouselStyles = css`\n :host {\n display: block;\n position: relative;\n }\n\n /* ─── Base ─── */\n\n .base {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-3, 0.75rem);\n }\n\n :host([orientation='vertical']) .base {\n flex-direction: row;\n }\n\n /* ─── Navigation ─── */\n\n .navigation {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n }\n\n :host([orientation='vertical']) .navigation {\n flex-direction: column;\n }\n\n .nav-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));\n height: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));\n /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-carousel-nav-btn-border-color, var(--hx-color-neutral-200, #d6dbd5));\n border-radius: var(--hx-border-radius-full, 9999px);\n background: var(--hx-carousel-nav-btn-bg, var(--hx-color-neutral-0, #ffffff));\n color: var(--hx-carousel-nav-btn-color, var(--hx-color-neutral-700, #313e4b));\n cursor: pointer;\n padding: 0;\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 flex-shrink: 0;\n }\n\n .nav-btn:hover:not([disabled]) {\n background: var(--hx-carousel-nav-btn-hover-bg, var(--hx-color-neutral-50, #f5f8f3));\n border-color: var(\n --hx-carousel-nav-btn-hover-border-color,\n var(--hx-color-neutral-400, #8e9c98)\n );\n }\n\n .nav-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .nav-btn[disabled] {\n opacity: var(--hx-opacity-disabled, 0.5);\n cursor: not-allowed;\n }\n\n .nav-btn svg {\n width: 1.25em;\n height: 1.25em;\n }\n\n /* ─── Play/Pause ─── */\n\n .play-pause-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n width: var(--hx-touch-target-min, 2.75rem);\n height: var(--hx-touch-target-min, 2.75rem);\n border: var(--hx-border-width-thin, 1px) solid transparent;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n background: transparent;\n color: var(--hx-carousel-play-pause-color, var(--hx-color-neutral-500, #66787b));\n cursor: pointer;\n padding: 0;\n font-size: var(--hx-font-size-sm, 0.875rem);\n transition: background-color var(--hx-transition-fast, 150ms ease);\n flex-shrink: 0;\n }\n\n .play-pause-btn:hover {\n background: var(--hx-carousel-play-pause-hover-bg, var(--hx-color-neutral-100, #ebeee9));\n }\n\n .play-pause-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Scroll Container ─── */\n\n .scroll-container-wrapper {\n flex: 1;\n overflow: hidden;\n }\n\n .slide-viewport {\n overflow: hidden;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n .track {\n display: flex;\n transition: transform var(--hx-transition-base, 0.3s ease);\n }\n\n :host([orientation='vertical']) .track {\n flex-direction: column;\n }\n\n /* ─── Pagination ─── */\n\n .pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n flex-wrap: wrap;\n }\n\n :host([orientation='vertical']) .pagination {\n flex-direction: column;\n }\n\n .pagination-item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n padding: 0;\n border: none;\n cursor: pointer;\n background: transparent;\n border-radius: var(--hx-border-radius-full, 9999px);\n }\n\n .pagination-dot {\n display: block;\n width: var(--hx-carousel-pagination-dot-size, 0.5rem);\n height: var(--hx-carousel-pagination-dot-size, 0.5rem);\n border-radius: var(--hx-border-radius-full, 9999px);\n background: var(--hx-carousel-pagination-dot-bg, var(--hx-color-neutral-300, #b6bfb9));\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n transform var(--hx-transition-fast, 150ms ease);\n }\n\n .pagination-item[aria-current='true'] .pagination-dot,\n .pagination-item.is-active .pagination-dot {\n background: var(--hx-carousel-pagination-dot-active-bg, var(--hx-color-primary-600, #0f7078));\n transform: scale(1.25);\n }\n\n .pagination-item:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-full, 9999px);\n }\n\n /* ─── Controls row ─── */\n\n .controls {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-3, 0.75rem);\n }\n\n /* ─── Live Region ─── */\n\n .live-region {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .track,\n .nav-btn,\n .pagination-dot,\n .play-pause-btn {\n transition: none;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .nav-btn {\n border-color: ButtonText;\n color: ButtonText;\n }\n\n .play-pause-btn {\n border-color: ButtonText;\n color: ButtonText;\n }\n\n .pagination-dot {\n border: 1px solid CanvasText;\n }\n\n .pagination-item[aria-current='true'] .pagination-dot,\n .pagination-item.is-active .pagination-dot {\n background: Highlight;\n border-color: Highlight;\n }\n }\n`;\n","import { html, nothing } 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 } from '../../base/index.js';\nimport { helixCarouselStyles } from './hx-carousel.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport type { HelixCarouselItem } from './hx-carousel-item.js';\n\n// ─── Module-level SVG icon constants ───\n\nconst _svgChevronLeft = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"15 18 9 12 15 6\"></polyline>\n</svg>`;\n\nconst _svgChevronUp = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"18 15 12 9 6 15\"></polyline>\n</svg>`;\n\nconst _svgChevronRight = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n</svg>`;\n\nconst _svgChevronDown = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n</svg>`;\n\nconst _svgPlay = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\"\n>\n <polygon points=\"5 3 19 12 5 21 5 3\"></polygon>\n</svg>`;\n\nconst _svgPause = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\"\n>\n <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"></rect>\n <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"></rect>\n</svg>`;\n\n/**\n * A scrollable carousel/slider for images or content slides.\n *\n * @summary Scrollable carousel with navigation, pagination, autoplay, and an accessible label.\n *\n * @tag hx-carousel\n *\n * @slot - `hx-carousel-item` elements (the slides).\n * @slot next-button - Custom next navigation button.\n * @slot previous-button - Custom previous navigation button.\n *\n * @fires {CustomEvent<{index: number, slide: HelixCarouselItem}>} hx-slide-change - Dispatched when the active slide changes.\n *\n * @csspart base - The outer wrapper element.\n * @csspart slide-viewport - The slide viewport/overflow container.\n * @csspart pagination - The pagination dot container.\n * @csspart pagination-item - Individual pagination dot button.\n * @csspart navigation - The previous/next button wrapper.\n * @csspart prev-button - The previous navigation button.\n * @csspart next-button - The next navigation button.\n * @csspart play-pause-btn - The autoplay play/pause toggle button.\n *\n * @cssprop [--hx-carousel-gap=0px] - Gap between slides.\n * @cssprop [--hx-carousel-slide-width=100%] - Width override for each slide.\n * @cssprop [--hx-carousel-nav-btn-size=2.5rem] - Size of previous/next navigation buttons.\n * @cssprop [--hx-carousel-pagination-dot-size=0.5rem] - Size of pagination dots.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-border-radius-full] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-carousel-focus-ring-color=var(--hx-focus-ring-color)] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-transition-base] - Transition timing.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-primary-600] - Color.\n */\n@customElement('hx-carousel')\nexport class HelixCarousel extends HelixElement {\n static override styles = [helixCarouselStyles, forcedColorsInteractive];\n\n /**\n * Accessible label identifying this carousel to assistive technology.\n * When multiple carousels appear on the same page, each must have a unique label.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = 'Carousel';\n\n /**\n * Whether the carousel wraps around from last to first slide and vice-versa.\n * @attr loop\n */\n @property({ type: Boolean, reflect: true })\n loop = false;\n\n /**\n * Whether the carousel auto-advances slides.\n * Automatically pauses on hover, focus, and when prefers-reduced-motion is active.\n * @attr autoplay\n */\n @property({ type: Boolean, reflect: true })\n autoplay = false;\n\n /**\n * Milliseconds between auto-advance transitions.\n * @attr autoplay-interval\n */\n @property({ type: Number, attribute: 'autoplay-interval' })\n autoplayInterval = 3000;\n\n /**\n * Number of slides visible at once.\n * @attr slides-per-page\n */\n @property({ type: Number, attribute: 'slides-per-page' })\n slidesPerPage = 1;\n\n /**\n * Number of slides to advance per navigation action.\n * @attr slides-per-move\n */\n @property({ type: Number, attribute: 'slides-per-move' })\n slidesPerMove = 1;\n\n /**\n * Scroll axis of the carousel.\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Whether click-drag scrolling is enabled.\n * @attr mouse-dragging\n */\n @property({ type: Boolean, attribute: 'mouse-dragging', reflect: true })\n mouseDragging = false;\n\n /**\n * Accessible label for the previous slide button.\n * @attr label-prev-slide\n */\n @property({ type: String, attribute: 'label-prev-slide' })\n labelPrevSlide = 'Previous slide';\n\n /**\n * Accessible label for the next slide button.\n * @attr label-next-slide\n */\n @property({ type: String, attribute: 'label-next-slide' })\n labelNextSlide = 'Next slide';\n\n /**\n * Accessible label for the autoplay pause button.\n * @attr label-pause-autoplay\n */\n @property({ type: String, attribute: 'label-pause-autoplay' })\n labelPauseAutoplay = 'Pause autoplay';\n\n /**\n * Accessible label for the autoplay play button.\n * @attr label-play-autoplay\n */\n @property({ type: String, attribute: 'label-play-autoplay' })\n labelPlayAutoplay = 'Play autoplay';\n\n /**\n * Generates the live-region text for a slide position.\n * @param index - 1-based slide index\n * @param total - total slide count\n */\n @property({ attribute: false })\n labelSlideOf: (index: number, total: number) => string = (index, total) =>\n `Slide ${index} of ${total}`;\n\n /**\n * Index of the currently visible slide.\n * @internal\n */\n @state() private _currentIndex = 0;\n /**\n * Array of carousel item elements assigned to the default slot.\n * @internal\n */\n @state() private _slides: HelixCarouselItem[] = [];\n /**\n * Whether the autoplay is currently active and advancing slides.\n * @internal\n */\n @state() private _isPlaying = false;\n /**\n * Text content for the ARIA live region announcing slide changes.\n * @internal\n */\n @state() private _liveText = '';\n /** @internal */\n @state() private _livePolite = true;\n\n /**\n * Reference to the active autoplay interval timer, or null when stopped.\n * @internal\n */\n private _autoplayTimer: ReturnType<typeof setInterval> | null = null;\n /**\n * Whether the user has requested reduced motion via the OS media preference.\n * @internal\n */\n private _reducedMotion = false;\n /**\n * MediaQueryList instance for monitoring the prefers-reduced-motion media feature.\n * @internal\n */\n private _mql: MediaQueryList | null = null;\n /**\n * Whether the carousel is currently being hovered, used to pause autoplay on hover.\n * @internal\n */\n private _isHovered = false;\n /**\n * Whether a descendant of the carousel currently has focus, used to pause autoplay on focus.\n * @internal\n */\n private _isFocused = false;\n\n // ─── Drag state ───\n /**\n * Pointer coordinate at the start of a mouse drag gesture.\n * @internal\n */\n private _dragStartCoord = 0;\n /**\n * Whether a mouse drag gesture is currently in progress.\n * @internal\n */\n private _isDragging = false;\n /**\n * Whether the pointer has moved beyond the drag threshold during the current drag gesture.\n * @internal\n */\n private _dragMoved = false;\n /**\n * Touch coordinate at the start of a touch swipe gesture.\n * @internal\n */\n private _touchStartCoord = 0;\n /**\n * Whether the touch has moved beyond the swipe threshold during the current touch gesture.\n * @internal\n */\n private _touchMoved = false;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n // Guard for SSR — window.matchMedia is unavailable server-side\n if (typeof window !== 'undefined') {\n this._mql = window.matchMedia('(prefers-reduced-motion: reduce)');\n this._reducedMotion = this._mql.matches;\n this._mql.addEventListener('change', this._handleMotionChange);\n }\n\n this.addEventListener('mouseenter', this._handleMouseEnter);\n this.addEventListener('mouseleave', this._handleMouseLeave);\n this.addEventListener('focusin', this._handleFocusIn);\n this.addEventListener('focusout', this._handleFocusOut);\n this.addEventListener('keydown', this._handleKeydown);\n // Touch events are registered directly on the scroll-container in the template\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._mql?.removeEventListener('change', this._handleMotionChange);\n this._stopAutoplay();\n this.removeEventListener('mouseenter', this._handleMouseEnter);\n this.removeEventListener('mouseleave', this._handleMouseLeave);\n this.removeEventListener('focusin', this._handleFocusIn);\n this.removeEventListener('focusout', this._handleFocusOut);\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n override firstUpdated(): void {\n this._syncSlides();\n if (this.autoplay && !this._reducedMotion) {\n this._startAutoplay();\n }\n }\n\n // ─── Slide Management ───\n\n /** @internal */\n private _syncSlides(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (!slot) return;\n\n const items = slot\n .assignedElements({ flatten: true })\n .filter((el) => el.tagName.toLowerCase() === 'hx-carousel-item') as HelixCarouselItem[];\n\n this._slides = items;\n\n // Update aria labels on each item\n items.forEach((item, i) => {\n item.slideIndex = i;\n item.totalSlides = items.length;\n const slideWidth = `${100 / this.slidesPerPage}%`;\n (item as HTMLElement).style.setProperty('--_hx-carousel-slide-width', slideWidth);\n });\n\n // Clamp currentIndex if slides changed\n if (this._currentIndex >= items.length) {\n this._currentIndex = Math.max(0, items.length - 1);\n }\n }\n\n /** @internal */\n private _handleSlotChange(): void {\n this._syncSlides();\n }\n\n // ─── Navigation ───\n\n /**\n * Maximum valid slide index accounting for the number of slides visible per page.\n * @internal\n */\n private get _maxIndex(): number {\n return Math.max(0, this._slides.length - this.slidesPerPage);\n }\n\n goTo(index: number): void {\n if (this._slides.length === 0) return;\n\n let next = index;\n if (this.loop) {\n next = ((index % this._slides.length) + this._slides.length) % this._slides.length;\n } else {\n next = Math.max(0, Math.min(index, this._maxIndex));\n }\n\n if (next === this._currentIndex) return;\n\n this._currentIndex = next;\n this._liveText = this.labelSlideOf(next + 1, this._slides.length);\n const slide = this._slides[next];\n if (!slide) return;\n this.dispatchEvent(\n new CustomEvent<{ index: number; slide: HelixCarouselItem | undefined }>('hx-slide-change', {\n bubbles: true,\n composed: true,\n detail: { index: next, slide },\n }),\n );\n }\n\n next(): void {\n const nextIndex = this._currentIndex + this.slidesPerMove;\n if (!this.loop && nextIndex > this._maxIndex) {\n return;\n }\n this._livePolite = true;\n this.goTo(nextIndex);\n }\n\n previous(): void {\n const prevIndex = this._currentIndex - this.slidesPerMove;\n if (!this.loop && prevIndex < 0) {\n return;\n }\n this._livePolite = true;\n this.goTo(prevIndex);\n }\n\n // ─── Autoplay ───\n\n /**\n * Callback invoked on each autoplay interval tick to advance to the next slide.\n * @internal\n */\n private _autoplayTick = (): void => {\n this._livePolite = false;\n if (this.loop) {\n this.goTo(this._currentIndex + this.slidesPerMove);\n } else if (this._currentIndex < this._maxIndex) {\n this.goTo(this._currentIndex + this.slidesPerMove);\n } else {\n this.goTo(0);\n }\n };\n\n /** @internal */\n private _startAutoplay(): void {\n if (this._autoplayTimer !== null) return;\n this._isPlaying = true;\n this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval);\n }\n\n /** @internal */\n private _stopAutoplay(): void {\n if (this._autoplayTimer !== null) {\n clearInterval(this._autoplayTimer);\n this._autoplayTimer = null;\n }\n this._isPlaying = false;\n }\n\n /** @internal */\n private _toggleAutoplay(): void {\n if (this._isPlaying) {\n this._stopAutoplay();\n } else if (!this._reducedMotion) {\n this._startAutoplay();\n }\n }\n\n /** @internal */\n private _pauseAutoplay(): void {\n if (!this._isPlaying || this._autoplayTimer === null) return;\n clearInterval(this._autoplayTimer);\n this._autoplayTimer = null;\n }\n\n /** @internal */\n private _resumeAutoplay(): void {\n if (!this.autoplay || !this._isPlaying || this._reducedMotion) return;\n if (this._autoplayTimer !== null) return;\n this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval);\n }\n\n // ─── Event Handlers ───\n\n /**\n * Handles changes to the prefers-reduced-motion media query, stopping or resuming autoplay accordingly.\n * @internal\n */\n private _handleMotionChange = (e: MediaQueryListEvent): void => {\n this._reducedMotion = e.matches;\n if (this._reducedMotion) {\n this._stopAutoplay();\n } else if (this.autoplay && !this._isHovered && !this._isFocused) {\n this._startAutoplay();\n }\n };\n\n /**\n * Handles the mouseenter event to pause autoplay while the user hovers over the carousel.\n * @internal\n */\n private _handleMouseEnter = (): void => {\n this._isHovered = true;\n this._pauseAutoplay();\n };\n\n /**\n * Handles the mouseleave event to resume autoplay when the user stops hovering.\n * @internal\n */\n private _handleMouseLeave = (): void => {\n this._isHovered = false;\n if (!this._isFocused) {\n this._resumeAutoplay();\n }\n };\n\n /**\n * Handles the focusin event to pause autoplay while a descendant has focus.\n * @internal\n */\n private _handleFocusIn = (): void => {\n this._isFocused = true;\n this._pauseAutoplay();\n };\n\n /**\n * Handles the focusout event to resume autoplay when focus leaves the carousel.\n * @internal\n */\n private _handleFocusOut = (): void => {\n this._isFocused = false;\n if (!this._isHovered) {\n this._resumeAutoplay();\n }\n };\n\n /**\n * Handles keyboard navigation to move between slides using arrow, Home, and End keys.\n * @internal\n */\n private _handleKeydown = (e: KeyboardEvent): void => {\n if (this.orientation === 'horizontal') {\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this.previous();\n } else if (e.key === 'ArrowRight') {\n e.preventDefault();\n this.next();\n }\n } else {\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n this.previous();\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n this.next();\n }\n }\n\n if (e.key === 'Home') {\n e.preventDefault();\n this.goTo(0);\n } else if (e.key === 'End') {\n e.preventDefault();\n this.goTo(this._slides.length - 1);\n }\n };\n\n // ─── Drag Handlers ───\n\n /** @internal */\n private _handleDragStart(e: MouseEvent): void {\n if (!this.mouseDragging) return;\n this._isDragging = true;\n this._dragMoved = false;\n this._dragStartCoord = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n (e.currentTarget as HTMLElement).style.cursor = 'grabbing';\n e.preventDefault();\n }\n\n /** @internal */\n private _handleDragMove(e: MouseEvent): void {\n if (!this._isDragging) return;\n const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n const diff = current - this._dragStartCoord;\n if (Math.abs(diff) > 5) {\n this._dragMoved = true;\n }\n }\n\n /** @internal */\n private _handleDragEnd(e: MouseEvent): void {\n if (!this._isDragging) return;\n const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n const diff = current - this._dragStartCoord;\n const threshold = 50;\n if (this._dragMoved) {\n if (diff > threshold) {\n this.previous();\n } else if (diff < -threshold) {\n this.next();\n }\n }\n this._isDragging = false;\n this._dragMoved = false;\n (e.currentTarget as HTMLElement).style.cursor = '';\n }\n\n // ─── Touch Handlers ───\n\n /** @internal */\n private _handleTouchStart(e: TouchEvent): void {\n if (!this.mouseDragging) return;\n const touch = e.touches[0];\n if (!touch) return;\n this._isDragging = true;\n this._touchMoved = false;\n this._touchStartCoord = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n }\n\n /** @internal */\n private _handleTouchMove(e: TouchEvent): void {\n if (!this._isDragging) return;\n const touch = e.touches[0];\n if (!touch) return;\n const current = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n const diff = current - this._touchStartCoord;\n if (Math.abs(diff) > 5) {\n this._touchMoved = true;\n }\n }\n\n /** @internal */\n private _handleTouchEnd(e: TouchEvent): void {\n if (!this._isDragging) return;\n const touch = e.changedTouches[0];\n if (!touch) return;\n const current = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n const diff = current - this._touchStartCoord;\n const threshold = 50;\n if (this._touchMoved) {\n if (diff > threshold) {\n this.previous();\n } else if (diff < -threshold) {\n this.next();\n }\n }\n this._isDragging = false;\n this._touchMoved = false;\n }\n\n /** @internal */\n private _goToManual(index: number): void {\n this._livePolite = true;\n this.goTo(index);\n }\n\n // ─── Computed ───\n\n /**\n * CSS transform value applied to the slide track to scroll to the current index.\n * @internal\n */\n private get _trackTransform(): string {\n const slideSize = 100 / this.slidesPerPage;\n const offset = this._currentIndex * slideSize;\n return this.orientation === 'horizontal'\n ? `translateX(-${offset}%)`\n : `translateY(-${offset}%)`;\n }\n\n /**\n * Whether the previous navigation button should be enabled.\n * @internal\n */\n private get _canGoPrev(): boolean {\n return this.loop || this._currentIndex > 0;\n }\n\n /**\n * Whether the next navigation button should be enabled.\n * @internal\n */\n private get _canGoNext(): boolean {\n return this.loop || this._currentIndex < this._maxIndex;\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderNavigation() {\n return html`\n <div class=\"navigation\" part=\"navigation\">\n <slot name=\"previous-button\">\n <button\n class=\"nav-btn\"\n part=\"prev-button\"\n type=\"button\"\n aria-label=${this.labelPrevSlide}\n ?disabled=${!this._canGoPrev}\n @click=${() => this.previous()}\n >\n ${this._renderPrevIcon()}\n </button>\n </slot>\n ${this.autoplay\n ? html`\n <button\n class=\"play-pause-btn\"\n part=\"play-pause-btn\"\n type=\"button\"\n aria-label=${this._isPlaying ? this.labelPauseAutoplay : this.labelPlayAutoplay}\n @click=${() => this._toggleAutoplay()}\n >\n ${this._isPlaying ? this._renderPauseIcon() : this._renderPlayIcon()}\n </button>\n `\n : nothing}\n <slot name=\"next-button\">\n <button\n class=\"nav-btn\"\n part=\"next-button\"\n type=\"button\"\n aria-label=${this.labelNextSlide}\n ?disabled=${!this._canGoNext}\n @click=${() => this.next()}\n >\n ${this._renderNextIcon()}\n </button>\n </slot>\n </div>\n `;\n }\n\n /** @internal */\n private _renderPagination() {\n const count = this._slides.length;\n if (count <= 1) return nothing;\n const dots = Array.from({ length: count }, (_, i) => i);\n return html`\n <div class=\"controls\">\n <div class=\"pagination\" part=\"pagination\">\n ${dots.map(\n (i) => html`\n <button\n class=${classMap({\n 'pagination-item': true,\n 'is-active': i === this._currentIndex,\n })}\n part=\"pagination-item\"\n type=\"button\"\n aria-label=${this.labelSlideOf(i + 1, count)}\n aria-current=${i === this._currentIndex ? 'true' : nothing}\n @click=${() => this._goToManual(i)}\n >\n <span class=\"pagination-dot\"></span>\n </button>\n `,\n )}\n </div>\n </div>\n `;\n }\n\n /** @internal */\n private _renderPrevIcon() {\n return this.orientation === 'horizontal' ? _svgChevronLeft : _svgChevronUp;\n }\n\n /** @internal */\n private _renderNextIcon() {\n return this.orientation === 'horizontal' ? _svgChevronRight : _svgChevronDown;\n }\n\n /** @internal */\n private _renderPlayIcon() {\n return _svgPlay;\n }\n\n /** @internal */\n private _renderPauseIcon() {\n return _svgPause;\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div\n class=\"base\"\n part=\"base\"\n role=\"region\"\n aria-label=${this.label}\n aria-roledescription=\"carousel\"\n >\n <div\n class=\"live-region\"\n role=\"status\"\n aria-live=${this._livePolite ? 'polite' : 'off'}\n aria-atomic=\"true\"\n >\n ${this._liveText}\n </div>\n ${this._renderNavigation()}\n <div class=\"scroll-container-wrapper\">\n <div\n class=\"slide-viewport\"\n part=\"slide-viewport\"\n aria-live=\"polite\"\n aria-atomic=\"false\"\n @mousedown=${this._handleDragStart}\n @mousemove=${this._handleDragMove}\n @mouseup=${this._handleDragEnd}\n @mouseleave=${this._handleDragEnd}\n @touchstart=${this._handleTouchStart}\n @touchmove=${this._handleTouchMove}\n @touchend=${this._handleTouchEnd}\n >\n <div class=\"track\" style=\"transform: ${this._trackTransform};\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n </div>\n ${this._renderPagination()}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-carousel': HelixCarousel;\n }\n}\n","import { css } from 'lit';\n\nexport const helixCarouselItemStyles = css`\n :host {\n display: block;\n flex-shrink: 0;\n width: var(--_hx-carousel-slide-width, 100%);\n box-sizing: border-box;\n }\n\n .slide-group {\n height: 100%;\n outline: none;\n }\n\n .slide-group:focus-visible {\n outline: var(--hx-focus-ring-width) solid var(--hx-focus-ring-color);\n outline-offset: var(--hx-focus-ring-offset);\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .slide-group:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixCarouselItemStyles } from './hx-carousel-item.styles.js';\n\n/**\n * A wrapper for individual carousel slides.\n *\n * @summary Individual slide wrapper for use inside hx-carousel.\n *\n * @tag hx-carousel-item\n *\n * @slot - Slide content.\n *\n * @csspart slide - The slide wrapper element.\n */\n@customElement('hx-carousel-item')\nexport class HelixCarouselItem extends HelixElement {\n static override styles = [helixCarouselItemStyles];\n\n /**\n * The 0-based index of this slide within the carousel. Set by hx-carousel.\n * @attr slide-index\n */\n @property({ type: Number, attribute: 'slide-index' })\n slideIndex = 0;\n\n /**\n * Total number of slides in the carousel. Set by hx-carousel.\n * @attr total-slides\n */\n @property({ type: Number, attribute: 'total-slides' })\n totalSlides = 0;\n\n override render() {\n const label = `Slide ${this.slideIndex + 1} of ${this.totalSlides}`;\n return html`\n <div class=\"slide-group\" part=\"slide\" role=\"group\" aria-label=${label} tabindex=\"-1\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-carousel-item': HelixCarouselItem;\n }\n}\n"],"names":["helixCarouselStyles","css","_svgChevronLeft","html","_svgChevronUp","_svgChevronRight","_svgChevronDown","_svgPlay","_svgPause","HelixCarousel","HelixElement","index","total","e","_a","slot","items","el","item","i","slideWidth","next","slide","nextIndex","prevIndex","diff","threshold","touch","slideSize","offset","nothing","count","dots","_","classMap","forcedColorsInteractive","__decorateClass","property","state","customElement","helixCarouselItemStyles","HelixCarouselItem","label"],"mappings":";;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-checkbox-CYd0YV_u.js","sources":["../../src/components/hx-checkbox/hx-checkbox.styles.ts","../../src/components/hx-checkbox/hx-checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCheckboxStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n .checkbox {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--hx-checkbox-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n /* ─── Control (checkbox + label row) ─── */\n\n .checkbox__control {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--hx-space-2, 0.5rem);\n /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height */\n min-height: var(--hx-touch-target-min, 2.75rem);\n cursor: pointer;\n }\n\n :host([disabled]) .checkbox__control {\n cursor: not-allowed;\n }\n\n /* ─── Hidden Native Input ─── */\n\n .checkbox__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Visual Checkbox ─── */\n\n .checkbox__box {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n border: var(--hx-border-width-medium, 2px) solid\n var(--hx-checkbox-border-color, var(--hx-color-border-strong, #66787b));\n border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));\n background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n margin-top: var(--hx-space-px, 1px);\n }\n\n /* ─── Focus Ring ─── */\n\n /*\n * Host-focus path: on the modern (IDL element-references) render branch the\n * host is the tabbable surface (tabindex=0) and the inner input is demoted\n * to tabindex=-1. Drive the focus ring from ':host(:focus-visible)' so\n * keyboard users still get a visible affordance. Codex round-11 P1.\n */\n :host(:focus-visible) .checkbox__box {\n outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid\n var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));\n }\n\n /*\n * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner\n * input is the tab target. The native :focus-visible on the input drives\n * the same visual ring, scoped via the inner-state class.\n */\n .checkbox__input:focus-visible ~ .checkbox__box {\n outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid\n var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));\n }\n\n /* ─── Checked State ─── */\n\n .checkbox--checked .checkbox__box {\n background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));\n border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));\n }\n\n /* ─── Indeterminate State ─── */\n\n .checkbox--indeterminate .checkbox__box {\n background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));\n border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));\n }\n\n /* ─── Error State ─── */\n\n .checkbox--error .checkbox__box {\n border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));\n }\n\n .checkbox--error.checkbox--checked .checkbox__box,\n .checkbox--error.checkbox--indeterminate .checkbox__box {\n background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));\n border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));\n }\n\n /* ─── Hover ─── */\n\n /* P1-03: use component token so consumer overrides of --hx-checkbox-border-color work on hover */\n .checkbox__control:hover .checkbox__box {\n border-color: var(\n --hx-checkbox-hover-border-color,\n var(--hx-checkbox-border-color, var(--hx-color-primary-500, #429797))\n );\n }\n\n .checkbox--checked .checkbox__control:hover .checkbox__box {\n filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n }\n\n .checkbox--error .checkbox__control:hover .checkbox__box {\n border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));\n }\n\n /* ─── Checkmark Icon ─── */\n\n .checkbox__icon {\n display: none;\n width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n fill: none;\n stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n .checkbox--checked .checkbox__icon--check {\n display: block;\n }\n\n .checkbox--indeterminate .checkbox__icon--indeterminate {\n display: block;\n }\n\n /* ─── Label ─── */\n\n .checkbox__label {\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-checkbox-label-color, var(--hx-color-text-strong, #202b39));\n line-height: var(--hx-line-height-normal, 1.5);\n user-select: none;\n -webkit-user-select: none;\n }\n\n .checkbox__required-marker {\n color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #c92a2a));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n /* ─── Help Text & Error Messages ─── */\n\n .checkbox__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-checkbox-help-text-color, var(--hx-color-text-muted, #4a5362));\n line-height: var(--hx-line-height-normal, 1.5);\n padding-inline-start: calc(\n var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n );\n }\n\n .checkbox__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #c92a2a));\n line-height: var(--hx-line-height-normal, 1.5);\n padding-inline-start: calc(\n var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n );\n }\n\n /* ─── Size Variants ─── */\n\n :host([hx-size='sm']) {\n --hx-checkbox-size: var(--hx-size-4, 1rem);\n }\n\n :host([hx-size='sm']) .checkbox__label {\n font-size: var(--hx-font-size-xs, 0.75rem);\n }\n\n :host([hx-size='sm']) .checkbox__help-text,\n :host([hx-size='sm']) .checkbox__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n padding-inline-start: calc(var(--hx-size-4, 1rem) + var(--hx-space-2, 0.5rem));\n }\n\n :host([hx-size='lg']) {\n --hx-checkbox-size: var(--hx-size-6, 1.5rem);\n }\n\n :host([hx-size='lg']) .checkbox__label {\n font-size: var(--hx-font-size-md, 1rem);\n }\n\n :host([hx-size='lg']) .checkbox__help-text,\n :host([hx-size='lg']) .checkbox__error {\n font-size: var(--hx-font-size-sm, 0.875rem);\n padding-inline-start: calc(var(--hx-size-6, 1.5rem) + var(--hx-space-2, 0.5rem));\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .checkbox__box {\n transition: none;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .checkbox__box {\n forced-color-adjust: none;\n background-color: ButtonFace;\n border: 2px solid ButtonText;\n }\n\n :host(:focus-visible) .checkbox__box,\n .checkbox__input:focus-visible ~ .checkbox__box {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .checkbox--checked .checkbox__box,\n .checkbox--indeterminate .checkbox__box {\n background-color: Highlight;\n border-color: Highlight;\n }\n\n .checkbox__icon {\n stroke: HighlightText;\n }\n\n .checkbox--error .checkbox__box {\n border-color: LinkText;\n }\n\n .checkbox--error.checkbox--checked .checkbox__box,\n .checkbox--error.checkbox--indeterminate .checkbox__box {\n background-color: LinkText;\n border-color: LinkText;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n :host([disabled]) .checkbox__box {\n border-color: GrayText;\n background-color: ButtonFace;\n }\n\n :host([disabled]) .checkbox--checked .checkbox__box,\n :host([disabled]) .checkbox--indeterminate .checkbox__box {\n background-color: GrayText;\n border-color: GrayText;\n }\n\n :host([disabled]) .checkbox__label {\n color: GrayText;\n }\n\n .checkbox__label {\n color: CanvasText;\n }\n\n .checkbox__help-text {\n color: GrayText;\n }\n\n .checkbox__error {\n color: LinkText;\n }\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 { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixCheckboxStyles } from './hx-checkbox.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport {\n installAriaIdrefMirror,\n resolveIdrefTokens,\n supportsIdrefElementReferences,\n type AriaIdrefMirrorHandle,\n} from '../../utils/aria-idref.js';\n\n// P2-05: monotonic counter — collision-free, deterministic, SSR-safe\nconst _nextCheckboxId = createIdCounter('hx-checkbox');\n\n/** Detail for the hx-change event dispatched by hx-checkbox. */\nexport interface HxCheckboxChangeDetail {\n checked: boolean;\n value: string;\n}\n\n/**\n * A checkbox component with label, validation, and form association.\n *\n * @summary Form-associated checkbox with built-in label, error, and help text.\n *\n * @tag hx-checkbox\n *\n * @slot - Custom label content (overrides the label property). Rich HTML allowed — Drupal can include links in consent labels.\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} hx-change - Dispatched when the checkbox is toggled. Boolean-selection controls (`hx-switch`, `hx-checkbox`) include both `checked` (boolean state) and `value` (form value) in the detail; text-value controls (`hx-text-input`, `hx-combobox`, `hx-select`) emit only `{value}`.\n *\n * @csspart checkbox - The visual checkbox element.\n * @csspart checkmark - The SVG checkmark icon inside the checkbox.\n * @csspart label - The label element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n * @csspart control - The wrapper around checkbox and label.\n *\n * @cssprop [--hx-checkbox-size=var(--hx-size-5, 1.25rem)] - Checkbox dimensions.\n * @cssprop [--hx-checkbox-bg=var(--hx-color-neutral-0, #ffffff)] - Unchecked background color.\n * @cssprop [--hx-checkbox-border-color=var(--hx-color-neutral-300, #B6BFB9)] - Checkbox border color.\n * @cssprop [--hx-checkbox-border-radius=var(--hx-border-radius-sm, 0.25rem)] - Checkbox border radius.\n * @cssprop [--hx-checkbox-checked-bg=var(--hx-color-primary-500, #429797)] - Checked background color.\n * @cssprop [--hx-checkbox-checked-border-color=var(--hx-color-primary-500, #429797)] - Checked border color.\n * @cssprop [--hx-checkbox-checkmark-color=var(--hx-color-neutral-0, #ffffff)] - Checkmark color.\n * @cssprop [--hx-checkbox-focus-ring-color=var(--hx-focus-ring-color, #6AB1B1)] - Focus ring color.\n * @cssprop [--hx-checkbox-label-color=var(--hx-color-neutral-700, #313E4B)] - Label text color.\n * @cssprop [--hx-checkbox-help-text-color=var(--hx-color-neutral-500, #66787B)] - Help text color.\n * @cssprop [--hx-checkbox-hover-border-color=var(--hx-checkbox-border-color)] - Border color on hover.\n * @cssprop [--hx-checkbox-error-color=var(--hx-color-error-500, #E5493E)] - Error state color.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-checkbox-font-family=var(--hx-font-family-sans)] - Font family for checkbox label and help text.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-size-5] - Size token.\n * @cssprop [--hx-border-width-medium] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-space-px] - Spacing token.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-filter-brightness-hover] - CSS filter.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-size-4] - Size token.\n * @cssprop [--hx-size-6] - Size token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-color-error-500] - Color.\n */\n@customElement('hx-checkbox')\nexport class HelixCheckbox extends mixinDelegatesAria(FormMixin(HelixElement)) {\n static override styles = [helixCheckboxStyles, forcedColorsField];\n\n // ─── Form Association ───\n\n /** @internal */\n static override formAssociated = true;\n\n // ─── Properties ───\n\n /**\n * Whether the checkbox is checked.\n * @attr checked\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * Whether the checkbox is in an indeterminate state (e.g., for \"select all\" patterns).\n * @attr indeterminate\n */\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n /**\n * Whether the checkbox is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the checkbox is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * The name of the checkbox, used for form submission.\n * @attr name\n */\n @property({ type: String, reflect: true })\n name = '';\n\n /**\n * The value submitted when the checkbox is checked.\n * @attr value\n */\n @property({ type: String, reflect: true })\n value = 'on';\n\n /**\n * The visible label text for the checkbox.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Error message to display. When set, the checkbox enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the checkbox for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Validation message shown when the field is required but empty.\n * @attr required-message\n */\n @property({ attribute: 'required-message' })\n requiredMessage = 'This field is required.';\n\n /**\n * The size of the checkbox.\n * @attr hx-size\n */\n @property({ type: String, attribute: 'hx-size', reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Accessible label for the checkbox when no visible label text is provided.\n * Use when embedding a checkbox in a context where a label element is not practical.\n *\n * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n * `accessible-label` takes precedence when both are set.\n * When set, replaces the visible label as the input's accessible name. Cannot be combined\n * with a visible label — set either `accessible-label` or the `label` slot, not both.\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 checkbox, 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 (\n this.accessibleLabel?.trim() ||\n this.getAttribute('data-aria-label')?.trim() ||\n this.getAttribute('aria-label')?.trim() ||\n ''\n );\n }\n\n /** @internal */\n @query('.checkbox__input')\n private _inputEl: HTMLInputElement | undefined;\n\n /** @internal */\n @state() private _hasErrorSlot = false;\n\n /** @internal */\n @state() private _hasHelpTextSlot = false;\n\n /** @internal */\n @state() private _hasLabelSlot = false;\n\n /**\n * Set by `hx-checkbox-group` to mark this child as group-managed. While\n * truthy, `_updateFormValue()` short-circuits to `setFormValue(null)`\n * regardless of `name`, so the child does NOT participate in form submission\n * — only the group does. This is durable against post-attach mutations to\n * `cb.name` by consumers/frameworks (which would otherwise re-arm\n * `_updateFormValue()` via the `name` setter and cause double-submission).\n * Codex round-3 finding #1.\n *\n * Public via accessor for the group's exclusive use; the underscore prefix\n * marks it as group-internal (not consumer API). The group sets it during\n * `slotchange` and clears it (via the same setter) when a child is removed.\n * @internal\n */\n set _groupedSuppress(value: boolean) {\n if (this.__groupedSuppress === value) return;\n this.__groupedSuppress = value;\n // Re-run form-value sync so the suppression takes effect immediately.\n this._updateFormValue();\n }\n get _groupedSuppress(): boolean {\n return this.__groupedSuppress;\n }\n /** @internal */\n private __groupedSuppress = false;\n\n /**\n * Deferred copy of this.error used inside the live region. Injected after\n * the region is visible (via requestAnimationFrame) so screen readers\n * re-announce the message even if it was set before the region became\n * visible — see WCAG 4.1.3.\n * @internal\n */\n @state() private _announcedError = '';\n\n /** @internal */\n private _hasWarnedLabelConflict = false;\n\n /**\n * Handle for the shared IDREF observer. Installed in `connectedCallback()`\n * so late-mutated `aria-labelledby`/`aria-describedby` and late-inserted\n * IDREF targets are picked up. See `installAriaIdrefMirror()`.\n * @internal\n */\n private _ariaMirror: AriaIdrefMirrorHandle | null = null;\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 _handleHelpTextSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpTextSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /** @internal */\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n // Default slot may include the fallback `${this.label}` text node — count\n // assigned (not flattened) nodes so the slot fallback is not mistaken for\n // user-supplied content. The visible label is independently tracked via\n // the `label` property below.\n this._hasLabelSlot = slot.assignedNodes().length > 0;\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Detect platform support for IDL element references. Cached as reactive\n // state so the render-time branch is consistent across update cycles and\n // tests can stub it deterministically. Codex round-2 finding #2.\n this._supportsIdrefRefs = supportsIdrefElementReferences(this._internals);\n // Seed root-independent semantics so the host carries the checkbox role\n // and reactive ARIA state from the moment of connection — before the\n // first paint. This closes the gap where AT scanning between connect\n // and `firstUpdated()` would see an unannounced surface.\n this._syncHostAriaSemantics();\n // Codex round-1 finding #1: host is the canonical announced surface on\n // modern browsers, so the inner `<input>` is demoted via\n // `aria-hidden + tabindex=-1` and the host owns tab order.\n //\n // Codex round-2 finding #2: on no-IDL-ref browsers the inner `<input>`\n // is the only surface AT can reach, so the host is demoted to\n // `tabindex=-1` and the inner input owns tab order. Without this,\n // `aria-labelledby`/`aria-describedby` on the inner input were inert\n // (the input was `aria-hidden`), leaving the control unnamed.\n // Codex round-14 P2: only claim ownership of `tabindex` when no consumer\n // value is present. Consumers using roving-tabindex toolbar patterns\n // must be able to set `tabindex=\"-1\"` on the host without it being\n // clobbered on every disabled flip. Note we still claim ownership when\n // disabled — the initial value is `-1` to keep the host out of tab order\n // and `updated()` re-asserts the appropriate value when disabled flips.\n if (!this.hasAttribute('tabindex')) {\n this._internalTabindexManaged = true;\n const enabledTabIndex = this._supportsIdrefRefs ? '0' : '-1';\n this.setAttribute('tabindex', this.disabled ? '-1' : enabledTabIndex);\n }\n this.addEventListener('keydown', this._handleHostKeyDown);\n this.addEventListener('click', this._handleHostClick);\n // Install the shared IDREF observer once the host is in a tree. The\n // observer covers consumer mutations to `aria-labelledby`/`-describedby`\n // (or their `data-aria-*` mirrors), late-inserted IDREF targets, and\n // `id` renames in the host's resolved root.\n this._ariaMirror = installAriaIdrefMirror(this, () => {\n this._syncHostAriaSemantics();\n });\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleHostKeyDown);\n this.removeEventListener('click', this._handleHostClick);\n this._ariaMirror?.disconnect();\n this._ariaMirror = null;\n }\n\n /**\n * Host-level keydown handler. Space toggles per ARIA APG checkbox pattern\n * — but only on the modern path where the host is the announced focus\n * surface. On the no-IDL-ref fallback (round-2 finding #2), the inner\n * `<input>` owns focus + native Space activation, so the host stays out\n * of the activation pipeline to avoid double-toggle.\n * @internal\n */\n private _handleHostKeyDown = (e: KeyboardEvent): void => {\n if (this.disabled) return;\n if (!this._supportsIdrefRefs) return;\n // Only handle when the host itself is the focus target — events from\n // slotted/nested controls bubble through here too.\n if (e.target !== this) return;\n if (e.key === ' ') {\n e.preventDefault();\n this._handleChange();\n }\n };\n\n /**\n * Host-level click handler. Routes clicks on the host (e.g. via assistive\n * tech activation) to the change handler — only on the modern path. On the\n * fallback path the inner input is the announced surface and natively\n * receives clicks/AT activation.\n * @internal\n */\n private _handleHostClick = (e: MouseEvent): void => {\n if (this.disabled) return;\n if (!this._supportsIdrefRefs) return;\n // Only respond to clicks that originated on the host itself. Bubbled\n // events from inner shadow elements (which toggle through the existing\n // label/input change handler) are skipped to avoid double-activation.\n const path = e.composedPath();\n if (path[0] !== this) return;\n this._handleChange();\n };\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (\n changedProperties.has('checked') ||\n changedProperties.has('value') ||\n changedProperties.has('name')\n ) {\n this._updateFormValue();\n }\n\n // Codex round-1 finding #1: keep host focusability in sync with disabled\n // state. Disabled custom elements should not be in tab order.\n // Codex round-2 finding #2: on no-IDL-ref browsers the host is demoted\n // to `tabindex=-1` so the inner input remains the announced surface.\n // Codex round-14 P2: only re-assert when the component owns tabindex.\n // Consumer-managed values (e.g. roving-tabindex toolbar with `-1`) must\n // not be overwritten on disabled flips or supports-flag transitions.\n if (\n changedProperties.has('disabled') ||\n (changedProperties as Map<PropertyKey, unknown>).has('_supportsIdrefRefs')\n ) {\n if (this._internalTabindexManaged) {\n if (this.disabled) {\n this.setAttribute('tabindex', '-1');\n } else {\n this.setAttribute('tabindex', this._supportsIdrefRefs ? '0' : '-1');\n }\n }\n }\n\n // Re-resolve element references against the (possibly mutated) shadow\n // tree. `_syncHostAriaSemantics()` is also invoked from `_updateValidity()`\n // and by the IDREF mirror observer, so this keeps property-driven changes\n // current without depending on observer scheduling.\n this._syncHostAriaSemantics();\n // Warn when accessible-label is set alongside a visible label — they are mutually exclusive.\n // Checked unconditionally (not gated on changedProperties) because aria-label is supplied\n // via data-aria-label by mixinDelegatesAria and never appears in changedProperties.\n {\n const hasAccessibleLabel = !!(\n this.accessibleLabel?.trim() ||\n this.getAttribute('data-aria-label')?.trim() ||\n this.getAttribute('aria-label')?.trim()\n );\n const hasVisibleLabel =\n !!this.label ||\n (this.shadowRoot\n ?.querySelector<HTMLSlotElement>('.checkbox__label slot')\n ?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n if (hasAccessibleLabel && hasVisibleLabel && !this._hasWarnedLabelConflict) {\n this._hasWarnedLabelConflict = true;\n devWarn(\n 'hx-checkbox',\n 'accessible-label is set alongside a visible label. Use either accessible-label or the label slot, not both.',\n );\n } else if (!hasAccessibleLabel || !hasVisibleLabel) {\n this._hasWarnedLabelConflict = false;\n }\n }\n // WCAG 4.1.3: Keep _announcedError in sync with the error property.\n // When error changes from one non-empty value to another, clear the live region\n // first then re-inject after a rAF tick so screen readers re-announce the updated\n // message (clearing content before the region is re-populated triggers a new event).\n // When transitioning from empty to non-empty (initial display), set directly so\n // the text is immediately available for synchronous DOM assertions.\n if (changedProperties.has('error')) {\n const previousError = changedProperties.get('error') as string;\n if (previousError && this.error) {\n // Changing from one error message to another: defer to trigger re-announcement.\n this._announcedError = '';\n requestAnimationFrame(() => {\n this._announcedError = this.error;\n });\n } else {\n // Transitioning from empty→error or error→empty: set directly.\n this._announcedError = this.error;\n }\n }\n }\n\n // ─── Form Integration ───\n\n /** Returns the associated form element, if any. */\n override get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** Returns the validation message. */\n override get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Returns the ValidityState object. */\n override get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** @internal */\n _updateValidity(): void {\n if (this.required && !this.checked) {\n // Codex round-17 P2: anchor validity UI to the announced surface. On\n // the modern path the host is the canonical announced/focus surface\n // (the inner input is `aria-hidden + tabindex=-1`), so reportValidity()\n // would otherwise focus a hidden node. On the fallback path the inner\n // input is the announced surface.\n const anchor: HTMLElement | undefined = this._supportsIdrefRefs\n ? this\n : (this._inputEl ?? undefined);\n this._internals.setValidity(\n { valueMissing: true },\n this.error || this.requiredMessage,\n anchor,\n );\n } else {\n this._internals.setValidity({});\n }\n // Sync host ARIA semantics immediately after every setValidity() call so\n // `internals.ariaInvalid` reflects the current `ValidityState` rather than\n // the previous render cycle's snapshot. Codex round-1 finding #6.\n this._syncHostAriaSemantics();\n }\n\n // ─── Form Lifecycle Hooks ───\n\n protected override _onFormReset(): void {\n this.checked = false;\n this.indeterminate = false;\n this._internals.setFormValue(null);\n this._resetInteractionState();\n }\n\n protected override _onFormStateRestore(\n state: File | string | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n this.checked = typeof state === 'string' && state === this.value;\n }\n\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Event Handling ───\n\n /**\n * Writes the checkbox value to ElementInternals' form value. Suppressed when\n * the checkbox is grouped — `hx-checkbox-group` flips `_groupedSuppress` on\n * children so the group is the sole form participant.\n *\n * Codex round-3 finding #1: round-2 used `cb.name = ''` as the suppression\n * signal, but a consumer (or framework binding) that re-set `cb.name = 'foo'`\n * after attach regained form participation through the `name` setter. The\n * `_groupedSuppress` flag is a durable, name-independent kill switch.\n * Stand-alone checkboxes (no parent group) are unaffected.\n * @internal\n */\n private _updateFormValue(): void {\n if (this.__groupedSuppress || !this.name) {\n this._internals.setFormValue(null);\n return;\n }\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n /** @internal */\n private _handleChange(): void {\n if (this.disabled) return;\n\n this.indeterminate = false;\n this.checked = !this.checked;\n\n this._updateFormValue();\n this._handleInteractionInput();\n\n /**\n * Dispatched when the checkbox is toggled.\n * @event hx-change\n */\n this.dispatchEvent(\n new CustomEvent<{ checked: boolean; value: string }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.checked, value: this.value },\n }),\n );\n\n // Codex round-12 P2 (parity with hx-switch / hx-toggle-button): on the\n // modern path the host owns role=\"checkbox\" and tabindex=0; the inner\n // `<input>` is aria-hidden and tabindex=-1. Clicking the surrounding\n // `<label>` still routes activation to the input via native label-forward,\n // which focuses the input. Move focus to the host so the announced\n // surface is also the focus target.\n if (this._supportsIdrefRefs) {\n this.focus();\n }\n }\n\n /**\n * Handles native `change` events from the inner `<input type=checkbox>` on\n * the no-IDL-ref fallback path. On that path the inner input is the\n * announced surface (no `aria-hidden`, `tabindex=0`) and AT activates it\n * directly — pointer/keyboard activation flips `input.checked` natively.\n * We mirror the input's state onto the host, dispatch `hx-change`, and\n * update form participation.\n *\n * Codex round-3 finding #2: round-2 left the inner input click suppressed\n * on both paths, so on no-IDL-ref browsers AT activation could not toggle\n * the control. The fix is to NOT suppress click on the fallback path and\n * to honor the resulting `change` event here.\n * @internal\n */\n private _handleInternalChange = (e: Event): void => {\n e.stopPropagation();\n if (this.disabled) return;\n const input = e.currentTarget as HTMLInputElement;\n // The native input flipped its own state; mirror onto the host. Avoid\n // re-toggling — `_handleChange()` toggles `this.checked = !this.checked`,\n // which would invert the user's actual choice.\n this.indeterminate = false;\n this.checked = input.checked;\n\n this._updateFormValue();\n this._handleInteractionInput();\n\n this.dispatchEvent(\n new CustomEvent<{ checked: boolean; value: string }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.checked, value: this.value },\n }),\n );\n };\n\n /** @internal */\n private _handleKeyDown(e: KeyboardEvent): void {\n if (e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n this._handleChange();\n }\n }\n\n /**\n * Stable inner-input click suppressor for the modern (announced-host) path.\n * Hoisted to a class field so Lit sees a stable listener identity across\n * renders; previously inline arrows were re-allocated each render and\n * caused listener detach/re-attach churn (codex round-4 F3 — performance).\n * @internal\n */\n private _suppressInnerClick = (e: Event): void => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n /**\n * Stable inner-input change suppressor for the modern (announced-host) path.\n * Mirrors the click suppressor above — stable identity across renders so\n * Lit's event-listener cache keeps a single registration (codex round-4 F3).\n * @internal\n */\n private _suppressInnerChange = (e: Event): void => {\n e.stopPropagation();\n };\n\n // ─── Public Methods ───\n\n /**\n * Moves focus to the announced checkbox surface. Codex round-1 finding #1\n * relocated the focus target from the inner `<input>` to the host on\n * modern engines so AT only sees one announced widget. Round-7 finding #3\n * extends that contract to the no-IDL-ref fallback: when the host is\n * demoted (`tabindex=-1`, role/state cleared on `internals`) the inner\n * `<input>` owns the announced semantics and tab order, so programmatic\n * `focus()` must redirect there — otherwise scripted focus and error\n * recovery land on the demoted host on unsupported engines.\n */\n override focus(options?: FocusOptions): void {\n if (this._supportsIdrefRefs) {\n super.focus(options);\n return;\n }\n this._inputEl?.focus(options);\n }\n\n // ─── Host ARIA Semantics (ElementInternals) ───\n\n /**\n * Mirrors checkbox semantics onto the host via ElementInternals so that\n * consumer-supplied `aria-label`, `aria-labelledby`, and `aria-describedby`\n * on `<hx-checkbox>` reach the announced control. Without this, those\n * attributes — intercepted by `mixinDelegatesAria` and stored on the host —\n * would not propagate through to the inner shadow `<input>`.\n *\n * Codex finding (aria-delegation, severity high): the announced semantic\n * node was the inner `<input>` and the host's labelled-by tokens could not\n * cross the shadow boundary.\n * @internal\n */\n private _syncHostAriaSemantics(): void {\n const internals = this._internals;\n const hostLabel = this._effectiveLabel;\n\n // Codex round-2 finding #2: branch on platform support for IDL element\n // references. On modern browsers the host is the canonical announced\n // surface and carries all checkbox semantics via ElementInternals. On\n // older browsers the inner `<input>` is the announced surface, so the\n // host's role/state are cleared and the consumer-supplied IDREFs are\n // mirrored to the inner input via render-time fallback state.\n if (this._supportsIdrefRefs) {\n // ─── Modern path: host is the announced surface ───\n internals.role = 'checkbox';\n internals.ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';\n internals.ariaRequired = this.required ? 'true' : 'false';\n // Drive aria-invalid from validity state, not from visible error content.\n // A required-but-unchecked checkbox sets `valueMissing` via setValidity()\n // but may render no visible error yet — assistive tech still needs to hear\n // the invalid state.\n internals.ariaInvalid = !internals.validity.valid ? 'true' : 'false';\n internals.ariaDisabled = this.disabled ? 'true' : 'false';\n internals.ariaLabel = hostLabel || null;\n\n type InternalsWithRefs = ElementInternals & {\n ariaLabelledByElements: Element[] | null;\n ariaDescribedByElements: Element[] | null;\n };\n const refsInternals = internals as InternalsWithRefs;\n\n const externalLabelTokens = this.getAttribute('data-aria-labelledby');\n const externalDescTokens = this.getAttribute('data-aria-describedby');\n\n const labelEls = resolveIdrefTokens(this, externalLabelTokens);\n // Append the internal label element when the visible label has content\n // and no external labelling source already names the host.\n const internalLabel = this.shadowRoot?.getElementById(this._labelId);\n const hasVisibleLabel = !!this.label || this._hasLabelSlot;\n if (labelEls.length === 0 && !hostLabel && hasVisibleLabel && internalLabel) {\n labelEls.push(internalLabel);\n }\n refsInternals.ariaLabelledByElements = labelEls.length > 0 ? labelEls : null;\n\n const descEls = resolveIdrefTokens(this, externalDescTokens);\n // Codex round-13 P2: while an error is active, drop help text from the\n // described-by chain. The visible help node is suppressed in the render\n // tree, but referenced descriptions are announced even when their nodes\n // are hidden — leaving help in the chain would have AT read stale\n // guidance before the validation error. Otherwise help precedes error so\n // guidance reads before validation feedback when only one is shown.\n const helpEl = this.shadowRoot?.getElementById(this._helpTextId);\n const errorEl = this.shadowRoot?.getElementById(this._errorId);\n const hasError = !!(this.error || this._hasErrorSlot);\n if (helpEl && (this.helpText || this._hasHelpTextSlot) && !hasError) {\n descEls.push(helpEl);\n }\n if (errorEl && hasError) {\n descEls.push(errorEl);\n }\n refsInternals.ariaDescribedByElements = descEls.length > 0 ? descEls : null;\n // Clear fallbacks — IDL refs path is the canonical surface.\n this._fallbackAriaLabelledBy = null;\n this._fallbackAriaDescribedBy = null;\n } else {\n // ─── Fallback path: inner <input> is the announced surface ───\n // Codex round-2 finding #2: in round-1 we set host role/state via\n // ElementInternals AND mirrored aria-labelledby/describedby onto the\n // inner input. But the inner input was kept `aria-hidden`, making the\n // mirrored attributes inert — the control had no accessible name on\n // older browsers. The fix is to demote the host (clear its role/state\n // on internals so AT does not double-announce) and let the inner native\n // `<input type=checkbox>` be the announced surface, with consumer\n // IDREFs mirrored as real `aria-*` attributes that resolve through the\n // shadow root for shadow-internal IDs (cross-boundary IDREFs remain\n // unreachable on these engines — same baseline as the pre-fix code).\n internals.role = null;\n internals.ariaChecked = null;\n internals.ariaRequired = null;\n internals.ariaInvalid = null;\n internals.ariaDisabled = null;\n internals.ariaLabel = null;\n\n const externalLabelTokens = this.getAttribute('data-aria-labelledby');\n const externalDescTokens = this.getAttribute('data-aria-describedby');\n this._fallbackAriaLabelledBy = externalLabelTokens || null;\n this._fallbackAriaDescribedBy = externalDescTokens || null;\n }\n }\n\n /**\n * Fallback `aria-labelledby` token list applied to the inner input on\n * browsers that lack IDL element references. Tracked as a reactive state\n * so the value flows through the next `render()` call.\n * @internal\n */\n @state() private _fallbackAriaLabelledBy: string | null = null;\n\n /**\n * Fallback `aria-describedby` token list applied to the inner input on\n * browsers that lack IDL element references.\n * @internal\n */\n @state() private _fallbackAriaDescribedBy: string | null = null;\n\n /**\n * Whether the platform supports IDL element references on `ElementInternals`.\n * Drives the render-time branch between the modern path (host is the\n * announced surface, inner input is `aria-hidden + tabindex=-1`) and the\n * fallback path (inner input is the announced surface, host is demoted).\n *\n * Round-2 finding #2: the previous fallback mirrored `aria-labelledby` /\n * `aria-describedby` onto an `aria-hidden` inner input, leaving older\n * browsers with no accessible name. The fallback now keeps the inner input\n * in the a11y tree so AT can name and activate it natively.\n * @internal\n */\n @state() private _supportsIdrefRefs = true;\n\n /**\n * Tracks whether the host's `tabindex` is managed by the component itself\n * (vs. set explicitly by a consumer). Codex round-14 P2: a consumer-supplied\n * `tabindex` (e.g. roving-tabindex toolbar pattern with `tabindex=\"-1\"`)\n * must survive disabled flips and re-renders. Only re-assert tabindex in\n * `updated()` when the component originally claimed it.\n * @internal\n */\n private _internalTabindexManaged = false;\n\n // ─── Render ───\n\n // P2-05: monotonic counter — collision-free and deterministic\n /** @internal */\n private _id = _nextCheckboxId();\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\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n const hasHelpText = !!this.helpText || this._hasHelpTextSlot;\n const hasVisibleLabel = !!this.label || this._hasLabelSlot;\n // Drive aria-invalid from the same validity source used by setValidity()\n // so a required-unchecked checkbox is announced as invalid even before any\n // visible error content has rendered.\n const isInvalid = hasError || (this.required && !this.checked);\n\n const containerClasses = {\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--error': hasError,\n 'checkbox--disabled': this.disabled,\n 'checkbox--required': this.required,\n 'checkbox--sm': this.size === 'sm',\n 'checkbox--md': this.size === 'md',\n 'checkbox--lg': this.size === 'lg',\n };\n\n // describedBy chain: while an error is active, the visible help text is\n // suppressed in the rendered tree, so we must also drop it from the\n // described-by chain — referenced descriptions are announced even when\n // their nodes are hidden, and announcing stale guidance before the\n // validation error confuses screen-reader users (codex round-13 P2).\n // Otherwise help-text precedes error in the chain so guidance is read\n // before validation feedback when only one is shown.\n const describedBy =\n [hasError ? null : hasHelpText ? this._helpTextId : null, hasError ? this._errorId : null]\n .filter(Boolean)\n .join(' ') || undefined;\n\n const hostAriaLabel = this._effectiveLabel || undefined;\n // Only point the inner input at `_labelId` when there is actual visible\n // label content; otherwise the input would reference an empty container.\n const useInternalLabelId = !hostAriaLabel && hasVisibleLabel;\n\n // Codex round-1 finding #7: on no-IDL-ref browsers, mirror consumer\n // tokens (stored as `data-aria-*`) onto the inner input so cross-shadow\n // labelling still resolves for shadow-internal IDs. The render fallbacks\n // are tracked as reactive state from `_syncHostAriaSemantics()`.\n const fallbackLabelledBy = this._fallbackAriaLabelledBy;\n const fallbackDescribedBy = this._fallbackAriaDescribedBy;\n\n // Merge internal describedBy chain with consumer fallback tokens.\n const innerDescribedBy =\n [describedBy ?? null, fallbackDescribedBy].filter(Boolean).join(' ') || undefined;\n // For labelledby, prefer consumer fallback tokens; otherwise keep the\n // internal label association.\n const innerLabelledBy = fallbackLabelledBy ?? (useInternalLabelId ? this._labelId : undefined);\n\n // Codex round-2 finding #2: branch the inner input on platform support.\n // Modern path — host is announced, inner input is `aria-hidden + tabindex=-1`.\n // Fallback path — inner input is announced (NO aria-hidden, tabindex=0)\n // so consumer-mirrored aria-labelledby/describedby actually resolve to a\n // visible accessibility-tree node. The inner input keeps its own click\n // suppressor because the visible activation surface is the surrounding\n // `<label>`; the input's native click activation is wired through that.\n const innerIsAnnounced = !this._supportsIdrefRefs;\n const innerTabIndex = innerIsAnnounced && !this.disabled ? '0' : '-1';\n\n // Codex round-3 finding #2: branch the inner input event model on\n // platform support.\n //\n // Modern path (`innerIsAnnounced === false`): the inner input is\n // `aria-hidden + tabindex=-1` — AT cannot reach it. Pointer clicks on the\n // inner input bubble through the surrounding `<label>` whose `@click`\n // handler runs `_handleChange()`. The inner click handler suppresses the\n // native click so the label's click is the sole activation pipeline,\n // avoiding double-toggle. Native `change` is also swallowed.\n //\n // Fallback path (`innerIsAnnounced === true`): the inner input IS the\n // announced surface (no `aria-hidden`, `tabindex=0`). AT activation lands\n // directly on the input and must produce a real toggle. We do NOT\n // suppress click; instead we wire `@change=${_handleInternalChange}` so\n // the host mirrors the input's state, fires `hx-change`, and updates\n // form participation. The label's `@click` is a no-op on this path —\n // pointer clicks on the label bubble to the input which toggles natively.\n // Codex round-4 F3 (performance): handlers are class-field arrows with\n // stable identity, so Lit's event-listener cache keeps a single\n // registration across re-renders instead of detach/re-attach churn.\n const innerClickHandler = innerIsAnnounced ? undefined : this._suppressInnerClick;\n const innerChangeHandler = innerIsAnnounced\n ? this._handleInternalChange\n : this._suppressInnerChange;\n const labelClickHandler = innerIsAnnounced ? undefined : this._handleChange;\n // On the fallback path the native input owns Space/Enter activation; its\n // native `change` event flows through `_handleInternalChange`. Wiring the\n // host-side `_handleKeyDown` here would double-toggle (native flips +\n // _handleChange flips again). On the modern path the input is `aria-hidden\n // + tabindex=-1` so this handler is defensive only.\n const innerKeyDownHandler = innerIsAnnounced ? undefined : this._handleKeyDown;\n\n return html`\n <div class=${classMap(containerClasses)}>\n <label part=\"control\" class=\"checkbox__control\" @click=${ifDefined(labelClickHandler)}>\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n id=${this._id}\n tabindex=${innerTabIndex}\n .checked=${live(this.checked)}\n .indeterminate=${live(this.indeterminate)}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name || undefined)}\n .value=${this.value}\n aria-checked=${this.indeterminate ? 'mixed' : nothing}\n aria-invalid=${isInvalid ? 'true' : nothing}\n aria-describedby=${ifDefined(innerDescribedBy)}\n aria-label=${ifDefined(hostAriaLabel)}\n aria-labelledby=${ifDefined(innerLabelledBy)}\n aria-hidden=${innerIsAnnounced ? nothing : 'true'}\n @keydown=${ifDefined(innerKeyDownHandler)}\n @click=${ifDefined(innerClickHandler)}\n @change=${innerChangeHandler}\n />\n\n <span part=\"checkbox\" class=\"checkbox__box\">\n <svg\n part=\"checkmark\"\n class=\"checkbox__icon checkbox__icon--check\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <polyline points=\"3.5 8 6.5 11 12.5 5\"></polyline>\n </svg>\n <svg\n class=\"checkbox__icon checkbox__icon--indeterminate\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <line x1=\"4\" y1=\"8\" x2=\"12\" y2=\"8\"></line>\n </svg>\n </span>\n\n <span part=\"label\" class=\"checkbox__label\" id=${this._labelId}>\n <slot @slotchange=${this._handleLabelSlotChange}>${this.label}</slot>\n ${this.required\n ? html`<span class=\"checkbox__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </span>\n </label>\n\n <!--\n P0-01: wrapper div always owns _errorId so aria-describedby works\n regardless of whether error content comes from the .error property\n or the named slot. role=\"status\" replaces aria-live=\"polite\" to\n avoid conflicting live-region semantics.\n -->\n <div\n part=\"error\"\n class=\"checkbox__error\"\n id=${this._errorId}\n role=\"status\"\n ?hidden=${!hasError}\n >\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${this._announcedError}\n </slot>\n </div>\n\n <!--\n Persistent help-text container. Rendered whenever the property OR\n the slot has content, hidden when an error is present so guidance\n does not compete with validation feedback. Always present in the\n shadow tree so the host's aria-describedby chain remains stable.\n -->\n <div\n part=\"help-text\"\n class=\"checkbox__help-text\"\n id=${this._helpTextId}\n ?hidden=${!hasHelpText || hasError}\n >\n <slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}\n >${this.helpText}</slot\n >\n </div>\n </div>\n `;\n }\n}\n\n/** Canonical type alias for the hx-checkbox component. */\nexport type HxCheckbox = HelixCheckbox;\n\n/**\n * Per-component event map for type-safe addEventListener on hx-checkbox.\n * The `hx-change` detail always includes both `checked` and `value` for this component.\n */\nexport interface HxCheckboxEventMap {\n 'hx-change': CustomEvent<{ checked: boolean; value: string }>;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-checkbox': HelixCheckbox;\n }\n /**\n * Global hx-change event type. The detail shape is a union because hx-change is dispatched\n * by multiple components: form-field components (value only) and toggle components\n * (checked + value). Use per-component EventMap types (e.g. HxCheckboxEventMap) for\n * narrowed addEventListener calls.\n */\n interface HTMLElementEventMap {\n 'hx-change': CustomEvent<{ value: string } | { checked: boolean; value: string }>;\n }\n}\n"],"names":["helixCheckboxStyles","css","_nextCheckboxId","createIdCounter","HelixCheckbox","mixinDelegatesAria","FormMixin","HelixElement","input","_a","_b","_c","value","slot","supportsIdrefElementReferences","enabledTabIndex","installAriaIdrefMirror","changedProperties","hasAccessibleLabel","hasVisibleLabel","_e","_d","anchor","state","_mode","disabled","options","internals","hostLabel","refsInternals","externalLabelTokens","externalDescTokens","labelEls","resolveIdrefTokens","internalLabel","descEls","helpEl","errorEl","hasError","hasHelpText","isInvalid","containerClasses","describedBy","hostAriaLabel","useInternalLabelId","fallbackLabelledBy","fallbackDescribedBy","innerDescribedBy","innerLabelledBy","innerIsAnnounced","innerTabIndex","innerClickHandler","innerChangeHandler","labelClickHandler","innerKeyDownHandler","html","classMap","ifDefined","live","nothing","forcedColorsField","__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;A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"}
|