@helixui/library 2.1.2-next.51 → 2.1.2-next.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +522 -466
- package/dist/base/helix-element.d.ts.map +1 -1
- package/dist/components/hx-accordion/hx-accordion-item.d.ts +0 -2
- 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/hx-accordion.styles.d.ts.map +1 -1
- package/dist/components/hx-accordion/index.js +1 -1
- package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
- package/dist/components/hx-alert/index.js +1 -1
- package/dist/components/hx-badge/hx-badge.styles.d.ts.map +1 -1
- package/dist/components/hx-badge/index.js +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 +0 -7
- 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 +9 -9
- 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 +1 -4
- 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-card/hx-card.d.ts +16 -0
- package/dist/components/hx-card/hx-card.d.ts.map +1 -1
- package/dist/components/hx-card/hx-card.styles.d.ts.map +1 -1
- package/dist/components/hx-card/index.js +1 -1
- package/dist/components/hx-carousel/hx-carousel.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 +8 -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 +6 -8
- 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.styles.d.ts.map +1 -1
- package/dist/components/hx-clinical-status/index.js +1 -1
- package/dist/components/hx-code-snippet/hx-code-snippet.styles.d.ts.map +1 -1
- package/dist/components/hx-code-snippet/index.js +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 +20 -14
- 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.styles.d.ts.map +1 -1
- package/dist/components/hx-copy-button/index.js +1 -1
- package/dist/components/hx-counter/hx-counter.styles.d.ts.map +1 -1
- package/dist/components/hx-counter/index.js +1 -1
- package/dist/components/hx-data-table/hx-data-table.d.ts +20 -0
- package/dist/components/hx-data-table/hx-data-table.d.ts.map +1 -1
- package/dist/components/hx-data-table/hx-data-table.styles.d.ts.map +1 -1
- package/dist/components/hx-data-table/index.js +1 -1
- package/dist/components/hx-date-picker/hx-date-picker.d.ts +6 -17
- package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
- package/dist/components/hx-date-picker/index.js +1 -1
- package/dist/components/hx-dialog/hx-dialog.d.ts +7 -0
- package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
- package/dist/components/hx-dialog/hx-dialog.styles.d.ts.map +1 -1
- package/dist/components/hx-dialog/index.js +1 -1
- package/dist/components/hx-divider/hx-divider.styles.d.ts.map +1 -1
- package/dist/components/hx-divider/index.js +1 -1
- package/dist/components/hx-drawer/hx-drawer.d.ts +7 -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 +8 -5
- 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.map +1 -1
- package/dist/components/hx-field/hx-field.styles.d.ts.map +1 -1
- package/dist/components/hx-field/index.js +1 -1
- package/dist/components/hx-field-label/hx-field-label.styles.d.ts.map +1 -1
- package/dist/components/hx-field-label/index.js +1 -1
- package/dist/components/hx-file-upload/hx-file-upload.d.ts +6 -14
- package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
- package/dist/components/hx-file-upload/index.js +1 -1
- package/dist/components/hx-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.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 +10 -14
- 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-image/hx-image.styles.d.ts.map +1 -1
- package/dist/components/hx-image/index.js +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-list/index.js +1 -1
- package/dist/components/hx-menu/hx-menu-divider.styles.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.styles.d.ts.map +1 -1
- package/dist/components/hx-menu/index.js +1 -1
- package/dist/components/hx-meter/hx-meter.d.ts +0 -2
- package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
- package/dist/components/hx-meter/hx-meter.styles.d.ts.map +1 -1
- package/dist/components/hx-meter/index.js +1 -1
- package/dist/components/hx-nav/hx-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-nav/index.js +1 -1
- package/dist/components/hx-number-input/hx-number-input.d.ts +6 -8
- 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.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-patient-banner/hx-patient-banner.styles.d.ts.map +1 -1
- package/dist/components/hx-patient-banner/index.js +1 -1
- package/dist/components/hx-phi-field/index.js +1 -1
- package/dist/components/hx-popover/hx-popover.d.ts +1 -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.styles.d.ts.map +1 -1
- package/dist/components/hx-popup/index.js +1 -1
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts +0 -2
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
- package/dist/components/hx-progress-bar/index.js +1 -1
- package/dist/components/hx-radio-group/hx-radio-group.d.ts +6 -11
- 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.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 +6 -11
- 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 +8 -0
- package/dist/components/hx-select/hx-select.d.ts.map +1 -1
- package/dist/components/hx-select/hx-select.styles.d.ts.map +1 -1
- package/dist/components/hx-select/index.js +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.d.ts +0 -3
- 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.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/index.js +1 -1
- package/dist/components/hx-skeleton/hx-skeleton.styles.d.ts.map +1 -1
- package/dist/components/hx-skeleton/index.js +1 -1
- package/dist/components/hx-slider/hx-slider.d.ts +9 -9
- package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
- package/dist/components/hx-slider/index.js +1 -1
- package/dist/components/hx-spinner/hx-spinner.styles.d.ts.map +1 -1
- package/dist/components/hx-spinner/index.js +1 -1
- 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-split-panel/hx-split-panel.styles.d.ts.map +1 -1
- package/dist/components/hx-split-panel/index.js +1 -1
- package/dist/components/hx-stat/hx-stat.d.ts +2 -2
- package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
- package/dist/components/hx-status-indicator/hx-status-indicator.styles.d.ts.map +1 -1
- package/dist/components/hx-status-indicator/index.js +1 -1
- package/dist/components/hx-steps/hx-step.styles.d.ts.map +1 -1
- package/dist/components/hx-steps/index.js +1 -1
- package/dist/components/hx-structured-list/hx-structured-list.styles.d.ts.map +1 -1
- package/dist/components/hx-structured-list/index.js +1 -1
- package/dist/components/hx-switch/hx-switch.d.ts +14 -17
- 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-table/hx-table.styles.d.ts.map +1 -1
- package/dist/components/hx-table/index.js +1 -1
- package/dist/components/hx-tabs/hx-tab-panel.styles.d.ts.map +1 -1
- package/dist/components/hx-tabs/hx-tab.styles.d.ts.map +1 -1
- package/dist/components/hx-tabs/hx-tabs.d.ts +6 -0
- package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
- package/dist/components/hx-tabs/hx-tabs.styles.d.ts.map +1 -1
- package/dist/components/hx-tabs/index.js +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 +11 -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 +17 -9
- package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
- package/dist/components/hx-textarea/hx-textarea.styles.d.ts.map +1 -1
- package/dist/components/hx-textarea/index.js +1 -1
- package/dist/components/hx-time-picker/hx-time-picker.d.ts +6 -17
- package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
- package/dist/components/hx-time-picker/index.js +1 -1
- package/dist/components/hx-toast/hx-toast.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 +6 -13
- 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.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.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.styles.d.ts.map +1 -1
- package/dist/components/hx-tree-view/index.js +1 -1
- package/dist/css/helix-all.css +1269 -11
- package/dist/css/helix-core.css +137 -1
- package/dist/css/helix-data.css +69 -0
- package/dist/css/helix-feedback.css +77 -0
- package/dist/css/helix-forms.css +627 -3
- package/dist/css/helix-layout.css +22 -0
- package/dist/css/helix-media.css +24 -0
- package/dist/css/helix-navigation.css +110 -0
- package/dist/css/helix-overlay.css +87 -0
- package/dist/css/helix-utility.css +66 -0
- package/dist/css/hx-accordion.css +8 -0
- package/dist/css/hx-alert.css +21 -0
- package/dist/css/hx-badge.css +16 -0
- package/dist/css/hx-banner.css +17 -0
- package/dist/css/hx-button.css +4 -1
- package/dist/css/hx-card.css +12 -0
- package/dist/css/hx-carousel.css +24 -0
- package/dist/css/hx-checkbox-group.css +32 -0
- package/dist/css/hx-checkbox.css +66 -0
- package/dist/css/hx-clinical-status.css +23 -0
- package/dist/css/hx-code-snippet.css +22 -0
- package/dist/css/hx-color-picker.css +1 -1
- package/dist/css/hx-combobox.css +1 -1
- package/dist/css/hx-copy-button.css +28 -0
- package/dist/css/hx-counter.css +3 -0
- package/dist/css/hx-data-table.css +23 -0
- package/dist/css/hx-dialog.css +21 -0
- package/dist/css/hx-divider.css +8 -0
- package/dist/css/hx-drawer.css +21 -0
- package/dist/css/hx-dropdown.css +9 -0
- package/dist/css/hx-field-label.css +16 -0
- package/dist/css/hx-field.css +36 -0
- package/dist/css/hx-help-text.css +20 -0
- package/dist/css/hx-icon-button.css +27 -0
- package/dist/css/hx-icon.css +8 -0
- package/dist/css/hx-image.css +8 -0
- package/dist/css/hx-link.css +18 -0
- package/dist/css/hx-menu.css +9 -0
- package/dist/css/hx-meter.css +13 -0
- package/dist/css/hx-nav.css +16 -0
- package/dist/css/hx-number-input.css +78 -0
- package/dist/css/hx-overflow-menu.css +31 -0
- package/dist/css/hx-patient-banner.css +20 -0
- package/dist/css/hx-phi-field.css +1 -1
- package/dist/css/hx-popover.css +12 -0
- package/dist/css/hx-popup.css +12 -0
- package/dist/css/hx-radio-group.css +32 -0
- package/dist/css/hx-rating.css +39 -0
- package/dist/css/hx-select.css +82 -0
- package/dist/css/hx-side-nav.css +21 -0
- package/dist/css/hx-skeleton.css +12 -0
- package/dist/css/hx-spinner.css +12 -0
- package/dist/css/hx-split-button.css +35 -0
- package/dist/css/hx-split-panel.css +14 -0
- package/dist/css/hx-status-indicator.css +13 -0
- package/dist/css/hx-structured-list.css +16 -0
- package/dist/css/hx-switch.css +62 -0
- package/dist/css/hx-table.css +8 -0
- package/dist/css/hx-tabs.css +12 -0
- package/dist/css/hx-tag.css +12 -0
- package/dist/css/hx-text-input.css +62 -0
- package/dist/css/hx-textarea.css +62 -0
- package/dist/css/hx-toast.css +13 -0
- package/dist/css/hx-toggle-button.css +38 -1
- package/dist/css/hx-tooltip.css +12 -0
- package/dist/css/hx-top-nav.css +21 -0
- package/dist/css/index.css +1 -1
- package/dist/css/manifest.json +5 -3
- package/dist/index.js +67 -67
- package/dist/mixins/aria-delegation.d.ts +3 -1
- package/dist/mixins/aria-delegation.d.ts.map +1 -1
- package/dist/mixins/index.d.ts +1 -1
- package/dist/mixins/index.d.ts.map +1 -1
- package/dist/shared/{aria-delegation-CBP9eQ0M.js → aria-delegation-Doq6RRUy.js} +6 -6
- package/dist/shared/aria-delegation-Doq6RRUy.js.map +1 -0
- package/dist/shared/{helix-element-CZvaIEQP.js → helix-element-BJh1Ffvi.js} +18 -21
- package/dist/shared/{helix-element-CZvaIEQP.js.map → helix-element-BJh1Ffvi.js.map} +1 -1
- package/dist/shared/{hx-accordion-CpfO0YQo.js → hx-accordion-SlwR2C6S.js} +109 -62
- package/dist/shared/hx-accordion-SlwR2C6S.js.map +1 -0
- package/dist/shared/{hx-alert-CHOjTBds.js → hx-alert-DdlSyJGk.js} +22 -1
- package/dist/shared/hx-alert-DdlSyJGk.js.map +1 -0
- package/dist/shared/{hx-badge-RPzd-t5l.js → hx-badge-B_PzGlUo.js} +17 -1
- package/dist/shared/hx-badge-B_PzGlUo.js.map +1 -0
- package/dist/shared/{hx-banner-B-WEDiq7.js → hx-banner-D8AxkCfc.js} +30 -13
- package/dist/shared/hx-banner-D8AxkCfc.js.map +1 -0
- package/dist/shared/{hx-breadcrumb-item-jLAKK038.js → hx-breadcrumb-item-BCUIvpYX.js} +32 -15
- package/dist/shared/hx-breadcrumb-item-BCUIvpYX.js.map +1 -0
- package/dist/shared/{hx-button-DoN8jjQT.js → hx-button-BzqsDHmZ.js} +15 -16
- package/dist/shared/hx-button-BzqsDHmZ.js.map +1 -0
- package/dist/shared/{hx-button-group-BXlMQTt_.js → hx-button-group-a5Pb_9fU.js} +8 -9
- package/dist/shared/{hx-button-group-BXlMQTt_.js.map → hx-button-group-a5Pb_9fU.js.map} +1 -1
- package/dist/shared/{hx-card-BgXZXDuc.js → hx-card-DYlaxQy0.js} +59 -33
- package/dist/shared/hx-card-DYlaxQy0.js.map +1 -0
- package/dist/shared/{hx-carousel-item-Dwt9Pphz.js → hx-carousel-item-KQfCekKF.js} +45 -19
- package/dist/shared/hx-carousel-item-KQfCekKF.js.map +1 -0
- package/dist/shared/{hx-checkbox-C82GjRXe.js → hx-checkbox-DyDbR1B9.js} +97 -31
- package/dist/shared/hx-checkbox-DyDbR1B9.js.map +1 -0
- package/dist/shared/{hx-checkbox-group-DThZeN5d.js → hx-checkbox-group-C8TaFqy0.js} +75 -40
- package/dist/shared/hx-checkbox-group-C8TaFqy0.js.map +1 -0
- package/dist/shared/{hx-clinical-status-BjtT5c0M.js → hx-clinical-status-dDyk5oj1.js} +53 -30
- package/dist/shared/hx-clinical-status-dDyk5oj1.js.map +1 -0
- package/dist/shared/{hx-code-snippet-DcVENSuC.js → hx-code-snippet-DasrRF9k.js} +27 -5
- package/dist/shared/hx-code-snippet-DasrRF9k.js.map +1 -0
- package/dist/shared/{hx-color-picker-C6EIuS9t.js → hx-color-picker-zv6wtok4.js} +81 -81
- package/dist/shared/hx-color-picker-zv6wtok4.js.map +1 -0
- package/dist/shared/{hx-combobox-BJ4lQocO.js → hx-combobox-C-DVLFpu.js} +36 -45
- package/dist/shared/hx-combobox-C-DVLFpu.js.map +1 -0
- package/dist/shared/{hx-copy-button-BoM0WsMd.js → hx-copy-button-DikpbhWY.js} +54 -26
- package/dist/shared/hx-copy-button-DikpbhWY.js.map +1 -0
- package/dist/shared/{hx-counter-B5NgKlw4.js → hx-counter-_m4cq45V.js} +21 -18
- package/dist/shared/hx-counter-_m4cq45V.js.map +1 -0
- package/dist/shared/{hx-data-table-D5Ne-goy.js → hx-data-table-609C-e9w.js} +215 -150
- package/dist/shared/hx-data-table-609C-e9w.js.map +1 -0
- package/dist/shared/{hx-date-picker-Cd3I3WkX.js → hx-date-picker-Bh8410Sf.js} +26 -35
- package/dist/shared/hx-date-picker-Bh8410Sf.js.map +1 -0
- package/dist/shared/{hx-dialog-D4ubstxx.js → hx-dialog-D_DeqcNS.js} +46 -25
- package/dist/shared/hx-dialog-D_DeqcNS.js.map +1 -0
- package/dist/shared/{hx-divider-BBtOLHRP.js → hx-divider-lfOMElo2.js} +18 -10
- package/dist/shared/hx-divider-lfOMElo2.js.map +1 -0
- package/dist/shared/{hx-drawer--WDLuWtS.js → hx-drawer-NleCbKuN.js} +95 -60
- package/dist/shared/hx-drawer-NleCbKuN.js.map +1 -0
- package/dist/shared/{hx-dropdown-n5-XSmiV.js → hx-dropdown-CA9WYdhm.js} +37 -27
- package/dist/shared/hx-dropdown-CA9WYdhm.js.map +1 -0
- package/dist/shared/{hx-field-CwT9tki1.js → hx-field-Duiib9Bj.js} +48 -12
- package/dist/shared/hx-field-Duiib9Bj.js.map +1 -0
- package/dist/shared/{hx-field-label-CcOK9VU3.js → hx-field-label-Dud-psvE.js} +37 -21
- package/dist/shared/hx-field-label-Dud-psvE.js.map +1 -0
- package/dist/shared/{hx-file-upload-Di_vpQaG.js → hx-file-upload-CmCCAvej.js} +24 -33
- package/dist/shared/hx-file-upload-CmCCAvej.js.map +1 -0
- package/dist/shared/{hx-help-text-Bmb80bP4.js → hx-help-text-DARi-Pfp.js} +37 -17
- package/dist/shared/hx-help-text-DARi-Pfp.js.map +1 -0
- package/dist/shared/{hx-icon-button-CJuy9xbw.js → hx-icon-button-BcZtVVtH.js} +58 -41
- package/dist/shared/hx-icon-button-BcZtVVtH.js.map +1 -0
- package/dist/shared/{hx-icon-BKHs3OLu.js → hx-icon-jWcGmn66.js} +9 -1
- package/dist/shared/hx-icon-jWcGmn66.js.map +1 -0
- package/dist/shared/{hx-image-ztiXumZB.js → hx-image-DOjPp-K5.js} +28 -20
- package/dist/shared/hx-image-DOjPp-K5.js.map +1 -0
- package/dist/shared/{hx-link-CN7AvGOW.js → hx-link-DCBct0f4.js} +44 -26
- package/dist/shared/hx-link-DCBct0f4.js.map +1 -0
- package/dist/shared/{hx-list-CnDK30Yk.js → hx-list-Dnei26t4.js} +16 -16
- package/dist/shared/{hx-list-CnDK30Yk.js.map → hx-list-Dnei26t4.js.map} +1 -1
- package/dist/shared/{hx-menu-divider-DRT8yHRZ.js → hx-menu-divider-DVWER7iT.js} +93 -50
- package/dist/shared/hx-menu-divider-DVWER7iT.js.map +1 -0
- package/dist/shared/{hx-meter-BcVC9yrt.js → hx-meter-ChZdWNF2.js} +42 -28
- package/dist/shared/hx-meter-ChZdWNF2.js.map +1 -0
- package/dist/shared/{hx-nav-l0Rp7WPW.js → hx-nav-CHX1JOWB.js} +28 -12
- package/dist/shared/hx-nav-CHX1JOWB.js.map +1 -0
- package/dist/shared/{hx-nav-item-CJN4VDrf.js → hx-nav-item-CRAESq9s.js} +56 -22
- package/dist/shared/hx-nav-item-CRAESq9s.js.map +1 -0
- package/dist/shared/{hx-number-input-0Waw7Z7u.js → hx-number-input-Cm682AVP.js} +154 -72
- package/dist/shared/hx-number-input-Cm682AVP.js.map +1 -0
- package/dist/shared/{hx-overflow-menu-DElwFSCd.js → hx-overflow-menu-BDl6QfUD.js} +52 -19
- package/dist/shared/hx-overflow-menu-BDl6QfUD.js.map +1 -0
- package/dist/shared/{hx-patient-banner-BKiN7nIE.js → hx-patient-banner-B4IjHeTx.js} +54 -34
- package/dist/shared/hx-patient-banner-B4IjHeTx.js.map +1 -0
- package/dist/shared/{hx-phi-field-Df06K0J3.js → hx-phi-field-DD1qcBSO.js} +2 -2
- package/dist/shared/hx-phi-field-DD1qcBSO.js.map +1 -0
- package/dist/shared/{hx-popover-CydNuVkT.js → hx-popover-ZGRFgBbx.js} +29 -15
- package/dist/shared/hx-popover-ZGRFgBbx.js.map +1 -0
- package/dist/shared/{hx-popup-DbzezTOd.js → hx-popup-Cc4qz89i.js} +24 -12
- package/dist/shared/hx-popup-Cc4qz89i.js.map +1 -0
- package/dist/shared/{hx-progress-bar-Cm0VihTN.js → hx-progress-bar-BY1uE6bN.js} +17 -16
- package/dist/shared/hx-progress-bar-BY1uE6bN.js.map +1 -0
- package/dist/shared/{hx-radio-f8c5ggHG.js → hx-radio-YEEsbUPN.js} +139 -54
- package/dist/shared/hx-radio-YEEsbUPN.js.map +1 -0
- package/dist/shared/{hx-rating-qRJZXskm.js → hx-rating-DjUJTT0M.js} +54 -17
- package/dist/shared/hx-rating-DjUJTT0M.js.map +1 -0
- package/dist/shared/{hx-select-CgcgsHU5.js → hx-select-DZ7wfcJx.js} +119 -37
- package/dist/shared/hx-select-DZ7wfcJx.js.map +1 -0
- package/dist/shared/{hx-skeleton-tiYvKO-t.js → hx-skeleton-aqa-gr1S.js} +28 -16
- package/dist/shared/hx-skeleton-aqa-gr1S.js.map +1 -0
- package/dist/shared/{hx-slider-BvXtvxmN.js → hx-slider-DAilFrR_.js} +28 -25
- package/dist/shared/hx-slider-DAilFrR_.js.map +1 -0
- package/dist/shared/{hx-spinner-D6nzuGmj.js → hx-spinner-Dw3cRY-9.js} +26 -14
- package/dist/shared/hx-spinner-Dw3cRY-9.js.map +1 -0
- package/dist/shared/{hx-split-button-CPndTJlC.js → hx-split-button-Dk-zMDDo.js} +51 -14
- package/dist/shared/hx-split-button-Dk-zMDDo.js.map +1 -0
- package/dist/shared/{hx-split-panel-Dx72NaET.js → hx-split-panel-Kdp4BiLz.js} +15 -1
- package/dist/shared/hx-split-panel-Kdp4BiLz.js.map +1 -0
- package/dist/shared/hx-stat-DKlyBL_K.js.map +1 -1
- package/dist/shared/{hx-status-indicator-ClWpK6zz.js → hx-status-indicator-DWSM0Ctm.js} +30 -17
- package/dist/shared/hx-status-indicator-DWSM0Ctm.js.map +1 -0
- package/dist/shared/{hx-step-C2Jk4mHa.js → hx-step-CuoOvcI8.js} +52 -18
- package/dist/shared/{hx-step-C2Jk4mHa.js.map → hx-step-CuoOvcI8.js.map} +1 -1
- package/dist/shared/{hx-structured-list-DKlrv7kS.js → hx-structured-list-CQCD7bCT.js} +21 -5
- package/dist/shared/hx-structured-list-CQCD7bCT.js.map +1 -0
- package/dist/shared/{hx-switch-BzMN37PV.js → hx-switch-BdxKN9WM.js} +89 -32
- package/dist/shared/hx-switch-BdxKN9WM.js.map +1 -0
- package/dist/shared/{hx-tab-panel-J58zOSjq.js → hx-tab-panel-CwClQoWP.js} +141 -88
- package/dist/shared/hx-tab-panel-CwClQoWP.js.map +1 -0
- package/dist/shared/{hx-tag-F0ZcYj9b.js → hx-tag-BL5qJJCN.js} +20 -8
- package/dist/shared/hx-tag-BL5qJJCN.js.map +1 -0
- package/dist/shared/{hx-td-CNCvzBwY.js → hx-td-CzSvVKdp.js} +21 -13
- package/dist/shared/hx-td-CzSvVKdp.js.map +1 -0
- package/dist/shared/{hx-text-input-Zuodg9s_.js → hx-text-input-BfMrvN9N.js} +110 -48
- package/dist/shared/hx-text-input-BfMrvN9N.js.map +1 -0
- package/dist/shared/{hx-textarea-BfSJJtA1.js → hx-textarea-C-i_Vam6.js} +108 -47
- package/dist/shared/hx-textarea-C-i_Vam6.js.map +1 -0
- package/dist/shared/{hx-time-picker-CZvmihHD.js → hx-time-picker-MZyLQPW9.js} +50 -61
- package/dist/shared/hx-time-picker-MZyLQPW9.js.map +1 -0
- package/dist/shared/{hx-toggle-button-BZUQUULm.js → hx-toggle-button-ClyNYNVI.js} +68 -37
- package/dist/shared/hx-toggle-button-ClyNYNVI.js.map +1 -0
- package/dist/shared/{hx-tooltip-Ny4i1Idj.js → hx-tooltip-ByWT987R.js} +33 -19
- package/dist/shared/hx-tooltip-ByWT987R.js.map +1 -0
- package/dist/shared/{hx-top-nav-CC4FW2Hp.js → hx-top-nav-k7hY78kt.js} +35 -14
- package/dist/shared/hx-top-nav-k7hY78kt.js.map +1 -0
- package/dist/shared/{hx-tree-item-CPQ9dJiK.js → hx-tree-item-D0ZphA45.js} +9 -1
- package/dist/shared/hx-tree-item-D0ZphA45.js.map +1 -0
- package/dist/shared/{toast-factory-CEMNOt1T.js → toast-factory-Cwd0PihS.js} +49 -36
- package/dist/shared/toast-factory-Cwd0PihS.js.map +1 -0
- package/package.json +2 -2
- package/dist/shared/aria-delegation-CBP9eQ0M.js.map +0 -1
- package/dist/shared/hx-accordion-CpfO0YQo.js.map +0 -1
- package/dist/shared/hx-alert-CHOjTBds.js.map +0 -1
- package/dist/shared/hx-badge-RPzd-t5l.js.map +0 -1
- package/dist/shared/hx-banner-B-WEDiq7.js.map +0 -1
- package/dist/shared/hx-breadcrumb-item-jLAKK038.js.map +0 -1
- package/dist/shared/hx-button-DoN8jjQT.js.map +0 -1
- package/dist/shared/hx-card-BgXZXDuc.js.map +0 -1
- package/dist/shared/hx-carousel-item-Dwt9Pphz.js.map +0 -1
- package/dist/shared/hx-checkbox-C82GjRXe.js.map +0 -1
- package/dist/shared/hx-checkbox-group-DThZeN5d.js.map +0 -1
- package/dist/shared/hx-clinical-status-BjtT5c0M.js.map +0 -1
- package/dist/shared/hx-code-snippet-DcVENSuC.js.map +0 -1
- package/dist/shared/hx-color-picker-C6EIuS9t.js.map +0 -1
- package/dist/shared/hx-combobox-BJ4lQocO.js.map +0 -1
- package/dist/shared/hx-copy-button-BoM0WsMd.js.map +0 -1
- package/dist/shared/hx-counter-B5NgKlw4.js.map +0 -1
- package/dist/shared/hx-data-table-D5Ne-goy.js.map +0 -1
- package/dist/shared/hx-date-picker-Cd3I3WkX.js.map +0 -1
- package/dist/shared/hx-dialog-D4ubstxx.js.map +0 -1
- package/dist/shared/hx-divider-BBtOLHRP.js.map +0 -1
- package/dist/shared/hx-drawer--WDLuWtS.js.map +0 -1
- package/dist/shared/hx-dropdown-n5-XSmiV.js.map +0 -1
- package/dist/shared/hx-field-CwT9tki1.js.map +0 -1
- package/dist/shared/hx-field-label-CcOK9VU3.js.map +0 -1
- package/dist/shared/hx-file-upload-Di_vpQaG.js.map +0 -1
- package/dist/shared/hx-help-text-Bmb80bP4.js.map +0 -1
- package/dist/shared/hx-icon-BKHs3OLu.js.map +0 -1
- package/dist/shared/hx-icon-button-CJuy9xbw.js.map +0 -1
- package/dist/shared/hx-image-ztiXumZB.js.map +0 -1
- package/dist/shared/hx-link-CN7AvGOW.js.map +0 -1
- package/dist/shared/hx-menu-divider-DRT8yHRZ.js.map +0 -1
- package/dist/shared/hx-meter-BcVC9yrt.js.map +0 -1
- package/dist/shared/hx-nav-item-CJN4VDrf.js.map +0 -1
- package/dist/shared/hx-nav-l0Rp7WPW.js.map +0 -1
- package/dist/shared/hx-number-input-0Waw7Z7u.js.map +0 -1
- package/dist/shared/hx-overflow-menu-DElwFSCd.js.map +0 -1
- package/dist/shared/hx-patient-banner-BKiN7nIE.js.map +0 -1
- package/dist/shared/hx-phi-field-Df06K0J3.js.map +0 -1
- package/dist/shared/hx-popover-CydNuVkT.js.map +0 -1
- package/dist/shared/hx-popup-DbzezTOd.js.map +0 -1
- package/dist/shared/hx-progress-bar-Cm0VihTN.js.map +0 -1
- package/dist/shared/hx-radio-f8c5ggHG.js.map +0 -1
- package/dist/shared/hx-rating-qRJZXskm.js.map +0 -1
- package/dist/shared/hx-select-CgcgsHU5.js.map +0 -1
- package/dist/shared/hx-skeleton-tiYvKO-t.js.map +0 -1
- package/dist/shared/hx-slider-BvXtvxmN.js.map +0 -1
- package/dist/shared/hx-spinner-D6nzuGmj.js.map +0 -1
- package/dist/shared/hx-split-button-CPndTJlC.js.map +0 -1
- package/dist/shared/hx-split-panel-Dx72NaET.js.map +0 -1
- package/dist/shared/hx-status-indicator-ClWpK6zz.js.map +0 -1
- package/dist/shared/hx-structured-list-DKlrv7kS.js.map +0 -1
- package/dist/shared/hx-switch-BzMN37PV.js.map +0 -1
- package/dist/shared/hx-tab-panel-J58zOSjq.js.map +0 -1
- package/dist/shared/hx-tag-F0ZcYj9b.js.map +0 -1
- package/dist/shared/hx-td-CNCvzBwY.js.map +0 -1
- package/dist/shared/hx-text-input-Zuodg9s_.js.map +0 -1
- package/dist/shared/hx-textarea-BfSJJtA1.js.map +0 -1
- package/dist/shared/hx-time-picker-CZvmihHD.js.map +0 -1
- package/dist/shared/hx-toggle-button-BZUQUULm.js.map +0 -1
- package/dist/shared/hx-tooltip-Ny4i1Idj.js.map +0 -1
- package/dist/shared/hx-top-nav-CC4FW2Hp.js.map +0 -1
- package/dist/shared/hx-tree-item-CPQ9dJiK.js.map +0 -1
- package/dist/shared/toast-factory-CEMNOt1T.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-clinical-status-BjtT5c0M.js","sources":["../../src/components/hx-clinical-status/hx-clinical-status.styles.ts","../../src/components/hx-clinical-status/hx-clinical-status.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixClinicalStatusStyles = css`\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Screen-reader-only utility ─── */\n /* @design-system-approved: WCAG standard visually-hidden technique for a11y */\n\n .sr-only {\n position: absolute;\n width: 1px; /* @design-system-approved: standard sr-only technique */\n height: 1px; /* @design-system-approved: standard sr-only technique */\n padding: 0;\n margin: -1px; /* @design-system-approved: standard sr-only technique */\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Container ─── */\n\n .clinical-status {\n display: flex;\n align-items: flex-start;\n gap: var(--hx-clinical-status-gap, var(--hx-space-3, 0.75rem));\n padding: var(--hx-clinical-status-padding, var(--hx-space-4, 1rem));\n border: var(--hx-clinical-status-border-width, var(--hx-border-width-thin, 1px)) solid\n var(--hx-clinical-status-border-color, var(--hx-color-info-200, #b3d9ef));\n border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid\n var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #3b82f6));\n border-radius: var(--hx-clinical-status-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #e8f4fd));\n color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));\n font-family: var(--hx-clinical-status-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-sm, 0.875rem);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n /* ─── Compact Mode ─── */\n\n .clinical-status--compact {\n padding: var(\n --hx-clinical-status-compact-padding,\n var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem)\n );\n gap: var(--hx-space-2, 0.5rem);\n font-size: var(--hx-font-size-xs, 0.75rem);\n }\n\n /* ─── Severity: info ─── */\n\n :host([severity='info']) .clinical-status,\n :host(:not([severity])) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-info-50, #e8f4fd);\n --hx-clinical-status-border-color: var(--hx-color-info-200, #b3d9ef);\n --hx-clinical-status-accent-color: var(--hx-color-info-500, #3b82f6);\n --hx-clinical-status-color: var(--hx-color-info-800, #1a3a4a);\n --hx-clinical-status-icon-color: var(--hx-color-info-500, #3b82f6);\n }\n\n /* ─── Severity: warning ─── */\n\n :host([severity='warning']) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-warning-50, #fffbeb);\n --hx-clinical-status-border-color: var(--hx-color-warning-200, #fde68a);\n --hx-clinical-status-accent-color: var(--hx-color-warning-500, #f59e0b);\n --hx-clinical-status-color: var(--hx-color-warning-800, #92400e);\n --hx-clinical-status-icon-color: var(--hx-color-warning-500, #f59e0b);\n }\n\n /* ─── Severity: critical ─── */\n\n :host([severity='critical']) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);\n --hx-clinical-status-border-color: var(--hx-color-error-200, #fecaca);\n --hx-clinical-status-accent-color: var(--hx-color-error-500, #ef4444);\n --hx-clinical-status-color: var(--hx-color-error-800, #991b1b);\n --hx-clinical-status-icon-color: var(--hx-color-error-500, #ef4444);\n }\n\n /* ─── Severity: emergent ─── */\n\n :host([severity='emergent']) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);\n --hx-clinical-status-border-color: var(--hx-color-error-300, #fca5a5);\n --hx-clinical-status-accent-color: var(--hx-color-error-700, #b91c1c);\n --hx-clinical-status-color: var(--hx-color-error-900, #7f1d1d);\n --hx-clinical-status-icon-color: var(--hx-color-error-700, #b91c1c);\n border-inline-start-width: var(--hx-clinical-status-emergent-accent-width, 6px);\n font-weight: var(--hx-font-weight-semibold, 600);\n }\n\n /* ─── Icon ─── */\n\n .clinical-status__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #3b82f6));\n }\n\n .clinical-status__icon svg {\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n fill: currentColor;\n }\n\n .clinical-status--compact .clinical-status__icon svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n }\n\n /* ─── Message ─── */\n\n .clinical-status__message {\n flex: 1;\n min-width: 0;\n }\n\n /* ─── Severity Label (WCAG 1.4.1) ─── */\n /* @design-system-approved: WCAG 1.4.1 non-color severity indicator for screen readers */\n\n .clinical-status__severity-label {\n position: absolute;\n width: 1px; /* @design-system-approved: standard sr-only technique */\n height: 1px; /* @design-system-approved: standard sr-only technique */\n padding: 0;\n margin: -1px; /* @design-system-approved: standard sr-only technique */\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Actions ─── */\n\n .clinical-status__actions {\n display: none;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n margin-inline-start: auto;\n flex-shrink: 0;\n }\n\n .clinical-status__actions--visible {\n display: flex;\n }\n\n /* ─── Dismiss Button ─── */\n\n .clinical-status__dismiss-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n min-width: var(--hx-touch-target-size, 44px);\n min-height: var(--hx-touch-target-size, 44px);\n padding: 0;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));\n cursor: pointer;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: 1;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n opacity var(--hx-transition-fast, 150ms ease);\n opacity: 0.7;\n }\n\n .clinical-status__dismiss-button:hover {\n opacity: 1;\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .clinical-status__dismiss-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n opacity: 1;\n }\n\n .clinical-status__dismiss-button svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n fill: currentColor;\n }\n\n .clinical-status--compact .clinical-status__dismiss-button {\n min-width: var(--hx-space-8, 2rem);\n min-height: var(--hx-space-8, 2rem);\n }\n\n /* ─── Acknowledge Button ─── */\n\n .clinical-status__acknowledge-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n border: var(--hx-border-width-thin, 1px) solid currentColor;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: var(--hx-font-size-xs, 0.75rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n text-transform: uppercase;\n letter-spacing: var(--hx-letter-spacing-wide, 0.05em);\n cursor: pointer;\n line-height: var(--hx-line-height-normal, 1.5);\n min-height: var(--hx-touch-target-size, 44px);\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n opacity var(--hx-transition-fast, 150ms ease);\n }\n\n .clinical-status__acknowledge-button:hover {\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .clinical-status__acknowledge-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .clinical-status--compact .clinical-status__acknowledge-button {\n min-height: var(--hx-space-8, 2rem);\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .clinical-status__dismiss-button,\n .clinical-status__acknowledge-button {\n transition: none;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { createIdCounter } from '../../base/index.js';\nimport { helixClinicalStatusStyles } from './hx-clinical-status.styles.js';\n\n/** Clinical severity level for alert fatigue prevention. */\nexport type ClinicalSeverity = 'info' | 'warning' | 'critical' | 'emergent';\n\nconst nextId = createIdCounter('hx-clinical-status');\n\n/**\n * A clinical status indicator designed for healthcare alert fatigue prevention.\n * Standardizes clinical alert presentations to reduce cognitive overload from\n * inconsistent color/icon combinations across healthcare interfaces.\n *\n * @summary Clinical status indicator for standardized healthcare alert fatigue prevention.\n *\n * @tag hx-clinical-status\n *\n * @slot - Default slot for additional message content.\n *\n * @fires {CustomEvent<void>} hx-dismiss - Dispatched when the user dismisses the status.\n * @fires {CustomEvent<{ severity: ClinicalSeverity; persistent: boolean }>} hx-acknowledge - Dispatched when the user acknowledges a critical/emergent status.\n *\n * @csspart container - The outer status container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart actions - The actions container (dismiss/acknowledge buttons).\n * @csspart dismiss-button - The dismiss button (only rendered when dismissible).\n * @csspart acknowledge-button - The acknowledge button (only rendered when acknowledgeable).\n *\n * @cssprop [--hx-clinical-status-bg=var(--hx-color-info-50)] - Background color.\n * @cssprop [--hx-clinical-status-color=var(--hx-color-info-800)] - Text color.\n * @cssprop [--hx-clinical-status-border-color=var(--hx-color-info-200)] - Border color.\n * @cssprop [--hx-clinical-status-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-clinical-status-border-width=var(--hx-border-width-thin)] - Border width.\n * @cssprop [--hx-clinical-status-accent-color=var(--hx-color-info-500)] - Left accent stripe color.\n * @cssprop [--hx-clinical-status-accent-width=4px] - Left accent stripe width.\n * @cssprop [--hx-clinical-status-padding=var(--hx-space-4)] - Container padding.\n * @cssprop [--hx-clinical-status-gap=var(--hx-space-3)] - Gap between elements.\n * @cssprop [--hx-clinical-status-icon-color=var(--hx-color-info-500)] - Icon color.\n * @cssprop [--hx-clinical-status-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-clinical-status-compact-padding] - Padding in compact mode.\n * @cssprop [--hx-clinical-status-emergent-accent-width=6px] - Accent width for emergent severity.\n */\n@customElement('hx-clinical-status')\nexport class HelixClinicalStatus extends HelixElement {\n static override styles = [helixClinicalStatusStyles];\n\n /**\n * ElementInternals instance for setting ARIA role without host attributes.\n * Using internals prevents consumers from accidentally overriding the role\n * via a host attribute, which would break critical healthcare alert semantics.\n * @internal\n */\n private readonly _elInternals = this.attachInternals();\n\n // ─── Properties ───\n\n /**\n * Clinical severity level that determines visual styling and ARIA semantics.\n * - `info`: Informational, non-urgent (role=\"status\")\n * - `warning`: Requires attention but not immediate (role=\"status\")\n * - `critical`: Requires prompt clinical attention (role=\"alert\")\n * - `emergent`: Life-threatening, immediate action required (role=\"alert\")\n * @attr severity\n */\n @property({ type: String, reflect: true })\n severity: ClinicalSeverity = 'info';\n\n /**\n * Status message text. Displayed as the primary content of the indicator.\n * @attr message\n */\n @property({ type: String })\n message = '';\n\n /**\n * Whether the status can be dismissed by the user.\n * Critical and emergent statuses should require acknowledgment rather than simple dismissal.\n * @attr dismissible\n */\n @property({ type: Boolean, reflect: true })\n dismissible = false;\n\n /**\n * Whether the status survives page navigation.\n * Defaults to false for info/warning, true for critical/emergent.\n * When set explicitly, overrides the severity-based default.\n * @attr persistent\n */\n @property({ type: Boolean, reflect: true })\n persistent = false;\n\n /**\n * Optional custom icon name. When not set, a default severity-appropriate icon is shown.\n * @attr icon\n */\n @property({ type: String })\n icon = '';\n\n /**\n * Compact mode for dense clinical UIs (e.g. patient dashboards, bedside displays).\n * Reduces padding, font size, and icon size.\n * @attr compact\n */\n @property({ type: Boolean, reflect: true })\n compact = false;\n\n // ─── State ───\n\n /** @internal */\n @state()\n private _hasSlottedContent = false;\n\n /** @internal */\n @state()\n private _acknowledged = false;\n\n /**\n * SSR-safe unique ID for ARIA relationships.\n * @internal\n */\n private _componentId = nextId();\n\n /**\n * Tracks whether `persistent` was explicitly set by the consumer.\n * @internal\n */\n private _persistentExplicitlySet = false;\n\n // ─── Private Helpers ───\n\n /** Returns true when the severity requires assertive announcement. */\n private get _isAssertive(): boolean {\n return this.severity === 'critical' || this.severity === 'emergent';\n }\n\n /** Returns the appropriate ARIA role based on severity. */\n private get _role(): string {\n return this._isAssertive ? 'alert' : 'status';\n }\n\n /** Returns the default severity label for screen readers (WCAG 1.4.1). */\n private _severityLabel(): string {\n const labels: Record<ClinicalSeverity, string> = {\n info: 'Info:',\n warning: 'Warning:',\n critical: 'Critical:',\n emergent: 'Emergent:',\n };\n return labels[this.severity] ?? '';\n }\n\n /** Returns true when the severity requires explicit acknowledgment. */\n private get _requiresAcknowledgment(): boolean {\n return this.severity === 'critical' || this.severity === 'emergent';\n }\n\n /** Effective persistent value, considering severity-based defaults. */\n private get _effectivePersistent(): boolean {\n if (this._persistentExplicitlySet) {\n return this.persistent;\n }\n return this._isAssertive;\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._elInternals.role = this._role;\n }\n\n override attributeChangedCallback(name: string, _old: string | null, value: string | null): void {\n super.attributeChangedCallback(name, _old, value);\n if (name === 'persistent') {\n this._persistentExplicitlySet = value !== null;\n }\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('severity')) {\n this._elInternals.role = this._role;\n }\n }\n\n // ─── Default Icons ───\n\n /** @internal */\n private _renderInfoIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderWarningIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderCriticalIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderEmergentIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1 4a1 1 0 112 0v4a1 1 0 11-2 0V6zm1 9a1.25 1.25 0 100-2.5A1.25 1.25 0 0010 15z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderDefaultIcon() {\n switch (this.severity) {\n case 'warning':\n return this._renderWarningIcon();\n case 'critical':\n return this._renderCriticalIcon();\n case 'emergent':\n return this._renderEmergentIcon();\n case 'info':\n default:\n return this._renderInfoIcon();\n }\n }\n\n /** @internal */\n private _renderCloseIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>`;\n }\n\n // ─── Slot Change Handling ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasSlottedContent = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleDismiss(): void {\n this.dispatchEvent(\n new CustomEvent<void>('hx-dismiss', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n /** @internal */\n private _handleAcknowledge(): void {\n this._acknowledged = true;\n this.dispatchEvent(\n new CustomEvent<{ severity: ClinicalSeverity; persistent: boolean }>('hx-acknowledge', {\n bubbles: true,\n composed: true,\n detail: {\n severity: this.severity,\n persistent: this._effectivePersistent,\n },\n }),\n );\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n 'clinical-status': true,\n [`clinical-status--${this.severity}`]: true,\n 'clinical-status--compact': this.compact,\n };\n\n const severityLabel = this._severityLabel();\n const messageId = `${this._componentId}-message`;\n\n return html`\n <div part=\"container\" class=${classMap(classes)} aria-labelledby=${messageId}>\n <span class=\"clinical-status__severity-label\">${severityLabel}</span>\n\n <div part=\"icon\" class=\"clinical-status__icon\">\n ${this.icon\n ? html`<span class=\"clinical-status__custom-icon\">${this.icon}</span>`\n : this._renderDefaultIcon()}\n </div>\n\n <div id=${messageId} part=\"message\" class=\"clinical-status__message\">\n ${this.message}\n ${this._hasSlottedContent\n ? html`<div class=\"clinical-status__slot-content\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>`\n : html`<slot @slotchange=${this._handleSlotChange}></slot>`}\n </div>\n\n <div\n part=\"actions\"\n class=${classMap({\n 'clinical-status__actions': true,\n 'clinical-status__actions--visible': this.dismissible || this._requiresAcknowledgment,\n })}\n >\n ${this._requiresAcknowledgment && !this._acknowledged\n ? html`\n <button\n part=\"acknowledge-button\"\n class=\"clinical-status__acknowledge-button\"\n @click=${this._handleAcknowledge}\n >\n Acknowledge\n </button>\n `\n : nothing}\n ${this.dismissible\n ? html`\n <button\n part=\"dismiss-button\"\n class=\"clinical-status__dismiss-button\"\n aria-label=\"Dismiss clinical status\"\n @click=${this._handleDismiss}\n >\n ${this._renderCloseIcon()}\n </button>\n `\n : nothing}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-clinical-status': HelixClinicalStatus;\n }\n}\n\n/** Canonical type alias for the hx-clinical-status component. */\nexport type HxClinicalStatus = HelixClinicalStatus;\n"],"names":["helixClinicalStatusStyles","css","nextId","createIdCounter","HelixClinicalStatus","HelixElement","name","_old","value","changedProperties","html","e","slot","classes","severityLabel","messageId","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAA4BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-code-snippet-DcVENSuC.js","sources":["../../src/components/hx-code-snippet/hx-code-snippet.styles.ts","../../src/components/hx-code-snippet/hx-code-snippet.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCodeSnippetStyles = css`\n :host {\n display: block;\n }\n\n :host([inline]) {\n display: inline;\n }\n\n /* ─── Inline Mode ─── */\n\n .code-snippet--inline {\n display: inline;\n font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));\n font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));\n background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));\n color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));\n padding: var(--hx-code-snippet-inline-padding-y, 0.125em)\n var(--hx-code-snippet-inline-padding-x, 0.375em);\n border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));\n }\n\n /* ─── Block Mode Container ─── */\n\n .code-snippet {\n position: relative;\n background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));\n border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));\n overflow: hidden;\n }\n\n /* ─── Hidden Slot ─── */\n\n .code-snippet__slot {\n display: none;\n }\n\n /* ─── Header ─── */\n\n .code-snippet__header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-2, 0.5rem) 0;\n min-height: var(--hx-space-8, 2rem);\n }\n\n /* ─── Pre / Code ─── */\n\n .code-snippet__pre {\n margin: 0;\n padding: var(--hx-code-snippet-padding, var(--hx-space-4, 1rem));\n overflow-x: auto;\n white-space: pre;\n }\n\n .code-snippet__pre--wrap {\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .code-snippet__code {\n display: block;\n font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));\n font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));\n line-height: var(--hx-line-height-relaxed, 1.625);\n color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));\n tab-size: var(--hx-code-snippet-tab-size, 2);\n }\n\n /* ─── Copy Button ─── */\n\n .code-snippet__copy-button {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n /* WCAG 2.5.5: minimum 44×44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-600, #475569);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background-color: var(--hx-color-neutral-800, #1e293b);\n color: var(--hx-color-neutral-200, #e2e8f0);\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-font-size-xs, 0.75rem);\n font-weight: var(--hx-font-weight-medium, 500);\n line-height: 1; /* intentional literal: icon/action button needs line-height 1; no token maps to exactly 1 */\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 white-space: nowrap;\n z-index: 1; /* @audit-exception: local stacking context within shadow root */\n }\n\n .code-snippet__copy-button:hover {\n background-color: var(--hx-color-neutral-700, #334155);\n border-color: var(--hx-color-neutral-500, #64748b);\n }\n\n .code-snippet__copy-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .code-snippet__copy-button:active {\n /* Non-standard token — fallback 0.8 applies if token is absent */\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Expand Button ─── */\n\n .code-snippet__expand-button {\n display: block;\n width: 100%;\n /* WCAG 2.5.5: minimum 44×44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n border: none;\n border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);\n background-color: var(--hx-color-neutral-800, #1e293b);\n color: var(--hx-color-neutral-300, #cbd5e1);\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n text-align: center;\n cursor: pointer;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n .code-snippet__expand-button:hover {\n background-color: var(--hx-color-neutral-700, #334155);\n color: var(--hx-color-neutral-100, #f1f5f9);\n }\n\n .code-snippet__expand-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Line Numbers ─── */\n\n .code-snippet__line-number {\n display: inline-block;\n min-width: var(--hx-space-8, 2rem);\n padding-inline-end: var(--hx-space-3, 0.75rem);\n color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));\n user-select: none;\n text-align: end;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .code-snippet__copy-button {\n transition: none;\n }\n\n .code-snippet__expand-button {\n transition: none;\n }\n }\n\n /* ─── Screen-reader only ─── */\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n`;\n","import { html, nothing, TemplateResult } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { HelixElement } from '../../base/index.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixCodeSnippetStyles } from './hx-code-snippet.styles.js';\n\n/**\n * A styled code block with optional copy button and max-lines truncation.\n * Supports block (`<pre><code>`) and inline (`<code>`) rendering modes.\n * No external syntax highlighting dependency — use the `language` attribute\n * as a hint for consumers integrating their own highlighter via slotted content.\n *\n * @summary Styled code display component with copy-to-clipboard and expand/collapse.\n *\n * @tag hx-code-snippet\n *\n * @slot - Code content as plain text. Note: HTML markup in slot content will be\n * stripped — only text content is extracted. Pre-highlighted HTML is not supported.\n *\n * @fires {CustomEvent<{text: string}>} hx-copy - Dispatched when the copy button is clicked.\n *\n * @csspart base - The outermost container (block: `<div>`, inline: `<code>`).\n * @csspart header - The header bar containing the copy button (block mode only).\n * @csspart code - The `<code>` element containing the content.\n * @csspart copy-button - The copy-to-clipboard button.\n * @csspart expand-button - The \"Show more / Show less\" button.\n *\n * @cssprop [--hx-code-snippet-bg=var(--hx-color-neutral-900,#0f172a)] - Background color.\n * @cssprop [--hx-code-snippet-color=var(--hx-color-neutral-100,#f1f5f9)] - Text color.\n * @cssprop [--hx-code-snippet-font-family=var(--hx-font-family-mono,monospace)] - Font family.\n * @cssprop [--hx-code-snippet-font-size=var(--hx-font-size-sm,0.875rem)] - Font size.\n * @cssprop [--hx-code-snippet-border-radius=var(--hx-border-radius-md,0.375rem)] - Border radius.\n * @cssprop [--hx-code-snippet-padding=var(--hx-space-4,1rem)] - Inner padding (block mode).\n */\n@customElement('hx-code-snippet')\nexport class HelixCodeSnippet extends HelixElement {\n static override styles = [helixCodeSnippetStyles];\n\n // ─── Public Properties ───\n\n /**\n * Language hint for consumers to apply syntax highlighting.\n * Does not affect rendering directly; it is applied as a `language-*` class\n * on the `<code>` element so external highlighters can target it.\n * @attr language\n */\n @property({ type: String, reflect: true })\n language: string = '';\n\n /**\n * When true, renders as an inline `<code>` element instead of a `<pre><code>` block.\n * @attr inline\n */\n @property({ type: Boolean, reflect: true })\n inline: boolean = false;\n\n /**\n * When true, enables word-wrap in block mode.\n * @attr wrap\n */\n @property({ type: Boolean, reflect: true })\n wrap: boolean = false;\n\n /**\n * When true, shows a copy-to-clipboard button. Add the `copyable` attribute to enable it.\n * @attr copyable\n */\n @property({ type: Boolean, reflect: true })\n copyable: boolean = false;\n\n /**\n * Maximum number of lines to display before showing a \"Show more\" button.\n * Set to 0 (default) to disable truncation.\n * @attr max-lines\n */\n @property({ type: Number, attribute: 'max-lines', reflect: true })\n maxLines: number = 0;\n\n /**\n * When true, prepends line numbers to each displayed line in block mode.\n * Line numbers are rendered as `aria-hidden` spans so screen readers skip them.\n * @attr line-numbers\n */\n @property({ type: Boolean, attribute: 'line-numbers', reflect: true })\n lineNumbers: boolean = false;\n\n /**\n * Label for the copy button in idle state.\n * @attr label-copy\n */\n @property({ type: String, attribute: 'label-copy' })\n labelCopy = 'Copy code';\n\n /**\n * Label for the copy button after successful copy.\n * @attr label-copied\n */\n @property({ type: String, attribute: 'label-copied' })\n labelCopied = 'Copied!';\n\n /**\n * Label for the expand button when content is collapsed.\n * @attr label-show-more\n */\n @property({ type: String, attribute: 'label-show-more' })\n labelShowMore = 'Show more';\n\n /**\n * Label for the expand button when content is expanded.\n * @attr label-show-less\n */\n @property({ type: String, attribute: 'label-show-less' })\n labelShowLess = 'Show less';\n\n // ─── Internal State ───\n\n /** @internal */\n @state() private _copied: boolean = false;\n /** @internal */\n @state() private _expanded: boolean = false;\n /** @internal */\n @state() private _codeText: string = '';\n\n /** @internal */\n private _copyTimer: ReturnType<typeof setTimeout> | null = null;\n\n // ─── Lifecycle ───\n\n override firstUpdated(): void {\n // Prevent flash of empty <code> before slotchange fires by eagerly reading\n // text content from host children that are already present on first render.\n if (!this._codeText) {\n const text = this.textContent?.trim() ?? '';\n if (text) {\n this._codeText = text;\n }\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this._copyTimer !== null) {\n clearTimeout(this._copyTimer);\n this._copyTimer = null;\n }\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement | null;\n if (!slot) return;\n const nodes = slot.assignedNodes({ flatten: true });\n this._codeText = nodes.map((n) => n.textContent ?? '').join('');\n }\n\n /** @internal */\n private _handleCopy(): void {\n const text = this._codeText;\n\n navigator?.clipboard?.writeText(text).catch(() => {\n // Clipboard API unavailable (non-HTTPS environments such as Drupal staging) — emit event only.\n // Note: navigator.clipboard requires a secure context (HTTPS or localhost).\n // On HTTP, the copy event still fires but the clipboard is not populated.\n });\n\n this.dispatchEvent(\n new CustomEvent<{ text: string }>('hx-copy', {\n bubbles: true,\n composed: true,\n detail: { text },\n }),\n );\n\n this._copied = true;\n if (this._copyTimer !== null) clearTimeout(this._copyTimer);\n this._copyTimer = setTimeout(() => {\n this._copied = false;\n }, 2000);\n }\n\n /** @internal */\n private _handleExpand(): void {\n this._expanded = !this._expanded;\n }\n\n // ─── Helpers ───\n\n /** @internal */\n private _getDisplayLines(): string[] {\n const lines = this._codeText.split('\\n');\n if (!this.maxLines || this.maxLines <= 0 || this._expanded) {\n return lines;\n }\n if (lines.length <= this.maxLines) {\n return lines;\n }\n return lines.slice(0, this.maxLines);\n }\n\n /** @internal */\n private _isTruncated(): boolean {\n if (!this.maxLines || this.maxLines <= 0) return false;\n const lines = this._codeText.split('\\n');\n return lines.length > this.maxLines;\n }\n\n /** @internal */\n private _renderLines(lines: string[]): TemplateResult {\n if (!this.lineNumbers) {\n return html`${lines.join('\\n')}`;\n }\n return html`${lines.map(\n (line, i) =>\n html`<span aria-hidden=\"true\" class=\"code-snippet__line-number\">${i + 1}</span>${line +\n '\\n'}`,\n )}`;\n }\n\n // ─── Render ───\n\n override render(): TemplateResult | typeof nothing {\n if (this.inline) {\n return html`\n <code part=\"base code\" class=\"code-snippet code-snippet--inline\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </code>\n `;\n }\n\n const displayLines = this._getDisplayLines();\n const truncated = this._isTruncated();\n const preLabel = this.language ? `Code snippet: ${this.language}` : 'Code snippet';\n const codeClasses = classMap({\n 'code-snippet__code': true,\n [`language-${this.language}`]: Boolean(this.language),\n });\n\n return html`\n <div part=\"base\" class=\"code-snippet\">\n <div part=\"header\" class=\"code-snippet__header\">\n ${this.copyable\n ? html`\n <button\n part=\"copy-button\"\n class=\"code-snippet__copy-button\"\n type=\"button\"\n aria-label=${this._copied ? this.labelCopied : this.labelCopy}\n @click=${this._handleCopy}\n >\n ${this._copied ? this.labelCopied : this.labelCopy}\n </button>\n `\n : nothing}\n </div>\n\n <!-- Visually-hidden live region announces copy confirmation to assistive technology -->\n <span\n aria-live=\"polite\"\n style=\"position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;\"\n >${this._copied ? this.labelCopied : ''}</span\n >\n\n <pre\n role=\"region\"\n aria-label=${preLabel}\n class=${classMap({\n 'code-snippet__pre': true,\n 'code-snippet__pre--wrap': this.wrap,\n })}\n ><code part=\"code\" class=${codeClasses}>${this._renderLines(displayLines)}</code></pre>\n\n <!-- Hidden slot to capture text content for display and copy -->\n <slot class=\"code-snippet__slot\" @slotchange=${this._handleSlotChange}></slot>\n\n ${truncated\n ? html`\n <button\n part=\"expand-button\"\n class=\"code-snippet__expand-button\"\n type=\"button\"\n aria-expanded=${this._expanded ? 'true' : 'false'}\n @click=${this._handleExpand}\n >\n ${this._expanded ? this.labelShowLess : this.labelShowMore}\n </button>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-code-snippet': HelixCodeSnippet;\n }\n}\n"],"names":["helixCodeSnippetStyles","css","HelixCodeSnippet","HelixElement","text","_a","slot","nodes","n","lines","html","line","i","displayLines","truncated","preLabel","codeClasses","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-color-picker-C6EIuS9t.js","sources":["../../src/components/hx-color-picker/hx-color-picker.styles.ts","../../src/components/hx-color-picker/color-utils.ts","../../src/components/hx-color-picker/hx-color-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\n// prettier-ignore\nexport const helixColorPickerStyles = css`:host{display:inline-block;position:relative;font-family:var(--hx-font-family-sans, sans-serif);font-size:var(--hx-font-size-sm, .875rem)}:host([disabled]){pointer-events:none;opacity:var(--hx-opacity-disabled, .4)}.trigger{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-1, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-md, .375rem);background:var(--hx-color-neutral-0, #fff);cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease)}.trigger:hover:not([disabled]){border-color:var(--hx-color-primary-500, #3b82f6)}:is(.trigger,.gradient-grid,.slider-track,.swatch-btn,.format-btn):focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, var(--hx-color-primary-500));outline-offset:var(--hx-focus-ring-offset, 2px)}.trigger-swatch{width:1.5rem;height:1.5rem;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);display:block;flex-shrink:0}.trigger-label{font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-700, #374151);font-family:var(--hx-font-family-mono, monospace);white-space:nowrap}.panel{position:absolute;z-index:var(--hx-color-picker-z-index, 1000);top:calc(100% + 4px);left:0;background:var(--hx-color-neutral-0, #fff);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem);box-shadow:0 8px 24px var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, .15)));padding:var(--hx-space-4, 1rem);width:var(--hx-color-picker-width, 260px);display:flex;flex-direction:column;gap:var(--hx-space-3, .75rem);outline:none}:host([inline]) .panel{position:static;box-shadow:none;border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem)}.gradient-grid{position:relative;width:100%;height:var(--hx-color-picker-grid-height, 160px);border-radius:var(--hx-border-radius-sm, .25rem);cursor:crosshair;overflow:hidden;touch-action:none;flex-shrink:0}.gradient-grid-bg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,var(--_hue-color, hsl(0, 100%, 50%)));pointer-events:none}.gradient-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;top:var(--_thumb-y, 0%);left:var(--_thumb-x, 100%)}.slider-track{position:relative;width:100%;height:12px;border-radius:6px;cursor:pointer;touch-action:none;flex-shrink:0}.hue-track{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.opacity-track{background-image:linear-gradient(to right,transparent,var(--_hue-color, hsl(0, 100%, 50%))),repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0 0 / 12px 12px}.slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;left:var(--_slider-pct, 0%);background:var(--_thumb-color, hsl(0, 100%, 50%))}.swatches{display:flex;flex-wrap:wrap;gap:var(--hx-space-1, .25rem)}.swatch-btn{width:20px;height:20px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));cursor:pointer;padding:0;flex-shrink:0;transition:transform var(--hx-transition-fast, .15s ease)}.swatch-btn:hover{transform:scale(1.15);border-color:var( --hx-color-picker-swatch-border-hover, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)) )}.input-area{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}.format-btn{flex-shrink:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);background:var(--hx-color-neutral-100, #f3f4f6);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);cursor:pointer;font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-600, #4b5563);text-transform:uppercase;font-weight:var(--hx-font-weight-semibold, 600);letter-spacing:.05em}.color-input{flex:1;min-width:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);font-family:var(--hx-font-family-mono, monospace);font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-900, #111827);background:var(--hx-color-neutral-0, #fff);outline:none}.color-input:focus-visible{border-color:var(--hx-focus-ring-color, var(--hx-color-primary-500));box-shadow:0 0 0 2px color-mix(in srgb,var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%,transparent)}.input-preview{width:24px;height:24px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);flex-shrink:0}@media(prefers-reduced-motion:reduce){.trigger,.swatch-btn{transition:none}}`;\n","// ─── Color utility types ──────────────────────────────────────────────────────\n\nexport interface HSV {\n h: number; // 0-360\n s: number; // 0-100\n v: number; // 0-100\n a: number; // 0-1\n}\n\nexport interface RGB {\n r: number; // 0-255\n g: number; // 0-255\n b: number; // 0-255\n a: number; // 0-1\n}\n\nexport type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';\n\n// ─── Color utilities ──────────────────────────────────────────────────────────\n\nexport function clamp(n: number, min: number, max: number): number {\n return Math.max(min, Math.min(max, n));\n}\n\nexport function hexToRgb(hex: string): RGB | null {\n let h = hex.trim().replace(/^#/, '');\n if (h.length === 3) h = h.replace(/(.)/g, '$1$1');\n if (h.length === 4) h = h.replace(/(.)/g, '$1$1');\n if (h.length === 6) h += 'ff';\n if (h.length !== 8) return null;\n const n = parseInt(h, 16);\n if (isNaN(n)) return null;\n return {\n r: (n >>> 24) & 0xff,\n g: (n >>> 16) & 0xff,\n b: (n >>> 8) & 0xff,\n a: (n & 0xff) / 255,\n };\n}\n\nfunction toHex2(n: number): string {\n return Math.round(clamp(n, 0, 255))\n .toString(16)\n .padStart(2, '0');\n}\n\nexport function rgbToHex(rgb: RGB, includeAlpha: boolean): string {\n const base = `#${toHex2(rgb.r)}${toHex2(rgb.g)}${toHex2(rgb.b)}`;\n if (includeAlpha && rgb.a < 1) return base + toHex2(rgb.a * 255);\n return base;\n}\n\nexport function rgbToHsv(rgb: RGB): HSV {\n const r = rgb.r / 255;\n const g = rgb.g / 255;\n const b = rgb.b / 255;\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const d = max - min;\n const s = max === 0 ? 0 : d / max;\n const v = max;\n let h = 0;\n if (d !== 0) {\n if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n else if (max === g) h = ((b - r) / d + 2) / 6;\n else h = ((r - g) / d + 4) / 6;\n }\n return { h: h * 360, s: s * 100, v: v * 100, a: rgb.a };\n}\n\nexport function hsvToRgb(hsv: HSV): RGB {\n const h = hsv.h / 360;\n const s = hsv.s / 100;\n const v = hsv.v / 100;\n const i = Math.floor(h * 6);\n const f = h * 6 - i;\n const p = v * (1 - s);\n const q = v * (1 - f * s);\n const t = v * (1 - (1 - f) * s);\n let r = 0;\n let g = 0;\n let b = 0;\n switch (i % 6) {\n case 0:\n r = v;\n g = t;\n b = p;\n break;\n case 1:\n r = q;\n g = v;\n b = p;\n break;\n case 2:\n r = p;\n g = v;\n b = t;\n break;\n case 3:\n r = p;\n g = q;\n b = v;\n break;\n case 4:\n r = t;\n g = p;\n b = v;\n break;\n case 5:\n r = v;\n g = p;\n b = q;\n break;\n }\n return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255), a: hsv.a };\n}\n\nexport function rgbToHsl(rgb: RGB): { h: number; s: number; l: number; a: number } {\n const r = rgb.r / 255;\n const g = rgb.g / 255;\n const b = rgb.b / 255;\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const l = (max + min) / 2;\n let h = 0;\n let s = 0;\n if (max !== min) {\n const d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n else if (max === g) h = ((b - r) / d + 2) / 6;\n else h = ((r - g) / d + 4) / 6;\n }\n return { h: h * 360, s: s * 100, l: l * 100, a: rgb.a };\n}\n\n// P2-1: parseColor handles HSV/HSVA input strings for round-trip correctness\nexport function parseColor(value: string): HSV | null {\n if (!value) return null;\n\n if (value.startsWith('#')) {\n const rgb = hexToRgb(value);\n return rgb ? rgbToHsv(rgb) : null;\n }\n\n const rgbMatch = value.match(\n /rgba?\\(\\s*(\\d+)(?:\\s*,\\s*|\\s+)(\\d+)(?:\\s*,\\s*|\\s+)(\\d+)(?:\\s*(?:\\/|,)\\s*([\\d.]+))?\\s*\\)/,\n );\n if (rgbMatch) {\n const [, rm1, rm2, rm3, rm4] = rgbMatch;\n return rgbToHsv({\n r: parseInt(rm1 ?? '0', 10),\n g: parseInt(rm2 ?? '0', 10),\n b: parseInt(rm3 ?? '0', 10),\n a: rm4 !== undefined ? parseFloat(rm4) : 1,\n });\n }\n\n const hslMatch = value.match(\n /hsla?\\(\\s*([\\d.]+)(?:\\s*,\\s*|\\s+)([\\d.]+)%(?:\\s*,\\s*|\\s+)([\\d.]+)%(?:\\s*(?:\\/|,)\\s*([\\d.]+))?\\s*\\)/,\n );\n if (hslMatch) {\n const [, hm1, hm2, hm3, hm4] = hslMatch;\n const h = parseFloat(hm1 ?? '0');\n const s = parseFloat(hm2 ?? '0') / 100;\n const l = parseFloat(hm3 ?? '0') / 100;\n const a = hm4 !== undefined ? parseFloat(hm4) : 1;\n const c = (1 - Math.abs(2 * l - 1)) * s;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = l - c / 2;\n let r = 0;\n let g = 0;\n let b = 0;\n if (h < 60) {\n r = c;\n g = x;\n } else if (h < 120) {\n r = x;\n g = c;\n } else if (h < 180) {\n g = c;\n b = x;\n } else if (h < 240) {\n g = x;\n b = c;\n } else if (h < 300) {\n r = x;\n b = c;\n } else {\n r = c;\n b = x;\n }\n return rgbToHsv({\n r: Math.round((r + m) * 255),\n g: Math.round((g + m) * 255),\n b: Math.round((b + m) * 255),\n a,\n });\n }\n\n // P2-1: Support HSV/HSVA input strings (component's own output format)\n const hsvMatch = value.match(\n /hsva?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)%\\s*,\\s*([\\d.]+)%(?:\\s*,\\s*([\\d.]+))?\\s*\\)/,\n );\n if (hsvMatch) {\n const [, hm1, hm2, hm3, hm4] = hsvMatch;\n return {\n h: parseFloat(hm1 ?? '0'),\n s: parseFloat(hm2 ?? '0'),\n v: parseFloat(hm3 ?? '0'),\n a: hm4 !== undefined ? parseFloat(hm4) : 1,\n };\n }\n\n return null;\n}\n\nexport function formatColor(hsv: HSV, format: ColorFormat, includeAlpha: boolean): string {\n const rgb = hsvToRgb(hsv);\n switch (format) {\n case 'hex':\n return rgbToHex(rgb, includeAlpha);\n case 'rgb': {\n if (includeAlpha && hsv.a < 1) {\n return `rgb(${rgb.r} ${rgb.g} ${rgb.b} / ${Math.round(hsv.a * 100) / 100})`;\n }\n return `rgb(${rgb.r} ${rgb.g} ${rgb.b})`;\n }\n case 'hsl': {\n const hsl = rgbToHsl(rgb);\n if (includeAlpha && hsv.a < 1) {\n return `hsl(${Math.round(hsl.h)} ${Math.round(hsl.s)}% ${Math.round(hsl.l)}% / ${Math.round(hsv.a * 100) / 100})`;\n }\n return `hsl(${Math.round(hsl.h)} ${Math.round(hsl.s)}% ${Math.round(hsl.l)}%)`;\n }\n case 'hsv': {\n if (includeAlpha && hsv.a < 1) {\n return `hsva(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%, ${Math.round(hsv.a * 100) / 100})`;\n }\n return `hsv(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%)`;\n }\n }\n}\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { HelixElement } from '../../base/index.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { helixColorPickerStyles } from './hx-color-picker.styles.js';\nimport {\n type ColorFormat,\n type HSV,\n clamp,\n hsvToRgb,\n parseColor,\n formatColor,\n} from './color-utils.js';\n\n// Re-export ColorFormat so existing consumers using this module path still work\nexport type { ColorFormat };\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * A color picker control with gradient picker, hue/opacity sliders, swatches,\n * and formatted text input. Supports hex, rgb, hsl, and hsv output formats.\n *\n * @summary Color selection control with swatches, gradient picker, and formatted input.\n *\n * @tag hx-color-picker\n *\n * @slot trigger - Custom trigger element. Default: a color swatch button.\n *\n * @fires {CustomEvent<{value: string}>} hx-input - Dispatched while dragging sliders or grid.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when a color is committed.\n *\n * @csspart trigger - The trigger button element.\n * @csspart swatches - The swatch color buttons container.\n * @csspart grid - The 2D saturation/value gradient picker area.\n * @csspart slider - Shared slider container (also on hue-slider and opacity-slider).\n * @csspart hue-slider - The hue slider track.\n * @csspart opacity-slider - The alpha/opacity slider track.\n * @csspart input - The text input area.\n *\n * @cssprop [--hx-color-picker-z-index=1000] - z-index of the popover panel.\n * @cssprop [--hx-color-picker-width=260px] - Width of the picker panel.\n * @cssprop [--hx-color-picker-grid-height=160px] - Height of the gradient grid.\n * @cssprop [--hx-color-picker-thumb-border=#fff] - Border color of slider/grid thumbs.\n * @cssprop [--hx-color-picker-thumb-shadow=rgba(0,0,0,0.3)] - Shadow color of slider/grid thumbs.\n * @cssprop [--hx-color-picker-panel-shadow=rgba(0,0,0,0.15)] - Panel drop-shadow color.\n * @cssprop [--hx-color-picker-swatch-border=rgba(0,0,0,0.1)] - Swatch button border color.\n * @cssprop [--hx-color-picker-swatch-border-hover=rgba(0,0,0,0.3)] - Swatch button border on hover.\n *\n * @example\n * ```html\n * <hx-color-picker value=\"#3b82f6\" format=\"hex\"></hx-color-picker>\n * ```\n *\n * @example Drupal / Twig usage\n * The `swatches` property must be set via JavaScript (Drupal behavior) because arrays\n * cannot be serialized as HTML attributes:\n * ```js\n * // my-theme/js/color-picker-behavior.js\n * Drupal.behaviors.helixColorPicker = {\n * attach(context) {\n * context.querySelectorAll('hx-color-picker[data-swatches]').forEach((el) => {\n * el.swatches = JSON.parse(el.dataset.swatches);\n * });\n * },\n * };\n * ```\n * ```twig\n * <hx-color-picker\n * value=\"{{ color }}\"\n * data-swatches='{{ swatches | json_encode }}'\n * ></hx-color-picker>\n * ```\n */\n@customElement('hx-color-picker')\nexport class HelixColorPicker extends HelixElement {\n static override styles = [helixColorPickerStyles];\n\n /**\n * Declares this element as form-associated so it participates in native form submission.\n * @internal\n */\n static override formAssociated = true;\n\n constructor() {\n super();\n // P1-1: Store bound references so connectedCallback/disconnectedCallback use the same object\n /** @internal */\n this._boundPointerMove = this._handlePointerMove.bind(this);\n /** @internal */\n this._boundPointerUp = this._handlePointerUp.bind(this);\n /** @internal */\n this._boundDocumentClick = this._handleDocumentClick.bind(this);\n }\n\n // ─── Public Properties ───────────────────────────────────────────────────\n\n /**\n * Current color value as a CSS color string.\n * @attr value\n */\n @property({ type: String, reflect: true })\n value = '#000000';\n\n /**\n * Output format for the color value.\n * @attr format\n */\n @property({ type: String, reflect: true })\n format: ColorFormat = 'hex';\n\n /**\n * Whether to show the alpha/opacity channel slider and include alpha in the output.\n * @attr opacity\n */\n @property({ type: Boolean, reflect: true })\n opacity = false;\n\n /**\n * Array of preset swatch color strings.\n * Set via JS property only — arrays cannot be serialized as HTML attributes.\n * In Drupal/Twig, use a behavior to read `data-swatches` and set this property.\n * See JSDoc example above.\n */\n @property({ attribute: false })\n swatches: string[] = [];\n\n /**\n * When true, hides the gradient grid and sliders, showing only swatches and the input.\n * Useful for compact preset-only color selection UIs.\n * @attr swatches-only\n */\n @property({ type: Boolean, reflect: true, attribute: 'swatches-only' })\n swatchesOnly = false;\n\n /**\n * Whether the control is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Form field name for form participation.\n * @attr name\n */\n @property({ type: String, reflect: true })\n name = '';\n\n /**\n * When true the picker is shown inline instead of in a popover.\n * @attr inline\n */\n @property({ type: Boolean, reflect: true })\n inline = false;\n\n /**\n * When true, the picker requires a non-empty value for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /** Accessible label for the color gradient canvas. */\n @property({ type: String, attribute: 'label-gradient' })\n labelGradient = 'Color gradient';\n\n /** Accessible label for the hue slider. */\n @property({ type: String, attribute: 'label-hue' })\n labelHue = 'Hue';\n\n /** Accessible label for the opacity slider. */\n @property({ type: String, attribute: 'label-opacity' })\n labelOpacity = 'Opacity';\n\n /** Accessible label for the preset color swatches section. */\n @property({ type: String, attribute: 'label-swatches' })\n labelSwatches = 'Preset colors';\n\n /** Accessible label for the format-switch button. */\n @property({ type: String, attribute: 'label-switch-format' })\n labelSwitchFormat = 'Switch color format';\n\n /** Accessible label for the color value input. */\n @property({ type: String, attribute: 'label-color-value' })\n labelColorValue = 'Color value';\n\n /** Accessible label for the color picker dialog/panel. */\n @property({ type: String, attribute: 'label-picker' })\n labelPicker = 'Color picker';\n\n /**\n * Generates the accessible label for the trigger button.\n * @param color - current color value string\n */\n @property({ attribute: false })\n labelTrigger: (color: string) => string = (color) => `Choose color: ${color}`;\n\n // ─── Internal State ──────────────────────────────────────────────────────\n\n /**\n * Internal HSV representation of the current color, used to drive all picker UI elements.\n * @internal\n */\n @state() private _hsv: HSV = { h: 0, s: 0, v: 0, a: 1 };\n /**\n * Whether the color picker popover panel is currently open.\n * @internal\n */\n @state() private _open = false;\n /**\n * The formatted color string displayed in the text input, kept in sync with `_hsv` and `format`.\n * @internal\n */\n @state() private _inputValue = '#000000';\n\n // ─── Cached element references ───────────────────────────────────────────\n\n /** Cached reference to the gradient grid element. @internal */\n @query('[part=\"grid\"]') private _gridEl!: HTMLElement | null;\n /** Cached reference to the hue slider element. @internal */\n @query('[part=\"hue-slider\"]') private _hueSliderEl!: HTMLElement | null;\n /** Cached reference to the opacity slider element. @internal */\n @query('[part=\"opacity-slider\"]') private _opacitySliderEl!: HTMLElement | null;\n\n // ─── Dragging state (not reactive, managed manually) ─────────────────────\n\n /**\n * Whether the user is actively dragging within the gradient grid.\n * @internal\n */\n private _draggingGrid = false;\n /**\n * Whether the user is actively dragging the hue slider thumb.\n * @internal\n */\n private _draggingHue = false;\n /**\n * Whether the user is actively dragging the opacity slider thumb.\n * @internal\n */\n private _draggingOpacity = false;\n\n /**\n * Cached bounding rect from pointerdown; avoids repeated getBoundingClientRect on every pointermove.\n * @internal\n */\n private _dragRect: DOMRect | null = null;\n\n // P1-1: Stored bound references to prevent memory leaks\n /**\n * Stable bound reference to the pointermove handler, stored to allow correct listener removal.\n * @internal\n */\n private _boundPointerMove: (e: PointerEvent) => void;\n /**\n * Stable bound reference to the pointerup handler, stored to allow correct listener removal.\n * @internal\n */\n private _boundPointerUp: () => void;\n /**\n * Stable bound reference to the document click handler, stored to allow correct listener removal.\n * @internal\n */\n private _boundDocumentClick: (e: MouseEvent) => void;\n\n // ─── Lifecycle ───────────────────────────────────────────────────────────\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._syncFromValue();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n // P1-1: Remove using the same stored references added in connectedCallback\n // Guard for SSR — document is unavailable server-side\n if (typeof document !== 'undefined') {\n document.removeEventListener('click', this._boundDocumentClick, true);\n document.removeEventListener('pointermove', this._boundPointerMove);\n document.removeEventListener('pointerup', this._boundPointerUp);\n }\n }\n\n override willUpdate(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('value')) {\n this._syncFromValue();\n }\n if (changedProperties.has('required')) {\n this._updateValidity();\n }\n }\n\n // ─── Sync ────────────────────────────────────────────────────────────────\n\n /** @internal */\n private _syncFromValue(): void {\n const parsed = parseColor(this.value);\n if (parsed) {\n this._hsv = parsed;\n }\n this._inputValue = formatColor(this._hsv, this.format, this.opacity);\n this._internals.setFormValue(this.value);\n this._updateValidity();\n }\n\n /** @internal */\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n /** @internal */\n protected override _onFormReset(): void {\n this.value = '#000000';\n this._internals.setFormValue(null);\n }\n\n /** @internal */\n protected override _onFormStateRestore(\n state: string | File | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n /** Returns the ValidityState object. */\n override get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Returns the current validation message. */\n override get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Checks whether the picker satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /** @internal */\n private _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n 'Please select a color.',\n this.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]') ??\n this.shadowRoot?.querySelector<HTMLElement>('[part=\"grid\"]') ??\n undefined,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /** @internal */\n private _commit(source: 'drag' | 'change'): void {\n const formatted = formatColor(this._hsv, this.format, this.opacity);\n this.value = formatted;\n this._inputValue = formatted;\n this._internals.setFormValue(formatted);\n const detail = { value: formatted };\n const opts: CustomEventInit<{ value: string }> = {\n bubbles: true,\n composed: true,\n detail,\n };\n if (source === 'drag') {\n this.dispatchEvent(new CustomEvent<{ value: string }>('hx-input', opts));\n } else {\n this.dispatchEvent(new CustomEvent<{ value: string }>('hx-change', opts));\n }\n }\n\n // ─── Panel open/close ────────────────────────────────────────────────────\n\n /** @internal */\n private _show(): void {\n if (this._open || this.inline) return;\n this._open = true;\n // Guard for SSR — document is unavailable server-side\n if (typeof document !== 'undefined') {\n document.addEventListener('click', this._boundDocumentClick, true);\n }\n // WCAG 2.4.3: move focus into the panel after it renders so keyboard/AT\n // users land on the first interactive element rather than staying on the trigger.\n void this.updateComplete.then(() => {\n const panel = this.shadowRoot?.querySelector<HTMLElement>('.panel');\n // Prefer the color value input; fall back to the panel itself (tabindex=\"-1\").\n const firstFocusable = panel?.querySelector<HTMLElement>('input, button') ?? panel;\n firstFocusable?.focus();\n });\n }\n\n /** @internal */\n private _hide(): void {\n if (!this._open) return;\n this._open = false;\n // Guard for SSR — document is unavailable server-side\n if (typeof document !== 'undefined') {\n document.removeEventListener('click', this._boundDocumentClick, true);\n }\n }\n\n /** @internal */\n private _handleDocumentClick(e: MouseEvent): void {\n if (!this._open) return;\n if (!e.composedPath().includes(this)) {\n this._hide();\n }\n }\n\n /** @internal */\n private _handleTriggerClick(e: MouseEvent): void {\n e.stopPropagation();\n if (this._open) {\n this._hide();\n } else {\n this._show();\n }\n }\n\n /** @internal */\n private _handlePanelKeydown(e: KeyboardEvent): void {\n if (e.key === 'Escape') {\n e.stopPropagation();\n this._hide();\n this.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]')?.focus();\n }\n }\n\n // ─── Gradient grid dragging ───────────────────────────────────────────────\n\n /** @internal */\n private _handleGridPointerDown(e: PointerEvent): void {\n if (this.disabled) return;\n e.preventDefault();\n this._draggingGrid = true;\n // Cache rect at pointerdown — element doesn't move during drag\n this._dragRect = this._gridEl?.getBoundingClientRect() ?? null;\n (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n // Guard for SSR — document is unavailable server-side\n if (typeof document !== 'undefined') {\n document.addEventListener('pointermove', this._boundPointerMove);\n document.addEventListener('pointerup', this._boundPointerUp);\n }\n this._updateGridFromPointer(e);\n }\n\n /** @internal */\n private _updateGridFromPointer(e: PointerEvent): void {\n const rect = this._dragRect ?? this._gridEl?.getBoundingClientRect();\n if (!rect) return;\n const x = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n const y = clamp((e.clientY - rect.top) / rect.height, 0, 1);\n this._hsv = { ...this._hsv, s: x * 100, v: (1 - y) * 100 };\n this._commit('drag');\n this.requestUpdate();\n }\n\n // P0-1: Keyboard support for gradient grid — fixes WCAG 2.1 SC 2.1.1 failure\n /** @internal */\n private _handleGridKeydown(e: KeyboardEvent): void {\n let sDelta = 0;\n let vDelta = 0;\n if (e.key === 'ArrowLeft') sDelta = -1;\n else if (e.key === 'ArrowRight') sDelta = 1;\n else if (e.key === 'ArrowUp') vDelta = 1;\n else if (e.key === 'ArrowDown') vDelta = -1;\n else if (e.key === 'PageUp') vDelta = 10;\n else if (e.key === 'PageDown') vDelta = -10;\n else if (e.key === 'Home') {\n this._hsv = { ...this._hsv, s: 0, v: 100 };\n this._commit('change');\n return;\n } else if (e.key === 'End') {\n this._hsv = { ...this._hsv, s: 100, v: 0 };\n this._commit('change');\n return;\n }\n if (sDelta !== 0 || vDelta !== 0) {\n e.preventDefault();\n this._hsv = {\n ...this._hsv,\n s: clamp(this._hsv.s + sDelta, 0, 100),\n v: clamp(this._hsv.v + vDelta, 0, 100),\n };\n this._commit('change');\n }\n }\n\n // ─── Hue slider dragging ─────────────────────────────────────────────────\n\n /** @internal */\n private _handleHuePointerDown(e: PointerEvent): void {\n if (this.disabled) return;\n e.preventDefault();\n this._draggingHue = true;\n // Cache rect at pointerdown — element doesn't move during drag\n this._dragRect = this._hueSliderEl?.getBoundingClientRect() ?? null;\n (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n // Guard for SSR — document is unavailable server-side\n if (typeof document !== 'undefined') {\n document.addEventListener('pointermove', this._boundPointerMove);\n document.addEventListener('pointerup', this._boundPointerUp);\n }\n this._updateHueFromPointer(e);\n }\n\n /** @internal */\n private _updateHueFromPointer(e: PointerEvent): void {\n const rect = this._dragRect ?? this._hueSliderEl?.getBoundingClientRect();\n if (!rect) return;\n const pct = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n this._hsv = { ...this._hsv, h: pct * 360 };\n this._commit('drag');\n this.requestUpdate();\n }\n\n // ─── Opacity slider dragging ──────────────────────────────────────────────\n\n /** @internal */\n private _handleOpacityPointerDown(e: PointerEvent): void {\n if (this.disabled) return;\n e.preventDefault();\n this._draggingOpacity = true;\n // Cache rect at pointerdown — element doesn't move during drag\n this._dragRect = this._opacitySliderEl?.getBoundingClientRect() ?? null;\n (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n // Guard for SSR — document is unavailable server-side\n if (typeof document !== 'undefined') {\n document.addEventListener('pointermove', this._boundPointerMove);\n document.addEventListener('pointerup', this._boundPointerUp);\n }\n this._updateOpacityFromPointer(e);\n }\n\n /** @internal */\n private _updateOpacityFromPointer(e: PointerEvent): void {\n const rect = this._dragRect ?? this._opacitySliderEl?.getBoundingClientRect();\n if (!rect) return;\n const pct = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n this._hsv = { ...this._hsv, a: pct };\n this._commit('drag');\n this.requestUpdate();\n }\n\n // ─── Document-level pointer handlers ─────────────────────────────────────\n\n /** @internal */\n private _handlePointerMove(e: PointerEvent): void {\n if (this._draggingGrid) this._updateGridFromPointer(e);\n else if (this._draggingHue) this._updateHueFromPointer(e);\n else if (this._draggingOpacity) this._updateOpacityFromPointer(e);\n }\n\n /** @internal */\n private _handlePointerUp(): void {\n if (this._draggingGrid || this._draggingHue || this._draggingOpacity) {\n this._draggingGrid = false;\n this._draggingHue = false;\n this._draggingOpacity = false;\n this._dragRect = null;\n // Guard for SSR — document is unavailable server-side\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointermove', this._boundPointerMove);\n document.removeEventListener('pointerup', this._boundPointerUp);\n }\n this._commit('change');\n }\n }\n\n // ─── Keyboard handling for sliders ───────────────────────────────────────\n\n /** @internal */\n private _handleHueKeydown(e: KeyboardEvent): void {\n let delta = 0;\n if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = -1;\n else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = 1;\n else if (e.key === 'PageDown') delta = -10;\n else if (e.key === 'PageUp') delta = 10;\n else if (e.key === 'Home') {\n this._hsv = { ...this._hsv, h: 0 };\n this._commit('change');\n return;\n } else if (e.key === 'End') {\n this._hsv = { ...this._hsv, h: 360 };\n this._commit('change');\n return;\n }\n if (delta !== 0) {\n e.preventDefault();\n this._hsv = { ...this._hsv, h: clamp(this._hsv.h + delta, 0, 360) };\n this._commit('change');\n }\n }\n\n /** @internal */\n private _handleOpacityKeydown(e: KeyboardEvent): void {\n let delta = 0;\n if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = -0.01;\n else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = 0.01;\n else if (e.key === 'PageDown') delta = -0.1;\n else if (e.key === 'PageUp') delta = 0.1;\n else if (e.key === 'Home') {\n this._hsv = { ...this._hsv, a: 0 };\n this._commit('change');\n return;\n } else if (e.key === 'End') {\n this._hsv = { ...this._hsv, a: 1 };\n this._commit('change');\n return;\n }\n if (delta !== 0) {\n e.preventDefault();\n this._hsv = { ...this._hsv, a: clamp(this._hsv.a + delta, 0, 1) };\n this._commit('change');\n }\n }\n\n // ─── Input ───────────────────────────────────────────────────────────────\n\n // P1-7: Bound to @input (was @change) for real-time color preview while typing\n /** @internal */\n private _handleInputChange(e: Event): void {\n const input = e.target as HTMLInputElement;\n const parsed = parseColor(input.value.trim());\n if (parsed) {\n this._hsv = parsed;\n this._commit('change');\n }\n this._inputValue = input.value;\n }\n\n /** @internal */\n private _handleInputBlur(e: FocusEvent): void {\n const input = e.target as HTMLInputElement;\n const parsed = parseColor(input.value.trim());\n if (parsed) {\n this._hsv = parsed;\n this._commit('change');\n } else {\n // Revert to current valid value\n this._inputValue = formatColor(this._hsv, this.format, this.opacity);\n }\n }\n\n /** @internal */\n private _handleFormatCycle(): void {\n const formats: ColorFormat[] = ['hex', 'rgb', 'hsl', 'hsv'];\n const idx = formats.indexOf(this.format);\n const next = formats[(idx + 1) % formats.length];\n if (next !== undefined) this.format = next;\n this._inputValue = formatColor(this._hsv, this.format, this.opacity);\n }\n\n // ─── Swatches ────────────────────────────────────────────────────────────\n\n /** @internal */\n private _handleSwatchClick(color: string): void {\n const parsed = parseColor(color);\n if (parsed) {\n this._hsv = parsed;\n this._commit('change');\n }\n }\n\n // ─── Computed values ──────────────────────────────────────────────────────\n\n /** @internal */\n private _hueColor(): string {\n return `hsl(${Math.round(this._hsv.h)}, 100%, 50%)`;\n }\n\n /** @internal */\n private _previewColor(): string {\n const rgb = hsvToRgb(this._hsv);\n if (this.opacity && this._hsv.a < 1) {\n return `rgb(${rgb.r} ${rgb.g} ${rgb.b} / ${Math.round(this._hsv.a * 100) / 100})`;\n }\n return `rgb(${rgb.r} ${rgb.g} ${rgb.b})`;\n }\n\n // ─── Render helpers ───────────────────────────────────────────────────────\n\n /** @internal */\n private _renderGrid() {\n const thumbX = `${this._hsv.s}%`;\n const thumbY = `${100 - this._hsv.v}%`;\n const hueColor = this._hueColor();\n\n // P0-1: Grid is now keyboard-operable — WCAG 2.1 SC 2.1.1 compliance\n // Arrow keys adjust saturation (left/right) and value (up/down)\n //\n // A11y note (WCAG 4.1.2 — 2D slider aria-valuenow limitation): The ARIA slider role\n // requires a single numeric aria-valuenow. This 2D control has two axes (saturation and\n // value), so aria-valuenow reports only saturation (the primary/horizontal axis) per\n // the ARIA 1.2 \"slider\" pattern. aria-valuetext compensates by announcing both axes\n // (\"Saturation X%, Value Y%\") for all assistive technologies that support it.\n return html`\n <div\n part=\"grid\"\n class=\"gradient-grid\"\n role=\"slider\"\n tabindex=\"0\"\n aria-label=${this.labelGradient}\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow=${Math.round(this._hsv.s)}\n aria-valuetext=\"Saturation ${Math.round(this._hsv.s)}%, Value ${Math.round(this._hsv.v)}%\"\n @pointerdown=${this._handleGridPointerDown}\n @keydown=${this._handleGridKeydown}\n >\n <div class=\"gradient-grid-bg\" style=${styleMap({ '--_hue-color': hueColor })}></div>\n <div\n class=\"gradient-thumb\"\n style=${styleMap({ '--_thumb-x': thumbX, '--_thumb-y': thumbY })}\n aria-hidden=\"true\"\n ></div>\n </div>\n `;\n }\n\n /** @internal */\n private _renderHueSlider() {\n const pct = `${(this._hsv.h / 360) * 100}%`;\n const hueColor = this._hueColor();\n\n // P1-8: part=\"slider hue-slider\" — exposes the documented shared \"slider\" CSS part\n // P1-4: aria-valuetext announces the hue angle with degree symbol\n return html`\n <div\n part=\"slider hue-slider\"\n class=\"slider-track hue-track\"\n role=\"slider\"\n tabindex=\"0\"\n aria-label=${this.labelHue}\n aria-valuemin=\"0\"\n aria-valuemax=\"360\"\n aria-valuenow=${Math.round(this._hsv.h)}\n aria-valuetext=\"${Math.round(this._hsv.h)}°\"\n @pointerdown=${this._handleHuePointerDown}\n @keydown=${this._handleHueKeydown}\n >\n <div\n class=\"slider-thumb\"\n style=${styleMap({ '--_slider-pct': pct, '--_thumb-color': hueColor })}\n aria-hidden=\"true\"\n ></div>\n </div>\n `;\n }\n\n /** @internal */\n private _renderOpacitySlider() {\n if (!this.opacity) return nothing;\n const pct = `${this._hsv.a * 100}%`;\n const rgb = hsvToRgb(this._hsv);\n const thumbColor = `rgb(${rgb.r} ${rgb.g} ${rgb.b} / ${Math.round(this._hsv.a * 100) / 100})`;\n const hueColor = this._hueColor();\n\n // P1-8: part=\"slider opacity-slider\" — exposes the documented shared \"slider\" CSS part\n // P1-4: aria-valuetext announces the opacity as a percentage\n return html`\n <div\n part=\"slider opacity-slider\"\n class=\"slider-track opacity-track\"\n role=\"slider\"\n tabindex=\"0\"\n aria-label=${this.labelOpacity}\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow=${Math.round(this._hsv.a * 100)}\n aria-valuetext=\"${Math.round(this._hsv.a * 100)}%\"\n style=${styleMap({ '--_hue-color': hueColor })}\n @pointerdown=${this._handleOpacityPointerDown}\n @keydown=${this._handleOpacityKeydown}\n >\n <div\n class=\"slider-thumb\"\n style=${styleMap({ '--_slider-pct': pct, '--_thumb-color': thumbColor })}\n aria-hidden=\"true\"\n ></div>\n </div>\n `;\n }\n\n /** @internal */\n private _renderSwatches() {\n if (!this.swatches?.length) return nothing;\n return html`\n <div part=\"swatches\" class=\"swatches\" role=\"group\" aria-label=${this.labelSwatches}>\n ${this.swatches.map(\n (color) => html`\n <button\n type=\"button\"\n class=\"swatch-btn\"\n style=${styleMap({ background: color })}\n aria-label=${color}\n title=${color}\n @click=${() => this._handleSwatchClick(color)}\n ></button>\n `,\n )}\n </div>\n `;\n }\n\n /** @internal */\n private _renderInput() {\n return html`\n <div part=\"input\" class=\"input-area\">\n <div\n class=\"input-preview\"\n style=${styleMap({ '--_preview-color': this._previewColor() })}\n aria-hidden=\"true\"\n ></div>\n <button\n type=\"button\"\n class=\"format-btn\"\n aria-label=${this.labelSwitchFormat}\n title=\"Switch format\"\n @click=${this._handleFormatCycle}\n >\n ${this.format}\n </button>\n <input\n type=\"text\"\n class=\"color-input\"\n .value=${this._inputValue}\n aria-label=${this.labelColorValue}\n autocomplete=\"off\"\n spellcheck=\"false\"\n @input=${this._handleInputChange}\n @blur=${this._handleInputBlur}\n />\n </div>\n `;\n }\n\n /** @internal */\n private _renderPanel() {\n // A11y fix (WCAG 4.1.2): use role=\"group\" instead of role=\"dialog\" + aria-modal=\"true\".\n // aria-modal=\"true\" requires a programmatic focus trap so screen readers restrict virtual\n // cursor navigation to the dialog. Without Tab-key trapping, aria-modal causes JAWS/NVDA\n // to hide all content outside the panel, stranding keyboard users who Tab out. role=\"group\"\n // with aria-label provides the same grouping semantics without the false modal contract.\n return html`\n <div\n class=\"panel\"\n role=\"group\"\n aria-label=${this.labelPicker}\n tabindex=\"-1\"\n @keydown=${this._handlePanelKeydown}\n >\n ${this.swatchesOnly\n ? nothing\n : html`${this._renderGrid()} ${this._renderHueSlider()} ${this._renderOpacitySlider()}`}\n ${this._renderSwatches()} ${this._renderInput()}\n </div>\n `;\n }\n\n // ─── Main render ─────────────────────────────────────────────────────────\n\n override render() {\n const previewColor = this._previewColor();\n\n if (this.inline) {\n return html`\n <div style=${styleMap({ '--_preview-color': previewColor })}>${this._renderPanel()}</div>\n `;\n }\n\n // P1-3: aria-label includes the current color value so AT users know the selected color\n return html`\n <button\n part=\"trigger\"\n type=\"button\"\n class=\"trigger\"\n aria-label=${this.labelTrigger(this._inputValue)}\n aria-expanded=${this._open ? 'true' : 'false'}\n ?disabled=${this.disabled}\n style=${styleMap({ '--_preview-color': previewColor })}\n @click=${this._handleTriggerClick}\n >\n <slot name=\"trigger\">\n <span class=\"trigger-swatch\" aria-hidden=\"true\"></span>\n <span class=\"trigger-label\">${this._inputValue}</span>\n </slot>\n </button>\n ${this._open ? this._renderPanel() : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-color-picker': HelixColorPicker;\n }\n}\n"],"names":["helixColorPickerStyles","css","clamp","n","min","max","hexToRgb","hex","h","toHex2","rgbToHex","rgb","includeAlpha","base","rgbToHsv","r","g","b","d","s","v","hsvToRgb","hsv","i","f","p","q","t","rgbToHsl","l","parseColor","value","rgbMatch","rm1","rm2","rm3","rm4","hslMatch","hm1","hm2","hm3","hm4","a","c","x","m","hsvMatch","formatColor","format","hsl","HelixColorPicker","HelixElement","color","changedProperties","parsed","disabled","state","_mode","_a","_b","source","formatted","opts","panel","firstFocusable","e","rect","y","sDelta","vDelta","pct","delta","input","formats","idx","next","thumbX","thumbY","hueColor","html","styleMap","nothing","thumbColor","previewColor","__decorateClass","property","query","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-combobox-BJ4lQocO.js","sources":["../../src/components/hx-combobox/hx-combobox.styles.ts","../../src/components/hx-combobox/hx-combobox.ts"],"sourcesContent":["import { css } from 'lit';\n\n// prettier-ignore\nexport const helixComboboxStyles = css`:host{display:block}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-combobox-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-combobox-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{position:relative;display:flex;align-items:center;border:var(--hx-border-width-thin, 1px) solid var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-combobox-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}.field__input-wrapper:focus-within{border-color:var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__prefix,.field__suffix{display:flex;align-items:center;padding:0 var(--hx-space-2, .5rem);color:var(--hx-color-neutral-500, #6c757d);flex-shrink:0}.field__input{flex:1;min-width:0;min-height:var(--hx-input-height-md, var(--hx-size-10, 2.5rem));border:none;background:transparent;outline:none;font-family:inherit;font-size:var(--hx-font-size-md, 1rem);line-height:var(--hx-line-height-normal, 1.5);color:var(--hx-combobox-color, var(--hx-color-neutral-800, #212529));padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem)}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input--sm{min-height:var(--hx-input-height-sm, var(--hx-size-8, 2rem));font-size:var(--hx-font-size-sm, .875rem);padding:var(--hx-space-1, .25rem) var(--hx-space-3, .75rem)}.field__input--lg{min-height:var(--hx-input-height-lg, var(--hx-size-12, 3rem));font-size:var(--hx-font-size-lg, 1.125rem);padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem)}.field__clear-button,.field__loading-indicator{display:flex;align-items:center;justify-content:center;margin-inline-end:var(--hx-space-2, .5rem);flex-shrink:0;color:var(--hx-color-neutral-400, #adb5bd)}.field__clear-button{width:1.25rem;height:1.25rem;border:none;background:transparent;cursor:pointer;padding:0;border-radius:var(--hx-border-radius-full, 9999px);transition:color var(--hx-transition-fast, .15s ease)}.field__clear-button:hover{color:var(--hx-color-neutral-700, #343a40)}.field__clear-button:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px)}.field__loading-indicator{width:1rem;height:1rem}.field__loading-spinner{width:1rem;height:1rem;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:hx-spin .7s linear infinite}@keyframes hx-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.field__loading-spinner{animation:none}}.field__listbox{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;right:0;z-index:var(--hx-z-index-dropdown, 100);background-color:var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-combobox-border-radius, var(--hx-border-radius-md, .375rem));box-shadow:var( --hx-combobox-listbox-shadow, 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0d1117) 12%, transparent) );max-height:var(--hx-combobox-listbox-max-height, 16rem);overflow:hidden;display:flex;flex-direction:column}.field__listbox[hidden]{display:none}.field__options{overflow-y:auto;flex:1;padding:var(--hx-space-1, .25rem) 0}.field__option{display:flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-size:var(--hx-font-size-md, 1rem);color:var(--hx-combobox-color, var(--hx-color-neutral-800, #212529));cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color var(--hx-transition-fast, .15s ease)}.field__option:hover{background-color:var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff))}.field__option--selected{background-color:var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));font-weight:var(--hx-font-weight-medium, 500)}.field__option--focused{background-color:var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-combobox-option-focus-ring-offset, -2px)}.field__option--focused.field__option--selected{background-color:var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe))}.field__option--disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}.field__option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field__no-options{padding:var(--hx-space-3, .75rem);text-align:center;color:var(--hx-color-neutral-400, #adb5bd);font-size:var(--hx-font-size-sm, .875rem)}.field__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__option,.field__clear-button,.field__chip-remove{transition:none}}:host([multiple]) .field__input-wrapper{flex-wrap:wrap;padding:var(--hx-space-1, .25rem);gap:var(--hx-space-1, .25rem);align-items:center}:host([multiple]) .field__input{min-width:8rem;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);flex-shrink:1}.field__chip{display:inline-flex;align-items:center;gap:var(--hx-space-1, .25rem);padding:0 var(--hx-space-1, .25rem) 0 var(--hx-space-2, .5rem);height:1.5rem;background-color:var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));color:var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e40af));border-radius:var(--hx-border-radius-full, 9999px);font-size:var(--hx-font-size-sm, .875rem);white-space:nowrap;max-width:12rem;flex-shrink:0}.field__chip-label{overflow:hidden;text-overflow:ellipsis;max-width:8rem}.field__chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1rem;height:1rem;border:none;background:none;cursor:pointer;padding:0;color:inherit;opacity:.7;border-radius:50%;line-height:1;transition:opacity var(--hx-transition-fast, .15s ease)}.field__chip-remove:hover{opacity:1;background-color:var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe))}.field__chip-remove:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px);opacity:1}`;\n","import { LitElement, 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 { repeat } from 'lit/directives/repeat.js';\nimport { helixComboboxStyles } from './hx-combobox.styles.js';\n\n// ─── Internal option model ───\n\n// P1-7: Exported so TypeScript consumers can type option arrays programmatically\nexport interface ComboboxOption {\n value: string;\n label: string;\n disabled: boolean;\n}\n\n// P2-13: Exported size type for TypeScript consumers\nexport type HxComboboxSize = 'sm' | 'md' | 'lg';\n\n// P2-6: Module-level counter for deterministic, collision-free IDs\nlet _comboboxIdCounter = 0;\n\n/**\n * A form-associated combobox component combining a text input with a listbox\n * for autocomplete and typeahead. Supports filtering, free-text entry,\n * keyboard navigation, and async option loading.\n *\n * @summary Form-associated combobox with autocomplete, filtering, and keyboard navigation.\n *\n * @tag hx-combobox\n *\n * @slot option - Slot for `<option>` elements that populate the listbox.\n * @slot prefix - Content to display before the text input.\n * @slot suffix - Content to display after the text input.\n * @slot empty-label - Content shown when no options match the filter.\n * @slot label - Custom label content (overrides the label property).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{value: string}>} hx-input - Dispatched on each keystroke as the user types.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when an option is selected.\n * @fires {CustomEvent<void>} hx-clear - Dispatched when the clear button is activated.\n * @fires {CustomEvent<void>} hx-show - Dispatched when the listbox opens.\n * @fires {CustomEvent<void>} hx-hide - Dispatched when the listbox closes.\n *\n * @csspart input - The native text input element.\n * @csspart listbox - The dropdown panel containing options.\n * @csspart trigger - The input wrapper element acting as the combobox trigger.\n * @csspart clear-button - The button that clears the current value.\n * @csspart loading-indicator - The loading spinner shown during async operations.\n * @csspart field - The outer field wrapper element.\n * @csspart label - The label element.\n * @csspart option - An individual option item in the listbox.\n * @csspart error - The error message element.\n * @csspart help-text - The help text element.\n *\n * @cssprop [--hx-combobox-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-combobox-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-combobox-border-color=var(--hx-color-neutral-300)] - Border color.\n * @cssprop [--hx-combobox-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-combobox-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-combobox-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-combobox-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-combobox-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-combobox-listbox-bg=var(--hx-color-neutral-0)] - Listbox background color.\n * @cssprop [--hx-combobox-option-hover-bg=var(--hx-color-primary-50)] - Option hover background.\n * @cssprop [--hx-combobox-option-selected-bg=var(--hx-color-primary-100)] - Selected option background.\n */\n@customElement('hx-combobox')\nexport class HelixCombobox extends LitElement {\n static override styles = [helixComboboxStyles];\n\n // ─── Form Association ───\n\n /** Marks this element as form-associated for ElementInternals support. @internal */\n static formAssociated = true;\n\n /** Holds the ElementInternals instance used for form value and validity management. @internal */\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /** @internal */\n this._internals = this.attachInternals();\n }\n\n // ─── Stable IDs ───\n\n // P2-6: Use module-level counter instead of Math.random() to guarantee uniqueness\n /** @internal */\n private _id = `hx-combobox-${++_comboboxIdCounter}`;\n /** @internal */\n private _listboxId = `${this._id}-listbox`;\n /** @internal */\n private _helpTextId = `${this._id}-help`;\n /** @internal */\n private _errorId = `${this._id}-error`;\n /** @internal */\n private _labelId = `${this._id}-label`;\n /** @internal */\n private _liveRegionId = `${this._id}-live`;\n\n // ─── Public Properties ───\n\n /**\n * The visible label text for the combobox.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Placeholder text shown in the input when no value is entered.\n * @attr placeholder\n */\n @property({ type: String })\n placeholder = '';\n\n /**\n * The current value of the combobox.\n * @attr value\n */\n @property({ type: String, reflect: true })\n value = '';\n\n /**\n * Whether the combobox is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the combobox is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The name used for form submission.\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * Error message to display. When set, the field enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the combobox for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Size variant of the combobox.\n * @attr hx-size\n */\n @property({ type: String, attribute: 'hx-size', reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether multiple options can be selected.\n * @attr multiple\n */\n @property({ type: Boolean, reflect: true })\n multiple = false;\n\n /**\n * Whether the combobox shows a clear button when a value is set.\n * @attr clearable\n */\n @property({ type: Boolean, reflect: true })\n clearable = false;\n\n /**\n * Whether the combobox is in a loading state (shows spinner).\n * @attr loading\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * Debounce delay in milliseconds for the filter input event.\n * @attr filter-debounce\n */\n @property({ type: Number, attribute: 'filter-debounce' })\n filterDebounce = 0;\n\n /**\n * Accessible name for screen readers, if different from the visible label.\n * @attr aria-label\n */\n @property({ type: String, attribute: 'aria-label' })\n override ariaLabel: string | null = null;\n\n /**\n * Text shown when no options match the current filter.\n * @attr label-no-options\n */\n @property({ type: String, attribute: 'label-no-options' })\n labelNoOptions = 'No options found';\n\n /**\n * Validation message shown when the field is required but empty.\n * @attr label-required\n */\n @property({ type: String, attribute: 'label-required' })\n labelRequired = 'Please select an option.';\n\n /**\n * Generates the accessible label for multi-select chip remove buttons.\n * @param label - the option label text\n */\n @property({ attribute: false })\n labelRemoveOption: (label: string) => string = (label) => `Remove ${label}`;\n\n // ─── Internal State ───\n\n /** Parsed option models derived from slotted `<option>` and `<optgroup>` elements. @internal */\n @state() private _options: ComboboxOption[] = [];\n /** Current text typed in the input, used to filter the option list. @internal */\n @state() private _filterText = '';\n /** Whether the listbox dropdown is currently visible. @internal */\n @state() private _open = false;\n /** Zero-based index of the keyboard-focused option within the filtered list; -1 means none. @internal */\n @state() private _focusedOptionIndex = -1;\n /** Whether the named error slot contains projected content. @internal */\n @state() private _hasErrorSlot = false;\n /** Live-region announcement text describing the current number of filtered options. @internal */\n @state() private _filterAnnouncement = '';\n\n // ─── Queries ───\n\n /** Reference to the native text input element inside the shadow DOM. @internal */\n @query('.field__input')\n private _input: HTMLInputElement | undefined;\n\n // ─── Debounce timer ───\n\n /** @internal */\n private _debounceTimer: ReturnType<typeof setTimeout> | null = null;\n\n // ─── Multiple Selection ───\n\n // P0-1: Derive selected values Set from the comma-separated value property\n /** @internal */\n private get _selectedValuesSet(): Set<string> {\n if (!this.multiple || !this.value) return new Set();\n return new Set(this.value.split(',').filter(Boolean));\n }\n\n // ─── Filtered options ───\n\n /** @internal */\n private get _filteredOptions(): ComboboxOption[] {\n if (!this._filterText) return this._options;\n const lower = this._filterText.toLowerCase();\n return this._options.filter((o) => o.label.toLowerCase().includes(lower));\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n // Safety net: remove listener if component is removed while dropdown is open\n if (typeof document !== 'undefined') {\n document.removeEventListener('click', this._handleOutsideClick);\n }\n if (this._debounceTimer !== null) {\n clearTimeout(this._debounceTimer);\n }\n // Reset open state to prevent persisted open state on reconnect\n if (this._open) {\n this._open = false;\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this._updateFormValue();\n this._updateValidity();\n }\n }\n\n // ─── Form Integration ───\n\n /** Returns the associated form element, if any. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** Returns the validation message. */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Returns the ValidityState object. */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Checks whether the combobox satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /** @internal */\n private _updateFormValue(): void {\n this._internals.setFormValue(this.value || null);\n }\n\n /** @internal */\n private _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || this.labelRequired,\n this._input,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /** @internal */\n formResetCallback(): void {\n this.value = '';\n this._filterText = '';\n this._internals.setFormValue(null);\n }\n\n /** @internal */\n // P1-6: Correct signature per WHATWG spec — includes mode param and all state types\n formStateRestoreCallback(\n state: string | File | FormData | null,\n _mode?: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n /** @internal */\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Option Syncing from Slot ───\n\n /** @internal */\n private _handleSlotChange(): void {\n this._readOptions();\n }\n\n /** @internal */\n private _parseOption(el: HTMLOptionElement): ComboboxOption {\n return { value: el.value, label: el.textContent?.trim() ?? el.value, disabled: el.disabled };\n }\n\n /** @internal */\n private _readOptions(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"option\"]');\n if (!slot) return;\n\n const parsed: ComboboxOption[] = [];\n\n for (const el of slot.assignedElements({ flatten: true })) {\n if (el instanceof HTMLOptionElement) {\n parsed.push(this._parseOption(el));\n } else if (el instanceof HTMLOptGroupElement) {\n for (const child of Array.from(el.children)) {\n if (child instanceof HTMLOptionElement) parsed.push(this._parseOption(child));\n }\n }\n }\n\n this._options = parsed;\n }\n\n // ─── Slot Change Handlers ───\n\n /** @internal */\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Dropdown Control ───\n\n /** @internal */\n private _openDropdown(): void {\n if (this.disabled || this._open) return;\n this._open = true;\n this._focusedOptionIndex = -1;\n if (typeof document !== 'undefined') {\n document.addEventListener('click', this._handleOutsideClick);\n }\n this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _closeDropdown(): void {\n if (!this._open) return;\n this._open = false;\n this._focusedOptionIndex = -1;\n if (typeof document !== 'undefined') {\n document.removeEventListener('click', this._handleOutsideClick);\n }\n this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n }\n\n // ─── Input Handling ───\n\n /** @internal */\n private _handleInput(e: Event): void {\n const input = e.target as HTMLInputElement;\n this._filterText = input.value;\n\n if (!this._open) {\n this._openDropdown();\n }\n\n this._focusedOptionIndex = -1;\n\n if (this.filterDebounce > 0) {\n if (this._debounceTimer !== null) {\n clearTimeout(this._debounceTimer);\n }\n this._debounceTimer = setTimeout(() => {\n this._emitInput();\n this._announceFilterResults();\n }, this.filterDebounce);\n } else {\n this._emitInput();\n this._announceFilterResults();\n }\n }\n\n /** @internal */\n private _announceFilterResults(): void {\n const count = this._filteredOptions.length;\n this._filterAnnouncement =\n count === 0\n ? 'No matching options'\n : `${count} ${count === 1 ? 'option' : 'options'} available`;\n }\n\n /** @internal */\n private _emitInput(): void {\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-input', {\n bubbles: true,\n composed: true,\n detail: { value: this._filterText },\n }),\n );\n }\n\n /** @internal */\n private _handleFocus(): void {\n this._openDropdown();\n }\n\n // ─── Keyboard Navigation ───\n\n /** @internal */\n private _handleKeydown(e: KeyboardEvent): void {\n if (this.disabled) return;\n\n const filtered = this._filteredOptions;\n const enabledIndices = filtered\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled)\n .map(({ i }) => i);\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n if (!this._open) {\n this._openDropdown();\n this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? 0) : -1;\n break;\n }\n const nextDown = enabledIndices.find((i) => i > this._focusedOptionIndex);\n this._focusedOptionIndex =\n nextDown !== undefined ? nextDown : (enabledIndices[0] ?? this._focusedOptionIndex);\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n if (!this._open) {\n this._openDropdown();\n const lastEnabled = enabledIndices[enabledIndices.length - 1];\n this._focusedOptionIndex = lastEnabled !== undefined ? lastEnabled : -1;\n break;\n }\n const prevUp = [...enabledIndices].reverse().find((i) => i < this._focusedOptionIndex);\n const lastEnabledUp = enabledIndices[enabledIndices.length - 1];\n this._focusedOptionIndex =\n prevUp !== undefined ? prevUp : (lastEnabledUp ?? this._focusedOptionIndex);\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (!this._open) {\n this._openDropdown();\n break;\n }\n if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < filtered.length) {\n const opt = filtered[this._focusedOptionIndex];\n if (opt) this._selectOption(opt);\n }\n break;\n }\n case 'Escape': {\n e.preventDefault();\n this._closeDropdown();\n this._filterText = '';\n if (this._input) this._input.value = '';\n break;\n }\n case 'Tab': {\n this._closeDropdown();\n break;\n }\n // P1-1: Home/End keyboard navigation for option list\n case 'Home': {\n e.preventDefault();\n if (!this._open) this._openDropdown();\n this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? -1) : -1;\n break;\n }\n case 'End': {\n e.preventDefault();\n if (!this._open) this._openDropdown();\n this._focusedOptionIndex =\n enabledIndices.length > 0 ? (enabledIndices[enabledIndices.length - 1] ?? -1) : -1;\n break;\n }\n default:\n break;\n }\n }\n\n // ─── Selection ───\n\n // P0-1: Handle both single and multiple selection modes\n /** @internal */\n private _selectOption(option: ComboboxOption): void {\n if (option.disabled) return;\n if (this.multiple) {\n const current = this._selectedValuesSet;\n const next = new Set(current);\n if (next.has(option.value)) {\n next.delete(option.value);\n } else {\n next.add(option.value);\n }\n this.value = [...next].join(',');\n // Keep dropdown open for multiple selection so user can pick more\n } else {\n this.value = option.value;\n this._closeDropdown();\n }\n this._filterText = '';\n if (this._input) this._input.value = '';\n this._dispatchChange();\n }\n\n // P0-1: Remove a single value from multi-selection\n /** @internal */\n private _removeValue(val: string): void {\n const next = this._selectedValuesSet;\n next.delete(val);\n this.value = [...next].join(',');\n this._dispatchChange();\n }\n\n // ─── Clear ───\n\n /** @internal */\n private _handleClear(e: Event): void {\n e.stopPropagation();\n this.value = '';\n this._filterText = '';\n if (this._input) {\n this._input.value = '';\n this._input.focus();\n }\n this._internals.setFormValue(null);\n this._updateValidity();\n this.dispatchEvent(new CustomEvent<void>('hx-clear', { bubbles: true, composed: true }));\n }\n\n // ─── Event Dispatchers ───\n\n /** @internal */\n private _dispatchChange(): void {\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Outside Click Handler ───\n\n /** @internal */\n private _handleOutsideClick = (e: MouseEvent): void => {\n if (this._open && !e.composedPath().includes(this)) {\n this._closeDropdown();\n }\n };\n\n // ─── Public Methods ───\n\n /** Moves focus to the text input. */\n override focus(options?: FocusOptions): void {\n this._input?.focus(options);\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _optionId(index: number): string {\n return `${this._id}-option-${index}`;\n }\n\n /** @internal */\n private get _displayValue(): string {\n // P0-1: In multiple mode, chips render selected values — input shows only filter text\n if (this.multiple) return '';\n if (!this.value) return '';\n const opt = this._options.find((o) => o.value === this.value);\n return opt ? opt.label : this.value;\n }\n\n /** @internal */\n private _renderOptions() {\n const filtered = this._filteredOptions;\n\n if (filtered.length === 0) {\n return html`\n <slot name=\"empty-label\">\n <div class=\"field__no-options\">${this.labelNoOptions}</div>\n </slot>\n `;\n }\n\n return repeat(\n filtered,\n (opt) => opt.value,\n (opt, index) => {\n // P0-1: Use Set membership for multiple mode, direct equality for single mode\n const isSelected = this.multiple\n ? this._selectedValuesSet.has(opt.value)\n : opt.value === this.value;\n const isFocused = index === this._focusedOptionIndex;\n\n return html`\n <div\n id=${this._optionId(index)}\n part=\"option\"\n role=\"option\"\n class=${classMap({\n field__option: true,\n 'field__option--selected': isSelected,\n 'field__option--focused': isFocused,\n 'field__option--disabled': opt.disabled,\n })}\n aria-selected=${this.multiple\n ? isSelected\n ? 'true'\n : 'false'\n : isSelected\n ? 'true'\n : nothing}\n aria-disabled=${opt.disabled ? 'true' : nothing}\n @click=${() => this._selectOption(opt)}\n >\n <span class=\"field__option-label\">${opt.label}</span>\n </div>\n `;\n },\n );\n }\n\n // ─── Main Render ───\n\n override render() {\n const hasError = !!this.error;\n const showClear = this.clearable && !!this.value && !this.disabled;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n 'field--open': this._open,\n };\n\n const inputClasses = {\n field__input: true,\n [`field__input--${this.size}`]: true,\n };\n\n const describedBy =\n [\n hasError || this._hasErrorSlot ? this._errorId : null,\n this.helpText ? this._helpTextId : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined;\n\n const activedescendant =\n this._open && this._focusedOptionIndex >= 0\n ? this._optionId(this._focusedOptionIndex)\n : undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <!-- Label -->\n <slot name=\"label\">\n ${this.label\n ? html`<label id=${this._labelId} for=${this._id} part=\"label\" class=\"field__label\">\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </label>`\n : nothing}\n </slot>\n\n <!-- Input Wrapper -->\n <div part=\"trigger\" class=\"field__input-wrapper\">\n <!-- Prefix Slot -->\n <slot name=\"prefix\" class=\"field__prefix\"></slot>\n\n <!-- P0-1: Selected value chips for multiple mode -->\n ${this.multiple && this._selectedValuesSet.size > 0\n ? [...this._selectedValuesSet].map((val) => {\n const opt = this._options.find((o) => o.value === val);\n const label = opt ? opt.label : val;\n return html`\n <span class=\"field__chip\">\n <span class=\"field__chip-label\">${label}</span>\n <button\n type=\"button\"\n class=\"field__chip-remove\"\n aria-label=${this.labelRemoveOption(label)}\n @click=${(e: Event) => {\n e.stopPropagation();\n this._removeValue(val);\n }}\n >\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M1 1L7 7M7 1L1 7\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n </span>\n `;\n })\n : nothing}\n\n <!-- Text Input (combobox role) -->\n <input\n part=\"input\"\n type=\"text\"\n id=${this._id}\n class=${classMap(inputClasses)}\n role=\"combobox\"\n aria-expanded=${this._open ? 'true' : 'false'}\n aria-autocomplete=\"list\"\n aria-controls=${this._listboxId}\n aria-activedescendant=${ifDefined(activedescendant)}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-required=${this.required ? 'true' : nothing}\n aria-label=${ifDefined(this.ariaLabel || undefined)}\n aria-labelledby=${ifDefined(this.label && !this.ariaLabel ? this._labelId : undefined)}\n aria-busy=${this.loading ? 'true' : nothing}\n .value=${this._filterText || (this._open ? '' : this._displayValue)}\n placeholder=${ifDefined(this.placeholder || undefined)}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name || undefined)}\n autocomplete=\"off\"\n @input=${this._handleInput}\n @focus=${this._handleFocus}\n @keydown=${this._handleKeydown}\n />\n\n <!-- Loading Indicator -->\n ${this.loading\n ? html`\n <div part=\"loading-indicator\" class=\"field__loading-indicator\" aria-hidden=\"true\">\n <div class=\"field__loading-spinner\"></div>\n </div>\n `\n : nothing}\n\n <!-- Clear Button -->\n ${showClear\n ? html`\n <button\n part=\"clear-button\"\n type=\"button\"\n class=\"field__clear-button\"\n aria-label=${`Clear ${this.label || this.ariaLabel || 'selection'}`}\n tabindex=\"0\"\n @click=${this._handleClear}\n >\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M1 1L11 11M11 1L1 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n `\n : nothing}\n\n <!-- Suffix Slot -->\n <slot name=\"suffix\" class=\"field__suffix\"></slot>\n </div>\n\n <!-- Listbox -->\n <div\n part=\"listbox\"\n role=\"listbox\"\n id=${this._listboxId}\n class=\"field__listbox\"\n aria-label=${ifDefined(this.label || this.ariaLabel || undefined)}\n aria-multiselectable=${this.multiple ? 'true' : nothing}\n ?hidden=${!this._open}\n >\n <div class=\"field__options\">${this._renderOptions()}</div>\n </div>\n\n <!-- Hidden slot (options read from here) -->\n <slot name=\"option\" @slotchange=${this._handleSlotChange} style=\"display:none;\"></slot>\n\n <!-- Error -->\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${hasError\n ? html`<div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>`\n : nothing}\n </slot>\n\n <!-- Help Text -->\n ${this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n `\n : nothing}\n\n <!-- Filter results live region -->\n <div id=${this._liveRegionId} aria-live=\"polite\" aria-atomic=\"true\" class=\"field__sr-only\">\n ${this._filterAnnouncement}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-combobox': HelixCombobox;\n }\n}\n\nexport type { HelixCombobox as HxCombobox };\n"],"names":["helixComboboxStyles","css","_comboboxIdCounter","HelixCombobox","LitElement","label","lower","o","changedProperties","state","_mode","disabled","el","_a","slot","parsed","child","input","count","filtered","enabledIndices","i","nextDown","lastEnabled","prevUp","lastEnabledUp","opt","option","current","next","val","options","index","html","repeat","isSelected","isFocused","classMap","nothing","hasError","showClear","fieldClasses","inputClasses","describedBy","activedescendant","e","ifDefined","__decorateClass","property","query","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAsBC;;;;;;ACkBnC,IAAIC,IAAqB,GAiDZC,IAAN,cAA4BC,EAAW;AAAA,EAW5C,cAAc;AACZ,UAAA,GASF,KAAQ,MAAM,eAAe,EAAEF,CAAkB,IAEjD,KAAQ,aAAa,GAAG,KAAK,GAAG,YAEhC,KAAQ,cAAc,GAAG,KAAK,GAAG,SAEjC,KAAQ,WAAW,GAAG,KAAK,GAAG,UAE9B,KAAQ,WAAW,GAAG,KAAK,GAAG,UAE9B,KAAQ,gBAAgB,GAAG,KAAK,GAAG,SASnC,KAAA,QAAQ,IAOR,KAAA,cAAc,IAOd,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,OAAO,IAOP,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,OAA2B,MAO3B,KAAA,WAAW,IAOX,KAAA,YAAY,IAOZ,KAAA,UAAU,IAOV,KAAA,iBAAiB,GAOjB,KAAS,YAA2B,MAOpC,KAAA,iBAAiB,oBAOjB,KAAA,gBAAgB,4BAOhB,KAAA,oBAA+C,CAACG,MAAU,UAAUA,CAAK,IAKhE,KAAQ,WAA6B,CAAA,GAErC,KAAQ,cAAc,IAEtB,KAAQ,QAAQ,IAEhB,KAAQ,sBAAsB,IAE9B,KAAQ,gBAAgB,IAExB,KAAQ,sBAAsB,IAWvC,KAAQ,iBAAuD,MA4X/D,KAAQ,sBAAsB,CAAC,MAAwB;AACrD,MAAI,KAAK,SAAS,CAAC,EAAE,eAAe,SAAS,IAAI,KAC/C,KAAK,eAAA;AAAA,IAET,GApiBE,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAyKA,IAAY,qBAAkC;AAC5C,WAAI,CAAC,KAAK,YAAY,CAAC,KAAK,4BAAkB,IAAA,IACvC,IAAI,IAAI,KAAK,MAAM,MAAM,GAAG,EAAE,OAAO,OAAO,CAAC;AAAA,EACtD;AAAA;AAAA;AAAA,EAKA,IAAY,mBAAqC;AAC/C,QAAI,CAAC,KAAK,YAAa,QAAO,KAAK;AACnC,UAAMC,IAAQ,KAAK,YAAY,YAAA;AAC/B,WAAO,KAAK,SAAS,OAAO,CAACC,MAAMA,EAAE,MAAM,YAAA,EAAc,SAASD,CAAK,CAAC;AAAA,EAC1E;AAAA;AAAA,EAIS,oBAA0B;AACjC,UAAM,kBAAA;AAAA,EACR;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GAEF,OAAO,WAAa,OACtB,SAAS,oBAAoB,SAAS,KAAK,mBAAmB,GAE5D,KAAK,mBAAmB,QAC1B,aAAa,KAAK,cAAc,GAG9B,KAAK,UACP,KAAK,QAAQ;AAAA,EAEjB;AAAA,EAES,QAAQE,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,OAAO,MAC/B,KAAK,iBAAA,GACL,KAAK,gBAAA;AAAA,EAET;AAAA;AAAA;AAAA,EAKA,IAAI,OAA+B;AACjC,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,oBAA4B;AAC9B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,WAA0B;AAC5B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,gBAAyB;AACvB,WAAO,KAAK,WAAW,cAAA;AAAA,EACzB;AAAA;AAAA,EAGA,iBAA0B;AACxB,WAAO,KAAK,WAAW,eAAA;AAAA,EACzB;AAAA;AAAA,EAGQ,mBAAyB;AAC/B,SAAK,WAAW,aAAa,KAAK,SAAS,IAAI;AAAA,EACjD;AAAA;AAAA,EAGQ,kBAAwB;AAC9B,IAAI,KAAK,YAAY,CAAC,KAAK,QACzB,KAAK,WAAW;AAAA,MACd,EAAE,cAAc,GAAA;AAAA,MAChB,KAAK,SAAS,KAAK;AAAA,MACnB,KAAK;AAAA,IAAA,IAGP,KAAK,WAAW,YAAY,EAAE;AAAA,EAElC;AAAA;AAAA,EAGA,oBAA0B;AACxB,SAAK,QAAQ,IACb,KAAK,cAAc,IACnB,KAAK,WAAW,aAAa,IAAI;AAAA,EACnC;AAAA;AAAA;AAAA,EAIA,yBACEC,GACAC,GACM;AACN,IAAI,OAAOD,KAAU,aACnB,KAAK,QAAQA;AAAAA,EAEjB;AAAA;AAAA,EAGA,qBAAqBE,GAAyB;AAC5C,SAAK,WAAWA;AAAA,EAClB;AAAA;AAAA;AAAA,EAKQ,oBAA0B;AAChC,SAAK,aAAA;AAAA,EACP;AAAA;AAAA,EAGQ,aAAaC,GAAuC;;AAC1D,WAAO,EAAE,OAAOA,EAAG,OAAO,SAAOC,IAAAD,EAAG,gBAAH,gBAAAC,EAAgB,WAAUD,EAAG,OAAO,UAAUA,EAAG,SAAA;AAAA,EACpF;AAAA;AAAA,EAGQ,eAAqB;;AAC3B,UAAME,KAAOD,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,QAAI,CAACC,EAAM;AAEX,UAAMC,IAA2B,CAAA;AAEjC,eAAWH,KAAME,EAAK,iBAAiB,EAAE,SAAS,GAAA,CAAM;AACtD,UAAIF,aAAc;AAChB,QAAAG,EAAO,KAAK,KAAK,aAAaH,CAAE,CAAC;AAAA,eACxBA,aAAc;AACvB,mBAAWI,KAAS,MAAM,KAAKJ,EAAG,QAAQ;AACxC,UAAII,aAAiB,qBAAmBD,EAAO,KAAK,KAAK,aAAaC,CAAK,CAAC;AAKlF,SAAK,WAAWD;AAAA,EAClB;AAAA;AAAA;AAAA,EAKQ,uBAAuB,GAAgB;AAC7C,UAAMD,IAAO,EAAE;AACf,SAAK,gBAAgBA,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACtE;AAAA;AAAA;AAAA,EAKQ,gBAAsB;AAC5B,IAAI,KAAK,YAAY,KAAK,UAC1B,KAAK,QAAQ,IACb,KAAK,sBAAsB,IACvB,OAAO,WAAa,OACtB,SAAS,iBAAiB,SAAS,KAAK,mBAAmB,GAE7D,KAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA;AAAA,EAGQ,iBAAuB;AAC7B,IAAK,KAAK,UACV,KAAK,QAAQ,IACb,KAAK,sBAAsB,IACvB,OAAO,WAAa,OACtB,SAAS,oBAAoB,SAAS,KAAK,mBAAmB,GAEhE,KAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA;AAAA;AAAA,EAKQ,aAAa,GAAgB;AACnC,UAAMG,IAAQ,EAAE;AAChB,SAAK,cAAcA,EAAM,OAEpB,KAAK,SACR,KAAK,cAAA,GAGP,KAAK,sBAAsB,IAEvB,KAAK,iBAAiB,KACpB,KAAK,mBAAmB,QAC1B,aAAa,KAAK,cAAc,GAElC,KAAK,iBAAiB,WAAW,MAAM;AACrC,WAAK,WAAA,GACL,KAAK,uBAAA;AAAA,IACP,GAAG,KAAK,cAAc,MAEtB,KAAK,WAAA,GACL,KAAK,uBAAA;AAAA,EAET;AAAA;AAAA,EAGQ,yBAA+B;AACrC,UAAMC,IAAQ,KAAK,iBAAiB;AACpC,SAAK,sBACHA,MAAU,IACN,wBACA,GAAGA,CAAK,IAAIA,MAAU,IAAI,WAAW,SAAS;AAAA,EACtD;AAAA;AAAA,EAGQ,aAAmB;AACzB,SAAK;AAAA,MACH,IAAI,YAA+B,YAAY;AAAA,QAC7C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,YAAA;AAAA,MAAY,CACnC;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,eAAqB;AAC3B,SAAK,cAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAKQ,eAAe,GAAwB;AAC7C,QAAI,KAAK,SAAU;AAEnB,UAAMC,IAAW,KAAK,kBAChBC,IAAiBD,EACpB,IAAI,CAAC,GAAGE,OAAO,EAAE,GAAG,GAAAA,EAAA,EAAI,EACxB,OAAO,CAAC,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAC7B,IAAI,CAAC,EAAE,GAAAA,EAAA,MAAQA,CAAC;AAEnB,YAAQ,EAAE,KAAA;AAAA,MACR,KAAK,aAAa;AAEhB,YADA,EAAE,eAAA,GACE,CAAC,KAAK,OAAO;AACf,eAAK,cAAA,GACL,KAAK,sBAAsBD,EAAe,SAAS,IAAKA,EAAe,CAAC,KAAK,IAAK;AAClF;AAAA,QACF;AACA,cAAME,IAAWF,EAAe,KAAK,CAACC,MAAMA,IAAI,KAAK,mBAAmB;AACxE,aAAK,sBACHC,MAAa,SAAYA,IAAYF,EAAe,CAAC,KAAK,KAAK;AACjE;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AAEd,YADA,EAAE,eAAA,GACE,CAAC,KAAK,OAAO;AACf,eAAK,cAAA;AACL,gBAAMG,IAAcH,EAAeA,EAAe,SAAS,CAAC;AAC5D,eAAK,sBAAsBG,MAAgB,SAAYA,IAAc;AACrE;AAAA,QACF;AACA,cAAMC,IAAS,CAAC,GAAGJ,CAAc,EAAE,QAAA,EAAU,KAAK,CAACC,MAAMA,IAAI,KAAK,mBAAmB,GAC/EI,IAAgBL,EAAeA,EAAe,SAAS,CAAC;AAC9D,aAAK,sBACHI,MAAW,SAAYA,IAAUC,KAAiB,KAAK;AACzD;AAAA,MACF;AAAA,MACA,KAAK,SAAS;AAEZ,YADA,EAAE,eAAA,GACE,CAAC,KAAK,OAAO;AACf,eAAK,cAAA;AACL;AAAA,QACF;AACA,YAAI,KAAK,uBAAuB,KAAK,KAAK,sBAAsBN,EAAS,QAAQ;AAC/E,gBAAMO,IAAMP,EAAS,KAAK,mBAAmB;AAC7C,UAAIO,KAAK,KAAK,cAAcA,CAAG;AAAA,QACjC;AACA;AAAA,MACF;AAAA,MACA,KAAK,UAAU;AACb,UAAE,eAAA,GACF,KAAK,eAAA,GACL,KAAK,cAAc,IACf,KAAK,WAAQ,KAAK,OAAO,QAAQ;AACrC;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,aAAK,eAAA;AACL;AAAA,MACF;AAAA;AAAA,MAEA,KAAK,QAAQ;AACX,UAAE,eAAA,GACG,KAAK,SAAO,KAAK,cAAA,GACtB,KAAK,sBAAsBN,EAAe,SAAS,IAAKA,EAAe,CAAC,KAAK,KAAM;AACnF;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,UAAE,eAAA,GACG,KAAK,SAAO,KAAK,cAAA,GACtB,KAAK,sBACHA,EAAe,SAAS,IAAKA,EAAeA,EAAe,SAAS,CAAC,KAAK,KAAM;AAClF;AAAA,MACF;AAAA,IAEE;AAAA,EAEN;AAAA;AAAA;AAAA;AAAA,EAMQ,cAAcO,GAA8B;AAClD,QAAI,CAAAA,EAAO,UACX;AAAA,UAAI,KAAK,UAAU;AACjB,cAAMC,IAAU,KAAK,oBACfC,IAAO,IAAI,IAAID,CAAO;AAC5B,QAAIC,EAAK,IAAIF,EAAO,KAAK,IACvBE,EAAK,OAAOF,EAAO,KAAK,IAExBE,EAAK,IAAIF,EAAO,KAAK,GAEvB,KAAK,QAAQ,CAAC,GAAGE,CAAI,EAAE,KAAK,GAAG;AAAA,MAEjC;AACE,aAAK,QAAQF,EAAO,OACpB,KAAK,eAAA;AAEP,WAAK,cAAc,IACf,KAAK,WAAQ,KAAK,OAAO,QAAQ,KACrC,KAAK,gBAAA;AAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAIQ,aAAaG,GAAmB;AACtC,UAAMD,IAAO,KAAK;AAClB,IAAAA,EAAK,OAAOC,CAAG,GACf,KAAK,QAAQ,CAAC,GAAGD,CAAI,EAAE,KAAK,GAAG,GAC/B,KAAK,gBAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAKQ,aAAa,GAAgB;AACnC,MAAE,gBAAA,GACF,KAAK,QAAQ,IACb,KAAK,cAAc,IACf,KAAK,WACP,KAAK,OAAO,QAAQ,IACpB,KAAK,OAAO,MAAA,IAEd,KAAK,WAAW,aAAa,IAAI,GACjC,KAAK,gBAAA,GACL,KAAK,cAAc,IAAI,YAAkB,YAAY,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACzF;AAAA;AAAA;AAAA,EAKQ,kBAAwB;AAC9B,SAAK;AAAA,MACH,IAAI,YAA+B,aAAa;AAAA,QAC9C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAcS,MAAME,GAA8B;;AAC3C,KAAAlB,IAAA,KAAK,WAAL,QAAAA,EAAa,MAAMkB;AAAA,EACrB;AAAA;AAAA;AAAA,EAKQ,UAAUC,GAAuB;AACvC,WAAO,GAAG,KAAK,GAAG,WAAWA,CAAK;AAAA,EACpC;AAAA;AAAA,EAGA,IAAY,gBAAwB;AAGlC,QADI,KAAK,YACL,CAAC,KAAK,MAAO,QAAO;AACxB,UAAMN,IAAM,KAAK,SAAS,KAAK,CAACnB,MAAMA,EAAE,UAAU,KAAK,KAAK;AAC5D,WAAOmB,IAAMA,EAAI,QAAQ,KAAK;AAAA,EAChC;AAAA;AAAA,EAGQ,iBAAiB;AACvB,UAAMP,IAAW,KAAK;AAEtB,WAAIA,EAAS,WAAW,IACfc;AAAA;AAAA,2CAE8B,KAAK,cAAc;AAAA;AAAA,UAKnDC;AAAA,MACLf;AAAA,MACA,CAACO,MAAQA,EAAI;AAAA,MACb,CAACA,GAAKM,MAAU;AAEd,cAAMG,IAAa,KAAK,WACpB,KAAK,mBAAmB,IAAIT,EAAI,KAAK,IACrCA,EAAI,UAAU,KAAK,OACjBU,IAAYJ,MAAU,KAAK;AAEjC,eAAOC;AAAA;AAAA,iBAEE,KAAK,UAAUD,CAAK,CAAC;AAAA;AAAA;AAAA,oBAGlBK,EAAS;AAAA,UACf,eAAe;AAAA,UACf,2BAA2BF;AAAA,UAC3B,0BAA0BC;AAAA,UAC1B,2BAA2BV,EAAI;AAAA,QAAA,CAChC,CAAC;AAAA,4BACc,KAAK,WACjBS,IACE,SACA,UACFA,IACE,SACAG,CAAO;AAAA,4BACGZ,EAAI,WAAW,SAASY,CAAO;AAAA,qBACtC,MAAM,KAAK,cAAcZ,CAAG,CAAC;AAAA;AAAA,gDAEFA,EAAI,KAAK;AAAA;AAAA;AAAA,MAGnD;AAAA,IAAA;AAAA,EAEJ;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMa,IAAW,CAAC,CAAC,KAAK,OAClBC,IAAY,KAAK,aAAa,CAAC,CAAC,KAAK,SAAS,CAAC,KAAK,UAEpDC,IAAe;AAAA,MACnB,OAAO;AAAA,MACP,gBAAgBF;AAAA,MAChB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB,KAAK;AAAA,MACxB,eAAe,KAAK;AAAA,IAAA,GAGhBG,IAAe;AAAA,MACnB,cAAc;AAAA,MACd,CAAC,iBAAiB,KAAK,IAAI,EAAE,GAAG;AAAA,IAAA,GAG5BC,IACJ;AAAA,MACEJ,KAAY,KAAK,gBAAgB,KAAK,WAAW;AAAA,MACjD,KAAK,WAAW,KAAK,cAAc;AAAA,IAAA,EAElC,OAAO,OAAO,EACd,KAAK,GAAG,KAAK,QAEZK,IACJ,KAAK,SAAS,KAAK,uBAAuB,IACtC,KAAK,UAAU,KAAK,mBAAmB,IACvC;AAEN,WAAOX;AAAA,gCACqBI,EAASI,CAAY,CAAC;AAAA;AAAA;AAAA,YAG1C,KAAK,QACHR,cAAiB,KAAK,QAAQ,QAAQ,KAAK,GAAG;AAAA,kBAC1C,KAAK,KAAK;AAAA,kBACV,KAAK,WACHA,sEACAK,CAAO;AAAA,0BAEbA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAST,KAAK,YAAY,KAAK,mBAAmB,OAAO,IAC9C,CAAC,GAAG,KAAK,kBAAkB,EAAE,IAAI,CAACR,MAAQ;AACxC,YAAMJ,IAAM,KAAK,SAAS,KAAK,CAACnB,MAAMA,EAAE,UAAUuB,CAAG,GAC/CzB,IAAQqB,IAAMA,EAAI,QAAQI;AAChC,aAAOG;AAAA;AAAA,sDAE+B5B,CAAK;AAAA;AAAA;AAAA;AAAA,mCAIxB,KAAK,kBAAkBA,CAAK,CAAC;AAAA,+BACjC,CAACwC,MAAa;AACrB,QAAAA,EAAE,gBAAA,GACF,KAAK,aAAaf,CAAG;AAAA,MACvB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoBT,CAAC,IACDQ,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMJ,KAAK,GAAG;AAAA,oBACLD,EAASK,CAAY,CAAC;AAAA;AAAA,4BAEd,KAAK,QAAQ,SAAS,OAAO;AAAA;AAAA,4BAE7B,KAAK,UAAU;AAAA,oCACPI,EAAUF,CAAgB,CAAC;AAAA,2BACpCL,IAAW,SAASD,CAAO;AAAA,+BACvBQ,EAAUH,CAAW,CAAC;AAAA,4BACzB,KAAK,WAAW,SAASL,CAAO;AAAA,yBACnCQ,EAAU,KAAK,aAAa,MAAS,CAAC;AAAA,8BACjCA,EAAU,KAAK,SAAS,CAAC,KAAK,YAAY,KAAK,WAAW,MAAS,CAAC;AAAA,wBAC1E,KAAK,UAAU,SAASR,CAAO;AAAA,qBAClC,KAAK,gBAAgB,KAAK,QAAQ,KAAK,KAAK,cAAc;AAAA,0BACrDQ,EAAU,KAAK,eAAe,MAAS,CAAC;AAAA,wBAC1C,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,mBAClBA,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA;AAAA,qBAE/B,KAAK,YAAY;AAAA,qBACjB,KAAK,YAAY;AAAA,uBACf,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA,YAI9B,KAAK,UACHb;AAAA;AAAA;AAAA;AAAA,kBAKAK,CAAO;AAAA;AAAA;AAAA,YAGTE,IACEP;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKiB,SAAS,KAAK,SAAS,KAAK,aAAa,WAAW,EAAE;AAAA;AAAA,2BAE1D,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAmB9BK,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAUN,KAAK,UAAU;AAAA;AAAA,uBAEPQ,EAAU,KAAK,SAAS,KAAK,aAAa,MAAS,CAAC;AAAA,iCAC1C,KAAK,WAAW,SAASR,CAAO;AAAA,oBAC7C,CAAC,KAAK,KAAK;AAAA;AAAA,wCAES,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,0CAInB,KAAK,iBAAiB;AAAA;AAAA;AAAA,yCAGvB,KAAK,sBAAsB;AAAA,YACxDC,IACEN,8CAAiD,KAAK,QAAQ;AAAA,kBAC1D,KAAK,KAAK;AAAA,wBAEdK,CAAO;AAAA;AAAA;AAAA;AAAA,UAIX,KAAK,YAAY,CAACC,IAChBN;AAAA,kEACsD,KAAK,WAAW;AAAA,yCACzC,KAAK,QAAQ;AAAA;AAAA,gBAG1CK,CAAO;AAAA;AAAA;AAAA,kBAGD,KAAK,aAAa;AAAA,YACxB,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA,EAIlC;AACF;AAt0BanC,EACK,SAAS,CAACH,CAAmB;AADlCG,EAMJ,iBAAiB;AAkCxB4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvCf7C,EAwCX,WAAA,SAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9Cf7C,EA+CX,WAAA,eAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArD9B7C,EAsDX,WAAA,SAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5D/B7C,EA6DX,WAAA,YAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnE/B7C,EAoEX,WAAA,YAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Ef7C,EA2EX,WAAA,QAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjFf7C,EAkFX,WAAA,SAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAxFvC7C,EAyFX,WAAA,YAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,SAAS,IAAM;AAAA,GA/FpD7C,EAgGX,WAAA,QAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtG/B7C,EAuGX,WAAA,YAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA7G/B7C,EA8GX,WAAA,aAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApH/B7C,EAqHX,WAAA,WAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB;AAAA,GA3H7C7C,EA4HX,WAAA,kBAAA,CAAA;AAOS4C,EAAA;AAAA,EADRC,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAlIxC7C,EAmIF,WAAA,aAAA,CAAA;AAOT4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,oBAAoB;AAAA,GAzI9C7C,EA0IX,WAAA,kBAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB;AAAA,GAhJ5C7C,EAiJX,WAAA,iBAAA,CAAA;AAOA4C,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAvJnB7C,EAwJX,WAAA,qBAAA,CAAA;AAKiB4C,EAAA;AAAA,EAAhBtC,EAAA;AAAM,GA7JIN,EA6JM,WAAA,YAAA,CAAA;AAEA4C,EAAA;AAAA,EAAhBtC,EAAA;AAAM,GA/JIN,EA+JM,WAAA,eAAA,CAAA;AAEA4C,EAAA;AAAA,EAAhBtC,EAAA;AAAM,GAjKIN,EAiKM,WAAA,SAAA,CAAA;AAEA4C,EAAA;AAAA,EAAhBtC,EAAA;AAAM,GAnKIN,EAmKM,WAAA,uBAAA,CAAA;AAEA4C,EAAA;AAAA,EAAhBtC,EAAA;AAAM,GArKIN,EAqKM,WAAA,iBAAA,CAAA;AAEA4C,EAAA;AAAA,EAAhBtC,EAAA;AAAM,GAvKIN,EAuKM,WAAA,uBAAA,CAAA;AAMT4C,EAAA;AAAA,EADPE,EAAM,eAAe;AAAA,GA5KX9C,EA6KH,WAAA,UAAA,CAAA;AA7KGA,IAAN4C,EAAA;AAAA,EADNG,EAAc,aAAa;AAAA,GACf/C,CAAA;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-copy-button-BoM0WsMd.js","sources":["../../src/components/hx-copy-button/hx-copy-button.styles.ts","../../src/components/hx-copy-button/hx-copy-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCopyButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n .button {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2);\n border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);\n border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));\n background-color: var(--hx-copy-button-bg, transparent);\n color: var(--hx-copy-button-color, var(--hx-color-primary-500));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast),\n color var(--hx-transition-fast),\n border-color var(--hx-transition-fast),\n box-shadow var(--hx-transition-fast);\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n flex-shrink: 0;\n font-family: var(--hx-font-family-sans);\n font-weight: var(--hx-font-weight-medium);\n white-space: nowrap;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width) solid\n var(--hx-copy-button-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: var(--hx-focus-ring-offset);\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 .button--sm {\n padding: var(--hx-space-1);\n min-width: var(--hx-size-8);\n height: var(--hx-size-8);\n font-size: var(--hx-font-size-sm);\n }\n\n .button--md {\n padding: var(--hx-space-2);\n min-width: var(--hx-size-10);\n height: var(--hx-size-10);\n font-size: var(--hx-font-size-md);\n }\n\n .button--lg {\n padding: var(--hx-space-3);\n min-width: var(--hx-size-12);\n height: var(--hx-size-12);\n font-size: var(--hx-font-size-lg);\n }\n\n /* ─── Copied / Success State ─── */\n\n .button--copied {\n color: var(--hx-color-success-text, var(--hx-color-primary-500));\n /* Secondary non-color indicator required per WCAG 1.4.1 (use of color).\n A border provides visual differentiation for users with color blindness. */\n border-color: var(--hx-color-success-500, var(--hx-color-primary-500));\n }\n\n /* ─── Icon Container ─── */\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1em;\n height: 1em;\n line-height: 1;\n pointer-events: none;\n flex-shrink: 0;\n }\n\n /* ─── Disabled ─── */\n\n .button[disabled] {\n cursor: not-allowed;\n opacity: var(--hx-opacity-disabled);\n }\n\n /* ─── Screen Reader Only ─── */\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n`;\n","import { LitElement, 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 { helixCopyButtonStyles } from './hx-copy-button.styles.js';\n\n/** Minimum allowed value for feedbackDuration (ms). */\nconst MIN_FEEDBACK_DURATION = 300;\n\n/** Allowed size values for runtime validation. */\nconst VALID_SIZES = new Set(['sm', 'md', 'lg']);\n\n/**\n * A clipboard copy button component that writes a given value to the system\n * clipboard. Provides idle and success states with configurable feedback\n * duration, slot-based icon overrides, and an accessible live region that\n * announces copy completion to screen reader users.\n *\n * The `aria-label` reflects the current copy state: idle shows `label`,\n * copied state appends \" — Copied\" so screen reader users who re-focus the\n * button after copy receive an accurate accessible name.\n *\n * Note: `aria-pressed` is intentionally NOT used. This is not a toggle button;\n * copied is a transient feedback state, not a persistent on/off toggle.\n *\n * @summary One-click clipboard copy with accessible success feedback.\n *\n * @tag hx-copy-button\n *\n * @slot - Optional label text rendered inside the button alongside the icon.\n * @slot copy-icon - Icon shown in the idle (pre-copy) state.\n * @slot success-icon - Icon shown after a successful clipboard write.\n *\n * @fires {CustomEvent<{value: string}>} hx-copy - Dispatched after the value\n * has been successfully written to the clipboard.\n * @fires {CustomEvent<{value: string; error: Error}>} hx-copy-error - Dispatched\n * when the clipboard write fails (permission denied, iframe restriction, etc.).\n * The `error` detail contains the caught error for diagnostic use.\n *\n * @csspart button - The native button element.\n * @csspart icon - The icon container span wrapping the active icon slot.\n *\n * @cssprop [--hx-copy-button-bg=transparent] - Button background color.\n * @cssprop [--hx-copy-button-color=var(--hx-color-primary-500)] - Icon and text color.\n * @cssprop [--hx-copy-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-copy-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-copy-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n */\n@customElement('hx-copy-button')\nexport class HelixCopyButton extends LitElement {\n static override styles = [helixCopyButtonStyles];\n\n // ─── Public Properties ───\n\n /**\n * The text value to write to the clipboard on click. Required for the\n * component to perform a copy operation.\n * @attr value\n */\n @property({ type: String })\n value = '';\n\n /**\n * Accessible label applied as `aria-label` and `title` on the button.\n * @attr label\n */\n @property({ type: String })\n label = 'Copy to clipboard';\n\n /**\n * Duration in milliseconds to display the success (copied) state before\n * reverting to the idle state. Values below 300 ms are clamped to 300 ms\n * to ensure the success announcement remains visible long enough for\n * assistive technology and human perception.\n * @attr feedback-duration\n */\n @property({ type: Number, attribute: 'feedback-duration' })\n feedbackDuration = 2000;\n\n /**\n * Visual size of the button. Maps to fixed height and padding tokens.\n * Accepts: 'sm' | 'md' | 'lg'. Invalid values are silently coerced to 'md'.\n *\n * **Accessibility (WCAG 2.5.8):** The `sm` variant uses `--hx-size-8` for\n * its minimum width and height. Ensure this token resolves to at least 24×24 px\n * (WCAG 2.5.8 AA minimum target size). For touch-primary interfaces such as\n * mobile clinical apps, prefer `md` or `lg` to meet the 44×44 px recommended\n * target size (WCAG 2.5.5 AAA / Apple HIG / Android guidelines).\n *\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. When true, click events are suppressed\n * and clipboard writes do not occur.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Text announced to screen readers and appended to aria-label after a\n * successful copy. Also used as the content of the aria-live announcement.\n * @attr label-copied\n */\n @property({ type: String, attribute: 'label-copied' })\n labelCopied = 'Copied';\n\n /**\n * Accessible label announced when copy fails. Override for i18n.\n * @attr label-error\n */\n @property({ type: String, attribute: 'label-error' })\n labelError = 'Copy failed';\n\n // ─── Private State ───\n\n /** True while the success feedback window is active. */\n /** @internal */\n @state() private _copied = false;\n\n /** Non-empty string shown in the aria-live region; cleared when not active. */\n /** @internal */\n @state() private _announcement = '';\n\n /** Timeout handle used to revert the copied state. */\n /** @internal */\n private _feedbackTimer: ReturnType<typeof setTimeout> | null = null;\n\n // ─── Lifecycle ───\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._clearFeedbackTimer();\n }\n\n // ─── Private Helpers ───\n\n /**\n * Returns the effective feedback duration, clamped to the minimum allowed\n * value. Prevents zero/negative timeouts that would cause the success state\n * to immediately revert with no visible or audible feedback.\n */\n /** @internal */\n private _effectiveDuration(): number {\n return Math.max(this.feedbackDuration, MIN_FEEDBACK_DURATION);\n }\n\n /**\n * Returns the effective size, falling back to 'md' if the runtime value is\n * not in the set of valid sizes. Prevents `button--xl` and similar class\n * names that have no matching CSS rule.\n */\n /** @internal */\n private _effectiveSize(): 'sm' | 'md' | 'lg' {\n return VALID_SIZES.has(this.size) ? this.size : 'md';\n }\n\n /** @internal */\n private _clearFeedbackTimer(): void {\n if (this._feedbackTimer !== null) {\n clearTimeout(this._feedbackTimer);\n this._feedbackTimer = null;\n }\n }\n\n /** @internal */\n private async _copyToClipboard(): Promise<void> {\n await navigator?.clipboard?.writeText(this.value);\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleClick(): void {\n if (this.disabled) {\n return;\n }\n\n void this._performCopy();\n }\n\n /** @internal */\n private async _performCopy(): Promise<void> {\n try {\n await this._copyToClipboard();\n } catch (error: unknown) {\n // Clipboard write failed — notify consumers and announce failure.\n this._announcement = this.labelError;\n\n /**\n * Dispatched when the clipboard write fails (permission denied, iframe\n * restriction, browser security policy, etc.).\n * @event hx-copy-error\n */\n this.dispatchEvent(\n new CustomEvent<{ value: string; error: Error }>('hx-copy-error', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n error: error instanceof Error ? error : new Error(String(error)),\n },\n }),\n );\n return;\n }\n\n this._clearFeedbackTimer();\n this._copied = true;\n this._announcement = this.labelCopied;\n\n /**\n * Dispatched after the value has been successfully written to the\n * clipboard.\n * @event hx-copy\n */\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-copy', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n\n this._feedbackTimer = setTimeout(() => {\n this._copied = false;\n this._announcement = '';\n this._feedbackTimer = null;\n }, this._effectiveDuration());\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _buttonClasses() {\n const size = this._effectiveSize();\n return {\n button: true,\n [`button--${size}`]: true,\n 'button--copied': this._copied,\n };\n }\n\n /** @internal */\n private _renderIcon() {\n // Show success-icon slot when copied, copy-icon slot otherwise.\n return html`\n <span part=\"icon\" class=\"icon\">\n ${this._copied\n ? html`<slot name=\"success-icon\"></slot>`\n : html`<slot name=\"copy-icon\"></slot>`}\n </span>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n // Reflect copied state in aria-label so re-focused button has an accurate\n // accessible name (WCAG 1.3.1). The live region handles the initial\n // announcement; this covers re-focus scenarios.\n const ariaLabel = this._copied ? `${this.label} — ${this.labelCopied}` : this.label;\n\n return html`\n <button\n part=\"button\"\n class=${classMap(this._buttonClasses())}\n type=\"button\"\n ?disabled=${this.disabled}\n aria-label=${ariaLabel}\n title=${this.label}\n @click=${this._handleClick}\n >\n ${this._renderIcon()}\n <slot></slot>\n </button>\n\n <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n ${this._announcement || nothing}\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-copy-button': HelixCopyButton;\n }\n}\n"],"names":["helixCopyButtonStyles","css","MIN_FEEDBACK_DURATION","VALID_SIZES","HelixCopyButton","LitElement","_a","error","html","ariaLabel","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-counter-B5NgKlw4.js","sources":["../../src/components/hx-counter/hx-counter.styles.ts","../../src/components/hx-counter/hx-counter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCounterStyles = css`\n :host {\n display: inline-block;\n }\n\n .counter {\n display: inline-flex;\n align-items: baseline;\n font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));\n color: var(--hx-counter-color, var(--hx-color-neutral-900, #111827));\n line-height: var(--hx-line-height-tight, 1.25);\n font-variant-numeric: tabular-nums;\n }\n\n /* ─── Size Variants ─── */\n\n .counter--sm {\n font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));\n }\n\n .counter--md {\n font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));\n }\n\n .counter--lg {\n font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));\n }\n\n /* ─── Screen-reader only (visually hidden live region) ─── */\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .counter {\n /* Animation is handled in JS — reduced-motion consumers\n will see the final value immediately via the component logic */\n }\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixCounterStyles } from './hx-counter.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nexport type CounterSize = 'sm' | 'md' | 'lg';\nexport type CounterEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';\nexport type CounterFormat = 'integer' | 'decimal';\n\n/**\n * Animated number counter that counts from 0 (or the previous value) to the\n * target value using requestAnimationFrame. Respects prefers-reduced-motion.\n *\n * @summary Displays an animated numeric counter that transitions to a target value.\n *\n * @tag hx-counter\n *\n * @csspart counter - The outer counter element.\n *\n * @cssprop [--hx-counter-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-counter-font-weight=var(--hx-font-weight-bold)] - Font weight.\n * @cssprop [--hx-counter-color=var(--hx-color-neutral-900)] - Counter text color.\n * @cssprop [--hx-counter-font-size-sm=var(--hx-font-size-xl)] - Font size at sm.\n * @cssprop [--hx-counter-font-size-md=var(--hx-font-size-3xl)] - Font size at md.\n * @cssprop [--hx-counter-font-size-lg=var(--hx-font-size-5xl)] - Font size at lg.\n */\n@customElement('hx-counter')\nexport class HelixCounter extends LitElement {\n static override styles = [helixCounterStyles];\n\n /**\n * The target numeric value to count to.\n * @attr value\n */\n @property({ type: Number })\n value = 0;\n\n /**\n * Animation duration in milliseconds.\n * @attr duration\n */\n @property({ type: Number })\n duration = 1000;\n\n /**\n * Easing function applied to the animation progress.\n * @attr easing\n */\n @property({ type: String })\n easing: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' = 'ease-out';\n\n /**\n * Number format. 'integer' rounds to the nearest whole number;\n * 'decimal' shows two decimal places.\n * @attr format\n */\n @property({ type: String })\n format: 'integer' | 'decimal' = 'integer';\n\n /**\n * String prepended to the formatted value (e.g., '$').\n * @attr prefix\n */\n @property({ type: String })\n prefix = '';\n\n /**\n * String appended to the formatted value (e.g., '%').\n * @attr suffix\n */\n @property({ type: String })\n suffix = '';\n\n /**\n * Size variant controlling font size.\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 describing the counter's context (e.g. \"Total patients\", \"Active alerts\").\n * WCAG 4.1.2: a numeric value alone is meaningless without context for screen readers.\n * When provided, the value is applied as aria-label on the counter element.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n // ─── Internal State ───\n\n /** @internal */\n @state() private _displayValue = 0;\n\n /**\n * The final value announced to screen readers once animation completes.\n * Updated only at animation end so AT users hear the result, not every frame.\n * @internal\n */\n @state() private _announcedValue = '';\n\n /** @internal */\n private _animationId: number | null = null;\n /** @internal */\n private _startTime: number | null = null;\n /** @internal */\n private _startValue = 0;\n /** @internal */\n private _prefersReducedMotion = false;\n /** @internal */\n private _motionMql: MediaQueryList | null = null;\n /**\n * Normalized easing value after validation. Set once per animation start\n * to avoid repeated devWarn calls on every requestAnimationFrame tick.\n * @internal\n */\n private _resolvedEasing: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' = 'ease-out';\n /** @internal */\n private readonly _handleMotionChange = (e: MediaQueryListEvent): void => {\n this._prefersReducedMotion = e.matches;\n if (this._prefersReducedMotion) {\n this._cancelAnimation();\n this._displayValue = this.value;\n this._announcedValue = this._buildAnnouncement();\n this.requestUpdate();\n }\n };\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-counter', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as CounterSize;\n }\n\n // WCAG 4.1.2: a numeric value without context is meaningless to screen readers.\n // Normalize: whitespace-only labels are treated as empty.\n if (!(this.label || '').trim()) {\n devWarn(\n 'hx-counter',\n 'hx-counter requires a label for screen reader accessibility (WCAG 4.1.2). Provide the `label` attribute.',\n );\n }\n\n // Guard for SSR — window.matchMedia and requestAnimationFrame are unavailable server-side\n if (typeof window === 'undefined') {\n this._displayValue = this.value;\n return;\n }\n\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n this._motionMql = mq;\n this._prefersReducedMotion = mq.matches;\n mq.addEventListener('change', this._handleMotionChange);\n\n if (this._prefersReducedMotion) {\n this._displayValue = this.value;\n this._announcedValue = this._buildAnnouncement();\n } else {\n this._startAnimation();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._cancelAnimation();\n this._motionMql?.removeEventListener('change', this._handleMotionChange);\n this._motionMql = null;\n }\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (changedProps.has('value') && changedProps.get('value') !== undefined) {\n if (this._prefersReducedMotion) {\n this._displayValue = this.value;\n this._announcedValue = this._buildAnnouncement();\n } else {\n this._startValue = this._displayValue;\n this._startTime = null;\n this._startAnimation();\n }\n }\n }\n\n // ─── Animation ───\n\n /** @internal */\n private _cancelAnimation(): void {\n if (this._animationId !== null) {\n cancelAnimationFrame(this._animationId);\n this._animationId = null;\n }\n }\n\n /**\n * Validates `this.easing` once per animation start and stores the result in\n * `_resolvedEasing`. This prevents devWarn from firing on every rAF tick for\n * an invalid easing value — the warning is emitted at most once per call.\n * @internal\n */\n private _normalizeEasing(): void {\n const validEasings: Array<'linear' | 'ease-in' | 'ease-out' | 'ease-in-out'> = [\n 'linear',\n 'ease-in',\n 'ease-out',\n 'ease-in-out',\n ];\n if (validEasings.includes(this.easing)) {\n this._resolvedEasing = this.easing;\n } else {\n devWarn(\n 'hx-counter',\n `Unrecognized easing value \"${this.easing as string}\". Falling back to \"linear\". Valid values: ease-in, ease-out, ease-in-out, linear.`,\n );\n this._resolvedEasing = 'linear';\n }\n }\n\n /** @internal */\n private _applyEasing(t: number): number {\n switch (this._resolvedEasing) {\n case 'linear':\n return t;\n case 'ease-in':\n return t * t;\n case 'ease-out':\n return t * (2 - t);\n case 'ease-in-out':\n return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n }\n }\n\n /** @internal */\n private _startAnimation(): void {\n this._cancelAnimation();\n this._normalizeEasing();\n\n let effectiveDuration: number;\n if (this.duration <= 0) {\n devWarn('hx-counter', `duration must be > 0 (received ${this.duration}). Clamping to 1ms.`);\n effectiveDuration = 1;\n } else {\n effectiveDuration = this.duration;\n }\n\n const step = (timestamp: number): void => {\n if (this._startTime === null) {\n this._startTime = timestamp;\n }\n\n const elapsed = timestamp - this._startTime;\n const rawProgress = Math.min(elapsed / effectiveDuration, 1);\n const easedProgress = this._applyEasing(rawProgress);\n\n this._displayValue = this._startValue + (this.value - this._startValue) * easedProgress;\n\n if (rawProgress < 1) {\n this._animationId = requestAnimationFrame(step);\n } else {\n this._displayValue = this.value;\n this._animationId = null;\n // WCAG 4.1.2: announce the final value only once, at animation end.\n // _announcedValue feeds the off-screen live region so screen readers\n // hear a single announcement rather than one per animation frame.\n this._announcedValue = this._buildAnnouncement();\n }\n };\n\n this._animationId = requestAnimationFrame(step);\n }\n\n // ─── Formatting ───\n\n /** @internal */\n private _formatValue(): string {\n const num =\n this.format === 'integer'\n ? Math.round(this._displayValue)\n : parseFloat(this._displayValue.toFixed(2));\n\n return `${this.prefix}${num.toLocaleString()}${this.suffix}`;\n }\n\n /**\n * Builds the string announced to screen readers at animation end.\n * Includes label context when present so users hear \"Total patients: 1,284\"\n * rather than a bare number with no semantic context.\n * @internal\n */\n private _buildAnnouncement(): string {\n const normalizedLabel = (this.label || '').trim();\n if (!normalizedLabel) {\n // No label means the number lacks context — return empty to prevent\n // announcing a context-free number to screen readers.\n return '';\n }\n const formatted = this._formatValue();\n return `${normalizedLabel}: ${formatted}`;\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n counter: true,\n [`counter--${this.size}`]: true,\n };\n\n const trimmedLabel = (this.label || '').trim();\n\n return html`\n <span\n part=\"counter\"\n role=\"status\"\n aria-live=\"off\"\n class=${classMap(classes)}\n aria-label=${trimmedLabel ? `${trimmedLabel}: ${this._formatValue()}` : nothing}\n >\n ${this._formatValue()}\n </span>\n <!--\n WCAG 4.1.2: off-screen live region updated only at animation end.\n Prevents screen readers from announcing every intermediate frame value.\n -->\n <span\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n aria-hidden=${this._announcedValue ? nothing : 'true'}\n >${this._announcedValue}</span\n >\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-counter': HelixCounter;\n }\n}\n"],"names":["helixCounterStyles","css","HelixCounter","LitElement","legacySize","mq","_a","changedProps","devWarn","t","effectiveDuration","step","timestamp","elapsed","rawProgress","easedProgress","num","normalizedLabel","formatted","classes","trimmedLabel","html","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}
|