@helixui/library 3.1.0 → 3.2.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 +6597 -366
- package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
- package/dist/components/hx-accordion/hx-accordion.d.ts +3 -0
- package/dist/components/hx-accordion/hx-accordion.d.ts.map +1 -1
- package/dist/components/hx-accordion/index.js +1 -1
- package/dist/components/hx-action-bar/hx-action-bar.d.ts +14 -0
- package/dist/components/hx-action-bar/hx-action-bar.d.ts.map +1 -1
- package/dist/components/hx-action-bar/index.js +1 -1
- package/dist/components/hx-alert/hx-alert.d.ts +36 -0
- package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
- package/dist/components/hx-alert/hx-alert.styles.d.ts +12 -0
- package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
- package/dist/components/hx-alert/index.js +1 -1
- package/dist/components/hx-avatar/hx-avatar.d.ts +17 -0
- package/dist/components/hx-avatar/hx-avatar.d.ts.map +1 -1
- package/dist/components/hx-avatar/index.js +1 -1
- package/dist/components/hx-badge/hx-badge.d.ts +35 -0
- package/dist/components/hx-badge/hx-badge.d.ts.map +1 -1
- package/dist/components/hx-badge/index.js +1 -1
- package/dist/components/hx-banner/hx-banner.d.ts +34 -0
- package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
- package/dist/components/hx-banner/hx-banner.styles.d.ts +12 -0
- package/dist/components/hx-banner/hx-banner.styles.d.ts.map +1 -1
- package/dist/components/hx-banner/index.js +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb-item.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts +3 -0
- package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/index.js +1 -1
- package/dist/components/hx-button/hx-button.d.ts +42 -0
- package/dist/components/hx-button/hx-button.d.ts.map +1 -1
- package/dist/components/hx-button/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 +2 -0
- package/dist/components/hx-button-group/hx-button-group.d.ts.map +1 -1
- package/dist/components/hx-button-group/hx-button-group.styles.d.ts.map +1 -1
- package/dist/components/hx-button-group/index.js +1 -1
- package/dist/components/hx-card/hx-card.d.ts +28 -0
- package/dist/components/hx-card/hx-card.d.ts.map +1 -1
- package/dist/components/hx-card/hx-card.styles.d.ts +9 -0
- package/dist/components/hx-card/hx-card.styles.d.ts.map +1 -1
- package/dist/components/hx-card/index.js +1 -1
- package/dist/components/hx-carousel/hx-carousel.d.ts +25 -0
- package/dist/components/hx-carousel/hx-carousel.d.ts.map +1 -1
- package/dist/components/hx-carousel/hx-carousel.styles.d.ts.map +1 -1
- package/dist/components/hx-carousel/index.js +1 -1
- package/dist/components/hx-checkbox/hx-checkbox.d.ts +38 -7
- package/dist/components/hx-checkbox/hx-checkbox.d.ts.map +1 -1
- package/dist/components/hx-checkbox/index.js +1 -1
- package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts +16 -2
- package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts.map +1 -1
- package/dist/components/hx-checkbox-group/index.js +1 -1
- package/dist/components/hx-clinical-status/hx-clinical-status.d.ts +37 -0
- package/dist/components/hx-clinical-status/hx-clinical-status.d.ts.map +1 -1
- package/dist/components/hx-clinical-status/index.js +1 -1
- package/dist/components/hx-code-snippet/hx-code-snippet.d.ts +35 -0
- package/dist/components/hx-code-snippet/hx-code-snippet.d.ts.map +1 -1
- package/dist/components/hx-code-snippet/hx-code-snippet.styles.d.ts.map +1 -1
- package/dist/components/hx-code-snippet/index.js +1 -1
- package/dist/components/hx-color-picker/hx-color-picker.d.ts +29 -0
- package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
- package/dist/components/hx-color-picker/hx-color-picker.styles.d.ts.map +1 -1
- package/dist/components/hx-color-picker/index.js +1 -1
- package/dist/components/hx-combobox/hx-combobox.d.ts +49 -0
- package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
- package/dist/components/hx-combobox/index.js +1 -1
- package/dist/components/hx-container/hx-container.d.ts +5 -0
- package/dist/components/hx-container/hx-container.d.ts.map +1 -1
- package/dist/components/hx-copy-button/hx-copy-button.d.ts +24 -0
- package/dist/components/hx-copy-button/hx-copy-button.d.ts.map +1 -1
- package/dist/components/hx-copy-button/hx-copy-button.styles.d.ts.map +1 -1
- package/dist/components/hx-copy-button/index.js +1 -1
- package/dist/components/hx-counter/hx-counter.d.ts +7 -0
- package/dist/components/hx-counter/hx-counter.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 +29 -0
- package/dist/components/hx-data-table/hx-data-table.d.ts.map +1 -1
- package/dist/components/hx-data-table/hx-data-table.styles.d.ts.map +1 -1
- package/dist/components/hx-data-table/index.js +1 -1
- package/dist/components/hx-date-picker/hx-date-picker.d.ts +44 -0
- package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
- package/dist/components/hx-date-picker/index.js +1 -1
- package/dist/components/hx-dialog/hx-dialog.d.ts +31 -0
- package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
- package/dist/components/hx-dialog/hx-dialog.styles.d.ts +10 -0
- package/dist/components/hx-dialog/hx-dialog.styles.d.ts.map +1 -1
- package/dist/components/hx-dialog/index.js +1 -1
- package/dist/components/hx-divider/hx-divider.d.ts +9 -0
- package/dist/components/hx-divider/hx-divider.d.ts.map +1 -1
- package/dist/components/hx-divider/index.js +1 -1
- package/dist/components/hx-drawer/hx-drawer.d.ts +30 -0
- package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
- package/dist/components/hx-drawer/hx-drawer.styles.d.ts +10 -0
- package/dist/components/hx-drawer/hx-drawer.styles.d.ts.map +1 -1
- package/dist/components/hx-drawer/index.js +1 -1
- package/dist/components/hx-dropdown/hx-dropdown.d.ts +6 -0
- package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
- package/dist/components/hx-dropdown/index.js +1 -1
- package/dist/components/hx-field/hx-field.d.ts +15 -0
- package/dist/components/hx-field/hx-field.d.ts.map +1 -1
- package/dist/components/hx-field/index.js +1 -1
- package/dist/components/hx-field-label/hx-field-label.d.ts +11 -0
- package/dist/components/hx-field-label/hx-field-label.d.ts.map +1 -1
- package/dist/components/hx-field-label/index.js +1 -1
- package/dist/components/hx-file-upload/hx-file-upload.d.ts +35 -0
- package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
- package/dist/components/hx-file-upload/index.js +1 -1
- package/dist/components/hx-form/index.js +1 -1
- package/dist/components/hx-grid/hx-grid.d.ts +5 -0
- package/dist/components/hx-grid/hx-grid.d.ts.map +1 -1
- package/dist/components/hx-help-text/hx-help-text.d.ts +8 -0
- package/dist/components/hx-help-text/hx-help-text.d.ts.map +1 -1
- package/dist/components/hx-help-text/index.js +1 -1
- package/dist/components/hx-icon/hx-icon.d.ts +5 -0
- package/dist/components/hx-icon/hx-icon.d.ts.map +1 -1
- package/dist/components/hx-icon/index.js +1 -1
- package/dist/components/hx-icon-button/hx-icon-button.d.ts +27 -0
- package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
- package/dist/components/hx-icon-button/hx-icon-button.styles.d.ts.map +1 -1
- package/dist/components/hx-icon-button/index.js +1 -1
- package/dist/components/hx-image/hx-image.d.ts +4 -0
- 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 +15 -0
- package/dist/components/hx-link/hx-link.d.ts.map +1 -1
- package/dist/components/hx-link/index.js +1 -1
- package/dist/components/hx-list/hx-list-item.d.ts.map +1 -1
- package/dist/components/hx-list/hx-list.d.ts +3 -0
- package/dist/components/hx-list/hx-list.d.ts.map +1 -1
- package/dist/components/hx-list/index.js +1 -1
- package/dist/components/hx-menu/hx-menu-divider.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu-item.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu-item.styles.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu.d.ts +6 -0
- package/dist/components/hx-menu/hx-menu.d.ts.map +1 -1
- package/dist/components/hx-menu/index.js +1 -1
- package/dist/components/hx-meter/hx-meter.d.ts +23 -0
- package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
- package/dist/components/hx-meter/hx-meter.styles.d.ts.map +1 -1
- package/dist/components/hx-meter/index.js +1 -1
- package/dist/components/hx-nav/hx-nav.d.ts +29 -0
- package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
- package/dist/components/hx-nav/hx-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-nav/index.js +1 -1
- package/dist/components/hx-number-input/hx-number-input.d.ts +34 -0
- package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
- package/dist/components/hx-number-input/index.js +1 -1
- package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts +26 -0
- package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts.map +1 -1
- package/dist/components/hx-overflow-menu/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 +21 -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 +23 -0
- package/dist/components/hx-patient-banner/hx-patient-banner.d.ts.map +1 -1
- package/dist/components/hx-patient-banner/hx-patient-banner.styles.d.ts.map +1 -1
- package/dist/components/hx-patient-banner/index.js +1 -1
- package/dist/components/hx-phi-field/hx-phi-field.d.ts +19 -5
- package/dist/components/hx-phi-field/hx-phi-field.d.ts.map +1 -1
- package/dist/components/hx-phi-field/index.js +1 -1
- package/dist/components/hx-popover/hx-popover.d.ts +15 -0
- package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
- package/dist/components/hx-popover/hx-popover.styles.d.ts +9 -0
- package/dist/components/hx-popover/hx-popover.styles.d.ts.map +1 -1
- package/dist/components/hx-popover/index.js +1 -1
- package/dist/components/hx-popup/hx-popup.d.ts +1 -0
- package/dist/components/hx-popup/hx-popup.d.ts.map +1 -1
- package/dist/components/hx-popup/hx-popup.styles.d.ts +9 -0
- package/dist/components/hx-popup/hx-popup.styles.d.ts.map +1 -1
- package/dist/components/hx-popup/index.js +1 -1
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts +17 -0
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
- package/dist/components/hx-progress-bar/index.js +1 -1
- package/dist/components/hx-progress-ring/hx-progress-ring.d.ts +15 -0
- package/dist/components/hx-progress-ring/hx-progress-ring.d.ts.map +1 -1
- package/dist/components/hx-progress-ring/index.js +1 -1
- package/dist/components/hx-prose/hx-prose.d.ts +2 -0
- package/dist/components/hx-prose/hx-prose.d.ts.map +1 -1
- package/dist/components/hx-prose/index.js +1 -1
- package/dist/components/hx-radio-group/hx-radio-group.d.ts +17 -3
- package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
- package/dist/components/hx-radio-group/hx-radio.d.ts +5 -5
- package/dist/components/hx-radio-group/hx-radio.d.ts.map +1 -1
- package/dist/components/hx-radio-group/index.js +1 -1
- package/dist/components/hx-rating/hx-rating.d.ts +13 -0
- package/dist/components/hx-rating/hx-rating.d.ts.map +1 -1
- package/dist/components/hx-rating/index.js +1 -1
- package/dist/components/hx-select/hx-select.d.ts +43 -0
- package/dist/components/hx-select/hx-select.d.ts.map +1 -1
- package/dist/components/hx-select/hx-select.styles.d.ts.map +1 -1
- package/dist/components/hx-select/index.js +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.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 +19 -0
- package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/index.js +1 -1
- package/dist/components/hx-skeleton/hx-skeleton.d.ts +5 -0
- package/dist/components/hx-skeleton/hx-skeleton.d.ts.map +1 -1
- package/dist/components/hx-skeleton/index.js +1 -1
- package/dist/components/hx-slider/hx-slider.d.ts +38 -0
- package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
- package/dist/components/hx-slider/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 +10 -0
- package/dist/components/hx-spinner/hx-spinner.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 +39 -0
- package/dist/components/hx-split-button/hx-split-button.d.ts.map +1 -1
- package/dist/components/hx-split-button/hx-split-button.styles.d.ts.map +1 -1
- package/dist/components/hx-split-button/index.js +1 -1
- package/dist/components/hx-split-panel/hx-split-panel.d.ts +12 -0
- package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
- package/dist/components/hx-split-panel/hx-split-panel.styles.d.ts.map +1 -1
- package/dist/components/hx-split-panel/index.js +1 -1
- package/dist/components/hx-stack/hx-stack.d.ts +5 -0
- package/dist/components/hx-stack/hx-stack.d.ts.map +1 -1
- package/dist/components/hx-stat/hx-stat.d.ts +24 -0
- package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
- package/dist/components/hx-stat/index.js +1 -1
- package/dist/components/hx-status-indicator/hx-status-indicator.d.ts +13 -0
- package/dist/components/hx-status-indicator/hx-status-indicator.d.ts.map +1 -1
- package/dist/components/hx-status-indicator/index.js +1 -1
- package/dist/components/hx-steps/hx-step.d.ts.map +1 -1
- package/dist/components/hx-steps/hx-step.styles.d.ts.map +1 -1
- package/dist/components/hx-steps/hx-steps.d.ts +15 -0
- 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 +7 -0
- 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-switch/hx-switch.d.ts +42 -0
- package/dist/components/hx-switch/hx-switch.d.ts.map +1 -1
- package/dist/components/hx-switch/hx-switch.styles.d.ts.map +1 -1
- package/dist/components/hx-switch/index.js +1 -1
- package/dist/components/hx-table/hx-table.d.ts +20 -6
- package/dist/components/hx-table/hx-table.d.ts.map +1 -1
- package/dist/components/hx-table/hx-td.d.ts +1 -1
- package/dist/components/hx-table/index.js +1 -1
- package/dist/components/hx-tabs/hx-tab-panel.d.ts +2 -2
- package/dist/components/hx-tabs/hx-tab-panel.d.ts.map +1 -1
- package/dist/components/hx-tabs/hx-tab.d.ts +6 -6
- package/dist/components/hx-tabs/hx-tab.d.ts.map +1 -1
- package/dist/components/hx-tabs/hx-tabs.d.ts +12 -8
- package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
- package/dist/components/hx-tabs/index.js +1 -1
- package/dist/components/hx-tag/hx-tag.d.ts +36 -0
- package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
- package/dist/components/hx-tag/index.js +1 -1
- package/dist/components/hx-text/hx-text.d.ts +22 -0
- package/dist/components/hx-text/hx-text.d.ts.map +1 -1
- package/dist/components/hx-text/hx-text.styles.d.ts.map +1 -1
- package/dist/components/hx-text/index.js +1 -1
- package/dist/components/hx-text-input/hx-text-input.d.ts +30 -0
- package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
- package/dist/components/hx-text-input/hx-text-input.styles.d.ts +12 -0
- 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 +27 -0
- 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 +3 -0
- package/dist/components/hx-theme/hx-theme.d.ts.map +1 -1
- package/dist/components/hx-theme/index.js +1 -1
- package/dist/components/hx-time-picker/hx-time-picker.d.ts +32 -0
- package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
- package/dist/components/hx-time-picker/hx-time-picker.styles.d.ts.map +1 -1
- package/dist/components/hx-time-picker/index.js +1 -1
- package/dist/components/hx-toast/hx-toast.d.ts +24 -0
- package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
- package/dist/components/hx-toast/hx-toast.styles.d.ts +10 -0
- package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
- package/dist/components/hx-toast/index.js +1 -1
- package/dist/components/hx-toggle-button/hx-toggle-button.d.ts +35 -0
- package/dist/components/hx-toggle-button/hx-toggle-button.d.ts.map +1 -1
- package/dist/components/hx-toggle-button/hx-toggle-button.styles.d.ts.map +1 -1
- package/dist/components/hx-toggle-button/index.js +1 -1
- package/dist/components/hx-tooltip/hx-tooltip.d.ts +13 -0
- package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
- package/dist/components/hx-tooltip/hx-tooltip.styles.d.ts +8 -0
- package/dist/components/hx-tooltip/hx-tooltip.styles.d.ts.map +1 -1
- package/dist/components/hx-tooltip/index.js +1 -1
- package/dist/components/hx-top-nav/hx-top-nav.d.ts +21 -0
- package/dist/components/hx-top-nav/hx-top-nav.d.ts.map +1 -1
- package/dist/components/hx-top-nav/hx-top-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-top-nav/index.js +1 -1
- package/dist/components/hx-tree-view/hx-tree-item.d.ts.map +1 -1
- package/dist/components/hx-tree-view/hx-tree-item.styles.d.ts.map +1 -1
- package/dist/components/hx-tree-view/hx-tree-view.d.ts +6 -0
- package/dist/components/hx-tree-view/hx-tree-view.d.ts.map +1 -1
- package/dist/components/hx-tree-view/index.js +1 -1
- package/dist/css/helix-all.css +1173 -828
- package/dist/css/helix-core.css +215 -154
- package/dist/css/helix-data.css +58 -45
- package/dist/css/helix-feedback.css +119 -92
- package/dist/css/helix-forms.css +502 -332
- package/dist/css/helix-layout.css +9 -6
- package/dist/css/helix-media.css +13 -9
- package/dist/css/helix-navigation.css +86 -59
- package/dist/css/helix-overlay.css +65 -50
- package/dist/css/helix-tokens.css +113 -101
- package/dist/css/helix-utility.css +57 -40
- package/dist/css/hx-action-bar.css +5 -5
- package/dist/css/hx-alert.css +27 -23
- package/dist/css/hx-avatar.css +3 -3
- package/dist/css/hx-badge.css +22 -22
- package/dist/css/hx-banner.css +31 -24
- package/dist/css/hx-button-group.css +31 -14
- package/dist/css/hx-button.css +38 -21
- package/dist/css/hx-card.css +26 -12
- package/dist/css/hx-carousel.css +13 -9
- package/dist/css/hx-checkbox-group.css +5 -5
- package/dist/css/hx-checkbox.css +19 -19
- package/dist/css/hx-clinical-status.css +28 -28
- package/dist/css/hx-code-snippet.css +24 -18
- package/dist/css/hx-color-picker.css +30 -13
- package/dist/css/hx-combobox.css +28 -28
- package/dist/css/hx-copy-button.css +6 -3
- package/dist/css/hx-counter.css +1 -1
- package/dist/css/hx-data-table.css +22 -15
- package/dist/css/hx-date-picker.css +34 -34
- package/dist/css/hx-dialog.css +31 -24
- package/dist/css/hx-divider.css +2 -2
- package/dist/css/hx-drawer.css +18 -15
- package/dist/css/hx-dropdown.css +2 -2
- package/dist/css/hx-field-label.css +3 -3
- package/dist/css/hx-field.css +6 -6
- package/dist/css/hx-file-upload.css +18 -18
- package/dist/css/hx-help-text.css +5 -5
- package/dist/css/hx-icon-button.css +49 -38
- package/dist/css/hx-image.css +3 -3
- package/dist/css/hx-link.css +9 -9
- package/dist/css/hx-list.css +1 -1
- package/dist/css/hx-menu.css +2 -2
- package/dist/css/hx-meter.css +11 -10
- package/dist/css/hx-nav.css +17 -11
- package/dist/css/hx-number-input.css +18 -18
- package/dist/css/hx-overflow-menu.css +18 -9
- package/dist/css/hx-pagination.css +21 -15
- package/dist/css/hx-patient-banner.css +17 -9
- package/dist/css/hx-phi-field.css +4 -4
- package/dist/css/hx-popover.css +10 -6
- package/dist/css/hx-progress-bar.css +7 -7
- package/dist/css/hx-progress-ring.css +6 -6
- package/dist/css/hx-radio-group.css +5 -5
- package/dist/css/hx-rating.css +5 -5
- package/dist/css/hx-select.css +17 -14
- package/dist/css/hx-side-nav.css +13 -10
- package/dist/css/hx-skeleton.css +1 -1
- package/dist/css/hx-slider.css +15 -12
- package/dist/css/hx-spinner.css +4 -4
- package/dist/css/hx-split-button.css +45 -31
- package/dist/css/hx-split-panel.css +9 -6
- package/dist/css/hx-stat.css +8 -8
- package/dist/css/hx-status-indicator.css +7 -7
- package/dist/css/hx-structured-list.css +5 -5
- package/dist/css/hx-switch.css +16 -8
- package/dist/css/hx-table.css +6 -6
- package/dist/css/hx-tabs.css +3 -3
- package/dist/css/hx-tag.css +18 -18
- package/dist/css/hx-text-input.css +139 -61
- package/dist/css/hx-text.css +9 -7
- package/dist/css/hx-textarea.css +66 -27
- package/dist/css/hx-time-picker.css +27 -21
- package/dist/css/hx-toast.css +22 -7
- package/dist/css/hx-toggle-button.css +46 -30
- package/dist/css/hx-tooltip.css +4 -3
- package/dist/css/hx-top-nav.css +11 -8
- package/dist/css/hx-tree-view.css +1 -1
- package/dist/css/index.css +1 -1
- package/dist/css/manifest.json +280 -194
- package/dist/index.js +75 -75
- package/dist/shared/forced-colors-CTEDFRGa.js +117 -0
- package/dist/shared/forced-colors-CTEDFRGa.js.map +1 -0
- package/dist/shared/{hx-accordion-Wt52OOZD.js → hx-accordion-cnKg4_la.js} +31 -30
- package/dist/shared/hx-accordion-cnKg4_la.js.map +1 -0
- package/dist/shared/{hx-action-bar-BKMADbHj.js → hx-action-bar-CitgcpGv.js} +38 -37
- package/dist/shared/hx-action-bar-CitgcpGv.js.map +1 -0
- package/dist/shared/{hx-alert-D7n94HwI.js → hx-alert-BZH8iHQf.js} +36 -31
- package/dist/shared/hx-alert-BZH8iHQf.js.map +1 -0
- package/dist/shared/{hx-avatar-iLYzu8MJ.js → hx-avatar-C9hOmlAb.js} +19 -18
- package/dist/shared/hx-avatar-C9hOmlAb.js.map +1 -0
- package/dist/shared/{hx-badge-CVCmMPyW.js → hx-badge-CQXgOXJM.js} +65 -64
- package/dist/shared/hx-badge-CQXgOXJM.js.map +1 -0
- package/dist/shared/{hx-banner-C_He7Tr4.js → hx-banner-DT7Zn9Bo.js} +43 -35
- package/dist/shared/hx-banner-DT7Zn9Bo.js.map +1 -0
- package/dist/shared/{hx-breadcrumb-item-CldCwD1d.js → hx-breadcrumb-item-COeYcB2x.js} +24 -23
- package/dist/shared/hx-breadcrumb-item-COeYcB2x.js.map +1 -0
- package/dist/shared/{hx-button-group-BJOGWoMa.js → hx-button-group-BI-QBqmO.js} +45 -27
- package/dist/shared/hx-button-group-BI-QBqmO.js.map +1 -0
- package/dist/shared/{hx-button-Ddl-T6T-.js → hx-button-modUSOpY.js} +50 -32
- package/dist/shared/hx-button-modUSOpY.js.map +1 -0
- package/dist/shared/{hx-card-ycveujjL.js → hx-card-CU1QnjNb.js} +54 -39
- package/dist/shared/hx-card-CU1QnjNb.js.map +1 -0
- package/dist/shared/{hx-carousel-item-D_dCv61-.js → hx-carousel-item-BaE4hpLl.js} +38 -33
- package/dist/shared/hx-carousel-item-BaE4hpLl.js.map +1 -0
- package/dist/shared/{hx-checkbox-DkkoWoye.js → hx-checkbox-C46TyXhM.js} +42 -41
- package/dist/shared/hx-checkbox-C46TyXhM.js.map +1 -0
- package/dist/shared/{hx-checkbox-group-C3poJ-Zw.js → hx-checkbox-group-C9n315Ju.js} +20 -19
- package/dist/shared/hx-checkbox-group-C9n315Ju.js.map +1 -0
- package/dist/shared/{hx-clinical-status-BS5lcddT.js → hx-clinical-status-BmSjfSEN.js} +55 -54
- package/dist/shared/hx-clinical-status-BmSjfSEN.js.map +1 -0
- package/dist/shared/{hx-code-snippet-B7wUKzyb.js → hx-code-snippet-CJ0FbQYG.js} +39 -32
- package/dist/shared/hx-code-snippet-CJ0FbQYG.js.map +1 -0
- package/dist/shared/{hx-color-picker-DBaKTVLr.js → hx-color-picker-DiDLZyvK.js} +74 -56
- package/dist/shared/hx-color-picker-DiDLZyvK.js.map +1 -0
- package/dist/shared/{hx-combobox-BmgYT7Ar.js → hx-combobox-DaA5dBC4.js} +43 -42
- package/dist/shared/hx-combobox-DaA5dBC4.js.map +1 -0
- package/dist/shared/hx-container-DVI7sxfX.js.map +1 -1
- package/dist/shared/{hx-copy-button-8deNUdwP.js → hx-copy-button-sUVuikyH.js} +23 -19
- package/dist/shared/hx-copy-button-sUVuikyH.js.map +1 -0
- package/dist/shared/{hx-counter-CKfl_g8K.js → hx-counter-0zYapFhf.js} +10 -9
- package/dist/shared/hx-counter-0zYapFhf.js.map +1 -0
- package/dist/shared/{hx-data-table-B6h0RPn0.js → hx-data-table-Cq3t86Ic.js} +55 -47
- package/dist/shared/hx-data-table-Cq3t86Ic.js.map +1 -0
- package/dist/shared/{hx-date-picker-Dq2Nb68_.js → hx-date-picker-DMqRQNSB.js} +45 -44
- package/dist/shared/hx-date-picker-DMqRQNSB.js.map +1 -0
- package/dist/shared/{hx-dialog-CvIlY0Tc.js → hx-dialog-eIS8tcDm.js} +68 -60
- package/dist/shared/hx-dialog-eIS8tcDm.js.map +1 -0
- package/dist/shared/{hx-divider-DwpOrzMW.js → hx-divider-CYfcUjcr.js} +18 -17
- package/dist/shared/hx-divider-CYfcUjcr.js.map +1 -0
- package/dist/shared/{hx-drawer-Cx2ZJhBe.js → hx-drawer-DDhDz7RI.js} +31 -27
- package/dist/shared/hx-drawer-DDhDz7RI.js.map +1 -0
- package/dist/shared/{hx-dropdown-BjDrPUq5.js → hx-dropdown-LyaRc8Rf.js} +16 -15
- package/dist/shared/hx-dropdown-LyaRc8Rf.js.map +1 -0
- package/dist/shared/{hx-field-Dp3qQMut.js → hx-field-B3Qo8OLS.js} +15 -15
- package/dist/shared/hx-field-B3Qo8OLS.js.map +1 -0
- package/dist/shared/{hx-field-label-BC8QViXv.js → hx-field-label-BVRyyKeh.js} +8 -7
- package/dist/shared/hx-field-label-BVRyyKeh.js.map +1 -0
- package/dist/shared/{hx-file-upload-B6Yl1u0i.js → hx-file-upload-zTDbjsRw.js} +42 -41
- package/dist/shared/hx-file-upload-zTDbjsRw.js.map +1 -0
- package/dist/shared/hx-form-CkChEATa.js +257 -0
- package/dist/shared/hx-form-CkChEATa.js.map +1 -0
- package/dist/shared/hx-grid-CXZf3jeK.js.map +1 -1
- package/dist/shared/{hx-help-text-D7eytSim.js → hx-help-text-Xb2Yr8x2.js} +30 -29
- package/dist/shared/hx-help-text-Xb2Yr8x2.js.map +1 -0
- package/dist/shared/{hx-icon-button-BHneqPCU.js → hx-icon-button-BmV97nqz.js} +81 -69
- package/dist/shared/hx-icon-button-BmV97nqz.js.map +1 -0
- package/dist/shared/{hx-icon-CcyDPDYY.js → hx-icon-fuVm4-bk.js} +15 -14
- package/dist/shared/hx-icon-fuVm4-bk.js.map +1 -0
- package/dist/shared/{hx-image-2gt14zZd.js → hx-image-Ben_4yM5.js} +18 -17
- package/dist/shared/hx-image-Ben_4yM5.js.map +1 -0
- package/dist/shared/{hx-link-BESrWK8M.js → hx-link-DmiV-mPw.js} +21 -20
- package/dist/shared/hx-link-DmiV-mPw.js.map +1 -0
- package/dist/shared/{hx-list-_9qVv02L.js → hx-list-CkphGi9T.js} +22 -21
- package/dist/shared/hx-list-CkphGi9T.js.map +1 -0
- package/dist/shared/{hx-menu-divider-Ck-9Os1t.js → hx-menu-divider-j__TZjH2.js} +53 -49
- package/dist/shared/hx-menu-divider-j__TZjH2.js.map +1 -0
- package/dist/shared/{hx-meter-TbROk-dw.js → hx-meter-Cm7k_Ro8.js} +42 -40
- package/dist/shared/hx-meter-Cm7k_Ro8.js.map +1 -0
- package/dist/shared/{hx-nav-BcYDmjf7.js → hx-nav-LoyEKZQC.js} +30 -23
- package/dist/shared/hx-nav-LoyEKZQC.js.map +1 -0
- package/dist/shared/{hx-nav-item-pqPasRUm.js → hx-nav-item-D8xHLVOs.js} +89 -77
- package/dist/shared/hx-nav-item-D8xHLVOs.js.map +1 -0
- package/dist/shared/{hx-number-input-mOIZ3-46.js → hx-number-input-yUzFOSC1.js} +68 -67
- package/dist/shared/hx-number-input-yUzFOSC1.js.map +1 -0
- package/dist/shared/{hx-overflow-menu-Dprb9lnT.js → hx-overflow-menu-BmKyAp5D.js} +33 -23
- package/dist/shared/hx-overflow-menu-BmKyAp5D.js.map +1 -0
- package/dist/shared/{hx-pagination-AguTQjYC.js → hx-pagination-Dqw5dorC.js} +72 -65
- package/dist/shared/hx-pagination-Dqw5dorC.js.map +1 -0
- package/dist/shared/{hx-patient-banner-uE6gqLpT.js → hx-patient-banner-CkS-Lmj4.js} +29 -20
- package/dist/shared/hx-patient-banner-CkS-Lmj4.js.map +1 -0
- package/dist/shared/{hx-phi-field-BC_XowhC.js → hx-phi-field-Bf9TdtC1.js} +13 -12
- package/dist/shared/hx-phi-field-Bf9TdtC1.js.map +1 -0
- package/dist/shared/{hx-popover-B2_203ct.js → hx-popover-B93rTAfr.js} +29 -24
- package/dist/shared/hx-popover-B93rTAfr.js.map +1 -0
- package/dist/shared/{hx-popup-DZXpsJ1R.js → hx-popup-COUXXZ9X.js} +8 -7
- package/dist/shared/hx-popup-COUXXZ9X.js.map +1 -0
- package/dist/shared/{hx-progress-bar-KjEkEJLy.js → hx-progress-bar-Bn3JEPUf.js} +28 -27
- package/dist/shared/hx-progress-bar-Bn3JEPUf.js.map +1 -0
- package/dist/shared/{hx-progress-ring-3zMwvrwD.js → hx-progress-ring-TwHyXeEp.js} +15 -14
- package/dist/shared/hx-progress-ring-TwHyXeEp.js.map +1 -0
- package/dist/shared/{hx-prose-BCtK7YL6.js → hx-prose-BThYcASV.js} +12 -12
- package/dist/shared/{hx-prose-BCtK7YL6.js.map → hx-prose-BThYcASV.js.map} +1 -1
- package/dist/shared/{hx-radio-BBC5qZgE.js → hx-radio-N8xgDd_5.js} +38 -37
- package/dist/shared/hx-radio-N8xgDd_5.js.map +1 -0
- package/dist/shared/{hx-rating-C3E3ENJb.js → hx-rating-i2FL1WUN.js} +38 -37
- package/dist/shared/hx-rating-i2FL1WUN.js.map +1 -0
- package/dist/shared/{hx-select-CixTo7jp.js → hx-select-vgaBo1Ai.js} +63 -59
- package/dist/shared/hx-select-vgaBo1Ai.js.map +1 -0
- package/dist/shared/{hx-skeleton-LxkI0pxr.js → hx-skeleton-Cnieh5Uc.js} +14 -13
- package/dist/shared/hx-skeleton-Cnieh5Uc.js.map +1 -0
- package/dist/shared/{hx-slider-DFHuzF3N.js → hx-slider-ydBamYhd.js} +83 -79
- package/dist/shared/hx-slider-ydBamYhd.js.map +1 -0
- package/dist/shared/{hx-spinner-BKjuCdZB.js → hx-spinner-DL5AYr16.js} +18 -17
- package/dist/shared/hx-spinner-DL5AYr16.js.map +1 -0
- package/dist/shared/{hx-split-button-CGcJMmCG.js → hx-split-button-BeMsmS6N.js} +74 -59
- package/dist/shared/hx-split-button-BeMsmS6N.js.map +1 -0
- package/dist/shared/{hx-split-panel-C-1R10Mc.js → hx-split-panel-BVG1VWNT.js} +16 -12
- package/dist/shared/hx-split-panel-BVG1VWNT.js.map +1 -0
- package/dist/shared/hx-stack-DGfcOfWJ.js.map +1 -1
- package/dist/shared/{hx-stat-BTpykQAt.js → hx-stat-WOcNV1Ry.js} +16 -15
- package/dist/shared/hx-stat-WOcNV1Ry.js.map +1 -0
- package/dist/shared/{hx-status-indicator-X2QEWNFt.js → hx-status-indicator-BlQyen43.js} +17 -16
- package/dist/shared/hx-status-indicator-BlQyen43.js.map +1 -0
- package/dist/shared/{hx-step-CRNQlmSo.js → hx-step-DL3PbOzm.js} +63 -50
- package/dist/shared/hx-step-DL3PbOzm.js.map +1 -0
- package/dist/shared/{hx-structured-list-CqNbaEXg.js → hx-structured-list-m_-dMJbC.js} +18 -17
- package/dist/shared/hx-structured-list-m_-dMJbC.js.map +1 -0
- package/dist/shared/{hx-switch-DqOD9JR7.js → hx-switch-Dougzsgp.js} +29 -20
- package/dist/shared/hx-switch-Dougzsgp.js.map +1 -0
- package/dist/shared/{hx-tab-panel-BIzKfW5i.js → hx-tab-panel-CbkO9VKu.js} +45 -44
- package/dist/shared/hx-tab-panel-CbkO9VKu.js.map +1 -0
- package/dist/shared/{hx-tag-CgnrNnte.js → hx-tag-CNSmdyaK.js} +63 -62
- package/dist/shared/hx-tag-CNSmdyaK.js.map +1 -0
- package/dist/shared/{hx-td-Bra35cH4.js → hx-td-1zwTFLRw.js} +62 -61
- package/dist/shared/hx-td-1zwTFLRw.js.map +1 -0
- package/dist/shared/{hx-text-DMC2CPlL.js → hx-text-Bz_9fJ3J.js} +28 -25
- package/dist/shared/hx-text-Bz_9fJ3J.js.map +1 -0
- package/dist/shared/{hx-text-input--q0GH78x.js → hx-text-input-B-caO5fI.js} +159 -80
- package/dist/shared/hx-text-input-B-caO5fI.js.map +1 -0
- package/dist/shared/{hx-textarea-CK621vSL.js → hx-textarea-D9O4U8cb.js} +110 -70
- package/dist/shared/hx-textarea-D9O4U8cb.js.map +1 -0
- package/dist/shared/{hx-theme-DfEy-SJA.js → hx-theme-BiyQ7UUK.js} +46 -35
- package/dist/shared/hx-theme-BiyQ7UUK.js.map +1 -0
- package/dist/shared/{hx-time-picker-tPUfgElQ.js → hx-time-picker-m0z4nFB-.js} +59 -52
- package/dist/shared/hx-time-picker-m0z4nFB-.js.map +1 -0
- package/dist/shared/{hx-toggle-button-L-uBJr-a.js → hx-toggle-button-Dd8clXB4.js} +75 -58
- package/dist/shared/hx-toggle-button-Dd8clXB4.js.map +1 -0
- package/dist/shared/{hx-tooltip-B_zfKvwc.js → hx-tooltip-nYOv9OLu.js} +18 -16
- package/dist/shared/hx-tooltip-nYOv9OLu.js.map +1 -0
- package/dist/shared/{hx-top-nav-CATbRvIv.js → hx-top-nav-CchPYaiV.js} +36 -32
- package/dist/shared/hx-top-nav-CchPYaiV.js.map +1 -0
- package/dist/shared/{hx-tree-item-A45WCiBu.js → hx-tree-item-DtMC3DTa.js} +35 -28
- package/dist/shared/hx-tree-item-DtMC3DTa.js.map +1 -0
- package/dist/shared/{toast-factory-BPPnG3mM.js → toast-factory-DvDRAh0l.js} +77 -61
- package/dist/shared/toast-factory-DvDRAh0l.js.map +1 -0
- package/dist/styles/forced-colors.d.ts +60 -0
- package/dist/styles/forced-colors.d.ts.map +1 -0
- package/figma-inventory.json +8606 -591
- package/package.json +2 -2
- package/dist/shared/hx-accordion-Wt52OOZD.js.map +0 -1
- package/dist/shared/hx-action-bar-BKMADbHj.js.map +0 -1
- package/dist/shared/hx-alert-D7n94HwI.js.map +0 -1
- package/dist/shared/hx-avatar-iLYzu8MJ.js.map +0 -1
- package/dist/shared/hx-badge-CVCmMPyW.js.map +0 -1
- package/dist/shared/hx-banner-C_He7Tr4.js.map +0 -1
- package/dist/shared/hx-breadcrumb-item-CldCwD1d.js.map +0 -1
- package/dist/shared/hx-button-Ddl-T6T-.js.map +0 -1
- package/dist/shared/hx-button-group-BJOGWoMa.js.map +0 -1
- package/dist/shared/hx-card-ycveujjL.js.map +0 -1
- package/dist/shared/hx-carousel-item-D_dCv61-.js.map +0 -1
- package/dist/shared/hx-checkbox-DkkoWoye.js.map +0 -1
- package/dist/shared/hx-checkbox-group-C3poJ-Zw.js.map +0 -1
- package/dist/shared/hx-clinical-status-BS5lcddT.js.map +0 -1
- package/dist/shared/hx-code-snippet-B7wUKzyb.js.map +0 -1
- package/dist/shared/hx-color-picker-DBaKTVLr.js.map +0 -1
- package/dist/shared/hx-combobox-BmgYT7Ar.js.map +0 -1
- package/dist/shared/hx-copy-button-8deNUdwP.js.map +0 -1
- package/dist/shared/hx-counter-CKfl_g8K.js.map +0 -1
- package/dist/shared/hx-data-table-B6h0RPn0.js.map +0 -1
- package/dist/shared/hx-date-picker-Dq2Nb68_.js.map +0 -1
- package/dist/shared/hx-dialog-CvIlY0Tc.js.map +0 -1
- package/dist/shared/hx-divider-DwpOrzMW.js.map +0 -1
- package/dist/shared/hx-drawer-Cx2ZJhBe.js.map +0 -1
- package/dist/shared/hx-dropdown-BjDrPUq5.js.map +0 -1
- package/dist/shared/hx-field-Dp3qQMut.js.map +0 -1
- package/dist/shared/hx-field-label-BC8QViXv.js.map +0 -1
- package/dist/shared/hx-file-upload-B6Yl1u0i.js.map +0 -1
- package/dist/shared/hx-form-ButQFt9A.js +0 -257
- package/dist/shared/hx-form-ButQFt9A.js.map +0 -1
- package/dist/shared/hx-help-text-D7eytSim.js.map +0 -1
- package/dist/shared/hx-icon-CcyDPDYY.js.map +0 -1
- package/dist/shared/hx-icon-button-BHneqPCU.js.map +0 -1
- package/dist/shared/hx-image-2gt14zZd.js.map +0 -1
- package/dist/shared/hx-link-BESrWK8M.js.map +0 -1
- package/dist/shared/hx-list-_9qVv02L.js.map +0 -1
- package/dist/shared/hx-menu-divider-Ck-9Os1t.js.map +0 -1
- package/dist/shared/hx-meter-TbROk-dw.js.map +0 -1
- package/dist/shared/hx-nav-BcYDmjf7.js.map +0 -1
- package/dist/shared/hx-nav-item-pqPasRUm.js.map +0 -1
- package/dist/shared/hx-number-input-mOIZ3-46.js.map +0 -1
- package/dist/shared/hx-overflow-menu-Dprb9lnT.js.map +0 -1
- package/dist/shared/hx-pagination-AguTQjYC.js.map +0 -1
- package/dist/shared/hx-patient-banner-uE6gqLpT.js.map +0 -1
- package/dist/shared/hx-phi-field-BC_XowhC.js.map +0 -1
- package/dist/shared/hx-popover-B2_203ct.js.map +0 -1
- package/dist/shared/hx-popup-DZXpsJ1R.js.map +0 -1
- package/dist/shared/hx-progress-bar-KjEkEJLy.js.map +0 -1
- package/dist/shared/hx-progress-ring-3zMwvrwD.js.map +0 -1
- package/dist/shared/hx-radio-BBC5qZgE.js.map +0 -1
- package/dist/shared/hx-rating-C3E3ENJb.js.map +0 -1
- package/dist/shared/hx-select-CixTo7jp.js.map +0 -1
- package/dist/shared/hx-skeleton-LxkI0pxr.js.map +0 -1
- package/dist/shared/hx-slider-DFHuzF3N.js.map +0 -1
- package/dist/shared/hx-spinner-BKjuCdZB.js.map +0 -1
- package/dist/shared/hx-split-button-CGcJMmCG.js.map +0 -1
- package/dist/shared/hx-split-panel-C-1R10Mc.js.map +0 -1
- package/dist/shared/hx-stat-BTpykQAt.js.map +0 -1
- package/dist/shared/hx-status-indicator-X2QEWNFt.js.map +0 -1
- package/dist/shared/hx-step-CRNQlmSo.js.map +0 -1
- package/dist/shared/hx-structured-list-CqNbaEXg.js.map +0 -1
- package/dist/shared/hx-switch-DqOD9JR7.js.map +0 -1
- package/dist/shared/hx-tab-panel-BIzKfW5i.js.map +0 -1
- package/dist/shared/hx-tag-CgnrNnte.js.map +0 -1
- package/dist/shared/hx-td-Bra35cH4.js.map +0 -1
- package/dist/shared/hx-text-DMC2CPlL.js.map +0 -1
- package/dist/shared/hx-text-input--q0GH78x.js.map +0 -1
- package/dist/shared/hx-textarea-CK621vSL.js.map +0 -1
- package/dist/shared/hx-theme-DfEy-SJA.js.map +0 -1
- package/dist/shared/hx-time-picker-tPUfgElQ.js.map +0 -1
- package/dist/shared/hx-toggle-button-L-uBJr-a.js.map +0 -1
- package/dist/shared/hx-tooltip-B_zfKvwc.js.map +0 -1
- package/dist/shared/hx-top-nav-CATbRvIv.js.map +0 -1
- package/dist/shared/hx-tree-item-A45WCiBu.js.map +0 -1
- package/dist/shared/toast-factory-BPPnG3mM.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-number-input-mOIZ3-46.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-inline-start: 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: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));\n height: var(--hx-number-input-icon-size, var(--hx-space-3, 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 /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .field__input-wrapper {\n forced-color-adjust: none;\n background-color: Field;\n color: FieldText;\n border: 2px solid ButtonText;\n }\n\n .field__input {\n color: FieldText;\n }\n\n .field__input::placeholder {\n color: GrayText;\n }\n\n .field__input-wrapper:focus-within {\n border-color: Highlight;\n box-shadow: none;\n }\n\n .field__stepper {\n border-color: ButtonText;\n }\n\n .field__stepper-btn {\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border-color: ButtonText;\n }\n\n .field__stepper-btn:hover:not(:disabled) {\n background-color: Highlight;\n color: HighlightText;\n }\n\n .field__stepper-btn:focus-visible {\n outline-color: Highlight;\n }\n\n .field__stepper-btn:disabled {\n color: GrayText;\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n :host([disabled]) .field__input-wrapper {\n border-color: GrayText;\n color: GrayText;\n }\n\n :host([disabled]) .field__input {\n color: GrayText;\n }\n\n .field--error .field__input-wrapper {\n border-color: LinkText;\n }\n\n .field__label {\n color: CanvasText;\n }\n\n .field__help-text {\n color: GrayText;\n }\n\n .field__error {\n color: LinkText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixNumberInputStyles } from './hx-number-input.styles.js';\n\nconst _nextNumberInputId = createIdCounter('hx-number-input');\n\n/** Detail for hx-input and hx-change events dispatched by hx-number-input. */\nexport interface HxNumberInputDetail {\n value: number | null;\n}\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 - 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 FormMixin(HelixElement) {\n static override styles = [helixNumberInputStyles];\n\n // ─── Form Association ───\n\n /** @internal */\n static override formAssociated = true;\n\n // ─── Properties ───\n\n /**\n * The name of the input, used for form submission.\n * @attr name\n */\n @property({ type: String, reflect: true })\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 reflect: true,\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 private _input: HTMLInputElement | undefined;\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 = _nextNumberInputId();\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 if (!this.label && !this._hasLabelSlot) {\n devWarn(\n 'hx-number-input',\n 'No accessible label provided. Set the `label` attribute or use the `label` slot so screen readers can identify this input (WCAG 4.1.2).',\n );\n }\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 (changedProperties.has('value')) {\n if (this.value !== null && isNaN(this.value)) {\n devWarn(\n 'hx-number-input',\n 'Received NaN as value. Resetting to null to prevent \"NaN\" from rendering in the input.',\n );\n this.value = null;\n return;\n }\n }\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 }\n // Force screen reader re-announcement when error text changes (a11y-v3-005)\n if (changedProperties.has('error') && this.error) {\n const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n if (errorEl) {\n const msg = this.error;\n requestAnimationFrame(() => {\n errorEl.textContent = '';\n requestAnimationFrame(() => {\n errorEl.textContent = msg;\n });\n });\n }\n }\n }\n\n // ─── Form Integration ───\n\n /** @internal */\n private _syncFormValue(): void {\n this._internals.setFormValue(this.value !== null ? String(this.value) : null);\n }\n\n /** @internal */\n override _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 /** @internal */\n protected override _onFormReset(): void {\n this.value = this._defaultValue;\n this._internals.setFormValue(this.value !== null ? String(this.value) : null);\n this._resetInteractionState();\n }\n\n /** @internal */\n protected override _onFormStateRestore(\n state: File | string | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n const parsed = Number(state);\n this.value = isNaN(parsed) ? null : parsed;\n }\n }\n\n /** @internal */\n protected override _onFormDisabled(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 this._handleInteractionInput();\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._handleInteractionInput();\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._handleInteractionBlur();\n this._syncFormValue();\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 @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\" 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","_nextNumberInputId","createIdCounter","HelixNumberInput","FormMixin","HelixElement","slot","slottedLabel","assigned","changedProperties","errorEl","_a","msg","step","base","remainder","epsilon","state","_mode","parsed","disabled","value","raw","v","result","min","max","delta","current","next","target","options","html","hasError","fieldClasses","describedBy","displayValue","classMap","nothing","live","ifDefined","e","__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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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-overflow-menu-Dprb9lnT.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.5);\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, #475569));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms 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, #f1f5f9);\n }\n\n .trigger--open {\n background-color: var(--hx-color-neutral-100, #f1f5f9);\n }\n\n /* ─── Size Variants ─── */\n\n .trigger--sm {\n width: var(--hx-size-8, 2rem);\n height: var(--hx-size-8, 2rem);\n min-width: var(--hx-size-touch-target, 2.75rem);\n min-height: var(--hx-size-touch-target, 2.75rem);\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 min-width: var(--hx-size-touch-target, 2.75rem);\n min-height: var(--hx-size-touch-target, 2.75rem);\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, #ffffff));\n border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e2e8f0));\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: start;\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-color-neutral-900, #0f172a);\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, #f8fafc);\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 /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .trigger {\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n\n .trigger:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .trigger[disabled] {\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n .panel {\n background-color: Canvas;\n border: 2px solid CanvasText;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixOverflowMenuStyles } from './hx-overflow-menu.styles.js';\n\nconst _nextOverflowMenuId = createIdCounter('hx-overflow-menu');\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 HelixElement {\n static override styles = [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 `label-menu`.\n * @attr label-menu\n */\n @property({ type: String, reflect: true, attribute: 'label-menu' })\n labelMenu = '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 = `${_nextOverflowMenuId()}-panel`;\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 { computePosition, flip, shift, offset } = await import('@floating-ui/dom');\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=${String(this._open)}\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.labelMenu}\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","_nextOverflowMenuId","createIdCounter","HelixOverflowMenu","HelixElement","_a","items","focused","next","_b","menuItem","value","trigger","panel","computePosition","flip","shift","offset","x","y","slot","el","html","btnClasses","classMap","nothing","__decorateClass","property","state","query","customElement"],"mappings":";;;;;AAEO,MAAMA,IAA0BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACMvC,MAAMC,IAAsBC,EAAgB,kBAAkB;AAsCvD,IAAMC,IAAN,cAAgCC,EAAa;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,YAYkB,cAOlB,KAAA,OAA2B,MAO3B,KAAA,WAAW,IAOX,KAAA,OAAkC,YAOlC,KAAA,QAAQ,gBAOR,KAAA,YAAY,WAMH,KAAQ,QAAQ,IAMzB,KAAiB,WAAW,GAAGH,EAAA,CAAqB,UAqGpD,KAAiB,sBAAsB,CAAC,MAAwB;AAC9D,QAAE,gBAAA,GACF,KAAK,QAAA;AAAA,IACP,GAGA,KAAiB,uBAAuB,CAAC,MAAwB;AAC/D,UAAI,CAAC,KAAK,MAAO;AAEjB,MADa,EAAE,aAAA,EACL,SAAS,IAAI,KACrB,KAAK,MAAA;AAAA,IAET,GAGA,KAAiB,iBAAiB,CAAC,MAA2B;;AAC5D,UAAK,KAAK,OACV;AAAA,YAAI,EAAE,QAAQ,UAAU;AACtB,YAAE,gBAAA,GACF,KAAK,MAAA,IACLI,IAAA,KAAK,cAAL,QAAAA,EAAgB;AAChB;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,OAAO;AACnB,eAAK,MAAA;AACL;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAAa,EAAE,QAAQ,UAAU,EAAE,QAAQ,OAAO;AACvF,YAAE,eAAA,GACF,EAAE,gBAAA;AACF,gBAAMC,IAAQ,KAAK,cAAA;AACnB,cAAIA,EAAM,WAAW,EAAG;AACxB,gBAAMC,IAAUD,EAAM,QAAQ,SAAS,aAA4B;AACnE,cAAIE;AACJ,UAAI,EAAE,QAAQ,cACZA,IAAOD,IAAU,KAAKA,KAAWD,EAAM,SAAS,IAAI,IAAIC,IAAU,IACzD,EAAE,QAAQ,YACnBC,IAAOD,KAAW,IAAID,EAAM,SAAS,IAAIC,IAAU,IAC1C,EAAE,QAAQ,SACnBC,IAAO,IAEPA,IAAOF,EAAM,SAAS,IAExBG,IAAAH,EAAME,CAAI,MAAV,QAAAC,EAAa;AAAA,QACf;AAAA;AAAA,IACF,GAGA,KAAiB,mBAAmB,CAAC,MAAmB;;AAEtD,YAAMC,IADS,EAAE,OACO;AAAA,QACtB;AAAA,MAAA;AAGF,UADI,CAACA,KACDA,EAAS,aAAa,UAAU,KAAMA,EAA+B,SAAU;AACnF,YAAMC,IAAQD,EAAS,aAAa,YAAY,OAAKL,IAAAK,EAAS,gBAAT,gBAAAL,EAAsB,WAAU;AACrF,WAAK;AAAA,QACH,IAAI,YAA+B,aAAa;AAAA,UAC9C,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,OAAAM,EAAA;AAAA,QAAM,CACjB;AAAA,MAAA,GAEH,KAAK,MAAA;AAAA,IACP;AAAA,EAAA;AAAA;AAAA,EA3JS,oBAA0B;AACjC,UAAM,kBAAA,GACN,SAAS,iBAAiB,SAAS,KAAK,sBAAsB,EAAI,GAClE,KAAK,iBAAiB,WAAW,KAAK,cAAc;AAAA,EACtD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,SAAS,oBAAoB,SAAS,KAAK,sBAAsB,EAAI,GACrE,KAAK,oBAAoB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA;AAAA;AAAA,EAKA,MAAc,QAAuB;AACnC,IAAI,KAAK,SAAS,KAAK,aACvB,KAAK,QAAQ,IACb,MAAM,KAAK,gBACX,MAAM,KAAK,gBAAA,GACX,KAAK,gBAAA,GACL,KAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA;AAAA,EAGQ,QAAc;AACpB,IAAK,KAAK,UACV,KAAK,QAAQ,IACb,KAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA;AAAA,EAGQ,UAAgB;AACtB,IAAI,KAAK,QACP,KAAK,MAAA,IAEA,KAAK,MAAA;AAAA,EAEd;AAAA;AAAA;AAAA,EAKA,MAAc,kBAAiC;AAC7C,UAAMC,IAAU,KAAK,WACfC,IAAQ,KAAK;AACnB,QAAI,CAACD,KAAW,CAACC,EAAO;AAExB,UAAM,EAAE,iBAAAC,GAAiB,MAAAC,GAAM,OAAAC,GAAO,QAAAC,MAAW,MAAM,OAAO,kBAAkB,GAC1E,EAAE,GAAAC,GAAG,GAAAC,EAAA,IAAM,MAAML,EAAgBF,GAASC,GAAO;AAAA,MACrD,WAAW,KAAK;AAAA,MAChB,UAAU;AAAA,MACV,YAAY,CAACI,EAAO,CAAC,GAAGF,EAAA,GAAQC,EAAM,EAAE,SAAS,GAAG,CAAC;AAAA,IAAA,CACtD;AAED,WAAO,OAAOH,EAAM,OAAO;AAAA,MACzB,MAAM,GAAGK,CAAC;AAAA,MACV,KAAK,GAAGC,CAAC;AAAA,IAAA,CACV;AAAA,EACH;AAAA;AAAA;AAAA,EAKQ,kBAAwB;;AAE9B,KAAAd,IADc,KAAK,cAAA,EACb,CAAC,MAAP,QAAAA,EAAU;AAAA,EACZ;AAAA;AAAA,EAGQ,gBAA+B;;AACrC,UAAMe,KAAOf,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAC5C,YACGe,KAAA,gBAAAA,EACG,iBAAiB,EAAE,SAAS,GAAA,GAC7B;AAAA,MACC,CAACC,MACCA,aAAc,eACd,CAACA,EAAG,aAAa,UAAU,KAC3B,CAAEA,EAAyB,aAC1BA,EAAG,aAAa,MAAM,MAAM,cAC3BA,EAAG,aAAa,MAAM,MAAM,sBAC5BA,EAAG,aAAa,MAAM,MAAM,mBAC5BA,EAAG,QAAQ,YAAA,EAAc,WAAW,KAAK;AAAA,UACxB,CAAA;AAAA,EAE7B;AAAA;AAAA;AAAA,EA0EQ,cAAc;AACpB,WAAI,KAAK,SAAS,eACTC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAeFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcT;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAa;AAAA,MACjB,SAAS;AAAA,MACT,CAAC,YAAY,KAAK,IAAI,EAAE,GAAG;AAAA,MAC3B,iBAAiB,KAAK;AAAA,IAAA;AAGxB,WAAOD;AAAA;AAAA;AAAA,gBAGKE,EAASD,CAAU,CAAC;AAAA;AAAA,qBAEf,KAAK,KAAK;AAAA;AAAA,wBAEP,OAAO,KAAK,KAAK,CAAC;AAAA,wBAClB,KAAK,QAAQ,KAAK,WAAWE,CAAO;AAAA,oBACxC,KAAK,QAAQ;AAAA,iBAChB,KAAK,mBAAmB;AAAA;AAAA,UAE/B,KAAK,aAAa;AAAA;AAAA,QAEpB,KAAK,QACHH;AAAA;AAAA,mBAES,KAAK,QAAQ;AAAA;AAAA;AAAA,2BAGL,KAAK,SAAS;AAAA;AAAA,uBAElB,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,cAKlCG,CAAO;AAAA;AAAA,EAEf;AACF;AArTatB,EACK,SAAS,CAACJ,CAAuB;AAOjD2B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BxB,EAQX,WAAA,aAAA,CAAA;AAmBAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GA1BpDxB,EA2BX,WAAA,QAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjC/BxB,EAkCX,WAAA,YAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAxC9BxB,EAyCX,WAAA,QAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/C9BxB,EAgDX,WAAA,SAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,cAAc;AAAA,GAtDvDxB,EAuDX,WAAA,aAAA,CAAA;AAMiBuB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA7DIzB,EA6DM,WAAA,SAAA,CAAA;AASkBuB,EAAA;AAAA,EAAlCG,EAAM,kBAAkB;AAAA,GAtEd1B,EAsEwB,WAAA,aAAA,CAAA;AAGDuB,EAAA;AAAA,EAAjCG,EAAM,iBAAiB;AAAA,GAzEb1B,EAyEuB,WAAA,YAAA,CAAA;AAzEvBA,IAANuB,EAAA;AAAA,EADNI,EAAc,kBAAkB;AAAA,GACpB3B,CAAA;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-pagination-AguTQjYC.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-pagination-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, var(--hx-touch-target-min, 2.75rem));\n min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n padding: 0 var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));\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, #0f172a));\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, #f1f5f9));\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: var(--hx-opacity-disabled, 0.5);\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, var(--hx-touch-target-min, 2.75rem));\n min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n color: var(--hx-pagination-ellipsis-color, var(--hx-color-neutral-500, #64748b));\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, #64748b);\n white-space: nowrap;\n }\n\n .page-size-select {\n min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n padding: 0 var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));\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, #0f172a));\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 { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixPaginationStyles } from './hx-pagination.styles.js';\n\n/** Detail for the hx-page-change event dispatched by hx-pagination. */\nexport interface HxPageChangeDetail {\n page: number;\n}\n\n/** Detail for the hx-page-size-change event dispatched by hx-pagination. */\nexport interface HxPageSizeChangeDetail {\n pageSize: number;\n}\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 HelixElement {\n static override styles = [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 /**\n * Function to format the page navigation announcement. Override for i18n.\n */\n @property({ attribute: false })\n labelPageMessage: (current: number, total: number) => string = (current, total) =>\n `Page ${current} of ${total}`;\n\n /**\n * Function to format page button aria-labels. Override for i18n.\n */\n @property({ attribute: false })\n labelPageButton: (page: number) => string = (page) => `Page ${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 = this.labelPageMessage(clamped, 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 // PAGINATION-005: restore focus to the new current-page button after render\n void this.updateComplete.then(() => {\n const btn = this.shadowRoot?.querySelector<HTMLButtonElement>(\n `button[data-roving-key=\"${clamped}\"]`,\n );\n btn?.focus();\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' && e.key !== 'Home' && e.key !== 'End')\n 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 let nextIdx: number;\n if (e.key === 'Home') {\n nextIdx = 0;\n } else if (e.key === 'End') {\n nextIdx = buttons.length - 1;\n } else {\n nextIdx =\n e.key === 'ArrowLeft'\n ? Math.max(0, currentIdx - 1)\n : Math.min(buttons.length - 1, currentIdx + 1);\n }\n\n if (nextIdx !== currentIdx || e.key === 'Home' || e.key === 'End') {\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=${this.labelPageButton(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","HelixElement","current","total","page","key","_a","boundary","sibling","startPages","endPages","siblingStart","siblingEnd","items","p","start","end","result","i","clamped","btn","e","select","newSize","list","buttons","focused","_b","currentIdx","nextIdx","nextBtn","pages","isFirst","isLast","rovingKey","html","n","nothing","repeat","isCurrent","classMap","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-patient-banner-uE6gqLpT.js","sources":["../../src/components/hx-patient-banner/hx-patient-banner.styles.ts","../../src/components/hx-patient-banner/hx-patient-banner.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPatientBannerStyles = css`\n :host {\n display: block;\n width: 100%;\n\n /* ─── Private token vars (3-tier cascade) ─── */\n --_bg: var(--hx-patient-banner-bg, var(--hx-color-neutral-50, #f8fafc));\n --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #e2e8f0));\n --_padding: var(\n --hx-patient-banner-padding,\n var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem)\n );\n --_gap: var(--hx-patient-banner-gap, var(--hx-space-4, 1rem));\n --_font-family: var(--hx-patient-banner-font-family, var(--hx-font-family-sans, sans-serif));\n --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-500, #64748b));\n --_label-font-size: var(--hx-patient-banner-label-font-size, var(--hx-font-size-xs, 0.75rem));\n --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #0f172a));\n --_value-font-size: var(--hx-patient-banner-value-font-size, var(--hx-font-size-sm, 0.875rem));\n --_photo-size: var(--hx-patient-banner-photo-size, var(--hx-space-10, 2.5rem));\n --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #e2e8f0));\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Banner Container ─── */\n\n .banner {\n display: flex;\n align-items: center;\n gap: var(--_gap);\n padding: var(--_padding);\n background-color: var(--_bg);\n border-bottom: var(--hx-border-width-thin, 1px) solid var(--_border-color);\n font-family: var(--_font-family);\n width: 100%;\n position: relative;\n }\n\n /* ─── Photo Area ─── */\n\n .banner__photo-area {\n flex-shrink: 0;\n width: var(--_photo-size);\n height: var(--_photo-size);\n /* Minimum touch target for interactive photo content (WCAG 2.5.8). */\n min-width: var(--hx-touch-target-size, 44px);\n min-height: var(--hx-touch-target-size, 44px);\n border-radius: var(--hx-border-radius-full, 9999px);\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--_photo-bg);\n }\n\n /* ─── Fields Grid ─── */\n\n .banner__fields {\n display: flex;\n flex-wrap: wrap;\n gap: var(--_gap);\n flex: 1;\n min-width: 0;\n }\n\n /* ─── Individual Field ─── */\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n min-width: 0;\n }\n\n .field__label {\n font-size: var(--_label-font-size);\n color: var(--_label-color);\n font-weight: var(--hx-font-weight-medium, 500);\n line-height: var(--hx-line-height-tight, 1.25);\n white-space: nowrap;\n }\n\n .field__value {\n font-size: var(--_value-font-size);\n color: var(--_value-color);\n font-weight: var(--hx-font-weight-normal, 400);\n line-height: var(--hx-line-height-normal, 1.5);\n display: flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n }\n\n /* ─── Identifier Rule Violation ─── */\n /* Visual indicator when Joint Commission two-identifier rule is not met. */\n\n :host([aria-invalid='true']) .banner {\n border-bottom-color: var(--hx-color-error-400, #f87171);\n background-color: var(--hx-color-error-50, #fef2f2);\n /* Darken label color to maintain 4.5:1 contrast on error-50 background. */\n --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #334155));\n }\n\n :host([aria-invalid='true']) .banner::before {\n content: '';\n display: block;\n position: absolute;\n inset-inline-start: 0;\n top: 0;\n bottom: 0;\n width: var(--hx-border-width-thick, 4px);\n background-color: var(--hx-color-error-500, #dc2626);\n border-radius: 0;\n }\n\n /* ─── Visually-hidden violation live region ─── */\n /* Announces identifier rule violations to screen readers without visible text. */\n\n .violation-message {\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 /* ─── Motion reduction ─── */\n\n @media (prefers-reduced-motion: reduce) {\n * {\n transition: none !important;\n animation: none !important;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .banner {\n border-bottom-color: CanvasText;\n }\n\n :host([aria-invalid='true']) .banner {\n border-bottom-color: LinkText;\n }\n\n :host([aria-invalid='true']) .banner::before {\n background-color: LinkText;\n }\n\n .banner__photo-area {\n border: 1px solid CanvasText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixPatientBannerStyles } from './hx-patient-banner.styles.js';\n\n/**\n * Patient identification banner implementing Joint Commission NPSG.01.01.01 two-identifier rule.\n * Renders as a landmark region containing named slots for patient identification fields.\n * Integrates with hx-phi-field for HIPAA-compliant display of masked identifiers.\n *\n * ## Security Model — Event Composition\n *\n * This component dispatches and propagates two categories of composed events:\n *\n * ### `hx-identifier-rule-violation` (dispatched by this component)\n * Fired with `composed: true` when the two-identifier rule is violated. The event detail\n * contains only structural metadata (`populatedIdentifiers` count, `requiredIdentifiers`\n * count) and the `patientId` attribute value. **No raw PHI is included.**\n *\n * The `patientId` is a developer-provided attribute intended as a correlation key for\n * application logic — it should be an opaque internal identifier (e.g., a UUID or\n * encounter ID), not a human-readable identifier like an MRN or SSN.\n *\n * ### `hx-phi-access` (bubbles from slotted hx-phi-field children)\n * Slotted `hx-phi-field` elements dispatch `hx-phi-access` with `composed: true`. These\n * events bubble through this component's shadow DOM via slot projection. This component\n * does NOT re-dispatch or modify these events. See `hx-phi-field` documentation for the\n * security model of those events.\n *\n * ### Consumer Responsibilities\n *\n * - **Multi-tenant isolation**: In micro-frontend architectures where multiple patient\n * contexts share a document, scope event listeners to the appropriate DOM subtree.\n * Both `hx-phi-access` and `hx-identifier-rule-violation` use `composed: true` and\n * will bubble through shared ancestors across shadow boundaries.\n * - **patientId hygiene**: Set the `patient-id` attribute to an opaque internal\n * identifier, not a human-readable clinical identifier. This value appears in\n * composed events that cross shadow boundaries.\n *\n * @summary Patient identification banner with two-identifier rule enforcement.\n *\n * @tag hx-patient-banner\n *\n * @slot photo - Optional patient photo slot.\n * @slot name - Patient name field content.\n * @slot mrn - Medical record number field content. Use hx-phi-field for HIPAA compliance.\n * @slot dob - Date of birth field content. Use hx-phi-field for HIPAA compliance.\n * @slot allergies - Allergy status/flag content.\n * @slot code-status - Code status content.\n *\n * @csspart banner - The outer banner container.\n * @csspart photo-area - The photo slot wrapper.\n * @csspart fields - The fields grid container.\n * @csspart field - An individual field container (applied to all field wrappers).\n * @csspart field-label - The field label element.\n * @csspart field-value - The field value slot wrapper.\n * @csspart violation-message - The visually-hidden identifier rule violation status message.\n *\n * @fires {CustomEvent<PatientIdentifierRuleViolationDetail>} hx-identifier-rule-violation -\n * Fired when fewer than 2 identifier slots are populated and enforce-identifier-rule is\n * true. Contains structural metadata only — no raw PHI. Dispatched with `composed: true`.\n *\n * @cssprop [--hx-patient-banner-bg=var(--hx-color-neutral-50,#f9fafb)] - Banner background color.\n * @cssprop [--hx-patient-banner-border-color=var(--hx-color-neutral-200,#e5e7eb)] - Banner border color.\n * @cssprop [--hx-patient-banner-padding=var(--hx-space-3,0.75rem) var(--hx-space-4,1rem)] - Banner padding.\n * @cssprop [--hx-patient-banner-gap=var(--hx-space-4,1rem)] - Gap between banner fields.\n * @cssprop [--hx-patient-banner-font-family=var(--hx-font-family-sans,sans-serif)] - Banner font family.\n * @cssprop [--hx-patient-banner-label-color=var(--hx-color-neutral-500,#6b7280)] - Field label color.\n * @cssprop [--hx-patient-banner-label-font-size=var(--hx-font-size-xs,0.75rem)] - Field label font size.\n * @cssprop [--hx-patient-banner-value-color=var(--hx-color-neutral-900,#111827)] - Field value color.\n * @cssprop [--hx-patient-banner-value-font-size=var(--hx-font-size-sm,0.875rem)] - Field value font size.\n * @cssprop [--hx-patient-banner-photo-size=var(--hx-space-10,2.5rem)] - Photo area size.\n * @cssprop [--hx-patient-banner-photo-bg=var(--hx-color-neutral-200,#e5e7eb)] - Photo area background color when empty.\n */\n@customElement('hx-patient-banner')\nexport class HelixPatientBanner extends HelixElement {\n static override styles = [helixPatientBannerStyles];\n\n // ─── Public Properties ───\n\n /**\n * Optional patient ID used as context in identifier rule violation events.\n * @attr patient-id\n */\n @property({ type: String, attribute: 'patient-id' })\n patientId: string = '';\n\n /**\n * Accessible label for the banner landmark region.\n * @attr label-patient\n */\n @property({ type: String, attribute: 'label-patient' })\n labelPatient: string = 'Patient identification';\n\n /**\n * Visible label for the name field.\n * @attr label-name\n */\n @property({ type: String, attribute: 'label-name' })\n labelName: string = 'Patient name';\n\n /**\n * Visible label for the MRN field.\n * @attr label-mrn\n */\n @property({ type: String, attribute: 'label-mrn' })\n labelMrn: string = 'MRN';\n\n /**\n * Visible label for the date of birth field.\n * @attr label-dob\n */\n @property({ type: String, attribute: 'label-dob' })\n labelDob: string = 'Date of birth';\n\n /**\n * Visible label for the allergies field.\n * @attr label-allergies\n */\n @property({ type: String, attribute: 'label-allergies' })\n labelAllergies: string = 'Allergies';\n\n /**\n * Visible label for the code status field.\n * @attr label-code-status\n */\n @property({ type: String, attribute: 'label-code-status' })\n labelCodeStatus: string = 'Code status';\n\n /**\n * Whether to enforce the Joint Commission NPSG.01.01.01 two-identifier rule.\n * When true, fires hx-identifier-rule-violation if fewer than 2 identifier\n * slots (name, mrn, dob) are populated.\n * @attr enforce-identifier-rule\n */\n @property({\n attribute: 'enforce-identifier-rule',\n reflect: true,\n converter: {\n fromAttribute: (value: string | null) => value !== 'false',\n toAttribute: (value: boolean) => String(value),\n },\n })\n enforceIdentifierRule: boolean = true;\n\n // ─── Internal State ───\n\n /** @internal */\n @state() private _identifierCount: number = 0;\n\n /** @internal */\n @state() private _isViolating: boolean = false;\n\n // ─── Slot Queries ───\n\n /** @internal */\n @query('slot[name=\"name\"]') private _nameSlot!: HTMLSlotElement | null;\n\n /** @internal */\n @query('slot[name=\"mrn\"]') private _mrnSlot!: HTMLSlotElement | null;\n\n /** @internal */\n @query('slot[name=\"dob\"]') private _dobSlot!: HTMLSlotElement | null;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'banner');\n this.setAttribute('aria-label', this.labelPatient);\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('labelPatient')) {\n this.setAttribute('aria-label', this.labelPatient);\n }\n\n if (changedProperties.has('enforceIdentifierRule')) {\n this._checkIdentifierRule();\n }\n }\n\n // ─── Private Helpers ───\n\n private _countPopulatedIdentifiers(): number {\n let count = 0;\n\n const slots = [this._nameSlot, this._mrnSlot, this._dobSlot];\n for (const slot of slots) {\n if (slot && slot.assignedNodes({ flatten: true }).length > 0) {\n count++;\n }\n }\n\n return count;\n }\n\n private _checkIdentifierRule(): void {\n const count = this._countPopulatedIdentifiers();\n this._identifierCount = count;\n\n if (this.enforceIdentifierRule && count < 2) {\n this._isViolating = true;\n this.setAttribute('aria-invalid', 'true');\n this.dispatchEvent(\n new CustomEvent<PatientIdentifierRuleViolationDetail>('hx-identifier-rule-violation', {\n bubbles: true,\n composed: true,\n detail: {\n populatedIdentifiers: count,\n requiredIdentifiers: 2,\n patientId: this.patientId,\n },\n }),\n );\n } else {\n this._isViolating = false;\n this.removeAttribute('aria-invalid');\n }\n }\n\n // ─── Event Handlers ───\n\n private _handleSlotChange(): void {\n this._checkIdentifierRule();\n }\n\n // ─── Render ───\n\n override render() {\n const violationMessage = this._isViolating\n ? `Warning: patient identification incomplete. ${this._identifierCount} of 2 required identifiers present.`\n : nothing;\n\n return html`\n <div part=\"banner\" class=\"banner\">\n <div part=\"photo-area\" class=\"banner__photo-area\" aria-hidden=\"true\">\n <slot name=\"photo\"></slot>\n </div>\n\n <div part=\"fields\" class=\"banner__fields\">\n <div part=\"field\" class=\"field\">\n <span part=\"field-label\" class=\"field__label\">${this.labelName}</span>\n <div part=\"field-value\" class=\"field__value\">\n <slot name=\"name\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n\n <div part=\"field\" class=\"field\">\n <span part=\"field-label\" class=\"field__label\">${this.labelMrn}</span>\n <div part=\"field-value\" class=\"field__value\">\n <slot name=\"mrn\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n\n <div part=\"field\" class=\"field\">\n <span part=\"field-label\" class=\"field__label\">${this.labelDob}</span>\n <div part=\"field-value\" class=\"field__value\">\n <slot name=\"dob\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n\n <div part=\"field\" class=\"field\">\n <span part=\"field-label\" class=\"field__label\">${this.labelAllergies}</span>\n <div part=\"field-value\" class=\"field__value\">\n <slot name=\"allergies\"></slot>\n </div>\n </div>\n\n <div part=\"field\" class=\"field\">\n <span part=\"field-label\" class=\"field__label\">${this.labelCodeStatus}</span>\n <div part=\"field-value\" class=\"field__value\">\n <slot name=\"code-status\"></slot>\n </div>\n </div>\n </div>\n </div>\n\n ${violationMessage !== nothing\n ? html`<div\n part=\"violation-message\"\n class=\"violation-message\"\n role=\"alert\"\n aria-live=\"assertive\"\n >\n ${violationMessage}\n </div>`\n : nothing}\n `;\n }\n}\n\n/**\n * Event detail for identifier rule violations. Contains only structural metadata\n * about the validation state — never raw PHI values.\n *\n * **Security note**: The `patientId` field reflects the `patient-id` HTML attribute,\n * which should be set to an opaque internal identifier (UUID, encounter ID), not a\n * human-readable clinical identifier. This value crosses shadow DOM boundaries via\n * `composed: true` events.\n */\nexport interface PatientIdentifierRuleViolationDetail {\n /** Number of identifier slots currently populated (0, 1, or 2). */\n populatedIdentifiers: number;\n /** Minimum required identifiers per NPSG.01.01.01 (always 2). */\n requiredIdentifiers: number;\n /** Opaque patient identifier from the patient-id attribute. Should NOT contain raw PHI. */\n patientId: string;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-patient-banner': HelixPatientBanner;\n }\n}\n"],"names":["helixPatientBannerStyles","css","HelixPatientBanner","HelixElement","changedProperties","count","slots","slot","violationMessage","nothing","html","__decorateClass","property","value","state","query","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-phi-field-BC_XowhC.js","sources":["../../src/components/hx-phi-field/hx-phi-field.styles.ts","../../src/components/hx-phi-field/hx-phi-field.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPhiFieldStyles = css`\n :host {\n display: inline-flex;\n }\n\n /* ─── Container ─── */\n\n .phi-field {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n font-family: var(--hx-phi-field-font-family, var(--hx-font-family-mono, monospace));\n }\n\n /* ─── Value ─── */\n\n .phi-field__value--masked {\n user-select: none;\n -webkit-user-select: none;\n color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #64748b));\n letter-spacing: var(--hx-phi-field-letter-spacing, 0.1em);\n }\n\n .phi-field__value--revealed {\n color: var(--hx-phi-field-value-color, var(--hx-color-neutral-900, #0f172a));\n }\n\n /* ─── Screen Reader Status ─── */\n\n .phi-field__status {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n padding: 0;\n margin: -1px;\n }\n\n /* ─── Toggle Button ─── */\n\n .phi-field__toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: var(--hx-space-1, 0.25rem);\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n color: var(--hx-phi-field-toggle-color, var(--hx-color-primary-500, #2563eb));\n cursor: pointer;\n line-height: 1;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n .phi-field__toggle:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-phi-field-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .phi-field__toggle:hover {\n opacity: var(--hx-opacity-90, 0.9);\n }\n\n .phi-field__toggle:active {\n opacity: var(--hx-opacity-50, 0.5);\n }\n\n .phi-field__toggle svg {\n width: 1em;\n height: 1em;\n pointer-events: none;\n }\n\n /* ─── Disabled State ─── */\n\n :host([disabled]) {\n opacity: var(--hx-phi-field-disabled-opacity, var(--hx-opacity-50, 0.5));\n pointer-events: none;\n cursor: not-allowed;\n }\n\n .phi-field--disabled .phi-field__toggle {\n cursor: not-allowed;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .phi-field__toggle {\n transition: none;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast Mode) ─── */\n\n @media (forced-colors: active) {\n .phi-field__toggle {\n border: 1px solid ButtonText;\n forced-color-adjust: none;\n }\n\n .phi-field__toggle:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n }\n`;\n","import { html, type TemplateResult } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixPhiFieldStyles } from './hx-phi-field.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * HIPAA-compliant field component for rendering masked Protected Health Information (PHI).\n * PHI is masked by default and only rendered to the DOM when explicitly revealed. Access\n * events are fired on reveal, hide, and clipboard auto-clear for audit trail purposes.\n *\n * ## Security Model — Event Composition\n *\n * The `hx-phi-access` event is dispatched with `composed: true` so it crosses shadow DOM\n * boundaries and reaches application-level audit listeners. This is intentional — audit\n * trail events MUST reach the host application regardless of shadow DOM nesting depth.\n *\n * **PHI is never included in event details.** The `PhiAccessEventDetail` payload contains\n * only audit metadata: `fieldId`, `action`, `timestamp`, and `fieldType`. The actual PHI\n * value (the `data` property) is deliberately excluded from all dispatched events.\n *\n * ### Consumer Responsibilities\n *\n * - **Audit logging**: Listen for `hx-phi-access` at the application root to build a\n * HIPAA-compliant access audit trail. The `fieldId` and `timestamp` fields correlate\n * access events to specific data elements without exposing the data itself.\n * - **Multi-tenant isolation**: In micro-frontend architectures where multiple patient\n * contexts share a document, consumers MUST scope their `hx-phi-access` listeners to\n * the appropriate DOM subtree (e.g., listen on a container element rather than\n * `document`). Composed events from one patient context will bubble through shared\n * ancestors.\n * - **Do not extend event details with PHI**: When wrapping this component, never add\n * the raw `data` value to re-dispatched events. The separation of audit metadata from\n * PHI content is a deliberate security boundary.\n *\n * @summary HIPAA-compliant field for rendering masked Protected Health Information.\n *\n * @tag hx-phi-field\n *\n * @csspart container - The outer wrapper element.\n * @csspart value - The value display span (masked or revealed).\n * @csspart toggle - The reveal/hide toggle button.\n *\n * @fires {CustomEvent<PhiAccessEventDetail>} hx-phi-access - Fired on reveal, hide,\n * auto-hide, clipboard-clear, and clipboard-clear-failed actions. Contains audit\n * metadata only — never raw PHI. Dispatched with `composed: true` to cross shadow\n * boundaries for application-level audit listeners.\n *\n * @cssprop [--hx-phi-field-font-family=var(--hx-font-family-mono,monospace)] - Font family for the masked value.\n * @cssprop [--hx-phi-field-value-color=var(--hx-color-neutral-900,#111827)] - Value text color.\n * @cssprop [--hx-phi-field-masked-color=var(--hx-color-neutral-500,#6b7280)] - Masked value text color.\n * @cssprop [--hx-phi-field-toggle-color=var(--hx-color-primary-500,#2563eb)] - Toggle button color.\n * @cssprop [--hx-phi-field-focus-ring-color=var(--hx-focus-ring-color,var(--hx-color-primary-500,#2563eb))] - Focus ring color.\n * @cssprop [--hx-phi-field-disabled-opacity=var(--hx-opacity-50,0.5)] - Opacity applied when the field is disabled.\n * @cssprop [--hx-phi-field-auto-hide-warning-color=var(--hx-color-warning-500,#f59e0b)] - Color for auto-hide countdown warning (future use).\n */\n@customElement('hx-phi-field')\nexport class HelixPhiField extends HelixElement {\n static override styles = [helixPhiFieldStyles];\n\n // ─── Public Properties ───\n\n /**\n * The Protected Health Information value to display or mask.\n * Must be set via the JavaScript property (`element.data = \"...\"`) — not as an HTML attribute.\n * Setting PHI as an HTML attribute exposes it in the DOM and browser caches (HIPAA violation).\n */\n @property({ attribute: false })\n data: string = '';\n\n /**\n * The type of PHI field. Controls the masking pattern applied.\n * @attr field-type\n */\n @property({ type: String, reflect: true, attribute: 'field-type' })\n fieldType: 'ssn' | 'mrn' | 'dob' | 'insurance' = 'ssn';\n\n /**\n * Identifier used in audit events. Falls back to the element's id attribute.\n * @attr field-id\n */\n @property({ type: String, attribute: 'field-id' })\n fieldId: string = '';\n\n /**\n * Milliseconds after clipboard write before the clipboard is automatically cleared.\n * Defaults to 30000 (30 seconds).\n * @attr clipboard-timeout\n */\n @property({ type: Number, attribute: 'clipboard-timeout' })\n clipboardTimeout: number = 30000;\n\n /**\n * Accessible label describing the PHI field. Used as a prefix in screen reader\n * announcements (e.g., \"Social Security Number is masked\").\n * @attr label\n */\n @property({ type: String })\n label: string = '';\n\n /**\n * Seconds of inactivity after reveal before PHI is automatically re-masked.\n * Prevents PHI from remaining visible indefinitely when a clinician walks away.\n * Set to 0 to disable auto-hide. Defaults to 60 seconds.\n * @attr auto-hide-delay\n */\n @property({ type: Number, attribute: 'auto-hide-delay' })\n autoHideDelay: number = 60;\n\n /**\n * When set, disables all interaction with the field and prevents reveal.\n * @attr disabled\n * @reflect\n */\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n // ─── Internal State ───\n\n /** @internal */\n @state() private _masked = true;\n\n /** @internal */\n private _clipboardTimer: ReturnType<typeof setTimeout> | null = null;\n\n /** @internal Timer ID for auto-re-mask after reveal. */\n private _autoHideTimer: ReturnType<typeof setTimeout> | null = null;\n\n // ─── Lifecycle ───\n\n /** @internal Bound reference for visibilitychange listener cleanup. */\n private readonly _boundHandleVisibilityChange = (): void => {\n if (document.visibilityState !== 'hidden') return;\n // Only clear if the field has been revealed (unmasked) or an active\n // clipboard-clear timer is running. Otherwise there's nothing to clear,\n // and emitting hx-phi-access with action: 'clipboard-clear' would pollute\n // the HIPAA audit log with events for fields that were never accessed.\n if (this._masked && this._clipboardTimer === null) return;\n this._clearClipboard();\n };\n\n /** @internal Bound reference for interaction-based auto-hide timer reset. */\n private readonly _boundResetAutoHideTimer = (): void => {\n this._resetAutoHideTimer();\n };\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Enforce HIPAA compliance: prevent browser autofill on the host element\n this.setAttribute('autocomplete', 'off');\n // HIPAA: Clear clipboard immediately when tab is hidden (prevents PHI exposure\n // when setTimeout is throttled in backgrounded tabs on mobile/laptop lid close).\n document.addEventListener('visibilitychange', this._boundHandleVisibilityChange);\n // FS-029: PHI SSR/attribute exposure prevention.\n // If a developer (or server-rendered HTML) mistakenly sets PHI via the\n // `data` HTML attribute, the raw value is readable in the DOM source before\n // JavaScript initialises — a HIPAA risk on SSR pages. We recover the value\n // into the JS-only property and then immediately remove the attribute so\n // that no PHI is ever left exposed in the DOM tree or HTML source.\n if (this.hasAttribute('data')) {\n devWarn(\n 'hx-phi-field',\n 'Setting PHI via the `data` HTML attribute is not supported and exposes sensitive data in the DOM source. Use the `data` JS property (element.data = \"...\") instead.',\n );\n // Rescue the value into the private property so the component still works,\n // then strip the attribute so the raw PHI is no longer readable in the DOM.\n const rawValue = this.getAttribute('data');\n if (rawValue !== null) {\n this.data = rawValue;\n }\n this.removeAttribute('data');\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._cancelClipboardTimer();\n this._cancelAutoHideTimer();\n document.removeEventListener('visibilitychange', this._boundHandleVisibilityChange);\n }\n\n // ─── Private Helpers ───\n\n /** @internal */\n private _cancelClipboardTimer(): void {\n if (this._clipboardTimer !== null) {\n clearTimeout(this._clipboardTimer);\n this._clipboardTimer = null;\n }\n }\n\n /** @internal Cancel the auto-hide timer if running. */\n private _cancelAutoHideTimer(): void {\n if (this._autoHideTimer !== null) {\n clearTimeout(this._autoHideTimer);\n this._autoHideTimer = null;\n }\n this._removeAutoHideInteractionListeners();\n }\n\n /** @internal Start the auto-hide countdown. Resets if already running. */\n private _scheduleAutoHide(): void {\n this._cancelAutoHideTimer();\n if (this.autoHideDelay <= 0) return;\n\n this._addAutoHideInteractionListeners();\n this._autoHideTimer = setTimeout(() => {\n this._autoHideTimer = null;\n this._autoHide();\n }, this.autoHideDelay * 1000);\n }\n\n /** @internal Reset the auto-hide timer on user interaction. */\n private _resetAutoHideTimer(): void {\n if (this._autoHideTimer === null) return;\n this._scheduleAutoHide();\n }\n\n /** @internal Auto-hide PHI and dispatch audit event. */\n private _autoHide(): void {\n if (this._masked) return;\n\n this._removeAutoHideInteractionListeners();\n // Do NOT cancel the clipboard-clear timer — same reasoning as the manual\n // hide branch of `_handleToggle`. A reveal may have resulted in a copy,\n // and cancelling the scheduled clear would leave PHI on the clipboard\n // past the auto-hide ceiling.\n this._masked = true;\n\n this.dispatchEvent(\n new CustomEvent<PhiAccessEventDetail>('hx-phi-access', {\n bubbles: true,\n composed: true,\n detail: {\n fieldId: this.fieldId || this.id || '',\n action: 'auto-hide',\n timestamp: new Date().toISOString(),\n fieldType: this.fieldType,\n },\n }),\n );\n }\n\n /** @internal Interaction events that reset the auto-hide timer. */\n private static readonly _AUTO_HIDE_INTERACTION_EVENTS = [\n 'mouseenter',\n 'mousemove',\n 'focusin',\n 'keydown',\n 'pointerdown',\n ] as const;\n\n /** @internal Add interaction listeners to reset auto-hide timer. */\n private _addAutoHideInteractionListeners(): void {\n for (const event of HelixPhiField._AUTO_HIDE_INTERACTION_EVENTS) {\n this.addEventListener(event, this._boundResetAutoHideTimer);\n }\n }\n\n /** @internal Remove interaction listeners. */\n private _removeAutoHideInteractionListeners(): void {\n for (const event of HelixPhiField._AUTO_HIDE_INTERACTION_EVENTS) {\n this.removeEventListener(event, this._boundResetAutoHideTimer);\n }\n }\n\n /** @internal */\n private _scheduleClipboardClear(): void {\n this._cancelClipboardTimer();\n this._clipboardTimer = setTimeout(() => {\n this._clearClipboard();\n }, this.clipboardTimeout);\n }\n\n /** @internal */\n private _clearClipboard(): void {\n // Cancel any pending scheduled clear. When `_clearClipboard` is invoked\n // from the setTimeout callback the timer has already fired and this is a\n // no-op; when invoked from the visibilitychange pre-emption path it stops\n // the scheduled timer from firing again and dispatching a duplicate\n // clipboard-clear audit event.\n this._cancelClipboardTimer();\n // Also cancel the auto-hide timer and remove its interaction listeners.\n // `_clearClipboard` force-masks the field below, so any scheduled auto-hide\n // is now moot. Without this call the setTimeout stays pending and the\n // `mouseenter / mousemove / focusin / keydown / pointerdown` listeners\n // stay attached to the host; when the auto-hide timer later fires,\n // `_autoHide()` early-returns on `this._masked` WITHOUT removing the\n // listeners, leaking them until the next scheduleAutoHide/cancelAutoHideTimer\n // path runs. `_cancelAutoHideTimer` already closes both — one call suffices.\n this._cancelAutoHideTimer();\n this._masked = true;\n\n // `navigator.clipboard.writeText` requires transient user activation in\n // Chrome and Safari. The clipboard-clear timer fires async (activation\n // expired) and the visibilitychange pre-emption path has no activation\n // at all — both can reject silently. Dispatching an unconditional\n // clipboard-clear audit event in that case would be MISLEADING: the\n // audit trail would claim PHI was cleared while it in fact remains on\n // the clipboard. Instead we observe the writeText outcome and dispatch\n // `clipboard-clear` only on confirmed success, or `clipboard-clear-failed`\n // when the API is unavailable or the promise rejects. This gives\n // HIPAA audit consumers an accurate signal and lets them escalate\n // failures (prompt the user, flag the session, etc).\n const dispatchOutcome = (succeeded: boolean): void => {\n this.dispatchEvent(\n new CustomEvent<PhiAccessEventDetail>('hx-phi-access', {\n bubbles: true,\n composed: true,\n detail: {\n fieldId: this.fieldId || this.id || '',\n action: succeeded ? 'clipboard-clear' : 'clipboard-clear-failed',\n timestamp: new Date().toISOString(),\n fieldType: this.fieldType,\n },\n }),\n );\n };\n\n if (typeof navigator === 'undefined') {\n dispatchOutcome(false);\n return;\n }\n\n // Every remaining clipboard interaction — including the `navigator.clipboard`\n // read itself — runs inside this try. The Clipboard API's property descriptor\n // is UA-defined, so `navigator.clipboard` can legally be an accessor that\n // throws synchronously. Same for `clipboard.writeText`. Pulling the read\n // inside the try ensures any sync throw resolves to `clipboard-clear-failed`\n // instead of an uncaught error that would silently drop the HIPAA audit event.\n //\n // `navigator.clipboard` is captured exactly once and the same reference is\n // used for both the method read and the call's receiver. A shim that exposes\n // `navigator.clipboard` as a getter returning a fresh object per read (rare\n // but legal) would otherwise let us grab `writeText` from object A and invoke\n // it against object B — brand/instance checks inside a real polyfill would\n // then fail and the call would reject spuriously.\n //\n // Promise.resolve() on a non-thenable still resolves, so the then() path\n // normalizes the return value shape for us.\n try {\n const clipboard = navigator.clipboard;\n if (!clipboard) {\n dispatchOutcome(false);\n return;\n }\n const writeText = clipboard.writeText;\n if (typeof writeText !== 'function') {\n dispatchOutcome(false);\n return;\n }\n void Promise.resolve(writeText.call(clipboard, '')).then(\n () => dispatchOutcome(true),\n () => dispatchOutcome(false),\n );\n } catch {\n dispatchOutcome(false);\n }\n }\n\n /** @internal */\n private _getMaskedValue(): string {\n if (!this.data) return '';\n\n switch (this.fieldType) {\n case 'ssn': {\n // Format: xxx-xx-xxxx → ***-**-xxxx (show last 4 digits)\n // Match the separator-delimited pattern first\n const ssnMatch = this.data.match(/^(\\d{3})(-?)(\\d{2})(-?)(\\d{4})$/);\n if (ssnMatch) {\n return `***${ssnMatch[2]}**${ssnMatch[4]}${ssnMatch[5]}`;\n }\n // Fallback: mask all but last 4 chars\n return this.data.slice(0, -4).replace(/\\d/g, '*') + this.data.slice(-4);\n }\n\n case 'mrn': {\n // Mask all but last 4 alphanumeric characters, preserve separators\n const chars = this.data.split('');\n const alphanumericIndices: number[] = [];\n chars.forEach((ch, i) => {\n if (/[a-zA-Z0-9]/.test(ch)) {\n alphanumericIndices.push(i);\n }\n });\n const revealCount = Math.min(4, alphanumericIndices.length);\n const maskUntilIdx = alphanumericIndices.length - revealCount;\n const indicesToMask = new Set(alphanumericIndices.slice(0, maskUntilIdx));\n return chars.map((ch, i) => (indicesToMask.has(i) ? '*' : ch)).join('');\n }\n\n case 'dob': {\n // Replace ALL digits with *, preserve separators\n return this.data.replace(/\\d/g, '*');\n }\n\n case 'insurance': {\n // Format: xxxx-xxxx-xxxx-xxxx → ****-****-****-xxxx (show last 4 digits)\n const insMatch = this.data.match(/^(\\d{4})(-?)(\\d{4})(-?)(\\d{4})(-?)(\\d{4})$/);\n if (insMatch) {\n return `****${insMatch[2]}****${insMatch[4]}****${insMatch[6]}${insMatch[7]}`;\n }\n // Fallback: mask all but last 4 chars\n return this.data.slice(0, -4).replace(/[a-zA-Z0-9]/g, '*') + this.data.slice(-4);\n }\n\n default: {\n // Exhaustive check — fieldType is typed, but guard defensively\n const _exhaustive: never = this.fieldType;\n return _exhaustive;\n }\n }\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleToggle(): void {\n if (this.disabled) return;\n\n // Dispatch BEFORE toggling state so action reflects the upcoming state\n this.dispatchEvent(\n new CustomEvent<PhiAccessEventDetail>('hx-phi-access', {\n bubbles: true,\n composed: true,\n detail: {\n fieldId: this.fieldId || this.id || '',\n action: this._masked ? 'reveal' : 'hide',\n timestamp: new Date().toISOString(),\n fieldType: this.fieldType,\n },\n }),\n );\n\n if (this._masked) {\n // Revealing: start clipboard clear timer and auto-hide timer\n this._masked = false;\n this._scheduleClipboardClear();\n this._scheduleAutoHide();\n } else {\n // Hiding: cancel the auto-hide countdown (purpose already served — the\n // field is hidden). Do NOT cancel the clipboard-clear timer — the user\n // may have copied PHI while the field was revealed, and cancelling here\n // would strand it on the clipboard if the tab later backgrounds. The\n // timer fires naturally at `clipboardTimeout`, and the visibilitychange\n // handler will pre-empt it if the tab hides sooner.\n this._cancelAutoHideTimer();\n this._masked = true;\n }\n }\n\n /** @internal */\n private _handleCopy(e: ClipboardEvent): void {\n if (this._masked) {\n e.preventDefault();\n }\n }\n\n /** @internal */\n private _handlePaste(e: ClipboardEvent): void {\n if (this._masked) {\n e.preventDefault();\n }\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderEyeIcon(): TemplateResult {\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=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n `;\n }\n\n /** @internal */\n private _renderEyeOffIcon(): TemplateResult {\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=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\" />\n <path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\" />\n <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\" />\n </svg>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const fieldLabel = this.label || 'Protected health information';\n const maskedLabel = `${fieldLabel} is masked`;\n const revealedLabel = `${fieldLabel} is revealed`;\n const revealActionLabel = `Reveal ${fieldLabel.toLowerCase()}`;\n const hideActionLabel = `Hide ${fieldLabel.toLowerCase()}`;\n\n return html`\n <div\n part=\"container\"\n class=${classMap({ 'phi-field': true, 'phi-field--disabled': this.disabled })}\n @copy=${this._handleCopy}\n @paste=${this._handlePaste}\n >\n ${this._masked\n ? html`<span\n part=\"value\"\n class=\"phi-field__value phi-field__value--masked\"\n aria-hidden=\"true\"\n >${this._getMaskedValue()}</span\n >`\n : html`<span part=\"value\" class=\"phi-field__value phi-field__value--revealed\"\n >${this.data}</span\n >`}\n <span role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"phi-field__status\">\n ${this._masked ? maskedLabel : revealedLabel}\n </span>\n <button\n part=\"toggle\"\n class=\"phi-field__toggle\"\n type=\"button\"\n ?disabled=${this.disabled}\n aria-label=${this._masked ? revealActionLabel : hideActionLabel}\n aria-pressed=${String(!this._masked)}\n @click=${this._handleToggle}\n >\n ${this._masked ? this._renderEyeIcon() : this._renderEyeOffIcon()}\n </button>\n </div>\n `;\n }\n}\n\n/**\n * Audit metadata for PHI access events. This interface intentionally contains\n * only identifiers and action metadata — never raw PHI values. The separation\n * of audit trail data from PHI content is a deliberate HIPAA security boundary.\n *\n * **Security invariant**: No field in this interface should ever contain the\n * actual protected health information (SSN digits, MRN value, date of birth,\n * insurance number). The `fieldId` is a developer-assigned logical identifier,\n * not the PHI value itself.\n */\nexport interface PhiAccessEventDetail {\n /** Developer-assigned logical identifier for the field (NOT the PHI value). */\n fieldId: string;\n /**\n * The action that triggered the audit event.\n *\n * - `clipboard-clear`: `navigator.clipboard.writeText('')` resolved successfully\n * — the clipboard has been confirmed cleared.\n * - `clipboard-clear-failed`: the clipboard API was unavailable OR `writeText('')`\n * rejected (most commonly because the browser required transient user\n * activation that the timer or visibilitychange pre-emption path did not\n * provide). The clipboard MAY still contain PHI. HIPAA audit consumers\n * should treat this as an actionable event — prompt the user to manually\n * clear their clipboard, flag the session, or escalate per policy.\n */\n action: 'reveal' | 'hide' | 'auto-hide' | 'clipboard-clear' | 'clipboard-clear-failed';\n /** ISO 8601 timestamp of the access event. */\n timestamp: string;\n /** The category of PHI this field contains. */\n fieldType: 'ssn' | 'mrn' | 'dob' | 'insurance';\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-phi-field': HelixPhiField;\n }\n}\n"],"names":["helixPhiFieldStyles","css","HelixPhiField","HelixElement","rawValue","event","dispatchOutcome","succeeded","clipboard","writeText","ssnMatch","chars","alphanumericIndices","ch","i","revealCount","maskUntilIdx","indicesToMask","insMatch","html","fieldLabel","maskedLabel","revealedLabel","revealActionLabel","hideActionLabel","classMap","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-popover-B2_203ct.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, #0f172a));\n font-family: var(--hx-popover-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, #e2e8f0));\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, #e2e8f0));\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 /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n [part='body'] {\n border-color: CanvasText;\n }\n\n [part='arrow'] {\n border-color: CanvasText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixPopoverStyles } from './hx-popover.styles.js';\n\nconst _nextPopoverId = createIdCounter('hx-popover');\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 * @cssprop [--hx-popover-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color when the popover body receives focus.\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 HelixElement {\n static override styles = [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:\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' = 'bottom';\n\n /**\n * How the popover is triggered.\n * @attr trigger\n */\n @property({ type: String, reflect: true })\n trigger: 'click' | 'hover' | 'focus' | 'manual' = '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 = _nextPopoverId();\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 /**\n * Timer ID for the hover-triggered hide delay.\n * WCAG 1.4.13: hoverable content must remain visible while the pointer is\n * over it. A 150 ms delay allows the pointer to move from the anchor into\n * the popover body without the content dismissing prematurely.\n * @internal\n */\n private _hoverHideTimer: 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 if (this._hoverHideTimer !== null) {\n clearTimeout(this._hoverHideTimer);\n this._hoverHideTimer = null;\n }\n document.removeEventListener('click', this._handleDocumentClick);\n document.removeEventListener('keydown', this._handleDocumentKeydown);\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 // ─── 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 / HIGH-01: single keydown listener handles both Escape and focus trap.\n // Registered synchronously before any await so it is in place before the first\n // await el.updateComplete in tests.\n document.addEventListener('keydown', this._handleDocumentKeydown);\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 // WCAG 2.4.3: only move focus into the popover when it contains interactive\n // content. For non-interactive (informational) popovers, stealing focus from\n // the trigger is unexpected and disruptive for keyboard users.\n const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n if (bodyEl) {\n const hasInteractive = this._getFocusableElements().length > 0;\n if (hasInteractive) {\n bodyEl.focus();\n }\n }\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 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 { computePosition, flip, shift, offset, arrow } = await import('@floating-ui/dom');\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 oppositeSide: Record<string, string> = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n };\n const staticSide = oppositeSide[basePlacement] ?? '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 / HIGH-01: single document-level keydown handler while popover is open.\n // Handles Escape (close) and Tab (focus trap) in one listener to reduce overhead.\n /**\n * Handles Escape to close the popover and Tab/Shift+Tab to trap focus within it.\n * @internal\n */\n private _handleDocumentKeydown = (e: KeyboardEvent): void => {\n if (!this._visible) return;\n\n if (e.key === 'Escape') {\n // HIGH-03: Escape always restores focus to the prior element\n void this._hide(true);\n return;\n }\n\n if (e.key === 'Tab') {\n // HIGH-01: trap Tab/Shift+Tab focus within the popover body\n const focusable = this._getFocusableElements();\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\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 * WCAG 1.4.13: applies a 150 ms delay so the pointer can move from anchor\n * into the popover body without the content dismissing prematurely.\n * @internal\n */\n private _handleAnchorMouseLeave = (): void => {\n if (this.trigger !== 'hover') return;\n this._scheduleHoverHide();\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 if (this.trigger !== 'hover') return;\n this._cancelHoverHide();\n };\n\n /** @internal */\n private _handleBodyMouseLeave = (): void => {\n if (this.trigger !== 'hover') return;\n this._scheduleHoverHide();\n };\n\n /**\n * Schedules a hide with a 150 ms delay for hover-triggered dismissal.\n * WCAG 1.4.13: the delay allows the pointer to travel between the anchor\n * and the popover body without the content disappearing.\n * @internal\n */\n private _scheduleHoverHide(): void {\n this._cancelHoverHide();\n this._hoverHideTimer = setTimeout(() => {\n this._hoverHideTimer = null;\n void this._hide(false);\n }, 150);\n }\n\n /**\n * Cancels any pending hover-triggered hide.\n * @internal\n */\n private _cancelHoverHide(): void {\n if (this._hoverHideTimer !== null) {\n clearTimeout(this._hoverHideTimer);\n this._hoverHideTimer = null;\n }\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' : nothing}\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>` : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-popover': HelixPopover;\n }\n}\n"],"names":["helixPopoverStyles","css","_nextPopoverId","createIdCounter","HelixPopover","HelixElement","focusable","bodyEl","_a","allFocusable","first","last","_b","_c","related","changedProperties","expanded","anchorSlot","anchorEl","defaultSlot","assigned","focusableSelector","result","el","nested","restoreFocus","arrowEl","computePosition","flip","shift","offset","arrow","middleware","x","y","placement","middlewareData","arrowData","basePlacement","staticSide","borderSides","side","innerSides","html","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-popup-DZXpsJ1R.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-neutral-0, #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 /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n [part='popup'] {\n border: 1px solid CanvasText;\n }\n\n [part='arrow'] {\n border: 1px solid CanvasText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\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\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 HelixElement {\n static override styles = [helixPopupStyles];\n\n /** @internal */\n private _anchorSlotEl: Element | null = null;\n /** @internal */\n private _cleanupAutoUpdate: (() => void) | null = null;\n /** @internal */\n private _floatingUi: typeof import('@floating-ui/dom') | null = null;\n\n /** @internal */\n private async _loadFloatingUi() {\n if (!this._floatingUi) {\n this._floatingUi = await import('@floating-ui/dom');\n }\n return this._floatingUi;\n }\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:\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' = '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: 'start' | 'center' | 'end' | 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: (\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 )[] = [];\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: PropertyValues<this>): 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 void 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 async _startAutoUpdate(): Promise<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 const { autoUpdate } = await this._loadFloatingUi();\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 {\n computePosition,\n flip: flipMiddleware,\n shift: shiftMiddleware,\n offset: offsetMiddleware,\n arrow: arrowMiddleware,\n size: sizeMiddleware,\n autoPlacement: autoPlacementMiddleware,\n } = await this._loadFloatingUi();\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 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 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>` : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-popup': HelixPopup;\n }\n}\n"],"names":["helixPopupStyles","css","HelixPopup","HelixElement","changedProperties","activeChanged","positioningChanged","e","assigned","anchorEl","popupEl","_a","autoUpdate","arrowEl","_b","computePosition","flipMiddleware","shiftMiddleware","offsetMiddleware","arrowMiddleware","sizeMiddleware","autoPlacementMiddleware","middleware","availableWidth","availableHeight","effectivePlacement","x","y","placement","middlewareData","arrowData","basePlacement","staticSide","arrowStyle","html","nothing","__decorateClass","property","value","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-progress-bar-KjEkEJLy.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-space-1, 0.25rem));\n }\n\n .progress-bar--md .progress-bar__track {\n height: var(--hx-progress-bar-height-md, var(--hx-space-2, 0.5rem));\n }\n\n .progress-bar--lg .progress-bar__track {\n height: var(--hx-progress-bar-height-lg, var(--hx-space-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 var(--hx-progress-bar-indeterminate-duration, 1.5s)\n 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: var(--hx-opacity-disabled, 0.5);\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 { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixProgressBarStyles } from './hx-progress-bar.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextProgressBarId = createIdCounter('hx-progress-bar');\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 HelixElement {\n static override styles = [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 /** @internal */\n private _warnedAboutLabel = false;\n\n /** @internal */\n private _uid = _nextProgressBarId();\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 if (this.value !== null && isNaN(this.value)) {\n devWarn('hx-progress-bar', 'Invalid value: NaN. Defaulting to 0.');\n return 0;\n }\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 super.updated(changedProps);\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 && !this._warnedAboutLabel) {\n this._warnedAboutLabel = true;\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","_nextProgressBarId","createIdCounter","HelixProgressBar","HelixElement","range","changedProps","ratio","e","slot","labelId","descId","hasVisibleLabel","classes","ariaValueNow","variantLabel","percentageText","ariaValuetext","html","classMap","nothing","ifDefined","__decorateClass","property","state","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;;;;;;ACOtC,MAAMC,IAAqBC,EAAgB,iBAAiB;AA6BrD,IAAMC,IAAN,cAA+BC,EAAa;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,QAAuB,MAOvB,KAAA,MAAM,GAON,KAAA,MAAM,KAON,KAAA,gBAAgB,IAOhB,KAAA,QAAQ,IAOR,KAAA,cAAc,IAOd,KAAA,OAA2B,MAO3B,KAAA,UAAwD,WAG/C,KAAQ,eAAe,IAEvB,KAAQ,uBAAuB,IAExC,KAAQ,oBAAoB,IAG5B,KAAQ,OAAOH,EAAA;AAAA,EAAmB;AAAA;AAAA,EAGlC,IAAY,mBAA4B;AACtC,WAAO,KAAK,iBAAiB,KAAK,UAAU;AAAA,EAC9C;AAAA;AAAA,EAGA,IAAY,cAAsB;AAEhC,QADI,KAAK,oBACL,KAAK,UAAU,QAAQ,MAAM,KAAK,KAAK;AAEzC,aAAO;AAET,UAAMI,IAAQ,KAAK,MAAM,KAAK;AAC9B,WAAIA,KAAS,IAAU,KACP,KAAK,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,SAAS,KAAK,KAAK,KAAK,GAAG,CAAC,IAC1D,KAAK,OAAOA,IAAS;AAAA,EAC1C;AAAA;AAAA,EAGA,IAAY,cAAuB;AACjC,WAAO,CAAC,KAAK,oBAAoB,KAAK,UAAU,QAAQ,KAAK,SAAS,KAAK;AAAA,EAC7E;AAAA,EAES,QAAQC,GAA0C;AASzD,QARA,MAAM,QAAQA,CAAY,IACrBA,EAAa,IAAI,OAAO,KAAKA,EAAa,IAAI,KAAK,MAAM,KAAK,eACjE,KAAK,eAAe,YACpB,KAAK,cAAc,IAAI,YAAkB,eAAe,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC,KACjFA,EAAa,IAAI,OAAO,KAAK,CAAC,KAAK,gBAC5C,KAAK,eAAe,KAIpBA,EAAa,IAAI,OAAO,KACxBA,EAAa,IAAI,KAAK,KACtBA,EAAa,IAAI,KAAK,KACtBA,EAAa,IAAI,eAAe,GAChC;AACA,YAAMC,IAAQ,KAAK,mBAAmB,IAAI,KAAK,cAAc;AAC7D,WAAK,MAAM,YAAY,kBAAkB,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGA,CAAK,CAAC,CAAC,CAAC;AAAA,IAClF;AAEA,IAAI,CAAC,KAAK,SAAS,CAAC,KAAK,sBACvB,KAAK,oBAAoB;AAAA,EAM7B;AAAA;AAAA,EAGQ,mBAAmBC,GAAgB;AACzC,UAAMC,IAAOD,EAAE;AACf,SAAK,uBAAuBC,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EAC7E;AAAA;AAAA,EAeA,IAAY,gBAAwB;AAClC,WAAON,EAAiB,gBAAgB,KAAK,OAAO,KAAK;AAAA,EAC3D;AAAA,EAES,SAAS;AAChB,UAAMO,IAAU,GAAG,KAAK,IAAI,UACtBC,IAAS,KAAK,cAAc,GAAG,KAAK,IAAI,UAAU,QAClDC,IAAkB,KAAK,sBAEvBC,IAAU;AAAA,MACd,gBAAgB;AAAA,MAChB,CAAC,iBAAiB,KAAK,IAAI,EAAE,GAAG;AAAA,MAChC,CAAC,iBAAiB,KAAK,OAAO,EAAE,GAAG;AAAA,MACnC,+BAA+B,KAAK;AAAA,IAAA,GAGhCC,IAAe,KAAK,mBAAmB,SAAa,KAAK,SAAS,KAAK,KACvEC,IAAe,KAAK,eAIpBC,IAAiB,KAAK,mBACxB,gBACA,GAAG,KAAK,MAAM,KAAK,WAAW,CAAC,KAC7BC,IAAgBF,IAAe,GAAGC,CAAc,MAAMD,CAAY,KAAKC;AAE7E,WAAOE;AAAA,mBACQC,EAASN,CAAO,CAAC;AAAA,UAC1BD,KAAmB,KAAK,QACtBM,aAAgBR,CAAO;AAAA,+CACY,KAAK,kBAAkB;AAAA,uBAE1DQ,mCAAsC,KAAK,kBAAkB,iBAAiB;AAAA,UAChF,KAAK,cACHA,aAAgBP,CAAM,oBAAoB,KAAK,WAAW,YAC1DS,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKOC,EAAUP,CAAY,CAAC;AAAA,0BACvB,KAAK,GAAG;AAAA,0BACR,KAAK,GAAG;AAAA,2BACPG,CAAa;AAAA,uBACjBI,EAAU,CAACT,KAAmB,KAAK,QAAQ,KAAK,QAAQ,MAAS,CAAC;AAAA,4BAC7DS,EAAUT,IAAkBF,IAAU,MAAS,CAAC;AAAA,6BAC/CW,EAAUV,CAAM,CAAC;AAAA;AAAA;AAAA;AAAA,UAIpCI,IACEG,sDAAyDH,CAAY,YACrEK,CAAO;AAAA,qEACkD,KAAK,YAAY;AAAA;AAAA;AAAA,EAGpF;AACF;AApMajB,EACK,SAAS,CAACJ,CAAsB;AADrCI,EAoIa,kBAAwE;AAAA,EAC9F,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAhIAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BpB,EAQX,WAAA,SAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BpB,EAeX,WAAA,OAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArB9BpB,EAsBX,WAAA,OAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5B/BpB,EA6BX,WAAA,iBAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnC9BpB,EAoCX,WAAA,SAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA1C9BpB,EA2CX,WAAA,eAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAjDpDpB,EAkDX,WAAA,QAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAxD9BpB,EAyDX,WAAA,WAAA,CAAA;AAGiBmB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA5DIrB,EA4DM,WAAA,gBAAA,CAAA;AAEAmB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA9DIrB,EA8DM,WAAA,wBAAA,CAAA;AA9DNA,IAANmB,EAAA;AAAA,EADNG,EAAc,iBAAiB;AAAA,GACnBtB,CAAA;"}
|