@helixui/library 1.0.1 → 1.1.2
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 +2936 -9700
- package/dist/components/hx-accordion/hx-accordion-item.d.ts +7 -0
- package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
- package/dist/components/hx-accordion/hx-accordion.d.ts +3 -0
- package/dist/components/hx-accordion/hx-accordion.d.ts.map +1 -1
- package/dist/components/hx-accordion/index.js +1 -1
- package/dist/components/hx-action-bar/hx-action-bar.d.ts +13 -3
- 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 +23 -0
- package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
- package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
- package/dist/components/hx-alert/index.js +1 -1
- package/dist/components/hx-avatar/hx-avatar.d.ts +8 -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-badge/hx-badge.d.ts +8 -1
- package/dist/components/hx-badge/hx-badge.d.ts.map +1 -1
- package/dist/components/hx-badge/index.js +1 -1
- package/dist/components/hx-banner/hx-banner.d.ts +11 -0
- package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
- package/dist/components/hx-banner/index.js +1 -1
- package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts +17 -2
- 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 +6 -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-card/hx-card.d.ts +7 -0
- package/dist/components/hx-card/hx-card.d.ts.map +1 -1
- package/dist/components/hx-card/index.js +1 -1
- package/dist/components/hx-carousel/hx-carousel-item.d.ts +2 -0
- package/dist/components/hx-carousel/hx-carousel-item.d.ts.map +1 -1
- package/dist/components/hx-carousel/hx-carousel-item.styles.d.ts +2 -0
- package/dist/components/hx-carousel/hx-carousel-item.styles.d.ts.map +1 -0
- package/dist/components/hx-carousel/hx-carousel.d.ts +27 -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 +18 -2
- package/dist/components/hx-checkbox/hx-checkbox.d.ts.map +1 -1
- package/dist/components/hx-checkbox/index.js +1 -1
- package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts +20 -4
- 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 +10 -0
- package/dist/components/hx-code-snippet/hx-code-snippet.d.ts.map +1 -1
- package/dist/components/hx-code-snippet/hx-code-snippet.styles.d.ts.map +1 -1
- package/dist/components/hx-code-snippet/index.js +1 -1
- package/dist/components/hx-color-picker/hx-color-picker.d.ts +70 -2
- 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 +37 -2
- package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
- package/dist/components/hx-combobox/hx-combobox.styles.d.ts.map +1 -1
- package/dist/components/hx-combobox/index.js +1 -1
- package/dist/components/hx-copy-button/hx-copy-button.d.ts +11 -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 +12 -3
- package/dist/components/hx-counter/hx-counter.d.ts.map +1 -1
- package/dist/components/hx-counter/index.js +1 -1
- package/dist/components/hx-data-table/hx-data-table.d.ts +19 -2
- 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 +62 -3
- package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
- package/dist/components/hx-date-picker/hx-date-picker.styles.d.ts.map +1 -1
- package/dist/components/hx-date-picker/index.js +1 -1
- package/dist/components/hx-dialog/hx-dialog.d.ts +31 -4
- package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
- package/dist/components/hx-dialog/hx-dialog.styles.d.ts.map +1 -1
- package/dist/components/hx-dialog/index.js +1 -1
- package/dist/components/hx-divider/hx-divider.d.ts +4 -1
- package/dist/components/hx-divider/hx-divider.d.ts.map +1 -1
- package/dist/components/hx-divider/index.js +1 -1
- package/dist/components/hx-drawer/hx-drawer.d.ts +25 -3
- package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
- package/dist/components/hx-drawer/hx-drawer.styles.d.ts.map +1 -1
- package/dist/components/hx-drawer/index.js +1 -1
- package/dist/components/hx-dropdown/hx-dropdown.d.ts +15 -2
- package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
- package/dist/components/hx-dropdown/index.js +1 -1
- package/dist/components/hx-field/hx-field.d.ts +10 -2
- 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 +39 -2
- package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
- package/dist/components/hx-file-upload/hx-file-upload.styles.d.ts.map +1 -1
- package/dist/components/hx-file-upload/index.js +1 -1
- package/dist/components/hx-form/hx-form.d.ts.map +1 -1
- package/dist/components/hx-form/index.js +1 -1
- package/dist/components/hx-format-date/hx-format-date.d.ts +8 -0
- package/dist/components/hx-format-date/hx-format-date.d.ts.map +1 -1
- package/dist/components/hx-format-date/index.js +1 -1
- package/dist/components/hx-grid/hx-grid.d.ts +9 -3
- package/dist/components/hx-grid/hx-grid.d.ts.map +1 -1
- package/dist/components/hx-grid/index.js +1 -1
- package/dist/components/hx-help-text/index.js +1 -1
- package/dist/components/hx-icon/hx-icon.d.ts +10 -2
- package/dist/components/hx-icon/hx-icon.d.ts.map +1 -1
- package/dist/components/hx-icon/index.js +1 -1
- package/dist/components/hx-icon-button/hx-icon-button.d.ts +11 -0
- package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
- package/dist/components/hx-icon-button/index.js +1 -1
- package/dist/components/hx-image/hx-image.d.ts +8 -0
- package/dist/components/hx-image/hx-image.d.ts.map +1 -1
- package/dist/components/hx-image/index.js +1 -1
- package/dist/components/hx-link/hx-link.d.ts +3 -0
- package/dist/components/hx-link/hx-link.d.ts.map +1 -1
- package/dist/components/hx-link/hx-link.styles.d.ts.map +1 -1
- package/dist/components/hx-link/index.js +1 -1
- package/dist/components/hx-list/hx-list-item.d.ts +8 -2
- package/dist/components/hx-list/hx-list-item.d.ts.map +1 -1
- package/dist/components/hx-list/hx-list-item.styles.d.ts.map +1 -1
- package/dist/components/hx-list/hx-list.d.ts +6 -2
- 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-item.d.ts +11 -0
- package/dist/components/hx-menu/hx-menu-item.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu-item.styles.d.ts.map +1 -1
- package/dist/components/hx-menu/hx-menu.d.ts +10 -1
- 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 +8 -0
- package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
- package/dist/components/hx-meter/hx-meter.styles.d.ts.map +1 -1
- package/dist/components/hx-meter/index.js +1 -1
- package/dist/components/hx-nav/hx-nav.d.ts +15 -0
- package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
- package/dist/components/hx-nav/index.js +1 -1
- package/dist/components/hx-number-input/hx-number-input.d.ts +47 -1
- 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 +15 -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 +30 -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 +53 -2
- package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
- package/dist/components/hx-popover/index.js +1 -1
- package/dist/components/hx-popup/hx-popup.d.ts +8 -0
- package/dist/components/hx-popup/hx-popup.d.ts.map +1 -1
- package/dist/components/hx-popup/hx-popup.styles.d.ts.map +1 -1
- package/dist/components/hx-popup/index.js +1 -1
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts +8 -2
- package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
- package/dist/components/hx-progress-bar/hx-progress-bar.styles.d.ts.map +1 -1
- package/dist/components/hx-progress-bar/index.js +1 -1
- package/dist/components/hx-progress-ring/hx-progress-ring.d.ts +8 -2
- package/dist/components/hx-progress-ring/hx-progress-ring.d.ts.map +1 -1
- package/dist/components/hx-progress-ring/index.js +1 -1
- package/dist/components/hx-prose/hx-prose.d.ts +5 -3
- package/dist/components/hx-prose/hx-prose.d.ts.map +1 -1
- package/dist/components/hx-prose/index.js +1 -1
- package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
- package/dist/components/hx-radio-group/hx-radio.d.ts +4 -2
- package/dist/components/hx-radio-group/hx-radio.d.ts.map +1 -1
- package/dist/components/hx-radio-group/hx-radio.styles.d.ts.map +1 -1
- package/dist/components/hx-radio-group/index.js +1 -1
- package/dist/components/hx-rating/hx-rating.d.ts +54 -2
- 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 +22 -2
- package/dist/components/hx-select/hx-select.d.ts.map +1 -1
- package/dist/components/hx-select/hx-select.styles.d.ts.map +1 -1
- package/dist/components/hx-select/index.js +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.d.ts +6 -0
- package/dist/components/hx-side-nav/hx-nav-item.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.d.ts +6 -1
- package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/index.js +1 -1
- package/dist/components/hx-slider/hx-slider.d.ts +22 -1
- package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
- package/dist/components/hx-slider/hx-slider.styles.d.ts.map +1 -1
- package/dist/components/hx-slider/index.js +1 -1
- package/dist/components/hx-spinner/hx-spinner.d.ts +3 -1
- package/dist/components/hx-spinner/hx-spinner.d.ts.map +1 -1
- package/dist/components/hx-spinner/index.js +1 -1
- package/dist/components/hx-split-button/hx-split-button.d.ts +12 -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 +32 -2
- package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
- package/dist/components/hx-split-panel/hx-split-panel.styles.d.ts.map +1 -1
- package/dist/components/hx-split-panel/index.js +1 -1
- package/dist/components/hx-stack/index.js +1 -1
- package/dist/components/hx-stat/hx-stat.d.ts +5 -1
- package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
- package/dist/components/hx-stat/index.js +1 -1
- package/dist/components/hx-status-indicator/hx-status-indicator.d.ts +13 -12
- package/dist/components/hx-status-indicator/hx-status-indicator.d.ts.map +1 -1
- package/dist/components/hx-status-indicator/index.js +1 -1
- package/dist/components/hx-steps/hx-step.d.ts +7 -9
- package/dist/components/hx-steps/hx-step.d.ts.map +1 -1
- package/dist/components/hx-steps/hx-step.styles.d.ts.map +1 -1
- package/dist/components/hx-steps/hx-steps.d.ts +3 -3
- 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-switch/hx-switch.d.ts +21 -1
- 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 +7 -2
- package/dist/components/hx-table/hx-table.d.ts.map +1 -1
- package/dist/components/hx-table/hx-table.styles.d.ts.map +1 -1
- package/dist/components/hx-table/hx-th.d.ts +4 -0
- package/dist/components/hx-table/hx-th.d.ts.map +1 -1
- package/dist/components/hx-table/index.js +1 -1
- package/dist/components/hx-tabs/hx-tab.d.ts +3 -0
- package/dist/components/hx-tabs/hx-tab.d.ts.map +1 -1
- package/dist/components/hx-tabs/hx-tabs.d.ts +6 -0
- package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
- package/dist/components/hx-tabs/index.js +1 -1
- package/dist/components/hx-tag/hx-tag.d.ts +2 -0
- package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
- package/dist/components/hx-tag/index.js +1 -1
- package/dist/components/hx-text/hx-text.d.ts +1 -0
- package/dist/components/hx-text/hx-text.d.ts.map +1 -1
- package/dist/components/hx-text/index.js +1 -1
- package/dist/components/hx-text-input/hx-text-input.d.ts +8 -3
- 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 +9 -3
- package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
- package/dist/components/hx-textarea/hx-textarea.styles.d.ts.map +1 -1
- package/dist/components/hx-textarea/index.js +1 -1
- package/dist/components/hx-theme/hx-theme.d.ts +2 -2
- package/dist/components/hx-theme/hx-theme.d.ts.map +1 -1
- package/dist/components/hx-time-picker/hx-time-picker.d.ts +22 -3
- package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
- package/dist/components/hx-time-picker/hx-time-picker.styles.d.ts.map +1 -1
- package/dist/components/hx-time-picker/index.js +1 -1
- package/dist/components/hx-toast/hx-toast.d.ts +8 -0
- package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
- package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
- package/dist/components/hx-toast/index.js +1 -1
- package/dist/components/hx-toggle-button/hx-toggle-button.d.ts +23 -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 +57 -0
- 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 +4 -0
- 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 +2 -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 +11 -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.js +70 -70
- package/dist/shared/{hx-accordion-DT8qHOay.js → hx-accordion-D1kFhdeQ.js} +15 -3
- package/dist/shared/hx-accordion-D1kFhdeQ.js.map +1 -0
- package/dist/shared/{hx-action-bar-we_WJety.js → hx-action-bar-D4bulGQP.js} +38 -31
- package/dist/shared/hx-action-bar-D4bulGQP.js.map +1 -0
- package/dist/shared/{hx-alert-D6uok29t.js → hx-alert-CSxCF2rr.js} +74 -53
- package/dist/shared/hx-alert-CSxCF2rr.js.map +1 -0
- package/dist/shared/{hx-avatar-Cep6Urm3.js → hx-avatar-Cun-O99h.js} +5 -1
- package/dist/shared/hx-avatar-Cun-O99h.js.map +1 -0
- package/dist/shared/{hx-badge-BeuWuUj_.js → hx-badge-CsFd2xtw.js} +53 -43
- package/dist/shared/hx-badge-CsFd2xtw.js.map +1 -0
- package/dist/shared/{hx-banner-DnCBJtRR.js → hx-banner-BTV-X2xF.js} +55 -43
- package/dist/shared/{hx-banner-DnCBJtRR.js.map → hx-banner-BTV-X2xF.js.map} +1 -1
- package/dist/shared/{hx-breadcrumb-item-Bj2UqhzR.js → hx-breadcrumb-item-4IwaLgaO.js} +34 -22
- package/dist/shared/hx-breadcrumb-item-4IwaLgaO.js.map +1 -0
- package/dist/shared/{hx-button-Cbhqpm5i.js → hx-button-7k-KeCYU.js} +29 -15
- package/dist/shared/hx-button-7k-KeCYU.js.map +1 -0
- package/dist/shared/{hx-card-B9j2SHyI.js → hx-card-0hT3G5hi.js} +10 -3
- package/dist/shared/hx-card-0hT3G5hi.js.map +1 -0
- package/dist/shared/{hx-carousel-item-Be0bC-7o.js → hx-carousel-item-DgeYyYZJ.js} +106 -89
- package/dist/shared/hx-carousel-item-DgeYyYZJ.js.map +1 -0
- package/dist/shared/{hx-checkbox-CuaJqEo7.js → hx-checkbox-BvjO-O41.js} +13 -6
- package/dist/shared/hx-checkbox-BvjO-O41.js.map +1 -0
- package/dist/shared/{hx-checkbox-group-ydUdV9Sx.js → hx-checkbox-group-Z5VvWzcj.js} +50 -37
- package/dist/shared/hx-checkbox-group-Z5VvWzcj.js.map +1 -0
- package/dist/shared/{hx-code-snippet-DBwIjl5p.js → hx-code-snippet-DqzPkH4K.js} +17 -1
- package/dist/shared/hx-code-snippet-DqzPkH4K.js.map +1 -0
- package/dist/shared/hx-color-picker-Da8z6AlQ.js +596 -0
- package/dist/shared/hx-color-picker-Da8z6AlQ.js.map +1 -0
- package/dist/shared/{hx-combobox-CNvY-es8.js → hx-combobox-CivfelTS.js} +93 -459
- package/dist/shared/hx-combobox-CivfelTS.js.map +1 -0
- package/dist/shared/{hx-copy-button-CLBA31to.js → hx-copy-button--0dymSvw.js} +9 -1
- package/dist/shared/{hx-copy-button-CLBA31to.js.map → hx-copy-button--0dymSvw.js.map} +1 -1
- package/dist/shared/{hx-counter-D-1NXzGs.js → hx-counter-Duf00H7p.js} +58 -49
- package/dist/shared/hx-counter-Duf00H7p.js.map +1 -0
- package/dist/shared/{hx-data-table-BwoJCFgs.js → hx-data-table-BWvd5NNx.js} +123 -89
- package/dist/shared/hx-data-table-BWvd5NNx.js.map +1 -0
- package/dist/shared/{hx-date-picker-DDcIBJir.js → hx-date-picker-6voxxxNE.js} +119 -485
- package/dist/shared/hx-date-picker-6voxxxNE.js.map +1 -0
- package/dist/shared/{hx-dialog-M7so0sRT.js → hx-dialog-DkUSnVgw.js} +72 -52
- package/dist/shared/hx-dialog-DkUSnVgw.js.map +1 -0
- package/dist/shared/{hx-divider-XgWIz4Mr.js → hx-divider-DNNs4e8q.js} +2 -1
- package/dist/shared/{hx-divider-XgWIz4Mr.js.map → hx-divider-DNNs4e8q.js.map} +1 -1
- package/dist/shared/{hx-drawer-CYxuhIQ0.js → hx-drawer-CJcRZcns.js} +85 -56
- package/dist/shared/hx-drawer-CJcRZcns.js.map +1 -0
- package/dist/shared/{hx-dropdown-7cfowTWv.js → hx-dropdown-Bo0KTM1A.js} +29 -20
- package/dist/shared/hx-dropdown-Bo0KTM1A.js.map +1 -0
- package/dist/shared/{hx-field-CDP8EXuj.js → hx-field-3MmzJ4kZ.js} +21 -13
- package/dist/shared/hx-field-3MmzJ4kZ.js.map +1 -0
- package/dist/shared/{hx-file-upload-9HbONfqt.js → hx-file-upload-ByjAgfNy.js} +103 -64
- package/dist/shared/hx-file-upload-ByjAgfNy.js.map +1 -0
- package/dist/shared/hx-form-BpS6v3Iu.js +258 -0
- package/dist/shared/hx-form-BpS6v3Iu.js.map +1 -0
- package/dist/shared/{hx-format-date-BsVr8gpD.js → hx-format-date-BdnWV2kX.js} +7 -1
- package/dist/shared/hx-format-date-BdnWV2kX.js.map +1 -0
- package/dist/shared/{hx-grid-BsDBCTbt.js → hx-grid-gEjuF0cR.js} +25 -18
- package/dist/shared/hx-grid-gEjuF0cR.js.map +1 -0
- package/dist/shared/{hx-help-text-DaOPN1iB.js → hx-help-text-BAcEGRUE.js} +2 -2
- package/dist/shared/{hx-help-text-DaOPN1iB.js.map → hx-help-text-BAcEGRUE.js.map} +1 -1
- package/dist/shared/{hx-icon--xsJztDh.js → hx-icon-CP6OnLoM.js} +6 -1
- package/dist/shared/hx-icon-CP6OnLoM.js.map +1 -0
- package/dist/shared/{hx-icon-button-iu0i_faq.js → hx-icon-button-DzH_bRtC.js} +15 -1
- package/dist/shared/{hx-icon-button-iu0i_faq.js.map → hx-icon-button-DzH_bRtC.js.map} +1 -1
- package/dist/shared/{hx-image-xyb_tHCR.js → hx-image-C6pGiI6c.js} +6 -1
- package/dist/shared/hx-image-C6pGiI6c.js.map +1 -0
- package/dist/shared/{hx-link-DfNy_UU8.js → hx-link-Tmk_YPvW.js} +46 -37
- package/dist/shared/hx-link-Tmk_YPvW.js.map +1 -0
- package/dist/shared/{hx-list-CdRNgeoP.js → hx-list-DwInEX2H.js} +63 -37
- package/dist/shared/hx-list-DwInEX2H.js.map +1 -0
- package/dist/shared/{hx-menu-divider-DR8klkFT.js → hx-menu-divider-DR4G_rqw.js} +71 -40
- package/dist/shared/hx-menu-divider-DR4G_rqw.js.map +1 -0
- package/dist/shared/{hx-meter-CZ7lnMra.js → hx-meter-uXkTZq-W.js} +77 -61
- package/dist/shared/hx-meter-uXkTZq-W.js.map +1 -0
- package/dist/shared/{hx-nav-DM6-cGKF.js → hx-nav-3JsN2Oak.js} +64 -47
- package/dist/shared/hx-nav-3JsN2Oak.js.map +1 -0
- package/dist/shared/{hx-nav-item-D54-5eUM.js → hx-nav-item-D3EJatzc.js} +40 -16
- package/dist/shared/hx-nav-item-D3EJatzc.js.map +1 -0
- package/dist/shared/{hx-number-input-BP6TIA92.js → hx-number-input-CIpL2BEh.js} +65 -34
- package/dist/shared/hx-number-input-CIpL2BEh.js.map +1 -0
- package/dist/shared/{hx-overflow-menu-CobkjAb8.js → hx-overflow-menu-2kgOJ_ht.js} +76 -64
- package/dist/shared/hx-overflow-menu-2kgOJ_ht.js.map +1 -0
- package/dist/shared/{hx-pagination-10dpXS95.js → hx-pagination-Blt-fFqV.js} +113 -94
- package/dist/shared/hx-pagination-Blt-fFqV.js.map +1 -0
- package/dist/shared/{hx-popover-ULjonbaO.js → hx-popover-DxE67miP.js} +71 -66
- package/dist/shared/hx-popover-DxE67miP.js.map +1 -0
- package/dist/shared/{hx-popup-CYf9Q5sj.js → hx-popup-Dg6n_PbY.js} +13 -1
- package/dist/shared/hx-popup-Dg6n_PbY.js.map +1 -0
- package/dist/shared/{hx-progress-bar-CnTibV63.js → hx-progress-bar-Dm_EHyng.js} +65 -47
- package/dist/shared/hx-progress-bar-Dm_EHyng.js.map +1 -0
- package/dist/shared/{hx-progress-ring-BHJBaXNk.js → hx-progress-ring-DpxBDD5d.js} +35 -28
- package/dist/shared/hx-progress-ring-DpxBDD5d.js.map +1 -0
- package/dist/shared/hx-prose-Ml_L2zje.js +59 -0
- package/dist/shared/hx-prose-Ml_L2zje.js.map +1 -0
- package/dist/shared/{hx-radio-BnKcRuQu.js → hx-radio-BywgVSEu.js} +7 -8
- package/dist/shared/hx-radio-BywgVSEu.js.map +1 -0
- package/dist/shared/{hx-rating-Y_t7Z4qb.js → hx-rating-CUWBQ0fZ.js} +131 -64
- package/dist/shared/hx-rating-CUWBQ0fZ.js.map +1 -0
- package/dist/shared/{hx-select-C50lD7NS.js → hx-select-BwDwxk-M.js} +107 -169
- package/dist/shared/hx-select-BwDwxk-M.js.map +1 -0
- package/dist/shared/hx-skeleton-BHvALyd7.js.map +1 -1
- package/dist/shared/{hx-slider-CprSNrRi.js → hx-slider-D_0EKJyk.js} +23 -7
- package/dist/shared/hx-slider-D_0EKJyk.js.map +1 -0
- package/dist/shared/{hx-spinner-BOApJ-g9.js → hx-spinner-DMn4SChS.js} +35 -28
- package/dist/shared/hx-spinner-DMn4SChS.js.map +1 -0
- package/dist/shared/{hx-split-button-CHGy4FUc.js → hx-split-button-CypgLXw1.js} +14 -3
- package/dist/shared/{hx-split-button-CHGy4FUc.js.map → hx-split-button-CypgLXw1.js.map} +1 -1
- package/dist/shared/{hx-split-panel-DYtB45Tr.js → hx-split-panel-CV_Kr4EK.js} +58 -37
- package/dist/shared/hx-split-panel-CV_Kr4EK.js.map +1 -0
- package/dist/shared/{hx-stack-CfoW7jU7.js → hx-stack-BStY1RmV.js} +29 -29
- package/dist/shared/hx-stack-BStY1RmV.js.map +1 -0
- package/dist/shared/{hx-stat-C2wfph8W.js → hx-stat-CHntLHJM.js} +18 -10
- package/dist/shared/hx-stat-CHntLHJM.js.map +1 -0
- package/dist/shared/{hx-status-indicator-oYWOkWlD.js → hx-status-indicator-C1BwEvUw.js} +15 -12
- package/dist/shared/hx-status-indicator-C1BwEvUw.js.map +1 -0
- package/dist/shared/{hx-step-DYoIumpR.js → hx-step-BIVWSPxd.js} +45 -33
- package/dist/shared/hx-step-BIVWSPxd.js.map +1 -0
- package/dist/shared/{hx-switch-DkKchcuP.js → hx-switch-BgX8kuWt.js} +12 -3
- package/dist/shared/hx-switch-BgX8kuWt.js.map +1 -0
- package/dist/shared/{hx-tab-panel-BRNcLICw.js → hx-tab-panel-DhOq67jj.js} +11 -2
- package/dist/shared/hx-tab-panel-DhOq67jj.js.map +1 -0
- package/dist/shared/{hx-tag-B3N-vZ6B.js → hx-tag-CzOTDcXI.js} +2 -1
- package/dist/shared/{hx-tag-B3N-vZ6B.js.map → hx-tag-CzOTDcXI.js.map} +1 -1
- package/dist/shared/{hx-td-CVwCGBYf.js → hx-td-h6oeW6YC.js} +43 -41
- package/dist/shared/hx-td-h6oeW6YC.js.map +1 -0
- package/dist/shared/{hx-text-NjKoQATI.js → hx-text-DTXjiviE.js} +2 -1
- package/dist/shared/{hx-text-NjKoQATI.js.map → hx-text-DTXjiviE.js.map} +1 -1
- package/dist/shared/{hx-text-input-CCZZbWQ9.js → hx-text-input-CqEdDHMU.js} +82 -65
- package/dist/shared/hx-text-input-CqEdDHMU.js.map +1 -0
- package/dist/shared/{hx-textarea-BsQdB1Rk.js → hx-textarea-BgX7rxyo.js} +21 -12
- package/dist/shared/hx-textarea-BgX7rxyo.js.map +1 -0
- package/dist/shared/hx-theme-6GDoUG8j.js.map +1 -1
- package/dist/shared/{hx-time-picker-CJcIjH3C.js → hx-time-picker-DmLu7WUC.js} +73 -273
- package/dist/shared/hx-time-picker-DmLu7WUC.js.map +1 -0
- package/dist/shared/{hx-toggle-button-D4F1soEM.js → hx-toggle-button-D1jpDvSA.js} +75 -38
- package/dist/shared/hx-toggle-button-D1jpDvSA.js.map +1 -0
- package/dist/shared/{hx-tooltip-Bk1iQRHs.js → hx-tooltip-kh7QFPKu.js} +66 -49
- package/dist/shared/hx-tooltip-kh7QFPKu.js.map +1 -0
- package/dist/shared/{hx-top-nav-D2bQpns3.js → hx-top-nav-DYlnzDaU.js} +3 -1
- package/dist/shared/{hx-top-nav-D2bQpns3.js.map → hx-top-nav-DYlnzDaU.js.map} +1 -1
- package/dist/shared/{hx-tree-item-BobGN76x.js → hx-tree-item-BP6UF_H1.js} +29 -16
- package/dist/shared/hx-tree-item-BP6UF_H1.js.map +1 -0
- package/dist/shared/{toast-factory-MvMMreTu.js → toast-factory-DTy-qN8r.js} +70 -59
- package/dist/shared/toast-factory-DTy-qN8r.js.map +1 -0
- package/dist/styles/shared-field.styles.d.ts +6 -0
- package/dist/styles/shared-field.styles.d.ts.map +1 -0
- package/package.json +2 -5
- package/dist/shared/hx-accordion-DT8qHOay.js.map +0 -1
- package/dist/shared/hx-action-bar-we_WJety.js.map +0 -1
- package/dist/shared/hx-alert-D6uok29t.js.map +0 -1
- package/dist/shared/hx-avatar-Cep6Urm3.js.map +0 -1
- package/dist/shared/hx-badge-BeuWuUj_.js.map +0 -1
- package/dist/shared/hx-breadcrumb-item-Bj2UqhzR.js.map +0 -1
- package/dist/shared/hx-button-Cbhqpm5i.js.map +0 -1
- package/dist/shared/hx-card-B9j2SHyI.js.map +0 -1
- package/dist/shared/hx-carousel-item-Be0bC-7o.js.map +0 -1
- package/dist/shared/hx-checkbox-CuaJqEo7.js.map +0 -1
- package/dist/shared/hx-checkbox-group-ydUdV9Sx.js.map +0 -1
- package/dist/shared/hx-code-snippet-DBwIjl5p.js.map +0 -1
- package/dist/shared/hx-color-picker-Bb2UPVc3.js +0 -803
- package/dist/shared/hx-color-picker-Bb2UPVc3.js.map +0 -1
- package/dist/shared/hx-combobox-CNvY-es8.js.map +0 -1
- package/dist/shared/hx-counter-D-1NXzGs.js.map +0 -1
- package/dist/shared/hx-data-table-BwoJCFgs.js.map +0 -1
- package/dist/shared/hx-date-picker-DDcIBJir.js.map +0 -1
- package/dist/shared/hx-dialog-M7so0sRT.js.map +0 -1
- package/dist/shared/hx-drawer-CYxuhIQ0.js.map +0 -1
- package/dist/shared/hx-dropdown-7cfowTWv.js.map +0 -1
- package/dist/shared/hx-field-CDP8EXuj.js.map +0 -1
- package/dist/shared/hx-file-upload-9HbONfqt.js.map +0 -1
- package/dist/shared/hx-form-BFv_N1dm.js +0 -1272
- package/dist/shared/hx-form-BFv_N1dm.js.map +0 -1
- package/dist/shared/hx-format-date-BsVr8gpD.js.map +0 -1
- package/dist/shared/hx-grid-BsDBCTbt.js.map +0 -1
- package/dist/shared/hx-icon--xsJztDh.js.map +0 -1
- package/dist/shared/hx-image-xyb_tHCR.js.map +0 -1
- package/dist/shared/hx-link-DfNy_UU8.js.map +0 -1
- package/dist/shared/hx-list-CdRNgeoP.js.map +0 -1
- package/dist/shared/hx-menu-divider-DR8klkFT.js.map +0 -1
- package/dist/shared/hx-meter-CZ7lnMra.js.map +0 -1
- package/dist/shared/hx-nav-DM6-cGKF.js.map +0 -1
- package/dist/shared/hx-nav-item-D54-5eUM.js.map +0 -1
- package/dist/shared/hx-number-input-BP6TIA92.js.map +0 -1
- package/dist/shared/hx-overflow-menu-CobkjAb8.js.map +0 -1
- package/dist/shared/hx-pagination-10dpXS95.js.map +0 -1
- package/dist/shared/hx-popover-ULjonbaO.js.map +0 -1
- package/dist/shared/hx-popup-CYf9Q5sj.js.map +0 -1
- package/dist/shared/hx-progress-bar-CnTibV63.js.map +0 -1
- package/dist/shared/hx-progress-ring-BHJBaXNk.js.map +0 -1
- package/dist/shared/hx-prose-DZh2KrMb.js +0 -876
- package/dist/shared/hx-prose-DZh2KrMb.js.map +0 -1
- package/dist/shared/hx-radio-BnKcRuQu.js.map +0 -1
- package/dist/shared/hx-rating-Y_t7Z4qb.js.map +0 -1
- package/dist/shared/hx-select-C50lD7NS.js.map +0 -1
- package/dist/shared/hx-slider-CprSNrRi.js.map +0 -1
- package/dist/shared/hx-spinner-BOApJ-g9.js.map +0 -1
- package/dist/shared/hx-split-panel-DYtB45Tr.js.map +0 -1
- package/dist/shared/hx-stack-CfoW7jU7.js.map +0 -1
- package/dist/shared/hx-stat-C2wfph8W.js.map +0 -1
- package/dist/shared/hx-status-indicator-oYWOkWlD.js.map +0 -1
- package/dist/shared/hx-step-DYoIumpR.js.map +0 -1
- package/dist/shared/hx-switch-DkKchcuP.js.map +0 -1
- package/dist/shared/hx-tab-panel-BRNcLICw.js.map +0 -1
- package/dist/shared/hx-td-CVwCGBYf.js.map +0 -1
- package/dist/shared/hx-text-input-CCZZbWQ9.js.map +0 -1
- package/dist/shared/hx-textarea-BsQdB1Rk.js.map +0 -1
- package/dist/shared/hx-time-picker-CJcIjH3C.js.map +0 -1
- package/dist/shared/hx-toggle-button-D4F1soEM.js.map +0 -1
- package/dist/shared/hx-tooltip-Bk1iQRHs.js.map +0 -1
- package/dist/shared/hx-tree-item-BobGN76x.js.map +0 -1
- package/dist/shared/toast-factory-MvMMreTu.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toast-factory-DTy-qN8r.js","sources":["../../src/components/hx-toast/hx-toast.styles.ts","../../src/components/hx-toast/hx-toast.ts","../../src/components/hx-toast/hx-toast-stack.ts","../../src/components/hx-toast/toast-factory.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixToastStyles = css`\n /* ─── hx-toast host ─── */\n\n :host {\n display: block;\n pointer-events: none;\n }\n\n :host([open]) {\n pointer-events: auto;\n }\n\n /* ─── Toast base ─── */\n\n .toast {\n display: flex;\n align-items: flex-start;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));\n color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-font-size-sm, 0.875rem);\n line-height: var(--hx-line-height-normal, 1.5);\n box-shadow: var(\n --hx-toast-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 opacity: 0;\n transform: translateY(var(--hx-toast-enter-translate, var(--hx-space-2, 0.5rem)));\n transition:\n opacity var(--hx-transition-normal, 250ms ease),\n transform var(--hx-transition-normal, 250ms ease);\n width: var(--hx-toast-width, 20rem);\n max-width: 100%;\n pointer-events: auto;\n }\n\n :host([open]) .toast {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ─── Variant overrides ─── */\n\n .toast--success {\n --hx-toast-bg: var(--hx-color-success-600, #16a34a);\n --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n }\n\n .toast--warning {\n --hx-toast-bg: var(--hx-color-warning-500, #f59e0b);\n --hx-toast-color: var(--hx-color-neutral-900, #0f172a);\n }\n\n .toast--danger {\n --hx-toast-bg: var(--hx-color-error-600, #dc2626);\n --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n }\n\n .toast--info {\n --hx-toast-bg: var(--hx-color-primary-600, #2563eb);\n --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n }\n\n /* ─── Severity Label (WCAG 1.4.1) ─── */\n /* Visually hidden — non-color cue for severity variants (success/warning/danger/info). */\n /* Ensures variant is not conveyed by color alone for color-blind users. */\n\n .toast__severity-label {\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 /* ─── Icon ─── */\n\n .toast__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n line-height: 1;\n }\n\n .toast__icon:empty {\n display: none;\n }\n\n /* ─── Message ─── */\n\n .toast__message {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n /* ─── Action slot ─── */\n\n .toast__action {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n }\n\n .toast__action:empty {\n display: none;\n }\n\n /* ─── Close button ─── */\n\n .toast__close {\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 background: transparent;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n color: inherit;\n cursor: pointer;\n opacity: 0.7;\n transition: opacity var(--hx-transition-fast, 150ms ease);\n }\n\n .toast__close:hover {\n opacity: 1;\n }\n\n .toast__close:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid currentColor;\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .toast {\n transition: none;\n }\n\n .toast__close {\n transition: none;\n }\n }\n`;\n\nexport const helixToastStackStyles = css`\n :host {\n display: block;\n position: fixed;\n z-index: var(--hx-z-index-toast, 9000);\n pointer-events: none;\n }\n\n .toast-stack {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-space-4, 1rem);\n pointer-events: none;\n }\n\n /* ─── Placements ─── */\n\n :host([placement='top-start']) {\n top: 0;\n inset-inline-start: 0;\n inset-inline-end: auto;\n bottom: auto;\n }\n\n :host([placement='top-center']) {\n top: 0;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n inset-inline-end: auto;\n bottom: auto;\n }\n\n :host([placement='top-end']) {\n top: 0;\n inset-inline-end: 0;\n inset-inline-start: auto;\n bottom: auto;\n }\n\n :host([placement='bottom-start']) {\n bottom: 0;\n inset-inline-start: 0;\n inset-inline-end: auto;\n top: auto;\n }\n\n :host([placement='bottom-center']) {\n bottom: 0;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n inset-inline-end: auto;\n top: auto;\n }\n\n :host([placement='bottom-end']) {\n bottom: 0;\n inset-inline-end: 0;\n inset-inline-start: auto;\n top: auto;\n }\n\n /* ─── Bottom placements: reverse order so newest is on top ─── */\n\n :host([placement^='bottom']) .toast-stack {\n flex-direction: column-reverse;\n }\n\n /* ─── Slide direction by placement ─── */\n\n :host([placement^='top']) ::slotted(hx-toast) {\n --hx-toast-enter-translate: calc(var(--hx-space-2, 0.5rem) * -1);\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixToastStyles } from './hx-toast.styles.js';\n\nexport type ToastVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * A transient notification message that auto-dismisses after a configurable duration.\n * Supports multiple visual variants, a closable button, icon/action slots, and full\n * ARIA live region semantics for screen readers.\n *\n * @summary Transient notification toast component.\n *\n * @tag hx-toast\n *\n * @slot - Default slot for the notification message.\n * @slot icon - Optional icon rendered before the message.\n * @slot action - Optional action button rendered after the message.\n *\n * @fires {CustomEvent} hx-show - Dispatched when the toast becomes visible.\n * @fires {CustomEvent} hx-hide - Dispatched when the toast begins hiding.\n * @fires {CustomEvent} hx-after-hide - Dispatched after the hide animation completes.\n *\n * @csspart base - The inner toast container div.\n * @csspart icon - The icon slot wrapper.\n * @csspart message - The message slot wrapper.\n * @csspart close-button - The dismiss button (only when closable).\n * @csspart action - The action slot wrapper.\n *\n * @cssprop [--hx-toast-bg=var(--hx-color-neutral-900)] - Toast background color.\n * @cssprop [--hx-toast-color=var(--hx-color-neutral-0)] - Toast text color.\n * @cssprop [--hx-toast-border-radius=var(--hx-border-radius-md)] - Toast border radius.\n * @cssprop [--hx-toast-shadow] - Toast box shadow.\n * @cssprop [--hx-toast-width=20rem] - Toast width.\n */\n@customElement('hx-toast')\nexport class HelixToast extends LitElement {\n static override styles = [tokenStyles, helixToastStyles];\n\n // ─── Public Properties ───\n\n /**\n * Visual style variant.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: ToastVariant = 'default';\n\n /**\n * Auto-dismiss duration in milliseconds. Set to 0 for persistent toasts.\n * @attr duration\n */\n @property({ type: Number })\n duration = 3000;\n\n /**\n * Whether to show a close button.\n * @attr closable\n */\n @property({ type: Boolean, reflect: true })\n closable = false;\n\n /**\n * Whether the toast is currently visible.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Accessible label for the close button. Override for localization.\n * @attr close-label\n */\n @property({ attribute: 'close-label' })\n closeLabel = 'Dismiss notification';\n\n // ─── Private State ───\n\n /** @internal */\n @query('.toast') private _toastEl!: HTMLElement | null;\n\n /** @internal */\n private _timer: ReturnType<typeof setTimeout> | null = null;\n\n // ─── Reduced Motion ───\n\n /** @internal Returns true when the user has opted into reduced motion. */\n private get _reducedMotion(): boolean {\n // Guard for SSR — window.matchMedia is unavailable server-side\n if (typeof window === 'undefined') return false;\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n }\n\n /** @internal */\n private _timerStartedAt: number | null = null;\n\n /** @internal */\n private _timerRemaining: number | null = null;\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: Map<PropertyKey, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('open')) {\n if (this.open) {\n this.removeAttribute('aria-hidden');\n this._emitShow();\n if (this.duration > 0 && !this._reducedMotion) {\n this._startTimer();\n }\n } else {\n this.setAttribute('aria-hidden', 'true');\n this._clearTimer();\n this._emitHide();\n }\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._clearTimer();\n }\n\n // ─── Public API ───\n\n /** Show the toast. */\n show(): void {\n if (!this.open) {\n this.open = true;\n }\n }\n\n /** Hide the toast. */\n hide(): void {\n if (this.open) {\n this.open = false;\n }\n }\n\n // ─── Private Helpers ───\n\n /** @internal */\n private _startTimer(remaining?: number): void {\n this._clearTimerHandle();\n const delay = remaining ?? this.duration;\n this._timerStartedAt = Date.now();\n this._timerRemaining = delay;\n this._timer = setTimeout(() => {\n this.open = false;\n }, delay);\n }\n\n /** @internal */\n private _pauseTimer(): void {\n if (this._timer === null || this._timerStartedAt === null || this._timerRemaining === null) {\n return;\n }\n const elapsed = Date.now() - this._timerStartedAt;\n this._timerRemaining = Math.max(0, this._timerRemaining - elapsed);\n this._clearTimerHandle();\n }\n\n /** @internal */\n private _clearTimerHandle(): void {\n if (this._timer !== null) {\n clearTimeout(this._timer);\n this._timer = null;\n }\n }\n\n /** @internal */\n private _clearTimer(): void {\n this._clearTimerHandle();\n this._timerStartedAt = null;\n this._timerRemaining = null;\n }\n\n /** @internal */\n private _emitShow(): void {\n this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _emitHide(): void {\n this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n\n let fired = false;\n const fireAfterHide = () => {\n if (fired) return;\n fired = true;\n this.dispatchEvent(new CustomEvent<void>('hx-after-hide', { bubbles: true, composed: true }));\n };\n\n // Fire on transitionend if available; fallback ensures it fires in test environments\n // and when transitions are disabled (prefers-reduced-motion, no CSS transitions).\n const base = this._toastEl;\n if (base) {\n base.addEventListener('transitionend', fireAfterHide, { once: true });\n }\n // Fallback fires after the CSS transition duration (250ms) plus a small buffer.\n setTimeout(fireAfterHide, 300);\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleMouseEnter(): void {\n this._pauseTimer();\n }\n\n /** @internal */\n private _handleMouseLeave(): void {\n if (this.open && this.duration > 0) {\n this._startTimer(this._timerRemaining ?? undefined);\n }\n }\n\n /** @internal */\n private _handleFocusIn(): void {\n this._pauseTimer();\n }\n\n /** @internal */\n private _handleFocusOut(): void {\n if (this.open && this.duration > 0) {\n this._startTimer(this._timerRemaining ?? undefined);\n }\n }\n\n /** @internal */\n private _handleClose(): void {\n this.hide();\n }\n\n // ─── ARIA Helpers ───\n\n /** @internal */\n private get _role(): 'alert' | 'status' {\n return this.variant === 'danger' ? 'alert' : 'status';\n }\n\n /** @internal */\n private get _ariaLive(): 'assertive' | 'polite' {\n return this.variant === 'danger' ? 'assertive' : 'polite';\n }\n\n // ─── WCAG 1.4.1: Default Icons ───\n // Each semantic variant renders a default icon when no icon is slotted,\n // ensuring the severity is not conveyed by color alone.\n\n /** @internal */\n private _renderSuccessIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n <path\n fill=\"currentColor\"\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderWarningIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n <path\n fill=\"currentColor\"\n d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderDangerIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n <path\n fill=\"currentColor\"\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderInfoIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n <path\n fill=\"currentColor\"\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n />\n </svg>`;\n }\n\n /** @internal Returns the default icon for the current variant, or nothing for 'default'. */\n private get _defaultIcon() {\n switch (this.variant) {\n case 'success':\n return this._renderSuccessIcon();\n case 'warning':\n return this._renderWarningIcon();\n case 'danger':\n return this._renderDangerIcon();\n case 'info':\n return this._renderInfoIcon();\n default:\n return nothing;\n }\n }\n\n // ─── WCAG 1.4.1: Severity label map ───\n\n /** @internal */\n private static readonly _SEVERITY_LABELS: Partial<Record<ToastVariant, string>> = {\n success: 'Success',\n warning: 'Warning',\n danger: 'Error',\n info: 'Info',\n };\n\n /** @internal */\n private get _severityLabel(): string {\n return HelixToast._SEVERITY_LABELS[this.variant] ?? '';\n }\n\n // ─── Render ───\n\n override render() {\n const severityLabel = this._severityLabel;\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n toast: true,\n [`toast--${this.variant}`]: true,\n })}\n role=${this._role}\n aria-live=${this._ariaLive}\n aria-atomic=\"true\"\n @mouseenter=${this._handleMouseEnter}\n @mouseleave=${this._handleMouseLeave}\n @focusin=${this._handleFocusIn}\n @focusout=${this._handleFocusOut}\n >\n ${this.open\n ? html`\n ${severityLabel\n ? html`<span class=\"toast__severity-label\">${severityLabel}: </span>`\n : nothing}\n <span part=\"icon\" class=\"toast__icon\">\n <slot name=\"icon\">${this._defaultIcon}</slot>\n </span>\n <span part=\"message\" class=\"toast__message\">\n <slot></slot>\n </span>\n <span part=\"action\" class=\"toast__action\">\n <slot name=\"action\"></slot>\n </span>\n ${this.closable\n ? html`\n <button\n part=\"close-button\"\n class=\"toast__close\"\n aria-label=${this.closeLabel}\n @click=${this._handleClose}\n >\n <svg\n aria-hidden=\"true\"\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 >\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n `\n : nothing}\n `\n : nothing}\n </div>\n `;\n }\n}\n\n// ─── Declarative Global Types ───\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-toast': HelixToast;\n }\n}\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixToastStackStyles } from './hx-toast.styles.js';\n\nexport type ToastStackPlacement =\n | 'top-start'\n | 'top-center'\n | 'top-end'\n | 'bottom-start'\n | 'bottom-center'\n | 'bottom-end';\n\n/**\n * A fixed-position container that stacks `hx-toast` elements at the specified\n * corner of the viewport. Enforces a maximum visible toast count via `stack-limit`.\n *\n * @summary Toast stack container managing position and count limits.\n *\n * @tag hx-toast-stack\n *\n * @slot - Accepts `hx-toast` elements.\n *\n * @csspart base - The inner stack container div.\n *\n * @cssprop [--hx-z-index-toast=9000] - Z-index for the fixed stack.\n */\n@customElement('hx-toast-stack')\nexport class HelixToastStack extends LitElement {\n static override styles = [tokenStyles, helixToastStackStyles];\n\n /**\n * Corner of the viewport where toasts appear.\n * @attr placement\n */\n @property({ type: String, reflect: true })\n placement: ToastStackPlacement = 'bottom-end';\n\n /**\n * Maximum number of simultaneously visible toasts. 0 = unlimited.\n * @attr stack-limit\n */\n @property({ type: Number, attribute: 'stack-limit' })\n stackLimit = 3;\n\n override render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n 'toast-stack': true,\n [`toast-stack--${this.placement}`]: true,\n })}\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\n// ─── Declarative Global Types ───\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-toast-stack': HelixToastStack;\n }\n}\n","import { HelixToast } from './hx-toast.js';\nimport { HelixToastStack } from './hx-toast-stack.js';\nimport type { ToastVariant } from './hx-toast.js';\nimport type { ToastStackPlacement } from './hx-toast-stack.js';\n\nexport interface ToastOptions {\n /** The notification message text. */\n message: string;\n /** Visual variant. Defaults to 'default'. */\n variant?: ToastVariant;\n /** Auto-dismiss duration in ms. 0 = persistent. Defaults to 3000. */\n duration?: number;\n /** Placement of the shared stack. Defaults to 'bottom-end'. */\n placement?: ToastStackPlacement;\n}\n\n/**\n * Imperatively create and display a toast notification.\n *\n * Creates a shared `hx-toast-stack` on `document.body` if one does not exist,\n * then appends a new `hx-toast` with the given options. Respects the stack's\n * `stackLimit` by hiding the oldest visible toast when the limit is exceeded.\n *\n * @example\n * import { toast } from '@helixui/library/components/hx-toast/index.js';\n * toast({ message: 'Patient record saved.', variant: 'success' });\n */\nexport function toast(options: ToastOptions): HelixToast {\n const placement = options.placement ?? 'bottom-end';\n\n // Find or create a dedicated stack for this placement\n const stackSelector = `hx-toast-stack[placement=\"${placement}\"]`;\n let stack = document.querySelector<HelixToastStack>(stackSelector);\n if (!stack) {\n stack = document.createElement('hx-toast-stack') as HelixToastStack;\n stack.placement = placement;\n // Intentional design decision: the toast stack is appended to document.body rather\n // than inserted near the caller. This is required so that the fixed-position overlay\n // is not clipped by an ancestor with `overflow: hidden`, `transform`, or `filter`\n // (all of which create a new stacking context and break fixed positioning).\n // Drupal compatibility note: Drupal's BigPipe / AJAX behaviors can re-attach the\n // document body without removing these stacks. The selector check above\n // (`document.querySelector`) ensures only one stack per placement is ever created,\n // preventing duplicates on re-attach cycles.\n document.body.appendChild(stack);\n }\n\n // Enforce stack limit: hide oldest open toast if at capacity\n if (stack.stackLimit > 0) {\n const openToasts = [...stack.querySelectorAll<HelixToast>('hx-toast')].filter((t) => t.open);\n if (openToasts.length >= stack.stackLimit) {\n openToasts[0]?.hide();\n }\n }\n\n // Create toast element\n const toastEl = document.createElement('hx-toast') as HelixToast;\n toastEl.variant = options.variant ?? 'default';\n toastEl.duration = options.duration ?? 3000;\n toastEl.closable = true;\n toastEl.textContent = options.message;\n\n // Remove from DOM after hiding\n toastEl.addEventListener('hx-after-hide', () => {\n toastEl.remove();\n });\n\n stack.appendChild(toastEl);\n toastEl.show();\n\n return toastEl;\n}\n"],"names":["helixToastStyles","css","helixToastStackStyles","HelixToast","LitElement","changedProperties","remaining","delay","elapsed","fired","fireAfterHide","base","html","nothing","severityLabel","classMap","tokenStyles","__decorateClass","property","query","customElement","HelixToastStack","toast","options","placement","stackSelector","stack","openToasts","t","_a","toastEl"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shared-field.styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-field.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,iBAAiB,yBAoD7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,yBA6D/B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@helixui/library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "Enterprise Web Component Library built with Lit 3.x",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
7
|
-
"**/*.css"
|
|
8
|
-
"src/components/**/*.ts",
|
|
9
|
-
"dist/components/**/*.js",
|
|
10
|
-
"dist/shared/**/*.js"
|
|
7
|
+
"**/*.css"
|
|
11
8
|
],
|
|
12
9
|
"main": "./dist/index.js",
|
|
13
10
|
"types": "./dist/index.d.ts",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-accordion-DT8qHOay.js","sources":["../../src/components/hx-accordion/hx-accordion.styles.ts","../../src/components/hx-accordion/hx-accordion-item.styles.ts","../../src/components/hx-accordion/hx-accordion-item.ts","../../src/components/hx-accordion/hx-accordion.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAccordionStyles = css`\n :host {\n display: block;\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n .accordion {\n border-radius: var(--hx-accordion-border-radius, var(--hx-border-radius-md, 0.375rem));\n overflow: hidden;\n }\n`;\n","import { css } from 'lit';\n\nexport const helixAccordionItemStyles = css`\n :host {\n display: block;\n }\n\n .item {\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-accordion-border-color, var(--hx-color-neutral-200, #dee2e6));\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n :host(:first-child) .item {\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-accordion-border-color, var(--hx-color-neutral-200, #dee2e6));\n }\n\n /* Remove native details marker */\n .trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-accordion-trigger-padding, var(--hx-space-4, 1rem));\n cursor: pointer;\n list-style: none;\n font-size: var(--hx-font-size-md, 1rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n color: var(--hx-accordion-trigger-color, var(--hx-color-neutral-800, #212529));\n background-color: var(--hx-accordion-trigger-bg, transparent);\n user-select: none;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n /* Hide the native details disclosure triangle */\n .trigger::-webkit-details-marker {\n display: none;\n }\n\n .trigger::marker {\n display: none;\n }\n\n .item--disabled .trigger {\n cursor: not-allowed;\n }\n\n :host(:not([disabled])) .trigger:hover {\n background-color: var(--hx-accordion-trigger-hover-bg, var(--hx-color-neutral-50, #f8f9fa));\n }\n\n .trigger:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, -2px);\n }\n\n /* ─── Icon ─── */\n\n .icon {\n flex-shrink: 0;\n width: 1.25rem;\n height: 1.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--hx-accordion-icon-color, var(--hx-color-neutral-500, #6c757d));\n transition: transform var(--hx-transition-normal, 250ms ease);\n }\n\n .item--expanded .icon {\n transform: rotate(180deg);\n }\n\n /* ─── Content animation via CSS grid trick ─── */\n\n .content-wrapper {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--hx-transition-normal, 250ms ease);\n overflow: hidden;\n }\n\n .item--expanded .content-wrapper,\n details[open]:not(.item--expanded) .content-wrapper {\n grid-template-rows: 1fr;\n }\n\n .content-inner {\n overflow: hidden;\n }\n\n .content {\n padding: var(--hx-accordion-content-padding, 0 var(--hx-space-4, 1rem) var(--hx-space-4, 1rem));\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n color: var(--hx-accordion-content-color, var(--hx-color-neutral-600, #495057));\n }\n\n /* ─── Disabled host ─── */\n\n :host([disabled]) {\n pointer-events: none;\n opacity: 0.5;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .trigger {\n transition: none;\n }\n\n .icon {\n transition: none;\n }\n\n .content-wrapper {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, svg, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAccordionItemStyles } from './hx-accordion-item.styles.js';\n\nconst chevronIcon = svg`\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 <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n`;\n\n/**\n * An individual accordion item with collapsible content.\n *\n * @summary Collapsible panel that can be expanded or collapsed.\n *\n * @tag hx-accordion-item\n *\n * @slot trigger - The heading/trigger content for this item.\n * @slot - Default slot for the collapsible body content.\n *\n * @attr {number} level - Heading level (1–6) for the trigger via `role=\"heading\" aria-level`.\n * Defaults to 3. Set this to match the document outline — e.g., use `level=\"2\"` when the\n * accordion appears under an `<h1>` landmark.\n *\n * @fires {CustomEvent<{expanded: boolean, itemId: string}>} hx-expand - Dispatched when the item is expanded.\n * @fires {CustomEvent<{expanded: boolean, itemId: string}>} hx-collapse - Dispatched when the item is collapsed.\n *\n * @csspart item - The outer details element container.\n * @csspart trigger - The summary/trigger element.\n * @csspart content - The collapsible content area.\n * @csspart icon - The expand/collapse icon.\n *\n * @cssprop [--hx-accordion-border-color=var(--hx-color-neutral-200)] - Border color between items.\n * @cssprop [--hx-accordion-trigger-padding=var(--hx-space-4)] - Trigger padding.\n * @cssprop [--hx-accordion-trigger-color=var(--hx-color-neutral-800)] - Trigger text color.\n * @cssprop [--hx-accordion-trigger-bg=transparent] - Trigger background color.\n * @cssprop [--hx-accordion-trigger-hover-bg=var(--hx-color-neutral-50)] - Trigger hover background.\n * @cssprop [--hx-accordion-icon-color=var(--hx-color-neutral-500)] - Icon color.\n * @cssprop [--hx-accordion-content-padding=0 var(--hx-space-4) var(--hx-space-4)] - Content padding.\n * @cssprop [--hx-accordion-content-color=var(--hx-color-neutral-600)] - Content text color.\n */\n@customElement('hx-accordion-item')\nexport class HelixAccordionItem extends LitElement {\n static override styles = [tokenStyles, helixAccordionItemStyles];\n\n private static _counter = 0;\n private _uid = `hx-accordion-item-${++HelixAccordionItem._counter}`;\n\n /**\n * Whether this item is expanded.\n * @attr expanded\n */\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /**\n * Whether this item is disabled (cannot be toggled).\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\n * trigger. Defaults to 3. Set to match the document outline around the\n * accordion so screen readers surface accordion items in the heading list.\n * @attr level\n */\n @property({ type: Number })\n level: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n // ─── Heading Level Helper ───\n\n /**\n * Returns a clamped heading level (1–6) for use as `aria-level` on the\n * `<summary>` element. Per the WAI-ARIA APG Accordion pattern, the\n * `<summary>` must be a **direct child** of `<details>` for native\n * disclosure behaviour to work. Instead of wrapping `<summary>` inside\n * an `<h3>` (which breaks the native toggle), we apply\n * `role=\"heading\" aria-level=\"N\"` directly on `<summary>`.\n */\n private get _headingLevel(): number {\n return Math.max(1, Math.min(6, this.level));\n }\n\n // ─── Toggle Logic ───\n\n private _toggle(): void {\n if (this.disabled) return;\n\n const willExpand = !this.expanded;\n this.expanded = willExpand;\n\n this._dispatchToggleEvent(willExpand);\n }\n\n _dispatchToggleEvent(expanded: boolean): void {\n const detail = { expanded, itemId: this.id || '' };\n const options = { bubbles: true, composed: true, detail };\n\n if (expanded) {\n this.dispatchEvent(new CustomEvent('hx-expand', options));\n } else {\n this.dispatchEvent(new CustomEvent('hx-collapse', options));\n }\n }\n\n // ─── Event Handlers ───\n\n private _handleSummaryClick(e: MouseEvent): void {\n e.preventDefault();\n this._toggle();\n }\n\n private _handleKeyDown(e: KeyboardEvent): void {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this._toggle();\n }\n }\n\n // ─── Render ───\n\n override render() {\n const itemClasses = {\n item: true,\n 'item--expanded': this.expanded,\n 'item--disabled': this.disabled,\n };\n\n return html`\n <details part=\"item\" class=${classMap(itemClasses)} ?open=${this.expanded}>\n <summary\n id=${`${this._uid}-trigger`}\n part=\"trigger\"\n class=\"trigger\"\n role=\"heading\"\n aria-level=${this._headingLevel}\n tabindex=${this.disabled ? '-1' : '0'}\n aria-expanded=${this.expanded ? 'true' : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-controls=${`${this._uid}-content`}\n @click=${this._handleSummaryClick}\n @keydown=${this._handleKeyDown}\n >\n <slot name=\"trigger\"></slot>\n <span part=\"icon\" class=\"icon\">${chevronIcon}</span>\n </summary>\n <div class=\"content-wrapper\">\n <div class=\"content-inner\">\n <div\n id=${`${this._uid}-content`}\n part=\"content\"\n class=\"content\"\n role=\"region\"\n aria-labelledby=${`${this._uid}-trigger`}\n aria-hidden=${this.expanded ? nothing : 'true'}\n >\n <slot></slot>\n </div>\n </div>\n </div>\n </details>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-accordion-item': HelixAccordionItem;\n }\n}\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAccordionStyles } from './hx-accordion.styles.js';\nimport './hx-accordion-item.js';\nimport type { HelixAccordionItem } from './hx-accordion-item.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An accordion container that manages collapsible content sections.\n *\n * @summary Collapsible content sections with single or multi-expand modes.\n *\n * @tag hx-accordion\n *\n * @slot - Default slot for hx-accordion-item elements.\n *\n * @csspart accordion - The outer container wrapping all accordion items.\n *\n * @cssprop [--hx-accordion-border-radius=var(--hx-border-radius-md)] - Outer border radius.\n *\n * @example\n * ```html\n * <hx-accordion mode=\"single\">\n * <hx-accordion-item>\n * <span slot=\"trigger\">What is this?</span>\n * <p>Answer content here.</p>\n * </hx-accordion-item>\n * </hx-accordion>\n * ```\n */\n@customElement('hx-accordion')\nexport class HelixAccordion extends LitElement {\n static override styles = [tokenStyles, helixAccordionStyles];\n\n /**\n * Expansion mode: 'single' collapses all other items when one expands.\n * 'multi' allows multiple items open simultaneously.\n * @attr mode\n */\n @property({ type: String, reflect: true })\n mode: 'single' | 'multi' = 'single';\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('hx-expand', this._handleChildExpand);\n this.addEventListener('keydown', this._handleKeyDown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('hx-expand', this._handleChildExpand);\n this.removeEventListener('keydown', this._handleKeyDown);\n }\n\n protected override firstUpdated(): void {\n this._enforceSingleMode();\n }\n\n // ─── Single-expand coordination ───\n\n private _enforceSingleMode(): void {\n if (this.mode !== 'single') return;\n\n const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n let foundExpanded = false;\n\n items.forEach((item) => {\n if (item.expanded) {\n if (foundExpanded) {\n item.expanded = false;\n } else {\n foundExpanded = true;\n }\n }\n });\n }\n\n /**\n * Handles expand events from child accordion items to enforce single-expand mode.\n * @internal\n */\n private _handleChildExpand = (e: Event): void => {\n if (this.mode !== 'single') return;\n\n const expandedItem = e.composedPath()[0] as HelixAccordionItem;\n const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n\n items.forEach((item) => {\n if (item !== expandedItem && item.expanded) {\n item.expanded = false;\n item._dispatchToggleEvent(false);\n }\n });\n };\n\n // ─── Arrow key navigation (ARIA APG Accordion pattern) ───\n\n /**\n * Handles keyboard navigation between accordion triggers using arrow, Home, and End keys.\n * @internal\n */\n private _handleKeyDown = (e: KeyboardEvent): void => {\n const triggers = this._getTriggers();\n if (triggers.length === 0) return;\n\n const activeEl = this.shadowRoot?.activeElement ?? document.activeElement;\n let currentItem: HelixAccordionItem | null = null;\n\n const items = Array.from(this.querySelectorAll<HelixAccordionItem>('hx-accordion-item'));\n for (const item of items) {\n const summary = item.shadowRoot?.querySelector('[part=\"trigger\"]');\n if (summary === activeEl || item.shadowRoot?.activeElement === summary) {\n currentItem = item;\n break;\n }\n }\n\n if (!currentItem) return;\n\n const enabledItems = items.filter((item) => !item.disabled);\n const currentIndex = enabledItems.indexOf(currentItem);\n if (currentIndex === -1) return;\n\n let targetIndex = -1;\n\n switch (e.key) {\n case 'ArrowDown':\n targetIndex = (currentIndex + 1) % enabledItems.length;\n break;\n case 'ArrowUp':\n targetIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;\n break;\n case 'Home':\n targetIndex = 0;\n break;\n case 'End':\n targetIndex = enabledItems.length - 1;\n break;\n default:\n return;\n }\n\n e.preventDefault();\n const targetItem = enabledItems[targetIndex];\n const targetSummary = targetItem?.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]');\n targetSummary?.focus();\n };\n\n private _getTriggers(): HTMLElement[] {\n const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n const triggers: HTMLElement[] = [];\n items.forEach((item) => {\n const summary = item.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]');\n if (summary) triggers.push(summary);\n });\n return triggers;\n }\n\n // ─── Slot validation ───\n\n private _handleSlotChange(e: Event): void {\n const slot = e.target;\n if (!(slot instanceof HTMLSlotElement)) return;\n const invalid = slot\n .assignedElements()\n .filter((el) => el.tagName.toLowerCase() !== 'hx-accordion-item');\n if (invalid.length > 0) {\n devWarn(\n 'hx-accordion',\n `Default slot expects <hx-accordion-item> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n );\n }\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div part=\"accordion\" class=\"accordion\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-accordion': HelixAccordion;\n }\n}\n"],"names":["helixAccordionStyles","css","helixAccordionItemStyles","chevronIcon","svg","HelixAccordionItem","LitElement","willExpand","expanded","options","itemClasses","html","classMap","nothing","tokenStyles","__decorateClass","property","customElement","HelixAccordion","expandedItem","item","activeEl","_a","currentItem","items","summary","_b","_c","enabledItems","currentIndex","targetIndex","targetItem","targetSummary","_d","foundExpanded","triggers","slot","invalid","el","devWarn"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-action-bar-we_WJety.js","sources":["../../src/components/hx-action-bar/hx-action-bar.styles.ts","../../src/components/hx-action-bar/hx-action-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixActionBarStyles = css`\n :host {\n display: block;\n }\n\n /* ─── Base ─── */\n\n .base {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--hx-action-bar-gap, var(--hx-space-2, 0.5rem));\n padding: var(--hx-action-bar-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n background: var(--hx-action-bar-bg, transparent);\n border: var(--hx-action-bar-border, none);\n box-sizing: border-box;\n width: 100%;\n }\n\n /* ─── Sticky (top) ─── */\n\n .base--sticky {\n position: sticky;\n top: 0;\n padding-top: max(var(--hx-action-bar-padding-block-start, 0px), env(safe-area-inset-top, 0px));\n z-index: var(--hx-action-bar-z-index, 10);\n /*\n * Consumers: when this bar is sticky, add scroll-padding-top to the scroll container\n * equal to the bar's rendered height so anchor targets are not hidden behind the bar.\n * Example: .scroll-container { scroll-padding-top: 2.5rem; }\n */\n }\n\n /* ─── Bottom sticky ─── */\n\n .base--bottom {\n position: sticky;\n bottom: 0;\n /*\n * Respect iOS home-indicator safe area on devices with notch/home bar.\n * Falls back to 0px on devices that do not support env().\n */\n padding-bottom: max(\n var(--hx-action-bar-padding-block-end, 0px),\n env(safe-area-inset-bottom, 0px)\n );\n z-index: var(--hx-action-bar-z-index, 10);\n }\n\n /* ─── Variant: outlined ─── */\n\n .base--outlined {\n background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #fff));\n border: var(\n --hx-action-bar-border,\n var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb)\n );\n border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n /* ─── Variant: filled ─── */\n\n .base--filled {\n background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f9fafb));\n border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n /* ─── Size modifiers ─── */\n\n .base--sm {\n padding: var(--hx-action-bar-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n gap: var(--hx-action-bar-gap, var(--hx-space-1, 0.25rem));\n min-height: var(--hx-size-8, 2rem);\n }\n\n .base--md {\n min-height: var(--hx-size-10, 2.5rem);\n }\n\n .base--lg {\n padding: var(--hx-action-bar-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n gap: var(--hx-action-bar-gap, var(--hx-space-3, 0.75rem));\n min-height: var(--hx-size-12, 3rem);\n }\n\n /* ─── Sections ─── */\n\n .section {\n display: flex;\n align-items: center;\n gap: inherit;\n }\n\n /*\n * Equal flex-basis on start and end guarantees the center section is visually centered\n * within the full bar width, regardless of how wide start and end content are.\n */\n .section--start {\n flex: 1 1 0;\n justify-content: flex-start;\n }\n\n .section--center {\n flex: 0 0 auto;\n justify-content: center;\n }\n\n .section--end {\n flex: 1 1 0;\n justify-content: flex-end;\n }\n\n /* ─── Slotted content ─── */\n\n ::slotted(*) {\n flex-shrink: 0;\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixActionBarStyles } from './hx-action-bar.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A horizontal toolbar container for grouping related action buttons and controls.\n * Implements the ARIA toolbar pattern with roving tabindex keyboard navigation.\n *\n * @summary Horizontal action bar for grouping related controls.\n *\n * @tag hx-action-bar\n *\n * @slot start - Left-aligned actions.\n * @slot - Center content (default slot).\n * @slot end - Right-aligned actions.\n * @slot overflow - Actions revealed when the bar is constrained for space.\n *\n * @csspart base - The root toolbar container element.\n * @csspart start - The start (left) slot wrapper.\n * @csspart center - The center (default) slot wrapper.\n * @csspart end - The end (right) slot wrapper.\n * @csspart overflow - The overflow slot wrapper (hidden when no overflow content).\n *\n * @cssprop [--hx-action-bar-bg=transparent] - Bar background color (default variant).\n * @cssprop [--hx-action-bar-border=none] - Bar border (default variant).\n * @cssprop [--hx-action-bar-padding=var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)] - Inner padding.\n * @cssprop [--hx-action-bar-gap=var(--hx-space-2,0.5rem)] - Gap between slotted items.\n * @cssprop [--hx-action-bar-z-index=10] - Z-index when sticky or bottom position.\n *\n * @attr {string} aria-label - Required. Identifies the toolbar to assistive technology.\n * When multiple toolbars appear on the same page, each must have a unique, descriptive label.\n *\n * @example\n * ```html\n * <hx-action-bar aria-label=\"Patient actions\">\n * <hx-button slot=\"start\">Save</hx-button>\n * <hx-button slot=\"end\" variant=\"ghost\">Cancel</hx-button>\n * </hx-action-bar>\n * ```\n */\n@customElement('hx-action-bar')\nexport class HelixActionBar extends LitElement {\n static override styles = [tokenStyles, helixActionBarStyles];\n\n /**\n * Size of the action bar — propagated as a data attribute to slotted children.\n * @attr size\n */\n @property({ type: String, reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Visual variant controlling the bar background.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'outlined' | 'filled' = 'default';\n\n /**\n * Position and sticky behavior of the action bar.\n * - `top` — normal flow (default)\n * - `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n * scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n * - `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support\n * @attr position\n */\n @property({ type: String, reflect: true })\n position: 'top' | 'bottom' | 'sticky' = 'top';\n\n /**\n * @deprecated Use `position=\"sticky\"` instead.\n * When true, the bar sticks to the top of its scroll container.\n * @attr sticky\n */\n @property({ type: Boolean, reflect: true })\n get sticky(): boolean {\n return this._sticky;\n }\n set sticky(value: boolean) {\n if (value) {\n devWarn(\n 'hx-action-bar',\n 'The `sticky` property is deprecated. Use `position=\"sticky\"` instead.',\n );\n }\n const old = this._sticky;\n this._sticky = value;\n this.requestUpdate('sticky', old);\n }\n private _sticky = false;\n\n /**\n * Accessible label for the toolbar.\n * Required when multiple toolbars appear on the same page.\n * @attr aria-label\n */\n @property({ attribute: 'aria-label' })\n ariaLabel: string = 'Actions';\n\n /** Cached list of focusable items — invalidated on slot change. */\n private _focusableCache: HTMLElement[] | null = null;\n\n /** Whether the overflow slot has assigned content. */\n @state()\n private _hasOverflow = false;\n\n // ─── Lifecycle ───\n\n /** Arrow function field — stable reference for add/removeEventListener. */\n private _handleKeydown = (e: KeyboardEvent): void => {\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n this._moveFocus('next');\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this._moveFocus('prev');\n } else if (e.key === 'Home') {\n e.preventDefault();\n // Move directly to first item — do NOT call _moveFocus which would visit other items first.\n const items = this._getFocusableItems();\n if (items.length) {\n items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n items[0]?.focus();\n }\n } else if (e.key === 'End') {\n e.preventDefault();\n const items = this._getFocusableItems();\n const last = items.length - 1;\n if (items.length) {\n items.forEach((el, i) => el.setAttribute('tabindex', i === last ? '0' : '-1'));\n items[last]?.focus();\n }\n }\n };\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Prevent dual aria-label announcement: the host carries the consumer's\n // aria-label attribute while the inner div[role=\"toolbar\"] receives the\n // same value. Setting role=\"none\" on the host hides it from the\n // accessibility tree so only the toolbar is announced.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'none');\n } else if (this.getAttribute('role') !== 'none') {\n devWarn(\n 'hx-action-bar',\n `Setting role=\"${this.getAttribute('role')}\" on the host creates a duplicate toolbar announcement. ` +\n 'The shadow DOM already contains role=\"toolbar\". Set role=\"none\" on the host to suppress it.',\n );\n }\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override firstUpdated(): void {\n // Slot assignments are complete by firstUpdated; initialize roving tabindex\n // immediately rather than waiting for the async slotchange event.\n this._initRovingTabindex();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n // ─── Focusable item discovery ───\n\n private _isFocusable(el: HTMLElement): boolean {\n // Check disabled via DOM attribute (native elements) or property (custom elements)\n if (el.hasAttribute('disabled')) return false;\n const elWithDisabled = el as HTMLElement & { disabled?: boolean };\n if (elWithDisabled.disabled === true) return false;\n\n // Use the IDL tabIndex property — covers both DOM attribute and ElementInternals settings.\n // Custom elements (e.g. hx-button) that set tabIndex via ElementInternals are discoverable.\n if (el.tabIndex >= 0) return true;\n\n const tag = el.tagName.toLowerCase();\n return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';\n }\n\n private _getFocusableItems(): HTMLElement[] {\n if (this._focusableCache) return this._focusableCache;\n\n const slots = this.shadowRoot?.querySelectorAll('slot') ?? [];\n const items: HTMLElement[] = [];\n\n for (const slot of Array.from(slots)) {\n const assigned = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n for (const el of assigned) {\n if (!(el instanceof HTMLElement)) continue;\n if (this._isFocusable(el)) {\n // Element is itself focusable — include it and do NOT also recurse into its children\n // to prevent double-counting compound components (e.g. <a><button>).\n items.push(el);\n } else {\n // Element is a non-focusable wrapper (e.g. <div>, <span>) — find focusable children.\n const descendants = el.querySelectorAll<HTMLElement>('*');\n for (const d of Array.from(descendants)) {\n if (this._isFocusable(d)) {\n items.push(d);\n }\n }\n }\n }\n }\n\n this._focusableCache = items;\n return items;\n }\n\n // ─── Roving tabindex helpers ───\n\n private _initRovingTabindex(): void {\n this._focusableCache = null; // invalidate cache on slot change\n const items = this._getFocusableItems();\n if (!items.length) return;\n const hasActive = items.some((el) => el.getAttribute('tabindex') === '0');\n if (!hasActive) {\n // No item is active yet — make the first item tabbable.\n items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n } else {\n // An item is already active — ensure new items get tabindex=\"-1\"\n // without disturbing the currently active item.\n items.forEach((el) => {\n if (el.getAttribute('tabindex') === null) el.setAttribute('tabindex', '-1');\n });\n }\n }\n\n private _moveFocus(direction: 'next' | 'prev'): void {\n const items = this._getFocusableItems();\n if (!items.length) return;\n\n const focused = document.activeElement as HTMLElement | null;\n const currentIndex = items.indexOf(focused as HTMLElement);\n\n let nextIndex: number;\n if (direction === 'next') {\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n } else {\n nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n }\n\n items.forEach((el, i) => {\n el.setAttribute('tabindex', i === nextIndex ? '0' : '-1');\n });\n\n items[nextIndex]?.focus();\n }\n\n // ─── Event Handlers ───\n\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n if (slot.name === 'overflow') {\n this._hasOverflow = slot.assignedElements({ flatten: true }).length > 0;\n }\n this._initRovingTabindex();\n }\n\n // ─── Render ───\n\n override render() {\n const isSticky = this.position === 'sticky' || this.sticky;\n const isBottom = this.position === 'bottom';\n const positionClass = isSticky ? ' base--sticky' : isBottom ? ' base--bottom' : '';\n\n return html`\n <div\n part=\"base\"\n role=\"toolbar\"\n aria-label=${this.ariaLabel}\n aria-orientation=\"horizontal\"\n class=\"base base--${this.size} base--${this.variant}${positionClass}\"\n >\n <div part=\"start\" class=\"section section--start\">\n <slot name=\"start\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"center\" class=\"section section--center\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"end\" class=\"section section--end\">\n <slot name=\"end\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"overflow\" class=\"section section--overflow\" ?hidden=${!this._hasOverflow}>\n <slot name=\"overflow\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-action-bar': HelixActionBar;\n }\n}\n"],"names":["helixActionBarStyles","css","HelixActionBar","LitElement","e","items","el","i","_a","last","_b","value","old","devWarn","tag","slots","slot","assigned","descendants","d","direction","focused","currentIndex","nextIndex","isSticky","isBottom","positionClass","html","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-alert-D6uok29t.js","sources":["../../src/components/hx-alert/hx-alert.styles.ts","../../src/components/hx-alert/hx-alert.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAlertStyles = css`\n :host {\n display: block;\n }\n\n :host(:not([open])) {\n display: none;\n }\n\n /* ─── Screen-reader-only announcement region ─── */\n /* Always present in DOM so AT registers it before content is injected. */\n /* Visually hidden via clip-path technique (superior to display:none which */\n /* removes the element from the AT tree entirely). */\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Alert Container ─── */\n\n .alert {\n display: flex;\n align-items: flex-start;\n gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));\n padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));\n border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid\n var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));\n border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-alert-bg, var(--hx-color-info-50, #e8f4fd));\n color: var(--hx-alert-color, var(--hx-color-info-800, #1a3a4a));\n font-family: var(--hx-alert-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-sm, 0.875rem);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n /* ─── Accent Variant (left border stripe) ─── */\n /* Removes full border and replaces with a left-side accent stripe. */\n /* Common healthcare/enterprise dashboard pattern for dense information UIs. */\n\n .alert--accent {\n border-width: 0;\n border-left: var(--hx-alert-accent-width, 4px) solid\n var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));\n border-radius: 0;\n }\n\n /* ─── Severity Label (WCAG 1.4.1) ─── */\n /* Visually hidden — provides a non-color cue for screen readers and users */\n /* who cannot distinguish variants by color alone (e.g. color-blind users). */\n /* Always present regardless of showIcon so severity is never color-only. */\n\n .alert__severity-label {\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 /* ─── Icon ─── */\n\n .alert__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-alert-icon-color, var(--hx-color-info-500, #3b82f6));\n }\n\n .alert__icon svg {\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n fill: currentColor;\n }\n\n /* ─── Title ─── */\n\n .alert__title {\n display: none;\n font-weight: var(--hx-font-weight-semibold, 600);\n margin-bottom: var(--hx-space-1, 0.25rem);\n }\n\n .alert__title--visible {\n display: block;\n }\n\n /* ─── Message ─── */\n\n .alert__message {\n flex: 1;\n min-width: 0;\n }\n\n /* ─── Actions ─── */\n /* Hidden by default; shown via JS slotchange detection to avoid invisible */\n /* margin-top spacing when no actions are slotted. */\n\n .alert__actions {\n display: none;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n margin-top: var(--hx-space-2, 0.5rem);\n }\n\n .alert__actions--visible {\n display: flex;\n }\n\n /* ─── Close Button ─── */\n /* Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and */\n /* Apple HIG / Google Material guidelines. Uses absolute px units to ensure */\n /* the target size is independent of the consumer's base font size. */\n\n .alert__close-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n min-width: var(--hx-touch-target-size, 44px);\n min-height: var(--hx-touch-target-size, 44px);\n margin-left: auto;\n padding: 0;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-alert-color, var(--hx-color-info-800, #1a3a4a));\n cursor: pointer;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: 1;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n opacity var(--hx-transition-fast, 150ms ease);\n opacity: 0.7;\n }\n\n .alert__close-button:hover {\n opacity: 1;\n /* color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+. */\n /* Falls back to transparent (no hover background) in older environments. */\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .alert__close-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n opacity: 1;\n }\n\n .alert__close-button svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n fill: currentColor;\n }\n\n /* ─── Variant: info ─── */\n\n :host([variant='info']) .alert,\n :host(:not([variant])) .alert {\n --hx-alert-bg: var(--hx-color-info-50, #e8f4fd);\n --hx-alert-border-color: var(--hx-color-info-200, #b3d9ef);\n --hx-alert-color: var(--hx-color-info-800, #1a3a4a);\n --hx-alert-icon-color: var(--hx-color-info-500, #3b82f6);\n }\n\n /* ─── Variant: success ─── */\n\n :host([variant='success']) .alert {\n --hx-alert-bg: var(--hx-color-success-50, #ecfdf5);\n --hx-alert-border-color: var(--hx-color-success-200, #a7f3d0);\n --hx-alert-color: var(--hx-color-success-800, #065f46);\n --hx-alert-icon-color: var(--hx-color-success-500, #10b981);\n }\n\n /* ─── Variant: warning ─── */\n\n :host([variant='warning']) .alert {\n --hx-alert-bg: var(--hx-color-warning-50, #fffbeb);\n --hx-alert-border-color: var(--hx-color-warning-200, #fde68a);\n --hx-alert-color: var(--hx-color-warning-800, #92400e);\n --hx-alert-icon-color: var(--hx-color-warning-500, #f59e0b);\n }\n\n /* ─── Variant: error ─── */\n\n :host([variant='error']) .alert {\n --hx-alert-bg: var(--hx-color-error-50, #fef2f2);\n --hx-alert-border-color: var(--hx-color-error-200, #fecaca);\n --hx-alert-color: var(--hx-color-error-800, #991b1b);\n --hx-alert-icon-color: var(--hx-color-error-500, #ef4444);\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 { helixAlertStyles } from './hx-alert.styles.js';\n\n/** Alert variant determines visual styling and ARIA semantics. */\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * A feedback component for communicating status messages, warnings, and errors.\n * Critical for healthcare patient safety alerts.\n *\n * @summary Feedback alert for status messages with variant-based styling and ARIA live regions.\n *\n * @tag hx-alert\n *\n * @slot - Default slot for alert message content.\n * @slot title - Optional title/headline for the alert.\n * @slot icon - Custom icon to override the default variant icon.\n * @slot actions - Action buttons rendered within the alert.\n *\n * @attr {string} heading - Text used to build the close button's contextual aria-label\n * (e.g., \"Close Low blood pressure alert\"). When absent the label falls back to \"Close alert\".\n *\n * @fires {CustomEvent<{reason: string}>} hx-close - Dispatched when the user dismisses the alert.\n * @fires {CustomEvent} hx-after-close - Dispatched after the alert is dismissed.\n *\n * @csspart alert - The outer alert container.\n * @csspart title - The title/headline container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart close-button - The dismiss button (only rendered when dismissible).\n * @csspart actions - The actions container.\n *\n * @cssprop [--hx-alert-bg=var(--hx-color-info-50)] - Alert background color.\n * @cssprop [--hx-alert-color=var(--hx-color-info-800)] - Alert text color.\n * @cssprop [--hx-alert-border-color=var(--hx-color-info-200)] - Alert border color.\n * @cssprop [--hx-alert-border-radius=var(--hx-border-radius-md)] - Alert border radius.\n * @cssprop [--hx-alert-border-width=var(--hx-border-width-thin)] - Alert border width.\n * @cssprop [--hx-alert-padding=var(--hx-space-4)] - Alert padding.\n * @cssprop [--hx-alert-gap=var(--hx-space-3)] - Gap between alert elements.\n * @cssprop [--hx-alert-icon-color=var(--hx-color-info-500)] - Alert icon color.\n * @cssprop [--hx-alert-font-family=var(--hx-font-family-sans)] - Alert font family.\n * @cssprop [--hx-touch-target-size=44px] - Minimum touch target size for the close button.\n * @cssprop [--hx-alert-accent-width=4px] - Width of the left border accent stripe.\n */\n@customElement('hx-alert')\nexport class HelixAlert extends LitElement {\n static override styles = [tokenStyles, helixAlertStyles];\n\n // ─── Properties ───\n\n /**\n * Visual variant of the alert that determines colors and ARIA semantics.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: AlertVariant = 'info';\n\n /**\n * Whether the alert can be dismissed by the user.\n * @attr dismissible\n */\n @property({ type: Boolean, reflect: true })\n dismissible = false;\n\n /**\n * Optional heading text that provides context for the close button's accessible label.\n * When provided, the close button is announced as \"Close [heading] alert\".\n * When absent, the close button falls back to \"Close alert\".\n * @attr heading\n */\n @property({ type: String })\n heading = '';\n\n /**\n * Whether the alert is visible. Add the `open` attribute to show the alert.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Whether to show the default variant icon. Add `show-icon` attribute to display the icon.\n * @attr show-icon\n */\n @property({ type: Boolean, reflect: true, attribute: 'show-icon' })\n showIcon = false;\n\n /**\n * When true, applies a left border accent stripe instead of a full border.\n * Common healthcare/enterprise dashboard pattern for visual distinction of alert types.\n * @attr accent\n */\n @property({ type: Boolean, reflect: true })\n accent = false;\n\n /**\n * CSS selector for the element to return focus to after the alert is dismissed.\n * When set, the component will find and focus the matching element after dismissal.\n * If not set, focus management is the caller's responsibility via the hx-after-close event.\n * @attr return-focus-to\n */\n @property({ type: String, attribute: 'return-focus-to' })\n returnFocusTo: string | null = null;\n\n // ─── State ───\n\n @state()\n private _hasActions = false;\n\n @state()\n private _hasTitle = false;\n\n // ─── Private Handler References ───\n\n private _actionsSlotChangeHandler: (() => void) | null = null;\n private _titleSlotChangeHandler: (() => void) | null = null;\n\n // ─── Private Helpers ───\n\n /** Returns true when the variant requires assertive announcement. */\n private get _isAssertive(): boolean {\n return this.variant === 'error';\n }\n\n /**\n * Returns the appropriate ARIA role based on variant.\n * role=\"alert\" implies aria-live=\"assertive\"; role=\"status\" implies aria-live=\"polite\".\n * We do NOT set aria-live explicitly to avoid double-announcements in JAWS.\n */\n private get _role(): string {\n return this._isAssertive ? 'alert' : 'status';\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Apply ARIA role to the host element for reliable screen reader support across\n // Shadow DOM boundaries. Placing role on a shadow-internal element has inconsistent\n // AT support in JAWS+Chrome and VoiceOver+Safari combinations (particularly pre-2024).\n this.setAttribute('role', this._role);\n if (!this.open) {\n this.setAttribute('aria-hidden', 'true');\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n if (actionsSlot && this._actionsSlotChangeHandler) {\n actionsSlot.removeEventListener('slotchange', this._actionsSlotChangeHandler);\n }\n const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n if (titleSlot && this._titleSlotChangeHandler) {\n titleSlot.removeEventListener('slotchange', this._titleSlotChangeHandler);\n }\n }\n\n override firstUpdated(): void {\n // Track actions slot content to avoid invisible spacing when no actions are slotted.\n const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n if (actionsSlot) {\n this._actionsSlotChangeHandler = () => {\n this._hasActions = actionsSlot.assignedNodes({ flatten: true }).length > 0;\n };\n actionsSlot.addEventListener('slotchange', this._actionsSlotChangeHandler);\n }\n\n // Track title slot content so the title container doesn't create dead space when empty.\n const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n if (titleSlot) {\n this._titleSlotChangeHandler = () => {\n this._hasTitle = titleSlot.assignedNodes({ flatten: true }).length > 0;\n };\n titleSlot.addEventListener('slotchange', this._titleSlotChangeHandler);\n }\n }\n\n protected override updated(changedProperties: Map<PropertyKey, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('variant')) {\n // Keep host ARIA role in sync with variant (assertive vs. polite).\n this.setAttribute('role', this._role);\n }\n if (changedProperties.has('open')) {\n // Manage aria-hidden in addition to display:none for reliable AT exclusion.\n // When open transitions from false→true, removing aria-hidden signals to AT\n // that the live region content should be announced.\n if (this.open) {\n this.removeAttribute('aria-hidden');\n // Trigger announcement via the sr-only polite live region for ATs (JAWS+Chrome,\n // NVDA) that do not re-announce existing content when aria-hidden is merely removed.\n // We inject text after a microtask so the DOM has settled and the live region\n // is registered by the AT before content arrives.\n const previousOpen = changedProperties.get('open');\n if (previousOpen === false) {\n Promise.resolve().then(() => {\n const announcer = this.renderRoot.querySelector<HTMLElement>('.sr-only');\n if (announcer) {\n announcer.textContent = '';\n // Second microtask ensures the clear is processed before re-injection,\n // guaranteeing the AT sees a content change rather than no-op.\n Promise.resolve().then(() => {\n const severityLabels: Record<string, string> = {\n info: 'Info:',\n success: 'Success:',\n warning: 'Warning:',\n error: 'Error:',\n };\n const prefix = severityLabels[this.variant] ?? '';\n const message = this.textContent?.trim() ?? '';\n announcer.textContent = prefix ? `${prefix} ${message}` : message;\n });\n }\n });\n }\n } else {\n this.setAttribute('aria-hidden', 'true');\n // Clear the announcer when hidden so stale text is not re-read on next open.\n const announcer = this.renderRoot.querySelector<HTMLElement>('.sr-only');\n if (announcer) {\n announcer.textContent = '';\n }\n }\n }\n }\n\n // ─── Default Icons ───\n\n private _renderInfoIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n />\n </svg>`;\n }\n\n private _renderSuccessIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\n />\n </svg>`;\n }\n\n private _renderWarningIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n />\n </svg>`;\n }\n\n private _renderErrorIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n />\n </svg>`;\n }\n\n private _renderDefaultIcon() {\n switch (this.variant) {\n case 'success':\n return this._renderSuccessIcon();\n case 'warning':\n return this._renderWarningIcon();\n case 'error':\n return this._renderErrorIcon();\n case 'info':\n default:\n return this._renderInfoIcon();\n }\n }\n\n private _renderCloseIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>`;\n }\n\n // ─── Event Handling ───\n\n private _handleDismiss(): void {\n this.open = false;\n\n /**\n * Dispatched when the user dismisses the alert.\n * @event hx-close\n */\n this.dispatchEvent(\n new CustomEvent('hx-close', {\n bubbles: true,\n composed: true,\n detail: { reason: 'user' },\n }),\n );\n\n /**\n * Dispatched after the alert is dismissed.\n * @event hx-after-close\n */\n this.dispatchEvent(\n new CustomEvent('hx-after-close', {\n bubbles: true,\n composed: true,\n }),\n );\n\n // Return focus to a designated element if specified via returnFocusTo.\n if (this.returnFocusTo) {\n const target = document.querySelector(this.returnFocusTo);\n if (target instanceof HTMLElement) {\n target.focus();\n }\n }\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n alert: true,\n [`alert--${this.variant}`]: true,\n 'alert--accent': this.accent,\n };\n\n // WCAG 1.4.1: Always render a visually-hidden severity label so the variant\n // is never conveyed by color alone, regardless of whether showIcon is set.\n const SEVERITY_LABELS: Record<string, string> = {\n info: 'Info:',\n success: 'Success:',\n warning: 'Warning:',\n error: 'Error:',\n };\n const severityLabel = SEVERITY_LABELS[this.variant] ?? '';\n\n return html`\n <div\n class=\"sr-only\"\n aria-live=${this._isAssertive ? 'assertive' : 'polite'}\n aria-atomic=\"true\"\n ></div>\n <div part=\"alert\" class=${classMap(classes)}>\n <span class=\"alert__severity-label\">${severityLabel}</span>\n ${this.showIcon\n ? html`\n <div part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\">${this._renderDefaultIcon()}</slot>\n </div>\n `\n : nothing}\n\n <div part=\"message\" class=\"alert__message\">\n <div part=\"title\" class=\"alert__title ${this._hasTitle ? 'alert__title--visible' : ''}\">\n <slot name=\"title\"></slot>\n </div>\n <slot></slot>\n <div\n part=\"actions\"\n class=\"alert__actions ${this._hasActions ? 'alert__actions--visible' : ''}\"\n >\n <slot name=\"actions\"></slot>\n </div>\n </div>\n\n ${this.dismissible\n ? html`\n <button\n part=\"close-button\"\n class=\"alert__close-button\"\n aria-label=${`Close ${this.heading ? `${this.heading} ` : ''}alert`}\n @click=${this._handleDismiss}\n >\n ${this._renderCloseIcon()}\n </button>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-alert': HelixAlert;\n }\n}\n\nexport type { HelixAlert as HxAlert };\n"],"names":["helixAlertStyles","css","HelixAlert","LitElement","actionsSlot","titleSlot","changedProperties","announcer","prefix","message","_a","html","target","classes","severityLabel","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-avatar-Cep6Urm3.js","sources":["../../src/components/hx-avatar/hx-avatar.styles.ts","../../src/components/hx-avatar/hx-avatar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAvatarStyles = css`\n :host {\n display: inline-block;\n }\n\n /* P2-5: Respect the HTML hidden attribute — custom elements with explicit display ignore it otherwise. */\n :host([hidden]) {\n display: none !important;\n }\n\n /* P0-2: Wrapper provides the positioning context for the badge slot, outside overflow: hidden. */\n .avatar-wrapper {\n position: relative;\n display: inline-flex;\n }\n\n .avatar {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n width: var(--hx-avatar-size);\n height: var(--hx-avatar-size);\n background-color: var(--hx-avatar-bg, var(--hx-color-primary-100));\n color: var(--hx-avatar-color, var(--hx-color-primary-700));\n border-radius: var(--hx-avatar-border-radius);\n flex-shrink: 0;\n }\n\n /* ─── Size Variants ─── */\n\n .avatar--xs {\n --hx-avatar-size: var(--hx-size-6, 1.5rem);\n --hx-avatar-font-size: var(--hx-font-size-2xs, 0.625rem);\n }\n\n .avatar--sm {\n --hx-avatar-size: var(--hx-size-8, 2rem);\n --hx-avatar-font-size: var(--hx-font-size-xs, 0.75rem);\n }\n\n .avatar--md {\n --hx-avatar-size: var(--hx-size-10, 2.5rem);\n --hx-avatar-font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n .avatar--lg {\n --hx-avatar-size: var(--hx-size-12, 3rem);\n --hx-avatar-font-size: var(--hx-font-size-base, 1rem);\n }\n\n .avatar--xl {\n --hx-avatar-size: var(--hx-size-16, 4rem);\n --hx-avatar-font-size: var(--hx-font-size-lg, 1.125rem);\n }\n\n /* ─── Shape Variants ─── */\n\n .avatar--circle {\n --hx-avatar-border-radius: 50%;\n }\n\n .avatar--square {\n --hx-avatar-border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n /* ─── Image ─── */\n\n .avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n /* ─── Initials ─── */\n\n .avatar__initials {\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-avatar-font-size);\n font-weight: var(--hx-font-weight-semibold, 600);\n line-height: 1;\n text-transform: uppercase;\n letter-spacing: var(--hx-letter-spacing-wide, 0.025em);\n user-select: none;\n }\n\n /* ─── Fallback Icon ─── */\n\n .avatar__fallback-icon {\n width: 60%;\n height: 60%;\n color: var(--hx-avatar-color, var(--hx-color-primary-700));\n }\n\n /* ─── Badge Slot ─── */\n\n /* P0-2: Positioned relative to .avatar-wrapper — outside the overflow: hidden on .avatar. */\n .avatar__badge {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n /* P2-2: Hide the badge wrapper when no slot content is present, preserving slotchange detection. */\n .avatar__badge--hidden {\n display: none;\n }\n\n /* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,\n leaving no visual boundary. Add a border so the avatar remains perceivable.\n WCAG 1.4.11 Non-text Contrast (Level AA). */\n @media (forced-colors: active) {\n .avatar {\n border: 2px solid ButtonText;\n }\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAvatarStyles } from './hx-avatar.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A user avatar component that displays an image, initials, or a fallback icon.\n * Supports a badge slot for status indicator overlays.\n *\n * @summary User avatar with image, initials, and fallback icon support for healthcare applications.\n *\n * @tag hx-avatar\n *\n * @slot - Default slot for custom avatar content. Overrides src and initials when slotted content is present.\n * @slot badge - Status indicator overlay, positioned at the bottom-right of the avatar container.\n *\n * @csspart avatar - The outer container element.\n * @csspart image - The img element shown when src is provided.\n * @csspart initials - The initials text span shown as a fallback.\n * @csspart fallback-icon - The SVG person silhouette shown when no src or initials are available.\n * @csspart badge - The badge slot container.\n *\n * @cssprop [--hx-avatar-size] - Computed width and height from the size variant.\n * @cssprop [--hx-avatar-border-radius] - Circle = 50%, Square = var(--hx-border-radius-md).\n * @cssprop [--hx-avatar-bg=var(--hx-color-primary-100)] - Background color of the avatar container.\n * @cssprop [--hx-avatar-color=var(--hx-color-primary-700)] - Text and icon color inside the avatar.\n * @cssprop [--hx-avatar-font-size] - Font size for the initials text, set per size variant.\n */\n@customElement('hx-avatar')\nexport class HelixAvatar extends LitElement {\n static override styles = [tokenStyles, helixAvatarStyles];\n\n /**\n * Image URL. When provided and successfully loaded, displays the image.\n * @attr src\n */\n @property({ type: String })\n src: string | undefined = undefined;\n\n /**\n * Accessible label for the image. Required when `src` is provided.\n * Used as the container's aria-label in image mode.\n * @attr alt\n */\n @property({ type: String })\n alt = '';\n\n /**\n * Human-readable accessible name for non-image states (initials, fallback icon).\n * In healthcare contexts, provide the full person name (e.g., \"Dr. Jane Doe\") rather than\n * relying on raw initials, which screen readers announce as individual letters.\n * When set, takes precedence over raw initials and the generic \"Avatar\" fallback.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Fallback initials text displayed when no image is available.\n * @attr initials\n */\n @property({ type: String })\n initials = '';\n\n /**\n * Size variant of the avatar.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n /**\n * Shape variant of the avatar.\n * @attr shape\n */\n @property({ type: String, reflect: true })\n shape: 'circle' | 'square' = 'circle';\n\n /**\n * Tracks whether the image failed to load, triggering the fallback chain.\n */\n @state()\n private _imgError = false;\n\n /**\n * Tracks whether the default slot has assigned content.\n */\n @state()\n private _hasDefaultSlot = false;\n\n /**\n * Tracks whether the badge slot has assigned content.\n */\n @state()\n private _hasBadgeSlot = false;\n\n // ─── Lifecycle ───\n\n // P1-A / P2-B: Use willUpdate() instead of updated() for property validation\n // and derived state. willUpdate() runs before render() and does not schedule\n // a second update cycle when @state() properties are mutated.\n override willUpdate(changedProperties: PropertyValues): void {\n // P0-1: Reset image error state when src changes so a new valid src renders correctly.\n if (changedProperties.has('src')) {\n this._imgError = false;\n }\n\n // P1-2: Warn when src is provided without alt — silent accessibility failure in healthcare UIs.\n if (changedProperties.has('src') || changedProperties.has('alt')) {\n if (this.src && !this.alt) {\n devWarn(\n 'hx-avatar',\n 'Accessibility: \"alt\" attribute is required when \"src\" is provided. ' +\n 'Without alt text, screen readers announce a non-descriptive label. ' +\n 'Add alt=\"Full name or description\" to your hx-avatar element.',\n );\n }\n }\n\n // P2-A: Warn when initials are used without label — screen readers announce\n // raw initials as individual letters (e.g., \"J D\") instead of a name.\n if (changedProperties.has('initials') || changedProperties.has('label')) {\n if (this.initials && !this.label) {\n devWarn(\n 'hx-avatar',\n 'Accessibility: \"label\" attribute is recommended when \"initials\" is provided. ' +\n 'Without label, screen readers announce raw initials as individual letters. ' +\n 'Add label=\"Full Name\" to your hx-avatar element.',\n );\n }\n }\n\n // P2-1: Warn when invalid size or shape attribute values are used (e.g., from Twig templates).\n const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n if (changedProperties.has('size') && !validSizes.includes(this.size)) {\n devWarn(\n 'hx-avatar',\n `Invalid hx-size=\"${String(this.size)}\". Valid values: xs, sm, md, lg, xl. Rendering with \"md\".`,\n );\n }\n const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n if (changedProperties.has('shape') && !validShapes.includes(this.shape)) {\n devWarn(\n 'hx-avatar',\n `Invalid shape=\"${String(this.shape)}\". Valid values: circle, square. Rendering with \"circle\".`,\n );\n }\n }\n\n // ─── Slot Change Handling ───\n\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasDefaultSlot = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) return true;\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent ?? '').trim().length > 0;\n }\n return false;\n });\n }\n\n private _handleBadgeSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasBadgeSlot = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) return true;\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent ?? '').trim().length > 0;\n }\n return false;\n });\n\n // P2-C: Warn when badge slot content lacks an accessible name.\n // A plain <span class=\"dot\"></span> badge is invisible to screen readers.\n if (this._hasBadgeSlot) {\n const hasAccessibleName = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const el = node as Element;\n return (\n el.hasAttribute('aria-label') ||\n el.hasAttribute('aria-labelledby') ||\n !!el.getAttribute('role')\n );\n }\n return false;\n });\n if (!hasAccessibleName) {\n devWarn(\n 'hx-avatar',\n 'Accessibility: badge slot content should have an accessible name ' +\n '(aria-label, role, etc.). Without it, the badge is invisible to screen readers.',\n );\n }\n }\n }\n\n // ─── Image Error Handling ───\n\n private _handleImgError(): void {\n this._imgError = true;\n }\n\n // ─── Fallback Icon ───\n\n private _renderFallbackIcon() {\n return html`\n <svg\n part=\"fallback-icon\"\n class=\"avatar__fallback-icon\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n >\n <path\n d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\"\n />\n </svg>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const src = this.src;\n const showSlot = this._hasDefaultSlot;\n const showImage = !showSlot && !!src && !this._imgError;\n const showInitials = !showSlot && !showImage && !!this.initials.trim();\n const showFallback = !showSlot && !showImage && !showInitials;\n\n // P1-1 / P1-7: Use label property for human-readable accessible name in non-image states.\n const ariaLabel = showImage\n ? this.alt || this.label || 'Avatar'\n : showInitials\n ? this.label || this.initials\n : this.label || 'Avatar';\n\n // P2-1: Safe class fallback for invalid attribute values supplied via HTML/Twig.\n const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n const sizeClass = validSizes.includes(this.size) ? this.size : 'md';\n const shapeClass = validShapes.includes(this.shape) ? this.shape : 'circle';\n\n const classes = {\n avatar: true,\n [`avatar--${sizeClass}`]: true,\n [`avatar--${shapeClass}`]: true,\n };\n\n // P2-2: Badge wrapper is hidden (not removed) when empty so slotchange detection still works.\n const badgeClasses = {\n avatar__badge: true,\n 'avatar__badge--hidden': !this._hasBadgeSlot,\n };\n\n return html`\n <div class=\"avatar-wrapper\">\n <div\n part=\"avatar\"\n class=${classMap(classes)}\n role=${showSlot ? nothing : 'img'}\n aria-label=${showSlot ? nothing : ariaLabel}\n >\n <slot @slotchange=${this._handleSlotChange}></slot>\n ${showImage && src\n ? html`<img\n part=\"image\"\n class=\"avatar__image\"\n src=${src}\n alt=${this.alt}\n aria-hidden=\"true\"\n loading=\"lazy\"\n @error=${this._handleImgError}\n />`\n : nothing}\n ${showInitials\n ? html`<span part=\"initials\" class=\"avatar__initials\">${this.initials.trim()}</span>`\n : nothing}\n ${showFallback ? this._renderFallbackIcon() : nothing}\n </div>\n <span part=\"badge\" class=${classMap(badgeClasses)}>\n <slot name=\"badge\" @slotchange=${this._handleBadgeSlotChange}></slot>\n </span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-avatar': HelixAvatar;\n }\n}\n"],"names":["helixAvatarStyles","css","HelixAvatar","LitElement","changedProperties","validSizes","devWarn","validShapes","e","nodes","node","el","html","src","showSlot","showImage","showInitials","showFallback","ariaLabel","sizeClass","shapeClass","classes","badgeClasses","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-badge-BeuWuUj_.js","sources":["../../src/components/hx-badge/hx-badge.styles.ts","../../src/components/hx-badge/hx-badge.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixBadgeStyles = css`\n :host {\n display: inline-block;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-1, 0.25rem);\n border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #2563eb));\n color: var(--hx-badge-color, var(--hx-color-neutral-0, #ffffff));\n font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));\n line-height: var(--hx-line-height-tight, 1.25);\n white-space: nowrap;\n vertical-align: middle;\n position: relative;\n }\n\n /* ─── Size Variants ─── */\n\n .badge--sm {\n font-size: var(--hx-badge-font-size, var(--hx-font-size-2xs, 0.625rem));\n padding: var(--hx-badge-padding-y, var(--hx-space-0-5, 0.125rem))\n var(--hx-badge-padding-x, var(--hx-space-1-5, 0.375rem));\n }\n\n .badge--md {\n font-size: var(--hx-badge-font-size, var(--hx-font-size-xs, 0.75rem));\n padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))\n var(--hx-badge-padding-x, var(--hx-space-2, 0.5rem));\n }\n\n .badge--lg {\n font-size: var(--hx-badge-font-size, var(--hx-font-size-sm, 0.875rem));\n padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))\n var(--hx-badge-padding-x, var(--hx-space-3, 0.75rem));\n }\n\n /* ─── Style Variants ─── */\n\n .badge--primary {\n --hx-badge-bg: var(--hx-color-primary-500, #2563eb);\n --hx-badge-color: var(--hx-color-neutral-0, #ffffff);\n --hx-badge-pulse-color: var(--hx-color-primary-500, #2563eb);\n }\n\n .badge--secondary {\n --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));\n --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #374151));\n --hx-badge-pulse-color: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));\n }\n\n .badge--success {\n --hx-badge-bg: var(--hx-color-success-700, #15803d);\n --hx-badge-color: var(--hx-color-neutral-0, #ffffff);\n --hx-badge-pulse-color: var(--hx-color-success-700, #15803d);\n }\n\n .badge--warning {\n --hx-badge-bg: var(--hx-color-warning-500, #eab308);\n --hx-badge-color: var(--hx-color-neutral-900, #1a1a1a);\n --hx-badge-pulse-color: var(--hx-color-warning-500, #eab308);\n }\n\n .badge--error {\n --hx-badge-bg: var(--hx-color-error-500, #dc2626);\n --hx-badge-color: var(--hx-color-neutral-0, #ffffff);\n --hx-badge-pulse-color: var(--hx-color-error-500, #dc2626);\n }\n\n .badge--neutral {\n --hx-badge-bg: var(--hx-color-neutral-200, #e5e7eb);\n --hx-badge-color: var(--hx-color-neutral-700, #374151);\n --hx-badge-pulse-color: var(--hx-color-neutral-200, #e5e7eb);\n }\n\n .badge--info {\n --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));\n --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));\n --hx-badge-pulse-color: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));\n }\n\n /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */\n /* Visually hidden text prefix for semantic variants (success/warning/error/info). */\n /* Ensures the variant is not conveyed by color alone. */\n\n .badge__variant-label {\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 /* ─── Pill Mode ─── */\n\n .badge--pill {\n border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-full, 9999px));\n }\n\n /* ─── Dot Indicator (empty + pulse) ─── */\n\n .badge--dot {\n width: var(--hx-badge-dot-size, var(--hx-size-2, 0.5rem));\n height: var(--hx-badge-dot-size, var(--hx-size-2, 0.5rem));\n padding: 0;\n border-radius: var(--hx-border-radius-full, 9999px);\n }\n\n /* Guard: hide prefix slot and slotted content in dot mode to prevent overflow */\n .badge--dot ::slotted(*) {\n display: none;\n }\n\n /* ─── Pulse Animation ─── */\n\n @keyframes wc-badge-pulse {\n 0%,\n 100% {\n opacity: 1;\n box-shadow: 0 0 0 0 var(--hx-badge-pulse-color, currentColor);\n }\n 50% {\n opacity: 0.7;\n box-shadow: 0 0 0 4px transparent;\n }\n }\n\n .badge--pulse {\n animation: wc-badge-pulse var(--hx-badge-pulse-duration, var(--hx-duration-slow, 2s))\n var(--hx-badge-pulse-easing, var(--hx-ease-in-out, ease-in-out)) infinite;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .badge--pulse {\n animation: none;\n }\n }\n\n /* ─── Remove Button ─── */\n\n .badge__remove-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: 0;\n margin-inline-start: var(--hx-space-1, 0.25rem);\n cursor: pointer;\n color: inherit;\n opacity: 0.7;\n border-radius: var(--hx-border-radius-sm, 0.125rem);\n line-height: 0;\n }\n\n .badge__remove-button:hover {\n opacity: 1;\n }\n\n .badge__remove-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);\n outline-offset: var(--hx-focus-ring-offset, 1px);\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 { helixBadgeStyles } from './hx-badge.styles.js';\n\n/**\n * A small status indicator for notifications, counts, and labels.\n *\n * @summary Presentational badge for status indicators, notification counts, and labels.\n *\n * @tag hx-badge\n *\n * @slot - Default slot for badge content (text, number). When empty with pulse enabled, renders as a dot indicator.\n * @slot prefix - Icon or content rendered before the badge text.\n *\n * @fires {CustomEvent<void>} hx-remove - Dispatched when the user clicks the remove button.\n *\n * @csspart badge - The badge element.\n * @csspart remove-button - The remove/dismiss button.\n *\n * @cssprop [--hx-badge-bg=var(--hx-color-primary-500)] - Badge background color. The primary override point.\n * @cssprop [--hx-badge-color=var(--hx-color-neutral-0)] - Badge text color. The primary override point.\n * @cssprop [--hx-badge-font-size] - Badge font size (set per size variant).\n * @cssprop [--hx-badge-font-weight=var(--hx-font-weight-semibold)] - Badge font weight.\n * @cssprop [--hx-badge-font-family=var(--hx-font-family-sans)] - Badge font family.\n * @cssprop [--hx-badge-border-radius=var(--hx-border-radius-md)] - Badge border radius.\n * @cssprop [--hx-badge-padding-x] - Badge horizontal padding (set per size variant).\n * @cssprop [--hx-badge-padding-y] - Badge vertical padding (set per size variant).\n * @cssprop [--hx-badge-pulse-color] - Pulse color matching variant background with reduced opacity.\n * @cssprop [--hx-badge-dot-size=var(--hx-size-2)] - Dot indicator size when rendered without content.\n * @cssprop [--hx-badge-secondary-bg=var(--hx-color-neutral-100)] - Background for the secondary variant.\n * @cssprop [--hx-badge-secondary-color=var(--hx-color-neutral-700)] - Text color for the secondary variant.\n * @cssprop [--hx-badge-info-bg=var(--hx-color-info-700)] - Background for the info variant.\n * @cssprop [--hx-badge-info-color=var(--hx-color-neutral-0)] - Text color for the info variant.\n */\n@customElement('hx-badge')\nexport class HelixBadge extends LitElement {\n static override styles = [tokenStyles, helixBadgeStyles];\n\n /**\n * Visual style variant of the badge.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral' | 'info' =\n 'primary';\n\n /**\n * Size of the badge.\n * @attr size\n */\n @property({ type: String, reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether the badge uses fully rounded (pill) styling.\n * @attr pill\n */\n @property({ type: Boolean, reflect: true })\n pill = false;\n\n /**\n * Whether the badge displays an animated pulse for attention.\n * @attr pulse\n */\n @property({ type: Boolean, reflect: true })\n pulse = false;\n\n /**\n * Whether the badge renders a dismiss button.\n * @attr removable\n */\n @property({ type: Boolean, reflect: true })\n removable = false;\n\n /**\n * Numeric count to display. When set, renders the count as badge content.\n * When count exceeds `max`, displays `${max}+` (e.g. `99+`).\n * @attr count\n */\n @property({ type: Number, reflect: true })\n count: number | undefined = undefined;\n\n /**\n * Maximum count value before truncation to `${max}+`. Defaults to 99.\n * @attr max\n */\n @property({ type: Number, reflect: true })\n max = 99;\n\n /**\n * Accessible label for the dot indicator mode (pulse + empty slot).\n * Required for WCAG 4.1.2 compliance when using the dot indicator pattern.\n * Example: `dot-label=\"3 new messages\"`.\n * @attr dot-label\n */\n @property({ type: String, attribute: 'dot-label' })\n dotLabel = '';\n\n /**\n * Accessible label for the remove button. Should describe what is being removed.\n * Defaults to \"Remove\". For better accessibility, include context: e.g. \"Remove Critical badge\".\n * @attr remove-label\n */\n @property({ type: String, attribute: 'remove-label' })\n removeLabel = 'Remove';\n\n /**\n * Tracks whether the default slot has assigned content.\n */\n @state()\n private _hasSlotContent = false;\n\n // ─── Slot Change Handling ───\n\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n // Check if any assigned node has non-whitespace content\n this._hasSlotContent = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) return true;\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent ?? '').trim().length > 0;\n }\n return false;\n });\n }\n\n // ─── Event Handling ───\n\n private _handleRemove(): void {\n this.dispatchEvent(\n new CustomEvent('hx-remove', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // ─── Count Display ───\n\n private get _countDisplay(): string {\n if (this.count === undefined) return '';\n return this.count > this.max ? `${this.max}+` : String(this.count);\n }\n\n // ─── WCAG 1.4.1: Semantic variant label map ───\n // Variants that carry semantic meaning beyond decoration need a non-color cue.\n // Visually-hidden text is prepended so screen reader users and color-blind\n // users get the variant context even when no icon is slotted.\n\n private static readonly _SEMANTIC_VARIANT_LABELS: Partial<Record<HelixBadge['variant'], string>> =\n {\n success: 'Success',\n warning: 'Warning',\n error: 'Error',\n info: 'Info',\n };\n\n private get _semanticVariantLabel(): string {\n return HelixBadge._SEMANTIC_VARIANT_LABELS[this.variant] ?? '';\n }\n\n // ─── Render ───\n\n override render() {\n const hasCount = this.count !== undefined;\n const isDot = !this._hasSlotContent && !hasCount && this.pulse;\n\n const classes = {\n badge: true,\n [`badge--${this.variant}`]: true,\n [`badge--${this.size}`]: true,\n 'badge--pill': this.pill,\n 'badge--pulse': this.pulse,\n 'badge--dot': isDot,\n };\n\n const variantLabel = this._semanticVariantLabel;\n\n return html`\n <span\n part=\"badge\"\n class=${classMap(classes)}\n role=${isDot && this.dotLabel ? 'img' : nothing}\n aria-label=${isDot && this.dotLabel ? this.dotLabel : nothing}\n aria-live=${hasCount ? 'polite' : nothing}\n >\n ${variantLabel\n ? html`<span class=\"badge__variant-label\">${variantLabel}: </span>`\n : nothing}\n <slot name=\"prefix\"></slot>\n ${hasCount ? this._countDisplay : html`<slot @slotchange=${this._handleSlotChange}></slot>`}\n ${this.removable\n ? html`<button\n part=\"remove-button\"\n class=\"badge__remove-button\"\n aria-label=${this.removeLabel}\n @click=${this._handleRemove}\n >\n <svg viewBox=\"0 0 12 12\" aria-hidden=\"true\" width=\"10\" height=\"10\">\n <path\n d=\"M2.22 2.22a.75.75 0 011.06 0L6 4.94l2.72-2.72a.75.75 0 011.06 1.06L7.06 6l2.72 2.72a.75.75 0 01-1.06 1.06L6 7.06 3.28 9.78a.75.75 0 01-1.06-1.06L4.94 6 2.22 3.28a.75.75 0 010-1.06z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>`\n : nothing}\n </span>\n `;\n }\n}\n\n/**\n * @deprecated Use `HelixBadge` instead. This alias will be removed in a future\n * major version as part of the project-wide migration from `Wc` to `Hx` prefixes.\n * @since 0.1.0\n * @removal-target 1.0.0\n */\nexport type WcBadge = HelixBadge;\n\n/** Canonical type alias for the hx-badge component. */\nexport type HxBadge = HelixBadge;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-badge': HelixBadge;\n }\n}\n"],"names":["helixBadgeStyles","css","HelixBadge","LitElement","e","nodes","node","hasCount","isDot","classes","variantLabel","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-breadcrumb-item-Bj2UqhzR.js","sources":["../../src/components/hx-breadcrumb/hx-breadcrumb.styles.ts","../../src/components/hx-breadcrumb/hx-breadcrumb.ts","../../src/components/hx-breadcrumb/hx-breadcrumb-item.styles.ts","../../src/components/hx-breadcrumb/hx-breadcrumb-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixBreadcrumbStyles = css`\n :host {\n display: block;\n font-family: var(\n --hx-breadcrumb-font-family,\n var(--hx-font-family-sans, system-ui, sans-serif)\n );\n font-size: var(--hx-breadcrumb-font-size, var(--hx-font-size-sm, 0.875rem));\n }\n\n [part='nav'] {\n /* nav landmark — no additional styling needed */\n }\n\n [part='list'] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: 0;\n }\n\n /* Hide middle items when collapsed via maxItems */\n ::slotted([data-bc-hidden]) {\n display: none;\n }\n\n /* Visually hide the separator slot — used only to read text content.\n * display:none is intentional: the slot contains no interactive or focusable\n * content. If a future change adds focusable elements to this slot, switch to\n * visibility:hidden + position:absolute to preserve focus reachability. */\n .separator-slot {\n display: none;\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixBreadcrumbStyles } from './hx-breadcrumb.styles.js';\n\n/**\n * Hierarchical page path navigation showing current location in site structure.\n *\n * @summary Navigation breadcrumb showing the page hierarchy. Works with Drupal's breadcrumb system.\n *\n * @tag hx-breadcrumb\n *\n * @slot - Default slot for hx-breadcrumb-item children.\n * @slot separator - Optional separator element. Its text content overrides the `separator` property.\n *\n * @csspart nav - The nav landmark element.\n * @csspart list - The ordered list containing items.\n *\n * @cssprop [--hx-breadcrumb-separator-content='/'] - Separator character between items.\n * NOTE: If overriding this custom property directly in CSS (rather than via the `separator`\n * attribute), the value MUST be quoted: `--hx-breadcrumb-separator-content: \">\"`. An unquoted\n * value is invalid for the CSS `content` property and will silently render nothing.\n * @cssprop [--hx-breadcrumb-separator-color=var(--hx-color-neutral-400)] - Separator color.\n * @cssprop [--hx-breadcrumb-separator-gap=var(--hx-space-1)] - Horizontal gap around separators.\n * @cssprop [--hx-breadcrumb-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-breadcrumb-link-color=var(--hx-color-primary-600)] - Link color.\n * @cssprop [--hx-breadcrumb-link-hover-color=var(--hx-color-primary-700)] - Link hover color.\n * @cssprop [--hx-breadcrumb-text-color=var(--hx-color-neutral-700)] - Current page text color.\n * @cssprop [--hx-breadcrumb-item-max-width] - Max-width for item text truncation (e.g. `12rem`).\n */\n/** Typed schema.org ListItem entry for JSON-LD BreadcrumbList structured data. */\ninterface JsonLdListItem {\n '@type': string;\n position: number;\n name: string;\n item?: string;\n}\n\n/** Breadcrumb navigation component with automatic truncation and JSON-LD structured data. @tag hx-breadcrumb */\n@customElement('hx-breadcrumb')\nexport class HelixBreadcrumb extends LitElement {\n static override styles = [tokenStyles, helixBreadcrumbStyles];\n\n /**\n * Per-instance counter used to generate stable, deterministic IDs for the\n * injected JSON-LD script tags. Deterministic IDs (vs Math.random()) allow\n * SSR frameworks to match server-rendered script tags during hydration.\n */\n private static _instanceCounter = 0;\n\n /**\n * The separator character displayed between breadcrumb items.\n * @attr separator\n */\n @property({ type: String })\n separator = '/';\n\n /**\n * The accessible label for the nav landmark.\n * @attr label\n */\n @property({ type: String })\n label = 'Breadcrumb';\n\n /**\n * Maximum number of items to show before collapsing middle items with an ellipsis.\n * Set to 0 (default) to show all items. The ellipsis is a keyboard-accessible\n * button; activating it expands the full breadcrumb by setting maxItems to 0.\n * @attr max-items\n */\n @property({ type: Number, attribute: 'max-items' })\n maxItems = 0;\n\n /**\n * When true, injects a JSON-LD BreadcrumbList structured data script into the document head.\n *\n * NOTE: Drupal manages `<head>` content via its own render pipeline. Injecting a\n * `<script>` directly via `document.head.appendChild()` in a Drupal context:\n * 1. Bypasses Drupal's deduplication and `hook_html_head_alter()` hook.\n * 2. Is not cacheable by Drupal's page cache.\n * 3. Will be wiped on BigPipe partial page replacements.\n *\n * For Drupal integrations, leave `json-ld` false and use the structured data\n * Twig template instead (see `hx-breadcrumb.twig` in the component directory).\n *\n * @attr json-ld\n */\n @property({ type: Boolean, attribute: 'json-ld' })\n jsonLd = false;\n\n /** @internal */\n private _ellipsisItem: Element | null = null;\n /** @internal */\n private _jsonLdScript: HTMLScriptElement | null = null;\n /** @internal */\n private _boundEllipsisClick: (e: Event) => void = () => undefined;\n /** @internal */\n private _boundEllipsisKeydown: (e: Event) => void = () => undefined;\n\n /**\n * Tracks which items had their `current` attribute set by this component\n * (as opposed to set by a consumer/Drupal template). This lets us re-evaluate\n * positional current-page detection on each slotchange without incorrectly\n * treating a previously component-set `current` attribute as a consumer-set\n * explicit override.\n */\n private readonly _managedCurrentItems = new WeakSet<Element>();\n\n /**\n * Stable per-instance ID used to tag the injected script element so that\n * multiple hx-breadcrumb instances on the same page don't produce conflicting\n * or duplicate structured-data blocks. Each instance owns exactly one script\n * tag identified by this ID; any stale tag from a previous render cycle is\n * removed before a new one is inserted.\n *\n * Uses a static counter (not Math.random()) so IDs are deterministic across\n * server and client renders, enabling SSR hydration matching.\n */\n private readonly _jsonLdId = `hx-breadcrumb-ld-${++HelixBreadcrumb._instanceCounter}`;\n\n // ─── Item Helpers ───\n\n /** Returns only real breadcrumb items, excluding the managed ellipsis element. */\n private _getBreadcrumbItems(slot: HTMLSlotElement): Element[] {\n return slot\n .assignedElements({ flatten: true })\n .filter(\n (el) =>\n el.tagName.toLowerCase() === 'hx-breadcrumb-item' &&\n !el.classList.contains('hx-bc-ellipsis'),\n );\n }\n\n /**\n * Applies aria/state attributes to the item list.\n *\n * Current-page detection: if any item has an explicit `current` attribute\n * (e.g. set by a Drupal Twig template), that item is treated as the current\n * page. Otherwise the last item is the current page (default behaviour).\n *\n * This separation allows Drupal to control current-page marking without\n * relying on item order.\n */\n private _applyItemAttributes(items: Element[]): void {\n // Detect consumer-set 'current' attributes. An item has an explicit consumer\n // current if it has the 'current' attribute AND the component did not set it\n // (tracked via _managedCurrentItems). This prevents component-managed state\n // from being misread as a consumer override on subsequent slotchange events.\n const hasExplicitCurrent = items.some(\n (el) => el.hasAttribute('current') && !this._managedCurrentItems.has(el),\n );\n\n items.forEach((item, i) => {\n const el = item as HTMLElement;\n const isLast = i === items.length - 1;\n\n // Separator hiding: always positional — last item has no trailing separator.\n if (isLast) {\n el.setAttribute('data-bc-last', '');\n } else {\n el.removeAttribute('data-bc-last');\n }\n\n // Current-page marker: explicit consumer attribute wins over positional last.\n // The item component renders aria-current=\"page\" on its inner element\n // based on this attribute (see hx-breadcrumb-item.ts).\n if (!hasExplicitCurrent) {\n if (isLast) {\n el.setAttribute('current', '');\n this._managedCurrentItems.add(el);\n } else {\n el.removeAttribute('current');\n this._managedCurrentItems.delete(el);\n }\n }\n // When hasExplicitCurrent is true, leave 'current' attributes as-is so\n // consumer or Drupal template markup is not overridden.\n });\n }\n\n // ─── Slot Handling ───\n\n private _handleSlotChange(e: Event): void {\n if (!(e.target instanceof HTMLSlotElement)) return;\n const items = this._getBreadcrumbItems(e.target);\n\n // Handle collapse behaviour\n if (this.maxItems > 0 && items.length > this.maxItems) {\n this._applyCollapse(items);\n } else {\n this._removeCollapse(items);\n }\n\n this._applyItemAttributes(items);\n\n if (this.jsonLd) {\n this._updateJsonLd(items);\n }\n }\n\n private _handleSeparatorSlotChange(e: Event): void {\n if (!(e.target instanceof HTMLSlotElement)) return;\n const assigned = e.target.assignedElements({ flatten: true });\n if (assigned.length > 0) {\n const text = (assigned[0] as HTMLElement).textContent?.trim() ?? '';\n this.style.setProperty('--hx-breadcrumb-separator-content', JSON.stringify(text));\n }\n }\n\n // ─── Collapse ───\n\n private _applyCollapse(items: Element[]): void {\n // Show only first and last; hide all middle items\n items.forEach((item, i) => {\n const el = item as HTMLElement;\n if (i === 0 || i === items.length - 1) {\n el.removeAttribute('data-bc-hidden');\n } else {\n el.setAttribute('data-bc-hidden', '');\n }\n });\n\n // Create the ellipsis element once\n if (!this._ellipsisItem) {\n const ellipsis = document.createElement('hx-breadcrumb-item');\n ellipsis.classList.add('hx-bc-ellipsis');\n\n // Keyboard-accessible expand button. Events handled via host-level delegation\n // in _handleEllipsisClick / _handleEllipsisKeydown.\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.textContent = '…';\n btn.setAttribute('aria-label', 'Show all breadcrumb items');\n ellipsis.appendChild(btn);\n\n this._ellipsisItem = ellipsis;\n }\n\n // Insert ellipsis after first item only if not already correctly placed\n const firstItem = items[0];\n if (!firstItem) return;\n if (this._ellipsisItem.previousElementSibling !== firstItem) {\n firstItem.after(this._ellipsisItem);\n }\n }\n\n private _removeCollapse(items: Element[]): void {\n items.forEach((item) => {\n (item as HTMLElement).removeAttribute('data-bc-hidden');\n });\n\n if (this._ellipsisItem?.isConnected) {\n this._ellipsisItem.remove();\n }\n }\n\n private _handleEllipsisClick(e: Event): void {\n if ((e.target as Element)?.closest?.('.hx-bc-ellipsis')) {\n this._expandBreadcrumb();\n }\n }\n\n private _handleEllipsisKeydown(e: Event): void {\n if (!(e instanceof KeyboardEvent)) return;\n if (e.key === 'Enter' || e.key === ' ') {\n if ((e.target as Element)?.closest?.('.hx-bc-ellipsis')) {\n e.preventDefault();\n this._expandBreadcrumb();\n }\n }\n }\n\n /**\n * Expands a collapsed breadcrumb by resetting maxItems to 0.\n * Called by the ellipsis expand button (click or Enter/Space).\n */\n private _expandBreadcrumb(): void {\n this.maxItems = 0;\n // updated() will detect the maxItems change and call _removeCollapse.\n }\n\n // ─── JSON-LD ───\n\n /**\n * JSON-LD ListItem entry with typed fields to avoid Record<string, unknown>.\n */\n private _buildListItem(item: Element, position: number): JsonLdListItem {\n const href = (item as HTMLElement).getAttribute('href');\n const name = (item as HTMLElement).textContent?.trim() ?? '';\n const entry: JsonLdListItem = {\n '@type': 'ListItem',\n position,\n name,\n };\n if (href) entry.item = href;\n return entry;\n }\n\n private _updateJsonLd(items: Element[]): void {\n const schema = {\n '@context': 'https://schema.org',\n '@type': 'BreadcrumbList',\n itemListElement: items.map((item, i) => this._buildListItem(item, i + 1)),\n };\n\n if (!this._jsonLdScript) {\n // Dedup guard: remove any stale script with this instance's ID before\n // creating a fresh one. This handles the edge case where the element was\n // reconnected to the DOM after being disconnected without the script\n // reference being re-established.\n document.getElementById(this._jsonLdId)?.remove();\n\n this._jsonLdScript = document.createElement('script');\n this._jsonLdScript.type = 'application/ld+json';\n this._jsonLdScript.id = this._jsonLdId;\n this._jsonLdScript.setAttribute('data-hx-breadcrumb', '');\n document.head.appendChild(this._jsonLdScript);\n }\n\n this._jsonLdScript.textContent = JSON.stringify(schema);\n }\n\n private _removeJsonLd(): void {\n this._jsonLdScript?.remove();\n this._jsonLdScript = null;\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._boundEllipsisClick = this._handleEllipsisClick.bind(this);\n this._boundEllipsisKeydown = this._handleEllipsisKeydown.bind(this);\n this.addEventListener('click', this._boundEllipsisClick);\n this.addEventListener('keydown', this._boundEllipsisKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('click', this._boundEllipsisClick);\n this.removeEventListener('keydown', this._boundEllipsisKeydown);\n this._removeJsonLd();\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('separator')) {\n // JSON.stringify wraps the string in quotes so the value is valid\n // for use in the CSS `content` property (e.g. '/' becomes '\"/\"').\n this.style.setProperty('--hx-breadcrumb-separator-content', JSON.stringify(this.separator));\n }\n\n if (changedProperties.has('maxItems')) {\n // Re-evaluate collapse state when maxItems changes programmatically\n // (e.g. when the expand button resets maxItems to 0).\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) {\n const items = this._getBreadcrumbItems(slot);\n if (this.maxItems > 0 && items.length > this.maxItems) {\n this._applyCollapse(items);\n } else {\n this._removeCollapse(items);\n }\n this._applyItemAttributes(items);\n }\n }\n\n if (changedProperties.has('jsonLd')) {\n if (this.jsonLd) {\n // json-ld toggled on after initial render — inject script immediately.\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) {\n this._updateJsonLd(this._getBreadcrumbItems(slot));\n }\n } else {\n // json-ld toggled off — remove existing script.\n this._removeJsonLd();\n }\n }\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <nav part=\"nav\" aria-label=${this.label}>\n <ol part=\"list\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </ol>\n </nav>\n <slot\n name=\"separator\"\n class=\"separator-slot\"\n @slotchange=${this._handleSeparatorSlotChange}\n ></slot>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-breadcrumb': HelixBreadcrumb;\n }\n}\n","import { css } from 'lit';\n\nexport const helixBreadcrumbItemStyles = css`\n :host {\n display: inline-flex;\n align-items: center;\n }\n\n /*\n * display: contents removes [part='item'] from the box model entirely.\n * This is intentional — the wrapper exists only for slot selection purposes.\n * Consumers using ::part(item) CANNOT apply box-model properties (padding,\n * margin, background, border) to this part. Use ::part(link) or ::part(text)\n * for visual styling of breadcrumb item content.\n */\n [part='item'] {\n display: contents;\n }\n\n [part='link'] {\n color: var(--hx-breadcrumb-link-color, var(--hx-color-primary-600));\n text-decoration: none;\n cursor: pointer;\n font-family: inherit;\n font-size: inherit;\n max-width: var(--hx-breadcrumb-item-max-width);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n [part='link']:hover {\n color: var(--hx-breadcrumb-link-hover-color, var(--hx-color-primary-700));\n text-decoration: underline;\n }\n\n [part='link']:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-breadcrumb-link-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.125rem);\n }\n\n [part='text'] {\n color: var(--hx-breadcrumb-text-color, var(--hx-color-neutral-700));\n font-family: inherit;\n font-size: inherit;\n max-width: var(--hx-breadcrumb-item-max-width);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .separator {\n margin-inline: var(--hx-breadcrumb-separator-gap, var(--hx-space-1, 0.25rem));\n color: var(--hx-breadcrumb-separator-color, var(--hx-color-neutral-400));\n user-select: none;\n }\n\n .separator::before {\n content: var(--hx-breadcrumb-separator-content, '/');\n }\n\n /* Normalize buttons slotted into breadcrumb items (e.g. the expand-ellipsis button). */\n ::slotted(button) {\n background: none;\n border: none;\n cursor: pointer;\n font: inherit;\n color: inherit;\n padding: 0;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixBreadcrumbItemStyles } from './hx-breadcrumb-item.styles.js';\n\n/**\n * A single breadcrumb navigation item.\n *\n * @summary A navigation item within an hx-breadcrumb component. Renders as a link when `href` is\n * provided, or as static text for the current page item. The current page item is determined by\n * the `current` attribute (set explicitly or automatically by the parent `hx-breadcrumb`).\n *\n * @tag hx-breadcrumb-item\n *\n * @slot - The link or page text content. Accepts text, HTML, or icon elements.\n *\n * @csspart item - Wrapper around the link or text content.\n * @csspart link - The anchor element when href is provided (non-current items only).\n * @csspart text - The span element for the current page or items without href.\n * @csspart separator - The separator element rendered after non-last items.\n *\n * @cssprop [--hx-breadcrumb-link-color=var(--hx-color-primary-600)] - Link text color.\n * @cssprop [--hx-breadcrumb-link-hover-color=var(--hx-color-primary-700)] - Link hover text color.\n * @cssprop [--hx-breadcrumb-text-color=var(--hx-color-neutral-700)] - Current page text color.\n * @cssprop [--hx-breadcrumb-separator-content='/'] - Separator character displayed after non-last items.\n * @cssprop [--hx-breadcrumb-separator-color=var(--hx-color-neutral-400)] - Separator color.\n * @cssprop [--hx-breadcrumb-separator-gap=var(--hx-space-1)] - Horizontal margin around separator.\n * @cssprop [--hx-breadcrumb-item-max-width] - Optional max-width for text truncation.\n */\n@customElement('hx-breadcrumb-item')\nexport class HelixBreadcrumbItem extends LitElement {\n static override styles = [tokenStyles, helixBreadcrumbItemStyles];\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Only apply role=\"listitem\" when this item is a direct child of an\n // hx-breadcrumb element. Setting the role unconditionally when used\n // standalone (outside a list context) creates an invalid ARIA hierarchy\n // because listitem requires a list ancestor.\n //\n // IMPORTANT: If programmatically creating an ellipsis element, set aria-hidden\n // BEFORE inserting into the DOM. connectedCallback fires on insertion and sets\n // role=\"listitem\"; setting aria-hidden after would momentarily expose an\n // un-hidden listitem to the accessibility tree.\n if (this.closest('hx-breadcrumb') !== null) {\n this.setAttribute('role', 'listitem');\n } else {\n this.removeAttribute('role');\n }\n }\n\n /**\n * The URL for this breadcrumb link. Omit for the current page item.\n * When `current` is true, this attribute is ignored and the item always\n * renders as static text per WAI-ARIA APG breadcrumb guidance.\n * @attr href\n */\n @property({ type: String, reflect: true })\n href: string | undefined = undefined;\n\n /**\n * Whether this is the last item in the breadcrumb trail. Set by the parent\n * hx-breadcrumb component via the `data-bc-last` boolean attribute. When\n * present the trailing separator is hidden.\n *\n * @attr data-bc-last\n * @internal\n */\n @property({ type: Boolean, attribute: 'data-bc-last', reflect: true })\n dataBcLast = false;\n\n /**\n * Marks this item as the current page. When set, the item always renders as\n * static text (never a navigable link) and `aria-current=\"page\"` is placed on\n * the inner text element per WAI-ARIA APG breadcrumb guidance, yielding the\n * canonical AT announcement (\"current page, Patient Records\").\n *\n * Can be set explicitly by consumers (e.g. Drupal Twig templates) to override\n * the default positional last-item detection in `hx-breadcrumb`. When any item\n * in the breadcrumb has an explicit `current` attribute, the parent will not\n * override it.\n *\n * @attr current\n */\n @property({ type: Boolean, reflect: true })\n current = false;\n\n override render() {\n // Per WAI-ARIA APG, the current page item MUST NOT be a navigable link.\n // aria-current=\"page\" is placed on the inner element (not the listitem host)\n // for canonical AT announcement (\"current page, Patient Records\" vs\n // \"current page, list item\").\n return html`\n <span part=\"item\">\n ${this.current\n ? html`<span part=\"text\" aria-current=\"page\"><slot></slot></span>`\n : this.href\n ? html`<a part=\"link\" href=${this.href}><slot></slot></a>`\n : html`<span part=\"text\"><slot></slot></span>`}\n </span>\n ${!this.dataBcLast\n ? html`<span class=\"separator\" part=\"separator\" aria-hidden=\"true\"></span>`\n : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-breadcrumb-item': HelixBreadcrumbItem;\n }\n}\n"],"names":["helixBreadcrumbStyles","css","HelixBreadcrumb","LitElement","slot","el","items","hasExplicitCurrent","item","isLast","assigned","text","_a","ellipsis","btn","firstItem","_b","position","href","name","entry","schema","i","changedProperties","html","tokenStyles","__decorateClass","property","customElement","helixBreadcrumbItemStyles","HelixBreadcrumbItem","nothing"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-button-Cbhqpm5i.js","sources":["../../src/components/hx-button/hx-button.styles.ts","../../src/components/hx-button/hx-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n :host([full]) {\n display: block;\n width: 100%;\n }\n\n :host([full]) .button {\n width: 100%;\n justify-content: center;\n }\n\n /* ─── Base Button ─── */\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-button-border-color, transparent);\n border-radius: var(--hx-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-button-bg, var(--hx-color-primary-500, #2563eb));\n color: var(--hx-button-color, var(--hx-color-neutral-0, #ffffff));\n font-family: var(--hx-button-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-button-font-weight, var(--hx-font-weight-semibold, 600));\n line-height: var(--hx-line-height-tight, 1.25);\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n text-decoration: none;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .button:hover {\n filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n }\n\n .button:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Size Variants ─── */\n\n .button--sm {\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n min-height: var(--hx-size-8, 2rem);\n }\n\n .button--md {\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n font-size: var(--hx-font-size-md, 1rem);\n min-height: var(--hx-size-10, 2.5rem);\n }\n\n .button--lg {\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);\n font-size: var(--hx-font-size-lg, 1.125rem);\n min-height: var(--hx-size-12, 3rem);\n }\n\n /* ─── Style Variants ─── */\n\n .button--primary {\n --hx-button-bg: var(--hx-color-primary-500);\n --hx-button-color: var(--hx-color-neutral-0);\n --hx-button-border-color: transparent;\n }\n\n .button--secondary {\n --hx-button-bg: transparent;\n --hx-button-color: var(--hx-color-primary-500);\n --hx-button-border-color: var(--hx-color-primary-500);\n }\n\n .button--secondary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-50));\n }\n\n .button--tertiary {\n --hx-button-bg: var(--hx-color-neutral-100);\n --hx-button-color: var(--hx-color-neutral-900);\n --hx-button-border-color: transparent;\n }\n\n .button--tertiary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-200));\n }\n\n .button--danger {\n --hx-button-bg: var(--hx-color-error-500);\n --hx-button-color: var(--hx-color-neutral-0);\n --hx-button-border-color: transparent;\n }\n\n .button--danger:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600));\n }\n\n .button--ghost {\n --hx-button-bg: transparent;\n --hx-button-color: var(--hx-color-primary-500);\n --hx-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-100));\n }\n\n .button--outline {\n --hx-button-bg: transparent;\n --hx-button-color: var(--hx-color-neutral-900);\n --hx-button-border-color: var(--hx-color-neutral-300);\n }\n\n .button--outline:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-50));\n }\n\n .button--primary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-500));\n }\n\n /* ─── Disabled ─── */\n\n /* Note: opacity is applied on :host([disabled]) above — do NOT add opacity here.\n Stacking opacity on both :host and .button[disabled] would multiply to 0.25. */\n .button[disabled] {\n cursor: not-allowed;\n }\n\n /* ─── Loading State ─── */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button__spinner {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n animation: hx-spin var(--hx-duration-spinner, 750ms) linear infinite;\n }\n\n @keyframes hx-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .button__spinner {\n animation: none;\n opacity: var(--hx-opacity-muted, 0.6);\n }\n }\n\n /* ─── Inverted Mode ─── */\n\n /* Override text color and filter-based hover/active for all variants */\n :host([inverted]) .button {\n color: var(--hx-button-inverted-color, #ffffff);\n filter: none;\n }\n\n :host([inverted]) .button:hover {\n filter: none;\n }\n\n :host([inverted]) .button:active {\n filter: none;\n }\n\n :host([inverted]) .button:focus-visible {\n outline-color: var(--hx-button-inverted-focus-ring-color, rgba(255, 255, 255, 0.5));\n }\n\n /* Primary inverted — slight transparent white overlay on hover */\n :host([inverted]) .button--primary:hover {\n --hx-button-bg: var(--hx-color-primary-400, #3b82f6);\n }\n\n /* Secondary inverted — white border and text */\n :host([inverted]) .button--secondary {\n --hx-button-border-color: rgba(255, 255, 255, 0.7);\n }\n\n :host([inverted]) .button--secondary:hover {\n --hx-button-bg: rgba(255, 255, 255, 0.15);\n }\n\n /* Tertiary inverted */\n :host([inverted]) .button--tertiary {\n --hx-button-bg: rgba(255, 255, 255, 0.15);\n --hx-button-border-color: transparent;\n }\n\n :host([inverted]) .button--tertiary:hover {\n --hx-button-bg: rgba(255, 255, 255, 0.25);\n }\n\n /* Ghost inverted — transparent base, white hover bg */\n :host([inverted]) .button--ghost {\n --hx-button-bg: transparent;\n --hx-button-border-color: transparent;\n }\n\n :host([inverted]) .button--ghost:hover {\n --hx-button-bg: var(--hx-button-inverted-ghost-hover-bg, rgba(255, 255, 255, 0.15));\n }\n\n /* Outline inverted — white border */\n :host([inverted]) .button--outline {\n --hx-button-border-color: rgba(255, 255, 255, 0.7);\n }\n\n :host([inverted]) .button--outline:hover {\n --hx-button-bg: rgba(255, 255, 255, 0.15);\n }\n\n /* ─── Prefix / Suffix / Label ─── */\n\n .button__prefix,\n .button__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .button__label {\n flex: 1 1 auto;\n }\n`;\n","import { LitElement, html, nothing, type TemplateResult } 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 { helixButtonStyles } from './hx-button.styles.js';\n\n/**\n * A production-grade button component for user interaction. Supports multiple\n * visual variants, sizes, loading state, prefix/suffix slots, anchor rendering,\n * and full ElementInternals form association.\n *\n * @summary Primary interactive element for triggering actions and form submission.\n *\n * @tag hx-button\n *\n * @slot - Default slot for button label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n * the button is clicked and is neither disabled nor loading.\n *\n * @csspart button - The native button or anchor element.\n * @csspart label - The label text wrapper span.\n * @csspart prefix - The prefix slot container span.\n * @csspart suffix - The suffix slot container span.\n * @csspart spinner - The loading spinner SVG element.\n *\n * @cssprop [--hx-button-bg=var(--hx-color-primary-500)] - Button background color.\n * @cssprop [--hx-button-hover-bg] - Hover background color override. When set, overrides the variant default hover background from outside the shadow DOM.\n * @cssprop [--hx-button-color=var(--hx-color-neutral-0)] - Button text color.\n * @cssprop [--hx-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n *\n * @cssprop [--hx-button-inverted-color=#ffffff] - Text color when inverted.\n * @cssprop [--hx-button-inverted-ghost-hover-bg=rgba(255,255,255,0.15)] - Ghost hover bg when inverted.\n * @cssprop [--hx-button-inverted-focus-ring-color=rgba(255,255,255,0.5)] - Focus ring color when inverted.\n */\n@customElement('hx-button')\nexport class HelixButton extends LitElement {\n static override styles = [tokenStyles, helixButtonStyles];\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 // ─── Public Properties ───\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' | 'outline' = 'primary';\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 * Whether the button is disabled. Prevents all interaction and form actions.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the button is in a loading state. Shows spinner, prevents interaction,\n * and sets aria-busy. Does not set the disabled attribute.\n * @attr loading\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * The type attribute for the underlying button element. Ignored when href is set.\n * @attr type\n */\n @property({ type: String })\n type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * When set, renders an anchor element instead of a button.\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * Anchor target attribute. Only used when href is set.\n * @attr target\n */\n @property({ type: String })\n target: string | undefined = undefined;\n\n /**\n * Form field name submitted via ElementInternals.setFormValue on submit.\n * @attr name\n */\n @property({ type: String })\n name: string | undefined = undefined;\n\n /**\n * Form field value submitted via ElementInternals.setFormValue on submit.\n * @attr value\n */\n @property({ type: String })\n value: string | undefined = undefined;\n\n /**\n * When true, the button stretches to fill its container width.\n * Sets the host to `display: block` and the inner element to `width: 100%`.\n * @attr full\n */\n @property({ type: Boolean, reflect: true })\n full = false;\n\n /**\n * When true, flips button colors for placement on dark or gradient backgrounds.\n * Forces text to white and adjusts hover/focus ring colors across all variants.\n * @attr inverted\n */\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n /**\n * Accessible label forwarded to the inner button/anchor. Required for icon-only usage.\n * @attr aria-label\n */\n @property({ type: String, reflect: true, attribute: 'aria-label' })\n override ariaLabel: string | null = null;\n\n // ─── Form API ───\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 */\n private _handleClick(e: MouseEvent): void {\n if (this.disabled || this.loading) {\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 anchor mode\n if (this.href === undefined && this.type === 'submit' && this._internals.form) {\n if (this.name !== undefined && this.value !== undefined) {\n this._internals.setFormValue(this.value);\n }\n this._internals.form.requestSubmit();\n } else if (this.href === undefined && this.type === 'reset' && this._internals.form) {\n this._internals.form.reset();\n }\n }\n\n // ─── Render Helpers ───\n\n /** @private */\n private _renderSpinner(): TemplateResult {\n return html`\n <svg\n class=\"button__spinner\"\n part=\"spinner\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <circle\n class=\"button__spinner-track\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n opacity=\"0.3\"\n />\n <path\n class=\"button__spinner-arc\"\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 */\n private _renderInner(): TemplateResult {\n return html`\n ${this.loading ? this._renderSpinner() : nothing}\n <span part=\"prefix\" class=\"button__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot></slot>\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n button: true,\n [`button--${this.variant}`]: true,\n [`button--${this.size}`]: true,\n 'button--loading': this.loading,\n };\n\n if (this.href !== undefined) {\n return html`\n <a\n part=\"button\"\n class=${classMap(classes)}\n href=${this.disabled || this.loading ? nothing : ifDefined(this.href)}\n target=${ifDefined(this.target)}\n rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\n aria-label=${this.ariaLabel ?? nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n @click=${this._handleClick}\n >\n ${this._renderInner()}\n </a>\n `;\n }\n\n return html`\n <button\n part=\"button\"\n class=${classMap(classes)}\n ?disabled=${this.disabled}\n type=${this.type}\n aria-label=${this.ariaLabel ?? nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n @click=${this._handleClick}\n >\n ${this._renderInner()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-button': HelixButton;\n }\n}\n"],"names":["helixButtonStyles","css","HelixButton","LitElement","e","html","nothing","classes","classMap","ifDefined","tokenStyles","__decorateClass","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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACyC1B,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EAS1C,cAAc;AACZ,UAAA,GAWF,KAAA,UAAiF,WAOjF,KAAA,OAA2B,MAO3B,KAAA,WAAW,IAQX,KAAA,UAAU,IAOV,KAAA,OAAsC,UAOtC,KAAA,OAA2B,QAO3B,KAAA,SAA6B,QAO7B,KAAA,OAA2B,QAO3B,KAAA,QAA4B,QAQ5B,KAAA,OAAO,IAQP,KAAA,WAAW,IAOX,KAAS,YAA2B,MA1FlC,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA;AAAA;AAAA,EA8FA,IAAI,OAA+B;AACjC,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA;AAAA,EAKQ,aAAaC,GAAqB;AACxC,QAAI,KAAK,YAAY,KAAK,SAAS;AACjC,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAMA,SAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,eAAeA,EAAA;AAAA,MAAE,CAC5B;AAAA,IAAA,GAIC,KAAK,SAAS,UAAa,KAAK,SAAS,YAAY,KAAK,WAAW,QACnE,KAAK,SAAS,UAAa,KAAK,UAAU,UAC5C,KAAK,WAAW,aAAa,KAAK,KAAK,GAEzC,KAAK,WAAW,KAAK,cAAA,KACZ,KAAK,SAAS,UAAa,KAAK,SAAS,WAAW,KAAK,WAAW,QAC7E,KAAK,WAAW,KAAK,MAAA;AAAA,EAEzB;AAAA;AAAA;AAAA,EAKQ,iBAAiC;AACvC,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BT;AAAA;AAAA,EAGQ,eAA+B;AACrC,WAAOA;AAAA,QACH,KAAK,UAAU,KAAK,eAAA,IAAmBC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWpD;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,QAAQ;AAAA,MACR,CAAC,WAAW,KAAK,OAAO,EAAE,GAAG;AAAA,MAC7B,CAAC,WAAW,KAAK,IAAI,EAAE,GAAG;AAAA,MAC1B,mBAAmB,KAAK;AAAA,IAAA;AAG1B,WAAI,KAAK,SAAS,SACTF;AAAA;AAAA;AAAA,kBAGKG,EAASD,CAAO,CAAC;AAAA,iBAClB,KAAK,YAAY,KAAK,UAAUD,IAAUG,EAAU,KAAK,IAAI,CAAC;AAAA,mBAC5DA,EAAU,KAAK,MAAM,CAAC;AAAA,gBACzB,KAAK,WAAW,WAAW,wBAAwBH,CAAO;AAAA,uBACnD,KAAK,aAAaA,CAAO;AAAA,0BACtB,KAAK,WAAW,SAASA,CAAO;AAAA,sBACpC,KAAK,UAAU,SAASA,CAAO;AAAA,mBAClC,KAAK,YAAY;AAAA;AAAA,YAExB,KAAK,cAAc;AAAA;AAAA,UAKpBD;AAAA;AAAA;AAAA,gBAGKG,EAASD,CAAO,CAAC;AAAA,oBACb,KAAK,QAAQ;AAAA,eAClB,KAAK,IAAI;AAAA,qBACH,KAAK,aAAaD,CAAO;AAAA,oBAC1B,KAAK,UAAU,SAASA,CAAO;AAAA,iBAClC,KAAK,YAAY;AAAA;AAAA,UAExB,KAAK,cAAc;AAAA;AAAA;AAAA,EAG3B;AACF;AAzOaJ,EACK,SAAS,CAACQ,GAAaV,CAAiB;AAD7CE,EAKJ,iBAAiB;AAgBxBS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApB9BV,EAqBX,WAAA,WAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GA3BpDV,EA4BX,WAAA,QAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlC/BV,EAmCX,WAAA,YAAA,CAAA;AAQAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1C/BV,EA2CX,WAAA,WAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjDfV,EAkDX,WAAA,QAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxDfV,EAyDX,WAAA,QAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/DfV,EAgEX,WAAA,UAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtEfV,EAuEX,WAAA,QAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7EfV,EA8EX,WAAA,SAAA,CAAA;AAQAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArF/BV,EAsFX,WAAA,QAAA,CAAA;AAQAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA7F/BV,EA8FX,WAAA,YAAA,CAAA;AAOSS,EAAA;AAAA,EADRC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,cAAc;AAAA,GApGvDV,EAqGF,WAAA,aAAA,CAAA;AArGEA,IAANS,EAAA;AAAA,EADNE,EAAc,WAAW;AAAA,GACbX,CAAA;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-card-B9j2SHyI.js","sources":["../../src/components/hx-card/hx-card.styles.ts","../../src/components/hx-card/hx-card.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCardStyles = css`\n :host {\n display: block;\n color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));\n background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));\n }\n\n .card {\n display: flex;\n flex-direction: column;\n gap: var(--hx-card-gap, var(--hx-space-4, 1rem));\n background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));\n color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));\n border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));\n overflow: hidden;\n font-family: var(--hx-font-family-sans, sans-serif);\n transition:\n box-shadow var(--hx-transition-normal, 250ms ease),\n transform var(--hx-transition-normal, 250ms ease);\n }\n\n /* ─── Elevation Variants ─── */\n\n .card--flat {\n box-shadow: none;\n }\n\n .card--raised {\n box-shadow: var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));\n }\n\n .card--floating {\n box-shadow: var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));\n }\n\n /* ─── Style Variants ─── */\n\n .card--default {\n /* Default styling — uses base styles */\n }\n\n .card--featured {\n border-color: var(--hx-color-primary-500, #2563eb);\n border-width: var(--hx-border-width-medium, 2px);\n }\n\n .card--compact .card__body {\n padding: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__heading {\n padding-top: var(--hx-space-3, 0.75rem);\n padding-right: var(--hx-space-3, 0.75rem);\n padding-left: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__footer {\n padding-right: var(--hx-space-3, 0.75rem);\n padding-bottom: var(--hx-space-3, 0.75rem);\n padding-left: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__actions {\n padding-right: var(--hx-space-3, 0.75rem);\n padding-bottom: var(--hx-space-3, 0.75rem);\n padding-left: var(--hx-space-3, 0.75rem);\n }\n\n /* ─── Interactive ─── */\n\n .card--interactive {\n cursor: pointer;\n }\n\n .card--interactive:hover {\n box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));\n transform: translateY(var(--hx-lift-md, -2px));\n }\n\n .card--interactive:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .card--interactive:active {\n transform: translateY(0);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .card {\n transition: none;\n }\n\n .card--interactive:hover {\n transform: none;\n }\n\n .card--interactive:active {\n transform: none;\n }\n }\n\n /* ─── Hidden empty slot wrappers ─── */\n\n [hidden] {\n display: none !important;\n }\n\n /* ─── Sections ─── */\n\n .card__image {\n overflow: hidden;\n line-height: 0;\n }\n\n .card__image ::slotted(img) {\n width: 100%;\n aspect-ratio: var(--hx-card-image-aspect-ratio, 16 / 9);\n display: block;\n object-fit: cover;\n }\n\n .card__heading {\n padding-top: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: 0;\n padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n font-size: var(--hx-font-size-xl, 1.25rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n line-height: var(--hx-line-height-tight, 1.25);\n }\n\n .card__body {\n padding: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n flex: 1;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n color: var(--hx-color-neutral-600, #495057);\n }\n\n .card__footer {\n padding-top: 0;\n padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n }\n\n .card__actions {\n display: flex;\n gap: var(--hx-space-2, 0.5rem);\n padding-top: var(--hx-space-4, 1rem);\n padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));\n margin-top: auto;\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 { helixCardStyles } from './hx-card.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A flexible card component for displaying grouped content.\n *\n * @summary Content container with image, heading, body, footer, and action slots.\n *\n * @tag hx-card\n *\n * @slot image - Optional image or media content at the top of the card.\n * @slot heading - The card heading/title content. Use a semantic heading element (h2, h3, etc.) for proper accessibility.\n * @slot - Default slot for the card body content.\n * @slot footer - Optional footer content below the body.\n * @slot actions - Optional action buttons, rendered with a top border separator. Do NOT use together with hx-href (interactive card + focusable actions is an ARIA anti-pattern).\n *\n * @fires {CustomEvent<{href: string, originalEvent: MouseEvent | KeyboardEvent}>} hx-click - Dispatched when an interactive card (with hx-href) is clicked.\n *\n * @csspart card - The outer card container element.\n * @csspart image - The image slot container.\n * @csspart heading - The heading slot container.\n * @csspart body - The body slot container.\n * @csspart footer - The footer slot container.\n * @csspart actions - The actions slot container.\n *\n * @cssprop [--hx-card-bg=var(--hx-color-neutral-0)] - Card background color.\n * @cssprop [--hx-card-color=var(--hx-color-neutral-800)] - Card text color.\n * @cssprop [--hx-card-border-color=var(--hx-color-neutral-200)] - Card border color.\n * @cssprop [--hx-card-border-radius=var(--hx-border-radius-lg)] - Card border radius.\n * @cssprop [--hx-card-padding=var(--hx-space-6)] - Internal padding for card sections.\n * @cssprop [--hx-card-gap=var(--hx-space-4)] - Gap between card sections.\n * @cssprop [--hx-card-image-aspect-ratio=16/9] - Aspect ratio for the image slot.\n */\n@customElement('hx-card')\nexport class HelixCard extends LitElement {\n /** Enable delegatesFocus so :focus on the host works when the inner card div has focus. */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static override styles = [tokenStyles, helixCardStyles];\n\n /**\n * Visual style variant of the card.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'featured' | 'compact' = 'default';\n\n /**\n * Elevation (shadow depth) of the card.\n * @attr elevation\n */\n @property({ type: String, reflect: true })\n elevation: 'flat' | 'raised' | 'floating' = 'flat';\n\n /**\n * Optional URL. When set, the card becomes interactive (clickable)\n * and navigates to this URL on click.\n * Uses hx-href to avoid conflicting with the native HTML href attribute.\n * @attr hx-href\n */\n @property({ type: String, attribute: 'hx-href' })\n hxHref: string | undefined = undefined;\n\n /**\n * Accessible label for interactive cards. Use this to provide a meaningful\n * description of the card's purpose rather than exposing the raw URL.\n * Only applies when hx-href is set.\n * @attr hx-aria-label\n */\n @property({ type: String, attribute: 'hx-aria-label' })\n hxAriaLabel: string | undefined = undefined;\n\n // ─── Slot Detection ───\n\n /**\n * Tracks whether any content is assigned to the image slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasImage = false;\n\n /**\n * Tracks whether any content is assigned to the heading slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasHeading = false;\n\n /**\n * Tracks whether any content is assigned to the footer slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasFooter = false;\n\n /**\n * Tracks whether any content is assigned to the actions slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasActions = false;\n\n private _onImageSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasImage = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _onHeadingSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHeading = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _onFooterSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _onActionsSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasActions = slot.assignedNodes({ flatten: true }).length > 0;\n if (this._hasActions && this.hxHref) {\n devWarn(\n 'hx-card',\n 'Using hx-href (interactive card) together with the actions slot is an ARIA anti-pattern: ' +\n 'interactive controls cannot be nested inside role=\"link\". ' +\n 'Use either hx-href or the actions slot, not both.',\n );\n }\n }\n\n override updated(changedProperties: Map<PropertyKey, unknown>): void {\n super.updated(changedProperties);\n // WCAG 4.1.2: interactive cards (with hx-href) must have an accessible name\n if (\n (changedProperties.has('hxHref') || changedProperties.has('hxAriaLabel')) &&\n this.hxHref &&\n !this.hxAriaLabel\n ) {\n devWarn(\n 'hx-card',\n \"Interactive card (hx-href is set) is missing an accessible name. Set `hx-aria-label` to describe the card's destination or purpose (WCAG 4.1.2).\",\n );\n }\n }\n\n // ─── Event Handling ───\n\n private _dispatchCardClick(originalEvent: MouseEvent | KeyboardEvent): void {\n if (!this.hxHref) return;\n\n /**\n * Dispatched when an interactive card is clicked.\n * Includes the target href in the detail.\n * @event hx-click\n */\n this.dispatchEvent(\n new CustomEvent<{ href: string; originalEvent: MouseEvent | KeyboardEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { href: this.hxHref, originalEvent },\n }),\n );\n }\n\n private _handleClick(e: MouseEvent): void {\n this._dispatchCardClick(e);\n }\n\n private _handleKeyDown(e: KeyboardEvent): void {\n if (!this.hxHref) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this._dispatchCardClick(e);\n }\n }\n\n // ─── Render ───\n\n override render() {\n const isInteractive = !!this.hxHref;\n\n const classes = {\n card: true,\n [`card--${this.variant}`]: true,\n [`card--${this.elevation}`]: true,\n 'card--interactive': isInteractive,\n };\n\n return html`\n <div\n part=\"card\"\n class=${classMap(classes)}\n role=${isInteractive ? 'link' : nothing}\n tabindex=${isInteractive ? '0' : nothing}\n aria-label=${isInteractive && this.hxAriaLabel ? this.hxAriaLabel : nothing}\n @click=${this._handleClick}\n @keydown=${this._handleKeyDown}\n >\n <div class=\"card__image\" part=\"image\" ?hidden=${!this._hasImage}>\n <slot name=\"image\" @slotchange=${this._onImageSlotChange}></slot>\n </div>\n\n <div class=\"card__heading\" part=\"heading\" ?hidden=${!this._hasHeading}>\n <slot name=\"heading\" @slotchange=${this._onHeadingSlotChange}></slot>\n </div>\n\n <div class=\"card__body\" part=\"body\">\n <slot></slot>\n </div>\n\n <div class=\"card__footer\" part=\"footer\" ?hidden=${!this._hasFooter}>\n <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n </div>\n\n <div class=\"card__actions\" part=\"actions\" ?hidden=${!this._hasActions}>\n <slot name=\"actions\" @slotchange=${this._onActionsSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-card': HelixCard;\n }\n}\n"],"names":["helixCardStyles","css","HelixCard","LitElement","e","slot","changedProperties","originalEvent","isInteractive","classes","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
|