@helixui/library 0.3.4 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +13562 -12579
- package/dist/components/hx-accordion/hx-accordion-item.d.ts +2 -0
- package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
- package/dist/components/hx-accordion/hx-accordion.d.ts +8 -0
- package/dist/components/hx-accordion/hx-accordion.d.ts.map +1 -1
- package/dist/components/hx-accordion/index.js +1 -1
- package/dist/components/hx-action-bar/hx-action-bar.d.ts.map +1 -1
- package/dist/components/hx-action-bar/index.js +1 -1
- package/dist/components/hx-alert/hx-alert.d.ts +2 -5
- package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
- package/dist/components/hx-alert/index.js +1 -1
- package/dist/components/hx-avatar/hx-avatar.d.ts.map +1 -1
- package/dist/components/hx-avatar/index.js +1 -1
- package/dist/components/hx-banner/hx-banner.d.ts +99 -0
- package/dist/components/hx-banner/hx-banner.d.ts.map +1 -0
- package/dist/components/hx-banner/hx-banner.styles.d.ts +2 -0
- package/dist/components/hx-banner/hx-banner.styles.d.ts.map +1 -0
- package/dist/components/hx-banner/index.d.ts +3 -0
- package/dist/components/hx-banner/index.d.ts.map +1 -0
- package/dist/components/hx-banner/index.js +5 -0
- package/dist/components/hx-banner/index.js.map +1 -0
- package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts +5 -0
- package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts.map +1 -1
- package/dist/components/hx-breadcrumb/index.js +1 -1
- package/dist/components/hx-button/hx-button.d.ts +17 -0
- package/dist/components/hx-button/hx-button.d.ts.map +1 -1
- package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
- package/dist/components/hx-button/index.js +1 -1
- package/dist/components/hx-button-group/hx-button-group.d.ts +8 -0
- package/dist/components/hx-button-group/hx-button-group.d.ts.map +1 -1
- package/dist/components/hx-button-group/index.js +1 -1
- package/dist/components/hx-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 +122 -0
- package/dist/components/hx-carousel/hx-carousel.d.ts.map +1 -1
- package/dist/components/hx-carousel/index.js +1 -1
- package/dist/components/hx-checkbox/hx-checkbox.d.ts +3 -1
- package/dist/components/hx-checkbox/hx-checkbox.d.ts.map +1 -1
- package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts +5 -1
- package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts.map +1 -1
- package/dist/components/hx-checkbox-group/index.js +1 -1
- package/dist/components/hx-code-snippet/hx-code-snippet.d.ts +21 -6
- package/dist/components/hx-code-snippet/hx-code-snippet.d.ts.map +1 -1
- package/dist/components/hx-code-snippet/index.js +1 -1
- package/dist/components/hx-color-picker/hx-color-picker.d.ts +13 -0
- package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
- package/dist/components/hx-color-picker/hx-color-picker.styles.d.ts.map +1 -1
- package/dist/components/hx-color-picker/index.js +1 -1
- package/dist/components/hx-combobox/hx-combobox.d.ts +24 -0
- package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
- package/dist/components/hx-combobox/hx-combobox.styles.d.ts.map +1 -1
- package/dist/components/hx-combobox/index.js +1 -1
- package/dist/components/hx-container/hx-container.d.ts +3 -1
- package/dist/components/hx-container/hx-container.d.ts.map +1 -1
- package/dist/components/hx-copy-button/hx-copy-button.d.ts +6 -0
- package/dist/components/hx-copy-button/hx-copy-button.d.ts.map +1 -1
- package/dist/components/hx-copy-button/index.js +1 -1
- package/dist/components/hx-counter/hx-counter.d.ts +79 -0
- package/dist/components/hx-counter/hx-counter.d.ts.map +1 -0
- package/dist/components/hx-counter/hx-counter.styles.d.ts +2 -0
- package/dist/components/hx-counter/hx-counter.styles.d.ts.map +1 -0
- package/dist/components/hx-counter/index.d.ts +3 -0
- package/dist/components/hx-counter/index.d.ts.map +1 -0
- package/dist/components/hx-counter/index.js +5 -0
- package/dist/components/hx-counter/index.js.map +1 -0
- package/dist/components/hx-data-table/hx-data-table.d.ts +6 -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 +124 -0
- package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
- package/dist/components/hx-date-picker/index.js +1 -1
- package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
- package/dist/components/hx-dialog/index.js +1 -1
- package/dist/components/hx-divider/hx-divider.d.ts +3 -0
- package/dist/components/hx-divider/hx-divider.d.ts.map +1 -1
- package/dist/components/hx-drawer/hx-drawer.d.ts +54 -1
- package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
- package/dist/components/hx-drawer/index.js +1 -1
- package/dist/components/hx-dropdown/hx-dropdown.d.ts +5 -0
- package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
- package/dist/components/hx-field/hx-field.d.ts +31 -1
- package/dist/components/hx-field/hx-field.d.ts.map +1 -1
- package/dist/components/hx-field/index.js +1 -1
- package/dist/components/hx-file-upload/hx-file-upload.d.ts +12 -0
- package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
- package/dist/components/hx-file-upload/index.js +1 -1
- package/dist/components/hx-form/hx-form.d.ts +24 -0
- package/dist/components/hx-form/hx-form.d.ts.map +1 -1
- package/dist/components/hx-form/index.js +1 -1
- package/dist/components/hx-help-text/hx-help-text.d.ts +3 -0
- package/dist/components/hx-help-text/hx-help-text.d.ts.map +1 -1
- package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
- package/dist/components/hx-icon-button/index.js +1 -1
- package/dist/components/hx-list/hx-list.d.ts.map +1 -1
- package/dist/components/hx-list/index.js +1 -1
- package/dist/components/hx-menu/hx-menu.d.ts +12 -0
- package/dist/components/hx-menu/hx-menu.d.ts.map +1 -1
- package/dist/components/hx-menu/index.js +1 -1
- package/dist/components/hx-meter/hx-meter.d.ts +2 -0
- package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
- package/dist/components/hx-meter/index.js +1 -1
- package/dist/components/hx-nav/hx-nav.d.ts +15 -1
- package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
- package/dist/components/hx-nav/index.js +1 -1
- package/dist/components/hx-number-input/hx-number-input.d.ts +2 -0
- package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
- package/dist/components/hx-number-input/index.js +1 -1
- package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts +14 -0
- package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts.map +1 -1
- package/dist/components/hx-overflow-menu/index.js +1 -1
- package/dist/components/hx-pagination/hx-pagination.d.ts +5 -0
- package/dist/components/hx-pagination/hx-pagination.d.ts.map +1 -1
- package/dist/components/hx-pagination/index.js +1 -1
- package/dist/components/hx-popover/hx-popover.d.ts +10 -38
- package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
- package/dist/components/hx-popover/index.js +1 -1
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts +10 -0
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
- package/dist/components/hx-progress-bar/index.js +1 -1
- package/dist/components/hx-progress-ring/hx-progress-ring.d.ts.map +1 -1
- package/dist/components/hx-progress-ring/index.js +1 -1
- package/dist/components/hx-radio-group/hx-radio-group.d.ts +75 -3
- package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
- package/dist/components/hx-radio-group/hx-radio.d.ts +3 -1
- package/dist/components/hx-radio-group/hx-radio.d.ts.map +1 -1
- package/dist/components/hx-radio-group/index.js +1 -1
- package/dist/components/hx-rating/hx-rating.d.ts +18 -3
- package/dist/components/hx-rating/hx-rating.d.ts.map +1 -1
- package/dist/components/hx-rating/index.js +1 -1
- package/dist/components/hx-select/hx-select.d.ts +9 -0
- package/dist/components/hx-select/hx-select.d.ts.map +1 -1
- package/dist/components/hx-select/index.js +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
- package/dist/components/hx-side-nav/index.js +1 -1
- package/dist/components/hx-slider/hx-slider.d.ts +2 -0
- package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
- package/dist/components/hx-slider/index.js +1 -1
- package/dist/components/hx-split-button/hx-split-button.d.ts +16 -0
- package/dist/components/hx-split-button/hx-split-button.d.ts.map +1 -1
- package/dist/components/hx-split-button/index.js +1 -1
- package/dist/components/hx-split-panel/hx-split-panel.d.ts +11 -0
- package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
- package/dist/components/hx-stat/hx-stat.d.ts +71 -0
- package/dist/components/hx-stat/hx-stat.d.ts.map +1 -0
- package/dist/components/hx-stat/hx-stat.styles.d.ts +2 -0
- package/dist/components/hx-stat/hx-stat.styles.d.ts.map +1 -0
- package/dist/components/hx-stat/index.d.ts +3 -0
- package/dist/components/hx-stat/index.d.ts.map +1 -0
- package/dist/components/hx-stat/index.js +5 -0
- package/dist/components/hx-stat/index.js.map +1 -0
- package/dist/components/hx-steps/hx-steps.d.ts +5 -0
- package/dist/components/hx-steps/hx-steps.d.ts.map +1 -1
- package/dist/components/hx-steps/index.js +1 -1
- package/dist/components/hx-structured-list/hx-structured-list.d.ts +2 -0
- package/dist/components/hx-structured-list/hx-structured-list.d.ts.map +1 -1
- package/dist/components/hx-structured-list/index.js +1 -1
- package/dist/components/hx-switch/hx-switch.d.ts +2 -0
- package/dist/components/hx-switch/hx-switch.d.ts.map +1 -1
- package/dist/components/hx-switch/index.js +1 -1
- package/dist/components/hx-table/hx-table.d.ts +60 -0
- package/dist/components/hx-table/hx-table.d.ts.map +1 -0
- package/dist/components/hx-table/hx-table.styles.d.ts +9 -0
- package/dist/components/hx-table/hx-table.styles.d.ts.map +1 -0
- package/dist/components/hx-table/hx-tbody.d.ts +23 -0
- package/dist/components/hx-table/hx-tbody.d.ts.map +1 -0
- package/dist/components/hx-table/hx-td.d.ts +46 -0
- package/dist/components/hx-table/hx-td.d.ts.map +1 -0
- package/dist/components/hx-table/hx-tfoot.d.ts +23 -0
- package/dist/components/hx-table/hx-tfoot.d.ts.map +1 -0
- package/dist/components/hx-table/hx-th.d.ts +61 -0
- package/dist/components/hx-table/hx-th.d.ts.map +1 -0
- package/dist/components/hx-table/hx-thead.d.ts +23 -0
- package/dist/components/hx-table/hx-thead.d.ts.map +1 -0
- package/dist/components/hx-table/hx-tr.d.ts +33 -0
- package/dist/components/hx-table/hx-tr.d.ts.map +1 -0
- package/dist/components/hx-table/index.d.ts +9 -0
- package/dist/components/hx-table/index.d.ts.map +1 -0
- package/dist/components/hx-table/index.js +11 -0
- package/dist/components/hx-table/index.js.map +1 -0
- package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
- package/dist/components/hx-tabs/index.js +1 -1
- package/dist/components/hx-text-input/hx-text-input.d.ts +1 -0
- package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
- package/dist/components/hx-text-input/index.js +1 -1
- package/dist/components/hx-textarea/hx-textarea.d.ts +14 -0
- package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
- package/dist/components/hx-textarea/hx-textarea.styles.d.ts.map +1 -1
- package/dist/components/hx-textarea/index.js +1 -1
- package/dist/components/hx-time-picker/hx-time-picker.d.ts +22 -1
- package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
- package/dist/components/hx-time-picker/index.js +1 -1
- package/dist/components/hx-toast/hx-toast-stack.d.ts +36 -0
- package/dist/components/hx-toast/hx-toast-stack.d.ts.map +1 -0
- package/dist/components/hx-toast/hx-toast.d.ts +0 -52
- package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
- package/dist/components/hx-toast/index.d.ts +6 -2
- package/dist/components/hx-toast/index.d.ts.map +1 -1
- package/dist/components/hx-toast/index.js +1 -1
- package/dist/components/hx-toast/toast-factory.d.ts +25 -0
- package/dist/components/hx-toast/toast-factory.d.ts.map +1 -0
- package/dist/components/hx-toggle-button/hx-toggle-button.d.ts +1 -0
- package/dist/components/hx-toggle-button/hx-toggle-button.d.ts.map +1 -1
- package/dist/components/hx-toggle-button/index.js +1 -1
- package/dist/components/hx-tooltip/hx-tooltip.d.ts +1 -45
- package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
- package/dist/components/hx-tooltip/index.js +1 -1
- package/dist/components/hx-top-nav/hx-top-nav.d.ts.map +1 -1
- package/dist/components/hx-top-nav/index.js +1 -1
- package/dist/components/hx-tree-view/hx-tree-item.d.ts +50 -0
- package/dist/components/hx-tree-view/hx-tree-item.d.ts.map +1 -1
- package/dist/components/hx-tree-view/hx-tree-view.d.ts +15 -0
- package/dist/components/hx-tree-view/hx-tree-view.d.ts.map +1 -1
- package/dist/components/hx-tree-view/index.js +1 -1
- package/dist/index.d.ts +20 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +168 -154
- package/dist/index.js.map +1 -1
- package/dist/shared/body-scroll-lock-VBa5TFP-.js +12 -0
- package/dist/shared/body-scroll-lock-VBa5TFP-.js.map +1 -0
- package/dist/shared/dev-warn-YlwPHjtX.js +6 -0
- package/dist/shared/dev-warn-YlwPHjtX.js.map +1 -0
- package/dist/shared/{hx-accordion-D95XSAft.js → hx-accordion-Cyswa6J3.js} +46 -43
- package/dist/shared/hx-accordion-Cyswa6J3.js.map +1 -0
- package/dist/shared/{hx-action-bar-B4i9tBCP.js → hx-action-bar-we_WJety.js} +41 -40
- package/dist/shared/hx-action-bar-we_WJety.js.map +1 -0
- package/dist/shared/{hx-alert-BQpT4gL3.js → hx-alert-Cg-zxRiU.js} +2 -2
- package/dist/shared/hx-alert-Cg-zxRiU.js.map +1 -0
- package/dist/shared/{hx-avatar-yHjmNdtf.js → hx-avatar-Cep6Urm3.js} +62 -65
- package/dist/shared/hx-avatar-Cep6Urm3.js.map +1 -0
- package/dist/shared/hx-banner-lxAIJ2kR.js +349 -0
- package/dist/shared/hx-banner-lxAIJ2kR.js.map +1 -0
- package/dist/shared/{hx-breadcrumb-item-DtSxRZ_W.js → hx-breadcrumb-item-C0rz0fzV.js} +46 -44
- package/dist/shared/hx-breadcrumb-item-C0rz0fzV.js.map +1 -0
- package/dist/shared/{hx-button-CtiJsmOg.js → hx-button-Cbhqpm5i.js} +111 -28
- package/dist/shared/hx-button-Cbhqpm5i.js.map +1 -0
- package/dist/shared/{hx-button-group-BMV5qFs4.js → hx-button-group-CWjWv-wS.js} +10 -10
- package/dist/shared/hx-button-group-CWjWv-wS.js.map +1 -0
- package/dist/shared/{hx-card-DAkEfpJd.js → hx-card-Bg4W4uXC.js} +16 -16
- package/dist/shared/hx-card-Bg4W4uXC.js.map +1 -0
- package/dist/shared/{hx-carousel-item-C2yBnM0r.js → hx-carousel-item-BKpmFbUT.js} +101 -63
- package/dist/shared/hx-carousel-item-BKpmFbUT.js.map +1 -0
- package/dist/shared/hx-checkbox-BMayOpAM.js.map +1 -1
- package/dist/shared/{hx-checkbox-group-DTS9iT4b.js → hx-checkbox-group-ydUdV9Sx.js} +7 -7
- package/dist/shared/hx-checkbox-group-ydUdV9Sx.js.map +1 -0
- package/dist/shared/{hx-code-snippet-DdEqy-1B.js → hx-code-snippet-B4hV7rWG.js} +65 -53
- package/dist/shared/hx-code-snippet-B4hV7rWG.js.map +1 -0
- package/dist/shared/{hx-color-picker-K2x_dyeG.js → hx-color-picker-BvfJ_h16.js} +100 -90
- package/dist/shared/hx-color-picker-BvfJ_h16.js.map +1 -0
- package/dist/shared/{hx-combobox-DjMigccw.js → hx-combobox-BBi3izKJ.js} +80 -44
- package/dist/shared/hx-combobox-BBi3izKJ.js.map +1 -0
- package/dist/shared/hx-container-DLUKnTi9.js.map +1 -1
- package/dist/shared/{hx-copy-button-BXL1xkxb.js → hx-copy-button-CLBA31to.js} +45 -50
- package/dist/shared/hx-copy-button-CLBA31to.js.map +1 -0
- package/dist/shared/hx-counter-D-1NXzGs.js +138 -0
- package/dist/shared/hx-counter-D-1NXzGs.js.map +1 -0
- package/dist/shared/{hx-data-table-D3NZvc3P.js → hx-data-table-DNiDVWR2.js} +100 -95
- package/dist/shared/hx-data-table-DNiDVWR2.js.map +1 -0
- package/dist/shared/{hx-date-picker-CIHwx9b3.js → hx-date-picker-D7yCK0nk.js} +17 -12
- package/dist/shared/hx-date-picker-D7yCK0nk.js.map +1 -0
- package/dist/shared/{hx-dialog-e4CSD8xX.js → hx-dialog-Z7Ou_AZ9.js} +37 -36
- package/dist/shared/hx-dialog-Z7Ou_AZ9.js.map +1 -0
- package/dist/shared/hx-divider-XgWIz4Mr.js.map +1 -1
- package/dist/shared/{hx-drawer-bTF0nbrg.js → hx-drawer-Dk-_xzy0.js} +59 -58
- package/dist/shared/hx-drawer-Dk-_xzy0.js.map +1 -0
- package/dist/shared/hx-dropdown-DnjLnkTj.js.map +1 -1
- package/dist/shared/{hx-field-Dz-7M_SC.js → hx-field-CDP8EXuj.js} +22 -19
- package/dist/shared/hx-field-CDP8EXuj.js.map +1 -0
- package/dist/shared/{hx-file-upload-DnYiIhyN.js → hx-file-upload-CUORgnKc.js} +17 -14
- package/dist/shared/hx-file-upload-CUORgnKc.js.map +1 -0
- package/dist/shared/{hx-form-BJeLK34m.js → hx-form-BFv_N1dm.js} +9 -1
- package/dist/shared/{hx-form-BJeLK34m.js.map → hx-form-BFv_N1dm.js.map} +1 -1
- package/dist/shared/hx-help-text-DaOPN1iB.js.map +1 -1
- package/dist/shared/{hx-icon-button-C_fsUJW4.js → hx-icon-button-C83bCR0K.js} +2 -4
- package/dist/shared/hx-icon-button-C83bCR0K.js.map +1 -0
- package/dist/shared/{hx-list-CF-AAnp-.js → hx-list-CdRNgeoP.js} +7 -9
- package/dist/shared/{hx-list-CF-AAnp-.js.map → hx-list-CdRNgeoP.js.map} +1 -1
- package/dist/shared/{hx-menu-divider-Buc5XA9E.js → hx-menu-divider-11Dp2VfM.js} +50 -48
- package/dist/shared/hx-menu-divider-11Dp2VfM.js.map +1 -0
- package/dist/shared/{hx-meter-qcXl0zCL.js → hx-meter-UinDQjl6.js} +43 -37
- package/dist/shared/hx-meter-UinDQjl6.js.map +1 -0
- package/dist/shared/{hx-nav-CWwByFdq.js → hx-nav-DSpwWYUX.js} +81 -81
- package/dist/shared/hx-nav-DSpwWYUX.js.map +1 -0
- package/dist/shared/{hx-nav-item-DItaMWl0.js → hx-nav-item-D54-5eUM.js} +12 -12
- package/dist/shared/hx-nav-item-D54-5eUM.js.map +1 -0
- package/dist/shared/{hx-number-input-CS6_w1lT.js → hx-number-input-BP6TIA92.js} +5 -1
- package/dist/shared/hx-number-input-BP6TIA92.js.map +1 -0
- package/dist/shared/{hx-overflow-menu-CAS1Mlus.js → hx-overflow-menu-C7k5wlZy.js} +39 -34
- package/dist/shared/hx-overflow-menu-C7k5wlZy.js.map +1 -0
- package/dist/shared/{hx-pagination-DNFgXQm3.js → hx-pagination-BQ0cLTuB.js} +65 -62
- package/dist/shared/hx-pagination-BQ0cLTuB.js.map +1 -0
- package/dist/shared/{hx-popover-BjAyLbzp.js → hx-popover-BQsgrJCW.js} +7 -7
- package/dist/shared/hx-popover-BQsgrJCW.js.map +1 -0
- package/dist/shared/{hx-progress-bar-b3_m1hna.js → hx-progress-bar-C_mdPVF-.js} +61 -52
- package/dist/shared/hx-progress-bar-C_mdPVF-.js.map +1 -0
- package/dist/shared/{hx-progress-ring-wOSv2y_I.js → hx-progress-ring-BHJBaXNk.js} +2 -4
- package/dist/shared/hx-progress-ring-BHJBaXNk.js.map +1 -0
- package/dist/shared/{hx-radio-CGtFKls2.js → hx-radio-Bqyi8re3.js} +44 -12
- package/dist/shared/hx-radio-Bqyi8re3.js.map +1 -0
- package/dist/shared/{hx-rating-C4kTOyHF.js → hx-rating-Y_t7Z4qb.js} +104 -67
- package/dist/shared/hx-rating-Y_t7Z4qb.js.map +1 -0
- package/dist/shared/{hx-select-D9bYJcDv.js → hx-select-BBae2LqN.js} +16 -10
- package/dist/shared/hx-select-BBae2LqN.js.map +1 -0
- package/dist/shared/{hx-slider-Duzmuid9.js → hx-slider-CpnxH2UP.js} +9 -5
- package/dist/shared/{hx-slider-Duzmuid9.js.map → hx-slider-CpnxH2UP.js.map} +1 -1
- package/dist/shared/{hx-split-button-DhncgAtZ.js → hx-split-button-BvwoG8h2.js} +14 -13
- package/dist/shared/hx-split-button-BvwoG8h2.js.map +1 -0
- package/dist/shared/hx-split-panel-Cxkeauwe.js.map +1 -1
- package/dist/shared/hx-stat-C2wfph8W.js +212 -0
- package/dist/shared/hx-stat-C2wfph8W.js.map +1 -0
- package/dist/shared/{hx-step-nMT0fHEn.js → hx-step-DYoIumpR.js} +29 -29
- package/dist/shared/hx-step-DYoIumpR.js.map +1 -0
- package/dist/shared/{hx-structured-list-CMja1VXz.js → hx-structured-list-CMWllxGg.js} +23 -17
- package/dist/shared/{hx-structured-list-CMja1VXz.js.map → hx-structured-list-CMWllxGg.js.map} +1 -1
- package/dist/shared/{hx-switch-BPvIcDpM.js → hx-switch-DkKchcuP.js} +8 -3
- package/dist/shared/{hx-switch-BPvIcDpM.js.map → hx-switch-DkKchcuP.js.map} +1 -1
- package/dist/shared/{hx-tab-panel-C7h5lRpw.js → hx-tab-panel-CHB0u1zF.js} +91 -85
- package/dist/shared/hx-tab-panel-CHB0u1zF.js.map +1 -0
- package/dist/shared/hx-td-CVwCGBYf.js +604 -0
- package/dist/shared/hx-td-CVwCGBYf.js.map +1 -0
- package/dist/shared/{hx-text-input-BUMgOQHX.js → hx-text-input-BrCjo4fJ.js} +5 -1
- package/dist/shared/hx-text-input-BrCjo4fJ.js.map +1 -0
- package/dist/shared/{hx-textarea-B_nmxzhC.js → hx-textarea-BsQdB1Rk.js} +51 -18
- package/dist/shared/hx-textarea-BsQdB1Rk.js.map +1 -0
- package/dist/shared/{hx-time-picker-a-BCkecJ.js → hx-time-picker-DRRAFuVd.js} +62 -54
- package/dist/shared/hx-time-picker-DRRAFuVd.js.map +1 -0
- package/dist/shared/{hx-toggle-button--xCXWRJW.js → hx-toggle-button-D4F1soEM.js} +34 -22
- package/dist/shared/{hx-toggle-button--xCXWRJW.js.map → hx-toggle-button-D4F1soEM.js.map} +1 -1
- package/dist/shared/{hx-tooltip-DN6lMlP5.js → hx-tooltip-Bk1iQRHs.js} +23 -23
- package/dist/shared/hx-tooltip-Bk1iQRHs.js.map +1 -0
- package/dist/shared/{hx-top-nav-8lDKNZUj.js → hx-top-nav-DzW7XLv-.js} +42 -29
- package/dist/shared/{hx-top-nav-8lDKNZUj.js.map → hx-top-nav-DzW7XLv-.js.map} +1 -1
- package/dist/shared/{hx-tree-item-Cesh_du5.js → hx-tree-item-DdH6RbMs.js} +170 -111
- package/dist/shared/hx-tree-item-DdH6RbMs.js.map +1 -0
- package/dist/shared/{hx-toast-ikwh9Y03.js → toast-factory-B8jicczW.js} +69 -66
- package/dist/shared/toast-factory-B8jicczW.js.map +1 -0
- package/dist/tools/cem-a11y-analyzer/analyzers/aria-analyzer.d.ts +12 -0
- package/dist/tools/cem-a11y-analyzer/analyzers/aria-analyzer.d.ts.map +1 -0
- package/dist/tools/cem-a11y-analyzer/analyzers/focus-analyzer.d.ts +13 -0
- package/dist/tools/cem-a11y-analyzer/analyzers/focus-analyzer.d.ts.map +1 -0
- package/dist/tools/cem-a11y-analyzer/analyzers/form-analyzer.d.ts +13 -0
- package/dist/tools/cem-a11y-analyzer/analyzers/form-analyzer.d.ts.map +1 -0
- package/dist/tools/cem-a11y-analyzer/analyzers/keyboard-analyzer.d.ts +12 -0
- package/dist/tools/cem-a11y-analyzer/analyzers/keyboard-analyzer.d.ts.map +1 -0
- package/dist/tools/cem-a11y-analyzer/analyzers/label-analyzer.d.ts +13 -0
- package/dist/tools/cem-a11y-analyzer/analyzers/label-analyzer.d.ts.map +1 -0
- package/dist/tools/cem-a11y-analyzer/analyzers/motion-analyzer.d.ts +12 -0
- package/dist/tools/cem-a11y-analyzer/analyzers/motion-analyzer.d.ts.map +1 -0
- package/dist/tools/cem-a11y-analyzer/index.d.ts +14 -0
- package/dist/tools/cem-a11y-analyzer/index.d.ts.map +1 -0
- package/dist/tools/cem-a11y-analyzer/reporter.d.ts +6 -0
- package/dist/tools/cem-a11y-analyzer/reporter.d.ts.map +1 -0
- package/dist/tools/cem-a11y-analyzer/scorer.d.ts +22 -0
- package/dist/tools/cem-a11y-analyzer/scorer.d.ts.map +1 -0
- package/dist/tools/cem-a11y-analyzer/types.d.ts +171 -0
- package/dist/tools/cem-a11y-analyzer/types.d.ts.map +1 -0
- package/dist/utils/body-scroll-lock.d.ts +34 -0
- package/dist/utils/body-scroll-lock.d.ts.map +1 -0
- package/dist/utils/dev-warn.d.ts +19 -0
- package/dist/utils/dev-warn.d.ts.map +1 -0
- package/package.json +1 -1
- package/dist/shared/hx-accordion-D95XSAft.js.map +0 -1
- package/dist/shared/hx-action-bar-B4i9tBCP.js.map +0 -1
- package/dist/shared/hx-alert-BQpT4gL3.js.map +0 -1
- package/dist/shared/hx-avatar-yHjmNdtf.js.map +0 -1
- package/dist/shared/hx-breadcrumb-item-DtSxRZ_W.js.map +0 -1
- package/dist/shared/hx-button-CtiJsmOg.js.map +0 -1
- package/dist/shared/hx-button-group-BMV5qFs4.js.map +0 -1
- package/dist/shared/hx-card-DAkEfpJd.js.map +0 -1
- package/dist/shared/hx-carousel-item-C2yBnM0r.js.map +0 -1
- package/dist/shared/hx-checkbox-group-DTS9iT4b.js.map +0 -1
- package/dist/shared/hx-code-snippet-DdEqy-1B.js.map +0 -1
- package/dist/shared/hx-color-picker-K2x_dyeG.js.map +0 -1
- package/dist/shared/hx-combobox-DjMigccw.js.map +0 -1
- package/dist/shared/hx-copy-button-BXL1xkxb.js.map +0 -1
- package/dist/shared/hx-data-table-D3NZvc3P.js.map +0 -1
- package/dist/shared/hx-date-picker-CIHwx9b3.js.map +0 -1
- package/dist/shared/hx-dialog-e4CSD8xX.js.map +0 -1
- package/dist/shared/hx-drawer-bTF0nbrg.js.map +0 -1
- package/dist/shared/hx-field-Dz-7M_SC.js.map +0 -1
- package/dist/shared/hx-file-upload-DnYiIhyN.js.map +0 -1
- package/dist/shared/hx-icon-button-C_fsUJW4.js.map +0 -1
- package/dist/shared/hx-menu-divider-Buc5XA9E.js.map +0 -1
- package/dist/shared/hx-meter-qcXl0zCL.js.map +0 -1
- package/dist/shared/hx-nav-CWwByFdq.js.map +0 -1
- package/dist/shared/hx-nav-item-DItaMWl0.js.map +0 -1
- package/dist/shared/hx-number-input-CS6_w1lT.js.map +0 -1
- package/dist/shared/hx-overflow-menu-CAS1Mlus.js.map +0 -1
- package/dist/shared/hx-pagination-DNFgXQm3.js.map +0 -1
- package/dist/shared/hx-popover-BjAyLbzp.js.map +0 -1
- package/dist/shared/hx-progress-bar-b3_m1hna.js.map +0 -1
- package/dist/shared/hx-progress-ring-wOSv2y_I.js.map +0 -1
- package/dist/shared/hx-radio-CGtFKls2.js.map +0 -1
- package/dist/shared/hx-rating-C4kTOyHF.js.map +0 -1
- package/dist/shared/hx-select-D9bYJcDv.js.map +0 -1
- package/dist/shared/hx-split-button-DhncgAtZ.js.map +0 -1
- package/dist/shared/hx-step-nMT0fHEn.js.map +0 -1
- package/dist/shared/hx-tab-panel-C7h5lRpw.js.map +0 -1
- package/dist/shared/hx-text-input-BUMgOQHX.js.map +0 -1
- package/dist/shared/hx-textarea-B_nmxzhC.js.map +0 -1
- package/dist/shared/hx-time-picker-a-BCkecJ.js.map +0 -1
- package/dist/shared/hx-toast-ikwh9Y03.js.map +0 -1
- package/dist/shared/hx-tooltip-DN6lMlP5.js.map +0 -1
- package/dist/shared/hx-tree-item-Cesh_du5.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-date-picker-CIHwx9b3.js","sources":["../../src/components/hx-date-picker/hx-date-picker.styles.ts","../../src/components/hx-date-picker/hx-date-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDatePickerStyles = css`\n :host {\n display: block;\n position: relative;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));\n position: relative;\n }\n\n /* ─── Label ─── */\n\n .field__label-wrapper {\n display: contents;\n }\n\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #343a40));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__required-marker {\n color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n /* ─── Input Wrapper ─── */\n\n .field__input-wrapper {\n display: flex;\n align-items: stretch;\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));\n border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));\n transition:\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n overflow: hidden;\n }\n\n .field__input-wrapper:focus-within {\n border-color: var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n /* ─── Error State ─── */\n\n .field--error .field__input-wrapper {\n border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));\n }\n\n .field--error .field__input-wrapper:focus-within {\n border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n /* ─── Native Input ─── */\n\n .field__input {\n flex: 1;\n border: none;\n outline: none;\n background: transparent;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-family: inherit;\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-date-picker-color, var(--hx-color-neutral-800, #212529));\n line-height: var(--hx-line-height-normal, 1.5);\n min-height: var(--hx-size-10, 2.5rem);\n width: 100%;\n cursor: default;\n }\n\n .field__input::placeholder {\n color: var(--hx-color-neutral-400, #adb5bd);\n }\n\n .field__input:disabled {\n cursor: not-allowed;\n }\n\n /* ─── Calendar Trigger Button ─── */\n\n .field__trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--hx-space-3, 0.75rem);\n border: none;\n border-left: var(--hx-border-width-thin, 1px) solid\n var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));\n background: transparent;\n color: var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #6c757d));\n cursor: pointer;\n flex-shrink: 0;\n transition: color var(--hx-transition-fast, 150ms ease);\n outline: none;\n }\n\n .field__trigger:focus-visible {\n color: var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n background-color: color-mix(\n in srgb,\n var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) 8%,\n transparent\n );\n }\n\n .field__trigger:hover:not(:disabled) {\n color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #343a40));\n background-color: color-mix(in srgb, var(--hx-color-neutral-900, #212529) 4%, transparent);\n }\n\n .field__trigger:disabled {\n cursor: not-allowed;\n }\n\n /* ─── Calendar Popup ─── */\n\n .calendar {\n position: absolute;\n top: calc(100% + var(--hx-space-1, 0.25rem));\n left: 0;\n z-index: var(--hx-z-index-dropdown, 1000);\n min-width: var(--hx-date-picker-calendar-min-width, 18rem);\n background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e9ecef));\n border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));\n box-shadow: var(\n --hx-date-picker-calendar-shadow,\n 0 4px 6px -1px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)),\n 0 2px 4px -2px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1))\n );\n padding: var(--hx-space-3, 0.75rem);\n outline: none;\n }\n\n @media (prefers-reduced-motion: no-preference) {\n .calendar {\n animation: calendar-appear var(--hx-transition-fast, 150ms ease) forwards;\n }\n }\n\n @keyframes calendar-appear {\n from {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* ─── Month Navigation ─── */\n\n .calendar__nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--hx-space-3, 0.75rem);\n }\n\n .calendar__nav-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--hx-size-8, 2rem);\n height: var(--hx-size-8, 2rem);\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-color-neutral-600, #495057);\n cursor: pointer;\n font-size: var(--hx-font-size-lg, 1.125rem);\n line-height: 1;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease);\n outline: none;\n }\n\n .calendar__nav-btn:hover {\n background-color: var(--hx-color-neutral-100, #f8f9fa);\n color: var(--hx-color-neutral-900, #212529);\n }\n\n .calendar__nav-btn:focus-visible {\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n }\n\n .calendar__month-label {\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n color: var(--hx-color-neutral-800, #212529);\n flex: 1;\n text-align: center;\n }\n\n /* ─── Calendar Grid ─── */\n\n .calendar__grid {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n }\n\n .calendar__row {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: var(--hx-space-1, 0.25rem);\n }\n\n .calendar__weekday {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--hx-size-8, 2rem);\n font-size: var(--hx-font-size-xs, 0.75rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n color: var(--hx-color-neutral-500, #6c757d);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n /* ─── Day Cells ─── */\n\n .calendar__day-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .calendar__day {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--hx-size-8, 2rem);\n height: var(--hx-size-8, 2rem);\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-color-neutral-800, #212529);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-family: inherit;\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease);\n outline: none;\n position: relative;\n }\n\n .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {\n background-color: var(--hx-color-neutral-100, #f8f9fa);\n color: var(--hx-color-neutral-900, #212529);\n }\n\n .calendar__day:focus-visible {\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n z-index: 1;\n }\n\n .calendar__day--selected {\n background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));\n color: var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));\n font-weight: var(--hx-font-weight-semibold, 600);\n }\n\n .calendar__day--selected:hover {\n background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8));\n }\n\n .calendar__day--today:not(.calendar__day--selected) {\n font-weight: var(--hx-font-weight-bold, 700);\n color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));\n }\n\n .calendar__day--today:not(.calendar__day--selected)::after {\n content: '';\n position: absolute;\n bottom: 0.2rem;\n left: 50%;\n transform: translateX(-50%);\n width: 0.25rem;\n height: 0.25rem;\n border-radius: 50%;\n background-color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));\n }\n\n .calendar__day--disabled {\n opacity: var(--hx-opacity-disabled, 0.4);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* ─── Live Region ─── */\n\n .calendar__live-region {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Help Text & Error Messages ─── */\n\n .field__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-color-neutral-500, #6c757d);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .calendar__nav-btn:disabled {\n opacity: var(--hx-opacity-disabled, 0.4);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* ─── Forced Colors (High Contrast Mode) ─── */\n\n @media (forced-colors: active) {\n .field__input-wrapper {\n border: 1px solid ButtonText;\n }\n\n .field__input-wrapper:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n box-shadow: none;\n }\n\n .calendar__day:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n\n .calendar__day--selected {\n background-color: Highlight;\n color: HighlightText;\n border: 1px solid Highlight;\n }\n\n .calendar__day--today:not(.calendar__day--selected) {\n border: 2px solid LinkText;\n }\n\n .calendar__day--today:not(.calendar__day--selected)::after {\n display: none;\n }\n\n .calendar__day--disabled {\n color: GrayText;\n }\n\n .calendar__nav-btn:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n\n .field--error .field__input-wrapper {\n border-color: LinkText;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDatePickerStyles } from './hx-date-picker.styles.js';\n\n/**\n * A date picker component with a calendar popup, keyboard navigation,\n * and full form association for healthcare-grade data entry.\n *\n * @summary Form-associated date picker with calendar popup and WCAG 2.1 AA accessibility.\n *\n * @tag hx-date-picker\n *\n * @slot label - Custom label content (overrides the label property).\n * @slot help - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property).\n *\n * @fires {CustomEvent<{value: string, date: Date | null}>} hx-change - Dispatched when a date is selected.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart input-wrapper - The wrapper around input and trigger.\n * @csspart input - The readonly text input displaying the formatted date.\n * @csspart trigger - The calendar icon button.\n * @csspart calendar - The calendar popup dialog.\n * @csspart month-nav - The month navigation header.\n * @csspart day - An individual day button in the calendar grid.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-date-picker-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-date-picker-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-date-picker-border-color=var(--hx-color-neutral-300)] - Border color.\n * @cssprop [--hx-date-picker-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-date-picker-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-date-picker-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-date-picker-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-date-picker-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-date-picker-trigger-color=var(--hx-color-neutral-500)] - Trigger icon color.\n * @cssprop [--hx-date-picker-calendar-bg=var(--hx-color-neutral-0)] - Calendar background color.\n * @cssprop [--hx-date-picker-calendar-border-color=var(--hx-color-neutral-200)] - Calendar border color.\n * @cssprop [--hx-date-picker-calendar-min-width=18rem] - Calendar minimum width.\n * @cssprop [--hx-date-picker-selected-bg=var(--hx-color-primary-500)] - Selected day background.\n * @cssprop [--hx-date-picker-selected-color=var(--hx-color-neutral-0)] - Selected day text color.\n * @cssprop [--hx-date-picker-today-color=var(--hx-color-primary-600)] - Today indicator color.\n * @cssprop [--hx-date-picker-calendar-shadow=0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)] - Calendar popup box shadow.\n */\n\nlet _instanceCounter = 0;\n\n@customElement('hx-date-picker')\nexport class HelixDatePicker extends LitElement {\n static override styles = [tokenStyles, helixDatePickerStyles];\n\n // ─── Form Association ───\n\n static formAssociated = true;\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /**\n * The name of the field, used for form submission.\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * The current value as an ISO 8601 date string (e.g. 2026-03-04).\n * @attr value\n */\n @property({ type: String })\n value = '';\n\n /**\n * The minimum selectable date as an ISO 8601 string.\n * @attr min\n */\n @property({ type: String })\n min = '';\n\n /**\n * The maximum selectable date as an ISO 8601 string.\n * @attr max\n */\n @property({ type: String })\n max = '';\n\n /**\n * The visible label text.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Whether the field is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the field is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Error message to display. When set, the field enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the field for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Display format hint shown as placeholder (e.g. MM/DD/YYYY).\n * @attr format\n */\n @property({ type: String })\n format = 'MM/DD/YYYY';\n\n /**\n * Locale string used for formatting the display value.\n * @attr locale\n */\n @property({ type: String })\n locale = 'en-US';\n\n // ─── Internal State ───\n\n @state() private _isOpen = false;\n @state() private _viewYear: number = new Date().getFullYear();\n @state() private _viewMonth: number = new Date().getMonth();\n @state() private _focusedDay: number | null = null;\n @state() private _liveMessage = '';\n\n // ─── Internal References ───\n\n @query('.field__input')\n private _input!: HTMLInputElement;\n\n @query('.field__trigger')\n private _trigger!: HTMLButtonElement;\n\n @query('.calendar')\n private _calendar!: HTMLElement;\n\n // ─── Unique IDs ───\n\n private _id = `hx-date-picker-${++_instanceCounter}`;\n private _inputId = `${this._id}-input`;\n private _helpTextId = `${this._id}-help`;\n private _errorId = `${this._id}-error`;\n private _calendarId = `${this._id}-calendar`;\n private _liveRegionId = `${this._id}-live`;\n\n // ─── Slot Tracking ───\n\n private _hasLabelSlot = false;\n private _hasErrorSlot = false;\n\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlot = slot.assignedElements().length > 0;\n if (this._hasLabelSlot) {\n const slottedLabel = slot.assignedElements()[0];\n if (slottedLabel && !slottedLabel.id) {\n slottedLabel.id = `${this._inputId}-slotted-label`;\n }\n }\n this.requestUpdate();\n }\n\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedElements().length > 0;\n this.requestUpdate();\n }\n\n // ─── Bound Handler References ───\n\n private _boundHandleOutsideClick: (e: MouseEvent) => void = () => undefined;\n private _boundHandleDocumentKeydown: (e: KeyboardEvent) => void = () => undefined;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._boundHandleOutsideClick = this._handleOutsideClick.bind(this);\n this._boundHandleDocumentKeydown = this._handleDocumentKeydown.bind(this);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._boundHandleOutsideClick);\n document.removeEventListener('keydown', this._boundHandleDocumentKeydown);\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('value')) {\n this._internals.setFormValue(this.value);\n this._updateValidity();\n }\n\n if (changedProperties.has('_isOpen')) {\n if (this._isOpen) {\n // Sync view to the currently selected date when opening.\n const selected = this._parseISODate(this.value);\n if (selected) {\n this._viewYear = selected.getFullYear();\n this._viewMonth = selected.getMonth();\n }\n document.addEventListener('click', this._boundHandleOutsideClick);\n document.addEventListener('keydown', this._boundHandleDocumentKeydown);\n // Focus the calendar after it renders.\n this.updateComplete.then(() => {\n this._focusActiveDay();\n });\n } else {\n document.removeEventListener('click', this._boundHandleOutsideClick);\n document.removeEventListener('keydown', this._boundHandleDocumentKeydown);\n this._focusedDay = null;\n }\n }\n\n if (changedProperties.has('_viewMonth') || changedProperties.has('_viewYear')) {\n if (this._isOpen) {\n const monthName = this._getMonthName(this._viewMonth);\n this._liveMessage = `${monthName} ${this._viewYear}`;\n this.updateComplete.then(() => {\n this._focusActiveDay();\n });\n }\n }\n }\n\n private _handleOutsideClick(e: MouseEvent): void {\n const path = e.composedPath();\n if (!path.includes(this)) {\n this._closeCalendar();\n }\n }\n\n private _handleDocumentKeydown(e: KeyboardEvent): void {\n if (e.key === 'Escape' && this._isOpen) {\n this._closeCalendar();\n }\n }\n\n // ─── Form Integration ───\n\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n private _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || 'This field is required.',\n this._input,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n formResetCallback(): void {\n this.value = '';\n this._internals.setFormValue('');\n this._isOpen = false;\n }\n\n formStateRestoreCallback(state: string): void {\n this.value = state;\n }\n\n // ─── Public Methods ───\n\n override focus(options?: FocusOptions): void {\n this._trigger?.focus(options);\n }\n\n // ─── Date Utilities ───\n\n private _parseISODate(iso: string): Date | null {\n if (!iso) return null;\n const d = new Date(iso + 'T00:00:00');\n return isNaN(d.getTime()) ? null : d;\n }\n\n private _toISO(date: Date): string {\n const y = date.getFullYear();\n const m = String(date.getMonth() + 1).padStart(2, '0');\n const d = String(date.getDate()).padStart(2, '0');\n return `${y}-${m}-${d}`;\n }\n\n private _formatForDisplay(iso: string): string {\n const date = this._parseISODate(iso);\n if (!date) return '';\n return date.toLocaleDateString(this.locale, {\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n });\n }\n\n private _isDateDisabled(date: Date): boolean {\n const iso = this._toISO(date);\n if (this.min && iso < this.min) return true;\n if (this.max && iso > this.max) return true;\n return false;\n }\n\n private _isSameDay(a: Date, b: Date): boolean {\n return (\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate()\n );\n }\n\n private _isToday(date: Date): boolean {\n return this._isSameDay(date, new Date());\n }\n\n private _getMonthName(month: number): string {\n return new Date(2000, month, 1).toLocaleDateString(this.locale, { month: 'long' });\n }\n\n private _getDayName(dayIndex: number): string {\n // dayIndex: 0=Sun, 1=Mon, ...\n return new Date(2000, 0, 2 + dayIndex).toLocaleDateString(this.locale, {\n weekday: 'short',\n });\n }\n\n // ─── Calendar Grid ───\n\n /**\n * Returns an array of Date objects (or null for padding cells) representing\n * the 6-week grid for the current view month.\n */\n private _getDaysInGrid(): (Date | null)[] {\n const firstOfMonth = new Date(this._viewYear, this._viewMonth, 1);\n const leadingBlanks = firstOfMonth.getDay(); // 0=Sun\n const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n\n const cells: (Date | null)[] = [];\n\n // Leading blank cells for days before the 1st\n for (let i = 0; i < leadingBlanks; i++) {\n cells.push(null);\n }\n\n // Days of current month\n for (let d = 1; d <= daysInMonth; d++) {\n cells.push(new Date(this._viewYear, this._viewMonth, d));\n }\n\n // Trailing blank cells to complete a full 7-column row\n const remainder = cells.length % 7;\n if (remainder !== 0) {\n for (let i = 0; i < 7 - remainder; i++) {\n cells.push(null);\n }\n }\n\n return cells;\n }\n\n // ─── Calendar Open/Close ───\n\n private _openCalendar(): void {\n if (this.disabled) return;\n this._isOpen = true;\n }\n\n private _closeCalendar(): void {\n this._isOpen = false;\n // Return focus to trigger after calendar closes.\n this.updateComplete.then(() => {\n this._trigger?.focus();\n });\n }\n\n private _toggleCalendar(): void {\n if (this._isOpen) {\n this._closeCalendar();\n } else {\n this._openCalendar();\n }\n }\n\n // ─── Focus Management ───\n\n private _focusActiveDay(): void {\n if (!this._calendar) return;\n\n const selectedISO = this.value;\n const selected = this._parseISODate(selectedISO);\n\n // Try to focus: selected day > today (if in view) > first enabled day\n let targetDay: number | null = null;\n\n if (\n selected &&\n selected.getFullYear() === this._viewYear &&\n selected.getMonth() === this._viewMonth\n ) {\n targetDay = selected.getDate();\n } else {\n const today = new Date();\n if (today.getFullYear() === this._viewYear && today.getMonth() === this._viewMonth) {\n const todayDate = new Date(this._viewYear, this._viewMonth, today.getDate());\n if (!this._isDateDisabled(todayDate)) {\n targetDay = today.getDate();\n }\n }\n }\n\n if (targetDay === null) {\n // Find first enabled day in the month\n const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(this._viewYear, this._viewMonth, d);\n if (!this._isDateDisabled(date)) {\n targetDay = d;\n break;\n }\n }\n }\n\n if (targetDay !== null) {\n this._focusedDay = targetDay;\n this.updateComplete.then(() => {\n const btn = this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${targetDay}\"]`);\n btn?.focus();\n });\n }\n }\n\n // ─── Month Navigation ───\n\n private _prevMonth(): void {\n if (this._viewMonth === 0) {\n this._viewMonth = 11;\n this._viewYear = this._viewYear - 1;\n } else {\n this._viewMonth = this._viewMonth - 1;\n }\n }\n\n private _nextMonth(): void {\n if (this._viewMonth === 11) {\n this._viewMonth = 0;\n this._viewYear = this._viewYear + 1;\n } else {\n this._viewMonth = this._viewMonth + 1;\n }\n }\n\n // ─── Day Selection ───\n\n private _selectDay(date: Date): void {\n if (this._isDateDisabled(date)) return;\n\n const iso = this._toISO(date);\n this.value = iso;\n this._internals.setFormValue(iso);\n this._updateValidity();\n\n this.dispatchEvent(\n new CustomEvent('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: iso, date },\n }),\n );\n\n this._closeCalendar();\n }\n\n // ─── Calendar Keyboard Navigation ───\n\n private _handleCalendarKeydown(e: KeyboardEvent): void {\n const { key } = e;\n\n if (key === 'Tab') {\n this._handleCalendarTab(e);\n return;\n }\n\n if (\n key !== 'ArrowLeft' &&\n key !== 'ArrowRight' &&\n key !== 'ArrowUp' &&\n key !== 'ArrowDown' &&\n key !== 'Enter' &&\n key !== ' ' &&\n key !== 'Home' &&\n key !== 'End' &&\n key !== 'PageUp' &&\n key !== 'PageDown'\n ) {\n return;\n }\n\n e.preventDefault();\n\n const currentFocused = this._focusedDay ?? 1;\n const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n\n if (key === 'Enter' || key === ' ') {\n const date = new Date(this._viewYear, this._viewMonth, currentFocused);\n if (!this._isDateDisabled(date)) {\n this._selectDay(date);\n }\n return;\n }\n\n if (key === 'PageUp') {\n this._prevMonth();\n return;\n }\n\n if (key === 'PageDown') {\n this._nextMonth();\n return;\n }\n\n if (key === 'Home') {\n // Move to start of current week (Sunday)\n const currentDate = new Date(this._viewYear, this._viewMonth, currentFocused);\n const dayOfWeek = currentDate.getDay();\n const newDay = currentFocused - dayOfWeek;\n if (newDay >= 1) {\n this._focusedDay = newDay;\n this.updateComplete.then(() => {\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${newDay}\"]`)?.focus();\n });\n }\n return;\n }\n\n if (key === 'End') {\n // Move to end of current week (Saturday)\n const currentDate = new Date(this._viewYear, this._viewMonth, currentFocused);\n const dayOfWeek = currentDate.getDay();\n const daysToSaturday = 6 - dayOfWeek;\n const newDay = currentFocused + daysToSaturday;\n if (newDay <= daysInMonth) {\n this._focusedDay = newDay;\n this.updateComplete.then(() => {\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${newDay}\"]`)?.focus();\n });\n }\n return;\n }\n\n let newDay = currentFocused;\n\n if (key === 'ArrowLeft') newDay = currentFocused - 1;\n if (key === 'ArrowRight') newDay = currentFocused + 1;\n if (key === 'ArrowUp') newDay = currentFocused - 7;\n if (key === 'ArrowDown') newDay = currentFocused + 7;\n\n if (newDay < 1) {\n // Wrap to previous month\n this._prevMonth();\n const prevDaysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n this._focusedDay = prevDaysInMonth + newDay;\n this.updateComplete.then(() => {\n const day = this._focusedDay;\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${day}\"]`)?.focus();\n });\n return;\n }\n\n if (newDay > daysInMonth) {\n // Wrap to next month\n const overflow = newDay - daysInMonth;\n this._nextMonth();\n this._focusedDay = overflow;\n this.updateComplete.then(() => {\n const day = this._focusedDay;\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${day}\"]`)?.focus();\n });\n return;\n }\n\n this._focusedDay = newDay;\n this.updateComplete.then(() => {\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${newDay}\"]`)?.focus();\n });\n }\n\n // ─── Navigation Boundary Checks ───\n\n private _isPrevMonthDisabled(): boolean {\n if (!this.min) return false;\n const firstOfCurrentView = new Date(this._viewYear, this._viewMonth, 1);\n const minDate = this._parseISODate(this.min);\n if (!minDate) return false;\n return firstOfCurrentView <= minDate;\n }\n\n private _isNextMonthDisabled(): boolean {\n if (!this.max) return false;\n const lastOfCurrentView = new Date(this._viewYear, this._viewMonth + 1, 0);\n const maxDate = this._parseISODate(this.max);\n if (!maxDate) return false;\n return lastOfCurrentView >= maxDate;\n }\n\n // ─── Focus Trap ───\n\n private _handleCalendarTab(e: KeyboardEvent): void {\n if (e.key !== 'Tab' || !this._isOpen) return;\n\n const focusableEls = this._calendar?.querySelectorAll<HTMLElement>(\n 'button:not([disabled]), [tabindex=\"0\"]',\n );\n if (!focusableEls || focusableEls.length === 0) return;\n\n const first = focusableEls[0];\n const last = focusableEls[focusableEls.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === first || this.shadowRoot?.activeElement === first) {\n e.preventDefault();\n last?.focus();\n }\n } else {\n if (document.activeElement === last || this.shadowRoot?.activeElement === last) {\n e.preventDefault();\n first?.focus();\n }\n }\n }\n\n // ─── Render Helpers ───\n\n private _renderWeekdayHeaders() {\n const headers = Array.from(\n { length: 7 },\n (_, i) =>\n html`<div class=\"calendar__weekday\" role=\"columnheader\" aria-label=${this._getDayName(i)}>\n ${this._getDayName(i).slice(0, 2)}\n </div>`,\n );\n return html`<div class=\"calendar__row\" role=\"row\">${headers}</div>`;\n }\n\n private _renderDayGrid() {\n const cells = this._getDaysInGrid();\n const selectedDate = this._parseISODate(this.value);\n\n const rows: ReturnType<typeof html>[] = [];\n\n for (let rowStart = 0; rowStart < cells.length; rowStart += 7) {\n const rowCells = cells.slice(rowStart, rowStart + 7).map((date) => {\n if (date === null) {\n return html`<div class=\"calendar__day-cell\" role=\"gridcell\"></div>`;\n }\n\n const isSelected = selectedDate ? this._isSameDay(date, selectedDate) : false;\n const isToday = this._isToday(date);\n const isDisabled = this._isDateDisabled(date);\n const isFocused = this._focusedDay === date.getDate();\n const dayNumber = date.getDate();\n\n const ariaLabel = date.toLocaleDateString(this.locale, {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n });\n\n const dayClasses = {\n calendar__day: true,\n 'calendar__day--selected': isSelected,\n 'calendar__day--today': isToday,\n 'calendar__day--disabled': isDisabled,\n };\n\n return html`<div\n class=\"calendar__day-cell\"\n role=\"gridcell\"\n aria-selected=${isSelected ? 'true' : 'false'}\n >\n <button\n part=\"day\"\n class=${classMap(dayClasses)}\n type=\"button\"\n data-day=${dayNumber}\n aria-label=${ariaLabel}\n aria-disabled=${isDisabled ? 'true' : nothing}\n aria-current=${isToday ? 'date' : nothing}\n tabindex=${isFocused ? '0' : '-1'}\n ?disabled=${isDisabled}\n @click=${() => {\n this._selectDay(date);\n }}\n >\n ${dayNumber}\n </button>\n </div>`;\n });\n\n rows.push(html`<div class=\"calendar__row\" role=\"row\">${rowCells}</div>`);\n }\n\n return rows;\n }\n\n // ─── Render ───\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n const displayValue = this._formatForDisplay(this.value);\n const monthName = this._getMonthName(this._viewMonth);\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n };\n\n const describedBy =\n [hasError ? this._errorId : null, this.helpText ? this._helpTextId : null]\n .filter(Boolean)\n .join(' ') || undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <!-- Label -->\n <div class=\"field__label-wrapper\">\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" for=${this._inputId}>\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </label>\n `\n : nothing}\n </slot>\n </div>\n\n <!-- Input + Trigger -->\n <div part=\"input-wrapper\" class=\"field__input-wrapper\">\n <input\n part=\"input\"\n class=\"field__input\"\n id=${this._inputId}\n type=\"text\"\n readonly\n .value=${displayValue}\n placeholder=${ifDefined(this.format || undefined)}\n ?disabled=${this.disabled}\n aria-labelledby=${ifDefined(\n this._hasLabelSlot ? `${this._inputId}-slotted-label` : undefined,\n )}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-required=${this.required ? 'true' : nothing}\n aria-haspopup=\"dialog\"\n @click=${this._openCalendar}\n />\n <button\n part=\"trigger\"\n class=\"field__trigger\"\n type=\"button\"\n aria-label=${this._isOpen ? 'Close calendar' : 'Open calendar'}\n aria-haspopup=\"dialog\"\n aria-expanded=${this._isOpen ? 'true' : 'false'}\n aria-controls=${this._calendarId}\n ?disabled=${this.disabled}\n @click=${this._toggleCalendar}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n </svg>\n </button>\n </div>\n\n <!-- Calendar Popup -->\n ${this._isOpen\n ? html`\n <div\n part=\"calendar\"\n class=\"calendar\"\n id=${this._calendarId}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Choose a date\"\n @keydown=${this._handleCalendarKeydown}\n >\n <!-- Screen reader live region -->\n <div\n id=${this._liveRegionId}\n class=\"calendar__live-region\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n ${this._liveMessage}\n </div>\n\n <!-- Month Navigation -->\n <div part=\"month-nav\" class=\"calendar__nav\">\n <button\n class=\"calendar__nav-btn\"\n type=\"button\"\n aria-label=\"Previous month\"\n ?disabled=${this._isPrevMonthDisabled()}\n @click=${this._prevMonth}\n >\n ‹\n </button>\n <span class=\"calendar__month-label\" aria-hidden=\"true\">\n ${monthName} ${this._viewYear}\n </span>\n <button\n class=\"calendar__nav-btn\"\n type=\"button\"\n aria-label=\"Next month\"\n ?disabled=${this._isNextMonthDisabled()}\n @click=${this._nextMonth}\n >\n ›\n </button>\n </div>\n\n <!-- Day Grid -->\n <div class=\"calendar__grid\" role=\"grid\" aria-label=\"${monthName} ${this._viewYear}\">\n ${this._renderWeekdayHeaders()} ${this._renderDayGrid()}\n </div>\n </div>\n `\n : nothing}\n\n <!-- Error -->\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${this.error\n ? html`\n <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>\n `\n : nothing}\n </slot>\n\n <!-- Help Text -->\n ${this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help\">${this.helpText}</slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-date-picker': HelixDatePicker;\n }\n}\n"],"names":["helixDatePickerStyles","css","_instanceCounter","HelixDatePicker","LitElement","e","slot","slottedLabel","changedProperties","selected","monthName","state","options","_a","iso","d","date","y","m","a","b","month","dayIndex","leadingBlanks","daysInMonth","cells","remainder","selectedISO","targetDay","today","todayDate","btn","key","currentFocused","dayOfWeek","newDay","_b","daysToSaturday","prevDaysInMonth","day","overflow","firstOfCurrentView","minDate","lastOfCurrentView","maxDate","focusableEls","first","last","_c","headers","_","i","html","selectedDate","rows","rowStart","rowCells","isSelected","isToday","isDisabled","isFocused","dayNumber","ariaLabel","classMap","nothing","hasError","displayValue","fieldClasses","describedBy","ifDefined","tokenStyles","__decorateClass","property","query","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-dialog-e4CSD8xX.js","sources":["../../src/components/hx-dialog/hx-dialog.styles.ts","../../src/components/hx-dialog/hx-dialog.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDialogStyles = css`\n :host {\n display: contents;\n }\n\n /* ─── Native dialog reset ─── */\n\n dialog {\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n max-width: 100%;\n max-height: 100%;\n overflow: visible;\n /* D5 — ensure native dialog element renders above the non-modal backdrop sibling */\n position: relative;\n z-index: calc(var(--hx-z-index-modal, 100) + 1);\n }\n\n /* ─── Dialog container ─── */\n\n .dialog {\n display: flex;\n flex-direction: column;\n position: relative;\n background-color: var(--hx-dialog-bg, var(--hx-color-neutral-0));\n color: var(--hx-dialog-color, var(--hx-color-neutral-900));\n border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));\n box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));\n width: var(--hx-dialog-width, var(--hx-size-128, 32rem));\n max-width: calc(100vw - var(--hx-spacing-8, 2rem));\n max-height: calc(100vh - var(--hx-spacing-8, 2rem));\n overflow: hidden;\n outline: none;\n\n /* Open/close animation */\n opacity: 0;\n transform: translateY(var(--hx-spacing-4, 1rem)) scale(0.97);\n transition:\n opacity var(--hx-duration-200, 200ms) var(--hx-ease-out, ease-out),\n transform var(--hx-duration-200, 200ms) var(--hx-ease-out, ease-out);\n }\n\n dialog[open] .dialog {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .dialog {\n transition: none;\n }\n }\n\n /* ─── Native backdrop (modal mode) ─── */\n\n dialog::backdrop {\n background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));\n opacity: 0;\n transition: opacity var(--hx-duration-200, 200ms) var(--hx-ease-out, ease-out);\n }\n\n dialog[open]::backdrop {\n opacity: var(--hx-dialog-backdrop-opacity, 0.5);\n }\n\n @media (prefers-reduced-motion: reduce) {\n dialog::backdrop {\n transition: none;\n }\n }\n\n /* ─── Non-modal backdrop overlay ─── */\n\n .dialog-backdrop {\n position: fixed;\n inset: 0;\n background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));\n opacity: var(--hx-dialog-backdrop-opacity, 0.5);\n /* D5 — backdrop z-index must be lower than the dialog element's z-index */\n z-index: var(--hx-z-index-modal, 100);\n }\n\n /* ─── Header ─── */\n\n .dialog__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--hx-dialog-header-padding, var(--hx-spacing-5) var(--hx-spacing-6));\n border-bottom: var(--hx-border-width-1) solid\n var(--hx-dialog-header-border-color, var(--hx-color-neutral-200));\n gap: var(--hx-spacing-4);\n flex-shrink: 0;\n }\n\n .dialog__heading {\n margin: 0;\n font-family: var(--hx-font-family-sans);\n font-size: var(--hx-font-size-lg);\n font-weight: var(--hx-font-weight-semibold);\n line-height: var(--hx-line-height-snug);\n color: var(--hx-dialog-heading-color, var(--hx-color-neutral-900));\n flex: 1 1 auto;\n }\n\n /* ─── Built-in close button (D17) ─── */\n\n .dialog__close-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--hx-spacing-8, 2rem);\n height: var(--hx-spacing-8, 2rem);\n padding: 0;\n margin-left: auto;\n background: transparent;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n cursor: pointer;\n color: var(--hx-color-neutral-500, #6b7280);\n font-size: var(--hx-font-size-xl, 1.25rem);\n line-height: var(--hx-line-height-none, 1);\n transition:\n color var(--hx-duration-100, 100ms) ease,\n background-color var(--hx-duration-100, 100ms) ease;\n }\n\n .dialog__close-btn::before {\n content: '×';\n }\n\n .dialog__close-btn:hover {\n color: var(--hx-color-neutral-900, #111827);\n background-color: var(--hx-color-neutral-100, #f3f4f6);\n }\n\n .dialog__close-btn:focus-visible {\n outline: 2px solid var(--hx-color-primary-500, #3b82f6);\n outline-offset: 2px;\n }\n\n /* ─── Body ─── */\n\n .dialog__body {\n flex: 1 1 auto;\n padding: var(--hx-dialog-body-padding, var(--hx-spacing-6));\n overflow-y: auto;\n overscroll-behavior: contain;\n }\n\n /* ─── Footer ─── */\n\n .dialog__footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--hx-spacing-3);\n padding: var(--hx-dialog-footer-padding, var(--hx-spacing-4) var(--hx-spacing-6));\n border-top: var(--hx-border-width-1) solid\n var(--hx-dialog-footer-border-color, var(--hx-color-neutral-200));\n flex-shrink: 0;\n }\n\n /* ─── Visually-hidden description (D8) ─── */\n\n .dialog__description {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDialogStyles } from './hx-dialog.styles.js';\n\n// D21 — deterministic monotonic counter instead of Math.random()\nlet _dialogCounter = 0;\n\n/**\n * A modal and non-modal dialog component built on the native HTML `<dialog>` element.\n * Provides focus trapping, backdrop interaction, keyboard navigation, and full\n * ARIA labelling for enterprise healthcare accessibility requirements.\n *\n * @summary Accessible dialog overlay for confirmations, forms, and detailed content.\n *\n * @tag hx-dialog\n *\n * @slot - Default slot for the dialog body content.\n * @slot header - Slot for custom header content. When provided, replaces the built-in heading.\n * @slot footer - Slot for action buttons or footer content.\n *\n * @fires {CustomEvent<void>} hx-open - Fired when the dialog opens.\n * @fires {CustomEvent<void>} hx-close - Fired when the dialog closes for any reason.\n * @fires {CustomEvent<void>} hx-cancel - Fired when the dialog is dismissed via Escape key or cancel action.\n *\n * @csspart dialog - The inner container div that holds the dialog content.\n * @csspart backdrop - The non-modal backdrop overlay element.\n * @csspart header - The header region containing the heading and header slot.\n * @csspart close-button - The built-in close button in the dialog header.\n * @csspart body - The scrollable body region containing the default slot.\n * @csspart footer - The footer region containing the footer slot.\n *\n * @cssprop [--hx-dialog-bg=var(--hx-color-neutral-0)] - Dialog background color.\n * @cssprop [--hx-dialog-color=var(--hx-color-neutral-900)] - Dialog text color.\n * @cssprop [--hx-dialog-border-radius=var(--hx-border-radius-lg)] - Dialog corner radius.\n * @cssprop [--hx-dialog-shadow=var(--hx-shadow-xl)] - Dialog box shadow.\n * @cssprop [--hx-dialog-width=32rem] - Dialog width.\n * @cssprop [--hx-dialog-backdrop-color=var(--hx-color-neutral-900)] - Backdrop overlay color.\n * @cssprop [--hx-dialog-backdrop-opacity=0.5] - Backdrop overlay opacity (set to 0 to hide; note\n * that opacity:0 makes the backdrop invisible but still present in the layout — use pointer-events\n * carefully if you need a fully non-blocking backdrop).\n * @cssprop [--hx-dialog-header-padding] - Padding inside the dialog header.\n * @cssprop [--hx-dialog-header-border-color=var(--hx-color-neutral-200)] - Header bottom border color.\n * @cssprop [--hx-dialog-heading-color=var(--hx-color-neutral-900)] - Heading text color.\n * @cssprop [--hx-dialog-body-padding] - Padding inside the dialog body.\n * @cssprop [--hx-dialog-footer-padding] - Padding inside the dialog footer.\n * @cssprop [--hx-dialog-footer-border-color=var(--hx-color-neutral-200)] - Footer top border color.\n *\n * @remarks\n * **Browser support for `::backdrop`:** The `dialog::backdrop` pseudo-element inside Shadow DOM\n * is well-supported in Chrome/Chromium and Firefox 122+. For Firefox < 122, modal backdrop\n * animation will silently fall back to no animation. A non-modal backdrop fallback is rendered\n * for non-modal dialogs.\n *\n * **Drupal integration:** This component is Twig-renderable via attributes (`heading`, `open`,\n * `modal`, `close-on-backdrop`). For trigger-button wiring in Drupal behaviors:\n * ```js\n * Drupal.behaviors.hxDialog = {\n * attach(context) {\n * context.querySelectorAll('[data-hx-dialog-trigger]').forEach((btn) => {\n * btn.addEventListener('click', () => {\n * const id = btn.getAttribute('data-hx-dialog-trigger');\n * document.getElementById(id)?.showModal();\n * });\n * });\n * },\n * };\n * ```\n * Focus restoration to the trigger element is handled automatically by the component.\n */\n@customElement('hx-dialog')\nexport class HelixDialog extends LitElement {\n static override styles = [tokenStyles, helixDialogStyles];\n\n // D10 — observe aria-label attribute without shadowing ARIAMixin.ariaLabel\n static override get observedAttributes(): string[] {\n return [...super.observedAttributes, 'aria-label'];\n }\n\n // ─── Queries ───\n\n @query('dialog')\n private _dialogEl!: HTMLDialogElement | null;\n\n // ─── Internal state ───\n\n /** Tracks whether a header slot has been assigned content. */\n @state()\n private _hasHeaderSlot = false;\n\n /** Tracks whether a footer slot has been assigned content. */\n @state()\n private _hasFooterSlot = false;\n\n /** Cached focusable elements — populated on open, cleared on close. */\n private _cachedFocusableElements: HTMLElement[] = [];\n\n /** The element that had focus when the dialog opened — restored on close (D1). */\n private _triggerElement: HTMLElement | null = null;\n\n /** Pending returnValue to pass to native dialog.close() (D11). */\n private _pendingReturnValue: string | undefined = undefined;\n\n // ─── Unique IDs for aria-labelledby / aria-describedby ───\n\n private readonly _headingId = `hx-dialog-heading-${++_dialogCounter}`;\n private readonly _descriptionId = `hx-dialog-description-${_dialogCounter}`;\n\n // ─── Public Properties ───\n\n /**\n * Controls whether the dialog is open.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * When true, renders as a modal dialog with a backdrop and focus trap.\n * When false, renders as a non-modal dialog.\n * @attr modal\n */\n @property({ type: Boolean, reflect: true })\n modal = true;\n\n /**\n * When true, clicking the backdrop closes the dialog.\n * @attr close-on-backdrop\n */\n @property({\n attribute: 'close-on-backdrop',\n reflect: true,\n converter: {\n fromAttribute: (value: string | null) => value !== 'false',\n toAttribute: (value: boolean) => String(value),\n },\n })\n closeOnBackdrop = true;\n\n /**\n * Text content for the dialog heading. Used as the accessible label via aria-labelledby.\n * @attr heading\n */\n @property({ type: String })\n heading = '';\n\n /**\n * ARIA role variant. Use `'alertdialog'` for urgent dialogs requiring immediate attention\n * (e.g., drug interaction warnings, critical lab alerts). Defaults to `'dialog'`.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'dialog' | 'alertdialog' = 'dialog';\n\n /**\n * Optional description text linked to the dialog via `aria-describedby`.\n * When provided, screen readers will announce this text when the dialog receives focus.\n * Recommended for dialogs that surface critical clinical information.\n * @attr description\n */\n @property({ type: String })\n description = '';\n\n /**\n * Returns the dialog's return value — the string passed to `close(returnValue)`.\n * Mirrors `HTMLDialogElement.returnValue`.\n */\n get returnValue(): string {\n return this._dialogEl?.returnValue ?? '';\n }\n\n // ─── Lifecycle ───\n\n // D10 — re-render when aria-label attribute changes (without declaring a shadowing property)\n override attributeChangedCallback(\n name: string,\n oldVal: string | null,\n newVal: string | null,\n ): void {\n super.attributeChangedCallback(name, oldVal, newVal);\n if (name === 'aria-label' && oldVal !== newVal) {\n this.requestUpdate('aria-label', oldVal);\n }\n }\n\n override firstUpdated(): void {\n // Initialize header slot state without a querySelector in render()\n this._hasHeaderSlot = this.querySelector('[slot=\"header\"]') !== null;\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._removeGlobalListeners();\n // Restore body scroll if disconnected while open\n if (this.modal && this.open) {\n document.body.style.overflow = '';\n }\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this._openDialog();\n } else {\n this._closeDialog();\n }\n }\n }\n\n // ─── Public Methods ───\n\n /** Opens the dialog in the mode determined by the `modal` property. */\n show(): void {\n this.open = true;\n }\n\n /** Opens the dialog as a modal regardless of the `modal` property setting. */\n showModal(): void {\n this.modal = true;\n this.open = true;\n }\n\n /**\n * Closes the dialog.\n * @param returnValue - Optional return value string stored as `dialog.returnValue`.\n */\n close(returnValue?: string): void {\n if (returnValue !== undefined) {\n this._pendingReturnValue = returnValue;\n }\n this.open = false;\n }\n\n // ─── Private: Open / Close ───\n\n private _openDialog(): void {\n const dialog = this._dialogEl;\n if (!dialog) return;\n\n // D1 — store the element that triggered the dialog open for focus restoration on close\n this._triggerElement = document.activeElement as HTMLElement | null;\n\n if (this.modal) {\n if (!dialog.open) {\n dialog.showModal();\n }\n // D4 — lock body scroll when modal dialog is open\n document.body.style.overflow = 'hidden';\n } else {\n if (!dialog.open) {\n dialog.show();\n }\n }\n\n this._addGlobalListeners();\n\n // Cache focusable elements after the dialog is open in the DOM\n void this.updateComplete.then(() => {\n this._cachedFocusableElements = this._getFocusableElements();\n // D3 — explicitly move initial focus to the first focusable element inside the dialog\n // (browser's built-in focus delegation cannot reach slotted light DOM through Shadow DOM)\n this._cachedFocusableElements[0]?.focus();\n });\n\n this.dispatchEvent(\n new CustomEvent('hx-open', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _closeDialog(): void {\n const dialog = this._dialogEl;\n if (!dialog) return;\n\n const wasOpen = dialog.open;\n if (dialog.open) {\n // D11 — forward returnValue to native dialog.close() if provided\n if (this._pendingReturnValue !== undefined) {\n dialog.close(this._pendingReturnValue);\n this._pendingReturnValue = undefined;\n } else {\n dialog.close();\n }\n }\n\n // D4 — restore body scroll when dialog closes\n document.body.style.overflow = '';\n\n this._removeGlobalListeners();\n this._cachedFocusableElements = [];\n\n // D1 — restore focus to the element that opened the dialog (WCAG 2.4.3)\n this._triggerElement?.focus();\n this._triggerElement = null;\n\n if (wasOpen) {\n this.dispatchEvent(\n new CustomEvent('hx-close', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n }\n\n // ─── Event Listeners ───\n\n private _addGlobalListeners(): void {\n this._dialogEl?.addEventListener('keydown', this._handleKeyDown);\n this._dialogEl?.addEventListener('click', this._handleDialogClick);\n this._dialogEl?.addEventListener('cancel', this._handleNativeCancel);\n }\n\n private _removeGlobalListeners(): void {\n this._dialogEl?.removeEventListener('keydown', this._handleKeyDown);\n this._dialogEl?.removeEventListener('click', this._handleDialogClick);\n this._dialogEl?.removeEventListener('cancel', this._handleNativeCancel);\n }\n\n // ─── Keyboard Handler ───\n\n private _handleKeyDown = (e: KeyboardEvent): void => {\n if (e.key === 'Escape') {\n // Native dialog fires a 'cancel' event before close when Escape is pressed.\n // We prevent default here and handle it ourselves so we fire hx-cancel\n // before setting open = false (which triggers hx-close).\n e.preventDefault();\n this._cancel();\n return;\n }\n\n if (e.key === 'Tab' && this.modal) {\n this._trapFocus(e);\n }\n };\n\n // ─── Focus Trap ───\n\n private _getFocusableElements(): HTMLElement[] {\n const focusableSelectors = [\n 'a[href]',\n 'area[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n 'details > summary',\n ].join(',');\n\n // Collect focusable elements from slotted light DOM content only.\n // Shadow DOM elements (e.g., the built-in close button) remain accessible via\n // the native <dialog> tab order — including them here would cause focus to land\n // on shadow DOM elements whose document.activeElement resolves to the host,\n // breaking the test assertions and D7 initial focus behavior.\n const slots = this.shadowRoot?.querySelectorAll<HTMLSlotElement>('slot') ?? [];\n const lightFocusable: HTMLElement[] = [];\n\n slots.forEach((slot) => {\n slot.assignedElements({ flatten: true }).forEach((el) => {\n if (el instanceof HTMLElement) {\n if (el.matches(focusableSelectors)) {\n lightFocusable.push(el);\n }\n el.querySelectorAll<HTMLElement>(focusableSelectors).forEach((child) => {\n lightFocusable.push(child);\n });\n }\n });\n });\n\n return lightFocusable.filter(\n (el) => !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1',\n );\n }\n\n private _trapFocus(e: KeyboardEvent): void {\n const focusable =\n this._cachedFocusableElements.length > 0\n ? this._cachedFocusableElements\n : this._getFocusableElements();\n if (focusable.length === 0) {\n e.preventDefault();\n return;\n }\n\n const [first, ...rest] = focusable;\n const last = rest.length > 0 ? rest[rest.length - 1] : first;\n\n if (!first || !last) return;\n\n const active = document.activeElement;\n // Also check shadow root active element\n const shadowActive = this.shadowRoot?.activeElement;\n const currentActive = (shadowActive ?? active) as HTMLElement | null;\n\n if (e.shiftKey) {\n // Shift+Tab: if focus is on first, wrap to last\n if (currentActive === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n // Tab: if focus is on last, wrap to first\n if (currentActive === last) {\n e.preventDefault();\n first.focus();\n }\n }\n }\n\n // ─── Backdrop Click ───\n\n private _handleDialogClick = (e: MouseEvent): void => {\n if (!this.closeOnBackdrop) return;\n\n // The native dialog element fills only the content area in showModal().\n // Clicks on the backdrop reach the <dialog> element itself.\n // We detect this by checking whether the click target is the dialog element.\n const target = e.target as HTMLElement;\n if (target === this._dialogEl) {\n this._cancel();\n }\n };\n\n // ─── Non-modal backdrop click ───\n\n private _handleBackdropClick = (): void => {\n if (!this.closeOnBackdrop) return;\n this._cancel();\n };\n\n // ─── Native cancel (Escape via browser, before our handler runs) ───\n\n private _handleNativeCancel = (e: Event): void => {\n // We always prevent the native cancel so we can manage close state ourselves.\n e.preventDefault();\n };\n\n // ─── Cancel logic ───\n\n private _cancel(): void {\n this.dispatchEvent(\n new CustomEvent('hx-cancel', {\n bubbles: true,\n composed: true,\n }),\n );\n\n this.open = false;\n // hx-close is dispatched by _closeDialog() which is called via the open property setter\n }\n\n // ─── Slot change handlers ───\n\n private _handleHeaderSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHeaderSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _handleFooterSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasFooterSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Render Helpers ───\n\n private _renderHeader() {\n const hasHeading = this.heading.trim().length > 0;\n\n // Always render header to include the built-in close button (D17)\n return html`\n <div part=\"header\" class=\"dialog__header\">\n ${hasHeading\n ? html`<h2 id=${this._headingId} class=\"dialog__heading\">${this.heading}</h2>`\n : nothing}\n <slot name=\"header\" @slotchange=${this._handleHeaderSlotChange}></slot>\n <button\n part=\"close-button\"\n class=\"dialog__close-btn\"\n type=\"button\"\n aria-label=\"Close dialog\"\n @click=${() => this.close()}\n ></button>\n </div>\n `;\n }\n\n private _renderFooter() {\n return html`\n <div part=\"footer\" class=\"dialog__footer\" ?hidden=${!this._hasFooterSlot}>\n <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}></slot>\n </div>\n `;\n }\n\n private _renderNonModalBackdrop() {\n if (this.modal || !this.open) return nothing;\n return html`\n <div\n part=\"backdrop\"\n class=\"dialog-backdrop\"\n @click=${this._handleBackdropClick}\n aria-hidden=\"true\"\n ></div>\n `;\n }\n\n // D8 — render visually-hidden description for aria-describedby\n private _renderDescription() {\n if (!this.description) return nothing;\n return html`<span id=${this._descriptionId} class=\"dialog__description\"\n >${this.description}</span\n >`;\n }\n\n // ─── Render ───\n\n override render() {\n const hasHeading = this.heading.trim().length > 0;\n // D10 — read aria-label via getAttribute to avoid shadowing ARIAMixin.ariaLabel\n const ariaLabel = this.getAttribute('aria-label');\n\n return html`\n ${this._renderNonModalBackdrop()}\n <dialog\n role=${this.variant !== 'dialog' ? this.variant : nothing}\n aria-labelledby=${hasHeading ? this._headingId : nothing}\n aria-label=${!hasHeading && ariaLabel ? ariaLabel : nothing}\n aria-describedby=${this.description ? this._descriptionId : nothing}\n aria-modal=${this.modal ? 'true' : nothing}\n >\n <div part=\"dialog\" class=\"dialog\">\n ${this._renderHeader()} ${this._renderDescription()}\n <div part=\"body\" class=\"dialog__body\">\n <slot></slot>\n </div>\n ${this._renderFooter()}\n </div>\n </dialog>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-dialog': HelixDialog;\n }\n}\n"],"names":["helixDialogStyles","css","_dialogCounter","HelixDialog","LitElement","_a","name","oldVal","newVal","changedProperties","returnValue","dialog","wasOpen","_b","_c","focusableSelectors","slots","lightFocusable","slot","el","child","focusable","first","rest","last","active","currentActive","hasHeading","html","nothing","ariaLabel","tokenStyles","__decorateClass","query","state","property","value","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-drawer-bTF0nbrg.js","sources":["../../src/components/hx-drawer/hx-drawer.styles.ts","../../src/components/hx-drawer/hx-drawer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDrawerStyles = css`\n /* P2-03: Explicit [hidden] rule to survive CSS resets that may override the UA stylesheet. */\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: contents;\n }\n\n :host([contained]) {\n display: block;\n position: relative;\n overflow: hidden;\n }\n\n /* ─── Overlay ─── */\n\n .drawer-overlay {\n position: fixed;\n inset: 0;\n z-index: var(--hx-z-index-modal, 400);\n display: flex;\n pointer-events: none;\n visibility: hidden;\n }\n\n :host([contained]) .drawer-overlay {\n position: absolute;\n }\n\n .drawer-overlay.is-open {\n pointer-events: auto;\n visibility: visible;\n }\n\n /* ─── Backdrop ─── */\n\n .drawer-backdrop {\n position: absolute;\n inset: 0;\n background-color: var(--hx-drawer-backdrop-color, var(--hx-color-neutral-900));\n opacity: 0;\n transition: opacity var(--hx-duration-300, 300ms) var(--hx-ease-out, ease-out);\n }\n\n .drawer-overlay.is-open .drawer-backdrop {\n opacity: var(--hx-drawer-backdrop-opacity, 0.5);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .drawer-backdrop {\n transition: none;\n }\n }\n\n /* ─── Panel ─── */\n\n .drawer-panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n background-color: var(--hx-drawer-bg, var(--hx-color-neutral-0));\n color: var(--hx-drawer-color, var(--hx-color-neutral-900));\n box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));\n overflow: hidden;\n outline: none;\n z-index: 1;\n transition:\n transform var(--hx-duration-300, 300ms) var(--hx-ease-out, ease-out),\n opacity var(--hx-duration-300, 300ms) var(--hx-ease-out, ease-out);\n opacity: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .drawer-panel {\n transition: none;\n }\n }\n\n /* ─── Placement: end (default — right) ─── */\n\n :host([placement='end']) .drawer-panel,\n :host(:not([placement])) .drawer-panel {\n top: 0;\n right: 0;\n bottom: 0;\n width: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));\n max-width: 100%;\n transform: translateX(100%);\n }\n\n :host([placement='end']) .drawer-overlay.is-open .drawer-panel,\n :host(:not([placement])) .drawer-overlay.is-open .drawer-panel {\n transform: translateX(0);\n opacity: 1;\n }\n\n /* ─── Placement: start (left) ─── */\n\n :host([placement='start']) .drawer-panel {\n top: 0;\n left: 0;\n bottom: 0;\n width: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));\n max-width: 100%;\n transform: translateX(-100%);\n }\n\n :host([placement='start']) .drawer-overlay.is-open .drawer-panel {\n transform: translateX(0);\n opacity: 1;\n }\n\n /* ─── Placement: top ─── */\n\n :host([placement='top']) .drawer-panel {\n top: 0;\n left: 0;\n right: 0;\n height: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));\n max-height: 100%;\n width: 100%;\n transform: translateY(-100%);\n }\n\n :host([placement='top']) .drawer-overlay.is-open .drawer-panel {\n transform: translateY(0);\n opacity: 1;\n }\n\n /* ─── Placement: bottom ─── */\n\n :host([placement='bottom']) .drawer-panel {\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));\n max-height: 100%;\n width: 100%;\n transform: translateY(100%);\n }\n\n :host([placement='bottom']) .drawer-overlay.is-open .drawer-panel {\n transform: translateY(0);\n opacity: 1;\n }\n\n /* ─── Header ─── */\n\n .drawer-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--hx-spacing-4, 1rem);\n padding: var(\n --hx-drawer-header-padding,\n var(--hx-spacing-5, 1.25rem) var(--hx-spacing-6, 1.5rem)\n );\n border-bottom: var(--hx-border-width-1, 1px) solid\n var(--hx-drawer-header-border-color, var(--hx-color-neutral-200));\n flex-shrink: 0;\n }\n\n .drawer-title {\n margin: 0;\n flex: 1 1 auto;\n font-family: var(--hx-font-family-sans);\n font-size: var(--hx-font-size-lg);\n font-weight: var(--hx-font-weight-semibold);\n line-height: var(--hx-line-height-snug);\n color: var(--hx-drawer-title-color, var(--hx-color-neutral-900));\n }\n\n .drawer-header-actions {\n display: flex;\n align-items: center;\n gap: var(--hx-spacing-2, 0.5rem);\n flex-shrink: 0;\n }\n\n .drawer-close-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n padding: 0;\n border: none;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n background: transparent;\n color: var(--hx-color-neutral-500);\n cursor: pointer;\n flex-shrink: 0;\n transition: background-color var(--hx-duration-100, 100ms) ease;\n }\n\n .drawer-close-button:hover {\n background-color: var(--hx-color-neutral-100);\n color: var(--hx-color-neutral-900);\n }\n\n .drawer-close-button:focus-visible {\n outline: 2px solid var(--hx-color-primary-600);\n outline-offset: 2px;\n }\n\n /* ─── Body ─── */\n\n .drawer-body {\n flex: 1 1 auto;\n padding: var(--hx-drawer-body-padding, var(--hx-spacing-6, 1.5rem));\n overflow-y: auto;\n overscroll-behavior: contain;\n }\n\n /* ─── Footer ─── */\n\n .drawer-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--hx-spacing-3, 0.75rem);\n padding: var(--hx-drawer-footer-padding, var(--hx-spacing-4, 1rem) var(--hx-spacing-6, 1.5rem));\n border-top: var(--hx-border-width-1, 1px) solid\n var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));\n flex-shrink: 0;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDrawerStyles } from './hx-drawer.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxDrawerIdCounter = 0;\n\ntype DrawerPlacement = 'start' | 'end' | 'top' | 'bottom';\ntype DrawerSizePreset = 'sm' | 'md' | 'lg' | 'full';\ntype DrawerSize = DrawerSizePreset | (string & Record<never, never>);\n\nconst DRAWER_SIZE_MAP: Record<DrawerSizePreset, string> = {\n sm: '20rem',\n md: '30rem',\n lg: '40rem',\n full: '100%',\n};\n\nconst FOCUSABLE_SELECTORS = [\n 'a[href]',\n 'area[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n 'details > summary',\n].join(',');\n\n/**\n * A slide-in drawer panel that can appear from any edge of the viewport.\n * Supports focus trapping, overlay backdrop, keyboard navigation, and full\n * ARIA labelling for enterprise healthcare accessibility requirements.\n *\n * @summary Slide-in panel overlay from any viewport edge.\n *\n * @tag hx-drawer\n *\n * @slot label - The drawer title text.\n * @slot header-actions - Action buttons displayed in the header near the close button.\n * @slot - Default slot for the drawer body content.\n * @slot footer - Action buttons or footer content.\n *\n * @fires {CustomEvent<void>} hx-show - Fired when the drawer begins to open.\n * @fires {CustomEvent<void>} hx-after-show - Fired after the drawer open animation completes.\n * @fires {CustomEvent<void>} hx-hide - Fired when the drawer begins to close.\n * @fires {CustomEvent<void>} hx-after-hide - Fired after the drawer close animation completes.\n * @fires {CustomEvent<void>} hx-initial-focus - Fired when initial focus is set inside the drawer. Cancelable to override focus behavior.\n *\n * @csspart overlay - The full-screen overlay container (includes backdrop and panel).\n * @csspart panel - The drawer panel itself.\n * @csspart header - The header region containing the title and actions.\n * @csspart title - The drawer title element.\n * @csspart close-btn - The built-in close button.\n * @csspart body - The scrollable body region.\n * @csspart footer - The footer region.\n *\n * @attr [label] - Accessible label for the dialog when no visible label slot is provided.\n *\n * @cssprop [--hx-drawer-bg=var(--hx-color-neutral-0)] - Drawer panel background color.\n * @cssprop [--hx-drawer-color=var(--hx-color-neutral-900)] - Drawer panel text color.\n * @cssprop [--hx-drawer-shadow=var(--hx-shadow-xl)] - Drawer panel box shadow.\n * @cssprop [--hx-drawer-backdrop-color=var(--hx-color-neutral-900)] - Backdrop color.\n * @cssprop [--hx-drawer-backdrop-opacity=0.5] - Backdrop opacity.\n * @cssprop [--hx-drawer-header-padding] - Padding inside the header.\n * @cssprop [--hx-drawer-header-border-color=var(--hx-color-neutral-200)] - Header border color.\n * @cssprop [--hx-drawer-title-color=var(--hx-color-neutral-900)] - Title text color.\n * @cssprop [--hx-drawer-body-padding] - Padding inside the body.\n * @cssprop [--hx-drawer-footer-padding] - Padding inside the footer.\n * @cssprop [--hx-drawer-footer-border-color=var(--hx-color-neutral-200)] - Footer border color.\n */\n@customElement('hx-drawer')\nexport class HelixDrawer extends LitElement {\n static override styles = [tokenStyles, helixDrawerStyles];\n\n // ─── Queries ───\n\n @query('.drawer-overlay')\n private _overlayEl!: HTMLElement | null;\n\n @query('.drawer-panel')\n private _panelEl!: HTMLElement | null;\n\n // ─── Internal state ───\n\n @state()\n private _isOpen = false;\n\n @state()\n private _hasHeaderActionsSlot = false;\n\n @state()\n private _hasFooterSlot = false;\n\n @state()\n private _hasLabelSlot = false;\n\n private _cachedFocusableElements: HTMLElement[] = [];\n private _triggerElement: HTMLElement | null = null;\n private _animationTimeout: ReturnType<typeof setTimeout> | null = null;\n private _previousBodyOverflow: string | null = null;\n private _siblingAriaHiddenElements: Element[] = [];\n\n private readonly _titleId = `hx-drawer-title-${++_hxDrawerIdCounter}`;\n\n // ─── Public Properties ───\n\n /**\n * Controls whether the drawer is open.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Which edge of the viewport the drawer slides in from.\n * @attr placement\n */\n @property({ type: String, reflect: true })\n placement: DrawerPlacement = 'end';\n\n /**\n * The size of the drawer panel. Use 'sm', 'md', 'lg', 'full', or any valid CSS length.\n * @attr size\n */\n @property({ type: String, reflect: true })\n size: DrawerSize = 'md';\n\n /**\n * When true, the drawer is constrained to its positioned parent instead of the viewport.\n * The host element must have `position: relative` (or the library handles it via :host).\n * @attr contained\n */\n @property({ type: Boolean, reflect: true })\n contained = false;\n\n /**\n * When true, the header (title, header-actions, close button) is hidden.\n * @attr no-header\n */\n @property({ type: Boolean, reflect: true, attribute: 'no-header' })\n noHeader = false;\n\n /**\n * When true, the footer slot is hidden.\n * @attr no-footer\n */\n @property({ type: Boolean, reflect: true, attribute: 'no-footer' })\n noFooter = false;\n\n /**\n * Accessible label for the dialog when the `label` slot is not populated.\n * When the `label` slot is used, `aria-labelledby` takes precedence.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n // ─── Lifecycle ───\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._removeListeners();\n if (this._animationTimeout !== null) {\n clearTimeout(this._animationTimeout);\n }\n this._restoreBodyScroll();\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this._openDrawer();\n } else {\n this._closeDrawer();\n }\n }\n\n if (changedProperties.has('size')) {\n this._applySizeVar();\n }\n }\n\n // ─── Public Methods ───\n\n /** Opens the drawer. */\n show(): void {\n this.open = true;\n }\n\n /** Closes the drawer. */\n hide(): void {\n this.open = false;\n }\n\n // ─── Private: Size CSS variable ───\n\n private _applySizeVar(): void {\n const resolvedSize = DRAWER_SIZE_MAP[this.size as DrawerSizePreset] ?? this.size;\n this.style.setProperty('--_drawer-size', resolvedSize);\n }\n\n // ─── Private: Open / Close ───\n\n private _lockBodyScroll(): void {\n if (this.contained) return;\n this._previousBodyOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n\n private _restoreBodyScroll(): void {\n if (this._previousBodyOverflow === null) return;\n document.body.style.overflow = this._previousBodyOverflow;\n this._previousBodyOverflow = null;\n }\n\n private _openDrawer(): void {\n // Capture trigger for focus restoration (P2-04: use instanceof guard)\n const active = document.activeElement;\n this._triggerElement = active instanceof HTMLElement ? active : null;\n\n // P1-05: clear any pending animation timeout before scheduling a new one\n if (this._animationTimeout !== null) {\n clearTimeout(this._animationTimeout);\n this._animationTimeout = null;\n }\n\n this._applySizeVar();\n this._lockBodyScroll();\n this._hideBackgroundFromScreenReaders();\n\n // Dispatch hx-show before visual update\n this.dispatchEvent(new CustomEvent('hx-show', { bubbles: true, composed: true }));\n\n // Transition to open state\n void this.updateComplete\n .then(() => {\n this._isOpen = true;\n this._addListeners();\n\n // Set initial focus after next render\n return this.updateComplete;\n })\n .then(() => {\n this._cachedFocusableElements = this._getFocusableElements();\n this._setInitialFocus();\n\n // Dispatch hx-after-show after animation duration\n const duration = this._getAnimationDuration();\n this._animationTimeout = setTimeout(() => {\n this.dispatchEvent(new CustomEvent('hx-after-show', { bubbles: true, composed: true }));\n }, duration);\n })\n .catch(console.error);\n }\n\n private _closeDrawer(): void {\n // P1-05: clear any pending animation timeout before scheduling a new one\n if (this._animationTimeout !== null) {\n clearTimeout(this._animationTimeout);\n this._animationTimeout = null;\n }\n\n this._isOpen = false;\n this._removeListeners();\n this._cachedFocusableElements = [];\n this._restoreBodyScroll();\n this._restoreBackgroundForScreenReaders();\n\n this.dispatchEvent(new CustomEvent('hx-hide', { bubbles: true, composed: true }));\n\n // Restore focus to the trigger\n const duration = this._getAnimationDuration();\n this._animationTimeout = setTimeout(() => {\n this.dispatchEvent(new CustomEvent('hx-after-hide', { bubbles: true, composed: true }));\n if (this._triggerElement && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n }, duration);\n }\n\n private _getAnimationDuration(): number {\n if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return 0;\n return 300;\n }\n\n // ─── Background aria-hidden management (P1-03) ───\n\n private _hideBackgroundFromScreenReaders(): void {\n if (this.contained) return;\n this._siblingAriaHiddenElements = [];\n Array.from(document.body.children).forEach((child) => {\n if (child === this || child.contains(this)) return;\n if (!child.hasAttribute('aria-hidden')) {\n child.setAttribute('aria-hidden', 'true');\n this._siblingAriaHiddenElements.push(child);\n }\n });\n }\n\n private _restoreBackgroundForScreenReaders(): void {\n this._siblingAriaHiddenElements.forEach((el) => {\n el.removeAttribute('aria-hidden');\n });\n this._siblingAriaHiddenElements = [];\n }\n\n // ─── Event Listeners (P1-01: use only document listener, not overlay) ───\n\n private _addListeners(): void {\n document.addEventListener('keydown', this._handleKeyDown);\n }\n\n private _removeListeners(): void {\n document.removeEventListener('keydown', this._handleKeyDown);\n }\n\n // ─── Keyboard Handler ───\n\n private _handleKeyDown = (e: KeyboardEvent): void => {\n if (!this._isOpen) return;\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.open = false;\n return;\n }\n\n if (e.key === 'Tab') {\n this._trapFocus(e);\n }\n };\n\n // ─── Focus ───\n\n private _setInitialFocus(): void {\n const event = new CustomEvent('hx-initial-focus', {\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n this.dispatchEvent(event);\n\n if (!event.defaultPrevented) {\n const focusable = this._cachedFocusableElements;\n if (focusable.length > 0 && focusable[0]) {\n focusable[0].focus();\n } else {\n this._panelEl?.focus();\n }\n }\n }\n\n private _getFocusableElements(): HTMLElement[] {\n const shadowFocusable = Array.from(\n this.shadowRoot?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS) ?? [],\n );\n\n const slots = this.shadowRoot?.querySelectorAll<HTMLSlotElement>('slot') ?? [];\n const lightFocusable: HTMLElement[] = [];\n\n slots.forEach((slot) => {\n slot.assignedElements({ flatten: true }).forEach((el) => {\n if (el instanceof HTMLElement) {\n if (el.matches(FOCUSABLE_SELECTORS)) {\n lightFocusable.push(el);\n }\n el.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS).forEach((child) => {\n lightFocusable.push(child);\n });\n }\n });\n });\n\n return [...shadowFocusable, ...lightFocusable].filter(\n (el) => !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1',\n );\n }\n\n private _trapFocus(e: KeyboardEvent): void {\n const focusable =\n this._cachedFocusableElements.length > 0\n ? this._cachedFocusableElements\n : this._getFocusableElements();\n\n if (focusable.length === 0) {\n e.preventDefault();\n return;\n }\n\n const [first, ...rest] = focusable;\n const last = rest.length > 0 ? rest[rest.length - 1] : first;\n\n if (!first || !last) return;\n\n // P1-02: Use document.activeElement for reliable detection of slotted (light DOM) elements.\n // shadowRoot.activeElement returns the <slot> host for slotted content, not the actual element.\n const active = document.activeElement as HTMLElement | null;\n\n if (e.shiftKey) {\n if (active === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (active === last) {\n e.preventDefault();\n first.focus();\n }\n }\n }\n\n // ─── Overlay Click ───\n\n private _handleOverlayClick = (e: MouseEvent): void => {\n // Only close when clicking the overlay itself (backdrop), not the panel\n const target = e.target as HTMLElement;\n if (target === this._overlayEl || target.classList.contains('drawer-backdrop')) {\n this.open = false;\n }\n };\n\n // ─── Slot change handlers ───\n\n private _handleHeaderActionsSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHeaderActionsSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _handleFooterSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasFooterSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Render Helpers ───\n\n private _renderHeader() {\n if (this.noHeader) return nothing;\n\n return html`\n <div part=\"header\" class=\"drawer-header\">\n <p part=\"title\" id=${this._titleId} class=\"drawer-title\">\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}></slot>\n </p>\n <div class=\"drawer-header-actions\">\n ${this._hasHeaderActionsSlot\n ? html`<slot\n name=\"header-actions\"\n @slotchange=${this._handleHeaderActionsSlotChange}\n ></slot>`\n : html`<slot\n name=\"header-actions\"\n @slotchange=${this._handleHeaderActionsSlotChange}\n style=\"display:none\"\n ></slot>`}\n <button\n part=\"close-btn\"\n class=\"drawer-close-button\"\n aria-label=\"Close drawer\"\n @click=${() => {\n this.open = false;\n }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n </div>\n `;\n }\n\n private _renderFooter() {\n if (this.noFooter) return nothing;\n\n return html`\n <div part=\"footer\" class=\"drawer-footer\" ?hidden=${!this._hasFooterSlot}>\n <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}></slot>\n </div>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const overlayClasses = {\n 'drawer-overlay': true,\n 'is-open': this._isOpen,\n };\n\n // P1-06: ensure the dialog always has an accessible name.\n // Priority: aria-labelledby (slot) > aria-label (prop) > aria-label (fallback \"Drawer\")\n const ariaLabelledby = this._hasLabelSlot ? this._titleId : undefined;\n const ariaLabel = !this._hasLabelSlot ? this.label || 'Drawer' : undefined;\n\n return html`\n <div\n part=\"overlay\"\n class=${classMap(overlayClasses)}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${ifDefined(ariaLabelledby)}\n aria-label=${ifDefined(ariaLabel)}\n tabindex=\"-1\"\n @click=${this._handleOverlayClick}\n >\n <div class=\"drawer-backdrop\" aria-hidden=\"true\"></div>\n <div part=\"panel\" class=\"drawer-panel\" tabindex=\"-1\" role=\"document\">\n ${this._renderHeader()}\n <div part=\"body\" class=\"drawer-body\">\n <slot></slot>\n </div>\n ${this._renderFooter()}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-drawer': HelixDrawer;\n }\n}\n"],"names":["helixDrawerStyles","css","_hxDrawerIdCounter","DRAWER_SIZE_MAP","FOCUSABLE_SELECTORS","HelixDrawer","LitElement","target","changedProperties","resolvedSize","active","duration","child","el","event","focusable","_a","shadowFocusable","slots","_b","lightFocusable","slot","first","rest","last","nothing","html","overlayClasses","ariaLabelledby","ariaLabel","classMap","ifDefined","tokenStyles","__decorateClass","query","state","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACMjC,IAAIC,IAAqB;AAMzB,MAAMC,IA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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-field-Dz-7M_SC.js","sources":["../../src/components/hx-field/hx-field.styles.ts","../../src/components/hx-field/hx-field.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFieldStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-field-gap, var(--hx-space-1, 0.25rem));\n font-family: var(--hx-field-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n /* ─── Inline Layout ─── */\n\n .field--layout-inline {\n flex-direction: row;\n align-items: baseline;\n flex-wrap: wrap;\n }\n\n .field--layout-inline .field__label-wrapper {\n display: flex;\n align-items: baseline;\n flex-shrink: 0;\n min-width: 8rem;\n }\n\n /* ─── Label ─── */\n\n .field__label-wrapper {\n display: contents;\n }\n\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-field-label-color, var(--hx-color-neutral-700, #374151));\n line-height: var(--hx-line-height-normal, 1.5);\n cursor: pointer;\n }\n\n .field__required-marker {\n color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n /* ─── Control Wrapper ─── */\n\n .field__control {\n display: block;\n }\n\n /* ─── Error Slot Announcer (visually hidden live region) ─── */\n\n .field__error-slot-announcer {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Size Variants ─── */\n\n :host([hx-size='sm']) .field__label {\n font-size: var(--hx-font-size-xs, 0.75rem);\n }\n\n :host([hx-size='lg']) .field__label {\n font-size: var(--hx-font-size-md, 1rem);\n }\n\n :host([hx-size='sm']) .field__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n }\n\n :host([hx-size='lg']) .field__help-text {\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n /* ─── Help Text & Error Messages ─── */\n\n .field__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #6b7280));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n /* ─── Error State ─── */\n\n .field--error .field__label {\n color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));\n }\n\n .field--error .field__control {\n outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #ef4444));\n outline-offset: 2px;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixFieldStyles } from './hx-field.styles.js';\n\n/** Native form control tag names that can receive ARIA attributes. */\nconst FORM_CONTROL_TAGS = new Set(['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON']);\n\n/** Returns true if the element is a native form control or a custom element. */\nfunction isFormControl(el: Element): el is HTMLElement {\n return FORM_CONTROL_TAGS.has(el.tagName) || el.tagName.includes('-');\n}\n\n/**\n * Layout wrapper providing consistent label + input + help text + validation\n * message structure for any form control. Use this when wrapping non-HELiX\n * form controls or native HTML elements in the HELiX form field pattern.\n *\n * This component is NOT form-associated — it is a pure visual layout wrapper.\n *\n * **Light DOM side effect:** This component injects a visually-hidden `<span>`\n * into its light DOM children for ARIA describedby linkage across the shadow\n * DOM boundary. This span has `id=\"${fieldId}-desc\"` and is removed on\n * `disconnectedCallback`. This is an intentional, documented accessibility\n * mechanism.\n *\n * @summary Layout wrapper for label, control, help text, and error message.\n *\n * @tag hx-field\n *\n * @slot - The form control element (native or custom).\n * @slot label - Custom label content (overrides the label property).\n * @slot help - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property).\n * @slot description - Additional descriptive content above the control.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart control - The wrapper around slotted content.\n * @csspart help-text - The help text container.\n * @csspart error-message - The error message container.\n * @csspart required-indicator - The required asterisk span.\n *\n * @cssprop [--hx-field-label-color=var(--hx-color-neutral-700)] - Label color.\n * @cssprop [--hx-field-error-color=var(--hx-color-error-500)] - Error color.\n * @cssprop [--hx-field-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-field-gap=var(--hx-space-1, 0.25rem)] - Gap between field segments.\n * @cssprop [--hx-field-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n */\n@customElement('hx-field')\nexport class HelixField extends LitElement {\n static override styles = [tokenStyles, helixFieldStyles];\n\n // ─── Properties ───\n\n /**\n * The visible label text for the field.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Whether the field is required. Shows a required indicator on the label.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Error message to display. When set, the field enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the control for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Visual disabled state applied via opacity. Does not affect slotted control\n * interactivity — set disabled on the slotted control directly.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Size variant controlling label and help text font sizes.\n * @attr hx-size\n */\n @property({ type: String, attribute: 'hx-size', reflect: true })\n hxSize: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Layout variant. 'column' stacks label above control; 'inline' places them side-by-side.\n * @attr layout\n */\n @property({ type: String, reflect: true })\n layout: 'column' | 'inline' = 'column';\n\n // ─── Slot Tracking ───\n\n @state() private _hasLabelSlot = false;\n @state() private _hasErrorSlot = false;\n @state() private _hasHelpSlot = false;\n\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlot = slot.assignedElements().length > 0;\n }\n\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedElements().length > 0;\n }\n\n private _handleHelpSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpSlot = slot.assignedElements().length > 0;\n }\n\n // ─── Unique IDs for Accessibility ───\n\n private _fieldId = `hx-field-${crypto.randomUUID().slice(0, 8)}`;\n private _helpTextId = `${this._fieldId}-help`;\n private _errorId = `${this._fieldId}-error`;\n private _a11yDescId = `${this._fieldId}-desc`;\n\n // ─── A11y: Slotted control tracking + light-DOM description element ───\n\n /**\n * The first form control in the default slot. We set aria attributes on this\n * element to bridge the shadow DOM accessibility boundary.\n */\n private _slottedControl: HTMLElement | null = null;\n\n /**\n * A visually-hidden span injected into the host's light DOM (assigned to the\n * default slot). Because it lives in the same document as the slotted input,\n * `aria-describedby` can reference its ID without cross-shadow-root IDREF\n * limitations.\n *\n * **Documented side effect:** This element is intentionally injected into the\n * component's light DOM children. It is invisible to users but present in the\n * accessibility tree. It is removed in `disconnectedCallback`. Consumers\n * should not remove or modify this span (identifiable by its `id` ending in\n * `-desc`).\n */\n private _a11yDescEl: HTMLElement | null = null;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._ensureA11yDescEl();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._a11yDescEl?.remove();\n this._a11yDescEl = null;\n // Remove aria attributes we set on the slotted control\n if (this._slottedControl) {\n this._slottedControl.removeAttribute('aria-label');\n this._slottedControl.removeAttribute('aria-required');\n this._slottedControl.removeAttribute('aria-invalid');\n this._slottedControl.removeAttribute('aria-describedby');\n this._slottedControl = null;\n }\n }\n\n override updated(changedProps: Map<string, unknown>): void {\n super.updated(changedProps);\n\n // P2-01: Warn on invalid hxSize values\n if (changedProps.has('hxSize')) {\n const validSizes = ['sm', 'md', 'lg'];\n if (!validSizes.includes(this.hxSize)) {\n console.warn(\n `[hx-field] Invalid hx-size value: \"${this.hxSize}\". Expected \"sm\" | \"md\" | \"lg\". Defaulting to \"md\".`,\n );\n }\n }\n\n this._syncA11yDescEl();\n this._syncSlottedControl();\n }\n\n /** Creates a visually-hidden span in light DOM used as the ARIA description anchor. */\n private _ensureA11yDescEl(): void {\n if (this._a11yDescEl) return;\n const span = document.createElement('span');\n span.id = this._a11yDescId;\n // Visually hidden but present in the accessibility tree\n span.style.cssText =\n 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';\n this.appendChild(span);\n this._a11yDescEl = span;\n }\n\n /** Keeps the light-DOM description span in sync with the current error/help text. */\n private _syncA11yDescEl(): void {\n if (!this._a11yDescEl) return;\n const hasError = !!this.error || this._hasErrorSlot;\n if (hasError && this.error) {\n this._a11yDescEl.textContent = this.error;\n } else if (this.helpText) {\n this._a11yDescEl.textContent = this.helpText;\n } else {\n this._a11yDescEl.textContent = '';\n }\n }\n\n /** Tracks the first form control assigned to the default slot. */\n private _handleDefaultSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const assigned = slot.assignedElements();\n this._slottedControl = assigned.find(isFormControl) ?? null;\n this._syncSlottedControl();\n }\n\n /**\n * Focuses the slotted form control when the shadow DOM label is clicked.\n * The shadow `<label>` cannot use `for`/`id` to link to a slotted input\n * across the shadow boundary, so we handle focus programmatically.\n */\n private _handleLabelClick(_e: Event): void {\n this._slottedControl?.focus();\n }\n\n /**\n * Applies ARIA attributes to the slotted form control, bridging the\n * shadow DOM accessibility boundary.\n *\n * - aria-label: associates the field label with the control\n * - aria-required: communicates required state to AT\n * - aria-invalid: communicates error state to AT\n * - aria-describedby: points to the light-DOM description span\n *\n * **Skip conditions:**\n * - `HX-*` elements manage their own ARIA attributes; bridging is skipped.\n * - Elements with `data-aria-managed` attribute opt out of ARIA mutation;\n * bridging is skipped entirely for those elements.\n */\n private _syncSlottedControl(): void {\n const control = this._slottedControl;\n if (!control) return;\n\n // hx-* elements manage their own ARIA attributes; skip bridging for them\n if (control.tagName.startsWith('HX-')) return;\n\n // Elements that declare data-aria-managed opt out of ARIA mutation\n if (control.hasAttribute('data-aria-managed')) return;\n\n const hasError = !!this.error || this._hasErrorSlot;\n const hasDesc = !!(this.error || this.helpText || this._hasErrorSlot || this._hasHelpSlot);\n\n // Label association: aria-label bridges the shadow DOM boundary\n if (this.label && !this._hasLabelSlot) {\n control.setAttribute('aria-label', this.label);\n } else {\n control.removeAttribute('aria-label');\n }\n\n // Required state\n if (this.required) {\n control.setAttribute('aria-required', 'true');\n } else {\n control.removeAttribute('aria-required');\n }\n\n // Invalid state\n if (hasError) {\n control.setAttribute('aria-invalid', 'true');\n } else {\n control.removeAttribute('aria-invalid');\n }\n\n // Description (error or help text) via light-DOM span\n if (hasDesc) {\n control.setAttribute('aria-describedby', this._a11yDescId);\n } else {\n control.removeAttribute('aria-describedby');\n }\n }\n\n // ─── Render ───\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n const hasHelp = !!this.helpText || this._hasHelpSlot;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n 'field--size-sm': this.hxSize === 'sm',\n 'field--size-md': this.hxSize === 'md',\n 'field--size-lg': this.hxSize === 'lg',\n 'field--layout-inline': this.layout === 'inline',\n };\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <!-- Label -->\n <div class=\"field__label-wrapper\">\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label && !this._hasLabelSlot\n ? html`\n <label part=\"label\" class=\"field__label\" @click=${this._handleLabelClick}>\n ${this.label}\n ${this.required\n ? html`<span\n part=\"required-indicator\"\n class=\"field__required-marker\"\n aria-hidden=\"true\"\n >*</span\n >`\n : nothing}\n </label>\n `\n : nothing}\n </slot>\n </div>\n\n <!-- Description -->\n <slot name=\"description\"></slot>\n\n <!-- Control (default slot) -->\n <div part=\"control\" class=\"field__control\">\n <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n </div>\n\n <!-- Error -->\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${this.error\n ? html`\n <div part=\"error-message\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>\n `\n : nothing}\n </slot>\n\n <!-- Slotted error live region — ensures slotted error content is announced -->\n <div aria-live=\"assertive\" class=\"field__error-slot-announcer\"></div>\n\n <!-- Help text (always in DOM so slot detection works; hidden when no help or error is shown) -->\n <div\n part=\"help-text\"\n class=\"field__help-text\"\n id=${this._helpTextId}\n ?hidden=${!hasHelp || hasError}\n >\n <slot name=\"help\" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-field': HelixField;\n }\n}\n"],"names":["helixFieldStyles","css","FORM_CONTROL_TAGS","isFormControl","el","HelixField","LitElement","slot","_a","changedProps","span","assigned","_e","control","hasError","hasDesc","hasHelp","fieldClasses","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-file-upload-DnYiIhyN.js","sources":["../../src/components/hx-file-upload/hx-file-upload.styles.ts","../../src/components/hx-file-upload/hx-file-upload.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFileUploadStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-2, 0.5rem);\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n /* ─── Label ─── */\n\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-color-neutral-700, #343a40);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n /* ─── Dropzone ─── */\n\n .dropzone {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n min-height: var(--hx-size-32, 8rem);\n padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);\n border: var(--hx-border-width-thin, 1px) dashed\n var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #ced4da));\n border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));\n background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8f9fa));\n cursor: pointer;\n text-align: center;\n transition:\n border-color var(--hx-transition-fast, 150ms ease),\n background-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n user-select: none;\n color: var(--hx-color-neutral-600, #495057);\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n .dropzone:focus-visible {\n outline: none;\n border-color: var(--hx-focus-ring-color, #2563eb);\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-focus-ring-color, #2563eb) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n .dropzone--drag-over {\n border-color: var(--hx-color-primary-500, #2563eb);\n background-color: var(\n --hx-file-upload-dropzone-active-bg,\n color-mix(\n in srgb,\n var(--hx-color-primary-500, #2563eb) 8%,\n var(--hx-color-neutral-0, #ffffff)\n )\n );\n border-style: solid;\n }\n\n .dropzone--error {\n border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc3545));\n }\n\n @media (prefers-reduced-motion: reduce) {\n .dropzone {\n transition: none;\n }\n }\n\n /* ─── Hidden file input ─── */\n\n .file-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n\n /* ─── File list ─── */\n\n .file-list {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-2, 0.5rem);\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .file-list:empty {\n display: none;\n }\n\n /* ─── File item ─── */\n\n .file-item {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e9ecef);\n border-radius: var(--hx-border-radius-md, 0.375rem);\n background-color: var(--hx-color-neutral-0, #ffffff);\n }\n\n .file-item__row {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n }\n\n .file-item__name {\n flex: 1;\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-color-neutral-800, #212529);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .file-item__size {\n flex-shrink: 0;\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-color-neutral-500, #6c757d);\n }\n\n .file-item__remove {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--hx-space-1, 0.25rem);\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-color-neutral-500, #6c757d);\n cursor: pointer;\n line-height: 1;\n transition:\n color var(--hx-transition-fast, 150ms ease),\n background-color var(--hx-transition-fast, 150ms ease);\n }\n\n .file-item__remove:hover {\n color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));\n background-color: color-mix(in srgb, var(--hx-color-error-500, #dc3545) 8%, transparent);\n }\n\n .file-item__remove:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n outline-offset: 2px;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .file-item__remove {\n transition: none;\n }\n }\n\n /* ─── Progress bar ─── */\n\n .progress-track {\n width: 100%;\n height: 4px;\n background-color: var(--hx-color-neutral-200, #e9ecef);\n border-radius: var(--hx-border-radius-full, 9999px);\n overflow: hidden;\n }\n\n .progress-bar {\n height: 100%;\n background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #2563eb));\n border-radius: inherit;\n transition: width var(--hx-transition-fast, 150ms ease);\n width: 0%;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .progress-bar {\n transition: none;\n }\n }\n\n /* ─── Screen-reader only utility ─── */\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n\n /* ─── Error message ─── */\n\n .field__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixFileUploadStyles } from './hx-file-upload.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxFileUploadIdCounter = 0;\n\ninterface FileEntry {\n file: File;\n progress: number;\n}\n\n/**\n * A drag-and-drop file upload component with client-side validation,\n * file list management, per-file progress, and native form association.\n *\n * @summary Form-associated file upload dropzone with drag-and-drop, validation, and progress tracking.\n *\n * @tag hx-file-upload\n *\n * @slot - Default dropzone content. Replaces the built-in \"Drag files here or click to browse\" prompt.\n * @slot file-list - Custom file list display. When provided, the built-in file list is hidden.\n *\n * @fires {CustomEvent<{files: File[]}>} hx-upload - Dispatched when valid files are selected via drag-and-drop or the file picker.\n * @fires {CustomEvent<{file: File, index: number}>} hx-remove - Dispatched when a file is removed from the list.\n * @fires {CustomEvent<{message: string, files: File[]}>} hx-error - Dispatched when file validation fails (type or size constraint).\n *\n * @csspart dropzone - The drag-and-drop target area.\n * @csspart file-list - The container wrapping the list of selected files.\n * @csspart file-item - An individual file entry in the list.\n * @csspart progress - The progress bar track for a file item.\n * @csspart label - The visible label element.\n * @csspart error - The error message container below the dropzone.\n *\n * @cssprop [--hx-file-upload-dropzone-bg=var(--hx-color-neutral-50)] - Dropzone background color.\n * @cssprop [--hx-file-upload-dropzone-border-color=var(--hx-color-neutral-300)] - Dropzone border color.\n * @cssprop [--hx-file-upload-dropzone-border-radius=var(--hx-border-radius-lg)] - Dropzone border radius.\n * @cssprop [--hx-file-upload-dropzone-active-bg] - Dropzone background when a file is dragged over.\n * @cssprop [--hx-file-upload-progress-color=var(--hx-color-primary-500)] - Progress bar fill color.\n * @cssprop [--hx-file-upload-error-color=var(--hx-color-error-500)] - Error state and remove-button hover color.\n */\n@customElement('hx-file-upload')\nexport class HelixFileUpload extends LitElement {\n static override styles = [tokenStyles, helixFileUploadStyles];\n\n // ─── Form Association ───\n\n static formAssociated = true;\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /**\n * The form field name used during form submission.\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * Accepted file types as a comma-separated list of MIME types or extensions.\n * Mirrors the native `<input type=\"file\" accept>` attribute.\n * @attr accept\n */\n @property({ type: String })\n accept = '';\n\n /**\n * Maximum allowed file size in bytes. 0 means unlimited.\n * @attr max-size\n */\n @property({ type: Number, attribute: 'max-size' })\n maxSize = 0;\n\n /**\n * Maximum number of files that can be selected. 0 means unlimited.\n * @attr max-files\n */\n @property({ type: Number, attribute: 'max-files' })\n maxFiles = 0;\n\n /**\n * Whether multiple files may be selected at once.\n * @attr multiple\n */\n @property({ type: Boolean })\n multiple = false;\n\n /**\n * Visible label text for the dropzone.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Whether the component is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Error message displayed below the dropzone. Also puts the dropzone in an error visual state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n // ─── Internal State ───\n\n @state() private _files: FileEntry[] = [];\n @state() private _dragOver = false;\n @state() private _hasFileListSlot = false;\n\n // ─── Internal References ───\n\n @query('.file-input')\n private _fileInput!: HTMLInputElement | null;\n\n // ─── Stable IDs ───\n\n private readonly _baseId = `hx-file-upload-${++_hxFileUploadIdCounter}`;\n private readonly _labelId = `${this._baseId}-label`;\n private readonly _errorId = `${this._baseId}-error`;\n private readonly _dropzoneId = `${this._baseId}-dropzone`;\n private readonly _liveId = `${this._baseId}-live`;\n\n // ─── Slot Handling ───\n\n private _handleFileListSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasFileListSlot = slot.assignedElements({ flatten: true }).length > 0;\n }\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('_files') || changedProperties.has('name')) {\n this._syncFormValue();\n }\n }\n\n // ─── Form Integration ───\n\n /** Returns the associated form element, if any. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** Returns the validation message. */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Returns the ValidityState object. */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Checks whether the component satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /** Called by the form when it resets. */\n formResetCallback(): void {\n this._files = [];\n this._internals.setFormValue(null);\n }\n\n private _syncFormValue(): void {\n if (this._files.length === 0) {\n this._internals.setFormValue(null);\n return;\n }\n\n if (this._files.length === 1) {\n // Single file — pass directly as File (accepted by setFormValue)\n const firstEntry = this._files[0];\n if (firstEntry) {\n this._internals.setFormValue(firstEntry.file);\n }\n return;\n }\n\n // Multiple files — use FormData so all files are submitted under the same name\n const formData = new FormData();\n for (const entry of this._files) {\n formData.append(this.name, entry.file, entry.file.name);\n }\n this._internals.setFormValue(formData);\n }\n\n // ─── Validation ───\n\n /**\n * Validates a file against `accept` and `maxSize` constraints.\n * Returns null on success, or an error message string on failure.\n */\n private _validateFile(file: File): string | null {\n if (this.accept) {\n const accepted = this._isAccepted(file);\n if (!accepted) {\n return `\"${file.name}\" has an unsupported file type. Accepted types: ${this.accept}`;\n }\n }\n\n if (this.maxSize > 0 && file.size > this.maxSize) {\n const maxMb = (this.maxSize / (1024 * 1024)).toFixed(1);\n return `\"${file.name}\" exceeds the maximum size of ${maxMb} MB.`;\n }\n\n return null;\n }\n\n /**\n * Checks whether a file is accepted given the `accept` attribute value.\n * Handles MIME types (e.g. \"image/png\"), wildcard MIME types (e.g. \"image/*\"),\n * and extensions (e.g. \".pdf\").\n */\n private _isAccepted(file: File): boolean {\n const tokens = this.accept.split(',').map((t) => t.trim().toLowerCase());\n\n for (const token of tokens) {\n if (token.startsWith('.')) {\n // Extension match\n if (file.name.toLowerCase().endsWith(token)) return true;\n } else if (token.endsWith('/*')) {\n // Wildcard MIME type e.g. \"image/*\"\n const baseType = token.slice(0, -2);\n if (file.type.toLowerCase().startsWith(baseType)) return true;\n } else {\n // Exact MIME type\n if (file.type.toLowerCase() === token) return true;\n }\n }\n\n return false;\n }\n\n // ─── File Processing ───\n\n private _processFiles(rawFiles: File[]): void {\n if (this.disabled) return;\n\n const candidateFiles = this.multiple ? rawFiles : rawFiles.slice(0, 1);\n const validFiles: File[] = [];\n const invalidFiles: File[] = [];\n const errorMessages: string[] = [];\n\n for (const file of candidateFiles) {\n const validationError = this._validateFile(file);\n if (validationError) {\n invalidFiles.push(file);\n errorMessages.push(validationError);\n } else {\n validFiles.push(file);\n }\n }\n\n if (invalidFiles.length > 0) {\n this.dispatchEvent(\n new CustomEvent('hx-error', {\n bubbles: true,\n composed: true,\n detail: { message: errorMessages.join(' '), files: invalidFiles },\n }),\n );\n }\n\n if (validFiles.length === 0) return;\n\n // Enforce maxFiles limit (only in multiple mode — single-file mode always replaces)\n const currentCount = this.multiple ? this._files.length : 0;\n const capacity =\n this.maxFiles > 0 ? Math.max(0, this.maxFiles - currentCount) : validFiles.length;\n const allowedFiles = validFiles.slice(0, capacity);\n\n if (allowedFiles.length === 0 && this.maxFiles > 0) {\n this.dispatchEvent(\n new CustomEvent('hx-error', {\n bubbles: true,\n composed: true,\n detail: {\n message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed.`,\n files: validFiles,\n },\n }),\n );\n return;\n }\n\n if (allowedFiles.length > 0) {\n const newEntries: FileEntry[] = allowedFiles.map((file) => ({ file, progress: 0 }));\n\n if (this.multiple) {\n this._files = [...this._files, ...newEntries];\n } else {\n this._files = newEntries;\n }\n\n this.dispatchEvent(\n new CustomEvent('hx-upload', {\n bubbles: true,\n composed: true,\n detail: { files: allowedFiles },\n }),\n );\n }\n\n // If remaining valid files were cut by maxFiles, report that too\n const overflow = validFiles.slice(capacity);\n if (overflow.length > 0 && this.maxFiles > 0) {\n this.dispatchEvent(\n new CustomEvent('hx-error', {\n bubbles: true,\n composed: true,\n detail: {\n message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed. ${overflow.length} file${overflow.length === 1 ? ' was' : 's were'} not added.`,\n files: overflow,\n },\n }),\n );\n }\n }\n\n // ─── Public Methods ───\n\n /**\n * Sets the upload progress for a file at the given index.\n * @param index - Zero-based index into the current file list.\n * @param percent - Progress percentage from 0 to 100.\n */\n setProgress(index: number, percent: number): void {\n if (index < 0 || index >= this._files.length) return;\n const clamped = Math.max(0, Math.min(100, percent));\n this._files = this._files.map((entry, i) =>\n i === index ? { ...entry, progress: clamped } : entry,\n );\n }\n\n /**\n * Returns a read-only copy of the currently selected files.\n */\n get files(): File[] {\n return this._files.map((e) => e.file);\n }\n\n // ─── Drag and Drop Handlers ───\n\n private _handleDragOver(e: DragEvent): void {\n e.preventDefault();\n if (this.disabled) return;\n this._dragOver = true;\n }\n\n private _handleDragLeave(e: DragEvent): void {\n // Only clear drag state when leaving the dropzone entirely\n const target = e.relatedTarget as Node | null;\n if (target && this.contains(target)) return;\n const dropzone = this.shadowRoot?.querySelector('.dropzone');\n if (dropzone && dropzone.contains(target)) return;\n this._dragOver = false;\n }\n\n private _handleDrop(e: DragEvent): void {\n e.preventDefault();\n this._dragOver = false;\n if (this.disabled) return;\n\n const dt = e.dataTransfer;\n if (!dt) return;\n\n const rawFiles = Array.from(dt.files);\n if (rawFiles.length === 0) return;\n\n this._processFiles(rawFiles);\n }\n\n // ─── Click / Keyboard Handlers ───\n\n private _handleDropzoneClick(): void {\n if (this.disabled) return;\n this._fileInput?.click();\n }\n\n private _handleDropzoneKeyDown(e: KeyboardEvent): void {\n if (this.disabled) return;\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this._fileInput?.click();\n }\n }\n\n private _handleFileInputChange(e: Event): void {\n const input = e.target as HTMLInputElement;\n if (!input.files || input.files.length === 0) return;\n\n const rawFiles = Array.from(input.files);\n // Reset the input so the same file can be re-selected after removal\n input.value = '';\n this._processFiles(rawFiles);\n }\n\n // ─── Remove Handler ───\n\n private _handleRemove(index: number): void {\n if (this.disabled) return;\n const entry = this._files[index];\n if (!entry) return;\n\n const removedFile = entry.file;\n this._files = this._files.filter((_, i) => i !== index);\n\n this.dispatchEvent(\n new CustomEvent('hx-remove', {\n bubbles: true,\n composed: true,\n detail: { file: removedFile, index },\n }),\n );\n }\n\n // ─── Formatters ───\n\n private _formatSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n }\n\n // ─── Render Helpers ───\n\n private _renderFileList() {\n if (this._hasFileListSlot) return nothing;\n if (this._files.length === 0) return nothing;\n\n return html`\n <ul part=\"file-list\" class=\"file-list\" aria-label=\"Selected files\">\n ${repeat(\n this._files,\n (entry) => entry.file.name + entry.file.size,\n (entry, index) => html`\n <li part=\"file-item\" class=\"file-item\">\n <div class=\"file-item__row\">\n <span class=\"file-item__name\" title=${entry.file.name}> ${entry.file.name} </span>\n <span class=\"file-item__size\">${this._formatSize(entry.file.size)}</span>\n <button\n type=\"button\"\n class=\"file-item__remove\"\n aria-label=${`Remove ${entry.file.name}`}\n @click=${() => this._handleRemove(index)}\n >\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M1 1L13 13M13 1L1 13\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n </div>\n <div\n part=\"progress\"\n class=\"progress-track\"\n role=\"progressbar\"\n aria-valuenow=${entry.progress}\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-label=${`Upload progress for ${entry.file.name}: ${entry.progress}%`}\n >\n <div class=\"progress-bar\" style=\"width: ${entry.progress}%\"></div>\n </div>\n </li>\n `,\n )}\n </ul>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const hasError = !!this.error;\n\n const dropzoneClasses = {\n dropzone: true,\n 'dropzone--drag-over': this._dragOver,\n 'dropzone--error': hasError,\n };\n\n const dropzoneLabel = this.label\n ? `${this.label} — Drag files here or click to browse`\n : 'Drag files here or click to browse';\n\n return html`\n <div class=\"field\">\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" id=${this._labelId} for=${this._dropzoneId}>\n ${this.label}\n </label>\n `\n : nothing}\n\n <div\n part=\"dropzone\"\n class=${classMap(dropzoneClasses)}\n id=${this._dropzoneId}\n role=\"button\"\n tabindex=${this.disabled ? '-1' : '0'}\n aria-label=${dropzoneLabel}\n aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-describedby=${ifDefined(hasError ? this._errorId : undefined)}\n @click=${this._handleDropzoneClick}\n @keydown=${this._handleDropzoneKeyDown}\n @dragover=${this._handleDragOver}\n @dragleave=${this._handleDragLeave}\n @drop=${this._handleDrop}\n >\n <slot>Drag files here or click to browse</slot>\n </div>\n\n <input\n class=\"file-input\"\n type=\"file\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n accept=${ifDefined(this.accept || undefined)}\n ?multiple=${this.multiple}\n ?disabled=${this.disabled}\n @change=${this._handleFileInputChange}\n />\n\n <slot name=\"file-list\" @slotchange=${this._handleFileListSlotChange}></slot>\n\n ${this._renderFileList()}\n ${hasError\n ? html`\n <div\n part=\"error\"\n class=\"field__error\"\n id=${this._errorId}\n role=\"alert\"\n aria-live=\"polite\"\n >\n ${this.error}\n </div>\n `\n : nothing}\n\n <div id=${this._liveId} class=\"sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">\n ${this._dragOver ? 'File detected. Release to upload.' : ''}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-file-upload': HelixFileUpload;\n }\n}\n"],"names":["helixFileUploadStyles","css","_hxFileUploadIdCounter","HelixFileUpload","LitElement","slot","changedProperties","firstEntry","formData","entry","file","maxMb","tokens","t","token","baseType","rawFiles","candidateFiles","validFiles","invalidFiles","errorMessages","validationError","currentCount","capacity","allowedFiles","newEntries","overflow","index","percent","clamped","i","target","dropzone","_a","dt","input","removedFile","_","bytes","nothing","html","repeat","hasError","dropzoneClasses","dropzoneLabel","classMap","ifDefined","tokenStyles","__decorateClass","property","state","query","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACOrC,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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-icon-button-C_fsUJW4.js","sources":["../../src/components/hx-icon-button/hx-icon-button.styles.ts","../../src/components/hx-icon-button/hx-icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled);\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);\n border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));\n background-color: var(--hx-icon-button-bg);\n color: var(--hx-icon-button-color, var(--hx-color-primary-500));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast),\n color var(--hx-transition-fast),\n border-color var(--hx-transition-fast),\n box-shadow var(--hx-transition-fast);\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n flex-shrink: 0;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width) solid\n var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: var(--hx-focus-ring-offset);\n }\n\n .button:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Size Variants ─── */\n\n .button--sm {\n padding: var(--hx-space-1);\n width: var(--hx-icon-button-size, var(--hx-size-8));\n height: var(--hx-icon-button-size, var(--hx-size-8));\n font-size: var(--hx-font-size-sm);\n }\n\n .button--md {\n padding: var(--hx-space-2);\n width: var(--hx-icon-button-size, var(--hx-size-10));\n height: var(--hx-icon-button-size, var(--hx-size-10));\n font-size: var(--hx-font-size-md);\n }\n\n .button--lg {\n padding: var(--hx-space-3);\n width: var(--hx-icon-button-size, var(--hx-size-12));\n height: var(--hx-icon-button-size, var(--hx-size-12));\n font-size: var(--hx-font-size-lg);\n }\n\n /* ─── Style Variants ─── */\n\n .button--primary {\n --hx-icon-button-bg: var(--hx-color-primary-500);\n --hx-icon-button-color: var(--hx-color-neutral-0);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--primary:hover {\n --hx-icon-button-bg: var(--hx-color-primary-600);\n }\n\n .button--secondary {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-primary-500);\n --hx-icon-button-border-color: var(--hx-color-primary-500);\n }\n\n .button--secondary:hover {\n --hx-icon-button-bg: var(--hx-color-primary-50);\n }\n\n .button--tertiary {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-neutral-700);\n --hx-icon-button-border-color: var(--hx-color-neutral-300);\n }\n\n .button--tertiary:hover {\n --hx-icon-button-bg: var(--hx-color-neutral-100);\n }\n\n .button--danger {\n --hx-icon-button-bg: var(--hx-color-error-500);\n --hx-icon-button-color: var(--hx-color-neutral-0);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--danger:hover {\n --hx-icon-button-bg: var(--hx-color-error-600);\n }\n\n .button--ghost {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-primary-500);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-icon-button-bg: var(--hx-color-neutral-100);\n }\n\n /* ─── Icon Container ─── */\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1em;\n height: 1em;\n line-height: 1;\n pointer-events: none;\n }\n\n /* ─── Disabled ─── */\n\n .button[disabled] {\n cursor: not-allowed;\n /* P1-02 fix: opacity is set only on :host([disabled]) above to prevent\n multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixIconButtonStyles } from './hx-icon-button.styles.js';\n\n/**\n * An icon-only button component for compact, accessible actions.\n * Renders a square button or anchor element containing a single icon.\n * The `label` property is required and provides the accessible name\n * via `aria-label` and a native tooltip via the `title` attribute.\n *\n * @summary Icon-only action button with full accessibility support.\n *\n * @tag hx-icon-button\n *\n * @slot - Icon element to display (hx-icon, svg, or img).\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when the button is clicked (not disabled).\n *\n * @csspart button - The native button or anchor element.\n * @csspart icon - The icon container span wrapping the default slot.\n *\n * @cssprop [--hx-icon-button-bg=transparent] - Button background color.\n * @cssprop [--hx-icon-button-color=var(--hx-color-primary-500)] - Icon color.\n * @cssprop [--hx-icon-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-icon-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-icon-button-size] - Explicit width and height override for the button.\n * @cssprop [--hx-icon-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n */\n@customElement('hx-icon-button')\nexport class HelixIconButton extends LitElement {\n static override styles = [tokenStyles, helixIconButtonStyles];\n\n /**\n * Accessible name for the button. Required. Rendered as `aria-label` and\n * `title` on the underlying element. The component renders nothing when absent,\n * and a console warning is emitted to alert developers during authoring.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Visual style variant of the button.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' = 'ghost';\n\n /**\n * Size of the button.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * The type attribute for the underlying button element.\n * Has no effect when `href` is set.\n * @attr type\n */\n @property({ type: String })\n type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * Whether the button is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * When set, renders an `<a>` element instead of a `<button>`.\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * Name submitted with form data. Only applicable when rendering as a button.\n * @attr name\n */\n @property({ type: String })\n name: string | undefined = undefined;\n\n /**\n * Value submitted with form data. Only applicable when rendering as a button.\n * @attr value\n */\n @property({ type: String })\n value: string | undefined = undefined;\n\n // ─── Form Association via ElementInternals ───\n\n static formAssociated = true;\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n /** Returns the associated form element, if any. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n // ─── Event Handling ───\n\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n /**\n * Dispatched when the button is clicked.\n * @event hx-click\n */\n this.dispatchEvent(\n new CustomEvent('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n\n // Handle form submission/reset if form-associated and not in href/link mode\n if (!this.href) {\n if (this.type === 'submit' && this._internals.form) {\n this._internals.form.requestSubmit();\n } else if (this.type === 'reset' && this._internals.form) {\n this._internals.form.reset();\n }\n }\n }\n\n // ─── Render Helpers ───\n\n private _normalizedLabel(): string {\n return this.label.trim();\n }\n\n private _classes() {\n return {\n button: true,\n [`button--${this.variant}`]: true,\n [`button--${this.size}`]: true,\n };\n }\n\n private _iconSlot() {\n return html`<span part=\"icon\" class=\"icon\"><slot></slot></span>`;\n }\n\n // ─── Render ───\n\n override render() {\n const normalizedLabel = this._normalizedLabel();\n if (!normalizedLabel) {\n console.warn(\n '[hx-icon-button] The `label` property is required for accessibility. Render suppressed.',\n );\n return nothing;\n }\n\n if (this.href !== undefined) {\n // P1-03 fix: disabled anchor must set tabindex=\"-1\" explicitly — an <a>\n // without href is non-focusable by default in most browsers, but this is\n // browser-dependent. Explicit tabindex=\"-1\" guarantees keyboard exclusion\n // across all conforming browsers.\n // P1-07 note: aria-disabled IS required on the anchor branch because\n // <a> elements have no native disabled attribute; aria-disabled is the\n // only AT signal available.\n return html`\n <a\n part=\"button\"\n class=${classMap(this._classes())}\n href=${ifDefined(this.disabled ? undefined : this.href)}\n aria-label=${normalizedLabel}\n title=${normalizedLabel}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : nothing}\n @click=${this._handleClick}\n >\n ${this._iconSlot()}\n </a>\n `;\n }\n\n // P1-07 fix: aria-disabled is redundant on a natively disabled <button>.\n // The native disabled attribute already exposes aria-disabled=\"true\"\n // implicitly in the accessibility tree. Duplicate explicit aria-disabled\n // creates ambiguity about design intent. Keep only native ?disabled.\n return html`\n <button\n part=\"button\"\n class=${classMap(this._classes())}\n ?disabled=${this.disabled}\n type=${this.type}\n aria-label=${normalizedLabel}\n title=${normalizedLabel}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n @click=${this._handleClick}\n >\n ${this._iconSlot()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-icon-button': HelixIconButton;\n }\n}\n"],"names":["helixIconButtonStyles","css","HelixIconButton","LitElement","e","html","normalizedLabel","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-menu-divider-Buc5XA9E.js","sources":["../../src/components/hx-menu/hx-menu.styles.ts","../../src/components/hx-menu/hx-menu.ts","../../src/components/hx-menu/hx-menu-item.styles.ts","../../src/components/hx-menu/hx-menu-item.ts","../../src/components/hx-menu/hx-menu-divider.styles.ts","../../src/components/hx-menu/hx-menu-divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixMenuStyles = css`\n :host {\n display: block;\n }\n\n .menu {\n display: flex;\n flex-direction: column;\n padding: var(--hx-space-1, 0.25rem);\n background: var(--hx-menu-bg, var(--hx-color-neutral-0, #ffffff));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));\n border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));\n box-shadow: var(\n --hx-menu-shadow,\n 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -2px rgb(0 0 0 / 0.1)\n );\n min-width: var(--hx-menu-min-width, 10rem);\n outline: none;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMenuStyles } from './hx-menu.styles.js';\nimport type { HelixMenuItem } from './hx-menu-item.js';\n\n/**\n * A menu container that manages keyboard navigation over a list of menu items.\n * Use with `hx-menu-item` and `hx-menu-divider`.\n *\n * @summary Context/action menu with keyboard-navigable items.\n *\n * @tag hx-menu\n *\n * @slot - Default slot for hx-menu-item and hx-menu-divider elements.\n *\n * @fires {CustomEvent<{item: HelixMenuItem, value: string}>} hx-select - Dispatched when an item is selected.\n * @fires {CustomEvent<void>} hx-close - Dispatched when Escape is pressed.\n *\n * @csspart base - The root menu element.\n *\n * @cssprop [--hx-menu-bg=var(--hx-color-neutral-0)] - Menu background color.\n * @cssprop [--hx-menu-border-color=var(--hx-color-neutral-200)] - Menu border color.\n * @cssprop [--hx-menu-border-radius=var(--hx-border-radius-md)] - Menu border radius.\n * @cssprop [--hx-menu-shadow] - Menu box shadow.\n * @cssprop [--hx-menu-min-width=10rem] - Minimum menu width.\n */\n@customElement('hx-menu')\nexport class HelixMenu extends LitElement {\n static override styles = [tokenStyles, helixMenuStyles];\n\n /**\n * Accessible label for the menu. Rendered as `aria-label` on the inner\n * `role=\"menu\"` element when set.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = '';\n\n private _focusedIndex = -1;\n\n private _typeaheadBuffer = '';\n\n private _typeaheadTimeout: ReturnType<typeof setTimeout> | undefined;\n\n private _getItems(): HelixMenuItem[] {\n return Array.from(this.querySelectorAll<HelixMenuItem>('hx-menu-item')).filter(\n (item) => !item.disabled && !item.loading,\n );\n }\n\n /**\n * Synchronize roving tabindex across all enabled items.\n * Only the active item (or first item if none active) gets tabindex=0.\n */\n private _syncRovingTabIndex(): void {\n const items = this._getItems();\n const activeIndex = this._focusedIndex >= 0 ? this._focusedIndex : 0;\n items.forEach((item, i) => {\n item.setRovingTabIndex(i === activeIndex ? 0 : -1);\n });\n }\n\n /** Focus the first menu item. */\n focusFirst(): void {\n const items = this._getItems();\n const first = items[0];\n if (first !== undefined) {\n this._focusedIndex = 0;\n this._syncRovingTabIndex();\n first.focus();\n }\n }\n\n /** Focus the last menu item. */\n focusLast(): void {\n const items = this._getItems();\n const last = items[items.length - 1];\n if (last !== undefined) {\n this._focusedIndex = items.length - 1;\n this._syncRovingTabIndex();\n last.focus();\n }\n }\n\n private _focusItem(index: number): void {\n const items = this._getItems();\n if (items.length === 0) return;\n this._focusedIndex = Math.max(0, Math.min(index, items.length - 1));\n this._syncRovingTabIndex();\n const target = items[this._focusedIndex];\n if (target !== undefined) target.focus();\n }\n\n private _updateFocusedIndex(): void {\n const items = this._getItems();\n const active = this.shadowRoot?.activeElement ?? document.activeElement;\n // Find the active item by checking if any item's shadow root contains the active element\n const idx = items.findIndex((item) => item.matches(':focus-within') || item === active);\n if (idx !== -1) this._focusedIndex = idx;\n }\n\n private _handleKeyDown(e: KeyboardEvent): void {\n this._updateFocusedIndex();\n const items = this._getItems();\n if (items.length === 0) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n this._focusItem(this._focusedIndex + 1 < items.length ? this._focusedIndex + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n this._focusItem(this._focusedIndex > 0 ? this._focusedIndex - 1 : items.length - 1);\n break;\n case 'Home':\n e.preventDefault();\n this._focusItem(0);\n break;\n case 'End':\n e.preventDefault();\n this._focusItem(items.length - 1);\n break;\n case 'Escape':\n e.preventDefault();\n this.dispatchEvent(new CustomEvent('hx-close', { bubbles: true, composed: true }));\n break;\n default:\n if (e.key.length === 1 && e.key !== ' ' && !e.ctrlKey && !e.metaKey && !e.altKey) {\n this._handleTypeahead(e.key, items);\n }\n break;\n }\n }\n\n private _handleTypeahead(char: string, items: HelixMenuItem[]): void {\n clearTimeout(this._typeaheadTimeout);\n this._typeaheadBuffer += char.toLowerCase();\n this._typeaheadTimeout = setTimeout(() => {\n this._typeaheadBuffer = '';\n }, 500);\n\n const match = items.findIndex((item) => {\n if (item.disabled || item.hasAttribute('disabled')) return false;\n const text = item.textContent?.trim().toLowerCase() ?? '';\n return text.startsWith(this._typeaheadBuffer);\n });\n\n if (match !== -1) {\n this._focusItem(match);\n }\n }\n\n private _handleSlotChange(e: Event): void {\n const slot = e.target;\n if (!(slot instanceof HTMLSlotElement)) return;\n const validTags = new Set(['hx-menu-item', 'hx-menu-divider']);\n const invalid = slot\n .assignedElements()\n .filter((el) => !validTags.has(el.tagName.toLowerCase()));\n if (invalid.length > 0) {\n console.warn(\n `[hx-menu] Default slot expects <hx-menu-item> or <hx-menu-divider> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n );\n }\n // Initialize roving tabindex when items are slotted\n this._syncRovingTabIndex();\n }\n\n private _handleItemSelect(e: Event): void {\n const detail = (e as CustomEvent<{ item: HelixMenuItem; value: string }>).detail;\n const items = this._getItems();\n this._focusedIndex = items.indexOf(detail.item);\n\n this.dispatchEvent(\n new CustomEvent('hx-select', {\n bubbles: true,\n composed: true,\n detail: { item: detail.item, value: detail.value },\n }),\n );\n }\n\n override render() {\n return html`\n <div\n part=\"base\"\n class=\"menu\"\n role=\"menu\"\n aria-label=${this.label || nothing}\n @keydown=${this._handleKeyDown}\n @hx-item-select=${this._handleItemSelect}\n >\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-menu': HelixMenu;\n }\n}\n","import { css } from 'lit';\n\nexport const helixMenuItemStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n .menu-item {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n cursor: pointer;\n color: var(--hx-menu-item-color, var(--hx-color-neutral-900, #0f172a));\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-family: var(--hx-font-family-sans, sans-serif);\n line-height: var(--hx-line-height-tight, 1.25);\n user-select: none;\n -webkit-user-select: none;\n outline: none;\n background: none;\n width: 100%;\n box-sizing: border-box;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n .menu-item:hover,\n .menu-item:focus-visible {\n background-color: var(--hx-menu-item-hover-bg, var(--hx-color-neutral-100, #f1f5f9));\n }\n\n .menu-item:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #3b82f6));\n outline-offset: 0px;\n }\n\n .menu-item__prefix,\n .menu-item__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .menu-item__label {\n flex: 1 1 auto;\n }\n\n .menu-item__checked-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n width: 1em;\n opacity: 0;\n transition: opacity var(--hx-transition-fast, 150ms ease);\n }\n\n .menu-item--checked .menu-item__checked-icon {\n opacity: 1;\n }\n\n .menu-item__submenu-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n margin-inline-start: auto;\n }\n\n .menu-item__spinner {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n animation: hx-menu-spin var(--hx-duration-spinner, 750ms) linear infinite;\n }\n\n @keyframes hx-menu-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .menu-item__spinner {\n animation: none;\n opacity: var(--hx-opacity-muted, 0.6);\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMenuItemStyles } from './hx-menu-item.styles.js';\n\n/**\n * A single interactive item for use inside `hx-menu`. Supports normal, checkbox,\n * and radio types, loading state, prefix/suffix slots, and submenu nesting.\n * Use `aria-label` on the parent `hx-menu` to provide an accessible name.\n *\n * @summary Interactive item within an hx-menu.\n *\n * @tag hx-menu-item\n *\n * @slot - Default slot for the item label.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Shortcut text or icon rendered after the label.\n * @slot submenu - A nested hx-menu for submenu content.\n *\n * @fires {CustomEvent<{item: HelixMenuItem, value: string}>} hx-item-select - Dispatched when the item is activated via click, Enter, or Space.\n * @fires {CustomEvent<{item: HelixMenuItem}>} hx-item-submenu-open - Dispatched when ArrowRight is pressed on an item with a submenu.\n *\n * @csspart base - The root item element.\n * @csspart prefix - Prefix slot wrapper.\n * @csspart label - Label slot wrapper.\n * @csspart suffix - Suffix slot wrapper.\n * @csspart submenu-icon - The chevron icon indicating a submenu.\n * @csspart checked-icon - The checkmark icon for checkbox-type items.\n *\n * @cssprop [--hx-menu-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-menu-item-hover-bg=var(--hx-color-neutral-100)] - Item hover/focus background.\n */\n@customElement('hx-menu-item')\nexport class HelixMenuItem extends LitElement {\n static override styles = [tokenStyles, helixMenuItemStyles];\n\n /**\n * @internal Managed by parent hx-menu for roving tabindex.\n * Only the active item in the menu has tabindex=0; all others have -1.\n */\n @state()\n private _rovingTabIndex = -1;\n\n /** @internal Set the roving tabindex value. Called by parent hx-menu. */\n setRovingTabIndex(value: number): void {\n this._rovingTabIndex = value;\n }\n\n /**\n * The value associated with this item, emitted in the hx-select event.\n * @attr value\n */\n @property({ type: String })\n value = '';\n\n /**\n * Whether the item is disabled. Prevents interaction and event dispatch.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the item is checked. Only meaningful when type=\"checkbox\".\n * @attr checked\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * The type of menu item. \"checkbox\" renders a checkmark and toggles checked state.\n * \"radio\" renders a checkmark and emits selection for radio-group behavior.\n * @attr type\n */\n @property({ type: String, reflect: true })\n type: 'normal' | 'checkbox' | 'radio' = 'normal';\n\n /**\n * Whether the item is in a loading state. Shows a spinner and prevents interaction.\n * @attr loading\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n @state()\n private _hasSubmenu = false;\n\n /** Focus the inner interactive element. */\n override focus(options?: FocusOptions): void {\n this.shadowRoot?.querySelector<HTMLElement>('.menu-item')?.focus(options);\n }\n\n private _handleSubmenuSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasSubmenu = slot.assignedElements().length > 0;\n }\n\n private _activate(): void {\n if (this.disabled || this.loading) return;\n\n if (this.type === 'checkbox') {\n this.checked = !this.checked;\n } else if (this.type === 'radio') {\n const menu = this.closest('hx-menu');\n if (menu) {\n menu\n .querySelectorAll<HelixMenuItem>(':scope > hx-menu-item[type=\"radio\"]')\n .forEach((sibling) => {\n sibling.checked = sibling === this;\n });\n } else {\n this.checked = true;\n }\n }\n\n this.dispatchEvent(\n new CustomEvent('hx-item-select', {\n bubbles: true,\n composed: true,\n detail: { item: this, value: this.value },\n }),\n );\n }\n\n private _handleClick(e: MouseEvent): void {\n if (this.disabled || this.loading) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n this._activate();\n }\n\n private _handleKeyDown(e: KeyboardEvent): void {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this._activate();\n return;\n }\n\n if (e.key === 'ArrowRight' && this._hasSubmenu) {\n e.preventDefault();\n this.dispatchEvent(\n new CustomEvent('hx-item-submenu-open', {\n bubbles: true,\n composed: true,\n detail: { item: this },\n }),\n );\n }\n }\n\n private _renderCheckedIcon() {\n return html`\n <span part=\"checked-icon\" class=\"menu-item__checked-icon\" aria-hidden=\"true\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n </span>\n `;\n }\n\n private _renderSubmenuIcon() {\n return html`\n <span part=\"submenu-icon\" class=\"menu-item__submenu-icon\" aria-hidden=\"true\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"9 18 15 12 9 6\" />\n </svg>\n </span>\n `;\n }\n\n private _renderSpinner() {\n return html`\n <svg class=\"menu-item__spinner\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"3\" opacity=\"0.3\" />\n <path\n d=\"M12 2a10 10 0 0 1 10 10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n />\n </svg>\n `;\n }\n\n private _getRole(): string {\n switch (this.type) {\n case 'checkbox':\n return 'menuitemcheckbox';\n case 'radio':\n return 'menuitemradio';\n default:\n return 'menuitem';\n }\n }\n\n override render() {\n const role = this._getRole();\n const hasCheckableRole = this.type === 'checkbox' || this.type === 'radio';\n const classes = {\n 'menu-item': true,\n 'menu-item--checked': this.checked,\n };\n\n return html`\n <div\n part=\"base\"\n class=${classMap(classes)}\n role=${role}\n tabindex=${this.disabled ? '-1' : String(this._rovingTabIndex)}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-checked=${hasCheckableRole ? (this.checked ? 'true' : 'false') : nothing}\n aria-haspopup=${this._hasSubmenu ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n @click=${this._handleClick}\n @keydown=${this._handleKeyDown}\n >\n ${this.loading ? this._renderSpinner() : nothing}\n ${hasCheckableRole ? this._renderCheckedIcon() : nothing}\n <span part=\"prefix\" class=\"menu-item__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"menu-item__label\">\n <slot></slot>\n </span>\n <span part=\"suffix\" class=\"menu-item__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n ${this._hasSubmenu ? this._renderSubmenuIcon() : nothing}\n <slot name=\"submenu\" @slotchange=${this._handleSubmenuSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-menu-item': HelixMenuItem;\n }\n}\n","import { css } from 'lit';\n\nexport const helixMenuDividerStyles = css`\n :host {\n display: block;\n }\n\n .menu-divider {\n height: var(--hx-border-width-thin, 1px);\n background-color: var(--hx-menu-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n margin: var(--hx-space-1, 0.25rem) calc(-1 * var(--hx-space-1, 0.25rem));\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMenuDividerStyles } from './hx-menu-divider.styles.js';\n\n/**\n * A visual separator for grouping items within an `hx-menu`.\n *\n * @summary Horizontal divider between menu sections.\n *\n * @tag hx-menu-divider\n *\n * @csspart base - The root separator element.\n *\n * @cssprop [--hx-menu-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n */\n@customElement('hx-menu-divider')\nexport class HelixMenuDivider extends LitElement {\n static override styles = [tokenStyles, helixMenuDividerStyles];\n\n override render() {\n return html`<div\n part=\"base\"\n class=\"menu-divider\"\n role=\"separator\"\n aria-orientation=\"horizontal\"\n ></div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-menu-divider': HelixMenuDivider;\n }\n}\n"],"names":["helixMenuStyles","css","HelixMenu","LitElement","item","items","activeIndex","first","last","index","target","active","_a","idx","char","match","slot","validTags","invalid","el","detail","html","nothing","tokenStyles","__decorateClass","property","customElement","helixMenuItemStyles","HelixMenuItem","value","options","_b","menu","sibling","role","hasCheckableRole","classes","classMap","state","helixMenuDividerStyles","HelixMenuDivider"],"mappings":"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"}
|