@helixui/library 2.1.2-next.51 → 2.1.2-next.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +522 -466
- package/dist/base/helix-element.d.ts.map +1 -1
- package/dist/components/hx-accordion/hx-accordion-item.d.ts +0 -2
- package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
- package/dist/components/hx-accordion/hx-accordion-item.styles.d.ts.map +1 -1
- package/dist/components/hx-accordion/hx-accordion.styles.d.ts.map +1 -1
- package/dist/components/hx-accordion/index.js +1 -1
- package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
- package/dist/components/hx-alert/index.js +1 -1
- package/dist/components/hx-badge/hx-badge.styles.d.ts.map +1 -1
- package/dist/components/hx-badge/index.js +1 -1
- package/dist/components/hx-banner/hx-banner.styles.d.ts.map +1 -1
- package/dist/components/hx-banner/index.js +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb-item.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb-item.styles.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts +0 -7
- package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/index.js +1 -1
- package/dist/components/hx-button/hx-button.d.ts +9 -9
- package/dist/components/hx-button/hx-button.d.ts.map +1 -1
- package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
- package/dist/components/hx-button/index.js +1 -1
- package/dist/components/hx-button-group/hx-button-group.d.ts +1 -4
- package/dist/components/hx-button-group/hx-button-group.d.ts.map +1 -1
- package/dist/components/hx-button-group/index.js +1 -1
- package/dist/components/hx-card/hx-card.d.ts +16 -0
- package/dist/components/hx-card/hx-card.d.ts.map +1 -1
- package/dist/components/hx-card/hx-card.styles.d.ts.map +1 -1
- package/dist/components/hx-card/index.js +1 -1
- package/dist/components/hx-carousel/hx-carousel.d.ts.map +1 -1
- package/dist/components/hx-carousel/hx-carousel.styles.d.ts.map +1 -1
- package/dist/components/hx-carousel/index.js +1 -1
- package/dist/components/hx-checkbox/hx-checkbox.d.ts +8 -0
- package/dist/components/hx-checkbox/hx-checkbox.d.ts.map +1 -1
- package/dist/components/hx-checkbox/hx-checkbox.styles.d.ts.map +1 -1
- package/dist/components/hx-checkbox/index.js +1 -1
- package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts +6 -8
- package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts.map +1 -1
- package/dist/components/hx-checkbox-group/hx-checkbox-group.styles.d.ts.map +1 -1
- package/dist/components/hx-checkbox-group/index.js +1 -1
- package/dist/components/hx-clinical-status/hx-clinical-status.styles.d.ts.map +1 -1
- package/dist/components/hx-clinical-status/index.js +1 -1
- package/dist/components/hx-code-snippet/hx-code-snippet.styles.d.ts.map +1 -1
- package/dist/components/hx-code-snippet/index.js +1 -1
- package/dist/components/hx-color-picker/hx-color-picker.styles.d.ts.map +1 -1
- package/dist/components/hx-color-picker/index.js +1 -1
- package/dist/components/hx-combobox/hx-combobox.d.ts +20 -14
- package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
- package/dist/components/hx-combobox/hx-combobox.styles.d.ts.map +1 -1
- package/dist/components/hx-combobox/index.js +1 -1
- package/dist/components/hx-copy-button/hx-copy-button.styles.d.ts.map +1 -1
- package/dist/components/hx-copy-button/index.js +1 -1
- package/dist/components/hx-counter/hx-counter.styles.d.ts.map +1 -1
- package/dist/components/hx-counter/index.js +1 -1
- package/dist/components/hx-data-table/hx-data-table.d.ts +20 -0
- package/dist/components/hx-data-table/hx-data-table.d.ts.map +1 -1
- package/dist/components/hx-data-table/hx-data-table.styles.d.ts.map +1 -1
- package/dist/components/hx-data-table/index.js +1 -1
- package/dist/components/hx-date-picker/hx-date-picker.d.ts +6 -17
- package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
- package/dist/components/hx-date-picker/index.js +1 -1
- package/dist/components/hx-dialog/hx-dialog.d.ts +7 -0
- package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
- package/dist/components/hx-dialog/hx-dialog.styles.d.ts.map +1 -1
- package/dist/components/hx-dialog/index.js +1 -1
- package/dist/components/hx-divider/hx-divider.styles.d.ts.map +1 -1
- package/dist/components/hx-divider/index.js +1 -1
- package/dist/components/hx-drawer/hx-drawer.d.ts +7 -0
- package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
- package/dist/components/hx-drawer/hx-drawer.styles.d.ts.map +1 -1
- package/dist/components/hx-drawer/index.js +1 -1
- package/dist/components/hx-dropdown/hx-dropdown.d.ts +8 -5
- package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
- package/dist/components/hx-dropdown/hx-dropdown.styles.d.ts.map +1 -1
- package/dist/components/hx-dropdown/index.js +1 -1
- package/dist/components/hx-field/hx-field.d.ts.map +1 -1
- package/dist/components/hx-field/hx-field.styles.d.ts.map +1 -1
- package/dist/components/hx-field/index.js +1 -1
- package/dist/components/hx-field-label/hx-field-label.styles.d.ts.map +1 -1
- package/dist/components/hx-field-label/index.js +1 -1
- package/dist/components/hx-file-upload/hx-file-upload.d.ts +6 -14
- package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
- package/dist/components/hx-file-upload/index.js +1 -1
- package/dist/components/hx-help-text/hx-help-text.styles.d.ts.map +1 -1
- package/dist/components/hx-help-text/index.js +1 -1
- package/dist/components/hx-icon/hx-icon.styles.d.ts.map +1 -1
- package/dist/components/hx-icon/index.js +1 -1
- package/dist/components/hx-icon-button/hx-icon-button.d.ts +10 -14
- package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
- package/dist/components/hx-icon-button/hx-icon-button.styles.d.ts.map +1 -1
- package/dist/components/hx-icon-button/index.js +1 -1
- package/dist/components/hx-image/hx-image.styles.d.ts.map +1 -1
- package/dist/components/hx-image/index.js +1 -1
- package/dist/components/hx-link/hx-link.styles.d.ts.map +1 -1
- package/dist/components/hx-link/index.js +1 -1
- package/dist/components/hx-list/index.js +1 -1
- package/dist/components/hx-menu/hx-menu-divider.styles.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu-item.styles.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu.styles.d.ts.map +1 -1
- package/dist/components/hx-menu/index.js +1 -1
- package/dist/components/hx-meter/hx-meter.d.ts +0 -2
- package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
- package/dist/components/hx-meter/hx-meter.styles.d.ts.map +1 -1
- package/dist/components/hx-meter/index.js +1 -1
- package/dist/components/hx-nav/hx-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-nav/index.js +1 -1
- package/dist/components/hx-number-input/hx-number-input.d.ts +6 -8
- package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
- package/dist/components/hx-number-input/hx-number-input.styles.d.ts.map +1 -1
- package/dist/components/hx-number-input/index.js +1 -1
- package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts.map +1 -1
- package/dist/components/hx-overflow-menu/hx-overflow-menu.styles.d.ts.map +1 -1
- package/dist/components/hx-overflow-menu/index.js +1 -1
- package/dist/components/hx-patient-banner/hx-patient-banner.styles.d.ts.map +1 -1
- package/dist/components/hx-patient-banner/index.js +1 -1
- package/dist/components/hx-phi-field/index.js +1 -1
- package/dist/components/hx-popover/hx-popover.d.ts +1 -0
- package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
- package/dist/components/hx-popover/hx-popover.styles.d.ts.map +1 -1
- package/dist/components/hx-popover/index.js +1 -1
- package/dist/components/hx-popup/hx-popup.styles.d.ts.map +1 -1
- package/dist/components/hx-popup/index.js +1 -1
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts +0 -2
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
- package/dist/components/hx-progress-bar/index.js +1 -1
- package/dist/components/hx-radio-group/hx-radio-group.d.ts +6 -11
- package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
- package/dist/components/hx-radio-group/hx-radio-group.styles.d.ts.map +1 -1
- package/dist/components/hx-radio-group/hx-radio.d.ts.map +1 -1
- package/dist/components/hx-radio-group/hx-radio.styles.d.ts.map +1 -1
- package/dist/components/hx-radio-group/index.js +1 -1
- package/dist/components/hx-rating/hx-rating.d.ts +6 -11
- package/dist/components/hx-rating/hx-rating.d.ts.map +1 -1
- package/dist/components/hx-rating/hx-rating.styles.d.ts.map +1 -1
- package/dist/components/hx-rating/index.js +1 -1
- package/dist/components/hx-select/hx-select.d.ts +8 -0
- package/dist/components/hx-select/hx-select.d.ts.map +1 -1
- package/dist/components/hx-select/hx-select.styles.d.ts.map +1 -1
- package/dist/components/hx-select/index.js +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.d.ts +0 -3
- package/dist/components/hx-side-nav/hx-nav-item.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/index.js +1 -1
- package/dist/components/hx-skeleton/hx-skeleton.styles.d.ts.map +1 -1
- package/dist/components/hx-skeleton/index.js +1 -1
- package/dist/components/hx-slider/hx-slider.d.ts +9 -9
- package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
- package/dist/components/hx-slider/index.js +1 -1
- package/dist/components/hx-spinner/hx-spinner.styles.d.ts.map +1 -1
- package/dist/components/hx-spinner/index.js +1 -1
- package/dist/components/hx-split-button/hx-split-button.d.ts.map +1 -1
- package/dist/components/hx-split-button/hx-split-button.styles.d.ts.map +1 -1
- package/dist/components/hx-split-button/index.js +1 -1
- package/dist/components/hx-split-panel/hx-split-panel.styles.d.ts.map +1 -1
- package/dist/components/hx-split-panel/index.js +1 -1
- package/dist/components/hx-stat/hx-stat.d.ts +2 -2
- package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
- package/dist/components/hx-status-indicator/hx-status-indicator.styles.d.ts.map +1 -1
- package/dist/components/hx-status-indicator/index.js +1 -1
- package/dist/components/hx-steps/hx-step.styles.d.ts.map +1 -1
- package/dist/components/hx-steps/index.js +1 -1
- package/dist/components/hx-structured-list/hx-structured-list.styles.d.ts.map +1 -1
- package/dist/components/hx-structured-list/index.js +1 -1
- package/dist/components/hx-switch/hx-switch.d.ts +14 -17
- package/dist/components/hx-switch/hx-switch.d.ts.map +1 -1
- package/dist/components/hx-switch/hx-switch.styles.d.ts.map +1 -1
- package/dist/components/hx-switch/index.js +1 -1
- package/dist/components/hx-table/hx-table.styles.d.ts.map +1 -1
- package/dist/components/hx-table/index.js +1 -1
- package/dist/components/hx-tabs/hx-tab-panel.styles.d.ts.map +1 -1
- package/dist/components/hx-tabs/hx-tab.styles.d.ts.map +1 -1
- package/dist/components/hx-tabs/hx-tabs.d.ts +6 -0
- package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
- package/dist/components/hx-tabs/hx-tabs.styles.d.ts.map +1 -1
- package/dist/components/hx-tabs/index.js +1 -1
- package/dist/components/hx-tag/hx-tag.styles.d.ts.map +1 -1
- package/dist/components/hx-tag/index.js +1 -1
- package/dist/components/hx-text-input/hx-text-input.d.ts +11 -0
- package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
- package/dist/components/hx-text-input/hx-text-input.styles.d.ts.map +1 -1
- package/dist/components/hx-text-input/index.js +1 -1
- package/dist/components/hx-textarea/hx-textarea.d.ts +17 -9
- package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
- package/dist/components/hx-textarea/hx-textarea.styles.d.ts.map +1 -1
- package/dist/components/hx-textarea/index.js +1 -1
- package/dist/components/hx-time-picker/hx-time-picker.d.ts +6 -17
- package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
- package/dist/components/hx-time-picker/index.js +1 -1
- package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
- package/dist/components/hx-toast/index.js +1 -1
- package/dist/components/hx-toggle-button/hx-toggle-button.d.ts +6 -13
- package/dist/components/hx-toggle-button/hx-toggle-button.d.ts.map +1 -1
- package/dist/components/hx-toggle-button/hx-toggle-button.styles.d.ts.map +1 -1
- package/dist/components/hx-toggle-button/index.js +1 -1
- package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
- package/dist/components/hx-tooltip/hx-tooltip.styles.d.ts.map +1 -1
- package/dist/components/hx-tooltip/index.js +1 -1
- package/dist/components/hx-top-nav/hx-top-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-top-nav/index.js +1 -1
- package/dist/components/hx-tree-view/hx-tree-item.styles.d.ts.map +1 -1
- package/dist/components/hx-tree-view/index.js +1 -1
- package/dist/css/helix-all.css +1269 -11
- package/dist/css/helix-core.css +137 -1
- package/dist/css/helix-data.css +69 -0
- package/dist/css/helix-feedback.css +77 -0
- package/dist/css/helix-forms.css +627 -3
- package/dist/css/helix-layout.css +22 -0
- package/dist/css/helix-media.css +24 -0
- package/dist/css/helix-navigation.css +110 -0
- package/dist/css/helix-overlay.css +87 -0
- package/dist/css/helix-utility.css +66 -0
- package/dist/css/hx-accordion.css +8 -0
- package/dist/css/hx-alert.css +21 -0
- package/dist/css/hx-badge.css +16 -0
- package/dist/css/hx-banner.css +17 -0
- package/dist/css/hx-button.css +4 -1
- package/dist/css/hx-card.css +12 -0
- package/dist/css/hx-carousel.css +24 -0
- package/dist/css/hx-checkbox-group.css +32 -0
- package/dist/css/hx-checkbox.css +66 -0
- package/dist/css/hx-clinical-status.css +23 -0
- package/dist/css/hx-code-snippet.css +22 -0
- package/dist/css/hx-color-picker.css +1 -1
- package/dist/css/hx-combobox.css +1 -1
- package/dist/css/hx-copy-button.css +28 -0
- package/dist/css/hx-counter.css +3 -0
- package/dist/css/hx-data-table.css +23 -0
- package/dist/css/hx-dialog.css +21 -0
- package/dist/css/hx-divider.css +8 -0
- package/dist/css/hx-drawer.css +21 -0
- package/dist/css/hx-dropdown.css +9 -0
- package/dist/css/hx-field-label.css +16 -0
- package/dist/css/hx-field.css +36 -0
- package/dist/css/hx-help-text.css +20 -0
- package/dist/css/hx-icon-button.css +27 -0
- package/dist/css/hx-icon.css +8 -0
- package/dist/css/hx-image.css +8 -0
- package/dist/css/hx-link.css +18 -0
- package/dist/css/hx-menu.css +9 -0
- package/dist/css/hx-meter.css +13 -0
- package/dist/css/hx-nav.css +16 -0
- package/dist/css/hx-number-input.css +78 -0
- package/dist/css/hx-overflow-menu.css +31 -0
- package/dist/css/hx-patient-banner.css +20 -0
- package/dist/css/hx-phi-field.css +1 -1
- package/dist/css/hx-popover.css +12 -0
- package/dist/css/hx-popup.css +12 -0
- package/dist/css/hx-radio-group.css +32 -0
- package/dist/css/hx-rating.css +39 -0
- package/dist/css/hx-select.css +82 -0
- package/dist/css/hx-side-nav.css +21 -0
- package/dist/css/hx-skeleton.css +12 -0
- package/dist/css/hx-spinner.css +12 -0
- package/dist/css/hx-split-button.css +35 -0
- package/dist/css/hx-split-panel.css +14 -0
- package/dist/css/hx-status-indicator.css +13 -0
- package/dist/css/hx-structured-list.css +16 -0
- package/dist/css/hx-switch.css +62 -0
- package/dist/css/hx-table.css +8 -0
- package/dist/css/hx-tabs.css +12 -0
- package/dist/css/hx-tag.css +12 -0
- package/dist/css/hx-text-input.css +62 -0
- package/dist/css/hx-textarea.css +62 -0
- package/dist/css/hx-toast.css +13 -0
- package/dist/css/hx-toggle-button.css +38 -1
- package/dist/css/hx-tooltip.css +12 -0
- package/dist/css/hx-top-nav.css +21 -0
- package/dist/css/index.css +1 -1
- package/dist/css/manifest.json +5 -3
- package/dist/index.js +67 -67
- package/dist/mixins/aria-delegation.d.ts +3 -1
- package/dist/mixins/aria-delegation.d.ts.map +1 -1
- package/dist/mixins/index.d.ts +1 -1
- package/dist/mixins/index.d.ts.map +1 -1
- package/dist/shared/{aria-delegation-CBP9eQ0M.js → aria-delegation-Doq6RRUy.js} +6 -6
- package/dist/shared/aria-delegation-Doq6RRUy.js.map +1 -0
- package/dist/shared/{helix-element-CZvaIEQP.js → helix-element-BJh1Ffvi.js} +18 -21
- package/dist/shared/{helix-element-CZvaIEQP.js.map → helix-element-BJh1Ffvi.js.map} +1 -1
- package/dist/shared/{hx-accordion-CpfO0YQo.js → hx-accordion-SlwR2C6S.js} +109 -62
- package/dist/shared/hx-accordion-SlwR2C6S.js.map +1 -0
- package/dist/shared/{hx-alert-CHOjTBds.js → hx-alert-DdlSyJGk.js} +22 -1
- package/dist/shared/hx-alert-DdlSyJGk.js.map +1 -0
- package/dist/shared/{hx-badge-RPzd-t5l.js → hx-badge-B_PzGlUo.js} +17 -1
- package/dist/shared/hx-badge-B_PzGlUo.js.map +1 -0
- package/dist/shared/{hx-banner-B-WEDiq7.js → hx-banner-D8AxkCfc.js} +30 -13
- package/dist/shared/hx-banner-D8AxkCfc.js.map +1 -0
- package/dist/shared/{hx-breadcrumb-item-jLAKK038.js → hx-breadcrumb-item-BCUIvpYX.js} +32 -15
- package/dist/shared/hx-breadcrumb-item-BCUIvpYX.js.map +1 -0
- package/dist/shared/{hx-button-DoN8jjQT.js → hx-button-BzqsDHmZ.js} +15 -16
- package/dist/shared/hx-button-BzqsDHmZ.js.map +1 -0
- package/dist/shared/{hx-button-group-BXlMQTt_.js → hx-button-group-a5Pb_9fU.js} +8 -9
- package/dist/shared/{hx-button-group-BXlMQTt_.js.map → hx-button-group-a5Pb_9fU.js.map} +1 -1
- package/dist/shared/{hx-card-BgXZXDuc.js → hx-card-DYlaxQy0.js} +59 -33
- package/dist/shared/hx-card-DYlaxQy0.js.map +1 -0
- package/dist/shared/{hx-carousel-item-Dwt9Pphz.js → hx-carousel-item-KQfCekKF.js} +45 -19
- package/dist/shared/hx-carousel-item-KQfCekKF.js.map +1 -0
- package/dist/shared/{hx-checkbox-C82GjRXe.js → hx-checkbox-DyDbR1B9.js} +97 -31
- package/dist/shared/hx-checkbox-DyDbR1B9.js.map +1 -0
- package/dist/shared/{hx-checkbox-group-DThZeN5d.js → hx-checkbox-group-C8TaFqy0.js} +75 -40
- package/dist/shared/hx-checkbox-group-C8TaFqy0.js.map +1 -0
- package/dist/shared/{hx-clinical-status-BjtT5c0M.js → hx-clinical-status-dDyk5oj1.js} +53 -30
- package/dist/shared/hx-clinical-status-dDyk5oj1.js.map +1 -0
- package/dist/shared/{hx-code-snippet-DcVENSuC.js → hx-code-snippet-DasrRF9k.js} +27 -5
- package/dist/shared/hx-code-snippet-DasrRF9k.js.map +1 -0
- package/dist/shared/{hx-color-picker-C6EIuS9t.js → hx-color-picker-zv6wtok4.js} +81 -81
- package/dist/shared/hx-color-picker-zv6wtok4.js.map +1 -0
- package/dist/shared/{hx-combobox-BJ4lQocO.js → hx-combobox-C-DVLFpu.js} +36 -45
- package/dist/shared/hx-combobox-C-DVLFpu.js.map +1 -0
- package/dist/shared/{hx-copy-button-BoM0WsMd.js → hx-copy-button-DikpbhWY.js} +54 -26
- package/dist/shared/hx-copy-button-DikpbhWY.js.map +1 -0
- package/dist/shared/{hx-counter-B5NgKlw4.js → hx-counter-_m4cq45V.js} +21 -18
- package/dist/shared/hx-counter-_m4cq45V.js.map +1 -0
- package/dist/shared/{hx-data-table-D5Ne-goy.js → hx-data-table-609C-e9w.js} +215 -150
- package/dist/shared/hx-data-table-609C-e9w.js.map +1 -0
- package/dist/shared/{hx-date-picker-Cd3I3WkX.js → hx-date-picker-Bh8410Sf.js} +26 -35
- package/dist/shared/hx-date-picker-Bh8410Sf.js.map +1 -0
- package/dist/shared/{hx-dialog-D4ubstxx.js → hx-dialog-D_DeqcNS.js} +46 -25
- package/dist/shared/hx-dialog-D_DeqcNS.js.map +1 -0
- package/dist/shared/{hx-divider-BBtOLHRP.js → hx-divider-lfOMElo2.js} +18 -10
- package/dist/shared/hx-divider-lfOMElo2.js.map +1 -0
- package/dist/shared/{hx-drawer--WDLuWtS.js → hx-drawer-NleCbKuN.js} +95 -60
- package/dist/shared/hx-drawer-NleCbKuN.js.map +1 -0
- package/dist/shared/{hx-dropdown-n5-XSmiV.js → hx-dropdown-CA9WYdhm.js} +37 -27
- package/dist/shared/hx-dropdown-CA9WYdhm.js.map +1 -0
- package/dist/shared/{hx-field-CwT9tki1.js → hx-field-Duiib9Bj.js} +48 -12
- package/dist/shared/hx-field-Duiib9Bj.js.map +1 -0
- package/dist/shared/{hx-field-label-CcOK9VU3.js → hx-field-label-Dud-psvE.js} +37 -21
- package/dist/shared/hx-field-label-Dud-psvE.js.map +1 -0
- package/dist/shared/{hx-file-upload-Di_vpQaG.js → hx-file-upload-CmCCAvej.js} +24 -33
- package/dist/shared/hx-file-upload-CmCCAvej.js.map +1 -0
- package/dist/shared/{hx-help-text-Bmb80bP4.js → hx-help-text-DARi-Pfp.js} +37 -17
- package/dist/shared/hx-help-text-DARi-Pfp.js.map +1 -0
- package/dist/shared/{hx-icon-button-CJuy9xbw.js → hx-icon-button-BcZtVVtH.js} +58 -41
- package/dist/shared/hx-icon-button-BcZtVVtH.js.map +1 -0
- package/dist/shared/{hx-icon-BKHs3OLu.js → hx-icon-jWcGmn66.js} +9 -1
- package/dist/shared/hx-icon-jWcGmn66.js.map +1 -0
- package/dist/shared/{hx-image-ztiXumZB.js → hx-image-DOjPp-K5.js} +28 -20
- package/dist/shared/hx-image-DOjPp-K5.js.map +1 -0
- package/dist/shared/{hx-link-CN7AvGOW.js → hx-link-DCBct0f4.js} +44 -26
- package/dist/shared/hx-link-DCBct0f4.js.map +1 -0
- package/dist/shared/{hx-list-CnDK30Yk.js → hx-list-Dnei26t4.js} +16 -16
- package/dist/shared/{hx-list-CnDK30Yk.js.map → hx-list-Dnei26t4.js.map} +1 -1
- package/dist/shared/{hx-menu-divider-DRT8yHRZ.js → hx-menu-divider-DVWER7iT.js} +93 -50
- package/dist/shared/hx-menu-divider-DVWER7iT.js.map +1 -0
- package/dist/shared/{hx-meter-BcVC9yrt.js → hx-meter-ChZdWNF2.js} +42 -28
- package/dist/shared/hx-meter-ChZdWNF2.js.map +1 -0
- package/dist/shared/{hx-nav-l0Rp7WPW.js → hx-nav-CHX1JOWB.js} +28 -12
- package/dist/shared/hx-nav-CHX1JOWB.js.map +1 -0
- package/dist/shared/{hx-nav-item-CJN4VDrf.js → hx-nav-item-CRAESq9s.js} +56 -22
- package/dist/shared/hx-nav-item-CRAESq9s.js.map +1 -0
- package/dist/shared/{hx-number-input-0Waw7Z7u.js → hx-number-input-Cm682AVP.js} +154 -72
- package/dist/shared/hx-number-input-Cm682AVP.js.map +1 -0
- package/dist/shared/{hx-overflow-menu-DElwFSCd.js → hx-overflow-menu-BDl6QfUD.js} +52 -19
- package/dist/shared/hx-overflow-menu-BDl6QfUD.js.map +1 -0
- package/dist/shared/{hx-patient-banner-BKiN7nIE.js → hx-patient-banner-B4IjHeTx.js} +54 -34
- package/dist/shared/hx-patient-banner-B4IjHeTx.js.map +1 -0
- package/dist/shared/{hx-phi-field-Df06K0J3.js → hx-phi-field-DD1qcBSO.js} +2 -2
- package/dist/shared/hx-phi-field-DD1qcBSO.js.map +1 -0
- package/dist/shared/{hx-popover-CydNuVkT.js → hx-popover-ZGRFgBbx.js} +29 -15
- package/dist/shared/hx-popover-ZGRFgBbx.js.map +1 -0
- package/dist/shared/{hx-popup-DbzezTOd.js → hx-popup-Cc4qz89i.js} +24 -12
- package/dist/shared/hx-popup-Cc4qz89i.js.map +1 -0
- package/dist/shared/{hx-progress-bar-Cm0VihTN.js → hx-progress-bar-BY1uE6bN.js} +17 -16
- package/dist/shared/hx-progress-bar-BY1uE6bN.js.map +1 -0
- package/dist/shared/{hx-radio-f8c5ggHG.js → hx-radio-YEEsbUPN.js} +139 -54
- package/dist/shared/hx-radio-YEEsbUPN.js.map +1 -0
- package/dist/shared/{hx-rating-qRJZXskm.js → hx-rating-DjUJTT0M.js} +54 -17
- package/dist/shared/hx-rating-DjUJTT0M.js.map +1 -0
- package/dist/shared/{hx-select-CgcgsHU5.js → hx-select-DZ7wfcJx.js} +119 -37
- package/dist/shared/hx-select-DZ7wfcJx.js.map +1 -0
- package/dist/shared/{hx-skeleton-tiYvKO-t.js → hx-skeleton-aqa-gr1S.js} +28 -16
- package/dist/shared/hx-skeleton-aqa-gr1S.js.map +1 -0
- package/dist/shared/{hx-slider-BvXtvxmN.js → hx-slider-DAilFrR_.js} +28 -25
- package/dist/shared/hx-slider-DAilFrR_.js.map +1 -0
- package/dist/shared/{hx-spinner-D6nzuGmj.js → hx-spinner-Dw3cRY-9.js} +26 -14
- package/dist/shared/hx-spinner-Dw3cRY-9.js.map +1 -0
- package/dist/shared/{hx-split-button-CPndTJlC.js → hx-split-button-Dk-zMDDo.js} +51 -14
- package/dist/shared/hx-split-button-Dk-zMDDo.js.map +1 -0
- package/dist/shared/{hx-split-panel-Dx72NaET.js → hx-split-panel-Kdp4BiLz.js} +15 -1
- package/dist/shared/hx-split-panel-Kdp4BiLz.js.map +1 -0
- package/dist/shared/hx-stat-DKlyBL_K.js.map +1 -1
- package/dist/shared/{hx-status-indicator-ClWpK6zz.js → hx-status-indicator-DWSM0Ctm.js} +30 -17
- package/dist/shared/hx-status-indicator-DWSM0Ctm.js.map +1 -0
- package/dist/shared/{hx-step-C2Jk4mHa.js → hx-step-CuoOvcI8.js} +52 -18
- package/dist/shared/{hx-step-C2Jk4mHa.js.map → hx-step-CuoOvcI8.js.map} +1 -1
- package/dist/shared/{hx-structured-list-DKlrv7kS.js → hx-structured-list-CQCD7bCT.js} +21 -5
- package/dist/shared/hx-structured-list-CQCD7bCT.js.map +1 -0
- package/dist/shared/{hx-switch-BzMN37PV.js → hx-switch-BdxKN9WM.js} +89 -32
- package/dist/shared/hx-switch-BdxKN9WM.js.map +1 -0
- package/dist/shared/{hx-tab-panel-J58zOSjq.js → hx-tab-panel-CwClQoWP.js} +141 -88
- package/dist/shared/hx-tab-panel-CwClQoWP.js.map +1 -0
- package/dist/shared/{hx-tag-F0ZcYj9b.js → hx-tag-BL5qJJCN.js} +20 -8
- package/dist/shared/hx-tag-BL5qJJCN.js.map +1 -0
- package/dist/shared/{hx-td-CNCvzBwY.js → hx-td-CzSvVKdp.js} +21 -13
- package/dist/shared/hx-td-CzSvVKdp.js.map +1 -0
- package/dist/shared/{hx-text-input-Zuodg9s_.js → hx-text-input-BfMrvN9N.js} +110 -48
- package/dist/shared/hx-text-input-BfMrvN9N.js.map +1 -0
- package/dist/shared/{hx-textarea-BfSJJtA1.js → hx-textarea-C-i_Vam6.js} +108 -47
- package/dist/shared/hx-textarea-C-i_Vam6.js.map +1 -0
- package/dist/shared/{hx-time-picker-CZvmihHD.js → hx-time-picker-MZyLQPW9.js} +50 -61
- package/dist/shared/hx-time-picker-MZyLQPW9.js.map +1 -0
- package/dist/shared/{hx-toggle-button-BZUQUULm.js → hx-toggle-button-ClyNYNVI.js} +68 -37
- package/dist/shared/hx-toggle-button-ClyNYNVI.js.map +1 -0
- package/dist/shared/{hx-tooltip-Ny4i1Idj.js → hx-tooltip-ByWT987R.js} +33 -19
- package/dist/shared/hx-tooltip-ByWT987R.js.map +1 -0
- package/dist/shared/{hx-top-nav-CC4FW2Hp.js → hx-top-nav-k7hY78kt.js} +35 -14
- package/dist/shared/hx-top-nav-k7hY78kt.js.map +1 -0
- package/dist/shared/{hx-tree-item-CPQ9dJiK.js → hx-tree-item-D0ZphA45.js} +9 -1
- package/dist/shared/hx-tree-item-D0ZphA45.js.map +1 -0
- package/dist/shared/{toast-factory-CEMNOt1T.js → toast-factory-Cwd0PihS.js} +49 -36
- package/dist/shared/toast-factory-Cwd0PihS.js.map +1 -0
- package/package.json +2 -2
- package/dist/shared/aria-delegation-CBP9eQ0M.js.map +0 -1
- package/dist/shared/hx-accordion-CpfO0YQo.js.map +0 -1
- package/dist/shared/hx-alert-CHOjTBds.js.map +0 -1
- package/dist/shared/hx-badge-RPzd-t5l.js.map +0 -1
- package/dist/shared/hx-banner-B-WEDiq7.js.map +0 -1
- package/dist/shared/hx-breadcrumb-item-jLAKK038.js.map +0 -1
- package/dist/shared/hx-button-DoN8jjQT.js.map +0 -1
- package/dist/shared/hx-card-BgXZXDuc.js.map +0 -1
- package/dist/shared/hx-carousel-item-Dwt9Pphz.js.map +0 -1
- package/dist/shared/hx-checkbox-C82GjRXe.js.map +0 -1
- package/dist/shared/hx-checkbox-group-DThZeN5d.js.map +0 -1
- package/dist/shared/hx-clinical-status-BjtT5c0M.js.map +0 -1
- package/dist/shared/hx-code-snippet-DcVENSuC.js.map +0 -1
- package/dist/shared/hx-color-picker-C6EIuS9t.js.map +0 -1
- package/dist/shared/hx-combobox-BJ4lQocO.js.map +0 -1
- package/dist/shared/hx-copy-button-BoM0WsMd.js.map +0 -1
- package/dist/shared/hx-counter-B5NgKlw4.js.map +0 -1
- package/dist/shared/hx-data-table-D5Ne-goy.js.map +0 -1
- package/dist/shared/hx-date-picker-Cd3I3WkX.js.map +0 -1
- package/dist/shared/hx-dialog-D4ubstxx.js.map +0 -1
- package/dist/shared/hx-divider-BBtOLHRP.js.map +0 -1
- package/dist/shared/hx-drawer--WDLuWtS.js.map +0 -1
- package/dist/shared/hx-dropdown-n5-XSmiV.js.map +0 -1
- package/dist/shared/hx-field-CwT9tki1.js.map +0 -1
- package/dist/shared/hx-field-label-CcOK9VU3.js.map +0 -1
- package/dist/shared/hx-file-upload-Di_vpQaG.js.map +0 -1
- package/dist/shared/hx-help-text-Bmb80bP4.js.map +0 -1
- package/dist/shared/hx-icon-BKHs3OLu.js.map +0 -1
- package/dist/shared/hx-icon-button-CJuy9xbw.js.map +0 -1
- package/dist/shared/hx-image-ztiXumZB.js.map +0 -1
- package/dist/shared/hx-link-CN7AvGOW.js.map +0 -1
- package/dist/shared/hx-menu-divider-DRT8yHRZ.js.map +0 -1
- package/dist/shared/hx-meter-BcVC9yrt.js.map +0 -1
- package/dist/shared/hx-nav-item-CJN4VDrf.js.map +0 -1
- package/dist/shared/hx-nav-l0Rp7WPW.js.map +0 -1
- package/dist/shared/hx-number-input-0Waw7Z7u.js.map +0 -1
- package/dist/shared/hx-overflow-menu-DElwFSCd.js.map +0 -1
- package/dist/shared/hx-patient-banner-BKiN7nIE.js.map +0 -1
- package/dist/shared/hx-phi-field-Df06K0J3.js.map +0 -1
- package/dist/shared/hx-popover-CydNuVkT.js.map +0 -1
- package/dist/shared/hx-popup-DbzezTOd.js.map +0 -1
- package/dist/shared/hx-progress-bar-Cm0VihTN.js.map +0 -1
- package/dist/shared/hx-radio-f8c5ggHG.js.map +0 -1
- package/dist/shared/hx-rating-qRJZXskm.js.map +0 -1
- package/dist/shared/hx-select-CgcgsHU5.js.map +0 -1
- package/dist/shared/hx-skeleton-tiYvKO-t.js.map +0 -1
- package/dist/shared/hx-slider-BvXtvxmN.js.map +0 -1
- package/dist/shared/hx-spinner-D6nzuGmj.js.map +0 -1
- package/dist/shared/hx-split-button-CPndTJlC.js.map +0 -1
- package/dist/shared/hx-split-panel-Dx72NaET.js.map +0 -1
- package/dist/shared/hx-status-indicator-ClWpK6zz.js.map +0 -1
- package/dist/shared/hx-structured-list-DKlrv7kS.js.map +0 -1
- package/dist/shared/hx-switch-BzMN37PV.js.map +0 -1
- package/dist/shared/hx-tab-panel-J58zOSjq.js.map +0 -1
- package/dist/shared/hx-tag-F0ZcYj9b.js.map +0 -1
- package/dist/shared/hx-td-CNCvzBwY.js.map +0 -1
- package/dist/shared/hx-text-input-Zuodg9s_.js.map +0 -1
- package/dist/shared/hx-textarea-BfSJJtA1.js.map +0 -1
- package/dist/shared/hx-time-picker-CZvmihHD.js.map +0 -1
- package/dist/shared/hx-toggle-button-BZUQUULm.js.map +0 -1
- package/dist/shared/hx-tooltip-Ny4i1Idj.js.map +0 -1
- package/dist/shared/hx-top-nav-CC4FW2Hp.js.map +0 -1
- package/dist/shared/hx-tree-item-CPQ9dJiK.js.map +0 -1
- package/dist/shared/toast-factory-CEMNOt1T.js.map +0 -1
package/dist/css/helix-forms.css
CHANGED
|
@@ -219,6 +219,72 @@
|
|
|
219
219
|
transition: none;
|
|
220
220
|
}
|
|
221
221
|
}
|
|
222
|
+
|
|
223
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
224
|
+
|
|
225
|
+
@media (forced-colors: active) {
|
|
226
|
+
.checkbox__box {
|
|
227
|
+
forced-color-adjust: none;
|
|
228
|
+
background-color: ButtonFace;
|
|
229
|
+
border: 2px solid ButtonText;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.checkbox__input:focus-visible ~ .checkbox__box {
|
|
233
|
+
outline: 3px solid Highlight;
|
|
234
|
+
outline-offset: 2px;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.checkbox--checked .checkbox__box,
|
|
238
|
+
.checkbox--indeterminate .checkbox__box {
|
|
239
|
+
background-color: Highlight;
|
|
240
|
+
border-color: Highlight;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.checkbox__icon {
|
|
244
|
+
stroke: HighlightText;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.checkbox--error .checkbox__box {
|
|
248
|
+
border-color: LinkText;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.checkbox--error.checkbox--checked .checkbox__box,
|
|
252
|
+
.checkbox--error.checkbox--indeterminate .checkbox__box {
|
|
253
|
+
background-color: LinkText;
|
|
254
|
+
border-color: LinkText;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
:host([disabled]) {
|
|
258
|
+
opacity: 1;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
:host([disabled]) .checkbox__box {
|
|
262
|
+
border-color: GrayText;
|
|
263
|
+
background-color: ButtonFace;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
:host([disabled]) .checkbox--checked .checkbox__box,
|
|
267
|
+
:host([disabled]) .checkbox--indeterminate .checkbox__box {
|
|
268
|
+
background-color: GrayText;
|
|
269
|
+
border-color: GrayText;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
:host([disabled]) .checkbox__label {
|
|
273
|
+
color: GrayText;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.checkbox__label {
|
|
277
|
+
color: CanvasText;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.checkbox__help-text {
|
|
281
|
+
color: GrayText;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.checkbox__error {
|
|
285
|
+
color: LinkText;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
222
288
|
/* ── hx-checkbox-group ── */
|
|
223
289
|
:host {
|
|
224
290
|
display: block;
|
|
@@ -296,10 +362,42 @@
|
|
|
296
362
|
color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
|
|
297
363
|
line-height: var(--hx-line-height-normal);
|
|
298
364
|
}
|
|
365
|
+
|
|
366
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
367
|
+
|
|
368
|
+
@media (forced-colors: active) {
|
|
369
|
+
.fieldset {
|
|
370
|
+
border: none;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
.fieldset__legend {
|
|
374
|
+
color: CanvasText;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.fieldset--error .fieldset__legend {
|
|
378
|
+
color: LinkText;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
:host([disabled]) {
|
|
382
|
+
opacity: 1;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
:host([disabled]) .fieldset__legend {
|
|
386
|
+
color: GrayText;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.fieldset__help-text {
|
|
390
|
+
color: GrayText;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.fieldset__error {
|
|
394
|
+
color: LinkText;
|
|
395
|
+
}
|
|
396
|
+
}
|
|
299
397
|
/* ── hx-color-picker ── */
|
|
300
|
-
:host{display:inline-block;position:relative;font-family:var(--hx-font-family-sans, sans-serif);font-size:var(--hx-font-size-sm, .875rem)}:host([disabled]){pointer-events:none;opacity:var(--hx-opacity-disabled, .4)}.trigger{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-1, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-md, .375rem);background:var(--hx-color-neutral-0, #fff);cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease)}.trigger:hover:not([disabled]){border-color:var(--hx-color-primary-500, #3b82f6)}:is(.trigger,.gradient-grid,.slider-track,.swatch-btn,.format-btn):focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, var(--hx-color-primary-500));outline-offset:var(--hx-focus-ring-offset, 2px)}.trigger-swatch{width:1.5rem;height:1.5rem;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);display:block;flex-shrink:0}.trigger-label{font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-700, #374151);font-family:var(--hx-font-family-mono, monospace);white-space:nowrap}.panel{position:absolute;z-index:var(--hx-color-picker-z-index, 1000);top:calc(100% + 4px);left:0;background:var(--hx-color-neutral-0, #fff);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem);box-shadow:0 8px 24px var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, .15)));padding:var(--hx-space-4, 1rem);width:var(--hx-color-picker-width, 260px);display:flex;flex-direction:column;gap:var(--hx-space-3, .75rem);outline:none}:host([inline]) .panel{position:static;box-shadow:none;border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem)}.gradient-grid{position:relative;width:100%;height:var(--hx-color-picker-grid-height, 160px);border-radius:var(--hx-border-radius-sm, .25rem);cursor:crosshair;overflow:hidden;touch-action:none;flex-shrink:0}.gradient-grid-bg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,var(--_hue-color, hsl(0, 100%, 50%)));pointer-events:none}.gradient-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;top:var(--_thumb-y, 0%);left:var(--_thumb-x, 100%)}.slider-track{position:relative;width:100%;height:12px;border-radius:6px;cursor:pointer;touch-action:none;flex-shrink:0}.hue-track{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.opacity-track{background-image:linear-gradient(to right,transparent,var(--_hue-color, hsl(0, 100%, 50%))),repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0 0 / 12px 12px}.slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;left:var(--_slider-pct, 0%);background:var(--_thumb-color, hsl(0, 100%, 50%))}.swatches{display:flex;flex-wrap:wrap;gap:var(--hx-space-1, .25rem)}.swatch-btn{width:20px;height:20px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));cursor:pointer;padding:0;flex-shrink:0;transition:transform var(--hx-transition-fast, .15s ease)}.swatch-btn:hover{transform:scale(1.15);border-color:var( --hx-color-picker-swatch-border-hover, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)) )}.input-area{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}.format-btn{flex-shrink:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);background:var(--hx-color-neutral-100, #f3f4f6);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);cursor:pointer;font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-600, #4b5563);text-transform:uppercase;font-weight:var(--hx-font-weight-semibold, 600);letter-spacing:.05em}.color-input{flex:1;min-width:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);font-family:var(--hx-font-family-mono, monospace);font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-900, #111827);background:var(--hx-color-neutral-0, #fff);outline:none}.color-input:focus-visible{border-color:var(--hx-focus-ring-color, var(--hx-color-primary-500));box-shadow:0 0 0 2px color-mix(in srgb,var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%,transparent)}.input-preview{width:24px;height:24px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);flex-shrink:0}@media(prefers-reduced-motion:reduce){.trigger,.swatch-btn{transition:none}}
|
|
398
|
+
:host{display:inline-block;position:relative;font-family:var(--hx-font-family-sans, sans-serif);font-size:var(--hx-font-size-sm, .875rem)}:host([disabled]){pointer-events:none;opacity:var(--hx-opacity-disabled, .4)}.trigger{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-1, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-md, .375rem);background:var(--hx-color-neutral-0, #fff);cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease)}.trigger:hover:not([disabled]){border-color:var(--hx-color-primary-500, #3b82f6)}:is(.trigger,.gradient-grid,.slider-track,.swatch-btn,.format-btn):focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, var(--hx-color-primary-500));outline-offset:var(--hx-focus-ring-offset, 2px)}.trigger-swatch{width:1.5rem;height:1.5rem;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);display:block;flex-shrink:0}.trigger-label{font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-700, #374151);font-family:var(--hx-font-family-mono, monospace);white-space:nowrap}.panel{position:absolute;z-index:var(--hx-color-picker-z-index, 1000);top:calc(100% + 4px);left:0;background:var(--hx-color-neutral-0, #fff);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem);box-shadow:0 8px 24px var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, .15)));padding:var(--hx-space-4, 1rem);width:var(--hx-color-picker-width, 260px);display:flex;flex-direction:column;gap:var(--hx-space-3, .75rem);outline:none}:host([inline]) .panel{position:static;box-shadow:none;border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem)}.gradient-grid{position:relative;width:100%;height:var(--hx-color-picker-grid-height, 160px);border-radius:var(--hx-border-radius-sm, .25rem);cursor:crosshair;overflow:hidden;touch-action:none;flex-shrink:0}.gradient-grid-bg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,var(--_hue-color, hsl(0, 100%, 50%)));pointer-events:none}.gradient-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;top:var(--_thumb-y, 0%);left:var(--_thumb-x, 100%)}.slider-track{position:relative;width:100%;height:12px;border-radius:6px;cursor:pointer;touch-action:none;flex-shrink:0}.hue-track{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.opacity-track{background-image:linear-gradient(to right,transparent,var(--_hue-color, hsl(0, 100%, 50%))),repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0 0 / 12px 12px}.slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;left:var(--_slider-pct, 0%);background:var(--_thumb-color, hsl(0, 100%, 50%))}.swatches{display:flex;flex-wrap:wrap;gap:var(--hx-space-1, .25rem)}.swatch-btn{width:20px;height:20px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));cursor:pointer;padding:0;flex-shrink:0;transition:transform var(--hx-transition-fast, .15s ease)}.swatch-btn:hover{transform:scale(1.15);border-color:var( --hx-color-picker-swatch-border-hover, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)) )}.input-area{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}.format-btn{flex-shrink:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);background:var(--hx-color-neutral-100, #f3f4f6);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);cursor:pointer;font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-600, #4b5563);text-transform:uppercase;font-weight:var(--hx-font-weight-semibold, 600);letter-spacing:.05em}.color-input{flex:1;min-width:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);font-family:var(--hx-font-family-mono, monospace);font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-900, #111827);background:var(--hx-color-neutral-0, #fff);outline:none}.color-input:focus-visible{border-color:var(--hx-focus-ring-color, var(--hx-color-primary-500));box-shadow:0 0 0 2px color-mix(in srgb,var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%,transparent)}.input-preview{width:24px;height:24px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);flex-shrink:0}@media(prefers-reduced-motion:reduce){.trigger,.swatch-btn{transition:none}}@media(forced-colors:active){.trigger{forced-color-adjust:none;background-color:Field;color:FieldText;border:2px solid ButtonText}.trigger:hover:not([disabled]){border-color:Highlight}:is(.trigger,.gradient-grid,.slider-track,.swatch-btn,.format-btn):focus-visible{outline-color:Highlight}.panel{forced-color-adjust:none;background-color:Canvas;border:2px solid CanvasText;box-shadow:none}.gradient-thumb,.slider-thumb{box-shadow:0 0 0 2px CanvasText}.swatch-btn{border:2px solid ButtonText}.swatch-btn:hover{border-color:Highlight}.color-input{forced-color-adjust:none;background-color:Field;color:FieldText;border:2px solid ButtonText}.color-input:focus-visible{border-color:Highlight;box-shadow:none}.format-btn{forced-color-adjust:none;background-color:ButtonFace;color:ButtonText;border:2px solid ButtonText}.trigger-label{color:FieldText}:host([disabled]){opacity:1}:host([disabled]) .trigger{border-color:GrayText;color:GrayText}}
|
|
301
399
|
/* ── hx-combobox ── */
|
|
302
|
-
:host{display:block}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-combobox-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-combobox-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{position:relative;display:flex;align-items:center;border:var(--hx-border-width-thin, 1px) solid var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-combobox-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}.field__input-wrapper:focus-within{border-color:var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__prefix,.field__suffix{display:flex;align-items:center;padding:0 var(--hx-space-2, .5rem);color:var(--hx-color-neutral-500, #6c757d);flex-shrink:0}.field__input{flex:1;min-width:0;min-height:var(--hx-input-height-md, var(--hx-size-10, 2.5rem));border:none;background:transparent;outline:none;font-family:inherit;font-size:var(--hx-font-size-md, 1rem);line-height:var(--hx-line-height-normal, 1.5);color:var(--hx-combobox-color, var(--hx-color-neutral-800, #212529));padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem)}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input--sm{min-height:var(--hx-input-height-sm, var(--hx-size-8, 2rem));font-size:var(--hx-font-size-sm, .875rem);padding:var(--hx-space-1, .25rem) var(--hx-space-3, .75rem)}.field__input--lg{min-height:var(--hx-input-height-lg, var(--hx-size-12, 3rem));font-size:var(--hx-font-size-lg, 1.125rem);padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem)}.field__clear-button,.field__loading-indicator{display:flex;align-items:center;justify-content:center;margin-inline-end:var(--hx-space-2, .5rem);flex-shrink:0;color:var(--hx-color-neutral-400, #adb5bd)}.field__clear-button{width:1.25rem;height:1.25rem;border:none;background:transparent;cursor:pointer;padding:0;border-radius:var(--hx-border-radius-full, 9999px);transition:color var(--hx-transition-fast, .15s ease)}.field__clear-button:hover{color:var(--hx-color-neutral-700, #343a40)}.field__clear-button:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px)}.field__loading-indicator{width:1rem;height:1rem}.field__loading-spinner{width:1rem;height:1rem;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:hx-spin .7s linear infinite}@keyframes hx-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.field__loading-spinner{animation:none}}.field__listbox{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;right:0;z-index:var(--hx-z-index-dropdown, 100);background-color:var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-combobox-border-radius, var(--hx-border-radius-md, .375rem));box-shadow:var( --hx-combobox-listbox-shadow, 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0d1117) 12%, transparent) );max-height:var(--hx-combobox-listbox-max-height, 16rem);overflow:hidden;display:flex;flex-direction:column}.field__listbox[hidden]{display:none}.field__options{overflow-y:auto;flex:1;padding:var(--hx-space-1, .25rem) 0}.field__option{display:flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-size:var(--hx-font-size-md, 1rem);color:var(--hx-combobox-color, var(--hx-color-neutral-800, #212529));cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color var(--hx-transition-fast, .15s ease)}.field__option:hover{background-color:var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff))}.field__option--selected{background-color:var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));font-weight:var(--hx-font-weight-medium, 500)}.field__option--focused{background-color:var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-combobox-option-focus-ring-offset, -2px)}.field__option--focused.field__option--selected{background-color:var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe))}.field__option--disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}.field__option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field__no-options{padding:var(--hx-space-3, .75rem);text-align:center;color:var(--hx-color-neutral-400, #adb5bd);font-size:var(--hx-font-size-sm, .875rem)}.field__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__option,.field__clear-button,.field__chip-remove{transition:none}}:host([multiple]) .field__input-wrapper{flex-wrap:wrap;padding:var(--hx-space-1, .25rem);gap:var(--hx-space-1, .25rem);align-items:center}:host([multiple]) .field__input{min-width:8rem;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);flex-shrink:1}.field__chip{display:inline-flex;align-items:center;gap:var(--hx-space-1, .25rem);padding:0 var(--hx-space-1, .25rem) 0 var(--hx-space-2, .5rem);height:1.5rem;background-color:var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));color:var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e40af));border-radius:var(--hx-border-radius-full, 9999px);font-size:var(--hx-font-size-sm, .875rem);white-space:nowrap;max-width:12rem;flex-shrink:0}.field__chip-label{overflow:hidden;text-overflow:ellipsis;max-width:8rem}.field__chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1rem;height:1rem;border:none;background:none;cursor:pointer;padding:0;color:inherit;opacity:.7;border-radius:50%;line-height:1;transition:opacity var(--hx-transition-fast, .15s ease)}.field__chip-remove:hover{opacity:1;background-color:var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe))}.field__chip-remove:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px);opacity:1}
|
|
400
|
+
:host{display:block}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-combobox-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-combobox-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{position:relative;display:flex;align-items:center;border:var(--hx-border-width-thin, 1px) solid var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-combobox-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}.field__input-wrapper:focus-within{border-color:var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__prefix,.field__suffix{display:flex;align-items:center;padding:0 var(--hx-space-2, .5rem);color:var(--hx-color-neutral-500, #6c757d);flex-shrink:0}.field__input{flex:1;min-width:0;min-height:var(--hx-input-height-md, var(--hx-size-10, 2.5rem));border:none;background:transparent;outline:none;font-family:inherit;font-size:var(--hx-font-size-md, 1rem);line-height:var(--hx-line-height-normal, 1.5);color:var(--hx-combobox-color, var(--hx-color-neutral-800, #212529));padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem)}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input--sm{min-height:var(--hx-input-height-sm, var(--hx-size-8, 2rem));font-size:var(--hx-font-size-sm, .875rem);padding:var(--hx-space-1, .25rem) var(--hx-space-3, .75rem)}.field__input--lg{min-height:var(--hx-input-height-lg, var(--hx-size-12, 3rem));font-size:var(--hx-font-size-lg, 1.125rem);padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem)}.field__clear-button,.field__loading-indicator{display:flex;align-items:center;justify-content:center;margin-inline-end:var(--hx-space-2, .5rem);flex-shrink:0;color:var(--hx-color-neutral-400, #adb5bd)}.field__clear-button{width:1.25rem;height:1.25rem;border:none;background:transparent;cursor:pointer;padding:0;border-radius:var(--hx-border-radius-full, 9999px);transition:color var(--hx-transition-fast, .15s ease)}.field__clear-button:hover{color:var(--hx-color-neutral-700, #343a40)}.field__clear-button:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px)}.field__loading-indicator{width:1rem;height:1rem}.field__loading-spinner{width:1rem;height:1rem;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:hx-spin .7s linear infinite}@keyframes hx-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.field__loading-spinner{animation:none}}.field__listbox{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;right:0;z-index:var(--hx-z-index-dropdown, 100);background-color:var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-combobox-border-radius, var(--hx-border-radius-md, .375rem));box-shadow:var( --hx-combobox-listbox-shadow, 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0d1117) 12%, transparent) );max-height:var(--hx-combobox-listbox-max-height, 16rem);overflow:hidden;display:flex;flex-direction:column}.field__listbox[hidden]{display:none}.field__options{overflow-y:auto;flex:1;padding:var(--hx-space-1, .25rem) 0}.field__option{display:flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-size:var(--hx-font-size-md, 1rem);color:var(--hx-combobox-color, var(--hx-color-neutral-800, #212529));cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color var(--hx-transition-fast, .15s ease)}.field__option:hover{background-color:var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff))}.field__option--selected{background-color:var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));font-weight:var(--hx-font-weight-medium, 500)}.field__option--focused{background-color:var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-combobox-option-focus-ring-offset, -2px)}.field__option--focused.field__option--selected{background-color:var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe))}.field__option--disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}.field__option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field__no-options{padding:var(--hx-space-3, .75rem);text-align:center;color:var(--hx-color-neutral-400, #adb5bd);font-size:var(--hx-font-size-sm, .875rem)}.field__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__option,.field__clear-button,.field__chip-remove{transition:none}}@media(forced-colors:active){.field__input-wrapper{forced-color-adjust:none;background-color:Field;color:FieldText;border:2px solid ButtonText}.field__input{color:FieldText}.field__input::placeholder{color:GrayText}.field__input-wrapper:focus-within{border-color:Highlight;box-shadow:none}.field__listbox{forced-color-adjust:none;background-color:Canvas;border:2px solid CanvasText;box-shadow:none}.field__option{color:CanvasText}.field__option:hover{background-color:Highlight;color:HighlightText}.field__option--selected{background-color:Highlight;color:HighlightText}.field__option--focused{outline-color:Highlight;background-color:Highlight;color:HighlightText}.field__option--disabled{color:GrayText;opacity:1}.field__chip{forced-color-adjust:none;background-color:Highlight;color:HighlightText;border:1px solid HighlightText}.field__chip-remove:focus-visible{outline-color:Highlight}.field__clear-button:focus-visible{outline-color:Highlight}.field--error .field__input-wrapper{border-color:LinkText}:host([disabled]){opacity:1}:host([disabled]) .field__input-wrapper{border-color:GrayText;color:GrayText}:host([disabled]) .field__input{color:GrayText}.field__label{color:CanvasText}.field__help-text{color:GrayText}.field__error{color:LinkText}}:host([multiple]) .field__input-wrapper{flex-wrap:wrap;padding:var(--hx-space-1, .25rem);gap:var(--hx-space-1, .25rem);align-items:center}:host([multiple]) .field__input{min-width:8rem;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);flex-shrink:1}.field__chip{display:inline-flex;align-items:center;gap:var(--hx-space-1, .25rem);padding:0 var(--hx-space-1, .25rem) 0 var(--hx-space-2, .5rem);height:1.5rem;background-color:var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));color:var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e40af));border-radius:var(--hx-border-radius-full, 9999px);font-size:var(--hx-font-size-sm, .875rem);white-space:nowrap;max-width:12rem;flex-shrink:0}.field__chip-label{overflow:hidden;text-overflow:ellipsis;max-width:8rem}.field__chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1rem;height:1rem;border:none;background:none;cursor:pointer;padding:0;color:inherit;opacity:.7;border-radius:50%;line-height:1;transition:opacity var(--hx-transition-fast, .15s ease)}.field__chip-remove:hover{opacity:1;background-color:var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe))}.field__chip-remove:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px);opacity:1}
|
|
303
401
|
/* ── hx-date-picker ── */
|
|
304
402
|
:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label-wrapper{display:contents}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{display:flex;align-items:stretch;border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-date-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);overflow:hidden}.field__input-wrapper:focus-within{border-color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-date-picker-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-size-10, 2.5rem);width:100%;cursor:default}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input:disabled{cursor:not-allowed}.field__trigger{display:flex;align-items:center;justify-content:center;padding:0 var(--hx-space-3, .75rem);border:none;border-left:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));background:transparent;color:var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #6c757d));cursor:pointer;flex-shrink:0;transition:color var(--hx-transition-fast, .15s ease);outline:none}.field__trigger:focus-visible{color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));background-color:color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) 8%,transparent)}.field__trigger:hover:not(:disabled){color:var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #343a40));background-color:color-mix(in srgb,var(--hx-color-neutral-900, #212529) 4%,transparent)}.field__trigger:disabled{cursor:not-allowed}.calendar{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;z-index:var(--hx-z-index-dropdown, 1000);min-width:var(--hx-date-picker-calendar-min-width, 18rem);background-color:var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e9ecef));border-radius:var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, .5rem));box-shadow:var( --hx-date-picker-calendar-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1) );padding:var(--hx-space-3, .75rem);outline:none}@media(prefers-reduced-motion:no-preference){.calendar{animation:calendar-appear var(--hx-transition-fast, .15s ease) forwards}}@keyframes calendar-appear{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.calendar__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hx-space-3, .75rem)}:is(.calendar__nav-btn,.calendar__day,.calendar__day-cell,.calendar__weekday){display:flex;align-items:center;justify-content:center}:is(.calendar__nav-btn,.calendar__day){width:var(--hx-touch-target-min, 2.75rem);height:var(--hx-touch-target-min, 2.75rem);border:none;border-radius:var(--hx-border-radius-sm, .25rem);background:transparent;cursor:pointer;outline:none;transition:background-color var(--hx-transition-fast, .15s ease),color var(--hx-transition-fast, .15s ease)}.calendar__nav-btn{color:var(--hx-color-neutral-600, #495057);font-size:var(--hx-font-size-lg, 1.125rem);line-height:1}.calendar__nav-btn:hover{background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}:is(.calendar__nav-btn,.calendar__day):focus-visible{box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));z-index:1}.calendar__nav-btn:disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__month-label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-800, #212529);flex:1;text-align:center}.calendar__grid{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem)}.calendar__row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--hx-space-1, .25rem)}.calendar__weekday{height:var(--hx-size-8, 2rem);font-size:var(--hx-font-size-xs, .75rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-500, #6c757d);text-transform:uppercase;letter-spacing:.05em}.calendar__day{color:var(--hx-color-neutral-800, #212529);font-size:var(--hx-font-size-sm, .875rem);font-family:inherit;position:relative}.calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected){background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}.calendar__day--selected{background-color:var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));color:var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));font-weight:var(--hx-font-weight-semibold, 600)}.calendar__day--selected:hover{background-color:var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected){font-weight:var(--hx-font-weight-bold, 700);color:var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected):after{content:"";position:absolute;bottom:.2rem;left:50%;transform:translate(-50%);width:.25rem;height:.25rem;border-radius:50%;background-color:currentColor}.calendar__day--disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__trigger,.calendar__nav-btn,.calendar__day{transition:none}}@media(forced-colors:active){.field__input-wrapper{border:1px solid ButtonText}.field__input-wrapper:focus-within{outline:2px solid Highlight;outline-offset:1px;box-shadow:none}:is(.calendar__day:focus-visible,.calendar__nav-btn:focus-visible){outline:2px solid Highlight;box-shadow:none}.calendar__day--selected{background-color:Highlight;color:HighlightText;border:1px solid Highlight}.calendar__day--today:not(.calendar__day--selected){border:2px solid LinkText}.calendar__day--today:not(.calendar__day--selected):after{display:none}.calendar__day--disabled{color:GrayText}.field--error .field__input-wrapper{border-color:LinkText}}
|
|
305
403
|
/* ── hx-field ── */
|
|
@@ -421,6 +519,42 @@
|
|
|
421
519
|
outline-offset: var(--hx-focus-ring-offset, 2px);
|
|
422
520
|
border-radius: var(--hx-border-radius-sm, 0.25rem);
|
|
423
521
|
}
|
|
522
|
+
|
|
523
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
524
|
+
|
|
525
|
+
@media (forced-colors: active) {
|
|
526
|
+
.field__label {
|
|
527
|
+
color: CanvasText;
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
.field__required-marker {
|
|
531
|
+
color: LinkText;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
.field--error .field__label {
|
|
535
|
+
color: LinkText;
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
.field--error .field__control {
|
|
539
|
+
outline-color: LinkText;
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
:host([disabled]) {
|
|
543
|
+
opacity: 1;
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
:host([disabled]) .field__label {
|
|
547
|
+
color: GrayText;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.field__help-text {
|
|
551
|
+
color: GrayText;
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
.field__error {
|
|
555
|
+
color: LinkText;
|
|
556
|
+
}
|
|
557
|
+
}
|
|
424
558
|
/* ── hx-field-label ── */
|
|
425
559
|
:host {
|
|
426
560
|
display: block;
|
|
@@ -448,6 +582,22 @@
|
|
|
448
582
|
color: var(--hx-color-neutral-500, #6b7280);
|
|
449
583
|
}
|
|
450
584
|
|
|
585
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
586
|
+
|
|
587
|
+
@media (forced-colors: active) {
|
|
588
|
+
.label {
|
|
589
|
+
color: CanvasText;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.required-indicator {
|
|
593
|
+
color: LinkText;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.optional-indicator {
|
|
597
|
+
color: GrayText;
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
|
|
451
601
|
.visually-hidden {
|
|
452
602
|
position: absolute;
|
|
453
603
|
width: 1px;
|
|
@@ -798,6 +948,26 @@
|
|
|
798
948
|
.help-text--success {
|
|
799
949
|
--hx-help-text-color: var(--hx-color-success-700, #15803d);
|
|
800
950
|
}
|
|
951
|
+
|
|
952
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
953
|
+
|
|
954
|
+
@media (forced-colors: active) {
|
|
955
|
+
.help-text {
|
|
956
|
+
color: GrayText;
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
.help-text--error {
|
|
960
|
+
color: LinkText;
|
|
961
|
+
}
|
|
962
|
+
|
|
963
|
+
.help-text--warning {
|
|
964
|
+
color: CanvasText;
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
.help-text--success {
|
|
968
|
+
color: CanvasText;
|
|
969
|
+
}
|
|
970
|
+
}
|
|
801
971
|
/* ── hx-number-input ── */
|
|
802
972
|
:host {
|
|
803
973
|
display: block;
|
|
@@ -1044,6 +1214,84 @@
|
|
|
1044
1214
|
transition: none;
|
|
1045
1215
|
}
|
|
1046
1216
|
}
|
|
1217
|
+
|
|
1218
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
1219
|
+
|
|
1220
|
+
@media (forced-colors: active) {
|
|
1221
|
+
.field__input-wrapper {
|
|
1222
|
+
forced-color-adjust: none;
|
|
1223
|
+
background-color: Field;
|
|
1224
|
+
color: FieldText;
|
|
1225
|
+
border: 2px solid ButtonText;
|
|
1226
|
+
}
|
|
1227
|
+
|
|
1228
|
+
.field__input {
|
|
1229
|
+
color: FieldText;
|
|
1230
|
+
}
|
|
1231
|
+
|
|
1232
|
+
.field__input::placeholder {
|
|
1233
|
+
color: GrayText;
|
|
1234
|
+
}
|
|
1235
|
+
|
|
1236
|
+
.field__input-wrapper:focus-within {
|
|
1237
|
+
border-color: Highlight;
|
|
1238
|
+
box-shadow: none;
|
|
1239
|
+
}
|
|
1240
|
+
|
|
1241
|
+
.field__stepper {
|
|
1242
|
+
border-color: ButtonText;
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1245
|
+
.field__stepper-btn {
|
|
1246
|
+
forced-color-adjust: none;
|
|
1247
|
+
background-color: ButtonFace;
|
|
1248
|
+
color: ButtonText;
|
|
1249
|
+
border-color: ButtonText;
|
|
1250
|
+
}
|
|
1251
|
+
|
|
1252
|
+
.field__stepper-btn:hover:not(:disabled) {
|
|
1253
|
+
background-color: Highlight;
|
|
1254
|
+
color: HighlightText;
|
|
1255
|
+
}
|
|
1256
|
+
|
|
1257
|
+
.field__stepper-btn:focus-visible {
|
|
1258
|
+
outline-color: Highlight;
|
|
1259
|
+
}
|
|
1260
|
+
|
|
1261
|
+
.field__stepper-btn:disabled {
|
|
1262
|
+
color: GrayText;
|
|
1263
|
+
opacity: 1;
|
|
1264
|
+
}
|
|
1265
|
+
|
|
1266
|
+
:host([disabled]) {
|
|
1267
|
+
opacity: 1;
|
|
1268
|
+
}
|
|
1269
|
+
|
|
1270
|
+
:host([disabled]) .field__input-wrapper {
|
|
1271
|
+
border-color: GrayText;
|
|
1272
|
+
color: GrayText;
|
|
1273
|
+
}
|
|
1274
|
+
|
|
1275
|
+
:host([disabled]) .field__input {
|
|
1276
|
+
color: GrayText;
|
|
1277
|
+
}
|
|
1278
|
+
|
|
1279
|
+
.field--error .field__input-wrapper {
|
|
1280
|
+
border-color: LinkText;
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
.field__label {
|
|
1284
|
+
color: CanvasText;
|
|
1285
|
+
}
|
|
1286
|
+
|
|
1287
|
+
.field__help-text {
|
|
1288
|
+
color: GrayText;
|
|
1289
|
+
}
|
|
1290
|
+
|
|
1291
|
+
.field__error {
|
|
1292
|
+
color: LinkText;
|
|
1293
|
+
}
|
|
1294
|
+
}
|
|
1047
1295
|
/* ── hx-radio-group ── */
|
|
1048
1296
|
:host {
|
|
1049
1297
|
display: block;
|
|
@@ -1121,6 +1369,38 @@
|
|
|
1121
1369
|
color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
|
|
1122
1370
|
line-height: var(--hx-line-height-normal, 1.5);
|
|
1123
1371
|
}
|
|
1372
|
+
|
|
1373
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
1374
|
+
|
|
1375
|
+
@media (forced-colors: active) {
|
|
1376
|
+
.fieldset {
|
|
1377
|
+
border: none;
|
|
1378
|
+
}
|
|
1379
|
+
|
|
1380
|
+
.fieldset__legend {
|
|
1381
|
+
color: CanvasText;
|
|
1382
|
+
}
|
|
1383
|
+
|
|
1384
|
+
.fieldset--error .fieldset__legend {
|
|
1385
|
+
color: LinkText;
|
|
1386
|
+
}
|
|
1387
|
+
|
|
1388
|
+
:host([disabled]) {
|
|
1389
|
+
opacity: 1;
|
|
1390
|
+
}
|
|
1391
|
+
|
|
1392
|
+
:host([disabled]) .fieldset__legend {
|
|
1393
|
+
color: GrayText;
|
|
1394
|
+
}
|
|
1395
|
+
|
|
1396
|
+
.fieldset__help-text {
|
|
1397
|
+
color: GrayText;
|
|
1398
|
+
}
|
|
1399
|
+
|
|
1400
|
+
.fieldset__error {
|
|
1401
|
+
color: LinkText;
|
|
1402
|
+
}
|
|
1403
|
+
}
|
|
1124
1404
|
/* ── hx-rating ── */
|
|
1125
1405
|
:host {
|
|
1126
1406
|
display: inline-block;
|
|
@@ -1217,6 +1497,45 @@
|
|
|
1217
1497
|
transition: none;
|
|
1218
1498
|
}
|
|
1219
1499
|
}
|
|
1500
|
+
|
|
1501
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
1502
|
+
|
|
1503
|
+
@media (forced-colors: active) {
|
|
1504
|
+
.symbol {
|
|
1505
|
+
forced-color-adjust: none;
|
|
1506
|
+
color: ButtonText;
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
.symbol:focus-visible {
|
|
1510
|
+
outline: 3px solid Highlight;
|
|
1511
|
+
outline-offset: 2px;
|
|
1512
|
+
}
|
|
1513
|
+
|
|
1514
|
+
.symbol--full,
|
|
1515
|
+
.symbol--half {
|
|
1516
|
+
color: Highlight;
|
|
1517
|
+
}
|
|
1518
|
+
|
|
1519
|
+
.star-half__empty {
|
|
1520
|
+
color: ButtonText;
|
|
1521
|
+
}
|
|
1522
|
+
|
|
1523
|
+
.base:not(.base--readonly) .symbol:hover {
|
|
1524
|
+
color: Highlight;
|
|
1525
|
+
}
|
|
1526
|
+
|
|
1527
|
+
.symbol--disabled {
|
|
1528
|
+
color: GrayText;
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1531
|
+
:host([disabled]) {
|
|
1532
|
+
opacity: 1;
|
|
1533
|
+
}
|
|
1534
|
+
|
|
1535
|
+
:host([disabled]) .symbol {
|
|
1536
|
+
color: GrayText;
|
|
1537
|
+
}
|
|
1538
|
+
}
|
|
1220
1539
|
/* ── hx-select ── */
|
|
1221
1540
|
/* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */
|
|
1222
1541
|
:host {
|
|
@@ -1510,6 +1829,88 @@
|
|
|
1510
1829
|
transition: none;
|
|
1511
1830
|
}
|
|
1512
1831
|
}
|
|
1832
|
+
|
|
1833
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
1834
|
+
|
|
1835
|
+
@media (forced-colors: active) {
|
|
1836
|
+
.field__trigger {
|
|
1837
|
+
forced-color-adjust: none;
|
|
1838
|
+
background-color: Field;
|
|
1839
|
+
color: FieldText;
|
|
1840
|
+
border: 2px solid ButtonText;
|
|
1841
|
+
}
|
|
1842
|
+
|
|
1843
|
+
.field__trigger:focus-visible {
|
|
1844
|
+
outline: 3px solid Highlight;
|
|
1845
|
+
outline-offset: 2px;
|
|
1846
|
+
box-shadow: none;
|
|
1847
|
+
}
|
|
1848
|
+
|
|
1849
|
+
.field__trigger[aria-disabled='true'] {
|
|
1850
|
+
color: GrayText;
|
|
1851
|
+
border-color: GrayText;
|
|
1852
|
+
}
|
|
1853
|
+
|
|
1854
|
+
.field__trigger--placeholder .field__trigger-value {
|
|
1855
|
+
color: GrayText;
|
|
1856
|
+
}
|
|
1857
|
+
|
|
1858
|
+
.field__chevron::after {
|
|
1859
|
+
border-color: FieldText;
|
|
1860
|
+
}
|
|
1861
|
+
|
|
1862
|
+
.field__listbox {
|
|
1863
|
+
forced-color-adjust: none;
|
|
1864
|
+
background-color: Canvas;
|
|
1865
|
+
border: 2px solid CanvasText;
|
|
1866
|
+
box-shadow: none;
|
|
1867
|
+
}
|
|
1868
|
+
|
|
1869
|
+
.field__option {
|
|
1870
|
+
color: CanvasText;
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1873
|
+
.field__option:hover {
|
|
1874
|
+
background-color: Highlight;
|
|
1875
|
+
color: HighlightText;
|
|
1876
|
+
}
|
|
1877
|
+
|
|
1878
|
+
.field__option--selected {
|
|
1879
|
+
background-color: Highlight;
|
|
1880
|
+
color: HighlightText;
|
|
1881
|
+
}
|
|
1882
|
+
|
|
1883
|
+
.field__option--focused {
|
|
1884
|
+
outline-color: Highlight;
|
|
1885
|
+
background-color: Highlight;
|
|
1886
|
+
color: HighlightText;
|
|
1887
|
+
}
|
|
1888
|
+
|
|
1889
|
+
.field__option--disabled {
|
|
1890
|
+
color: GrayText;
|
|
1891
|
+
opacity: 1;
|
|
1892
|
+
}
|
|
1893
|
+
|
|
1894
|
+
.field--error .field__trigger {
|
|
1895
|
+
border-color: LinkText;
|
|
1896
|
+
}
|
|
1897
|
+
|
|
1898
|
+
:host([disabled]) {
|
|
1899
|
+
opacity: 1;
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
.field__label {
|
|
1903
|
+
color: CanvasText;
|
|
1904
|
+
}
|
|
1905
|
+
|
|
1906
|
+
.field__help-text {
|
|
1907
|
+
color: GrayText;
|
|
1908
|
+
}
|
|
1909
|
+
|
|
1910
|
+
.field__error {
|
|
1911
|
+
color: LinkText;
|
|
1912
|
+
}
|
|
1913
|
+
}
|
|
1513
1914
|
/* ── hx-slider ── */
|
|
1514
1915
|
:host {
|
|
1515
1916
|
display: block;
|
|
@@ -1820,10 +2221,14 @@
|
|
|
1820
2221
|
font-family: var(--hx-font-family-sans, sans-serif);
|
|
1821
2222
|
}
|
|
1822
2223
|
|
|
2224
|
+
/* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height.
|
|
2225
|
+
The track itself is smaller visually, but the row must meet the
|
|
2226
|
+
interactive touch target threshold for all size variants. */
|
|
1823
2227
|
.switch__control-row {
|
|
1824
2228
|
display: flex;
|
|
1825
2229
|
align-items: center;
|
|
1826
2230
|
gap: var(--hx-space-2, 0.5rem);
|
|
2231
|
+
min-height: var(--hx-touch-target-min, 2.75rem);
|
|
1827
2232
|
}
|
|
1828
2233
|
|
|
1829
2234
|
/* --- Track --- */
|
|
@@ -1966,6 +2371,64 @@
|
|
|
1966
2371
|
transition: none;
|
|
1967
2372
|
}
|
|
1968
2373
|
}
|
|
2374
|
+
|
|
2375
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
2376
|
+
|
|
2377
|
+
@media (forced-colors: active) {
|
|
2378
|
+
.switch__track {
|
|
2379
|
+
forced-color-adjust: none;
|
|
2380
|
+
background-color: ButtonFace;
|
|
2381
|
+
border: 2px solid ButtonText;
|
|
2382
|
+
}
|
|
2383
|
+
|
|
2384
|
+
.switch__track:focus-visible {
|
|
2385
|
+
outline: 3px solid Highlight;
|
|
2386
|
+
outline-offset: 2px;
|
|
2387
|
+
}
|
|
2388
|
+
|
|
2389
|
+
.switch__thumb {
|
|
2390
|
+
background-color: ButtonText;
|
|
2391
|
+
box-shadow: none;
|
|
2392
|
+
}
|
|
2393
|
+
|
|
2394
|
+
.switch--checked .switch__track {
|
|
2395
|
+
background-color: Highlight;
|
|
2396
|
+
border-color: Highlight;
|
|
2397
|
+
}
|
|
2398
|
+
|
|
2399
|
+
.switch--checked .switch__thumb {
|
|
2400
|
+
background-color: HighlightText;
|
|
2401
|
+
}
|
|
2402
|
+
|
|
2403
|
+
:host([disabled]) {
|
|
2404
|
+
opacity: 1;
|
|
2405
|
+
}
|
|
2406
|
+
|
|
2407
|
+
:host([disabled]) .switch__track {
|
|
2408
|
+
border-color: GrayText;
|
|
2409
|
+
background-color: ButtonFace;
|
|
2410
|
+
}
|
|
2411
|
+
|
|
2412
|
+
:host([disabled]) .switch__thumb {
|
|
2413
|
+
background-color: GrayText;
|
|
2414
|
+
}
|
|
2415
|
+
|
|
2416
|
+
:host([disabled]) .switch__label {
|
|
2417
|
+
color: GrayText;
|
|
2418
|
+
}
|
|
2419
|
+
|
|
2420
|
+
.switch__label {
|
|
2421
|
+
color: CanvasText;
|
|
2422
|
+
}
|
|
2423
|
+
|
|
2424
|
+
.switch__help-text {
|
|
2425
|
+
color: GrayText;
|
|
2426
|
+
}
|
|
2427
|
+
|
|
2428
|
+
.switch__error {
|
|
2429
|
+
color: LinkText;
|
|
2430
|
+
}
|
|
2431
|
+
}
|
|
1969
2432
|
/* ── hx-text-input ── */
|
|
1970
2433
|
:host {
|
|
1971
2434
|
display: block;
|
|
@@ -2137,6 +2600,10 @@
|
|
|
2137
2600
|
color: var(--hx-color-neutral-400, #adb5bd);
|
|
2138
2601
|
}
|
|
2139
2602
|
|
|
2603
|
+
.field__input:focus-visible {
|
|
2604
|
+
outline: none; /* wrapper ring handles keyboard focus indication */
|
|
2605
|
+
}
|
|
2606
|
+
|
|
2140
2607
|
.field__input:disabled {
|
|
2141
2608
|
cursor: not-allowed;
|
|
2142
2609
|
}
|
|
@@ -2180,6 +2647,64 @@
|
|
|
2180
2647
|
transition: none;
|
|
2181
2648
|
}
|
|
2182
2649
|
}
|
|
2650
|
+
|
|
2651
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
2652
|
+
|
|
2653
|
+
@media (forced-colors: active) {
|
|
2654
|
+
.field__input-wrapper {
|
|
2655
|
+
forced-color-adjust: none;
|
|
2656
|
+
background-color: Field;
|
|
2657
|
+
color: FieldText;
|
|
2658
|
+
border: 2px solid ButtonText;
|
|
2659
|
+
}
|
|
2660
|
+
|
|
2661
|
+
.field__input {
|
|
2662
|
+
color: FieldText;
|
|
2663
|
+
}
|
|
2664
|
+
|
|
2665
|
+
.field__input::placeholder {
|
|
2666
|
+
color: GrayText;
|
|
2667
|
+
}
|
|
2668
|
+
|
|
2669
|
+
.field__input-wrapper:focus-within {
|
|
2670
|
+
border-color: Highlight;
|
|
2671
|
+
box-shadow: none;
|
|
2672
|
+
}
|
|
2673
|
+
|
|
2674
|
+
.field__input:focus-visible {
|
|
2675
|
+
outline: 3px solid Highlight;
|
|
2676
|
+
outline-offset: -3px;
|
|
2677
|
+
}
|
|
2678
|
+
|
|
2679
|
+
:host([disabled]) {
|
|
2680
|
+
opacity: 1;
|
|
2681
|
+
}
|
|
2682
|
+
|
|
2683
|
+
:host([disabled]) .field__input-wrapper {
|
|
2684
|
+
border-color: GrayText;
|
|
2685
|
+
color: GrayText;
|
|
2686
|
+
}
|
|
2687
|
+
|
|
2688
|
+
:host([disabled]) .field__input {
|
|
2689
|
+
color: GrayText;
|
|
2690
|
+
}
|
|
2691
|
+
|
|
2692
|
+
.field--error .field__input-wrapper {
|
|
2693
|
+
border-color: LinkText;
|
|
2694
|
+
}
|
|
2695
|
+
|
|
2696
|
+
.field__label {
|
|
2697
|
+
color: CanvasText;
|
|
2698
|
+
}
|
|
2699
|
+
|
|
2700
|
+
.field__help-text {
|
|
2701
|
+
color: GrayText;
|
|
2702
|
+
}
|
|
2703
|
+
|
|
2704
|
+
.field__error {
|
|
2705
|
+
color: LinkText;
|
|
2706
|
+
}
|
|
2707
|
+
}
|
|
2183
2708
|
/* ── hx-textarea ── */
|
|
2184
2709
|
:host {
|
|
2185
2710
|
display: block;
|
|
@@ -2297,6 +2822,10 @@
|
|
|
2297
2822
|
color: var(--hx-color-neutral-400, #adb5bd);
|
|
2298
2823
|
}
|
|
2299
2824
|
|
|
2825
|
+
.field__textarea:focus-visible {
|
|
2826
|
+
outline: none; /* wrapper ring handles keyboard focus indication */
|
|
2827
|
+
}
|
|
2828
|
+
|
|
2300
2829
|
.field__textarea:disabled {
|
|
2301
2830
|
cursor: not-allowed;
|
|
2302
2831
|
}
|
|
@@ -2360,6 +2889,64 @@
|
|
|
2360
2889
|
color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
|
|
2361
2890
|
line-height: var(--hx-line-height-normal, 1.5);
|
|
2362
2891
|
}
|
|
2892
|
+
|
|
2893
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
2894
|
+
|
|
2895
|
+
@media (forced-colors: active) {
|
|
2896
|
+
.field__textarea-wrapper {
|
|
2897
|
+
forced-color-adjust: none;
|
|
2898
|
+
background-color: Field;
|
|
2899
|
+
color: FieldText;
|
|
2900
|
+
border: 2px solid ButtonText;
|
|
2901
|
+
}
|
|
2902
|
+
|
|
2903
|
+
.field__textarea {
|
|
2904
|
+
color: FieldText;
|
|
2905
|
+
}
|
|
2906
|
+
|
|
2907
|
+
.field__textarea::placeholder {
|
|
2908
|
+
color: GrayText;
|
|
2909
|
+
}
|
|
2910
|
+
|
|
2911
|
+
.field__textarea-wrapper:focus-within {
|
|
2912
|
+
border-color: Highlight;
|
|
2913
|
+
box-shadow: none;
|
|
2914
|
+
}
|
|
2915
|
+
|
|
2916
|
+
.field__textarea:focus-visible {
|
|
2917
|
+
outline: 3px solid Highlight;
|
|
2918
|
+
outline-offset: -3px;
|
|
2919
|
+
}
|
|
2920
|
+
|
|
2921
|
+
:host([disabled]) {
|
|
2922
|
+
opacity: 1;
|
|
2923
|
+
}
|
|
2924
|
+
|
|
2925
|
+
:host([disabled]) .field__textarea-wrapper {
|
|
2926
|
+
border-color: GrayText;
|
|
2927
|
+
color: GrayText;
|
|
2928
|
+
}
|
|
2929
|
+
|
|
2930
|
+
:host([disabled]) .field__textarea {
|
|
2931
|
+
color: GrayText;
|
|
2932
|
+
}
|
|
2933
|
+
|
|
2934
|
+
.field--error .field__textarea-wrapper {
|
|
2935
|
+
border-color: LinkText;
|
|
2936
|
+
}
|
|
2937
|
+
|
|
2938
|
+
.field__label {
|
|
2939
|
+
color: CanvasText;
|
|
2940
|
+
}
|
|
2941
|
+
|
|
2942
|
+
.field__help-text {
|
|
2943
|
+
color: GrayText;
|
|
2944
|
+
}
|
|
2945
|
+
|
|
2946
|
+
.field__error {
|
|
2947
|
+
color: LinkText;
|
|
2948
|
+
}
|
|
2949
|
+
}
|
|
2363
2950
|
/* ── hx-time-picker ── */
|
|
2364
2951
|
:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-time-picker-font-family, var(--hx-font-family-sans, sans-serif))}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-time-picker-label-color, var(--hx-color-neutral-700));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__combobox{position:relative;display:flex;align-items:center;border:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300));border-radius:var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-time-picker-bg, var(--hx-color-neutral-0));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);overflow:visible}.field__combobox:focus-within{border-color:var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__combobox{border-color:var(--hx-time-picker-error-color, var(--hx-color-error-500))}.field--error .field__combobox:focus-within{border-color:var(--hx-time-picker-error-color, var(--hx-color-error-500));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-time-picker-error-color, var(--hx-color-error-500)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-time-picker-color, var(--hx-color-neutral-800));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-size-10, 2.5rem);width:100%;cursor:text}.field__input::placeholder{color:var(--hx-color-neutral-400)}.field__input:disabled{cursor:not-allowed}.field__toggle{display:flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0 var(--hx-space-3, .75rem);color:var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));cursor:pointer;height:100%;min-height:var(--hx-size-10, 2.5rem);flex-shrink:0;border-inline-start:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300))}.field__toggle:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));outline-offset:-2px;border-radius:0 var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem))}.field__listbox{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));inset-inline-start:0;inset-inline-end:0;z-index:var(--hx-z-index-dropdown, 1000);background-color:var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));border:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300));border-radius:var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem));box-shadow:var( --hx-time-picker-listbox-shadow, 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent) );max-height:var(--hx-time-picker-listbox-max-height, 16rem);overflow-y:auto;padding:var(--hx-space-1, .25rem) 0;list-style:none;margin:0}@media(prefers-reduced-motion:no-preference){.field__listbox{animation:hx-listbox-enter var(--hx-transition-fast, .15s ease) forwards}}@keyframes hx-listbox-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.field__option{display:flex;align-items:center;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-size:var(--hx-font-size-md, 1rem);font-family:inherit;color:var(--hx-time-picker-option-color, var(--hx-color-neutral-800));cursor:pointer;transition:background-color var(--hx-transition-fast, .15s ease);line-height:var(--hx-line-height-normal, 1.5)}.field__option:hover,.field__option--active{background-color:var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));color:var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700))}.field__option--selected{background-color:var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));color:var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));font-weight:var(--hx-font-weight-medium, 500)}.field__option--selected.field__option--active{background-color:var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100))}@media(prefers-reduced-motion:reduce){.field__combobox,.field__option{transition:none}}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500)}.field__error{color:var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c))}
|
|
2365
2952
|
/* ── hx-toggle-button ── */
|
|
@@ -2417,10 +3004,13 @@
|
|
|
2417
3004
|
|
|
2418
3005
|
/* ─── Size Variants ─── */
|
|
2419
3006
|
|
|
3007
|
+
/* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target for sm variant.
|
|
3008
|
+
min-height uses --hx-touch-target-min to guarantee the interactive area
|
|
3009
|
+
meets the threshold even though the visual size token is smaller. */
|
|
2420
3010
|
.button--sm {
|
|
2421
3011
|
padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);
|
|
2422
3012
|
font-size: var(--hx-font-size-sm, 0.875rem);
|
|
2423
|
-
min-height: var(--hx-
|
|
3013
|
+
min-height: var(--hx-touch-target-min, 2.75rem);
|
|
2424
3014
|
}
|
|
2425
3015
|
|
|
2426
3016
|
.button--md {
|
|
@@ -2568,4 +3158,38 @@
|
|
|
2568
3158
|
.button {
|
|
2569
3159
|
transition: none;
|
|
2570
3160
|
}
|
|
3161
|
+
}
|
|
3162
|
+
|
|
3163
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
3164
|
+
|
|
3165
|
+
@media (forced-colors: active) {
|
|
3166
|
+
.button {
|
|
3167
|
+
forced-color-adjust: none;
|
|
3168
|
+
background-color: ButtonFace;
|
|
3169
|
+
color: ButtonText;
|
|
3170
|
+
border: 2px solid ButtonText;
|
|
3171
|
+
}
|
|
3172
|
+
|
|
3173
|
+
.button:focus-visible {
|
|
3174
|
+
outline: 3px solid Highlight;
|
|
3175
|
+
outline-offset: 2px;
|
|
3176
|
+
}
|
|
3177
|
+
|
|
3178
|
+
.button--pressed {
|
|
3179
|
+
background-color: Highlight;
|
|
3180
|
+
color: HighlightText;
|
|
3181
|
+
border-color: Highlight;
|
|
3182
|
+
box-shadow: none;
|
|
3183
|
+
}
|
|
3184
|
+
|
|
3185
|
+
.button[disabled] {
|
|
3186
|
+
background-color: ButtonFace;
|
|
3187
|
+
color: GrayText;
|
|
3188
|
+
border-color: GrayText;
|
|
3189
|
+
opacity: 1;
|
|
3190
|
+
}
|
|
3191
|
+
|
|
3192
|
+
:host([disabled]) {
|
|
3193
|
+
opacity: 1;
|
|
3194
|
+
}
|
|
2571
3195
|
}
|