@helixui/library 1.1.2 → 2.0.0
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 +3221 -2224
- package/dist/base/helix-element.d.ts +134 -0
- package/dist/base/helix-element.d.ts.map +1 -0
- package/dist/base/id-counter.d.ts +32 -0
- package/dist/base/id-counter.d.ts.map +1 -0
- package/dist/base/index.d.ts +4 -0
- package/dist/base/index.d.ts.map +1 -0
- package/dist/base/styles.d.ts +19 -0
- package/dist/base/styles.d.ts.map +1 -0
- package/dist/components/hx-accordion/hx-accordion-item.d.ts +3 -0
- package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
- package/dist/components/hx-accordion/hx-accordion.d.ts +4 -1
- package/dist/components/hx-accordion/hx-accordion.d.ts.map +1 -1
- package/dist/components/hx-accordion/index.js +1 -1
- package/dist/components/hx-action-bar/hx-action-bar.d.ts +1 -1
- package/dist/components/hx-action-bar/hx-action-bar.d.ts.map +1 -1
- package/dist/components/hx-action-bar/index.js +1 -1
- package/dist/components/hx-alert/hx-alert.d.ts +10 -5
- package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
- package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
- package/dist/components/hx-alert/index.js +1 -1
- package/dist/components/hx-avatar/hx-avatar.styles.d.ts.map +1 -1
- package/dist/components/hx-avatar/index.js +1 -1
- package/dist/components/hx-badge/hx-badge.d.ts.map +1 -1
- package/dist/components/hx-badge/hx-badge.styles.d.ts.map +1 -1
- package/dist/components/hx-badge/index.js +1 -1
- package/dist/components/hx-banner/hx-banner.d.ts +15 -5
- package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
- package/dist/components/hx-banner/hx-banner.styles.d.ts.map +1 -1
- package/dist/components/hx-banner/index.js +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb-item.d.ts +1 -0
- package/dist/components/hx-breadcrumb/hx-breadcrumb-item.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts +42 -11
- 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 +22 -13
- 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 +3 -6
- 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 +7 -7
- package/dist/components/hx-card/hx-card.d.ts.map +1 -1
- package/dist/components/hx-card/index.js +1 -1
- package/dist/components/hx-carousel/hx-carousel.d.ts +2 -2
- package/dist/components/hx-carousel/index.js +1 -1
- package/dist/components/hx-checkbox/hx-checkbox.d.ts +18 -18
- 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 +8 -3
- package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts.map +1 -1
- package/dist/components/hx-checkbox-group/index.js +1 -1
- package/dist/components/hx-clinical-status/hx-clinical-status.d.ts +134 -0
- package/dist/components/hx-clinical-status/hx-clinical-status.d.ts.map +1 -0
- package/dist/components/hx-clinical-status/hx-clinical-status.styles.d.ts +2 -0
- package/dist/components/hx-clinical-status/hx-clinical-status.styles.d.ts.map +1 -0
- package/dist/components/hx-clinical-status/index.d.ts +3 -0
- package/dist/components/hx-clinical-status/index.d.ts.map +1 -0
- package/dist/components/hx-clinical-status/index.js +5 -0
- package/dist/components/hx-clinical-status/index.js.map +1 -0
- 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/color-utils.d.ts +27 -0
- package/dist/components/hx-color-picker/color-utils.d.ts.map +1 -0
- package/dist/components/hx-color-picker/hx-color-picker.d.ts +16 -4
- package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
- package/dist/components/hx-color-picker/index.js +1 -1
- package/dist/components/hx-combobox/hx-combobox.d.ts +9 -4
- 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-container/index.js +1 -1
- package/dist/components/hx-copy-button/hx-copy-button.d.ts +6 -1
- package/dist/components/hx-copy-button/hx-copy-button.d.ts.map +1 -1
- package/dist/components/hx-copy-button/index.js +1 -1
- package/dist/components/hx-counter/hx-counter.d.ts +20 -3
- package/dist/components/hx-counter/hx-counter.d.ts.map +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 +8 -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 +40 -3
- package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
- package/dist/components/hx-date-picker/hx-date-picker.styles.d.ts.map +1 -1
- package/dist/components/hx-date-picker/index.js +1 -1
- package/dist/components/hx-dialog/hx-dialog.d.ts +4 -1
- package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
- package/dist/components/hx-dialog/index.js +1 -1
- package/dist/components/hx-divider/hx-divider.d.ts.map +1 -1
- package/dist/components/hx-divider/index.js +1 -1
- package/dist/components/hx-drawer/hx-drawer.d.ts +5 -8
- 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 +14 -1
- package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
- package/dist/components/hx-dropdown/index.js +1 -1
- package/dist/components/hx-field/hx-field.d.ts +1 -1
- package/dist/components/hx-field/hx-field.d.ts.map +1 -1
- package/dist/components/hx-field/index.js +1 -1
- package/dist/components/hx-field-label/hx-field-label.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 +8 -9
- 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-form/hx-form.d.ts.map +1 -1
- package/dist/components/hx-form/index.js +1 -1
- package/dist/components/hx-format-date/hx-format-date.d.ts.map +1 -1
- package/dist/components/hx-format-date/index.js +1 -1
- package/dist/components/hx-grid/hx-grid.d.ts +5 -9
- package/dist/components/hx-grid/hx-grid.d.ts.map +1 -1
- package/dist/components/hx-grid/index.js +1 -1
- package/dist/components/hx-icon/hx-icon.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 +4 -3
- package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
- package/dist/components/hx-icon-button/index.js +1 -1
- package/dist/components/hx-image/hx-image.d.ts.map +1 -1
- package/dist/components/hx-image/index.js +1 -1
- package/dist/components/hx-link/hx-link.d.ts +1 -1
- package/dist/components/hx-link/hx-link.d.ts.map +1 -1
- package/dist/components/hx-link/hx-link.styles.d.ts.map +1 -1
- package/dist/components/hx-link/index.js +1 -1
- package/dist/components/hx-menu/hx-menu-item.d.ts +5 -0
- package/dist/components/hx-menu/hx-menu-item.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu.d.ts +1 -0
- package/dist/components/hx-menu/hx-menu.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu.styles.d.ts.map +1 -1
- package/dist/components/hx-menu/index.js +1 -1
- package/dist/components/hx-meter/hx-meter.d.ts +2 -2
- package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
- package/dist/components/hx-meter/index.js +1 -1
- package/dist/components/hx-nav/hx-nav.d.ts +10 -0
- package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
- package/dist/components/hx-nav/index.js +1 -1
- package/dist/components/hx-number-input/hx-number-input.d.ts +4 -3
- package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
- package/dist/components/hx-number-input/index.js +1 -1
- package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts +3 -3
- package/dist/components/hx-overflow-menu/hx-overflow-menu.styles.d.ts.map +1 -1
- package/dist/components/hx-overflow-menu/index.js +1 -1
- package/dist/components/hx-pagination/hx-pagination.d.ts +8 -0
- package/dist/components/hx-pagination/hx-pagination.d.ts.map +1 -1
- package/dist/components/hx-pagination/hx-pagination.styles.d.ts.map +1 -1
- package/dist/components/hx-pagination/index.js +1 -1
- package/dist/components/hx-patient-banner/hx-patient-banner.d.ts +113 -0
- package/dist/components/hx-patient-banner/hx-patient-banner.d.ts.map +1 -0
- package/dist/components/hx-patient-banner/hx-patient-banner.styles.d.ts +2 -0
- package/dist/components/hx-patient-banner/hx-patient-banner.styles.d.ts.map +1 -0
- package/dist/components/hx-patient-banner/index.d.ts +3 -0
- package/dist/components/hx-patient-banner/index.d.ts.map +1 -0
- package/dist/components/hx-patient-banner/index.js +5 -0
- package/dist/components/hx-patient-banner/index.js.map +1 -0
- package/dist/components/hx-phi-field/hx-phi-field.d.ts +97 -0
- package/dist/components/hx-phi-field/hx-phi-field.d.ts.map +1 -0
- package/dist/components/hx-phi-field/hx-phi-field.styles.d.ts +2 -0
- package/dist/components/hx-phi-field/hx-phi-field.styles.d.ts.map +1 -0
- package/dist/components/hx-phi-field/index.d.ts +3 -0
- package/dist/components/hx-phi-field/index.d.ts.map +1 -0
- package/dist/components/hx-phi-field/index.js +5 -0
- package/dist/components/hx-phi-field/index.js.map +1 -0
- package/dist/components/hx-popover/hx-popover.d.ts +25 -9
- package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
- package/dist/components/hx-popover/index.js +1 -1
- package/dist/components/hx-popup/hx-popup.d.ts +5 -8
- package/dist/components/hx-popup/hx-popup.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 +2 -0
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
- package/dist/components/hx-progress-bar/hx-progress-bar.styles.d.ts.map +1 -1
- package/dist/components/hx-progress-bar/index.js +1 -1
- package/dist/components/hx-progress-ring/hx-progress-ring.d.ts.map +1 -1
- package/dist/components/hx-progress-ring/index.js +1 -1
- package/dist/components/hx-prose/hx-prose.d.ts +1 -0
- package/dist/components/hx-prose/hx-prose.d.ts.map +1 -1
- package/dist/components/hx-radio-group/hx-radio-group.d.ts +3 -7
- package/dist/components/hx-radio-group/hx-radio-group.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 +3 -3
- 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 +17 -11
- 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 +12 -0
- package/dist/components/hx-side-nav/hx-nav-item.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.d.ts.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.d.ts +2 -2
- package/dist/components/hx-skeleton/hx-skeleton.d.ts.map +1 -1
- package/dist/components/hx-slider/hx-slider.d.ts +5 -8
- package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
- package/dist/components/hx-slider/hx-slider.styles.d.ts.map +1 -1
- package/dist/components/hx-slider/index.js +1 -1
- package/dist/components/hx-spinner/hx-spinner.d.ts +14 -1
- package/dist/components/hx-spinner/hx-spinner.d.ts.map +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 +10 -4
- 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.d.ts.map +1 -1
- package/dist/components/hx-split-panel/hx-split-panel.styles.d.ts.map +1 -1
- package/dist/components/hx-split-panel/index.js +1 -1
- package/dist/components/hx-stat/hx-stat.d.ts +7 -2
- package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
- package/dist/components/hx-stat/index.js +1 -1
- package/dist/components/hx-status-indicator/hx-status-indicator.d.ts +19 -3
- package/dist/components/hx-status-indicator/hx-status-indicator.d.ts.map +1 -1
- package/dist/components/hx-status-indicator/hx-status-indicator.styles.d.ts.map +1 -1
- package/dist/components/hx-status-indicator/index.js +1 -1
- package/dist/components/hx-steps/hx-step.d.ts +7 -0
- package/dist/components/hx-steps/hx-step.d.ts.map +1 -1
- package/dist/components/hx-steps/hx-step.styles.d.ts.map +1 -1
- package/dist/components/hx-steps/hx-steps.d.ts.map +1 -1
- package/dist/components/hx-steps/index.js +1 -1
- package/dist/components/hx-structured-list/hx-structured-list.d.ts +10 -3
- package/dist/components/hx-structured-list/hx-structured-list.d.ts.map +1 -1
- package/dist/components/hx-structured-list/index.js +1 -1
- package/dist/components/hx-style-scope/hx-style-scope.d.ts +71 -0
- package/dist/components/hx-style-scope/hx-style-scope.d.ts.map +1 -0
- package/dist/components/hx-style-scope/hx-style-scope.styles.d.ts +10 -0
- package/dist/components/hx-style-scope/hx-style-scope.styles.d.ts.map +1 -0
- package/dist/components/hx-style-scope/index.d.ts +2 -0
- package/dist/components/hx-style-scope/index.d.ts.map +1 -0
- package/dist/components/hx-style-scope/index.js +5 -0
- package/dist/components/hx-style-scope/index.js.map +1 -0
- package/dist/components/hx-switch/hx-switch.d.ts +4 -4
- 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.d.ts +1 -0
- package/dist/components/hx-table/hx-table.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.d.ts +1 -0
- package/dist/components/hx-tabs/hx-tab.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 +12 -2
- package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
- package/dist/components/hx-tabs/index.js +1 -1
- package/dist/components/hx-tag/hx-tag.styles.d.ts.map +1 -1
- package/dist/components/hx-tag/index.js +1 -1
- package/dist/components/hx-text/index.js +1 -1
- package/dist/components/hx-text-input/hx-text-input.d.ts +16 -15
- 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 +4 -4
- 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-theme/hx-theme.d.ts +82 -3
- package/dist/components/hx-theme/hx-theme.d.ts.map +1 -1
- package/dist/components/hx-theme/index.js +1 -1
- package/dist/components/hx-time-picker/hx-time-picker.d.ts +6 -1
- 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-stack.d.ts +1 -1
- package/dist/components/hx-toast/hx-toast-stack.d.ts.map +1 -1
- package/dist/components/hx-toast/hx-toast.d.ts +9 -5
- package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
- package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
- package/dist/components/hx-toast/index.js +1 -1
- package/dist/components/hx-toast/toast-factory.d.ts.map +1 -1
- package/dist/components/hx-toggle-button/hx-toggle-button.d.ts +4 -3
- 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 +1 -2
- package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
- package/dist/components/hx-tooltip/index.js +1 -1
- package/dist/components/hx-tree-view/hx-tree-item.d.ts +12 -0
- package/dist/components/hx-tree-view/hx-tree-item.d.ts.map +1 -1
- package/dist/components/hx-tree-view/hx-tree-view.d.ts +27 -2
- package/dist/components/hx-tree-view/hx-tree-view.d.ts.map +1 -1
- package/dist/components/hx-tree-view/hx-tree-view.styles.d.ts.map +1 -1
- package/dist/components/hx-tree-view/index.js +1 -1
- package/dist/controllers/helix-audit-controller.d.ts +71 -0
- package/dist/controllers/helix-audit-controller.d.ts.map +1 -0
- package/dist/css/helix-all.css +9743 -0
- package/dist/css/helix-core.css +1839 -0
- package/dist/css/helix-data.css +639 -0
- package/dist/css/helix-feedback.css +1268 -0
- package/dist/css/helix-forms.css +2525 -0
- package/dist/css/helix-layout.css +380 -0
- package/dist/css/helix-media.css +213 -0
- package/dist/css/helix-navigation.css +1131 -0
- package/dist/css/helix-overlay.css +643 -0
- package/dist/css/helix-tokens.css +432 -0
- package/dist/css/helix-utility.css +633 -0
- package/dist/css/hx-accordion.css +10 -0
- package/dist/css/hx-action-bar.css +117 -0
- package/dist/css/hx-alert.css +213 -0
- package/dist/css/hx-avatar.css +134 -0
- package/dist/css/hx-badge.css +178 -0
- package/dist/css/hx-banner.css +203 -0
- package/dist/css/hx-breadcrumb.css +36 -0
- package/dist/css/hx-button-group.css +91 -0
- package/dist/css/hx-button.css +296 -0
- package/dist/css/hx-card.css +161 -0
- package/dist/css/hx-carousel.css +211 -0
- package/dist/css/hx-checkbox-group.css +77 -0
- package/dist/css/hx-checkbox.css +219 -0
- package/dist/css/hx-clinical-status.css +248 -0
- package/dist/css/hx-code-snippet.css +179 -0
- package/dist/css/hx-color-picker.css +2 -0
- package/dist/css/hx-combobox.css +2 -0
- package/dist/css/hx-container.css +82 -0
- package/dist/css/hx-copy-button.css +121 -0
- package/dist/css/hx-counter.css +51 -0
- package/dist/css/hx-data-table.css +207 -0
- package/dist/css/hx-date-picker.css +2 -0
- package/dist/css/hx-dialog.css +190 -0
- package/dist/css/hx-divider.css +87 -0
- package/dist/css/hx-drawer.css +262 -0
- package/dist/css/hx-dropdown.css +46 -0
- package/dist/css/hx-field-label.css +38 -0
- package/dist/css/hx-field.css +119 -0
- package/dist/css/hx-file-upload.css +241 -0
- package/dist/css/hx-form.css +2 -0
- package/dist/css/hx-format-date.css +10 -0
- package/dist/css/hx-grid.css +14 -0
- package/dist/css/hx-help-text.css +50 -0
- package/dist/css/hx-icon-button.css +152 -0
- package/dist/css/hx-icon.css +73 -0
- package/dist/css/hx-image.css +41 -0
- package/dist/css/hx-link.css +105 -0
- package/dist/css/hx-list.css +48 -0
- package/dist/css/hx-menu.css +23 -0
- package/dist/css/hx-meter.css +113 -0
- package/dist/css/hx-nav.css +242 -0
- package/dist/css/hx-number-input.css +246 -0
- package/dist/css/hx-overflow-menu.css +133 -0
- package/dist/css/hx-pagination.css +193 -0
- package/dist/css/hx-patient-banner.css +139 -0
- package/dist/css/hx-phi-field.css +97 -0
- package/dist/css/hx-popover.css +61 -0
- package/dist/css/hx-popup.css +31 -0
- package/dist/css/hx-progress-bar.css +133 -0
- package/dist/css/hx-progress-ring.css +142 -0
- package/dist/css/hx-prose.css +2 -0
- package/dist/css/hx-radio-group.css +77 -0
- package/dist/css/hx-rating.css +96 -0
- package/dist/css/hx-select.css +295 -0
- package/dist/css/hx-side-nav.css +149 -0
- package/dist/css/hx-skeleton.css +82 -0
- package/dist/css/hx-slider.css +287 -0
- package/dist/css/hx-spinner.css +116 -0
- package/dist/css/hx-split-button.css +309 -0
- package/dist/css/hx-split-panel.css +168 -0
- package/dist/css/hx-stack.css +104 -0
- package/dist/css/hx-stat.css +106 -0
- package/dist/css/hx-status-indicator.css +126 -0
- package/dist/css/hx-steps.css +52 -0
- package/dist/css/hx-structured-list.css +75 -0
- package/dist/css/hx-style-scope.css +4 -0
- package/dist/css/hx-switch.css +169 -0
- package/dist/css/hx-table.css +128 -0
- package/dist/css/hx-tabs.css +76 -0
- package/dist/css/hx-tag.css +146 -0
- package/dist/css/hx-text-input.css +214 -0
- package/dist/css/hx-text.css +149 -0
- package/dist/css/hx-textarea.css +180 -0
- package/dist/css/hx-theme.css +23 -0
- package/dist/css/hx-time-picker.css +2 -0
- package/dist/css/hx-toast.css +230 -0
- package/dist/css/hx-toggle-button.css +207 -0
- package/dist/css/hx-tooltip.css +51 -0
- package/dist/css/hx-top-nav.css +203 -0
- package/dist/css/hx-tree-view.css +22 -0
- package/dist/css/hx-visually-hidden.css +26 -0
- package/dist/css/index.css +84 -0
- package/dist/css/manifest.json +2704 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +266 -176
- package/dist/index.js.map +1 -1
- package/dist/mixins/FocusMixin.d.ts +49 -0
- package/dist/mixins/FocusMixin.d.ts.map +1 -0
- package/dist/mixins/FormMixin.d.ts +69 -0
- package/dist/mixins/FormMixin.d.ts.map +1 -0
- package/dist/mixins/aria-delegation.d.ts +97 -0
- package/dist/mixins/aria-delegation.d.ts.map +1 -0
- package/dist/mixins/index.d.ts +5 -0
- package/dist/mixins/index.d.ts.map +1 -0
- package/dist/shared/FormMixin-Bjvw20G5.js +88 -0
- package/dist/shared/FormMixin-Bjvw20G5.js.map +1 -0
- package/dist/shared/aria-delegation-CBP9eQ0M.js +107 -0
- package/dist/shared/aria-delegation-CBP9eQ0M.js.map +1 -0
- package/dist/shared/{hx-accordion-D1kFhdeQ.js → hx-accordion-_KeulaQR.js} +83 -55
- package/dist/shared/hx-accordion-_KeulaQR.js.map +1 -0
- package/dist/shared/{hx-action-bar-D4bulGQP.js → hx-action-bar-vGFnNwNY.js} +33 -34
- package/dist/shared/hx-action-bar-vGFnNwNY.js.map +1 -0
- package/dist/shared/{hx-alert-CSxCF2rr.js → hx-alert-DRZYP0Oo.js} +32 -28
- package/dist/shared/hx-alert-DRZYP0Oo.js.map +1 -0
- package/dist/shared/{hx-avatar-Cun-O99h.js → hx-avatar-CZfA9KEl.js} +28 -11
- package/dist/shared/hx-avatar-CZfA9KEl.js.map +1 -0
- package/dist/shared/{hx-badge-CsFd2xtw.js → hx-badge-Xg7zoh4Q.js} +46 -37
- package/dist/shared/hx-badge-Xg7zoh4Q.js.map +1 -0
- package/dist/shared/{hx-banner-BTV-X2xF.js → hx-banner-2RS7Nux4.js} +93 -58
- package/dist/shared/hx-banner-2RS7Nux4.js.map +1 -0
- package/dist/shared/{hx-breadcrumb-item-4IwaLgaO.js → hx-breadcrumb-item-CObc-WJl.js} +86 -83
- package/dist/shared/hx-breadcrumb-item-CObc-WJl.js.map +1 -0
- package/dist/shared/{hx-button-7k-KeCYU.js → hx-button-CC1YH9RZ.js} +127 -62
- package/dist/shared/hx-button-CC1YH9RZ.js.map +1 -0
- package/dist/shared/{hx-button-group-CWjWv-wS.js → hx-button-group-ChTQsnQj.js} +10 -10
- package/dist/shared/hx-button-group-ChTQsnQj.js.map +1 -0
- package/dist/shared/{hx-card-0hT3G5hi.js → hx-card-dIKdcMhr.js} +32 -32
- package/dist/shared/hx-card-dIKdcMhr.js.map +1 -0
- package/dist/shared/{hx-carousel-item-DgeYyYZJ.js → hx-carousel-item-Cm8a1nAi.js} +3 -3
- package/dist/shared/hx-carousel-item-Cm8a1nAi.js.map +1 -0
- package/dist/shared/{hx-checkbox-BvjO-O41.js → hx-checkbox-_WUiuTo9.js} +68 -71
- package/dist/shared/hx-checkbox-_WUiuTo9.js.map +1 -0
- package/dist/shared/{hx-checkbox-group-Z5VvWzcj.js → hx-checkbox-group-B-ci-dxp.js} +37 -31
- package/dist/shared/hx-checkbox-group-B-ci-dxp.js.map +1 -0
- package/dist/shared/hx-clinical-status-D6eaplvs.js +469 -0
- package/dist/shared/hx-clinical-status-D6eaplvs.js.map +1 -0
- package/dist/shared/{hx-code-snippet-DqzPkH4K.js → hx-code-snippet-CQsyvthi.js} +56 -47
- package/dist/shared/hx-code-snippet-CQsyvthi.js.map +1 -0
- package/dist/shared/{hx-color-picker-Da8z6AlQ.js → hx-color-picker-Dk2Myvaf.js} +153 -137
- package/dist/shared/hx-color-picker-Dk2Myvaf.js.map +1 -0
- package/dist/shared/{hx-combobox-CivfelTS.js → hx-combobox-CNAJXIxo.js} +10 -10
- package/dist/shared/hx-combobox-CNAJXIxo.js.map +1 -0
- package/dist/shared/{hx-container-DLUKnTi9.js → hx-container-7j16VuQE.js} +16 -16
- package/dist/shared/hx-container-7j16VuQE.js.map +1 -0
- package/dist/shared/{hx-copy-button--0dymSvw.js → hx-copy-button-B_ZHYO7_.js} +47 -40
- package/dist/shared/hx-copy-button-B_ZHYO7_.js.map +1 -0
- package/dist/shared/hx-counter-D_B7L9Pi.js +185 -0
- package/dist/shared/hx-counter-D_B7L9Pi.js.map +1 -0
- package/dist/shared/{hx-data-table-BWvd5NNx.js → hx-data-table-B1j4n4bm.js} +82 -46
- package/dist/shared/hx-data-table-B1j4n4bm.js.map +1 -0
- package/dist/shared/{hx-date-picker-6voxxxNE.js → hx-date-picker-R-0kWFwr.js} +102 -89
- package/dist/shared/hx-date-picker-R-0kWFwr.js.map +1 -0
- package/dist/shared/{hx-dialog-DkUSnVgw.js → hx-dialog-U5d3s0Ps.js} +98 -89
- package/dist/shared/hx-dialog-U5d3s0Ps.js.map +1 -0
- package/dist/shared/{hx-divider-DNNs4e8q.js → hx-divider-DdAN-_jB.js} +5 -5
- package/dist/shared/hx-divider-DdAN-_jB.js.map +1 -0
- package/dist/shared/{hx-drawer-CJcRZcns.js → hx-drawer-e0qeGxAD.js} +117 -77
- package/dist/shared/hx-drawer-e0qeGxAD.js.map +1 -0
- package/dist/shared/{hx-dropdown-Bo0KTM1A.js → hx-dropdown-DP_DNpEb.js} +56 -41
- package/dist/shared/hx-dropdown-DP_DNpEb.js.map +1 -0
- package/dist/shared/{hx-field-3MmzJ4kZ.js → hx-field-COM4KvMQ.js} +9 -9
- package/dist/shared/hx-field-COM4KvMQ.js.map +1 -0
- package/dist/shared/{hx-field-label-Bg-EWvqF.js → hx-field-label-BtZ9H9Yy.js} +8 -11
- package/dist/shared/hx-field-label-BtZ9H9Yy.js.map +1 -0
- package/dist/shared/{hx-file-upload-ByjAgfNy.js → hx-file-upload-DbECypLe.js} +78 -87
- package/dist/shared/hx-file-upload-DbECypLe.js.map +1 -0
- package/dist/shared/{hx-form-BpS6v3Iu.js → hx-form-fJE-FJQV.js} +36 -32
- package/dist/shared/{hx-form-BpS6v3Iu.js.map → hx-form-fJE-FJQV.js.map} +1 -1
- package/dist/shared/{hx-format-date-BdnWV2kX.js → hx-format-date-C030ThSm.js} +14 -12
- package/dist/shared/hx-format-date-C030ThSm.js.map +1 -0
- package/dist/shared/{hx-grid-gEjuF0cR.js → hx-grid-DE8KM5Gf.js} +7 -7
- package/dist/shared/hx-grid-DE8KM5Gf.js.map +1 -0
- package/dist/shared/{hx-icon-button-DzH_bRtC.js → hx-icon-button-Et9wq79n.js} +4 -4
- package/dist/shared/{hx-icon-button-DzH_bRtC.js.map → hx-icon-button-Et9wq79n.js.map} +1 -1
- package/dist/shared/{hx-icon-CP6OnLoM.js → hx-icon-dYvrzvsO.js} +7 -7
- package/dist/shared/hx-icon-dYvrzvsO.js.map +1 -0
- package/dist/shared/{hx-image-C6pGiI6c.js → hx-image-DUsEi-oN.js} +15 -15
- package/dist/shared/hx-image-DUsEi-oN.js.map +1 -0
- package/dist/shared/{hx-link-Tmk_YPvW.js → hx-link-Peg2LzOD.js} +43 -41
- package/dist/shared/hx-link-Peg2LzOD.js.map +1 -0
- package/dist/shared/{hx-menu-divider-DR4G_rqw.js → hx-menu-divider-puPmRAdN.js} +40 -20
- package/dist/shared/hx-menu-divider-puPmRAdN.js.map +1 -0
- package/dist/shared/{hx-meter-uXkTZq-W.js → hx-meter-CVs4A649.js} +13 -13
- package/dist/shared/hx-meter-CVs4A649.js.map +1 -0
- package/dist/shared/{hx-nav-3JsN2Oak.js → hx-nav-CiyqaW2I.js} +119 -107
- package/dist/shared/hx-nav-CiyqaW2I.js.map +1 -0
- package/dist/shared/{hx-nav-item-D3EJatzc.js → hx-nav-item-tM_6bolB.js} +181 -115
- package/dist/shared/hx-nav-item-tM_6bolB.js.map +1 -0
- package/dist/shared/{hx-number-input-CIpL2BEh.js → hx-number-input-BPgrlMLN.js} +34 -33
- package/dist/shared/hx-number-input-BPgrlMLN.js.map +1 -0
- package/dist/shared/{hx-overflow-menu-2kgOJ_ht.js → hx-overflow-menu-Bz02LPPk.js} +15 -11
- package/dist/shared/hx-overflow-menu-Bz02LPPk.js.map +1 -0
- package/dist/shared/{hx-pagination-Blt-fFqV.js → hx-pagination-Cb9UEWXz.js} +88 -72
- package/dist/shared/hx-pagination-Cb9UEWXz.js.map +1 -0
- package/dist/shared/hx-patient-banner-wk4qWmsH.js +297 -0
- package/dist/shared/hx-patient-banner-wk4qWmsH.js.map +1 -0
- package/dist/shared/hx-phi-field-DX9z3nu0.js +295 -0
- package/dist/shared/hx-phi-field-DX9z3nu0.js.map +1 -0
- package/dist/shared/{hx-popover-DxE67miP.js → hx-popover-D6kYQkt3.js} +96 -69
- package/dist/shared/hx-popover-D6kYQkt3.js.map +1 -0
- package/dist/shared/{hx-popup-Dg6n_PbY.js → hx-popup-RQb6HUXc.js} +2 -2
- package/dist/shared/hx-popup-RQb6HUXc.js.map +1 -0
- package/dist/shared/{hx-progress-bar-Dm_EHyng.js → hx-progress-bar-ByEmxq1V.js} +42 -40
- package/dist/shared/hx-progress-bar-ByEmxq1V.js.map +1 -0
- package/dist/shared/{hx-progress-ring-DpxBDD5d.js → hx-progress-ring-CtVnNRQx.js} +2 -2
- package/dist/shared/{hx-progress-ring-DpxBDD5d.js.map → hx-progress-ring-CtVnNRQx.js.map} +1 -1
- package/dist/shared/hx-prose-Ml_L2zje.js.map +1 -1
- package/dist/shared/{hx-radio-BywgVSEu.js → hx-radio-jgeW92SV.js} +28 -27
- package/dist/shared/hx-radio-jgeW92SV.js.map +1 -0
- package/dist/shared/{hx-rating-CUWBQ0fZ.js → hx-rating-g_iy-DW_.js} +92 -96
- package/dist/shared/hx-rating-g_iy-DW_.js.map +1 -0
- package/dist/shared/{hx-select-BwDwxk-M.js → hx-select-BWzxWZs_.js} +139 -100
- package/dist/shared/hx-select-BWzxWZs_.js.map +1 -0
- package/dist/shared/hx-skeleton-BHvALyd7.js.map +1 -1
- package/dist/shared/{hx-slider-D_0EKJyk.js → hx-slider-7Q-e0_pc.js} +27 -22
- package/dist/shared/hx-slider-7Q-e0_pc.js.map +1 -0
- package/dist/shared/{hx-spinner-DMn4SChS.js → hx-spinner-DEgrKsUo.js} +3 -2
- package/dist/shared/hx-spinner-DEgrKsUo.js.map +1 -0
- package/dist/shared/{hx-split-button-CypgLXw1.js → hx-split-button-BA7P_ly5.js} +40 -31
- package/dist/shared/hx-split-button-BA7P_ly5.js.map +1 -0
- package/dist/shared/{hx-split-panel-CV_Kr4EK.js → hx-split-panel-Bss54UN8.js} +16 -13
- package/dist/shared/hx-split-panel-Bss54UN8.js.map +1 -0
- package/dist/shared/{hx-stat-CHntLHJM.js → hx-stat-CmkCUI8v.js} +40 -32
- package/dist/shared/{hx-stat-CHntLHJM.js.map → hx-stat-CmkCUI8v.js.map} +1 -1
- package/dist/shared/{hx-status-indicator-C1BwEvUw.js → hx-status-indicator-Dl3Y34mc.js} +81 -40
- package/dist/shared/hx-status-indicator-Dl3Y34mc.js.map +1 -0
- package/dist/shared/{hx-step-BIVWSPxd.js → hx-step-CmNwfcJx.js} +49 -85
- package/dist/shared/hx-step-CmNwfcJx.js.map +1 -0
- package/dist/shared/{hx-structured-list-CMWllxGg.js → hx-structured-list-Db9rwLI_.js} +26 -23
- package/dist/shared/hx-structured-list-Db9rwLI_.js.map +1 -0
- package/dist/shared/hx-style-scope-BroUu83L.js +125 -0
- package/dist/shared/hx-style-scope-BroUu83L.js.map +1 -0
- package/dist/shared/{hx-switch-BgX8kuWt.js → hx-switch-C0Lp5RGy.js} +8 -5
- package/dist/shared/hx-switch-C0Lp5RGy.js.map +1 -0
- package/dist/shared/{hx-tab-panel-DhOq67jj.js → hx-tab-panel-Dnt8aA74.js} +161 -122
- package/dist/shared/hx-tab-panel-Dnt8aA74.js.map +1 -0
- package/dist/shared/{hx-tag-CzOTDcXI.js → hx-tag-K5fCjfqQ.js} +15 -14
- package/dist/shared/hx-tag-K5fCjfqQ.js.map +1 -0
- package/dist/shared/{hx-td-h6oeW6YC.js → hx-td-DZuILY3s.js} +43 -40
- package/dist/shared/hx-td-DZuILY3s.js.map +1 -0
- package/dist/shared/{hx-text-DTXjiviE.js → hx-text-DoEVOf47.js} +29 -29
- package/dist/shared/hx-text-DoEVOf47.js.map +1 -0
- package/dist/shared/hx-text-input-DTKWPVdy.js +576 -0
- package/dist/shared/hx-text-input-DTKWPVdy.js.map +1 -0
- package/dist/shared/{hx-textarea-BgX7rxyo.js → hx-textarea-BkSiU8oM.js} +15 -15
- package/dist/shared/hx-textarea-BkSiU8oM.js.map +1 -0
- package/dist/shared/hx-theme-Aag8QJvT.js +299 -0
- package/dist/shared/hx-theme-Aag8QJvT.js.map +1 -0
- package/dist/shared/{hx-time-picker-DmLu7WUC.js → hx-time-picker-BpCRsh_z.js} +54 -53
- package/dist/shared/hx-time-picker-BpCRsh_z.js.map +1 -0
- package/dist/shared/{hx-toggle-button-D1jpDvSA.js → hx-toggle-button-CPFqs3eQ.js} +8 -5
- package/dist/shared/hx-toggle-button-CPFqs3eQ.js.map +1 -0
- package/dist/shared/{hx-tooltip-kh7QFPKu.js → hx-tooltip-CrO4vzeX.js} +15 -10
- package/dist/shared/hx-tooltip-CrO4vzeX.js.map +1 -0
- package/dist/shared/{hx-tree-item-BP6UF_H1.js → hx-tree-item-C1PhX-HE.js} +163 -99
- package/dist/shared/hx-tree-item-C1PhX-HE.js.map +1 -0
- package/dist/shared/id-counter-JhvVCnjh.js +143 -0
- package/dist/shared/id-counter-JhvVCnjh.js.map +1 -0
- package/dist/shared/{toast-factory-DTy-qN8r.js → toast-factory-f184Gi70.js} +57 -45
- package/dist/shared/toast-factory-f184Gi70.js.map +1 -0
- package/dist/utilities/adoptedStylesheetRegistry.d.ts +47 -0
- package/dist/utilities/adoptedStylesheetRegistry.d.ts.map +1 -0
- package/dist/utilities/generateScopedSelectors.d.ts +30 -0
- package/dist/utilities/generateScopedSelectors.d.ts.map +1 -0
- package/dist/utilities/injectLightStyles.d.ts +37 -0
- package/dist/utilities/injectLightStyles.d.ts.map +1 -0
- package/dist/utilities/lightStyleRegistry.d.ts +41 -0
- package/dist/utilities/lightStyleRegistry.d.ts.map +1 -0
- package/dist/utilities/sheetManager.d.ts +62 -0
- package/dist/utilities/sheetManager.d.ts.map +1 -0
- package/dist/utils/contrast-checker.d.ts +86 -0
- package/dist/utils/contrast-checker.d.ts.map +1 -0
- package/dist/utils/token-merger.d.ts +24 -0
- package/dist/utils/token-merger.d.ts.map +1 -0
- package/fouc.css +37 -0
- package/package.json +26 -6
- package/dist/shared/hx-accordion-D1kFhdeQ.js.map +0 -1
- package/dist/shared/hx-action-bar-D4bulGQP.js.map +0 -1
- package/dist/shared/hx-alert-CSxCF2rr.js.map +0 -1
- package/dist/shared/hx-avatar-Cun-O99h.js.map +0 -1
- package/dist/shared/hx-badge-CsFd2xtw.js.map +0 -1
- package/dist/shared/hx-banner-BTV-X2xF.js.map +0 -1
- package/dist/shared/hx-breadcrumb-item-4IwaLgaO.js.map +0 -1
- package/dist/shared/hx-button-7k-KeCYU.js.map +0 -1
- package/dist/shared/hx-button-group-CWjWv-wS.js.map +0 -1
- package/dist/shared/hx-card-0hT3G5hi.js.map +0 -1
- package/dist/shared/hx-carousel-item-DgeYyYZJ.js.map +0 -1
- package/dist/shared/hx-checkbox-BvjO-O41.js.map +0 -1
- package/dist/shared/hx-checkbox-group-Z5VvWzcj.js.map +0 -1
- package/dist/shared/hx-code-snippet-DqzPkH4K.js.map +0 -1
- package/dist/shared/hx-color-picker-Da8z6AlQ.js.map +0 -1
- package/dist/shared/hx-combobox-CivfelTS.js.map +0 -1
- package/dist/shared/hx-container-DLUKnTi9.js.map +0 -1
- package/dist/shared/hx-copy-button--0dymSvw.js.map +0 -1
- package/dist/shared/hx-counter-Duf00H7p.js +0 -147
- package/dist/shared/hx-counter-Duf00H7p.js.map +0 -1
- package/dist/shared/hx-data-table-BWvd5NNx.js.map +0 -1
- package/dist/shared/hx-date-picker-6voxxxNE.js.map +0 -1
- package/dist/shared/hx-dialog-DkUSnVgw.js.map +0 -1
- package/dist/shared/hx-divider-DNNs4e8q.js.map +0 -1
- package/dist/shared/hx-drawer-CJcRZcns.js.map +0 -1
- package/dist/shared/hx-dropdown-Bo0KTM1A.js.map +0 -1
- package/dist/shared/hx-field-3MmzJ4kZ.js.map +0 -1
- package/dist/shared/hx-field-label-Bg-EWvqF.js.map +0 -1
- package/dist/shared/hx-file-upload-ByjAgfNy.js.map +0 -1
- package/dist/shared/hx-format-date-BdnWV2kX.js.map +0 -1
- package/dist/shared/hx-grid-gEjuF0cR.js.map +0 -1
- package/dist/shared/hx-icon-CP6OnLoM.js.map +0 -1
- package/dist/shared/hx-image-C6pGiI6c.js.map +0 -1
- package/dist/shared/hx-link-Tmk_YPvW.js.map +0 -1
- package/dist/shared/hx-menu-divider-DR4G_rqw.js.map +0 -1
- package/dist/shared/hx-meter-uXkTZq-W.js.map +0 -1
- package/dist/shared/hx-nav-3JsN2Oak.js.map +0 -1
- package/dist/shared/hx-nav-item-D3EJatzc.js.map +0 -1
- package/dist/shared/hx-number-input-CIpL2BEh.js.map +0 -1
- package/dist/shared/hx-overflow-menu-2kgOJ_ht.js.map +0 -1
- package/dist/shared/hx-pagination-Blt-fFqV.js.map +0 -1
- package/dist/shared/hx-popover-DxE67miP.js.map +0 -1
- package/dist/shared/hx-popup-Dg6n_PbY.js.map +0 -1
- package/dist/shared/hx-progress-bar-Dm_EHyng.js.map +0 -1
- package/dist/shared/hx-radio-BywgVSEu.js.map +0 -1
- package/dist/shared/hx-rating-CUWBQ0fZ.js.map +0 -1
- package/dist/shared/hx-select-BwDwxk-M.js.map +0 -1
- package/dist/shared/hx-slider-D_0EKJyk.js.map +0 -1
- package/dist/shared/hx-spinner-DMn4SChS.js.map +0 -1
- package/dist/shared/hx-split-button-CypgLXw1.js.map +0 -1
- package/dist/shared/hx-split-panel-CV_Kr4EK.js.map +0 -1
- package/dist/shared/hx-status-indicator-C1BwEvUw.js.map +0 -1
- package/dist/shared/hx-step-BIVWSPxd.js.map +0 -1
- package/dist/shared/hx-structured-list-CMWllxGg.js.map +0 -1
- package/dist/shared/hx-switch-BgX8kuWt.js.map +0 -1
- package/dist/shared/hx-tab-panel-DhOq67jj.js.map +0 -1
- package/dist/shared/hx-tag-CzOTDcXI.js.map +0 -1
- package/dist/shared/hx-td-h6oeW6YC.js.map +0 -1
- package/dist/shared/hx-text-DTXjiviE.js.map +0 -1
- package/dist/shared/hx-text-input-CqEdDHMU.js +0 -461
- package/dist/shared/hx-text-input-CqEdDHMU.js.map +0 -1
- package/dist/shared/hx-textarea-BgX7rxyo.js.map +0 -1
- package/dist/shared/hx-theme-6GDoUG8j.js +0 -176
- package/dist/shared/hx-theme-6GDoUG8j.js.map +0 -1
- package/dist/shared/hx-time-picker-DmLu7WUC.js.map +0 -1
- package/dist/shared/hx-toggle-button-D1jpDvSA.js.map +0 -1
- package/dist/shared/hx-tooltip-kh7QFPKu.js.map +0 -1
- package/dist/shared/hx-tree-item-BP6UF_H1.js.map +0 -1
- package/dist/shared/toast-factory-DTy-qN8r.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-number-input-CIpL2BEh.js","sources":["../../src/components/hx-number-input/hx-number-input.styles.ts","../../src/components/hx-number-input/hx-number-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixNumberInputStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1);\n font-family: var(--hx-number-input-font-family, var(--hx-font-family-sans));\n }\n\n /* ─── Label ─── */\n\n .field__label-wrapper {\n display: contents;\n }\n\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1);\n font-size: var(--hx-font-size-sm);\n font-weight: var(--hx-font-weight-medium);\n color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));\n line-height: var(--hx-line-height-normal);\n }\n\n .field__required-marker {\n color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold);\n }\n\n /* ─── Input Wrapper ─── */\n\n .field__input-wrapper {\n display: flex;\n align-items: stretch;\n border: var(--hx-border-width-thin) solid\n var(--hx-number-input-border-color, var(--hx-color-neutral-300));\n border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));\n background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));\n transition:\n border-color var(--hx-transition-fast),\n box-shadow var(--hx-transition-fast);\n overflow: hidden;\n }\n\n .field__input-wrapper:focus-within {\n border-color: var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n /* Fallback for Safari < 16.2 (no color-mix support) */\n box-shadow: 0 0 0 var(--hx-focus-ring-width)\n var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n box-shadow: 0 0 0 var(--hx-focus-ring-width)\n color-mix(\n in srgb,\n var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color))\n calc(var(--hx-focus-ring-opacity) * 100%),\n transparent\n );\n }\n\n /* ─── Error State ─── */\n\n .field--error .field__input-wrapper {\n border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));\n }\n\n .field--error .field__input-wrapper:focus-within {\n border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));\n /* Fallback for Safari < 16.2 (no color-mix support) */\n box-shadow: 0 0 0 var(--hx-focus-ring-width)\n var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));\n box-shadow: 0 0 0 var(--hx-focus-ring-width)\n color-mix(\n in srgb,\n var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626))\n calc(var(--hx-focus-ring-opacity) * 100%),\n transparent\n );\n }\n\n /* ─── Slots (Prefix / Suffix) ─── */\n\n .field__prefix,\n .field__suffix {\n display: flex;\n align-items: center;\n padding: 0 var(--hx-space-3);\n color: var(--hx-color-neutral-500);\n flex-shrink: 0;\n }\n\n /* ─── Native Input ─── */\n\n .field__input {\n flex: 1;\n border: none;\n outline: none;\n background: transparent;\n font-family: inherit;\n color: var(--hx-number-input-color, var(--hx-color-neutral-800));\n line-height: var(--hx-line-height-normal);\n width: 100%;\n /* Size: md (default) */\n padding: var(--hx-space-2) var(--hx-space-3);\n font-size: var(--hx-font-size-md);\n min-height: var(--hx-size-10);\n }\n\n .field__input::placeholder {\n color: var(--hx-color-neutral-400);\n }\n\n .field__input:disabled {\n cursor: not-allowed;\n }\n\n /* ─── Hide native browser spinners ─── */\n\n .field__input[type='number']::-webkit-inner-spin-button,\n .field__input[type='number']::-webkit-outer-spin-button {\n display: none;\n }\n\n .field__input[type='number'] {\n appearance: textfield;\n }\n\n /* ─── Size Variants ─── */\n\n .field--sm .field__input {\n padding: var(--hx-space-1) var(--hx-space-2);\n font-size: var(--hx-font-size-sm);\n min-height: var(--hx-size-8);\n }\n\n .field--lg .field__input {\n padding: var(--hx-space-3) var(--hx-space-4);\n font-size: var(--hx-font-size-lg);\n min-height: var(--hx-size-12);\n }\n\n /* ─── Stepper ─── */\n\n .field__stepper {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n border-left: var(--hx-border-width-thin) solid\n var(--hx-number-input-border-color, var(--hx-color-neutral-300));\n }\n\n .field__stepper-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n cursor: pointer;\n color: var(--hx-color-neutral-600);\n padding: 0;\n flex: 1;\n min-width: var(--hx-size-8);\n line-height: 1;\n transition: background-color var(--hx-transition-fast);\n user-select: none;\n -webkit-user-select: none;\n }\n\n .field__stepper-btn:not(:last-child) {\n border-bottom: var(--hx-border-width-thin) solid\n var(--hx-number-input-border-color, var(--hx-color-neutral-300));\n }\n\n .field__stepper-btn:hover:not(:disabled) {\n background-color: var(--hx-color-neutral-50);\n color: var(--hx-color-neutral-800);\n }\n\n /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */\n .field__stepper-btn:focus:not(:focus-visible) {\n outline: none;\n }\n\n .field__stepper-btn:focus-visible {\n outline: var(--hx-focus-ring-width) solid\n var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: -2px;\n }\n\n .field__stepper-btn:disabled {\n opacity: var(--hx-opacity-disabled);\n cursor: not-allowed;\n }\n\n .field__stepper-btn svg {\n pointer-events: none;\n width: 0.75rem;\n height: 0.75rem;\n }\n\n /* Size sm adjustments for stepper */\n .field--sm .field__stepper-btn {\n min-width: var(--hx-size-6);\n }\n\n /* Size lg adjustments for stepper */\n .field--lg .field__stepper-btn {\n min-width: var(--hx-size-10);\n }\n\n /* ─── Help Text & Error Messages ─── */\n\n .field__help-text {\n font-size: var(--hx-font-size-xs);\n color: var(--hx-color-neutral-500);\n line-height: var(--hx-line-height-normal);\n }\n\n .field__error {\n font-size: var(--hx-font-size-xs);\n color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal);\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .field__input-wrapper {\n transition: none;\n }\n\n .field__stepper-btn {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixNumberInputStyles } from './hx-number-input.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxNumberInputIdCounter = 0;\n\n/**\n * A numeric input component with stepper controls, label, validation, and\n * full form association. Designed for healthcare data-entry contexts where\n * precise numeric values (dosage, age, measurements) must be captured safely.\n *\n * @summary Form-associated numeric input with stepper buttons, bounds checking,\n * label, error, and help text.\n *\n * @tag hx-number-input\n *\n * @slot label - Custom label content (overrides the label property). Use for Drupal Form API rendered labels.\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property). Use for Drupal Form API rendered errors.\n * @slot prefix - Content rendered before the input (e.g., a unit icon).\n * @slot suffix - Content rendered after the input and before the stepper buttons (e.g., a unit label).\n *\n * @fires {CustomEvent<{value: number | null}>} hx-input - Dispatched on every keystroke as the user types.\n * @fires {CustomEvent<{value: number | null}>} hx-change - Dispatched when the input loses focus after its value changed.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart input-wrapper - The wrapper around prefix, input, suffix, and stepper.\n * @csspart input - The native input element.\n * @csspart help-text - The help text container.\n * @csspart error-message - The error message container.\n * @csspart stepper - The stepper button group container.\n * @csspart increment - The increment (+) button.\n * @csspart decrement - The decrement (-) button.\n *\n * @cssprop [--hx-number-input-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-number-input-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-number-input-border-color=var(--hx-color-neutral-300)] - Input border color.\n * @cssprop [--hx-number-input-border-radius=var(--hx-border-radius-md)] - Input border radius.\n * @cssprop [--hx-number-input-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-number-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-number-input-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-number-input-font-family=var(--hx-font-family-sans)] - Font family.\n */\n@customElement('hx-number-input')\nexport class HelixNumberInput extends LitElement {\n static override styles = [tokenStyles, helixNumberInputStyles];\n\n // ─── Form Association ───\n\n static formAssociated = true;\n\n /** @internal */\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /** @internal */\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /**\n * The name of the input, used for form submission.\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * The current numeric value of the input. Null when the field is empty.\n * @attr value\n */\n @property({\n type: Number,\n converter: {\n fromAttribute: (attr: string | null): number | null => {\n if (attr === null || attr === '') return null;\n const n = Number(attr);\n return isNaN(n) ? null : n;\n },\n toAttribute: (val: number | null): string | null => (val === null ? null : String(val)),\n },\n })\n value: number | null = null;\n\n /**\n * Whether the input is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the input is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the input is read-only.\n * @attr readonly\n */\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /**\n * Minimum allowed value. When reached, the decrement button is disabled.\n * @attr min\n */\n @property({ type: Number })\n min: number | undefined = undefined;\n\n /**\n * Maximum allowed value. When reached, the increment button is disabled.\n * @attr max\n */\n @property({ type: Number })\n max: number | undefined = undefined;\n\n /**\n * The amount to increment or decrement on each step action.\n * @attr step\n */\n @property({ type: Number })\n step = 1;\n\n /**\n * The visible label text for the input.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Error message to display. When set, the input enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the input for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Size variant controlling input padding and font size.\n * @attr hx-size\n */\n @property({ type: String, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * When set, hides the +/- stepper buttons.\n * @attr no-stepper\n */\n @property({ type: Boolean, attribute: 'no-stepper' })\n noStepper = false;\n\n /**\n * Validation message shown when the field is required but empty.\n * @attr required-message\n */\n @property({ attribute: 'required-message' })\n requiredMessage = 'This field is required.';\n\n /**\n * Accessible label for the increment (+) stepper button.\n * @attr increment-label\n */\n @property({ attribute: 'increment-label' })\n incrementLabel = 'Increment';\n\n /**\n * Accessible label for the decrement (-) stepper button.\n * @attr decrement-label\n */\n @property({ attribute: 'decrement-label' })\n decrementLabel = 'Decrement';\n\n // ─── Internal References ───\n\n /** @internal */\n @query('.field__input')\n declare private _input: HTMLInputElement | null;\n\n // ─── Internal State ───\n\n /** @internal */\n @state() private _hasLabelSlot = false;\n /** @internal */\n @state() private _hasErrorSlot = false;\n /** @internal */\n @state() private _hasHelpSlot = false;\n\n /** The value captured at first render, used by formResetCallback. */\n /** @internal */\n private _defaultValue: number | null = null;\n\n /** Timer ID for the long-press initial delay. */\n /** @internal */\n private _longPressTimer: ReturnType<typeof setTimeout> | null = null;\n\n /** Interval ID for the long-press rapid-repeat phase. */\n /** @internal */\n private _repeatInterval: ReturnType<typeof setInterval> | null = null;\n\n // ─── Stable IDs ───\n\n /** @internal */\n private readonly _inputId = `hx-number-input-${++_hxNumberInputIdCounter}`;\n /** @internal */\n private readonly _helpTextId = `${this._inputId}-help`;\n /** @internal */\n private readonly _errorId = `${this._inputId}-error`;\n\n // ─── Slot Tracking ───\n\n /** @internal */\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlot = slot.assignedElements().length > 0;\n if (this._hasLabelSlot) {\n const slottedLabel = slot.assignedElements()[0];\n if (slottedLabel && !slottedLabel.id) {\n slottedLabel.id = `${this._inputId}-slotted-label`;\n }\n }\n }\n\n /** @internal */\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const assigned = slot.assignedElements();\n this._hasErrorSlot = assigned.length > 0;\n if (this._hasErrorSlot && assigned[0]) {\n if (!assigned[0].id) assigned[0].id = this._errorId;\n }\n }\n\n /** @internal */\n private _handleHelpSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpSlot = slot.assignedElements().length > 0;\n }\n\n // ─── Lifecycle ───\n\n override firstUpdated(): void {\n this._defaultValue = this.value;\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._clearLongPress();\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (\n changedProperties.has('value') ||\n changedProperties.has('required') ||\n changedProperties.has('min') ||\n changedProperties.has('max') ||\n changedProperties.has('step')\n ) {\n this._syncFormValue();\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 input 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 _syncFormValue(): void {\n this._internals.setFormValue(this.value !== null ? String(this.value) : null);\n }\n\n /** @internal */\n private _updateValidity(): void {\n if (this.required && this.value === null) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || this.requiredMessage,\n this._input ?? undefined,\n );\n return;\n }\n\n if (this.value !== null && this.min !== undefined && this.value < this.min) {\n this._internals.setValidity(\n { rangeUnderflow: true },\n `Value must be at least ${this.min}.`,\n this._input ?? undefined,\n );\n return;\n }\n\n if (this.value !== null && this.max !== undefined && this.value > this.max) {\n this._internals.setValidity(\n { rangeOverflow: true },\n `Value must be at most ${this.max}.`,\n this._input ?? undefined,\n );\n return;\n }\n\n if (this.value !== null && this.step && this.step !== 0) {\n const step = this._finite(this.step) ?? 1;\n const base = this._finite(this.min) ?? 0;\n const remainder = Math.abs((this.value - base) % step);\n const epsilon = 1e-9;\n if (remainder > epsilon && Math.abs(remainder - step) > epsilon) {\n this._internals.setValidity(\n { stepMismatch: true },\n `Value must be a multiple of ${step}.`,\n this._input ?? undefined,\n );\n return;\n }\n }\n\n this._internals.setValidity({});\n }\n\n /** Called by the form when it resets. */\n formResetCallback(): void {\n this.value = this._defaultValue;\n this._internals.setFormValue(this.value !== null ? String(this.value) : null);\n }\n\n /** Called when the form restores state (e.g., back/forward navigation). */\n formStateRestoreCallback(\n state: string | File | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n const parsed = Number(state);\n this.value = isNaN(parsed) ? null : parsed;\n }\n }\n\n /** Called when a parent fieldset is disabled/enabled. */\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Value Parsing ───\n\n /** @internal */\n private _finite(value: number | undefined): number | undefined {\n return Number.isFinite(value) ? value : undefined;\n }\n\n /** @internal */\n private _parseInput(raw: string): number | null {\n if (raw === '' || raw === null) return null;\n const parsed = parseFloat(raw);\n return isNaN(parsed) ? null : parsed;\n }\n\n /** @internal */\n private _clamp(v: number): number {\n let result = v;\n const min = this._finite(this.min);\n const max = this._finite(this.max);\n if (min !== undefined) result = Math.max(min, result);\n if (max !== undefined) result = Math.min(max, result);\n return result;\n }\n\n // ─── Stepper Helpers ───\n\n /** @internal */\n private get _atMin(): boolean {\n return this.value !== null && this.min !== undefined && this.value <= this.min;\n }\n\n /** @internal */\n private get _atMax(): boolean {\n return this.value !== null && this.max !== undefined && this.value >= this.max;\n }\n\n /** @internal */\n private _applyStep(delta: number): void {\n if (this.disabled || this.readonly) return;\n\n const current = this.value ?? 0;\n const step = this._finite(this.step) ?? 1;\n const next = this._clamp(parseFloat((current + delta * step).toFixed(10)));\n\n if (next === this.value) return;\n this.value = next;\n\n this.dispatchEvent(\n new CustomEvent<{ value: number | null }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Long-press ───\n\n /** @internal */\n private _clearLongPress(): void {\n if (this._longPressTimer !== null) {\n clearTimeout(this._longPressTimer);\n this._longPressTimer = null;\n }\n if (this._repeatInterval !== null) {\n clearInterval(this._repeatInterval);\n this._repeatInterval = null;\n }\n }\n\n /** @internal */\n private _startLongPress(delta: number): void {\n this._applyStep(delta);\n this._longPressTimer = setTimeout(() => {\n this._repeatInterval = setInterval(() => {\n this._applyStep(delta);\n }, 100);\n }, 400);\n }\n\n /** @internal */\n private _handleStepperPointerDown(e: PointerEvent, delta: number): void {\n if (this.disabled || this.readonly) return;\n e.preventDefault();\n this._startLongPress(delta);\n }\n\n /** @internal */\n private _handleStepperPointerUp(): void {\n this._clearLongPress();\n }\n\n // ─── Keyboard ───\n\n /** @internal */\n private _handleKeyDown(e: KeyboardEvent): void {\n if (this.disabled || this.readonly) return;\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n this._applyStep(1);\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n this._applyStep(-1);\n }\n }\n\n // ─── Input Events ───\n\n /** @internal */\n private _handleInput(e: Event): void {\n const target = e.target as HTMLInputElement;\n this.value = this._parseInput(target.value);\n this._syncFormValue();\n\n this.dispatchEvent(\n new CustomEvent<{ value: number | null }>('hx-input', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n /** @internal */\n private _handleChange(e: Event): void {\n const target = e.target as HTMLInputElement;\n const parsed = this._parseInput(target.value);\n this.value = parsed !== null ? this._clamp(parsed) : null;\n this._syncFormValue();\n this._updateValidity();\n\n this.dispatchEvent(\n new CustomEvent<{ value: number | null }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Public Methods ───\n\n /** Moves focus to the input element. */\n override focus(options?: FocusOptions): void {\n this._input?.focus(options);\n }\n\n /** Selects all text in the input. */\n select(): void {\n this._input?.select();\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderIncrementIcon() {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 12\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M6 1v10M1 6h10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n </svg>`;\n }\n\n /** @internal */\n private _renderDecrementIcon() {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 12\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M1 6h10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n </svg>`;\n }\n\n // ─── Render ───\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n 'field--sm': this.size === 'sm',\n 'field--md': this.size === 'md',\n 'field--lg': this.size === 'lg',\n };\n\n const describedBy =\n [\n hasError ? this._errorId : null,\n !hasError && (this.helpText || this._hasHelpSlot) ? this._helpTextId : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined;\n\n const displayValue = this.value !== null ? String(this.value) : '';\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <div class=\"field__label-wrapper\">\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" for=${this._inputId}>\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </label>\n `\n : nothing}\n </slot>\n </div>\n\n <div part=\"input-wrapper\" class=\"field__input-wrapper\">\n <span class=\"field__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n\n <input\n part=\"input\"\n class=\"field__input\"\n id=${this._inputId}\n type=\"number\"\n .value=${live(displayValue)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n step=${this.step}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n name=${ifDefined(this.name || undefined)}\n aria-labelledby=${ifDefined(\n this._hasLabelSlot ? `${this._inputId}-slotted-label` : undefined,\n )}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-valuenow=${ifDefined(this.value !== null ? this.value : undefined)}\n aria-valuemin=${ifDefined(this.min)}\n aria-valuemax=${ifDefined(this.max)}\n @input=${this._handleInput}\n @change=${this._handleChange}\n @keydown=${this._handleKeyDown}\n />\n\n <span class=\"field__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n\n ${this.noStepper\n ? nothing\n : html`\n <div part=\"stepper\" class=\"field__stepper\">\n <button\n part=\"increment\"\n class=\"field__stepper-btn\"\n type=\"button\"\n aria-label=${this.incrementLabel}\n ?disabled=${this.disabled || this.readonly || this._atMax}\n tabindex=\"-1\"\n @pointerdown=${(e: PointerEvent) => this._handleStepperPointerDown(e, 1)}\n @pointerup=${this._handleStepperPointerUp}\n @pointerleave=${this._handleStepperPointerUp}\n @pointercancel=${this._handleStepperPointerUp}\n >\n ${this._renderIncrementIcon()}\n </button>\n <button\n part=\"decrement\"\n class=\"field__stepper-btn\"\n type=\"button\"\n aria-label=${this.decrementLabel}\n ?disabled=${this.disabled || this.readonly || this._atMin}\n tabindex=\"-1\"\n @pointerdown=${(e: PointerEvent) => this._handleStepperPointerDown(e, -1)}\n @pointerup=${this._handleStepperPointerUp}\n @pointerleave=${this._handleStepperPointerUp}\n @pointercancel=${this._handleStepperPointerUp}\n >\n ${this._renderDecrementIcon()}\n </button>\n </div>\n `}\n </div>\n\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${this.error\n ? html`\n <div part=\"error-message\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>\n `\n : nothing}\n </slot>\n\n <div\n part=\"help-text\"\n class=\"field__help-text\"\n id=${this._helpTextId}\n ?hidden=${hasError || (!this.helpText && !this._hasHelpSlot)}\n >\n <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-number-input': HelixNumberInput;\n }\n}\n"],"names":["helixNumberInputStyles","css","_hxNumberInputIdCounter","HelixNumberInput","LitElement","slot","slottedLabel","assigned","changedProperties","step","base","remainder","epsilon","state","_mode","parsed","disabled","value","raw","v","result","min","max","delta","current","next","target","options","_a","html","hasError","fieldClasses","describedBy","displayValue","classMap","nothing","live","ifDefined","e","tokenStyles","__decorateClass","property","attr","n","val","query","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACOtC,IAAIC,IAA0B,GAyCjBC,IAAN,cAA+BC,EAAW;AAAA,EAU/C,cAAc;AACZ,UAAA,GAYF,KAAA,OAAO,IAiBP,KAAA,QAAuB,MAOvB,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,MAA0B,QAO1B,KAAA,MAA0B,QAO1B,KAAA,OAAO,GAOP,KAAA,QAAQ,IAOR,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,OAA2B,MAO3B,KAAA,YAAY,IAOZ,KAAA,kBAAkB,2BAOlB,KAAA,iBAAiB,aAOjB,KAAA,iBAAiB,aAWR,KAAQ,gBAAgB,IAExB,KAAQ,gBAAgB,IAExB,KAAQ,eAAe,IAIhC,KAAQ,gBAA+B,MAIvC,KAAQ,kBAAwD,MAIhE,KAAQ,kBAAyD,MAKjE,KAAiB,WAAW,mBAAmB,EAAEF,CAAuB,IAExE,KAAiB,cAAc,GAAG,KAAK,QAAQ,SAE/C,KAAiB,WAAW,GAAG,KAAK,QAAQ,UAjK1C,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA;AAAA;AAAA,EAqKQ,uBAAuB,GAAgB;AAC7C,UAAMG,IAAO,EAAE;AAEf,QADA,KAAK,gBAAgBA,EAAK,iBAAA,EAAmB,SAAS,GAClD,KAAK,eAAe;AACtB,YAAMC,IAAeD,EAAK,iBAAA,EAAmB,CAAC;AAC9C,MAAIC,KAAgB,CAACA,EAAa,OAChCA,EAAa,KAAK,GAAG,KAAK,QAAQ;AAAA,IAEtC;AAAA,EACF;AAAA;AAAA,EAGQ,uBAAuB,GAAgB;AAE7C,UAAMC,IADO,EAAE,OACO,iBAAA;AACtB,SAAK,gBAAgBA,EAAS,SAAS,GACnC,KAAK,iBAAiBA,EAAS,CAAC,MAC7BA,EAAS,CAAC,EAAE,OAAIA,EAAS,CAAC,EAAE,KAAK,KAAK;AAAA,EAE/C;AAAA;AAAA,EAGQ,sBAAsB,GAAgB;AAC5C,UAAMF,IAAO,EAAE;AACf,SAAK,eAAeA,EAAK,iBAAA,EAAmB,SAAS;AAAA,EACvD;AAAA;AAAA,EAIS,eAAqB;AAC5B,SAAK,gBAAgB,KAAK;AAAA,EAC5B;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,gBAAA;AAAA,EACP;AAAA,EAES,QAAQG,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,IAE7BA,EAAkB,IAAI,OAAO,KAC7BA,EAAkB,IAAI,UAAU,KAChCA,EAAkB,IAAI,KAAK,KAC3BA,EAAkB,IAAI,KAAK,KAC3BA,EAAkB,IAAI,MAAM,OAE5B,KAAK,eAAA,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,iBAAuB;AAC7B,SAAK,WAAW,aAAa,KAAK,UAAU,OAAO,OAAO,KAAK,KAAK,IAAI,IAAI;AAAA,EAC9E;AAAA;AAAA,EAGQ,kBAAwB;AAC9B,QAAI,KAAK,YAAY,KAAK,UAAU,MAAM;AACxC,WAAK,WAAW;AAAA,QACd,EAAE,cAAc,GAAA;AAAA,QAChB,KAAK,SAAS,KAAK;AAAA,QACnB,KAAK,UAAU;AAAA,MAAA;AAEjB;AAAA,IACF;AAEA,QAAI,KAAK,UAAU,QAAQ,KAAK,QAAQ,UAAa,KAAK,QAAQ,KAAK,KAAK;AAC1E,WAAK,WAAW;AAAA,QACd,EAAE,gBAAgB,GAAA;AAAA,QAClB,0BAA0B,KAAK,GAAG;AAAA,QAClC,KAAK,UAAU;AAAA,MAAA;AAEjB;AAAA,IACF;AAEA,QAAI,KAAK,UAAU,QAAQ,KAAK,QAAQ,UAAa,KAAK,QAAQ,KAAK,KAAK;AAC1E,WAAK,WAAW;AAAA,QACd,EAAE,eAAe,GAAA;AAAA,QACjB,yBAAyB,KAAK,GAAG;AAAA,QACjC,KAAK,UAAU;AAAA,MAAA;AAEjB;AAAA,IACF;AAEA,QAAI,KAAK,UAAU,QAAQ,KAAK,QAAQ,KAAK,SAAS,GAAG;AACvD,YAAMC,IAAO,KAAK,QAAQ,KAAK,IAAI,KAAK,GAClCC,IAAO,KAAK,QAAQ,KAAK,GAAG,KAAK,GACjCC,IAAY,KAAK,KAAK,KAAK,QAAQD,KAAQD,CAAI,GAC/CG,IAAU;AAChB,UAAID,IAAYC,KAAW,KAAK,IAAID,IAAYF,CAAI,IAAIG,GAAS;AAC/D,aAAK,WAAW;AAAA,UACd,EAAE,cAAc,GAAA;AAAA,UAChB,+BAA+BH,CAAI;AAAA,UACnC,KAAK,UAAU;AAAA,QAAA;AAEjB;AAAA,MACF;AAAA,IACF;AAEA,SAAK,WAAW,YAAY,EAAE;AAAA,EAChC;AAAA;AAAA,EAGA,oBAA0B;AACxB,SAAK,QAAQ,KAAK,eAClB,KAAK,WAAW,aAAa,KAAK,UAAU,OAAO,OAAO,KAAK,KAAK,IAAI,IAAI;AAAA,EAC9E;AAAA;AAAA,EAGA,yBACEI,GACAC,GACM;AACN,QAAI,OAAOD,KAAU,UAAU;AAC7B,YAAME,IAAS,OAAOF,CAAK;AAC3B,WAAK,QAAQ,MAAME,CAAM,IAAI,OAAOA;AAAA,IACtC;AAAA,EACF;AAAA;AAAA,EAGA,qBAAqBC,GAAyB;AAC5C,SAAK,WAAWA;AAAA,EAClB;AAAA;AAAA;AAAA,EAKQ,QAAQC,GAA+C;AAC7D,WAAO,OAAO,SAASA,CAAK,IAAIA,IAAQ;AAAA,EAC1C;AAAA;AAAA,EAGQ,YAAYC,GAA4B;AAC9C,QAAIA,MAAQ,MAAMA,MAAQ,KAAM,QAAO;AACvC,UAAMH,IAAS,WAAWG,CAAG;AAC7B,WAAO,MAAMH,CAAM,IAAI,OAAOA;AAAA,EAChC;AAAA;AAAA,EAGQ,OAAOI,GAAmB;AAChC,QAAIC,IAASD;AACb,UAAME,IAAM,KAAK,QAAQ,KAAK,GAAG,GAC3BC,IAAM,KAAK,QAAQ,KAAK,GAAG;AACjC,WAAID,MAAQ,WAAWD,IAAS,KAAK,IAAIC,GAAKD,CAAM,IAChDE,MAAQ,WAAWF,IAAS,KAAK,IAAIE,GAAKF,CAAM,IAC7CA;AAAA,EACT;AAAA;AAAA;AAAA,EAKA,IAAY,SAAkB;AAC5B,WAAO,KAAK,UAAU,QAAQ,KAAK,QAAQ,UAAa,KAAK,SAAS,KAAK;AAAA,EAC7E;AAAA;AAAA,EAGA,IAAY,SAAkB;AAC5B,WAAO,KAAK,UAAU,QAAQ,KAAK,QAAQ,UAAa,KAAK,SAAS,KAAK;AAAA,EAC7E;AAAA;AAAA,EAGQ,WAAWG,GAAqB;AACtC,QAAI,KAAK,YAAY,KAAK,SAAU;AAEpC,UAAMC,IAAU,KAAK,SAAS,GACxBf,IAAO,KAAK,QAAQ,KAAK,IAAI,KAAK,GAClCgB,IAAO,KAAK,OAAO,YAAYD,IAAUD,IAAQd,GAAM,QAAQ,EAAE,CAAC,CAAC;AAEzE,IAAIgB,MAAS,KAAK,UAClB,KAAK,QAAQA,GAEb,KAAK;AAAA,MACH,IAAI,YAAsC,aAAa;AAAA,QACrD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAKQ,kBAAwB;AAC9B,IAAI,KAAK,oBAAoB,SAC3B,aAAa,KAAK,eAAe,GACjC,KAAK,kBAAkB,OAErB,KAAK,oBAAoB,SAC3B,cAAc,KAAK,eAAe,GAClC,KAAK,kBAAkB;AAAA,EAE3B;AAAA;AAAA,EAGQ,gBAAgBF,GAAqB;AAC3C,SAAK,WAAWA,CAAK,GACrB,KAAK,kBAAkB,WAAW,MAAM;AACtC,WAAK,kBAAkB,YAAY,MAAM;AACvC,aAAK,WAAWA,CAAK;AAAA,MACvB,GAAG,GAAG;AAAA,IACR,GAAG,GAAG;AAAA,EACR;AAAA;AAAA,EAGQ,0BAA0B,GAAiBA,GAAqB;AACtE,IAAI,KAAK,YAAY,KAAK,aAC1B,EAAE,eAAA,GACF,KAAK,gBAAgBA,CAAK;AAAA,EAC5B;AAAA;AAAA,EAGQ,0BAAgC;AACtC,SAAK,gBAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAKQ,eAAe,GAAwB;AAC7C,IAAI,KAAK,YAAY,KAAK,aACtB,EAAE,QAAQ,aACZ,EAAE,eAAA,GACF,KAAK,WAAW,CAAC,KACR,EAAE,QAAQ,gBACnB,EAAE,eAAA,GACF,KAAK,WAAW,EAAE;AAAA,EAEtB;AAAA;AAAA;AAAA,EAKQ,aAAa,GAAgB;AACnC,UAAMG,IAAS,EAAE;AACjB,SAAK,QAAQ,KAAK,YAAYA,EAAO,KAAK,GAC1C,KAAK,eAAA,GAEL,KAAK;AAAA,MACH,IAAI,YAAsC,YAAY;AAAA,QACpD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,cAAc,GAAgB;AACpC,UAAMA,IAAS,EAAE,QACXX,IAAS,KAAK,YAAYW,EAAO,KAAK;AAC5C,SAAK,QAAQX,MAAW,OAAO,KAAK,OAAOA,CAAM,IAAI,MACrD,KAAK,eAAA,GACL,KAAK,gBAAA,GAEL,KAAK;AAAA,MACH,IAAI,YAAsC,aAAa;AAAA,QACrD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAKS,MAAMY,GAA8B;;AAC3C,KAAAC,IAAA,KAAK,WAAL,QAAAA,EAAa,MAAMD;AAAA,EACrB;AAAA;AAAA,EAGA,SAAe;;AACb,KAAAC,IAAA,KAAK,WAAL,QAAAA,EAAa;AAAA,EACf;AAAA;AAAA;AAAA,EAKQ,uBAAuB;AAC7B,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AAAA;AAAA,EAGQ,uBAAuB;AAC7B,WAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAW,CAAC,CAAC,KAAK,SAAS,KAAK,eAEhCC,IAAe;AAAA,MACnB,OAAO;AAAA,MACP,gBAAgBD;AAAA,MAChB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB,KAAK;AAAA,MACxB,aAAa,KAAK,SAAS;AAAA,MAC3B,aAAa,KAAK,SAAS;AAAA,MAC3B,aAAa,KAAK,SAAS;AAAA,IAAA,GAGvBE,IACJ;AAAA,MACEF,IAAW,KAAK,WAAW;AAAA,MAC3B,CAACA,MAAa,KAAK,YAAY,KAAK,gBAAgB,KAAK,cAAc;AAAA,IAAA,EAEtE,OAAO,OAAO,EACd,KAAK,GAAG,KAAK,QAEZG,IAAe,KAAK,UAAU,OAAO,OAAO,KAAK,KAAK,IAAI;AAEhE,WAAOJ;AAAA,gCACqBK,EAASH,CAAY,CAAC;AAAA;AAAA,2CAEX,KAAK,sBAAsB;AAAA,cACxD,KAAK,QACHF;AAAA,iEACiD,KAAK,QAAQ;AAAA,sBACxD,KAAK,KAAK;AAAA,sBACV,KAAK,WACHA,sEACAM,CAAO;AAAA;AAAA,oBAGfA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAYN,KAAK,QAAQ;AAAA;AAAA,qBAETC,EAAKH,CAAY,CAAC;AAAA,kBACrBI,EAAU,KAAK,GAAG,CAAC;AAAA,kBACnBA,EAAU,KAAK,GAAG,CAAC;AAAA,mBAClB,KAAK,IAAI;AAAA,wBACJ,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,mBAClBA,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA,8BACtBA;AAAA,MAChB,KAAK,gBAAgB,GAAG,KAAK,QAAQ,mBAAmB;AAAA,IAAA,CACzD;AAAA,2BACcP,IAAW,SAASK,CAAO;AAAA,+BACvBE,EAAUL,CAAW,CAAC;AAAA,4BACzBK,EAAU,KAAK,UAAU,OAAO,KAAK,QAAQ,MAAS,CAAC;AAAA,4BACvDA,EAAU,KAAK,GAAG,CAAC;AAAA,4BACnBA,EAAU,KAAK,GAAG,CAAC;AAAA,qBAC1B,KAAK,YAAY;AAAA,sBAChB,KAAK,aAAa;AAAA,uBACjB,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAO9B,KAAK,YACHF,IACAN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAMmB,KAAK,cAAc;AAAA,gCACpB,KAAK,YAAY,KAAK,YAAY,KAAK,MAAM;AAAA;AAAA,mCAE1C,CAACS,MAAoB,KAAK,0BAA0BA,GAAG,CAAC,CAAC;AAAA,iCAC3D,KAAK,uBAAuB;AAAA,oCACzB,KAAK,uBAAuB;AAAA,qCAC3B,KAAK,uBAAuB;AAAA;AAAA,sBAE3C,KAAK,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAMhB,KAAK,cAAc;AAAA,gCACpB,KAAK,YAAY,KAAK,YAAY,KAAK,MAAM;AAAA;AAAA,mCAE1C,CAACA,MAAoB,KAAK,0BAA0BA,GAAG,EAAE,CAAC;AAAA,iCAC5D,KAAK,uBAAuB;AAAA,oCACzB,KAAK,uBAAuB;AAAA,qCAC3B,KAAK,uBAAuB;AAAA;AAAA,sBAE3C,KAAK,sBAAsB;AAAA;AAAA;AAAA,eAGlC;AAAA;AAAA;AAAA,yCAG0B,KAAK,sBAAsB;AAAA,YACxD,KAAK,QACHT;AAAA,oEACsD,KAAK,QAAQ;AAAA,oBAC7D,KAAK,KAAK;AAAA;AAAA,kBAGhBM,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMN,KAAK,WAAW;AAAA,oBACXL,KAAa,CAAC,KAAK,YAAY,CAAC,KAAK,YAAa;AAAA;AAAA,+CAEvB,KAAK,qBAAqB,IAAI,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIxF;AACF;AApoBa3B,EACK,SAAS,CAACoC,GAAavC,CAAsB;AADlDG,EAKJ,iBAAiB;AAkBxBqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtBftC,EAuBX,WAAA,QAAA,CAAA;AAiBAqC,EAAA;AAAA,EAXCC,EAAS;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,MACT,eAAe,CAACC,MAAuC;AACrD,YAAIA,MAAS,QAAQA,MAAS,GAAI,QAAO;AACzC,cAAMC,IAAI,OAAOD,CAAI;AACrB,eAAO,MAAMC,CAAC,IAAI,OAAOA;AAAA,MAC3B;AAAA,MACA,aAAa,CAACC,MAAuCA,MAAQ,OAAO,OAAO,OAAOA,CAAG;AAAA,IAAA;AAAA,EACvF,CACD;AAAA,GAvCUzC,EAwCX,WAAA,SAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9C/BtC,EA+CX,WAAA,YAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArD/BtC,EAsDX,WAAA,YAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5D/BtC,EA6DX,WAAA,YAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnEftC,EAoEX,WAAA,OAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1EftC,EA2EX,WAAA,OAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjFftC,EAkFX,WAAA,QAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxFftC,EAyFX,WAAA,SAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/FftC,EAgGX,WAAA,SAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAtGvCtC,EAuGX,WAAA,YAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,WAAW;AAAA,GA7GrCtC,EA8GX,WAAA,QAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,cAAc;AAAA,GApHzCtC,EAqHX,WAAA,aAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,mBAAA,CAAoB;AAAA,GA3HhCtC,EA4HX,WAAA,mBAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,kBAAA,CAAmB;AAAA,GAlI/BtC,EAmIX,WAAA,kBAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,kBAAA,CAAmB;AAAA,GAzI/BtC,EA0IX,WAAA,kBAAA,CAAA;AAMgBqC,EAAA;AAAA,EADfK,EAAM,eAAe;AAAA,GA/IX1C,EAgJK,WAAA,UAAA,CAAA;AAKCqC,EAAA;AAAA,EAAhB3B,EAAA;AAAM,GArJIV,EAqJM,WAAA,iBAAA,CAAA;AAEAqC,EAAA;AAAA,EAAhB3B,EAAA;AAAM,GAvJIV,EAuJM,WAAA,iBAAA,CAAA;AAEAqC,EAAA;AAAA,EAAhB3B,EAAA;AAAM,GAzJIV,EAyJM,WAAA,gBAAA,CAAA;AAzJNA,IAANqC,EAAA;AAAA,EADNM,EAAc,iBAAiB;AAAA,GACnB3C,CAAA;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-overflow-menu-2kgOJ_ht.js","sources":["../../src/components/hx-overflow-menu/hx-overflow-menu.styles.ts","../../src/components/hx-overflow-menu/hx-overflow-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixOverflowMenuStyles = css`\n :host {\n display: inline-block;\n position: relative;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.4);\n }\n\n /* ─── Trigger Button ─── */\n\n .trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: var(--hx-border-width-thin, 1px) solid transparent;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n background-color: transparent;\n color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #4b5563));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 0.15s ease),\n color var(--hx-transition-fast, 0.15s ease);\n flex-shrink: 0;\n padding: 0;\n line-height: 1;\n }\n\n .trigger:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-overflow-menu-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .trigger:hover:not([disabled]) {\n background-color: var(--hx-color-neutral-100, #f3f4f6);\n }\n\n .trigger--open {\n background-color: var(--hx-color-neutral-100, #f3f4f6);\n }\n\n /* ─── Size Variants ─── */\n\n .trigger--sm {\n width: var(--hx-size-8, 2rem);\n height: var(--hx-size-8, 2rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n .trigger--md {\n width: var(--hx-size-10, 2.5rem);\n height: var(--hx-size-10, 2.5rem);\n font-size: var(--hx-font-size-md, 1rem);\n }\n\n .trigger--lg {\n width: var(--hx-size-12, 3rem);\n height: var(--hx-size-12, 3rem);\n font-size: var(--hx-font-size-lg, 1.125rem);\n }\n\n /* ─── Panel ─── */\n\n .panel {\n position: fixed;\n z-index: var(--hx-overflow-menu-panel-z-index, 1000);\n min-width: var(--hx-overflow-menu-panel-min-width, 160px);\n background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #fff));\n border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e5e7eb));\n border-radius: var(\n --hx-overflow-menu-panel-border-radius,\n var(--hx-border-radius-md, 0.375rem)\n );\n box-shadow: var(\n --hx-overflow-menu-panel-shadow,\n 0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12))\n );\n padding: var(--hx-space-1, 0.25rem) 0;\n outline: none;\n }\n\n /* ─── Slot: menu items ─── */\n\n ::slotted([role='menuitem']),\n ::slotted([role='menuitemcheckbox']),\n ::slotted([role='menuitemradio']) {\n display: block;\n width: 100%;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n background: none;\n border: none;\n text-align: left;\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-color-neutral-900, #111827);\n cursor: pointer;\n white-space: nowrap;\n box-sizing: border-box;\n }\n\n ::slotted([role='menuitem']:hover),\n ::slotted([role='menuitemcheckbox']:hover),\n ::slotted([role='menuitemradio']:hover) {\n background-color: var(--hx-color-neutral-50, #f9fafb);\n }\n\n ::slotted([role='menuitem']:focus-visible),\n ::slotted([role='menuitemcheckbox']:focus-visible),\n ::slotted([role='menuitemradio']:focus-visible) {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-overflow-menu-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500))\n );\n outline-offset: 0;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .trigger {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { computePosition, flip, shift, offset } from '@floating-ui/dom';\nimport { helixOverflowMenuStyles } from './hx-overflow-menu.styles.js';\n\nlet _counter = 0;\n\n/**\n * An overflow menu (kebab/meatball menu) that reveals hidden actions via a\n * floating panel. Composed from a trigger button and a slotted menu panel.\n *\n * @summary \"...\" or kebab icon button that reveals hidden actions.\n *\n * @tag hx-overflow-menu\n *\n * @slot - Menu items (e.g. `<button role=\"menuitem\">` or `<hx-menu-item>` elements).\n *\n * @fires {CustomEvent<{value: string}>} hx-select - Dispatched when a menu item is selected.\n * @fires {CustomEvent<void>} hx-show - Dispatched when the panel opens.\n * @fires {CustomEvent<void>} hx-hide - Dispatched when the panel closes.\n *\n * @csspart button - The trigger icon button element.\n * @csspart trigger - Alias for button — the trigger icon button element.\n * @csspart panel - The floating menu panel container.\n * @csspart menu - Alias for panel — the floating menu panel container.\n *\n * @cssprop [--hx-overflow-menu-panel-bg=var(--hx-color-neutral-0,#fff)] - Panel background color.\n * @cssprop [--hx-overflow-menu-panel-border=1px solid var(--hx-color-neutral-200,#e5e7eb)] - Panel border.\n * @cssprop [--hx-overflow-menu-panel-border-radius=var(--hx-border-radius-md)] - Panel border radius.\n * @cssprop [--hx-overflow-menu-panel-shadow=0 4px 16px rgba(0,0,0,0.12)] - Panel box shadow.\n * @cssprop [--hx-overflow-menu-panel-min-width=160px] - Minimum panel width.\n * @cssprop [--hx-overflow-menu-panel-z-index=1000] - Panel z-index.\n * @cssprop [--hx-overflow-menu-button-color=var(--hx-color-neutral-600)] - Trigger icon color.\n *\n * @example\n * ```html\n * <hx-overflow-menu>\n * <button role=\"menuitem\">Edit</button>\n * <button role=\"menuitem\">Delete</button>\n * </hx-overflow-menu>\n * ```\n */\n@customElement('hx-overflow-menu')\nexport class HelixOverflowMenu extends LitElement {\n static override styles = [tokenStyles, helixOverflowMenuStyles];\n\n /**\n * Preferred placement of the floating panel relative to the trigger.\n * @attr placement\n */\n @property({ type: String, reflect: true })\n placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'\n | 'right'\n | 'right-start'\n | 'right-end' = 'bottom-end';\n\n /**\n * Size of the trigger button.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether the trigger button is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Icon orientation: vertical (kebab ⋮) or horizontal (meatball ···).\n * @attr icon\n */\n @property({ type: String, reflect: true })\n icon: 'vertical' | 'horizontal' = 'vertical';\n\n /**\n * Accessible label for the trigger button.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = 'More actions';\n\n /**\n * Accessible label for the menu panel. Reflected as `menu-label`.\n * @attr menu-label\n */\n @property({ type: String, reflect: true, attribute: 'menu-label' })\n menuLabel = 'Actions';\n\n /**\n * Tracks whether the overflow menu panel is currently open and visible.\n * @internal\n */\n @state() private _open = false;\n\n /**\n * Unique ID for the floating panel element, used to wire aria-controls on the trigger button.\n * @internal\n */\n private readonly _panelId = `hx-overflow-menu-panel-${++_counter}`;\n\n /** @internal */\n @query('[part~=\"button\"]') private _buttonEl!: HTMLButtonElement | null;\n\n /** @internal */\n @query('[part~=\"panel\"]') private _panelEl!: HTMLElement | null;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this._handleDocumentClick, true);\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._handleDocumentClick, true);\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n // ─── Open / Close ───\n\n /** @internal */\n private async _show(): Promise<void> {\n if (this._open || this.disabled) return;\n this._open = true;\n await this.updateComplete;\n await this._updatePosition();\n this._focusFirstItem();\n this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _hide(): void {\n if (!this._open) return;\n this._open = false;\n this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _toggle(): void {\n if (this._open) {\n this._hide();\n } else {\n void this._show();\n }\n }\n\n // ─── Positioning (Floating UI) ───\n\n /** @internal */\n private async _updatePosition(): Promise<void> {\n const trigger = this._buttonEl as HTMLElement | null;\n const panel = this._panelEl;\n if (!trigger || !panel) return;\n\n const { x, y } = await computePosition(trigger, panel, {\n placement: this.placement,\n strategy: 'fixed',\n middleware: [offset(4), flip(), shift({ padding: 8 })],\n });\n\n Object.assign(panel.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n }\n\n // ─── Focus management ───\n\n /** @internal */\n private _focusFirstItem(): void {\n const items = this._getMenuItems();\n items[0]?.focus();\n }\n\n /** @internal */\n private _getMenuItems(): HTMLElement[] {\n const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\n return (\n (slot\n ?.assignedElements({ flatten: true })\n .filter(\n (el) =>\n el instanceof HTMLElement &&\n !el.hasAttribute('disabled') &&\n !(el as HTMLButtonElement).disabled &&\n (el.getAttribute('role') === 'menuitem' ||\n el.getAttribute('role') === 'menuitemcheckbox' ||\n el.getAttribute('role') === 'menuitemradio' ||\n el.tagName.toLowerCase().startsWith('hx-')),\n ) as HTMLElement[]) ?? []\n );\n }\n\n // ─── Event Handlers (arrow function class fields — stable reference, no bind needed) ───\n\n /** @internal */\n private readonly _handleTriggerClick = (e: MouseEvent): void => {\n e.stopPropagation();\n this._toggle();\n };\n\n /** @internal */\n private readonly _handleDocumentClick = (e: MouseEvent): void => {\n if (!this._open) return;\n const path = e.composedPath();\n if (!path.includes(this)) {\n this._hide();\n }\n };\n\n /** @internal */\n private readonly _handleKeydown = (e: KeyboardEvent): void => {\n if (!this._open) return;\n if (e.key === 'Escape') {\n e.stopPropagation();\n this._hide();\n this._buttonEl?.focus();\n return;\n }\n if (e.key === 'Tab') {\n this._hide();\n return;\n }\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n e.preventDefault();\n e.stopPropagation();\n const items = this._getMenuItems();\n if (items.length === 0) return;\n const focused = items.indexOf(document.activeElement as HTMLElement);\n let next: number;\n if (e.key === 'ArrowDown') {\n next = focused < 0 || focused >= items.length - 1 ? 0 : focused + 1;\n } else if (e.key === 'ArrowUp') {\n next = focused <= 0 ? items.length - 1 : focused - 1;\n } else if (e.key === 'Home') {\n next = 0;\n } else {\n next = items.length - 1;\n }\n items[next]?.focus();\n }\n };\n\n /** @internal */\n private readonly _handleSlotClick = (e: Event): void => {\n const target = e.target as HTMLElement;\n const menuItem = target.closest(\n '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]',\n ) as HTMLElement | null;\n if (!menuItem) return;\n if (menuItem.hasAttribute('disabled') || (menuItem as HTMLButtonElement).disabled) return;\n const value = menuItem.getAttribute('data-value') ?? menuItem.textContent?.trim() ?? '';\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-select', {\n bubbles: true,\n composed: true,\n detail: { value },\n }),\n );\n this._hide();\n };\n\n // ─── SVG Icons ───\n\n /** @internal */\n private _renderIcon() {\n if (this.icon === 'horizontal') {\n return html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <circle cx=\"5\" cy=\"12\" r=\"2\" />\n <circle cx=\"12\" cy=\"12\" r=\"2\" />\n <circle cx=\"19\" cy=\"12\" r=\"2\" />\n </svg>\n `;\n }\n return html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <circle cx=\"12\" cy=\"5\" r=\"2\" />\n <circle cx=\"12\" cy=\"12\" r=\"2\" />\n <circle cx=\"12\" cy=\"19\" r=\"2\" />\n </svg>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const btnClasses = {\n trigger: true,\n [`trigger--${this.size}`]: true,\n 'trigger--open': this._open,\n };\n\n return html`\n <button\n part=\"button trigger\"\n class=${classMap(btnClasses)}\n type=\"button\"\n aria-label=${this.label}\n aria-haspopup=\"menu\"\n aria-expanded=${this._open ? 'true' : nothing}\n aria-controls=${this._open ? this._panelId : nothing}\n ?disabled=${this.disabled}\n @click=${this._handleTriggerClick}\n >\n ${this._renderIcon()}\n </button>\n ${this._open\n ? html`\n <div\n id=${this._panelId}\n part=\"panel menu\"\n role=\"menu\"\n aria-label=${this.menuLabel}\n class=\"panel\"\n @click=${this._handleSlotClick}\n >\n <slot></slot>\n </div>\n `\n : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-overflow-menu': HelixOverflowMenu;\n }\n}\n"],"names":["helixOverflowMenuStyles","css","_counter","HelixOverflowMenu","LitElement","_a","items","focused","next","_b","menuItem","value","trigger","panel","x","y","computePosition","offset","flip","shift","slot","el","html","btnClasses","classMap","nothing","tokenStyles","__decorateClass","property","state","query","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-pagination-Blt-fFqV.js","sources":["../../src/components/hx-pagination/hx-pagination.styles.ts","../../src/components/hx-pagination/hx-pagination.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPaginationStyles = css`\n :host {\n display: block;\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n .pagination-root {\n display: flex;\n align-items: center;\n gap: var(--hx-space-4, 1rem);\n flex-wrap: wrap;\n }\n\n nav {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .list {\n display: flex;\n align-items: center;\n gap: var(--hx-pagination-gap, var(--hx-space-1, 0.25rem));\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .item {\n display: flex;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--hx-pagination-button-size, 2.25rem);\n height: var(--hx-pagination-button-size, 2.25rem);\n padding: 0 var(--hx-space-2, 0.5rem);\n border: 1px solid var(--hx-pagination-border-color, var(--hx-color-neutral-300, #d1d5db));\n border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));\n background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));\n color: var(--hx-pagination-color, var(--hx-color-neutral-900, #111827));\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-family: inherit;\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms) ease,\n border-color var(--hx-transition-fast, 150ms) ease,\n color var(--hx-transition-fast, 150ms) ease;\n text-decoration: none;\n white-space: nowrap;\n }\n\n .button:hover:not(:disabled) {\n background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f3f4f6));\n border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .button[aria-current='page'] {\n background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb));\n border-color: var(\n --hx-pagination-active-border-color,\n var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb))\n );\n color: var(--hx-pagination-active-color, var(--hx-color-neutral-0, #ffffff));\n font-weight: var(--hx-font-weight-semibold, 600);\n cursor: default;\n pointer-events: none;\n }\n\n .button:disabled {\n opacity: 0.4;\n pointer-events: none;\n }\n\n .ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--hx-pagination-button-size, 2.25rem);\n height: var(--hx-pagination-button-size, 2.25rem);\n color: var(--hx-pagination-ellipsis-color, var(--hx-color-neutral-500, #6b7280));\n font-size: var(--hx-font-size-sm, 0.875rem);\n user-select: none;\n }\n\n .button[aria-disabled='true'] {\n cursor: default;\n pointer-events: none;\n }\n\n /* Page size selector */\n .page-size-wrapper {\n display: flex;\n align-items: center;\n }\n\n .page-size-label {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-color-neutral-500, #6b7280);\n white-space: nowrap;\n }\n\n .page-size-select {\n height: var(--hx-pagination-button-size, 2.25rem);\n padding: 0 var(--hx-space-2, 0.5rem);\n border: 1px solid var(--hx-pagination-border-color, var(--hx-color-neutral-300, #d1d5db));\n border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));\n background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));\n color: var(--hx-pagination-color, var(--hx-color-neutral-900, #111827));\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-family: inherit;\n cursor: pointer;\n }\n\n .page-size-select:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* Visually hidden — used for aria-live status messages */\n .visually-hidden {\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 @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n\n /* Windows High Contrast / forced-colors support */\n @media (forced-colors: active) {\n .button {\n border: 1px solid ButtonText;\n color: ButtonText;\n background: ButtonFace;\n forced-color-adjust: none;\n }\n\n .button:hover:not(:disabled) {\n border-color: Highlight;\n color: Highlight;\n }\n\n .button:focus-visible {\n outline-color: Highlight;\n }\n\n .button[aria-current='page'] {\n background: Highlight;\n border-color: Highlight;\n color: HighlightText;\n }\n\n .button:disabled {\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n .button[aria-disabled='true'] {\n color: GrayText;\n }\n\n .page-size-select {\n border-color: ButtonText;\n color: ButtonText;\n background: ButtonFace;\n forced-color-adjust: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixPaginationStyles } from './hx-pagination.styles.js';\n\n/**\n * A pagination component for navigating content listings.\n *\n * @summary Page navigation with page numbers, prev/next, and ellipsis.\n *\n * @tag hx-pagination\n *\n * @csspart nav - The wrapping `<nav>` element.\n * @csspart list - The `<ul>` containing pagination items.\n * @csspart item - Each `<li>` item.\n * @csspart button - Each page button or prev/next control.\n * @csspart ellipsis - The ellipsis (`…`) span between page groups.\n * @csspart page-size-wrapper - The wrapper `<div>` around the page-size selector.\n * @csspart page-size-label - The `<label>` element for the page-size selector.\n * @csspart page-size-select - The `<select>` element for page-size.\n *\n * @cssprop [--hx-pagination-gap=0.25rem] - Gap between pagination buttons. Inherits from --hx-spacing-1.\n * @cssprop [--hx-pagination-button-size=2.25rem] - Minimum width and height of each button.\n * @cssprop [--hx-pagination-border-color] - Border color of buttons. Inherits from --hx-color-border (final fallback: #d1d5db).\n * @cssprop [--hx-pagination-border-radius] - Border radius of buttons. Inherits from --hx-border-radius-md (final fallback: 0.375rem).\n * @cssprop [--hx-pagination-bg] - Background color of buttons. Inherits from --hx-color-surface (final fallback: #ffffff).\n * @cssprop [--hx-pagination-color] - Text color of buttons. Inherits from --hx-color-text-primary (final fallback: #111827).\n * @cssprop [--hx-pagination-hover-bg] - Background color of buttons on hover. Inherits from --hx-color-surface-hover (final fallback: #f3f4f6).\n * @cssprop [--hx-pagination-hover-border-color] - Border color of buttons on hover. Inherits from --hx-color-primary (final fallback: #2563eb).\n * @cssprop [--hx-pagination-active-bg] - Background color of the active/current page button. Inherits from --hx-color-primary (final fallback: #2563eb).\n * @cssprop [--hx-pagination-active-color] - Text color of the active/current page button. Inherits from --hx-color-surface (final fallback: #ffffff).\n * @cssprop [--hx-pagination-active-border-color] - Border color of the active/current page button. Defaults to --hx-pagination-active-bg.\n * @cssprop [--hx-pagination-ellipsis-color] - Color of ellipsis characters. Inherits from --hx-color-text-secondary (final fallback: #6b7280).\n * @cssprop [--hx-transition-fast=150ms] - Duration used for hover/focus transitions.\n *\n * @fires {CustomEvent<{ page: number }>} hx-page-change - Fired when the user navigates to a new page.\n * @fires {CustomEvent<{ pageSize: number }>} hx-page-size-change - Fired when the user selects a new page size.\n *\n * @example\n * ```html\n * <hx-pagination total-pages=\"10\" current-page=\"1\"></hx-pagination>\n * ```\n *\n * @example Drupal / Twig integration\n * ```twig\n * {#\n * Drupal's pager uses 0-based page index in the URL (?page=N).\n * This component is 1-based, so add 1 to the Drupal page value.\n * Listen to hx-page-change and update the URL query param:\n * element.addEventListener('hx-page-change', (e) => {\n * const params = new URLSearchParams(location.search);\n * params.set('page', e.detail.page - 1); // convert back to 0-based\n * history.pushState({}, '', '?' + params.toString());\n * });\n * #}\n * <hx-pagination\n * total-pages=\"{{ total_pages }}\"\n * current-page=\"{{ pager.current_page + 1 }}\"\n * label=\"{{ 'Pagination'|t }}\"\n * {{ show_first_last ? 'show-first-last' : '' }}\n * ></hx-pagination>\n * ```\n */\n@customElement('hx-pagination')\nexport class HelixPagination extends LitElement {\n static override styles = [tokenStyles, helixPaginationStyles];\n\n /**\n * Total number of pages.\n * @attr total-pages\n */\n @property({ type: Number, attribute: 'total-pages', reflect: true })\n totalPages = 1;\n\n /**\n * The currently active page (1-based).\n * @attr current-page\n */\n @property({ type: Number, attribute: 'current-page' })\n currentPage = 1;\n\n /**\n * Number of page buttons shown on each side of the current page.\n * @attr sibling-count\n */\n @property({ type: Number, attribute: 'sibling-count', reflect: true })\n siblingCount = 1;\n\n /**\n * Number of pages always shown at the start and end of the list.\n * @attr boundary-count\n */\n @property({ type: Number, attribute: 'boundary-count', reflect: true })\n boundaryCount = 1;\n\n /**\n * Whether to show First and Last page buttons.\n * @attr show-first-last\n */\n @property({ type: Boolean, attribute: 'show-first-last', reflect: true })\n showFirstLast = false;\n\n /**\n * Accessible label for the `<nav>` element.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = 'Pagination';\n\n /**\n * The number of items displayed per page. When set, a page-size selector\n * `<select>` is rendered. Set `show-page-size` to display the selector.\n * @attr page-size\n */\n @property({ type: Number, attribute: 'page-size', reflect: true })\n pageSize = 25;\n\n /**\n * Whether to show the page-size selector UI.\n * @attr show-page-size\n */\n @property({ type: Boolean, attribute: 'show-page-size', reflect: true })\n showPageSize = false;\n\n /**\n * Label text for the rows-per-page selector.\n * @attr label-rows-per-page\n */\n @property({ type: String, attribute: 'label-rows-per-page' })\n labelRowsPerPage = 'Rows per page:';\n\n /**\n * Accessible label for the \"First page\" navigation button.\n * @attr first-page-label\n */\n @property({ attribute: 'first-page-label' })\n firstPageLabel = 'First page';\n\n /**\n * Accessible label for the \"Previous page\" navigation button.\n * @attr previous-page-label\n */\n @property({ attribute: 'previous-page-label' })\n previousPageLabel = 'Previous page';\n\n /**\n * Accessible label for the \"Next page\" navigation button.\n * @attr next-page-label\n */\n @property({ attribute: 'next-page-label' })\n nextPageLabel = 'Next page';\n\n /**\n * Accessible label for the \"Last page\" navigation button.\n * @attr last-page-label\n */\n @property({ attribute: 'last-page-label' })\n lastPageLabel = 'Last page';\n\n /** Tracks the roving tabindex target. Null means default to currentPage. */\n /** @internal */\n @state() private _rovingKey: number | string | null = null;\n\n /** Text for the aria-live region, updated on navigation. */\n /** @internal */\n @state() private _liveMessage = '';\n\n /** Memoization cache for _buildPageRange. */\n /** @internal */\n private _pageRangeCache: { key: string; result: Array<number | 'ellipsis'> } | null = null;\n\n // ─── Helpers ───\n\n /** @internal */\n private _buildPageRange(): Array<number | 'ellipsis'> {\n const key = `${this.totalPages}-${this.currentPage}-${this.siblingCount}-${this.boundaryCount}`;\n if (this._pageRangeCache?.key === key) return this._pageRangeCache.result;\n\n const total = Math.max(1, this.totalPages);\n const current = Math.min(Math.max(1, this.currentPage), total);\n const boundary = Math.max(0, this.boundaryCount);\n const sibling = Math.max(0, this.siblingCount);\n\n const startPages = this._range(1, Math.min(boundary, total));\n const endPages = this._range(Math.max(total - boundary + 1, boundary + 1), total);\n\n const siblingStart = Math.max(\n Math.min(current - sibling, total - boundary - sibling * 2 - 1),\n boundary + 2,\n );\n const siblingEnd = Math.min(\n Math.max(current + sibling, boundary + sibling * 2 + 2),\n endPages.length > 0 ? (endPages[0] ?? total) - 2 : total - 1,\n );\n\n const items: Array<number | 'ellipsis'> = [];\n\n for (const p of startPages) items.push(p);\n\n if (siblingStart > boundary + 2) {\n items.push('ellipsis');\n } else if (boundary + 1 < siblingStart) {\n items.push(boundary + 1);\n }\n\n for (const p of this._range(siblingStart, siblingEnd)) items.push(p);\n\n if (siblingEnd < total - boundary - 1) {\n items.push('ellipsis');\n } else if (siblingEnd < total - boundary) {\n items.push(total - boundary);\n }\n\n for (const p of endPages) items.push(p);\n\n this._pageRangeCache = { key, result: items };\n return items;\n }\n\n /** @internal */\n private _range(start: number, end: number): number[] {\n const result: number[] = [];\n for (let i = start; i <= end; i++) result.push(i);\n return result;\n }\n\n /** @internal */\n private _navigate(page: number): void {\n const clamped = Math.min(Math.max(1, page), this.totalPages);\n if (clamped === this.currentPage) return;\n\n this.currentPage = clamped;\n this._rovingKey = null; // reset so focus follows the new current page\n this._liveMessage = `Page ${clamped} of ${this.totalPages}`;\n this.dispatchEvent(\n new CustomEvent<{ page: number }>('hx-page-change', {\n detail: { page: clamped },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n /** @internal */\n private _handlePageSizeChange(e: Event): void {\n const select = e.target as HTMLSelectElement;\n const newSize = Number(select.value);\n if (newSize === this.pageSize) return;\n\n this.pageSize = newSize;\n this.dispatchEvent(\n new CustomEvent<{ pageSize: number }>('hx-page-size-change', {\n detail: { pageSize: newSize },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n /** @internal */\n private get _effectiveRovingKey(): number | string {\n return this._rovingKey ?? this.currentPage;\n }\n\n /** @internal */\n private _handleFocusin(e: FocusEvent): void {\n const btn = e.target as HTMLElement;\n if (btn.tagName !== 'BUTTON') return;\n const key = btn.dataset['rovingKey'];\n if (key === undefined) return;\n this._rovingKey = isNaN(Number(key)) ? key : Number(key);\n }\n\n /** @internal */\n private _handleKeydown(e: KeyboardEvent): void {\n if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;\n e.preventDefault();\n\n const list = this.shadowRoot?.querySelector('.list');\n if (!list) return;\n\n // Collect all non-disabled buttons (disabled prev/next excluded; aria-disabled current page included)\n const buttons = Array.from(list.querySelectorAll<HTMLButtonElement>('button:not([disabled])'));\n const focused = this.shadowRoot?.activeElement as HTMLButtonElement | null;\n const currentIdx = focused ? buttons.indexOf(focused) : 0;\n\n const nextIdx =\n e.key === 'ArrowLeft'\n ? Math.max(0, currentIdx - 1)\n : Math.min(buttons.length - 1, currentIdx + 1);\n\n if (nextIdx !== currentIdx) {\n const nextBtn = buttons[nextIdx];\n if (!nextBtn) return;\n const key = nextBtn.dataset['rovingKey'];\n if (key !== undefined) {\n this._rovingKey = isNaN(Number(key)) ? key : Number(key);\n }\n nextBtn.focus();\n }\n }\n\n // ─── Render ───\n\n override render() {\n const pages = this._buildPageRange();\n const isFirst = this.currentPage <= 1;\n const isLast = this.currentPage >= this.totalPages;\n const rovingKey = this._effectiveRovingKey;\n\n return html`\n <div class=\"pagination-root\">\n ${this.showPageSize\n ? html`\n <div part=\"page-size-wrapper\" class=\"page-size-wrapper\">\n <label part=\"page-size-label\" class=\"page-size-label\">\n ${this.labelRowsPerPage}\n <select\n part=\"page-size-select\"\n class=\"page-size-select\"\n @change=${this._handlePageSizeChange}\n >\n ${[10, 25, 50, 100].map(\n (n) =>\n html`<option value=${n} ?selected=${n === this.pageSize}>${n}</option>`,\n )}\n </select>\n </label>\n </div>\n `\n : nothing}\n\n <nav part=\"nav\" aria-label=${this.label}>\n <span class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\"\n >${this._liveMessage}</span\n >\n <ul\n part=\"list\"\n class=\"list\"\n role=\"list\"\n @keydown=${this._handleKeydown}\n @focusin=${this._handleFocusin}\n >\n ${this.showFirstLast\n ? html`\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=\"button\"\n ?disabled=${isFirst}\n tabindex=${rovingKey === 'first' ? 0 : -1}\n data-roving-key=\"first\"\n aria-label=${this.firstPageLabel}\n @click=${() => this._navigate(1)}\n >\n «\n </button>\n </li>\n `\n : nothing}\n\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=\"button\"\n ?disabled=${isFirst}\n tabindex=${rovingKey === 'prev' ? 0 : -1}\n data-roving-key=\"prev\"\n aria-label=${this.previousPageLabel}\n @click=${() => this._navigate(this.currentPage - 1)}\n >\n ‹\n </button>\n </li>\n\n ${repeat(\n pages,\n (page, i) => (page === 'ellipsis' ? `ellipsis-${i}` : `page-${page}`),\n (page) => {\n if (page === 'ellipsis') {\n return html`\n <li part=\"item\" class=\"item\">\n <span part=\"ellipsis\" class=\"ellipsis\" aria-hidden=\"true\">…</span>\n </li>\n `;\n }\n const isCurrent = page === this.currentPage;\n return html`\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=${classMap({ button: true })}\n aria-disabled=${isCurrent ? 'true' : nothing}\n tabindex=${rovingKey === page ? 0 : -1}\n data-roving-key=${page}\n aria-current=${isCurrent ? 'page' : nothing}\n aria-label=${`Page ${page}`}\n @click=${() => this._navigate(page)}\n >\n ${page}\n </button>\n </li>\n `;\n },\n )}\n\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=\"button\"\n ?disabled=${isLast}\n tabindex=${rovingKey === 'next' ? 0 : -1}\n data-roving-key=\"next\"\n aria-label=${this.nextPageLabel}\n @click=${() => this._navigate(this.currentPage + 1)}\n >\n ›\n </button>\n </li>\n\n ${this.showFirstLast\n ? html`\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=\"button\"\n ?disabled=${isLast}\n tabindex=${rovingKey === 'last' ? 0 : -1}\n data-roving-key=\"last\"\n aria-label=${this.lastPageLabel}\n @click=${() => this._navigate(this.totalPages)}\n >\n »\n </button>\n </li>\n `\n : nothing}\n </ul>\n </nav>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-pagination': HelixPagination;\n }\n}\n\n/** Canonical type alias for HelixPagination. Use this when typing hx-pagination element references. */\nexport type HxPagination = HelixPagination;\n"],"names":["helixPaginationStyles","css","HelixPagination","LitElement","key","_a","total","current","boundary","sibling","startPages","endPages","siblingStart","siblingEnd","items","p","start","end","result","i","page","clamped","e","select","newSize","btn","list","buttons","focused","_b","currentIdx","nextIdx","nextBtn","pages","isFirst","isLast","rovingKey","html","n","nothing","repeat","isCurrent","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-popover-DxE67miP.js","sources":["../../src/components/hx-popover/hx-popover.styles.ts","../../src/components/hx-popover/hx-popover.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPopoverStyles = css`\n :host {\n /* P2-05: display:contents lets the trigger-wrapper control layout inline;\n position:relative was vestigial — body uses position:fixed via Floating UI */\n display: contents;\n }\n\n .trigger-wrapper {\n display: inline-block;\n }\n\n [part='body'] {\n position: fixed;\n z-index: var(--hx-popover-z-index, 9999);\n max-width: var(--hx-popover-max-width, 320px);\n padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));\n background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));\n color: var(--hx-popover-color, var(--hx-color-neutral-900, #111827));\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));\n line-height: var(--hx-line-height-normal, 1.5);\n border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));\n border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));\n box-shadow: var(\n --hx-popover-shadow,\n var(--hx-shadow-md, 0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12)))\n );\n visibility: hidden;\n opacity: 0;\n transition:\n opacity var(--hx-popover-transition-duration, 0.2s) ease,\n visibility var(--hx-popover-transition-duration, 0.2s) ease;\n word-wrap: break-word;\n }\n\n [part='body'].visible {\n visibility: visible;\n opacity: 1;\n }\n\n [part='body']:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n [part='arrow'] {\n position: absolute;\n width: var(--hx-popover-arrow-size, 10px);\n height: var(--hx-popover-arrow-size, 10px);\n background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));\n border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));\n transform: rotate(45deg);\n pointer-events: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [part='body'] {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';\nimport { helixPopoverStyles } from './hx-popover.styles.js';\n\ntype PopoverPlacement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end';\n\ntype TriggerMode = 'click' | 'hover' | 'focus' | 'manual';\n\nlet _popoverCounter = 0;\n\n/**\n * A popover that displays rich floating content attached to a trigger element.\n *\n * @summary Rich floating overlay attached to a trigger element.\n *\n * @tag hx-popover\n *\n * @slot anchor - The trigger element that opens the popover.\n * @slot - Default slot for popover body content.\n *\n * @csspart body - The popover body container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-popover-bg=var(--hx-color-neutral-0)] - Popover background color.\n * @cssprop [--hx-popover-color=var(--hx-color-neutral-900)] - Popover text color.\n * @cssprop [--hx-popover-font-size=var(--hx-font-size-sm)] - Popover font size.\n * @cssprop [--hx-popover-max-width=320px] - Maximum popover width.\n * @cssprop [--hx-popover-padding] - Popover padding.\n * @cssprop [--hx-popover-border-color=var(--hx-color-neutral-200)] - Popover border color.\n * @cssprop [--hx-popover-border-radius=var(--hx-border-radius-md)] - Popover border radius.\n * @cssprop [--hx-popover-shadow] - Popover box shadow.\n * @cssprop [--hx-popover-z-index=9999] - Popover z-index.\n * @cssprop [--hx-popover-transition-duration=0.2s] - Show/hide transition duration.\n * @cssprop [--hx-popover-arrow-size=10px] - Size of the arrow indicator.\n *\n * @fires {CustomEvent} hx-show - Emitted when the popover begins to show.\n * @fires {CustomEvent} hx-after-show - Emitted after the popover is fully visible.\n * @fires {CustomEvent} hx-hide - Emitted when the popover begins to hide.\n * @fires {CustomEvent} hx-after-hide - Emitted after the popover is fully hidden.\n *\n * @example\n * ```html\n * <hx-popover placement=\"bottom\" trigger=\"click\">\n * <button slot=\"anchor\">Open Popover</button>\n * <p>Rich popover content here.</p>\n * </hx-popover>\n * ```\n */\n\n@customElement('hx-popover')\nexport class HelixPopover extends LitElement {\n static override styles = [tokenStyles, helixPopoverStyles];\n\n /**\n * Whether the popover is open.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Preferred placement of the popover relative to the anchor.\n * @attr placement\n */\n @property({ type: String, reflect: true })\n placement: PopoverPlacement = 'bottom';\n\n /**\n * How the popover is triggered.\n * @attr trigger\n */\n @property({ type: String, reflect: true })\n trigger: TriggerMode = 'click';\n\n /**\n * Distance in pixels between the popover and the anchor.\n * @attr distance\n */\n @property({ type: Number, reflect: true })\n distance = 8;\n\n /**\n * Alignment offset in pixels along the anchor.\n * @attr skidding\n */\n @property({ type: Number, reflect: true })\n skidding = 0;\n\n /**\n * Whether to show an arrow pointing to the anchor.\n * @attr arrow\n */\n @property({ type: Boolean, reflect: true })\n arrow = false;\n\n /**\n * Accessible label for the popover body (sets aria-label on the dialog).\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = 'Popover';\n\n /**\n * Tracks whether the popover body is currently visible.\n * @internal\n */\n @state() private _visible = false;\n\n /**\n * The element that held focus before the popover opened, used to restore focus on close.\n * @internal\n */\n private _previousFocus: HTMLElement | null = null;\n\n /**\n * Unique ID assigned to the popover body element.\n * @internal\n */\n private readonly _popoverId = `hx-popover-${++_popoverCounter}`;\n\n /**\n * Timer ID for the deferred document click listener registration in _show().\n * Stored so it can be cancelled in disconnectedCallback to prevent leaks.\n * @internal\n */\n private _showTimer: ReturnType<typeof setTimeout> | null = null;\n\n // ─── Lifecycle ───\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this._showTimer !== null) {\n clearTimeout(this._showTimer);\n this._showTimer = null;\n }\n document.removeEventListener('click', this._handleDocumentClick);\n document.removeEventListener('keydown', this._handleDocumentKeydown);\n document.removeEventListener('keydown', this._handleFocusTrap);\n }\n\n override firstUpdated(): void {\n // HIGH-02: set aria-haspopup=\"dialog\" once on the anchor so assistive technology\n // announces the control's popup type before it is ever opened.\n this._setAnchorAriaAttributes(false);\n // Sync initial open state\n if (this.open) {\n void this._show();\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('open')) {\n if (this.open) {\n void this._show();\n } else {\n void this._hide();\n }\n }\n }\n\n // ─── ARIA setup ───\n\n // HIGH-02: set aria-haspopup=\"dialog\" on firstUpdated and keep aria-expanded in sync\n /** @internal */\n private _setAnchorAriaAttributes(expanded: boolean): void {\n const anchorSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"anchor\"]',\n ) as HTMLSlotElement | null;\n if (!anchorSlot) return;\n const anchorEl = anchorSlot.assignedElements()[0] as HTMLElement | undefined;\n if (anchorEl) {\n anchorEl.setAttribute('aria-expanded', String(expanded));\n anchorEl.setAttribute('aria-haspopup', 'dialog');\n // aria-controls is omitted: the body lives in Shadow DOM and axe-core\n // cannot resolve cross-root IDREF values, which causes a critical violation.\n }\n }\n\n // ─── Focus helpers ───\n\n /** Return all keyboard-focusable elements inside the popover body's slotted content. */\n /** @internal */\n private _getFocusableElements(): HTMLElement[] {\n const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n if (!bodyEl) return [];\n\n // Gather focusable elements from the default slot's assigned nodes\n const defaultSlot = bodyEl.querySelector('slot:not([name])') as HTMLSlotElement | null;\n if (!defaultSlot) return [];\n\n const assigned = defaultSlot.assignedElements({ flatten: true });\n const focusableSelector =\n 'a[href], area[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), details > summary';\n\n const result: HTMLElement[] = [];\n for (const el of assigned) {\n if (el.matches(focusableSelector)) {\n result.push(el as HTMLElement);\n }\n const nested = el.querySelectorAll<HTMLElement>(focusableSelector);\n result.push(...nested);\n }\n return result;\n }\n\n /** Trap Tab/Shift+Tab focus within the popover body when it contains interactive elements. */\n /** @internal */\n private _handleFocusTrap = (e: KeyboardEvent): void => {\n if (e.key !== 'Tab' || !this._visible) return;\n\n const focusable = this._getFocusableElements();\n // If no interactive children, keep focus on the body itself — no cycling needed.\n if (focusable.length === 0) return;\n\n const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n const allFocusable = bodyEl ? [bodyEl, ...focusable] : focusable;\n if (allFocusable.length === 0) return;\n\n const first = allFocusable[0] as HTMLElement;\n const last = allFocusable[allFocusable.length - 1] as HTMLElement;\n\n if (e.shiftKey) {\n if (document.activeElement === first || this.shadowRoot?.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last || this.shadowRoot?.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n };\n\n // ─── Show/Hide ───\n\n /** @internal */\n private async _show(): Promise<void> {\n if (this._visible) return;\n // P0-02: save focus target before moving focus into dialog\n this._previousFocus = document.activeElement as HTMLElement | null;\n this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n this._visible = true;\n this.open = true;\n this._setAnchorAriaAttributes(true);\n // P1-03: add Escape listener synchronously before any await so it is registered\n // by the time the test fires an Escape keydown after a single await el.updateComplete.\n document.addEventListener('keydown', this._handleDocumentKeydown);\n // HIGH-01: focus trap listener active while popover is open\n document.addEventListener('keydown', this._handleFocusTrap);\n await this.updateComplete;\n // hx-after-show fires after Lit has rendered the visible state. Dispatching here\n // (before _updatePosition) ensures it fires in the same microtask as the test's\n // await-continuation, so tests can rely on a single await el.updateComplete.\n this.dispatchEvent(new CustomEvent<void>('hx-after-show', { bubbles: true, composed: true }));\n // P0-02: move focus into dialog body\n const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n if (bodyEl) bodyEl.focus();\n // P0-01: listen for outside clicks; deferred to avoid catching the opening click\n if (this._showTimer !== null) {\n clearTimeout(this._showTimer);\n }\n this._showTimer = setTimeout(() => {\n this._showTimer = null;\n document.addEventListener('click', this._handleDocumentClick);\n }, 0);\n await this._updatePosition();\n }\n\n // HIGH-03: _hideWithFocusRestore controls whether _previousFocus is restored.\n // Escape and programmatic close restore focus; click-outside does not.\n /** @internal */\n private async _hide(restoreFocus = true): Promise<void> {\n if (!this._visible) return;\n document.removeEventListener('click', this._handleDocumentClick);\n document.removeEventListener('keydown', this._handleDocumentKeydown);\n document.removeEventListener('keydown', this._handleFocusTrap);\n this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n this._visible = false;\n this.open = false;\n this._setAnchorAriaAttributes(false);\n // HIGH-03: only restore focus on Escape / programmatic close\n if (restoreFocus) {\n this._previousFocus?.focus();\n }\n this._previousFocus = null;\n await this.updateComplete;\n this.dispatchEvent(new CustomEvent<void>('hx-after-hide', { bubbles: true, composed: true }));\n }\n\n // ─── Positioning ───\n\n /** @internal */\n private async _updatePosition(): Promise<void> {\n const anchorSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"anchor\"]',\n ) as HTMLSlotElement | null;\n if (!anchorSlot) return;\n const anchorEl = anchorSlot.assignedElements()[0] as HTMLElement | undefined;\n const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n const arrowEl = this.arrow\n ? (this.shadowRoot?.querySelector('[part=\"arrow\"]') as HTMLElement | null)\n : null;\n\n if (!anchorEl || !bodyEl) return;\n\n const middleware = [\n offset({ mainAxis: this.distance, crossAxis: this.skidding }),\n flip(),\n shift({ padding: 8 }),\n ];\n\n if (arrowEl) {\n middleware.push(arrow({ element: arrowEl }));\n }\n\n const { x, y, placement, middlewareData } = await computePosition(anchorEl, bodyEl, {\n placement: this.placement,\n strategy: 'fixed',\n middleware,\n });\n\n Object.assign(bodyEl.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n if (arrowEl && middlewareData.arrow) {\n const arrowData = middlewareData.arrow;\n const basePlacement = placement.split('-')[0] ?? 'bottom';\n const staticSide =\n ({ top: 'bottom', right: 'left', bottom: 'top', left: 'right' } as Record<string, string>)[\n basePlacement\n ] ?? 'bottom';\n\n Object.assign(arrowEl.style, {\n left: arrowData.x != null ? `${arrowData.x}px` : '',\n top: arrowData.y != null ? `${arrowData.y}px` : '',\n right: '',\n bottom: '',\n [staticSide]: '-5px',\n });\n\n // P2-02: hide the two border sides facing the popover body so only\n // the outward-facing corner is visible (avoids the inner border line).\n // Reset all four sides first, then make the two inner-facing ones transparent.\n const borderSides = ['border-top', 'border-right', 'border-bottom', 'border-left'] as const;\n for (const side of borderSides) {\n arrowEl.style.setProperty(side, '');\n }\n // Maps base placement → the two sides that face inward toward the popover body\n const innerBorderMap: Record<string, readonly [string, string]> = {\n bottom: ['border-bottom', 'border-right'],\n top: ['border-top', 'border-left'],\n right: ['border-top', 'border-right'],\n left: ['border-bottom', 'border-left'],\n };\n const innerSides = innerBorderMap[basePlacement] ?? ['border-bottom', 'border-right'];\n arrowEl.style.setProperty(innerSides[0], '1px solid transparent');\n arrowEl.style.setProperty(innerSides[1], '1px solid transparent');\n }\n }\n\n // ─── Event Handlers ───\n\n // P1-03 / P0-01: document-level handlers active only while popover is open\n /**\n * Closes the popover when the Escape key is pressed while it is open.\n * @internal\n */\n private _handleDocumentKeydown = (e: KeyboardEvent): void => {\n if (e.key === 'Escape' && this._visible) {\n // HIGH-03: Escape always restores focus to the prior element\n void this._hide(true);\n }\n };\n\n // P0-01: close when click target is outside this component\n /**\n * Closes the popover when a click occurs outside the component boundary.\n * @internal\n */\n private _handleDocumentClick = (e: Event): void => {\n // Shadow DOM retargets events from within to the host at document level,\n // so a click on the trigger wrapper appears as e.target === this.\n if (e.target !== this && !this.contains(e.target as Node)) {\n // HIGH-03: click-outside does NOT restore focus — let browser handle naturally\n void this._hide(false);\n }\n };\n\n /**\n * Toggles the popover open/closed when the anchor is clicked in click trigger mode.\n * @internal\n */\n private _handleAnchorClick = (): void => {\n if (this.trigger !== 'click') return;\n if (this._visible) {\n void this._hide(true);\n } else {\n void this._show();\n }\n };\n\n /**\n * Opens the popover when the anchor receives a mouseenter event in hover trigger mode.\n * @internal\n */\n private _handleAnchorMouseEnter = (): void => {\n if (this.trigger !== 'hover') return;\n void this._show();\n };\n\n /**\n * Closes the popover when the anchor receives a mouseleave event in hover trigger mode.\n * @internal\n */\n private _handleAnchorMouseLeave = (): void => {\n if (this.trigger !== 'hover') return;\n void this._hide(false);\n };\n\n // CRITICAL-02: body hover handlers so moving the pointer from anchor into\n // the popover content does not trigger a hide.\n /** @internal */\n private _handleBodyMouseEnter = (): void => {\n // Cancel a pending hide that would have fired from the anchor's mouseleave\n // by re-showing (no-op if already visible).\n if (this.trigger !== 'hover') return;\n void this._show();\n };\n\n /** @internal */\n private _handleBodyMouseLeave = (): void => {\n if (this.trigger !== 'hover') return;\n void this._hide(false);\n };\n\n /** @internal */\n private _handleAnchorFocusIn = (): void => {\n // CRITICAL-02: keyboard users trigger hover-mode popovers via focusin\n if (this.trigger !== 'focus' && this.trigger !== 'hover') return;\n void this._show();\n };\n\n /** @internal */\n private _handleAnchorFocusOut = (e: FocusEvent): void => {\n // CRITICAL-02: for hover mode, only hide when focus leaves both the anchor\n // and the popover body (i.e. relatedTarget is outside the component).\n if (this.trigger !== 'focus' && this.trigger !== 'hover') return;\n const related = e.relatedTarget as Node | null;\n // If focus is moving into the shadow root (body element), keep popover open\n if (related && (this.contains(related) || this.shadowRoot?.contains(related))) return;\n void this._hide(true);\n };\n\n /** @internal */\n private _handleAnchorSlotChange(): void {\n this._setAnchorAriaAttributes(this._visible);\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div\n class=\"trigger-wrapper\"\n @click=${this._handleAnchorClick}\n @mouseenter=${this._handleAnchorMouseEnter}\n @mouseleave=${this._handleAnchorMouseLeave}\n @focusin=${this._handleAnchorFocusIn}\n @focusout=${this._handleAnchorFocusOut}\n >\n <slot name=\"anchor\" @slotchange=${this._handleAnchorSlotChange}></slot>\n </div>\n <div\n part=\"body\"\n id=${this._popoverId}\n role=\"dialog\"\n aria-label=${this.label}\n aria-hidden=\"${!this._visible ? 'true' : 'false'}\"\n tabindex=\"-1\"\n ?inert=${!this._visible}\n class=${this._visible ? 'visible' : ''}\n @mouseenter=${this._handleBodyMouseEnter}\n @mouseleave=${this._handleBodyMouseLeave}\n >\n <slot></slot>\n ${this.arrow ? html`<div part=\"arrow\"></div>` : ''}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-popover': HelixPopover;\n }\n}\n"],"names":["helixPopoverStyles","css","_popoverCounter","HelixPopover","LitElement","focusable","bodyEl","_a","allFocusable","first","last","_b","_c","related","changedProperties","expanded","anchorSlot","anchorEl","defaultSlot","assigned","focusableSelector","result","el","nested","restoreFocus","arrowEl","middleware","offset","flip","shift","arrow","x","y","placement","middlewareData","computePosition","arrowData","basePlacement","staticSide","borderSides","side","innerSides","html","tokenStyles","__decorateClass","property","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACoBlC,IAAIC,IAAkB,GA0CTC,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,OAAO,IAOP,KAAA,YAA8B,UAO9B,KAAA,UAAuB,SAOvB,KAAA,WAAW,GAOX,KAAA,WAAW,GAOX,KAAA,QAAQ,IAOR,KAAA,QAAQ,WAMC,KAAQ,WAAW,IAM5B,KAAQ,iBAAqC,MAM7C,KAAiB,aAAa,cAAc,EAAEF,CAAe,IAO7D,KAAQ,aAAmD,MAkF3D,KAAQ,mBAAmB,CAAC,MAA2B;;AACrD,UAAI,EAAE,QAAQ,SAAS,CAAC,KAAK,SAAU;AAEvC,YAAMG,IAAY,KAAK,sBAAA;AAEvB,UAAIA,EAAU,WAAW,EAAG;AAE5B,YAAMC,KAASC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc,kBACxCC,IAAeF,IAAS,CAACA,GAAQ,GAAGD,CAAS,IAAIA;AACvD,UAAIG,EAAa,WAAW,EAAG;AAE/B,YAAMC,IAAQD,EAAa,CAAC,GACtBE,IAAOF,EAAaA,EAAa,SAAS,CAAC;AAEjD,MAAI,EAAE,YACA,SAAS,kBAAkBC,OAASE,IAAA,KAAK,eAAL,gBAAAA,EAAiB,mBAAkBF,OACzE,EAAE,eAAA,GACFC,EAAK,MAAA,MAGH,SAAS,kBAAkBA,OAAQE,IAAA,KAAK,eAAL,gBAAAA,EAAiB,mBAAkBF,OACxE,EAAE,eAAA,GACFD,EAAM,MAAA;AAAA,IAGZ,GA0IA,KAAQ,yBAAyB,CAAC,MAA2B;AAC3D,MAAI,EAAE,QAAQ,YAAY,KAAK,YAExB,KAAK,MAAM,EAAI;AAAA,IAExB,GAOA,KAAQ,uBAAuB,CAAC,MAAmB;AAGjD,MAAI,EAAE,WAAW,QAAQ,CAAC,KAAK,SAAS,EAAE,MAAc,KAEjD,KAAK,MAAM,EAAK;AAAA,IAEzB,GAMA,KAAQ,qBAAqB,MAAY;AACvC,MAAI,KAAK,YAAY,YACjB,KAAK,WACF,KAAK,MAAM,EAAI,IAEf,KAAK,MAAA;AAAA,IAEd,GAMA,KAAQ,0BAA0B,MAAY;AAC5C,MAAI,KAAK,YAAY,WAChB,KAAK,MAAA;AAAA,IACZ,GAMA,KAAQ,0BAA0B,MAAY;AAC5C,MAAI,KAAK,YAAY,WAChB,KAAK,MAAM,EAAK;AAAA,IACvB,GAKA,KAAQ,wBAAwB,MAAY;AAG1C,MAAI,KAAK,YAAY,WAChB,KAAK,MAAA;AAAA,IACZ,GAGA,KAAQ,wBAAwB,MAAY;AAC1C,MAAI,KAAK,YAAY,WAChB,KAAK,MAAM,EAAK;AAAA,IACvB,GAGA,KAAQ,uBAAuB,MAAY;AAEzC,MAAI,KAAK,YAAY,WAAW,KAAK,YAAY,WAC5C,KAAK,MAAA;AAAA,IACZ,GAGA,KAAQ,wBAAwB,CAAC,MAAwB;;AAGvD,UAAI,KAAK,YAAY,WAAW,KAAK,YAAY,QAAS;AAC1D,YAAMI,IAAU,EAAE;AAElB,MAAIA,MAAY,KAAK,SAASA,CAAO,MAAKN,IAAA,KAAK,eAAL,QAAAA,EAAiB,SAASM,OAC/D,KAAK,MAAM,EAAI;AAAA,IACtB;AAAA,EAAA;AAAA;AAAA,EArUS,uBAA6B;AACpC,UAAM,qBAAA,GACF,KAAK,eAAe,SACtB,aAAa,KAAK,UAAU,GAC5B,KAAK,aAAa,OAEpB,SAAS,oBAAoB,SAAS,KAAK,oBAAoB,GAC/D,SAAS,oBAAoB,WAAW,KAAK,sBAAsB,GACnE,SAAS,oBAAoB,WAAW,KAAK,gBAAgB;AAAA,EAC/D;AAAA,EAES,eAAqB;AAG5B,SAAK,yBAAyB,EAAK,GAE/B,KAAK,QACF,KAAK,MAAA;AAAA,EAEd;AAAA,EAES,QAAQC,GAA+C;AAC9D,IAAIA,EAAkB,IAAI,MAAM,MAC1B,KAAK,OACF,KAAK,MAAA,IAEL,KAAK,MAAA;AAAA,EAGhB;AAAA;AAAA;AAAA;AAAA,EAMQ,yBAAyBC,GAAyB;;AACxD,UAAMC,KAAaT,IAAA,KAAK,eAAL,gBAAAA,EAAiB;AAAA,MAClC;AAAA;AAEF,QAAI,CAACS,EAAY;AACjB,UAAMC,IAAWD,EAAW,iBAAA,EAAmB,CAAC;AAChD,IAAIC,MACFA,EAAS,aAAa,iBAAiB,OAAOF,CAAQ,CAAC,GACvDE,EAAS,aAAa,iBAAiB,QAAQ;AAAA,EAInD;AAAA;AAAA;AAAA;AAAA,EAMQ,wBAAuC;;AAC7C,UAAMX,KAASC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAC9C,QAAI,CAACD,EAAQ,QAAO,CAAA;AAGpB,UAAMY,IAAcZ,EAAO,cAAc,kBAAkB;AAC3D,QAAI,CAACY,EAAa,QAAO,CAAA;AAEzB,UAAMC,IAAWD,EAAY,iBAAiB,EAAE,SAAS,IAAM,GACzDE,IACJ,4KAEIC,IAAwB,CAAA;AAC9B,eAAWC,KAAMH,GAAU;AACzB,MAAIG,EAAG,QAAQF,CAAiB,KAC9BC,EAAO,KAAKC,CAAiB;AAE/B,YAAMC,IAASD,EAAG,iBAA8BF,CAAiB;AACjE,MAAAC,EAAO,KAAK,GAAGE,CAAM;AAAA,IACvB;AACA,WAAOF;AAAA,EACT;AAAA;AAAA;AAAA,EAkCA,MAAc,QAAuB;;AACnC,QAAI,KAAK,SAAU;AAEnB,SAAK,iBAAiB,SAAS,eAC/B,KAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC,GACtF,KAAK,WAAW,IAChB,KAAK,OAAO,IACZ,KAAK,yBAAyB,EAAI,GAGlC,SAAS,iBAAiB,WAAW,KAAK,sBAAsB,GAEhE,SAAS,iBAAiB,WAAW,KAAK,gBAAgB,GAC1D,MAAM,KAAK,gBAIX,KAAK,cAAc,IAAI,YAAkB,iBAAiB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAE5F,UAAMf,KAASC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAC9C,IAAID,OAAe,MAAA,GAEf,KAAK,eAAe,QACtB,aAAa,KAAK,UAAU,GAE9B,KAAK,aAAa,WAAW,MAAM;AACjC,WAAK,aAAa,MAClB,SAAS,iBAAiB,SAAS,KAAK,oBAAoB;AAAA,IAC9D,GAAG,CAAC,GACJ,MAAM,KAAK,gBAAA;AAAA,EACb;AAAA;AAAA;AAAA;AAAA,EAKA,MAAc,MAAMkB,IAAe,IAAqB;;AACtD,IAAK,KAAK,aACV,SAAS,oBAAoB,SAAS,KAAK,oBAAoB,GAC/D,SAAS,oBAAoB,WAAW,KAAK,sBAAsB,GACnE,SAAS,oBAAoB,WAAW,KAAK,gBAAgB,GAC7D,KAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC,GACtF,KAAK,WAAW,IAChB,KAAK,OAAO,IACZ,KAAK,yBAAyB,EAAK,GAE/BA,OACFjB,IAAA,KAAK,mBAAL,QAAAA,EAAqB,UAEvB,KAAK,iBAAiB,MACtB,MAAM,KAAK,gBACX,KAAK,cAAc,IAAI,YAAkB,iBAAiB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EAC9F;AAAA;AAAA;AAAA,EAKA,MAAc,kBAAiC;;AAC7C,UAAMS,KAAaT,IAAA,KAAK,eAAL,gBAAAA,EAAiB;AAAA,MAClC;AAAA;AAEF,QAAI,CAACS,EAAY;AACjB,UAAMC,IAAWD,EAAW,iBAAA,EAAmB,CAAC,GAC1CV,KAASK,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc,kBACxCc,IAAU,KAAK,SAChBb,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc,oBAChC;AAEJ,QAAI,CAACK,KAAY,CAACX,EAAQ;AAE1B,UAAMoB,IAAa;AAAA,MACjBC,EAAO,EAAE,UAAU,KAAK,UAAU,WAAW,KAAK,UAAU;AAAA,MAC5DC,EAAA;AAAA,MACAC,EAAM,EAAE,SAAS,EAAA,CAAG;AAAA,IAAA;AAGtB,IAAIJ,KACFC,EAAW,KAAKI,EAAM,EAAE,SAASL,EAAA,CAAS,CAAC;AAG7C,UAAM,EAAE,GAAAM,GAAG,GAAAC,GAAG,WAAAC,GAAW,gBAAAC,MAAmB,MAAMC,EAAgBlB,GAAUX,GAAQ;AAAA,MAClF,WAAW,KAAK;AAAA,MAChB,UAAU;AAAA,MACV,YAAAoB;AAAA,IAAA,CACD;AAOD,QALA,OAAO,OAAOpB,EAAO,OAAO;AAAA,MAC1B,MAAM,GAAGyB,CAAC;AAAA,MACV,KAAK,GAAGC,CAAC;AAAA,IAAA,CACV,GAEGP,KAAWS,EAAe,OAAO;AACnC,YAAME,IAAYF,EAAe,OAC3BG,IAAgBJ,EAAU,MAAM,GAAG,EAAE,CAAC,KAAK,UAC3CK,IACH,EAAE,KAAK,UAAU,OAAO,QAAQ,QAAQ,OAAO,MAAM,UACpDD,CACF,KAAK;AAEP,aAAO,OAAOZ,EAAQ,OAAO;AAAA,QAC3B,MAAMW,EAAU,KAAK,OAAO,GAAGA,EAAU,CAAC,OAAO;AAAA,QACjD,KAAKA,EAAU,KAAK,OAAO,GAAGA,EAAU,CAAC,OAAO;AAAA,QAChD,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,CAACE,CAAU,GAAG;AAAA,MAAA,CACf;AAKD,YAAMC,IAAc,CAAC,cAAc,gBAAgB,iBAAiB,aAAa;AACjF,iBAAWC,KAAQD;AACjB,QAAAd,EAAQ,MAAM,YAAYe,GAAM,EAAE;AASpC,YAAMC,IAN4D;AAAA,QAChE,QAAQ,CAAC,iBAAiB,cAAc;AAAA,QACxC,KAAK,CAAC,cAAc,aAAa;AAAA,QACjC,OAAO,CAAC,cAAc,cAAc;AAAA,QACpC,MAAM,CAAC,iBAAiB,aAAa;AAAA,MAAA,EAELJ,CAAa,KAAK,CAAC,iBAAiB,cAAc;AACpF,MAAAZ,EAAQ,MAAM,YAAYgB,EAAW,CAAC,GAAG,uBAAuB,GAChEhB,EAAQ,MAAM,YAAYgB,EAAW,CAAC,GAAG,uBAAuB;AAAA,IAClE;AAAA,EACF;AAAA;AAAA,EAgGQ,0BAAgC;AACtC,SAAK,yBAAyB,KAAK,QAAQ;AAAA,EAC7C;AAAA;AAAA,EAIS,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,iBAGM,KAAK,kBAAkB;AAAA,sBAClB,KAAK,uBAAuB;AAAA,sBAC5B,KAAK,uBAAuB;AAAA,mBAC/B,KAAK,oBAAoB;AAAA,oBACxB,KAAK,qBAAqB;AAAA;AAAA,0CAEJ,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA,aAIzD,KAAK,UAAU;AAAA;AAAA,qBAEP,KAAK,KAAK;AAAA,uBACP,KAAK,WAAoB,UAAT,MAAgB;AAAA;AAAA,iBAEvC,CAAC,KAAK,QAAQ;AAAA,gBACf,KAAK,WAAW,YAAY,EAAE;AAAA,sBACxB,KAAK,qBAAqB;AAAA,sBAC1B,KAAK,qBAAqB;AAAA;AAAA;AAAA,UAGtC,KAAK,QAAQA,8BAAiC,EAAE;AAAA;AAAA;AAAA,EAGxD;AACF;AA1bavC,EACK,SAAS,CAACwC,GAAa3C,CAAkB;AAOzD4C,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAP/B1C,EAQX,WAAA,QAAA,CAAA;AAOAyC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9B1C,EAeX,WAAA,aAAA,CAAA;AAOAyC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArB9B1C,EAsBX,WAAA,WAAA,CAAA;AAOAyC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5B9B1C,EA6BX,WAAA,YAAA,CAAA;AAOAyC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnC9B1C,EAoCX,WAAA,YAAA,CAAA;AAOAyC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1C/B1C,EA2CX,WAAA,SAAA,CAAA;AAOAyC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjD9B1C,EAkDX,WAAA,SAAA,CAAA;AAMiByC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxDI3C,EAwDM,WAAA,YAAA,CAAA;AAxDNA,IAANyC,EAAA;AAAA,EADNG,EAAc,YAAY;AAAA,GACd5C,CAAA;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-popup-Dg6n_PbY.js","sources":["../../src/components/hx-popup/hx-popup.styles.ts","../../src/components/hx-popup/hx-popup.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPopupStyles = css`\n :host {\n display: inline-block;\n }\n\n [part='popup'] {\n position: fixed;\n z-index: var(--hx-popup-z-index, 9000);\n inset: 0 auto auto 0;\n box-sizing: border-box;\n transition: var(--hx-popup-transition, none);\n }\n\n :host(:not([active])) [part='popup'] {\n display: none;\n }\n\n [part='arrow'] {\n position: absolute;\n width: var(--hx-arrow-size, 8px);\n height: var(--hx-arrow-size, 8px);\n background: var(--hx-arrow-color, var(--hx-color-surface-overlay, #ffffff));\n transform: rotate(45deg);\n pointer-events: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [part='popup'] {\n transition: none;\n }\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport {\n computePosition,\n flip as flipMiddleware,\n shift as shiftMiddleware,\n offset as offsetMiddleware,\n arrow as arrowMiddleware,\n autoUpdate,\n size as sizeMiddleware,\n autoPlacement as autoPlacementMiddleware,\n} from '@floating-ui/dom';\nimport type { Placement, Middleware } from '@floating-ui/dom';\nimport { helixPopupStyles } from './hx-popup.styles.js';\n\ntype PopupPlacement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'\n | 'auto';\n\ntype ArrowPlacement = 'start' | 'center' | 'end';\n\n// More precise type matching @floating-ui/dom's arrow middleware data structure\ntype ArrowData = { x?: number; y?: number; centerOffset: number };\n\n/**\n * A low-level positioning primitive that anchors a floating panel to a reference element.\n * This is the base that hx-tooltip, hx-dropdown, and hx-popover build upon.\n *\n * @summary Low-level popup positioning utility.\n *\n * @tag hx-popup\n *\n * @slot anchor - The reference element the popup is anchored to.\n * @slot - Default slot for popup content.\n *\n * @csspart popup - The popup container element.\n * @csspart arrow - The arrow indicator element (only present when `arrow` is true).\n *\n * @cssprop [--hx-popup-z-index=9000] - Z-index of the popup container.\n * @cssprop [--hx-popup-transition=none] - Transition applied to the popup element.\n * Consumers who need enter/exit animations can set this property AND override the\n * default `display: none` hide mechanism via `::part(popup)`. Example:\n * ```css\n * hx-popup { --hx-popup-transition: opacity 0.2s ease; }\n * hx-popup:not([active])::part(popup) { display: block; opacity: 0; pointer-events: none; }\n * hx-popup[active]::part(popup) { opacity: 1; }\n * ```\n * @cssprop [--hx-arrow-size=8px] - Size of the arrow element.\n * @cssprop [--hx-arrow-color=var(--hx-color-surface-overlay, #ffffff)] - Color of the arrow element.\n * @cssprop --hx-auto-size-available-width - Available width set by auto-size middleware (on :host).\n * @cssprop --hx-auto-size-available-height - Available height set by auto-size middleware (on :host).\n *\n * @fires {CustomEvent} hx-reposition - Emitted after the popup is repositioned.\n *\n * ## Accessibility Contract\n *\n * `hx-popup` is a **positioning utility**, not an interactive widget. It does not provide\n * ARIA semantics. Consumers are responsible for all accessibility:\n *\n * - **Popup role**: Add `role=\"tooltip\"`, `role=\"dialog\"`, `role=\"listbox\"`, etc. to the\n * slotted popup content depending on its purpose.\n * - **Trigger state**: The element that triggers the popup MUST set `aria-expanded=\"true/false\"`.\n * - **Association**: Use `aria-controls` on the trigger to reference the popup content element,\n * and `aria-labelledby` / `aria-describedby` as appropriate.\n * - **Focus management**: `hx-popup` does NOT trap focus. Consumers building dialogs or menus\n * MUST implement focus trapping and keyboard dismiss (Escape key) themselves.\n * - **Visibility**: The popup is hidden via `display: none` (CSS) and the `inert` attribute\n * when inactive. Both are reliable accessibility-tree hiding mechanisms.\n *\n * @example\n * ```html\n * <!-- Tooltip pattern -->\n * <hx-popup id=\"my-tooltip\" placement=\"bottom\" distance=\"8\">\n * <button\n * slot=\"anchor\"\n * aria-describedby=\"tooltip-content\"\n * aria-expanded=\"false\"\n * aria-controls=\"my-tooltip\"\n * >\n * Trigger\n * </button>\n * <div id=\"tooltip-content\" role=\"tooltip\">Tooltip text</div>\n * </hx-popup>\n * ```\n *\n * ## Drupal Integration\n *\n * `hx-popup` is a JS utility — Twig provides markup only. No Drupal behavior file is\n * required for basic usage, since the `anchor` slot and `active` attribute are sufficient.\n *\n * ```twig\n * {# Basic Twig usage — prefer anchor slot in server-rendered contexts #}\n * <hx-popup id=\"my-popup\" placement=\"bottom\" distance=\"8\">\n * <button\n * slot=\"anchor\"\n * aria-expanded=\"false\"\n * aria-controls=\"popup-content\"\n * >Open</button>\n * <div id=\"popup-content\" role=\"dialog\" aria-label=\"Popup content\">...</div>\n * </hx-popup>\n * ```\n *\n * ```js\n * // Drupal behavior for toggle interaction\n * Drupal.behaviors.helixPopup = {\n * attach(context) {\n * context.querySelectorAll('hx-popup').forEach((popup) => {\n * const trigger = popup.querySelector('[slot=\"anchor\"]');\n * if (!trigger) return;\n * trigger.addEventListener('click', () => {\n * popup.active = !popup.active;\n * trigger.setAttribute('aria-expanded', String(popup.active));\n * });\n * });\n * },\n * };\n * ```\n *\n * For Drupal-generated dynamic IDs, prefer the anchor **slot** over the `anchor` CSS selector\n * attribute, since slot-based anchoring does not require knowing the element's ID at render time.\n * If you must use the CSS selector form with dynamic IDs, pass the ID via a Twig variable:\n * ```twig\n * <hx-popup anchor=\"#{{ element['#id'] }}\" placement=\"bottom\">...</hx-popup>\n * ```\n */\n@customElement('hx-popup')\nexport class HelixPopup extends LitElement {\n static override styles = [tokenStyles, helixPopupStyles];\n\n /** @internal */\n private _anchorSlotEl: Element | null = null;\n /** @internal */\n private _cleanupAutoUpdate: (() => void) | null = null;\n\n /**\n * The reference element to anchor the popup to.\n *\n * - **Attribute form** (`anchor=\"#selector\"`): Accepts a CSS selector string resolved via\n * `querySelector` from the component's root node. Use this in HTML/Twig markup.\n * - **Property form** (`el.anchor = element`): Accepts an `Element` reference directly.\n * Setting an Element via JS property does NOT reflect to the attribute.\n *\n * If not set, the element in the `anchor` slot is used.\n *\n * @attr anchor\n */\n @property({ attribute: 'anchor' })\n anchor: string | Element | null = null;\n\n /**\n * Preferred placement of the popup relative to the anchor.\n * @attr placement\n */\n @property({ type: String, reflect: true })\n placement: PopupPlacement = 'bottom';\n\n /**\n * Whether the popup is visible.\n * @attr active\n */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /**\n * Gap in pixels between the popup and the anchor element.\n * @attr distance\n */\n @property({ type: Number, reflect: true })\n distance = 0;\n\n /**\n * Offset in pixels along the anchor element's axis.\n * @attr skidding\n */\n @property({ type: Number, reflect: true })\n skidding = 0;\n\n /**\n * Whether to show an arrow pointing to the anchor element.\n * @attr arrow\n */\n @property({ type: Boolean, reflect: true })\n arrow = false;\n\n /**\n * Manual placement of the arrow along the popup edge.\n * When not set, floating-ui calculates the optimal position.\n * @attr arrow-placement\n */\n @property({ attribute: 'arrow-placement', reflect: true })\n arrowPlacement: ArrowPlacement | null = null;\n\n /**\n * Minimum padding in pixels from the popup edge to the arrow.\n * @attr arrow-padding\n */\n @property({ type: Number, attribute: 'arrow-padding' })\n arrowPadding = 10;\n\n /**\n * When true, flips the popup to the opposite side to avoid overflow.\n * @attr flip\n */\n @property({ type: Boolean, reflect: true })\n flip = false;\n\n /**\n * Fallback placements to try when flipping. Accepts a JSON array string.\n *\n * @example\n * ```html\n * <!-- Try \"top\" then \"left\" before giving up -->\n * <hx-popup flip flip-fallback-placements='[\"top\",\"left\"]'>...</hx-popup>\n * ```\n *\n * @attr flip-fallback-placements\n */\n @property({\n attribute: 'flip-fallback-placements',\n converter: {\n fromAttribute(value: string | null): PopupPlacement[] {\n if (!value) return [];\n try {\n return JSON.parse(value) as PopupPlacement[];\n } catch {\n return [];\n }\n },\n toAttribute(value: PopupPlacement[]): string {\n return JSON.stringify(value);\n },\n },\n })\n flipFallbackPlacements: PopupPlacement[] = [];\n\n /**\n * When true, shifts the popup along the axis to remain in the viewport.\n * @attr shift\n */\n @property({ type: Boolean, reflect: true })\n shift = false;\n\n /**\n * When true, resizes the popup to fit within the viewport.\n * Sets --hx-auto-size-available-width and --hx-auto-size-available-height CSS custom\n * properties on `:host` so they cascade into shadow DOM and are readable from light DOM.\n * @attr auto-size\n */\n @property({ type: Boolean, attribute: 'auto-size', reflect: true })\n autoSize = false;\n\n /**\n * Positioning strategy passed to floating-ui's `computePosition`.\n *\n * - `'fixed'` (default): works for most cases; positions relative to the viewport.\n * - `'absolute'`: use inside `overflow: hidden` / scroll containers where the popup is\n * positioned relative to the nearest positioned ancestor instead of the viewport.\n *\n * @attr strategy\n */\n @property({ reflect: true })\n strategy: 'fixed' | 'absolute' = 'fixed';\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (this.active) {\n void this.updateComplete.then(() => this._startAutoUpdate());\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._stopAutoUpdate();\n }\n\n override updated(changedProperties: Map<string | symbol, unknown>): void {\n super.updated(changedProperties);\n\n const activeChanged = changedProperties.has('active');\n const positioningChanged =\n changedProperties.has('placement') ||\n changedProperties.has('distance') ||\n changedProperties.has('skidding') ||\n changedProperties.has('arrow') ||\n changedProperties.has('arrowPadding') ||\n changedProperties.has('arrowPlacement') ||\n changedProperties.has('flip') ||\n changedProperties.has('flipFallbackPlacements') ||\n changedProperties.has('shift') ||\n changedProperties.has('autoSize') ||\n changedProperties.has('anchor') ||\n changedProperties.has('strategy');\n\n if (activeChanged) {\n if (this.active) {\n this._startAutoUpdate();\n } else {\n this._stopAutoUpdate();\n // Clean up autoSize custom properties when popup goes inactive\n if (this.autoSize) {\n this.style.removeProperty('--hx-auto-size-available-width');\n this.style.removeProperty('--hx-auto-size-available-height');\n }\n }\n } else if (positioningChanged && this.active) {\n void this._reposition();\n }\n\n // Remove stale autoSize properties when autoSize is disabled\n if (changedProperties.has('autoSize') && !this.autoSize) {\n this.style.removeProperty('--hx-auto-size-available-width');\n this.style.removeProperty('--hx-auto-size-available-height');\n }\n }\n\n // ─── Anchor Resolution ───\n\n /** @internal */\n private _getAnchorElement(): Element | null {\n if (this.anchor instanceof Element) {\n return this.anchor;\n }\n if (typeof this.anchor === 'string') {\n return (this.getRootNode() as Document | ShadowRoot).querySelector(this.anchor);\n }\n return this._anchorSlotEl;\n }\n\n /** @internal */\n private _handleAnchorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const assigned = slot.assignedElements();\n this._anchorSlotEl = assigned[0] ?? null;\n if (this.active) {\n void this._reposition();\n }\n }\n\n // ─── Positioning ───\n\n /** @internal */\n private _startAutoUpdate(): void {\n this._stopAutoUpdate();\n const anchorEl = this._getAnchorElement();\n const popupEl = this.shadowRoot?.querySelector<HTMLElement>('[part=\"popup\"]');\n if (!anchorEl || !popupEl) return;\n\n this._cleanupAutoUpdate = autoUpdate(anchorEl, popupEl, () => {\n void this._reposition();\n });\n }\n\n /** @internal */\n private _stopAutoUpdate(): void {\n this._cleanupAutoUpdate?.();\n this._cleanupAutoUpdate = null;\n }\n\n /** @internal */\n private async _reposition(): Promise<void> {\n const anchorEl = this._getAnchorElement();\n const popupEl = this.shadowRoot?.querySelector<HTMLElement>('[part=\"popup\"]');\n if (!anchorEl || !popupEl) return;\n\n const arrowEl = this.arrow\n ? (this.shadowRoot?.querySelector<HTMLElement>('[part=\"arrow\"]') ?? null)\n : null;\n\n const middleware: Middleware[] = [\n offsetMiddleware({ mainAxis: this.distance, crossAxis: this.skidding }),\n ];\n\n if (this.placement === 'auto') {\n middleware.push(autoPlacementMiddleware());\n } else if (this.flip) {\n middleware.push(\n flipMiddleware({\n fallbackPlacements: this.flipFallbackPlacements as Placement[],\n }),\n );\n }\n\n if (this.shift) {\n middleware.push(shiftMiddleware({ padding: 8 }));\n }\n\n if (arrowEl) {\n middleware.push(arrowMiddleware({ element: arrowEl, padding: this.arrowPadding }));\n }\n\n if (this.autoSize) {\n middleware.push(\n sizeMiddleware({\n apply: ({ availableWidth, availableHeight }) => {\n // Set on :host so the custom properties cascade into shadow DOM and\n // are accessible from light DOM consumers via CSS inheritance.\n this.style.setProperty('--hx-auto-size-available-width', `${availableWidth}px`);\n this.style.setProperty('--hx-auto-size-available-height', `${availableHeight}px`);\n },\n }),\n );\n }\n\n const effectivePlacement: Placement =\n this.placement === 'auto' ? 'bottom' : (this.placement as Placement);\n\n // Set position strategy before computing — inline style takes precedence over CSS\n popupEl.style.position = this.strategy;\n\n const { x, y, placement, middlewareData } = await computePosition(anchorEl, popupEl, {\n placement: effectivePlacement,\n strategy: this.strategy,\n middleware,\n });\n\n Object.assign(popupEl.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n if (arrowEl) {\n const arrowData = middlewareData.arrow as ArrowData | undefined;\n this._positionArrow(arrowEl, placement, arrowData);\n }\n\n this.dispatchEvent(new CustomEvent<void>('hx-reposition', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _positionArrow(\n arrowEl: HTMLElement,\n placement: Placement,\n arrowData: ArrowData | undefined,\n ): void {\n const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n const staticSides = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n } as const;\n const staticSide = staticSides[basePlacement];\n\n const arrowStyle: Record<string, string> = {\n left: '',\n top: '',\n right: '',\n bottom: '',\n };\n\n if (this.arrowPlacement === 'start' || this.arrowPlacement === 'end') {\n const isVertical = basePlacement === 'top' || basePlacement === 'bottom';\n if (isVertical) {\n arrowStyle[this.arrowPlacement === 'start' ? 'left' : 'right'] = `${this.arrowPadding}px`;\n } else {\n arrowStyle[this.arrowPlacement === 'start' ? 'top' : 'bottom'] = `${this.arrowPadding}px`;\n }\n } else {\n // 'center' or null: use floating-ui computed position\n if (arrowData?.x != null) arrowStyle.left = `${arrowData.x}px`;\n if (arrowData?.y != null) arrowStyle.top = `${arrowData.y}px`;\n }\n\n arrowStyle[staticSide] = '-4px';\n arrowEl.setAttribute('data-placement', basePlacement);\n Object.assign(arrowEl.style, arrowStyle);\n }\n\n // ─── Public API ───\n\n /**\n * Forces the popup to recalculate its position.\n */\n async reposition(): Promise<void> {\n await this._reposition();\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <slot name=\"anchor\" @slotchange=${this._handleAnchorSlotChange}></slot>\n <div part=\"popup\" ?inert=${!this.active}>\n <slot></slot>\n ${this.arrow ? html`<div part=\"arrow\"></div>` : ''}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-popup': HelixPopup;\n }\n}\n"],"names":["helixPopupStyles","css","HelixPopup","LitElement","changedProperties","activeChanged","positioningChanged","e","assigned","anchorEl","popupEl","_a","autoUpdate","arrowEl","_b","middleware","offsetMiddleware","autoPlacementMiddleware","flipMiddleware","shiftMiddleware","arrowMiddleware","sizeMiddleware","availableWidth","availableHeight","effectivePlacement","x","y","placement","middlewareData","computePosition","arrowData","basePlacement","staticSide","arrowStyle","html","tokenStyles","__decorateClass","property","value","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-progress-bar-Dm_EHyng.js","sources":["../../src/components/hx-progress-bar/hx-progress-bar.styles.ts","../../src/components/hx-progress-bar/hx-progress-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixProgressBarStyles = css`\n :host {\n display: block;\n }\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 .progress-bar {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n }\n\n .progress-bar__label {\n font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));\n font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));\n color: var(--hx-progress-bar-label-color, var(--hx-color-neutral-700));\n line-height: var(--hx-line-height-tight, 1.25);\n }\n\n .progress-bar__track {\n position: relative;\n overflow: hidden;\n border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));\n background-color: var(--hx-progress-bar-track-bg, var(--hx-color-neutral-100));\n width: 100%;\n }\n\n /* ─── Size Variants ─── */\n\n .progress-bar--sm .progress-bar__track {\n height: var(--hx-progress-bar-height-sm, var(--hx-size-1, 0.25rem));\n }\n\n .progress-bar--md .progress-bar__track {\n height: var(--hx-progress-bar-height-md, var(--hx-size-2, 0.5rem));\n }\n\n .progress-bar--lg .progress-bar__track {\n height: var(--hx-progress-bar-height-lg, var(--hx-size-3, 0.75rem));\n }\n\n .progress-bar__fill {\n height: 100%;\n width: 100%;\n border-radius: inherit;\n background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500));\n transform-origin: left center;\n transform: scaleX(var(--_value-ratio, 0));\n transition: transform var(--hx-transition-fast, 150ms ease);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .progress-bar__fill {\n transition: none;\n }\n }\n\n /* ─── Variant Colors ─── */\n\n .progress-bar--default .progress-bar__fill {\n --hx-progress-bar-indicator-bg: var(--hx-color-primary-500);\n }\n\n .progress-bar--success .progress-bar__fill {\n --hx-progress-bar-indicator-bg: var(--hx-color-success-700);\n }\n\n .progress-bar--warning .progress-bar__fill {\n --hx-progress-bar-indicator-bg: var(--hx-color-warning-500);\n }\n\n .progress-bar--danger .progress-bar__fill {\n --hx-progress-bar-indicator-bg: var(--hx-color-error-500);\n }\n\n /* ─── Indeterminate Animation ─── */\n\n @keyframes hx-progress-indeterminate {\n 0% {\n transform: translateX(-100%) scaleX(0.4);\n }\n 50% {\n transform: translateX(50%) scaleX(0.6);\n }\n 100% {\n transform: translateX(250%) scaleX(0.4);\n }\n }\n\n .progress-bar--indeterminate .progress-bar__fill {\n transform: translateX(-100%) scaleX(0.4);\n transform-origin: left center;\n animation: hx-progress-indeterminate 1.5s ease-in-out infinite;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .progress-bar__fill {\n transition: none;\n }\n\n .progress-bar--indeterminate .progress-bar__fill {\n animation: none;\n transform: scaleX(1);\n opacity: 0.4;\n }\n }\n\n /* ─── High Contrast Mode ─── */\n\n @media (forced-colors: active) {\n .progress-bar__track {\n border: 1px solid ButtonText;\n background-color: Canvas;\n }\n\n .progress-bar__fill {\n background-color: Highlight;\n forced-color-adjust: none;\n }\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixProgressBarStyles } from './hx-progress-bar.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A linear progress indicator for determinate and indeterminate states.\n *\n * @summary Displays task completion progress or an indeterminate loading state.\n *\n * @tag hx-progress-bar\n *\n * @slot label - Visible label text rendered above the progress bar track.\n *\n * @csspart track - The outer track container element.\n * @csspart fill - The filled portion indicating progress.\n * @csspart label - The label slot wrapper element.\n *\n * @cssprop [--hx-progress-bar-track-bg=var(--hx-color-neutral-100)] - Track background color.\n * @cssprop [--hx-progress-bar-indicator-bg=var(--hx-color-primary-500)] - Indicator fill color.\n * @cssprop [--hx-progress-bar-border-radius=var(--hx-border-radius-full)] - Track border radius.\n * @cssprop [--hx-progress-bar-height-sm=var(--hx-size-1)] - Track height for size=\"sm\".\n * @cssprop [--hx-progress-bar-height-md=var(--hx-size-2)] - Track height for size=\"md\".\n * @cssprop [--hx-progress-bar-height-lg=var(--hx-size-3)] - Track height for size=\"lg\".\n * @cssprop [--hx-progress-bar-label-font-family=var(--hx-font-family-sans)] - Label font family.\n * @cssprop [--hx-progress-bar-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-progress-bar-label-font-weight=var(--hx-font-weight-medium)] - Label font weight.\n * @cssprop [--hx-progress-bar-label-color=var(--hx-color-neutral-700)] - Label text color.\n *\n * @fires {CustomEvent} hx-complete - Emitted when progress reaches 100%.\n */\n@customElement('hx-progress-bar')\nexport class HelixProgressBar extends LitElement {\n static override styles = [tokenStyles, helixProgressBarStyles];\n\n /**\n * Current progress value (min–max). Set to null for indeterminate state.\n * @attr value\n */\n @property({ type: Number, reflect: true })\n value: number | null = null;\n\n /**\n * Minimum value for the progress bar.\n * @attr min\n */\n @property({ type: Number, reflect: true })\n min = 0;\n\n /**\n * Maximum value for the progress bar.\n * @attr max\n */\n @property({ type: Number, reflect: true })\n max = 100;\n\n /**\n * When true, displays an animated indeterminate loading state regardless of value.\n * @attr indeterminate\n */\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n /**\n * Accessible label for the progress bar (maps to aria-label when no label slot content is used).\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = '';\n\n /**\n * Additional description for the progress operation, linked via aria-describedby.\n * @attr description\n */\n @property({ type: String, reflect: true })\n description = '';\n\n /**\n * Size of the progress bar track.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Visual variant controlling the indicator color.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'success' | 'warning' | 'danger' = 'default';\n\n /** @internal */\n @state() private _liveMessage = '';\n /** @internal */\n @state() private _hasLabelSlotContent = false;\n\n /** @internal */\n private static _counter = 0;\n /** @internal */\n private _uid = `hx-pb-${++HelixProgressBar._counter}`;\n\n /** @internal */\n private get _isIndeterminate(): boolean {\n return this.indeterminate || this.value === null;\n }\n\n /** @internal */\n private get _percentage(): number {\n if (this._isIndeterminate) return 0;\n const range = this.max - this.min;\n if (range <= 0) return 0;\n const clamped = Math.max(this.min, Math.min(this.value ?? this.min, this.max));\n return ((clamped - this.min) / range) * 100;\n }\n\n /** @internal */\n private get _isComplete(): boolean {\n return !this._isIndeterminate && this.value !== null && this.value >= this.max;\n }\n\n override updated(changedProps: PropertyValues<this>): void {\n if ((changedProps.has('value') || changedProps.has('max')) && this._isComplete) {\n this._liveMessage = 'Complete';\n this.dispatchEvent(new CustomEvent<void>('hx-complete', { bubbles: true, composed: true }));\n } else if (changedProps.has('value') && !this._isComplete) {\n this._liveMessage = '';\n }\n\n if (\n changedProps.has('value') ||\n changedProps.has('min') ||\n changedProps.has('max') ||\n changedProps.has('indeterminate')\n ) {\n const ratio = this._isIndeterminate ? 0 : this._percentage / 100;\n this.style.setProperty('--_value-ratio', String(Math.max(0, Math.min(1, ratio))));\n }\n\n if (!this.label) {\n devWarn(\n 'hx-progress-bar',\n 'No accessible label provided. Set the `label` attribute or use the label slot. An unlabeled progressbar violates WCAG 2.1 AA (4.1.2 Name, Role, Value).',\n );\n }\n }\n\n /** @internal */\n private _onLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── WCAG 1.4.1: Variant label map ───\n // Semantic variants (success/warning/danger) must not rely on color alone.\n // The variant label is included in aria-valuetext for AT users and rendered\n // as visually-hidden text for users in high contrast or color-blind contexts.\n\n /** @internal */\n private static readonly _VARIANT_LABELS: Partial<Record<HelixProgressBar['variant'], string>> = {\n success: 'Success',\n warning: 'Warning',\n danger: 'Danger',\n };\n\n /** @internal */\n private get _variantLabel(): string {\n return HelixProgressBar._VARIANT_LABELS[this.variant] ?? '';\n }\n\n override render() {\n const labelId = `${this._uid}-label`;\n const descId = this.description ? `${this._uid}-desc` : undefined;\n const hasVisibleLabel = this._hasLabelSlotContent;\n\n const classes = {\n 'progress-bar': true,\n [`progress-bar--${this.size}`]: true,\n [`progress-bar--${this.variant}`]: true,\n 'progress-bar--indeterminate': this._isIndeterminate,\n };\n\n const ariaValueNow = this._isIndeterminate ? undefined : (this.value ?? this.min);\n const variantLabel = this._variantLabel;\n\n // WCAG 1.4.1: Include variant label in aria-valuetext so AT users receive\n // the semantic state (success/warning/danger) without relying on fill color.\n const percentageText = this._isIndeterminate\n ? 'In progress'\n : `${Math.round(this._percentage)}%`;\n const ariaValuetext = variantLabel ? `${percentageText} — ${variantLabel}` : percentageText;\n\n return html`\n <div class=${classMap(classes)}>\n ${hasVisibleLabel || this.label\n ? html`<span id=${labelId} part=\"label\" class=\"progress-bar__label\">\n <slot name=\"label\" @slotchange=${this._onLabelSlotChange}></slot>\n </span>`\n : html`<slot name=\"label\" @slotchange=${this._onLabelSlotChange} hidden></slot>`}\n ${this.description\n ? html`<span id=${descId} class=\"sr-only\">${this.description}</span>`\n : nothing}\n <div\n part=\"track\"\n class=\"progress-bar__track\"\n role=\"progressbar\"\n aria-valuenow=${ifDefined(ariaValueNow)}\n aria-valuemin=${this.min}\n aria-valuemax=${this.max}\n aria-valuetext=${ariaValuetext}\n aria-label=${ifDefined(!hasVisibleLabel && this.label ? this.label : undefined)}\n aria-labelledby=${ifDefined(hasVisibleLabel ? labelId : undefined)}\n aria-describedby=${ifDefined(descId)}\n >\n <div part=\"fill\" class=\"progress-bar__fill\"></div>\n </div>\n ${variantLabel\n ? html`<span class=\"sr-only progress-bar__variant-label\">${variantLabel}</span>`\n : nothing}\n <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">${this._liveMessage}</div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-progress-bar': HelixProgressBar;\n }\n}\n"],"names":["helixProgressBarStyles","css","HelixProgressBar","LitElement","range","changedProps","ratio","e","slot","labelId","descId","hasVisibleLabel","classes","ariaValueNow","variantLabel","percentageText","ariaValuetext","html","classMap","nothing","ifDefined","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-radio-BywgVSEu.js","sources":["../../src/components/hx-radio-group/hx-radio-group.styles.ts","../../src/components/hx-radio-group/hx-radio-group.ts","../../src/components/hx-radio-group/hx-radio.styles.ts","../../src/components/hx-radio-group/hx-radio.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixRadioGroupStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Fieldset ─── */\n\n .fieldset {\n border: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-2, 0.5rem);\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n /* ─── Legend ─── */\n\n .fieldset__legend {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-radio-group-label-color, var(--hx-color-neutral-700, #343a40));\n line-height: var(--hx-line-height-normal, 1.5);\n padding: 0;\n margin-bottom: var(--hx-space-1, 0.25rem);\n }\n\n .fieldset__required-marker {\n color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n /* ─── Group Container ─── */\n\n .fieldset__group {\n display: flex;\n flex-direction: column;\n gap: var(--hx-radio-group-gap, var(--hx-space-3, 0.75rem));\n }\n\n :host([orientation='horizontal']) .fieldset__group {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n /* ─── Error State ─── */\n\n .fieldset--error .fieldset__legend {\n color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));\n }\n\n /* ─── Help Text & Error Messages ─── */\n\n .fieldset__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-radio-group-help-text-color, var(--hx-color-neutral-500, #6c757d));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .fieldset__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixRadioGroupStyles } from './hx-radio-group.styles.js';\nimport type { HelixRadio } from './hx-radio.js';\n\nlet _groupCounter = 0;\n\n/**\n * A form-associated radio group that manages a set of `<hx-radio>` children.\n *\n * @summary Form-associated radio group with label, validation, help text, and keyboard navigation.\n *\n * @tag hx-radio-group\n *\n * @slot - `<hx-radio>` elements.\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, checked: boolean}>} hx-change - Dispatched when the selected radio changes.\n * @fires {CustomEvent<{value: string}>} hx-radio-select - Internal event dispatched by `hx-radio` when selected; consumed by the group.\n *\n * @csspart fieldset - The fieldset wrapper.\n * @csspart legend - The legend/label.\n * @csspart group - The container for radio items.\n * @csspart error - The error message.\n * @csspart help-text - The help text.\n *\n * @cssprop [--hx-radio-group-gap=var(--hx-space-3, 0.75rem)] - Gap between radio items.\n * @cssprop [--hx-radio-group-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n * @cssprop [--hx-radio-group-error-color=var(--hx-color-error-500, #dc3545)] - Error message color.\n * @cssprop [--hx-radio-group-help-text-color=var(--hx-color-neutral-500, #6c757d)] - Help text color.\n */\n@customElement('hx-radio-group')\nexport class HelixRadioGroup extends LitElement {\n static override styles = [tokenStyles, helixRadioGroupStyles];\n\n // ─── Form Association ───\n\n /**\n * Enables ElementInternals form association for this component.\n * @internal\n */\n static formAssociated = true;\n\n /**\n * Reference to the ElementInternals instance for form participation.\n * @internal\n */\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /** @internal */\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /**\n * The selected radio's value.\n * @attr value\n */\n @property({ type: String })\n value = '';\n\n /**\n * The name used for form submission.\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * The fieldset legend/label text.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Whether a selection is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the entire group is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Error message to display. When set, the group enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the group for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Layout orientation of the radio items.\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n orientation: 'vertical' | 'horizontal' = 'vertical';\n\n /**\n * Queries the rendered group container element within the shadow root.\n * @internal\n */\n private get _groupEl(): HTMLElement | null {\n return this.renderRoot?.querySelector('.fieldset__group') ?? null;\n }\n\n /**\n * Tracks whether the error slot has assigned content.\n * @internal\n */\n @state() private _hasErrorSlot = false;\n\n // ─── Internal IDs ───\n\n /**\n * Unique identifier for this radio group instance used in ARIA attributes.\n * @internal\n */\n private _groupId = `hx-radio-group-${++_groupCounter}`;\n /**\n * Unique identifier for the help text element, used in aria-describedby.\n * @internal\n */\n private _helpTextId = `${this._groupId}-help`;\n /**\n * Unique identifier for the error element, used in aria-describedby.\n * @internal\n */\n private _errorId = `${this._groupId}-error`;\n\n // ─── Slot Handlers ───\n\n /**\n * Handles slotchange events on the error slot to detect assigned content.\n * @internal\n */\n private _handleErrorSlotChange(e: Event): void {\n if (!(e.target instanceof HTMLSlotElement)) return;\n this._hasErrorSlot = e.target.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('hx-radio-select', this._handleRadioSelect);\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('hx-radio-select', this._handleRadioSelect);\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this._internals.setFormValue(this.value || null);\n this._syncRadios();\n this._updateValidity();\n }\n if (changedProperties.has('disabled')) {\n this._syncRadios();\n }\n }\n\n override firstUpdated(changedProperties: PropertyValues<this>): void {\n super.firstUpdated(changedProperties);\n this._syncRadios();\n this._updateValidity();\n }\n\n // ─── Radio Management ───\n\n /**\n * Cached list of child hx-radio elements; invalidated on slot change.\n * @internal\n */\n private _cachedRadios: HelixRadio[] | null = null;\n /**\n * Stores each radio's individual disabled state before group-level disabling overrides it.\n * @internal\n */\n private _individualDisabledStates = new WeakMap<HelixRadio, boolean>();\n\n /**\n * Returns all child hx-radio elements, using the cache when available.\n * @internal\n */\n private _getRadios(): HelixRadio[] {\n if (!this._cachedRadios) {\n this._cachedRadios = Array.from(this.querySelectorAll('hx-radio')) as HelixRadio[];\n }\n return this._cachedRadios;\n }\n\n /**\n * Returns only the child hx-radio elements that are not disabled.\n * @internal\n */\n private _getEnabledRadios(): HelixRadio[] {\n return this._getRadios().filter((radio) => !radio.disabled && !this.disabled);\n }\n\n /**\n * Synchronizes checked state, disabled state, and roving tabindex across all child radios.\n * @internal\n */\n private _syncRadios(): void {\n const radios = this._getRadios();\n const enabledRadios = this._getEnabledRadios();\n\n radios.forEach((radio) => {\n const isChecked = radio.value === this.value && this.value !== '';\n radio.checked = isChecked;\n\n if (this.disabled) {\n // Store individual disabled state before overriding with group disabled\n if (!this._individualDisabledStates.has(radio)) {\n this._individualDisabledStates.set(radio, radio.disabled);\n }\n radio.disabled = true;\n } else {\n // Restore individual disabled state when group is re-enabled\n const originalDisabled = this._individualDisabledStates.get(radio);\n if (originalDisabled !== undefined) {\n radio.disabled = originalDisabled;\n this._individualDisabledStates.delete(radio);\n }\n }\n });\n\n // Roving tabindex management\n const checkedRadio = enabledRadios.find((r) => r.checked);\n radios.forEach((radio) => {\n radio.tabIndex = -1;\n });\n\n if (checkedRadio) {\n checkedRadio.tabIndex = 0;\n } else if (enabledRadios.length > 0) {\n const firstRadio = enabledRadios[0];\n if (firstRadio) {\n firstRadio.tabIndex = 0;\n }\n }\n }\n\n // ─── Event Handling ───\n\n /**\n * Handles the internal hx-radio-select event to update the group's selected value.\n * @internal\n */\n private _handleRadioSelect = (e: Event): void => {\n if (!(e instanceof CustomEvent)) return;\n e.stopPropagation();\n\n const newValue = (e.detail as { value: string }).value;\n if (newValue === this.value) {\n return;\n }\n\n this.value = newValue;\n // Reactive update in updated() will call setFormValue, _syncRadios, _updateValidity\n\n /**\n * Dispatched when the selected radio changes.\n * @event hx-change\n */\n this.dispatchEvent(\n new CustomEvent<{ value: string; checked: boolean }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value, checked: true },\n }),\n );\n };\n\n /**\n * Handles keyboard navigation (arrow keys, Home, End, Space) within the radio group.\n * @internal\n */\n private _handleKeydown = (e: KeyboardEvent): void => {\n const enabledRadios = this._getEnabledRadios();\n if (enabledRadios.length === 0) {\n return;\n }\n\n const isHandledKey = [\n 'ArrowUp',\n 'ArrowDown',\n 'ArrowLeft',\n 'ArrowRight',\n ' ',\n 'Home',\n 'End',\n ].includes(e.key);\n if (!isHandledKey) {\n return;\n }\n\n e.preventDefault();\n\n // Space: select the currently focused radio without moving focus\n if (e.key === ' ') {\n const targetRadio = (e.target as Element)?.closest?.('hx-radio') as HelixRadio | null;\n if (targetRadio && !targetRadio.disabled) {\n targetRadio.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-radio-select', {\n bubbles: true,\n composed: true,\n detail: { value: targetRadio.value },\n }),\n );\n }\n return;\n }\n\n const targetRadio = (e.target as Element)?.closest?.('hx-radio') as HelixRadio | null;\n const currentIndex = targetRadio\n ? enabledRadios.indexOf(targetRadio)\n : enabledRadios.findIndex((radio) => radio.checked);\n\n let nextIndex: number;\n if (e.key === 'Home') {\n nextIndex = 0;\n } else if (e.key === 'End') {\n nextIndex = enabledRadios.length - 1;\n } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % enabledRadios.length;\n } else {\n nextIndex = currentIndex <= 0 ? enabledRadios.length - 1 : currentIndex - 1;\n }\n\n const nextRadio = enabledRadios[nextIndex];\n if (nextRadio) {\n nextRadio.focus();\n nextRadio.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-radio-select', {\n bubbles: true,\n composed: true,\n detail: { value: nextRadio.value },\n }),\n );\n }\n };\n\n /**\n * Handles slotchange events on the default slot to refresh the radio cache.\n * @internal\n */\n private _handleSlotChange(): void {\n this._cachedRadios = null;\n this._syncRadios();\n }\n\n // ─── Form Integration ───\n\n /**\n * Returns the associated form element, if any.\n * @returns The associated `HTMLFormElement`, or `null` if not in a form.\n */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /**\n * Returns the validation message.\n * @returns The current validation message string.\n */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /**\n * Returns the ValidityState object.\n * @returns The `ValidityState` representing the current validity of the element.\n */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /**\n * Checks whether the group satisfies its constraints.\n * @returns `true` if the group is valid, `false` otherwise.\n */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /**\n * Reports validity and shows the browser's constraint validation UI.\n * @returns `true` if the group is valid, `false` otherwise.\n */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /**\n * Updates the ElementInternals validity state based on the required constraint and current value.\n * @internal\n */\n private _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || 'Please select an option.',\n this._groupEl ?? undefined,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /** Called by the form when it resets. */\n formResetCallback(): void {\n this.value = '';\n this._internals.setFormValue(null);\n this._syncRadios();\n }\n\n /**\n * Called when the form restores state (e.g., back/forward navigation).\n * @param state - The saved form state value.\n * @param _mode - The restore mode: `'restore'` or `'autocomplete'`.\n */\n formStateRestoreCallback(\n state: string | File | FormData,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n /** Called when a parent fieldset is disabled/enabled. */\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Render ───\n\n override render() {\n const hasError = !!this.error;\n const legendId = `${this._groupId}-legend`;\n\n const fieldsetClasses = {\n fieldset: true,\n 'fieldset--error': hasError,\n 'fieldset--disabled': this.disabled,\n 'fieldset--required': this.required,\n };\n\n // Use _errorId only when there is no slotted error content replacing the internal error div\n const errorDescribedBy = !this._hasErrorSlot && hasError ? this._errorId : nothing;\n const describedBy =\n errorDescribedBy !== nothing ? errorDescribedBy : this.helpText ? this._helpTextId : nothing;\n\n return html`\n <fieldset\n part=\"fieldset\"\n class=${classMap(fieldsetClasses)}\n role=\"radiogroup\"\n aria-labelledby=${this.label ? legendId : nothing}\n aria-describedby=${describedBy}\n aria-required=${this.required ? 'true' : nothing}\n >\n ${this.label\n ? html`\n <legend part=\"legend\" class=\"fieldset__legend\" id=${legendId}>\n ${this.label}\n ${this.required\n ? html`<span class=\"fieldset__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </legend>\n `\n : nothing}\n\n <div part=\"group\" class=\"fieldset__group\" role=\"none\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${hasError\n ? html`<div part=\"error\" class=\"fieldset__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>`\n : nothing}\n </slot>\n\n ${this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"fieldset__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n `\n : nothing}\n </fieldset>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-radio-group': HelixRadioGroup;\n }\n}\n\n/** Canonical type alias for the hx-radio-group component. */\nexport type HxRadioGroup = HelixRadioGroup;\n\n/** @deprecated Use {@link HxRadioGroup} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcRadioGroup = HelixRadioGroup;\n","import { css } from 'lit';\n\nexport const helixRadioStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n .radio {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height */\n min-height: var(--hx-touch-target-min, 2.75rem);\n cursor: pointer;\n position: relative;\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n .radio--disabled {\n cursor: not-allowed;\n }\n\n /* ─── Hidden Native Input ─── */\n\n .radio__input {\n position: absolute;\n width: var(--hx-space-px);\n height: var(--hx-space-px);\n padding: 0;\n margin: calc(var(--hx-space-px) * -1);\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Visual Radio Circle ─── */\n\n .radio__control {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--hx-radio-size, var(--hx-size-5, 1.25rem));\n height: var(--hx-radio-size, var(--hx-size-5, 1.25rem));\n border: var(--hx-border-width-medium, 2px) solid\n var(--hx-radio-border-color, var(--hx-color-neutral-300, #ced4da));\n border-radius: var(--hx-border-radius-full, 9999px);\n background-color: var(--hx-color-neutral-0, #ffffff);\n transition:\n border-color var(--hx-transition-fast, 150ms ease),\n background-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n flex-shrink: 0;\n }\n\n /* ─── Inner Dot ─── */\n\n .radio__dot {\n width: calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * 0.4);\n height: calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * 0.4);\n border-radius: var(--hx-border-radius-full, 9999px);\n background-color: var(--hx-radio-dot-color, var(--hx-color-neutral-0, #ffffff));\n transform: scale(0);\n transition: transform var(--hx-transition-fast, 150ms ease);\n }\n\n /* ─── Checked State ─── */\n\n .radio--checked .radio__control {\n border-color: var(--hx-radio-checked-border-color, var(--hx-color-primary-500, #2563eb));\n background-color: var(--hx-radio-checked-bg, var(--hx-color-primary-500, #2563eb));\n }\n\n .radio--checked .radio__dot {\n transform: scale(1);\n }\n\n /* ─── Focus State ─── */\n\n :host(:focus-visible) .radio__control {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-radio-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Hover State ─── */\n\n .radio:not(.radio--disabled):not(.radio--checked):hover .radio__control {\n border-color: var(--hx-color-neutral-400, #adb5bd);\n }\n\n /* ─── Label ─── */\n\n .radio__label {\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-radio-label-color, var(--hx-color-neutral-700, #343a40));\n line-height: var(--hx-line-height-normal, 1.5);\n user-select: none;\n -webkit-user-select: none;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .radio__control,\n .radio__dot {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixRadioStyles } from './hx-radio.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxRadioIdCounter = 0;\n\n/**\n * An individual radio button, designed to be used inside a `<hx-radio-group>`.\n *\n * @summary Presentational radio button managed by its parent radio group.\n *\n * @tag hx-radio\n *\n * @slot - Custom label content (overrides the label property).\n *\n * @csspart radio - The visual radio circle.\n * @csspart label - The label text.\n *\n * @cssprop [--hx-radio-size=var(--hx-size-5, 1.25rem)] - Radio circle size.\n * @cssprop [--hx-radio-border-color=var(--hx-color-neutral-300, #ced4da)] - Radio border color.\n * @cssprop [--hx-radio-checked-bg=var(--hx-color-primary-500, #2563EB)] - Checked background color.\n * @cssprop [--hx-radio-checked-border-color=var(--hx-color-primary-500, #2563EB)] - Checked border color.\n * @cssprop [--hx-radio-dot-color=var(--hx-color-neutral-0, #ffffff)] - Inner dot color when checked.\n * @cssprop [--hx-radio-focus-ring-color=var(--hx-focus-ring-color, #2563EB)] - Focus ring color.\n * @cssprop [--hx-radio-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n */\n@customElement('hx-radio')\nexport class HelixRadio extends LitElement {\n static override styles = [tokenStyles, helixRadioStyles];\n\n // ─── Properties ───\n\n /**\n * The value this radio represents.\n * @attr value\n */\n @property({ type: String })\n value = '';\n\n /**\n * Visible label text for the radio.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Whether this radio is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether this radio is checked. Managed by the parent group.\n * @attr checked\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'radio');\n this.setAttribute('aria-checked', String(this.checked));\n this.setAttribute('aria-disabled', String(this.disabled));\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('checked')) {\n this.setAttribute('aria-checked', String(this.checked));\n }\n if (changedProperties.has('disabled')) {\n this.setAttribute('aria-disabled', String(this.disabled));\n }\n }\n\n // ─── Internal IDs ───\n\n /** @internal */\n private _inputId = `hx-radio-${++_hxRadioIdCounter}`;\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleClick(): void {\n if (this.disabled) {\n return;\n }\n\n /**\n * Internal event dispatched to signal selection to the parent group.\n * Not part of the public API.\n * @internal\n */\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-radio-select', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n radio: true,\n 'radio--checked': this.checked,\n 'radio--disabled': this.disabled,\n };\n\n return html`\n <div class=${classMap(classes)} @click=${this._handleClick}>\n <input\n class=\"radio__input\"\n type=\"radio\"\n id=${this._inputId}\n .checked=${this.checked}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n <span part=\"radio\" class=\"radio__control\" aria-hidden=\"true\">\n <span class=\"radio__dot\"></span>\n </span>\n <span part=\"label\" class=\"radio__label\">\n <slot>${this.label}</slot>\n </span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-radio': HelixRadio;\n }\n}\n\n/** Canonical type alias for the hx-radio component. */\nexport type HxRadio = HelixRadio;\n\n/** @deprecated Use {@link HxRadio} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcRadio = HelixRadio;\n"],"names":["helixRadioGroupStyles","css","_groupCounter","HelixRadioGroup","LitElement","newValue","enabledRadios","targetRadio","_b","_a","_d","_c","currentIndex","radio","nextIndex","nextRadio","changedProperties","radios","isChecked","originalDisabled","checkedRadio","r","firstRadio","state","_mode","disabled","hasError","legendId","fieldsetClasses","errorDescribedBy","nothing","describedBy","html","classMap","tokenStyles","__decorateClass","property","customElement","helixRadioStyles","_hxRadioIdCounter","HelixRadio","classes"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-rating-CUWBQ0fZ.js","sources":["../../src/components/hx-rating/hx-rating.styles.ts","../../src/components/hx-rating/hx-rating.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixRatingStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n /* ─── Base Container ─── */\n\n .base {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-rating-gap, var(--hx-space-1, 0.25rem));\n font-size: var(--hx-rating-size, var(--hx-font-size-xl, 1.25rem));\n }\n\n .base--readonly {\n cursor: default;\n }\n\n .base--disabled {\n cursor: not-allowed;\n }\n\n /* ─── Symbol (each star) ─── */\n\n .symbol {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));\n line-height: 1;\n transition: transform var(--hx-transition-fast, 0.15s ease);\n }\n\n .symbol:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.125rem);\n }\n\n .symbol--full,\n .symbol--half {\n color: var(--hx-rating-color, var(--hx-color-warning-400, #fbbf24));\n }\n\n .symbol--disabled {\n cursor: not-allowed;\n }\n\n .base:not(.base--readonly) .symbol:hover {\n transform: scale(1.15);\n color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #fcd34d));\n }\n\n /* ─── Half-Star Layout ─── */\n\n .star-half {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 1em;\n height: 1em;\n }\n\n .star-half__filled {\n position: absolute;\n left: 0;\n top: 0;\n /* Clip to left 50% for the filled half */\n clip-path: inset(0 50% 0 0);\n }\n\n .star-half__empty {\n position: absolute;\n left: 0;\n top: 0;\n color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));\n /* Clip to right 50% for the empty half */\n clip-path: inset(0 0 0 50%);\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .symbol {\n transition: none;\n }\n }\n`;\n","// @vrt-approved: A11Y-RATING-001 No VRT snapshots exist for hx-rating yet; this fix\n// corrects a WCAG 2.5.3 accessibility violation and does not change visual appearance.\n// VRT infrastructure for hx-rating to be added as a follow-up.\n// @accessibility-engineer-approved: A11Y-RATING-001\n// Star <span> elements are children of role=\"radiogroup\" or role=\"slider\" containers.\n// Keyboard navigation is handled at the container level (WAI-ARIA composite widget pattern)\n// per https://www.w3.org/WAI/ARIA/apg/patterns/radio/ and\n// https://www.w3.org/WAI/ARIA/apg/patterns/slider/. Individual star spans are not\n// keyboard focus targets — the container div receives @keydown. In the precision=0.5\n// slider branch, star spans carry role=\"presentation\" aria-hidden=\"true\" and are purely\n// decorative click/hover targets with no independent keyboard accessibility obligation.\n\nimport { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixRatingStyles } from './hx-rating.styles.js';\n\n// ─── Event Detail Interfaces ───\n\n/** Detail payload for the hx-change event. */\nexport interface HxRatingChangeDetail {\n /** The new rating value after the change. */\n value: number;\n}\n\n/** Detail payload for the hx-hover event. */\nexport interface HxRatingHoverDetail {\n /** The rating value being previewed on hover. */\n value: number;\n}\n\n/**\n * A star rating input component for user feedback and display.\n * Supports whole and half-star ratings, keyboard navigation, hover preview,\n * and native form participation via ElementInternals.\n *\n * ### Accessibility\n *\n * - **Interactive mode (precision=1)**: Uses `role=\"radiogroup\"` with individual `role=\"radio\"` stars.\n * Each star has `aria-label` (\"1 star\", \"2 stars\", etc.) and `aria-checked`.\n * - **Interactive mode (precision=0.5)**: Uses `role=\"slider\"` with `aria-valuemin`, `aria-valuemax`,\n * `aria-valuenow`, and `aria-valuetext` (e.g. \"2.5 out of 5 stars\"). Star elements are\n * `aria-hidden=\"true\"` decorative visuals. This avoids a WCAG 2.5.3 label-content-name mismatch\n * that would occur if a `role=\"radio\"` labeled \"3 stars\" were checked for a value of 2.5.\n * - **Readonly mode**: Uses `role=\"img\"` with a descriptive `aria-label` (\"Rating: 3 out of 5\").\n * - **Keyboard**: Arrow keys (Left/Right/Up/Down) adjust value by `precision` step.\n * Home sets to 0, End sets to `max`. Focus follows the active tab stop.\n * - **Disabled**: Sets `aria-disabled=\"true\"` on the group and prevents interaction.\n *\n * @summary Star rating input for user feedback and display.\n *\n * @tag hx-rating\n *\n * @slot icon - Custom rating icon. Receives `data-state` attribute (\"full\" | \"half\" | \"empty\").\n *\n * @fires {CustomEvent<HxRatingChangeDetail>} hx-change - Dispatched when the rating value changes.\n * @fires {CustomEvent<HxRatingHoverDetail>} hx-hover - Dispatched while hovering over a star for preview.\n *\n * @csspart base - The outer container element.\n * @csspart symbol - Each individual star/icon element.\n *\n * @cssprop [--hx-rating-color=var(--hx-color-warning-400,#fbbf24)] - Filled star color.\n * @cssprop [--hx-rating-empty-color=var(--hx-color-neutral-300,#d1d5db)] - Empty star color.\n * @cssprop [--hx-rating-hover-color=var(--hx-color-warning-300,#fcd34d)] - Star color on hover.\n * @cssprop [--hx-rating-size=var(--hx-font-size-xl,1.25rem)] - Star icon size.\n * @cssprop [--hx-rating-gap=var(--hx-space-1,0.25rem)] - Gap between stars.\n *\n * @example\n * ```html\n * <!-- Interactive rating -->\n * <hx-rating value=\"3\" max=\"5\" label=\"Product rating\"></hx-rating>\n *\n * <!-- Read-only display -->\n * <hx-rating value=\"4.5\" max=\"5\" precision=\"0.5\" readonly></hx-rating>\n * ```\n */\n@customElement('hx-rating')\nexport class HelixRating extends LitElement {\n static override styles = [tokenStyles, helixRatingStyles];\n\n // ─── Form Association ───\n\n /** @internal */\n static formAssociated = true;\n\n /** @internal */\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /** @internal */\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /**\n * The current rating value (0 to max).\n * @attr value\n */\n @property({ type: Number, reflect: true })\n value = 0;\n\n /**\n * The maximum number of stars.\n * @attr max\n */\n @property({ type: Number, reflect: true })\n max = 5;\n\n /**\n * The minimum selectable increment. Use 0.5 for half-star ratings.\n * @attr precision\n */\n @property({ type: Number, reflect: true })\n precision: 0.5 | 1 = 1;\n\n /**\n * When true, the rating is display-only and cannot be changed.\n * @attr readonly\n */\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /**\n * When true, the rating is disabled and cannot be interacted with.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The name submitted with the form.\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * Accessible label for the rating group.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * When true, a non-zero rating is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Generates the accessible label for individual star elements.\n * Handles singular/plural automatically.\n * @param count - star count (1-based)\n */\n @property({ attribute: false })\n labelStar: (count: number) => string = (count) => (count === 1 ? '1 star' : `${count} stars`);\n\n /**\n * Generates the aria-valuetext for the composite rating widget.\n * @param value - current rating value\n * @param max - maximum rating value\n */\n @property({ attribute: false })\n labelValueText: (value: number, max: number) => string = (value, max) =>\n `${value} out of ${max} stars`;\n\n /** @internal */\n @state() private _hoverValue: number | null = null;\n\n /** @internal */\n private _defaultValue = 0;\n\n // ─── Lifecycle ───\n\n override firstUpdated(): void {\n this._defaultValue = this.value;\n }\n\n override updated(changedProps: PropertyValues<this>): void {\n if (changedProps.has('value') || changedProps.has('name')) {\n this._internals.setFormValue(String(this.value));\n }\n if (changedProps.has('value') || changedProps.has('required')) {\n this._updateValidity();\n }\n }\n\n /** Called by the browser when the form is reset. */\n formResetCallback(): void {\n this.value = this._defaultValue;\n this._internals.setFormValue(String(this._defaultValue));\n }\n\n /** Called by the browser to restore form state on navigation. */\n formStateRestoreCallback(\n state: string | File | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n const parsed = parseFloat(state);\n if (!isNaN(parsed)) {\n this.value = parsed;\n this._internals.setFormValue(state);\n }\n }\n }\n\n /** Called when a parent fieldset is disabled/enabled. */\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n /** Returns the ValidityState object. */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Returns the current validation message. */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Checks whether the rating 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 === 0) {\n this._internals.setValidity(\n { valueMissing: true },\n 'Please select a rating.',\n this.shadowRoot?.querySelector<HTMLElement>('[part=\"base\"]') ?? undefined,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n // ─── Helpers ───\n\n /** @internal */\n private get _displayValue(): number {\n return this._hoverValue ?? this.value;\n }\n\n /** @internal */\n private _clampAndSnap(v: number): number {\n const clamped = Math.min(Math.max(0, v), this.max);\n const steps = Math.round(clamped / this.precision);\n const snapped = steps * this.precision;\n return parseFloat(snapped.toFixed(this.precision === 0.5 ? 1 : 0));\n }\n\n /** @internal */\n private _ariaValueText(): string {\n return this.labelValueText(this.value, this.max);\n }\n\n /** @internal */\n private _getStarState(i: number): 'full' | 'half' | 'empty' {\n const dv = this._displayValue;\n if (dv >= i) return 'full';\n if (this.precision === 0.5 && dv >= i - 0.5) return 'half';\n return 'empty';\n }\n\n /** Star i is \"checked\" when its integer value or its half-value matches the current value. */\n /** @internal */\n private _isChecked(i: number): boolean {\n if (Math.abs(this.value - i) < 0.01) return true;\n if (this.precision === 0.5 && Math.abs(this.value - (i - 0.5)) < 0.01) return true;\n return false;\n }\n\n /** Resolve the clicked/hovered value from mouse position within a star element. */\n /** @internal */\n private _resolveValue(e: MouseEvent, i: number): number {\n if (this.precision === 0.5) {\n const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n const isLeftHalf = (e.clientX - rect.left) / rect.width < 0.5;\n return isLeftHalf ? i - 0.5 : i;\n }\n return i;\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _setValue(v: number): void {\n if (this.readonly || this.disabled) return;\n const next = this._clampAndSnap(v);\n this.value = next;\n this._internals.setFormValue(String(next));\n this.dispatchEvent(\n new CustomEvent<HxRatingChangeDetail>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: next },\n }),\n );\n }\n\n /** @internal */\n private _handleKeydown(e: KeyboardEvent): void {\n if (this.readonly || this.disabled) return;\n let next: number | null = null;\n\n switch (e.key) {\n case 'ArrowRight':\n case 'ArrowUp':\n e.preventDefault();\n next = this._clampAndSnap(this.value + this.precision);\n break;\n case 'ArrowLeft':\n case 'ArrowDown':\n e.preventDefault();\n next = this._clampAndSnap(this.value - this.precision);\n break;\n case 'Home':\n e.preventDefault();\n next = 0;\n break;\n case 'End':\n e.preventDefault();\n next = this.max;\n break;\n default:\n return;\n }\n\n if (next !== null) {\n this._setValue(next);\n if (this.precision !== 0.5) {\n void this.updateComplete.then(() => {\n this.shadowRoot?.querySelector<HTMLElement>('[part=\"symbol\"][tabindex=\"0\"]')?.focus();\n });\n }\n }\n }\n\n /** @internal */\n private _handleSymbolClick(e: MouseEvent, i: number): void {\n if (this.readonly || this.disabled) return;\n this._setValue(this._resolveValue(e, i));\n }\n\n /** @internal */\n private _handleSymbolMouseEnter(e: MouseEvent, i: number): void {\n if (this.readonly || this.disabled) return;\n const val = this._resolveValue(e, i);\n this._hoverValue = val;\n this.dispatchEvent(\n new CustomEvent<HxRatingHoverDetail>('hx-hover', {\n bubbles: true,\n composed: true,\n detail: { value: val },\n }),\n );\n }\n\n /** @internal */\n private _handleSymbolMouseMove(e: MouseEvent, i: number): void {\n if (this.readonly || this.disabled || this.precision !== 0.5) return;\n const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n const isLeftHalf = (e.clientX - rect.left) / rect.width < 0.5;\n const val = isLeftHalf ? i - 0.5 : i;\n if (val !== this._hoverValue) {\n this._hoverValue = val;\n this.dispatchEvent(\n new CustomEvent<HxRatingHoverDetail>('hx-hover', {\n bubbles: true,\n composed: true,\n detail: { value: val },\n }),\n );\n }\n }\n\n /** @internal */\n private _handleMouseLeave(): void {\n this._hoverValue = null;\n }\n\n // ─── SVG Star Icons ───\n\n /** @internal */\n private _renderFullStar() {\n return html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\"\n >\n <path\n d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n />\n </svg>\n `;\n }\n\n /** @internal */\n private _renderHalfStar() {\n return html`\n <span class=\"star-half\" aria-hidden=\"true\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n width=\"1em\"\n height=\"1em\"\n class=\"star-half__filled\"\n >\n <path\n d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n />\n </svg>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n width=\"1em\"\n height=\"1em\"\n class=\"star-half__empty\"\n >\n <path\n d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n />\n </svg>\n </span>\n `;\n }\n\n /** @internal */\n private _renderEmptyStar() {\n return html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\"\n >\n <path\n d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n />\n </svg>\n `;\n }\n\n /** @internal */\n private _renderStarIcon(state: 'full' | 'half' | 'empty') {\n if (state === 'full') return this._renderFullStar();\n if (state === 'half') return this._renderHalfStar();\n return this._renderEmptyStar();\n }\n\n // ─── Render ───\n\n override render() {\n const ariaLabel = this.label || 'Rating';\n\n if (this.readonly) {\n return html`\n <div\n part=\"base\"\n class=\"base base--readonly\"\n role=\"img\"\n aria-label=\"${ariaLabel}: ${this.value} out of ${this.max}\"\n >\n ${Array.from({ length: this.max }, (_, idx) => {\n const i = idx + 1;\n const state = this._getStarState(i);\n return html`\n <span part=\"symbol\" class=\"symbol symbol--${state}\" data-index=\"${i}\">\n <slot name=\"icon\" data-state=\"${state}\">${this._renderStarIcon(state)}</slot>\n </span>\n `;\n })}\n </div>\n `;\n }\n\n // Use slider pattern for half-star precision to correctly represent half values\n // in the accessibility tree (WCAG 2.5.3, axe: label-content-name-mismatch)\n if (this.precision === 0.5) {\n return html`\n <div\n part=\"base\"\n class=\"base${this.disabled ? ' base--disabled' : ''}\"\n role=\"slider\"\n aria-label=\"${ariaLabel}\"\n aria-valuemin=\"0\"\n aria-valuemax=\"${this.max}\"\n aria-valuenow=\"${this.value}\"\n aria-valuetext=\"${this._ariaValueText()}\"\n aria-disabled=\"${this.disabled ? 'true' : nothing}\"\n tabindex=\"${this.disabled ? '-1' : '0'}\"\n @keydown=\"${this._handleKeydown}\"\n @mouseleave=\"${this._handleMouseLeave}\"\n >\n ${Array.from({ length: this.max }, (_, idx) => {\n const i = idx + 1;\n const state = this._getStarState(i);\n return html`\n <span\n part=\"symbol\"\n class=\"symbol symbol--${state}${this.disabled ? ' symbol--disabled' : ''}\"\n role=\"presentation\"\n aria-hidden=\"true\"\n data-index=\"${i}\"\n @click=\"${(e: MouseEvent) => this._handleSymbolClick(e, i)}\"\n @mouseenter=\"${(e: MouseEvent) => this._handleSymbolMouseEnter(e, i)}\"\n @mousemove=\"${(e: MouseEvent) => this._handleSymbolMouseMove(e, i)}\"\n >\n <slot name=\"icon\" data-state=\"${state}\">${this._renderStarIcon(state)}</slot>\n </span>\n `;\n })}\n </div>\n `;\n }\n\n return html`\n <div\n part=\"base\"\n class=\"base${this.disabled ? ' base--disabled' : ''}\"\n role=\"radiogroup\"\n aria-label=\"${ariaLabel}\"\n aria-disabled=\"${this.disabled ? 'true' : nothing}\"\n tabindex=\"-1\"\n @keydown=\"${this._handleKeydown}\"\n @mouseleave=\"${this._handleMouseLeave}\"\n >\n ${Array.from({ length: this.max }, (_, idx) => {\n const i = idx + 1;\n const state = this._getStarState(i);\n const checked = this._isChecked(i);\n const starLabel = this.labelStar(i);\n const isActiveTabStop = this.value > 0 ? Math.ceil(this.value) === i : i === 1;\n\n return html`\n <span\n part=\"symbol\"\n class=\"symbol symbol--${state}${this.disabled ? ' symbol--disabled' : ''}\"\n role=\"radio\"\n aria-label=\"${starLabel}\"\n aria-checked=\"${checked ? 'true' : 'false'}\"\n tabindex=\"${!this.disabled && isActiveTabStop ? '0' : '-1'}\"\n data-index=\"${i}\"\n @click=\"${(e: MouseEvent) => this._handleSymbolClick(e, i)}\"\n @mouseenter=\"${(e: MouseEvent) => this._handleSymbolMouseEnter(e, i)}\"\n @mousemove=\"${(e: MouseEvent) => this._handleSymbolMouseMove(e, i)}\"\n >\n <slot name=\"icon\" data-state=\"${state}\">${this._renderStarIcon(state)}</slot>\n </span>\n `;\n })}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-rating': HelixRating;\n }\n}\n"],"names":["helixRatingStyles","css","HelixRating","LitElement","count","value","max","changedProps","state","_mode","parsed","disabled","_a","v","clamped","snapped","i","dv","rect","next","_b","val","html","ariaLabel","_","idx","nothing","e","checked","starLabel","isActiveTabStop","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}
|