luxen-ui 0.22.0 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/cli.mjs +1 -1
- package/cdn/chunks/decorate.js +1 -1
- package/cdn/chunks/decorate.js.map +1 -1
- package/cdn/chunks/directive.js.map +1 -1
- package/cdn/chunks/floating-ui.dom.js +1 -1
- package/cdn/chunks/floating-ui.dom.js.map +1 -1
- package/cdn/chunks/iconify-icon.js +1 -1
- package/cdn/chunks/iconify-icon.js.map +1 -1
- package/cdn/chunks/lit-html.js +1 -1
- package/cdn/chunks/lit-html.js.map +1 -1
- package/cdn/chunks/lit.js.map +1 -1
- package/cdn/chunks/map.js.map +1 -1
- package/cdn/chunks/picker.js +2 -2
- package/cdn/chunks/picker.js.map +1 -1
- package/cdn/chunks/query.js +2 -0
- package/cdn/chunks/query.js.map +1 -0
- package/cdn/chunks/static-html.js +1 -1
- package/cdn/chunks/static-html.js.map +1 -1
- package/cdn/chunks/unsafe-html.js.map +1 -1
- package/cdn/color-scheme.d.ts.map +1 -1
- package/cdn/color-scheme.js +1 -1
- package/cdn/color-scheme.js.map +1 -1
- package/cdn/custom-elements.json +47 -3
- package/cdn/define.d.ts +1 -1
- package/cdn/define.js.map +1 -1
- package/cdn/elements/alert/alert.d.ts +2 -1
- package/cdn/elements/alert/alert.d.ts.map +1 -1
- package/cdn/elements/alert/alert.js +1 -1
- package/cdn/elements/alert/alert.js.map +1 -1
- package/cdn/elements/alert/index.js.map +1 -1
- package/cdn/elements/alert-dialog/alert-dialog.d.ts +4 -3
- package/cdn/elements/alert-dialog/alert-dialog.d.ts.map +1 -1
- package/cdn/elements/alert-dialog/alert-dialog.js +5 -5
- package/cdn/elements/alert-dialog/alert-dialog.js.map +1 -1
- package/cdn/elements/alert-dialog/index.js.map +1 -1
- package/cdn/elements/avatar/avatar.d.ts +2 -2
- package/cdn/elements/avatar/avatar.d.ts.map +1 -1
- package/cdn/elements/avatar/avatar.js +8 -8
- package/cdn/elements/avatar/avatar.js.map +1 -1
- package/cdn/elements/avatar/index.js.map +1 -1
- package/cdn/elements/badge/badge.d.ts.map +1 -1
- package/cdn/elements/badge/badge.js +1 -1
- package/cdn/elements/badge/badge.js.map +1 -1
- package/cdn/elements/badge/index.js.map +1 -1
- package/cdn/elements/button-group/button-group.d.ts.map +1 -1
- package/cdn/elements/button-group/button-group.js +1 -1
- package/cdn/elements/button-group/button-group.js.map +1 -1
- package/cdn/elements/button-group/index.js.map +1 -1
- package/cdn/elements/carousel/carousel.d.ts +6 -6
- package/cdn/elements/carousel/carousel.d.ts.map +1 -1
- package/cdn/elements/carousel/carousel.js +4 -4
- package/cdn/elements/carousel/carousel.js.map +1 -1
- package/cdn/elements/carousel/index.js.map +1 -1
- package/cdn/elements/carousel-item/carousel-item.d.ts +2 -2
- package/cdn/elements/carousel-item/carousel-item.d.ts.map +1 -1
- package/cdn/elements/carousel-item/carousel-item.js.map +1 -1
- package/cdn/elements/carousel-item/index.js.map +1 -1
- package/cdn/elements/color-scheme-icon/color-scheme-icon.d.ts +3 -3
- package/cdn/elements/color-scheme-icon/color-scheme-icon.d.ts.map +1 -1
- package/cdn/elements/color-scheme-icon/color-scheme-icon.js +2 -2
- package/cdn/elements/color-scheme-icon/color-scheme-icon.js.map +1 -1
- package/cdn/elements/color-scheme-icon/index.js.map +1 -1
- package/cdn/elements/combobox/combobox.d.ts +15 -4
- package/cdn/elements/combobox/combobox.d.ts.map +1 -1
- package/cdn/elements/combobox/combobox.js +35 -33
- package/cdn/elements/combobox/combobox.js.map +1 -1
- package/cdn/elements/combobox/index.js.map +1 -1
- package/cdn/elements/dialog/dialog.d.ts +4 -4
- package/cdn/elements/dialog/dialog.d.ts.map +1 -1
- package/cdn/elements/dialog/dialog.js +13 -13
- package/cdn/elements/dialog/dialog.js.map +1 -1
- package/cdn/elements/dialog/dialog.styles.d.ts +1 -1
- package/cdn/elements/dialog/dialog.styles.d.ts.map +1 -1
- package/cdn/elements/dialog/dialog.styles.js.map +1 -1
- package/cdn/elements/dialog/index.js.map +1 -1
- package/cdn/elements/divider/divider.d.ts.map +1 -1
- package/cdn/elements/divider/divider.js +1 -1
- package/cdn/elements/divider/divider.js.map +1 -1
- package/cdn/elements/divider/index.js.map +1 -1
- package/cdn/elements/drawer/drawer.d.ts +2 -2
- package/cdn/elements/drawer/drawer.js +1 -1
- package/cdn/elements/drawer/drawer.js.map +1 -1
- package/cdn/elements/drawer/index.js.map +1 -1
- package/cdn/elements/dropdown/dropdown.d.ts +13 -5
- package/cdn/elements/dropdown/dropdown.d.ts.map +1 -1
- package/cdn/elements/dropdown/dropdown.js +2 -2
- package/cdn/elements/dropdown/dropdown.js.map +1 -1
- package/cdn/elements/dropdown/index.js.map +1 -1
- package/cdn/elements/dropdown-item/dropdown-item.d.ts +3 -3
- package/cdn/elements/dropdown-item/dropdown-item.d.ts.map +1 -1
- package/cdn/elements/dropdown-item/dropdown-item.js +5 -5
- package/cdn/elements/dropdown-item/dropdown-item.js.map +1 -1
- package/cdn/elements/dropdown-item/index.js.map +1 -1
- package/cdn/elements/dropdown-label/dropdown-label.d.ts +2 -2
- package/cdn/elements/dropdown-label/dropdown-label.d.ts.map +1 -1
- package/cdn/elements/dropdown-label/dropdown-label.js.map +1 -1
- package/cdn/elements/dropdown-label/index.js.map +1 -1
- package/cdn/elements/form-field/form-field.d.ts +1 -0
- package/cdn/elements/form-field/form-field.d.ts.map +1 -1
- package/cdn/elements/form-field/form-field.js +1 -1
- package/cdn/elements/form-field/form-field.js.map +1 -1
- package/cdn/elements/form-field/index.js.map +1 -1
- package/cdn/elements/icon/icon.d.ts +3 -3
- package/cdn/elements/icon/icon.d.ts.map +1 -1
- package/cdn/elements/icon/icon.js +1 -1
- package/cdn/elements/icon/icon.js.map +1 -1
- package/cdn/elements/icon/index.js.map +1 -1
- package/cdn/elements/input-group/index.js.map +1 -1
- package/cdn/elements/input-group/input-group.d.ts.map +1 -1
- package/cdn/elements/input-group/input-group.js +1 -1
- package/cdn/elements/input-group/input-group.js.map +1 -1
- package/cdn/elements/input-otp/index.js.map +1 -1
- package/cdn/elements/input-otp/input-otp.d.ts.map +1 -1
- package/cdn/elements/input-otp/input-otp.js +1 -1
- package/cdn/elements/input-otp/input-otp.js.map +1 -1
- package/cdn/elements/input-stepper/index.js.map +1 -1
- package/cdn/elements/input-stepper/input-stepper.d.ts.map +1 -1
- package/cdn/elements/input-stepper/input-stepper.js +1 -1
- package/cdn/elements/input-stepper/input-stepper.js.map +1 -1
- package/cdn/elements/popover/index.js.map +1 -1
- package/cdn/elements/popover/popover.d.ts +4 -4
- package/cdn/elements/popover/popover.d.ts.map +1 -1
- package/cdn/elements/popover/popover.js +6 -6
- package/cdn/elements/popover/popover.js.map +1 -1
- package/cdn/elements/prose-editor/index.js.map +1 -1
- package/cdn/elements/prose-editor/prose-editor.d.ts +73 -3
- package/cdn/elements/prose-editor/prose-editor.d.ts.map +1 -1
- package/cdn/elements/prose-editor/prose-editor.js +56 -71
- package/cdn/elements/prose-editor/prose-editor.js.map +1 -1
- package/cdn/elements/rating/index.js.map +1 -1
- package/cdn/elements/rating/rating.d.ts +3 -3
- package/cdn/elements/rating/rating.d.ts.map +1 -1
- package/cdn/elements/rating/rating.js +6 -6
- package/cdn/elements/rating/rating.js.map +1 -1
- package/cdn/elements/segmented-control/index.js.map +1 -1
- package/cdn/elements/segmented-control/segmented-control.d.ts.map +1 -1
- package/cdn/elements/segmented-control/segmented-control.js +1 -1
- package/cdn/elements/segmented-control/segmented-control.js.map +1 -1
- package/cdn/elements/select/index.js.map +1 -1
- package/cdn/elements/select/select.d.ts +11 -5
- package/cdn/elements/select/select.d.ts.map +1 -1
- package/cdn/elements/select/select.js +62 -57
- package/cdn/elements/select/select.js.map +1 -1
- package/cdn/elements/skeleton/index.js.map +1 -1
- package/cdn/elements/skeleton/skeleton.d.ts.map +1 -1
- package/cdn/elements/skeleton/skeleton.js.map +1 -1
- package/cdn/elements/slider/index.js.map +1 -1
- package/cdn/elements/slider/slider.d.ts +3 -3
- package/cdn/elements/slider/slider.d.ts.map +1 -1
- package/cdn/elements/slider/slider.js +2 -2
- package/cdn/elements/slider/slider.js.map +1 -1
- package/cdn/elements/spinner/index.js.map +1 -1
- package/cdn/elements/spinner/spinner.d.ts +2 -2
- package/cdn/elements/spinner/spinner.d.ts.map +1 -1
- package/cdn/elements/spinner/spinner.js.map +1 -1
- package/cdn/elements/sticky-bar/index.js.map +1 -1
- package/cdn/elements/sticky-bar/sticky-bar.d.ts +3 -3
- package/cdn/elements/sticky-bar/sticky-bar.d.ts.map +1 -1
- package/cdn/elements/sticky-bar/sticky-bar.js +1 -1
- package/cdn/elements/sticky-bar/sticky-bar.js.map +1 -1
- package/cdn/elements/stories/index.js.map +1 -1
- package/cdn/elements/stories/stories.d.ts +1 -1
- package/cdn/elements/stories/stories.d.ts.map +1 -1
- package/cdn/elements/stories/stories.js +1 -1
- package/cdn/elements/stories/stories.js.map +1 -1
- package/cdn/elements/stories-viewer/index.js.map +1 -1
- package/cdn/elements/stories-viewer/stories-viewer.d.ts +4 -4
- package/cdn/elements/stories-viewer/stories-viewer.d.ts.map +1 -1
- package/cdn/elements/stories-viewer/stories-viewer.js +33 -33
- package/cdn/elements/stories-viewer/stories-viewer.js.map +1 -1
- package/cdn/elements/story/index.js.map +1 -1
- package/cdn/elements/story/story.d.ts +1 -1
- package/cdn/elements/story/story.d.ts.map +1 -1
- package/cdn/elements/story/story.js +8 -8
- package/cdn/elements/story/story.js.map +1 -1
- package/cdn/elements/tabs/index.js.map +1 -1
- package/cdn/elements/tabs/tabs.d.ts.map +1 -1
- package/cdn/elements/tabs/tabs.js +1 -1
- package/cdn/elements/tabs/tabs.js.map +1 -1
- package/cdn/elements/tag/index.js.map +1 -1
- package/cdn/elements/tag/tag.d.ts +2 -2
- package/cdn/elements/tag/tag.d.ts.map +1 -1
- package/cdn/elements/tag/tag.js +3 -3
- package/cdn/elements/tag/tag.js.map +1 -1
- package/cdn/elements/toast/index.js.map +1 -1
- package/cdn/elements/toast/toast.d.ts.map +1 -1
- package/cdn/elements/toast/toast.js +1 -1
- package/cdn/elements/toast/toast.js.map +1 -1
- package/cdn/elements/tooltip/index.js.map +1 -1
- package/cdn/elements/tooltip/tooltip.d.ts +4 -4
- package/cdn/elements/tooltip/tooltip.d.ts.map +1 -1
- package/cdn/elements/tooltip/tooltip.js +6 -6
- package/cdn/elements/tooltip/tooltip.js.map +1 -1
- package/cdn/elements/tree/index.js.map +1 -1
- package/cdn/elements/tree/tree.d.ts +4 -4
- package/cdn/elements/tree/tree.d.ts.map +1 -1
- package/cdn/elements/tree/tree.js +2 -2
- package/cdn/elements/tree/tree.js.map +1 -1
- package/cdn/elements/tree-item/index.js.map +1 -1
- package/cdn/elements/tree-item/tree-item.d.ts +3 -3
- package/cdn/elements/tree-item/tree-item.d.ts.map +1 -1
- package/cdn/elements/tree-item/tree-item.js +33 -33
- package/cdn/elements/tree-item/tree-item.js.map +1 -1
- package/cdn/events/after-hide.d.ts.map +1 -1
- package/cdn/events/after-hide.js.map +1 -1
- package/cdn/events/after-show.d.ts.map +1 -1
- package/cdn/events/after-show.js.map +1 -1
- package/cdn/events/hide.d.ts.map +1 -1
- package/cdn/events/hide.js.map +1 -1
- package/cdn/events/show.d.ts.map +1 -1
- package/cdn/events/show.js.map +1 -1
- package/cdn/registry.js +1 -1
- package/cdn/registry.js.map +1 -1
- package/cdn/shared/controllers/datalist-observer.d.ts +1 -1
- package/cdn/shared/controllers/datalist-observer.d.ts.map +1 -1
- package/cdn/shared/controllers/datalist-observer.js.map +1 -1
- package/cdn/shared/controllers/has-slot-controller.d.ts +1 -1
- package/cdn/shared/controllers/has-slot-controller.d.ts.map +1 -1
- package/cdn/shared/controllers/has-slot-controller.js +1 -1
- package/cdn/shared/controllers/has-slot-controller.js.map +1 -1
- package/cdn/shared/controllers/listbox-nav.d.ts +1 -1
- package/cdn/shared/controllers/listbox-nav.d.ts.map +1 -1
- package/cdn/shared/controllers/listbox-nav.js.map +1 -1
- package/cdn/shared/controllers/popover.d.ts +2 -2
- package/cdn/shared/controllers/popover.d.ts.map +1 -1
- package/cdn/shared/controllers/popover.js +1 -1
- package/cdn/shared/controllers/popover.js.map +1 -1
- package/cdn/shared/highlight.d.ts +16 -0
- package/cdn/shared/highlight.d.ts.map +1 -0
- package/cdn/shared/highlight.js +2 -0
- package/cdn/shared/highlight.js.map +1 -0
- package/cdn/shared/localize.d.ts +1 -1
- package/cdn/shared/localize.d.ts.map +1 -1
- package/cdn/shared/localize.js +1 -1
- package/cdn/shared/localize.js.map +1 -1
- package/cdn/shared/luxen-element.js.map +1 -1
- package/cdn/shared/luxen-form-associated-element.d.ts.map +1 -1
- package/cdn/shared/luxen-form-associated-element.js +1 -1
- package/cdn/shared/luxen-form-associated-element.js.map +1 -1
- package/cdn/shared/rich-option.d.ts +20 -0
- package/cdn/shared/rich-option.d.ts.map +1 -0
- package/cdn/shared/rich-option.js +2 -0
- package/cdn/shared/rich-option.js.map +1 -0
- package/cdn/shared/styles/badge-core.styles.d.ts +9 -0
- package/cdn/shared/styles/badge-core.styles.d.ts.map +1 -0
- package/cdn/shared/styles/badge-core.styles.js +2 -0
- package/cdn/shared/styles/badge-core.styles.js.map +1 -0
- package/cdn/shared/styles/button-core.styles.d.ts +1 -1
- package/cdn/shared/styles/button-core.styles.d.ts.map +1 -1
- package/cdn/shared/styles/button-core.styles.js.map +1 -1
- package/cdn/shared/styles/checkbox-appearance.styles.d.ts +1 -1
- package/cdn/shared/styles/checkbox-appearance.styles.d.ts.map +1 -1
- package/cdn/shared/styles/checkbox-appearance.styles.js.map +1 -1
- package/cdn/shared/styles/host.styles.d.ts +1 -1
- package/cdn/shared/styles/host.styles.d.ts.map +1 -1
- package/cdn/shared/styles/host.styles.js.map +1 -1
- package/cdn/shared/styles/select-item-suffix.styles.d.ts +8 -0
- package/cdn/shared/styles/select-item-suffix.styles.d.ts.map +1 -0
- package/cdn/shared/styles/select-item-suffix.styles.js +2 -0
- package/cdn/shared/styles/select-item-suffix.styles.js.map +1 -0
- package/cdn/standalone.css +273 -233
- package/cdn/standalone.js +40349 -105
- package/cdn/standalone.js.map +1 -1
- package/cdn/static-tag.d.ts +2 -2
- package/cdn/static-tag.js +1 -1
- package/cdn/static-tag.js.map +1 -1
- package/cdn/styles/base.css +1 -48
- package/cdn/styles/elements/badge.css +202 -182
- package/cdn/styles/elements/checkbox.css +1 -4
- package/cdn/styles/elements/select.css +71 -3
- package/cdn/styles/preset.css +4 -49
- package/cdn/styles/tokens/aliases.css +1 -3
- package/cdn/styles/tokens/forms.css +5 -3
- package/cdn/styles/tokens/primitives.css +1 -3
- package/cdn/styles/tokens.css +5 -5
- package/cdn/translations/en.d.ts +1 -1
- package/cdn/translations/en.d.ts.map +1 -1
- package/cdn/translations/en.js.map +1 -1
- package/cdn/translations/fr.d.ts +1 -1
- package/cdn/translations/fr.d.ts.map +1 -1
- package/cdn/translations/fr.js.map +1 -1
- package/cdn/translations/ko.d.ts +1 -1
- package/cdn/translations/ko.d.ts.map +1 -1
- package/cdn/translations/ko.js.map +1 -1
- package/dist/color-scheme.d.ts.map +1 -1
- package/dist/css/base.css +1 -48
- package/dist/css/elements/badge.css +202 -182
- package/dist/css/elements/checkbox.css +1 -4
- package/dist/css/elements/select.css +71 -3
- package/dist/css/preset.css +4 -49
- package/dist/css/tokens/aliases.css +1 -3
- package/dist/css/tokens/forms.css +5 -3
- package/dist/css/tokens/primitives.css +1 -3
- package/dist/css/tokens.css +5 -5
- package/dist/custom-elements.json +47 -3
- package/dist/elements/alert/alert.d.ts.map +1 -1
- package/dist/elements/alert-dialog/alert-dialog.d.ts.map +1 -1
- package/dist/elements/avatar/avatar.d.ts.map +1 -1
- package/dist/elements/badge/badge.d.ts.map +1 -1
- package/dist/elements/button-group/button-group.d.ts.map +1 -1
- package/dist/elements/carousel/carousel.d.ts.map +1 -1
- package/dist/elements/carousel-item/carousel-item.d.ts.map +1 -1
- package/dist/elements/color-scheme-icon/color-scheme-icon.d.ts.map +1 -1
- package/dist/elements/combobox/combobox.css +7 -3
- package/dist/elements/combobox/combobox.d.ts +12 -1
- package/dist/elements/combobox/combobox.d.ts.map +1 -1
- package/dist/elements/combobox/combobox.js +52 -46
- package/dist/elements/dialog/dialog.d.ts.map +1 -1
- package/dist/elements/dialog/dialog.js +10 -10
- package/dist/elements/dialog/dialog.styles.d.ts.map +1 -1
- package/dist/elements/divider/divider.d.ts.map +1 -1
- package/dist/elements/drawer/drawer.d.ts +1 -1
- package/dist/elements/dropdown/dropdown.d.ts +8 -0
- package/dist/elements/dropdown/dropdown.d.ts.map +1 -1
- package/dist/elements/dropdown/dropdown.js +33 -8
- package/dist/elements/dropdown-item/dropdown-item.d.ts.map +1 -1
- package/dist/elements/dropdown-item/dropdown-item.js +3 -3
- package/dist/elements/dropdown-label/dropdown-label.d.ts.map +1 -1
- package/dist/elements/form-field/form-field.d.ts +1 -0
- package/dist/elements/form-field/form-field.d.ts.map +1 -1
- package/dist/elements/form-field/form-field.js +14 -2
- package/dist/elements/icon/icon.d.ts.map +1 -1
- package/dist/elements/input-group/input-group.d.ts.map +1 -1
- package/dist/elements/input-otp/input-otp.d.ts.map +1 -1
- package/dist/elements/input-stepper/input-stepper.d.ts.map +1 -1
- package/dist/elements/popover/popover.d.ts.map +1 -1
- package/dist/elements/popover/popover.js +5 -5
- package/dist/elements/prose-editor/prose-editor.d.ts +69 -0
- package/dist/elements/prose-editor/prose-editor.d.ts.map +1 -1
- package/dist/elements/prose-editor/prose-editor.js +183 -22
- package/dist/elements/rating/rating.d.ts.map +1 -1
- package/dist/elements/rating/rating.js +5 -5
- package/dist/elements/segmented-control/segmented-control.d.ts.map +1 -1
- package/dist/elements/select/select.css +12 -6
- package/dist/elements/select/select.d.ts +8 -3
- package/dist/elements/select/select.d.ts.map +1 -1
- package/dist/elements/select/select.js +68 -60
- package/dist/elements/skeleton/skeleton.d.ts.map +1 -1
- package/dist/elements/slider/slider.d.ts.map +1 -1
- package/dist/elements/spinner/spinner.d.ts.map +1 -1
- package/dist/elements/sticky-bar/sticky-bar.d.ts.map +1 -1
- package/dist/elements/stories/stories.d.ts.map +1 -1
- package/dist/elements/stories-viewer/stories-viewer.d.ts.map +1 -1
- package/dist/elements/stories-viewer/stories-viewer.js +16 -16
- package/dist/elements/story/story.d.ts.map +1 -1
- package/dist/elements/tabs/tabs.d.ts.map +1 -1
- package/dist/elements/tag/tag.css +10 -9
- package/dist/elements/tag/tag.d.ts.map +1 -1
- package/dist/elements/toast/toast.d.ts.map +1 -1
- package/dist/elements/tooltip/tooltip.d.ts.map +1 -1
- package/dist/elements/tooltip/tooltip.js +5 -5
- package/dist/elements/tree/tree.d.ts.map +1 -1
- package/dist/elements/tree-item/tree-item.css +17 -7
- package/dist/elements/tree-item/tree-item.d.ts.map +1 -1
- package/dist/elements/tree-item/tree-item.js +29 -29
- package/dist/events/after-hide.d.ts.map +1 -1
- package/dist/events/after-show.d.ts.map +1 -1
- package/dist/events/hide.d.ts.map +1 -1
- package/dist/events/show.d.ts.map +1 -1
- package/dist/metadata/combobox.json +23 -2
- package/dist/metadata/index.json +47 -5
- package/dist/metadata/prose-editor.json +1 -1
- package/dist/metadata/select.json +22 -1
- package/dist/shared/controllers/datalist-observer.d.ts.map +1 -1
- package/dist/shared/controllers/has-slot-controller.d.ts.map +1 -1
- package/dist/shared/controllers/listbox-nav.d.ts.map +1 -1
- package/dist/shared/controllers/popover.d.ts.map +1 -1
- package/dist/shared/highlight.d.ts +16 -0
- package/dist/shared/highlight.d.ts.map +1 -0
- package/dist/shared/highlight.js +140 -0
- package/dist/shared/localize.d.ts.map +1 -1
- package/dist/shared/localize.js +1 -1
- package/dist/shared/luxen-form-associated-element.d.ts.map +1 -1
- package/dist/shared/rich-option.d.ts +20 -0
- package/dist/shared/rich-option.d.ts.map +1 -0
- package/dist/shared/rich-option.js +82 -0
- package/dist/shared/styles/badge-core.css +221 -0
- package/dist/shared/styles/badge-core.styles.d.ts +9 -0
- package/dist/shared/styles/badge-core.styles.d.ts.map +1 -0
- package/dist/shared/styles/badge-core.styles.js +9 -0
- package/dist/shared/styles/button-core.styles.d.ts.map +1 -1
- package/dist/shared/styles/checkbox-appearance.styles.d.ts.map +1 -1
- package/dist/shared/styles/host.styles.d.ts.map +1 -1
- package/dist/shared/styles/select-item-suffix.css +60 -0
- package/dist/shared/styles/select-item-suffix.styles.d.ts +8 -0
- package/dist/shared/styles/select-item-suffix.styles.d.ts.map +1 -0
- package/dist/shared/styles/select-item-suffix.styles.js +8 -0
- package/dist/templates/elements/combobox.md +155 -1
- package/dist/templates/elements/prose-editor.md +2 -1
- package/dist/templates/elements/radio-group.md +2 -2
- package/dist/templates/elements/select.md +212 -3
- package/dist/templates/elements/textarea.md +2 -4
- package/dist/translations/en.d.ts.map +1 -1
- package/dist/translations/fr.d.ts.map +1 -1
- package/dist/translations/ko.d.ts.map +1 -1
- package/package.json +21 -21
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e=(e,t,n)=>(n.configurable=!0,n.enumerable=!0,Reflect.decorate&&typeof t!=`object`&&Object.defineProperty(e,t,n),n);function t(t,n){return(r,i,a)=>{let o=e=>e.renderRoot?.querySelector(t)??null;if(n){let{get:t,set:n}=typeof i==`object`?r:a??(()=>{let e=Symbol();return{get(){return this[e]},set(t){this[e]=t}}})();return e(r,i,{get(){let e=t.call(this);return e===void 0&&(e=o(this),(e!==null||this.hasUpdated)&&n.call(this,e)),e}})}return e(r,i,{get(){return o(this)}})}}export{t};
|
|
2
|
+
//# sourceMappingURL=query.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"query.js","names":["e","t","e$1","c","e","t","r","s","n","i"],"sources":["../../../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/base.js","../../../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.js"],"sourcesContent":["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst e=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&\"object\"!=typeof t&&Object.defineProperty(e,t,c),c);export{e as desc};\n//# sourceMappingURL=base.js.map\n","import{desc as t}from\"./base.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function e(e,r){return(n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;if(r){const{get:e,set:r}=\"object\"==typeof s?n:i??(()=>{const t=Symbol();return{get(){return this[t]},set(e){this[t]=e}}})();return t(n,s,{get(){let t=e.call(this);return void 0===t&&(t=o(this),(null!==t||this.hasUpdated)&&r.call(this,t)),t}})}return t(n,s,{get(){return o(this)}})}}export{e as query};\n//# sourceMappingURL=query.js.map\n"],"ignoreList":[0,1],"mappings":"AAKA,IAAMA,GAAG,EAAE,EAAE,KAAK,EAAE,aAAa,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,QAAQ,UAAoB,OAAO,GAAjB,UAAoB,OAAO,eAAe,EAAE,EAAEG,CAAC,EAAEA,GCApH,SAASC,EAAE,EAAE,EAAE,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,IAAM,EAAE,GAAGC,EAAE,YAAY,cAAcD,CAAC,GAAG,KAAK,GAAGE,EAAE,CAAC,GAAK,CAAC,IAAIF,EAAE,IAAIE,GAAa,OAAOC,GAAjB,SAAmBC,EAAEC,QAAQ,CAAC,IAAMJ,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,KAAKA,EAAE,EAAE,IAAI,EAAE,CAAC,KAAKA,GAAGD,CAAC,CAAC,CAAC,EAAA,CAAG,EAAE,OAAOH,EAAEO,EAAED,EAAE,CAAC,KAAK,CAAC,IAAIF,EAAED,EAAE,KAAK,IAAI,EAAE,OAAgBC,IAAT,IAAK,KAAQ,EAAE,EAAE,IAAI,GAAUA,IAAP,MAAU,KAAK,aAAaC,EAAE,KAAK,KAAKD,CAAC,GAAGA,CAAC,CAAC,CAAC,CAAC,CAAC,OAAOJ,EAAEO,EAAED,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,C"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as e}from"./lit-html.js";var t=Symbol.for(``),n=e=>{if(e?.r===t)return e?._$litStatic$},r=e=>({_$litStatic$:e,r:t}),i=(e,...n)=>({_$litStatic$:n.reduce((t,n,r)=>t+(e=>{if(e._$litStatic$!==void 0)return e._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${e}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(n)+e[r+1],e[0]),r:t}),a=new Map,o=(e=>(t,...r)=>{let i=r.length,o,s,c=[],l=[],u,d=0,f=!1;for(;d<i;){for(u=t[d];d<i&&(s=r[d],o=n(s))!==void 0;)u+=o+t[++d],f=!0;d!==i&&l.push(s),c.push(u),d++}if(d===i&&c.push(t[i]),f){let e=c.join(`$$lit$$`);(t=a.get(e))===void 0&&(c.raw=c,a.set(e,t=c)),r=l}return e(t,...r)})(e);export{r as n,o as r,i as t};
|
|
1
|
+
import{a as e}from"./lit-html.js";var t=Symbol.for(``),n=e=>{if(e?.r===t)return e?._$litStatic$},r=e=>({_$litStatic$:e,r:t}),i=(e,...n)=>({_$litStatic$:n.reduce((t,n,r)=>t+(e=>{if(e._$litStatic$!==void 0)return e._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${e}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(n)+e[r+1],e[0]),r:t}),a=new Map,o=(e=>(t,...r)=>{let i=r.length,o,s,c=[],l=[],u,d=0,f=!1;for(;d<i;){for(u=t[d];d<i&&(s=r[d],(o=n(s))!==void 0);)u+=o+t[++d],f=!0;d!==i&&l.push(s),c.push(u),d++}if(d===i&&c.push(t[i]),f){let e=c.join(`$$lit$$`);(t=a.get(e))===void 0&&(c.raw=c,a.set(e,t=c)),r=l}return e(t,...r)})(e);export{r as n,o as r,i as t};
|
|
2
2
|
//# sourceMappingURL=static-html.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"static-html.js","names":["t","r","e"],"sources":["../../../../node_modules/.pnpm/lit-html@3.3.
|
|
1
|
+
{"version":3,"file":"static-html.js","names":["t","r","e","b","a","o","t","s","r","e","l","u","i","n","c","$"],"sources":["../../../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/static.js"],"sourcesContent":["import{html as t,svg as r,mathml as e}from\"./lit-html.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst a=Symbol.for(\"\"),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(t,...r)=>({_$litStatic$:r.reduce((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\\n take care to ensure page security.`)})(e)+t[a+1],t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o(i));)c+=s+r[++$],f=!0;$!==a&&u.push(i),n.push(c),$++}if($===a&&n.push(r[a]),f){const t=n.join(\"$$lit$$\");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u}return t(r,...e)},u=n(t),c=n(r),$=n(e);export{u as html,i as literal,$ as mathml,c as svg,s as unsafeStatic,n as withStatic};\n//# sourceMappingURL=static.js.map\n"],"ignoreList":[0],"mappings":"A,kCAMA,IAAMI,EAAE,OAAO,IAAI,EAAE,EAAEC,EAAE,GAAG,CAAC,GAAGC,GAAG,IAAIF,EAAE,OAAOE,GAAG,YAAY,EAAEC,EAAE,IAAI,CAAC,aAAaD,EAAE,EAAEF,CAAC,GAAG,GAAG,EAAE,GAAGI,KAAK,CAAC,aAAaA,EAAE,QAAQ,EAAE,EAAE,IAAIA,GAAG,GAAG,CAAC,GAAYF,EAAE,eAAX,IAAK,GAAmB,OAAOA,EAAE,aAAa,MAAM,MAAM,kEAAkEA,EAAE,qGAAqG,CAAC,EAAA,CAAGG,CAAC,EAAEH,EAAEF,EAAE,GAAGE,EAAE,EAAE,EAAE,EAAEF,CAAC,GAAGM,EAAE,IAAI,IAAySC,GAAnS,IAAI,EAAE,GAAGF,IAAI,CAAC,IAAML,EAAEK,EAAE,OAAWF,EAAEK,EAAQC,EAAE,CAAC,EAAEF,EAAE,CAAC,EAAMG,EAAEC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAKA,EAAEX,GAAG,CAAC,IAAI,EAAEI,EAAEO,GAAGA,EAAEX,IAAa,EAAEK,EAAEM,IAAG,EAAEV,EAAEO,CAAC,KAAtB,IAAK,KAAqB,GAAGL,EAAEC,EAAE,EAAEO,GAAG,EAAE,CAAC,EAAEA,IAAIX,GAAGO,EAAE,KAAKC,CAAC,EAAEC,EAAE,KAAKC,CAAC,EAAE,GAAG,CAAC,GAAGC,IAAIX,GAAGS,EAAE,KAAKL,EAAEJ,EAAE,EAAE,EAAE,CAAC,IAAME,EAAEO,EAAE,KAAK,SAAS,GAAY,EAAEH,EAAE,IAAIJ,CAAC,KAAnB,IAAK,KAAmB,EAAE,IAAIO,EAAEH,EAAE,IAAIJ,EAAE,EAAEO,CAAC,GAAG,EAAEF,CAAC,CAAC,OAAOL,EAAEE,EAAE,GAAGC,CAAC,CAAC,EAAI,CAAET,CAAC,E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"unsafe-html.js","names":["s","t","n","i","r"],"sources":["../../../../node_modules/.pnpm/lit-html@3.3.
|
|
1
|
+
{"version":3,"file":"unsafe-html.js","names":["s","t","n","i","r","E","e$1","e","i","A","t","r","s"],"sources":["../../../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"ignoreList":[0],"mappings":"A,2EAKG,IAAMO,EAAN,cAAgBP,CAAC,CAAC,YAAY,EAAE,CAAC,GAAG,MAAMQ,CAAC,EAAE,KAAK,GAAGP,EAAEO,EAAE,OAAON,EAAE,MAAM,MAAM,MAAM,KAAK,YAAY,cAAc,uCAAuC,CAAC,CAAC,OAAO,EAAE,CAAC,GAAGS,IAAIV,GAASU,GAAN,KAAQ,MAAO,MAAK,GAAG,IAAK,GAAE,KAAK,GAAGA,EAAE,GAAGA,IAAIR,EAAE,OAAOQ,EAAE,GAAa,OAAOA,GAAjB,SAAmB,MAAM,MAAM,KAAK,YAAY,cAAc,mCAAmC,EAAE,GAAGA,IAAI,KAAK,GAAG,OAAO,KAAK,GAAG,KAAK,GAAGA,EAAE,IAAMC,EAAE,CAACD,CAAC,EAAE,MAAO,GAAE,IAAIC,EAAE,KAAK,GAAG,CAAC,WAAW,KAAK,YAAY,WAAW,QAAQA,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAC,EAAE,cAAc,aAAa,EAAE,WAAW,EAAE,IAAM,EAAER,EAAEG,CAAC,E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-scheme.d.ts","sourceRoot":"","sources":["../src/html/color-scheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,qEAAqE;AACrE,MAAM,MAAM,mBAAmB,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AAErF,0DAA0D;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,KAAK,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AA8BD,cAAM,gBAAgB;;IAuBpB,gFAAgF;IAChF,IAAI,OAAO,IAAI,WAAW,CAEzB;IAED,qFAAqF;IACrF,IAAI,UAAU,IAAI,OAAO,CAExB;IAMD;;;OAGG;IACH,GAAG,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"color-scheme.d.ts","sourceRoot":"","sources":["../src/html/color-scheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,qEAAqE;AACrE,MAAM,MAAM,mBAAmB,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AAErF,0DAA0D;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,KAAK,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AA8BD,cAAM,gBAAgB;;IAuBpB,gFAAgF;IAChF,IAAI,OAAO,IAAI,WAAW,CAEzB;IAED,qFAAqF;IACrF,IAAI,UAAU,IAAI,OAAO,CAExB;IAMD;;;OAGG;IACH,GAAG,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAqB3B;IAED,kEAAkE;IAClE,MAAM,IAAI,WAAW,CAGpB;IAED;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,QAAQ,EAAE,mBAAmB,GAAG,MAAM,IAAI,CAQnD;IAED,mFAAmF;IACnF,SAAS,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAczC;CAyCF;AAED,8DAA8D;AAC9D,eAAO,MAAM,WAAW,kBAAyB,CAAC"}
|
package/cdn/color-scheme.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`luxen-color-scheme`,t=!1,n=`(prefers-color-scheme: dark)`;function r(){return globalThis.matchMedia?.(n).matches?`dark`:`light`}function i(e){if(!e)return null;try{let t=localStorage.getItem(e);return t===`light`||t===`dark`?t:null}catch{return null}}var a=new class{#e=null;#t=new Set;#n=null;#r=null;#i=!1;#a=()=>this.#l();#o=t=>{t.key
|
|
1
|
+
var e=`luxen-color-scheme`,t=!1,n=`(prefers-color-scheme: dark)`;function r(){return globalThis.matchMedia?.(n).matches?`dark`:`light`}function i(e){if(!e)return null;try{let t=localStorage.getItem(e);return t===`light`||t===`dark`?t:null}catch{return null}}var a=new class{#e=null;#t=new Set;#n=null;#r=null;#i=!1;#a=()=>this.#l();#o=t=>{(t.key===null||t.key===e)&&(e&&(this.#e=null),this.#l())};get current(){return this.#s??r()}get overridden(){return this.#s!==null}get#s(){return i(e)??this.#e}set(t){let n=t===r();if(e)try{n?localStorage.removeItem(e):localStorage.setItem(e,t),this.#e=null,this.#c(),this.#l();return}catch{}this.#e=n?null:t,this.#c(),this.#l()}toggle(){return this.set(this.current===`dark`?`light`:`dark`),this.current}subscribe(e){return this.#t.add(e),this.#u(),e(this.current,this.overridden),()=>{this.#t.delete(e),this.#t.size===0&&this.#d()}}configure(n){if(n.storageKey!==void 0&&(e=n.storageKey),n.apply!==void 0){let e=t===`root`;t=n.apply,e&&n.apply===!1&&globalThis.document?.documentElement.style.removeProperty(`color-scheme`)}this.#c(),this.#l()}#c(){if(t!==`root`)return;let e=globalThis.document?.documentElement;e&&(e.style.colorScheme=this.#s??`light dark`)}#l(){let e=this.current,t=this.overridden;if(e!==this.#r||t!==this.#i){this.#r=e,this.#i=t;for(let n of this.#t)n(e,t)}}#u(){this.#n||(this.#n=globalThis.matchMedia?.(n)??null,this.#n?.addEventListener(`change`,this.#a),globalThis.addEventListener?.(`storage`,this.#o),this.#r=this.current,this.#i=this.overridden,this.#c())}#d(){this.#n?.removeEventListener(`change`,this.#a),this.#n=null,globalThis.removeEventListener?.(`storage`,this.#o)}};export{a as colorScheme};
|
|
2
2
|
//# sourceMappingURL=color-scheme.js.map
|
package/cdn/color-scheme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-scheme.js","names":["#notify","#session","#override","#applyToRoot","#listeners","#bind","#unbind","#last","#lastOverridden","#media","#onOsChange","#onStorageChange"],"sources":["../src/html/color-scheme.ts"],"sourcesContent":["/**\n * Page-level light/dark state, shared by every control that shows or changes it.\n *\n * Deliberately not an element: the scheme is one value per document, and a\n * document can hold several controls for it — a header button, a menu row, a\n * settings page. Whichever one the user touches, all of them have to agree, so\n * the state belongs to the page rather than to any of them.\n *\n * The model is the one argued in Lea Verou's *Dark mode toggles should be a\n * two-state switch* (2026): three values — an explicit `light`, an explicit\n * `dark`, or no preference at all — but only two ever shown. That falls out of\n * two rules, both implemented here:\n *\n * 1. An override is stored **only when it differs from the OS preference**.\n * Choosing the scheme the OS already reports removes the override instead,\n * handing control back to the system. So a user on a dark OS who switches to\n * light and back is following the system again, not pinned to dark — and\n * \"system\" stays reachable without a third button.\n * 2. The stored value is read **only when the user acts**. If the OS flips while\n * an explicit override exists, the override survives: the user asked for it,\n * and nothing they did says otherwise.\n *\n * SSR-safe: nothing here touches `window`, `document` or `localStorage` at\n * module scope, and listeners are attached lazily on the first subscription.\n */\n\nexport type ColorScheme = 'light' | 'dark';\n\n/** Called whenever the effective scheme changes, from any source. */\nexport type ColorSchemeListener = (scheme: ColorScheme, overridden: boolean) => void;\n\n/** Where the store writes `color-scheme`, if anywhere. */\nexport type ColorSchemeApply = 'root' | false;\n\nexport interface ColorSchemeConfig {\n /**\n * `localStorage` key holding the override. Set to `''` to disable persistence\n * entirely — the choice then lasts for the session only.\n */\n storageKey?: string;\n /**\n * Write `color-scheme` on `<html>` when the scheme changes. Off by default:\n * most applications already own a color-mode story, and silently rewriting\n * `documentElement` would fight it. Turn it on for a plain page.\n */\n apply?: ColorSchemeApply;\n}\n\n/*\n * Defaults live as module-level bindings, not class fields, so that\n * `luxen-ui/vite-plugin` can bake a project's `luxen.config.mjs` values in at\n * build time by rewriting these two initialisers — the same mechanism it uses\n * for `_elementPrefix` / `_cssPrefix` in `registry.ts`. `configure()` stays the\n * runtime path for anything the build cannot know.\n */\nlet _storageKey = 'luxen-color-scheme';\nlet _apply: ColorSchemeApply = false;\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\n\n/** The OS-level preference. `light` when the query is unsupported. */\nfunction osScheme(): ColorScheme {\n return globalThis.matchMedia?.(DARK_QUERY).matches ? 'dark' : 'light';\n}\n\nfunction readStored(key: string): ColorScheme | null {\n if (!key) return null;\n try {\n const value = localStorage.getItem(key);\n return value === 'light' || value === 'dark' ? value : null;\n } catch {\n // Safari private mode, disabled storage, sandboxed iframe.\n return null;\n }\n}\n\nclass ColorSchemeStore {\n /**\n * In-memory copy of the override, used when persistence is off or when the\n * browser refuses to write. Without it a blocked write would leave every\n * control unable to move at all.\n */\n #session: ColorScheme | null = null;\n #listeners = new Set<ColorSchemeListener>();\n #media: MediaQueryList | null = null;\n #last: ColorScheme | null = null;\n #lastOverridden = false;\n\n #onOsChange = () => this.#notify();\n\n #onStorageChange = (event: StorageEvent) => {\n // `key === null` means the whole store was cleared.\n if (event.key !== null && event.key !== _storageKey) return;\n // Another tab is the authority now: drop this page's session copy so a\n // release made over there is not undone by a stale local value.\n if (_storageKey) this.#session = null;\n this.#notify();\n };\n\n /** The scheme actually in effect: a stored override, else the OS preference. */\n get current(): ColorScheme {\n return this.#override ?? osScheme();\n }\n\n /** Whether an override is in place, rather than the OS preference being followed. */\n get overridden(): boolean {\n return this.#override !== null;\n }\n\n get #override(): ColorScheme | null {\n return readStored(_storageKey) ?? this.#session;\n }\n\n /**\n * Choose a scheme. Rule 1 lives here: the override is written only when it\n * disagrees with the OS, and released when it agrees.\n */\n set(next: ColorScheme): void {\n const release = next === osScheme();\n\n if (_storageKey) {\n try {\n if (release) localStorage.removeItem(_storageKey);\n else localStorage.setItem(_storageKey, next);\n // Storage took it, so it is the single authority — drop any session copy\n // left over from a period when it was unavailable.\n this.#session = null;\n this.#applyToRoot();\n this.#notify();\n return;\n } catch {\n // Refused — fall through to memory.\n }\n }\n\n this.#session = release ? null : next;\n this.#applyToRoot();\n this.#notify();\n }\n\n /** Flip to the other scheme. Returns the scheme now in effect. */\n toggle(): ColorScheme {\n this.set(this.current === 'dark' ? 'light' : 'dark');\n return this.current;\n }\n\n /**\n * Observe the effective scheme. The listener is called **immediately with the\n * current value**, then on a user change, on an OS change with no override in\n * place, and on a change made in another tab. Returns an unsubscribe function;\n * the last unsubscribe releases the listeners.\n *\n * The immediate call is deliberate. A subscriber's job is almost always to\n * mirror the scheme somewhere — an `aria-pressed`, a `checked`, a class — and\n * a change-only contract leaves that mirror wrong until the first change,\n * which is a bug nobody sees until a screen reader hits it. Callers that only\n * want transitions can ignore the first call.\n */\n subscribe(listener: ColorSchemeListener): () => void {\n this.#listeners.add(listener);\n this.#bind();\n listener(this.current, this.overridden);\n return () => {\n this.#listeners.delete(listener);\n if (this.#listeners.size === 0) this.#unbind();\n };\n }\n\n /** Set the storage key and whether the store writes `color-scheme` on `<html>`. */\n configure(config: ColorSchemeConfig): void {\n if (config.storageKey !== undefined) _storageKey = config.storageKey;\n\n if (config.apply !== undefined) {\n const wasApplying = _apply === 'root';\n _apply = config.apply;\n // Leave no trace when application is switched off.\n if (wasApplying && config.apply === false) {\n globalThis.document?.documentElement.style.removeProperty('color-scheme');\n }\n }\n\n this.#applyToRoot();\n this.#notify();\n }\n\n /**\n * With no override, writes `light dark` rather than nothing: it declares\n * support for both schemes, so the used value follows `prefers-color-scheme`\n * and \"follow the system\" comes from the platform instead of being simulated.\n */\n #applyToRoot(): void {\n if (_apply !== 'root') return;\n const root = globalThis.document?.documentElement;\n if (root) root.style.colorScheme = this.#override ?? 'light dark';\n }\n\n #notify(): void {\n const next = this.current;\n const overridden = this.overridden;\n // Both halves of the payload are compared, not just the scheme: releasing an\n // override that already agreed with the OS leaves `current` untouched while\n // `overridden` flips, and a subscriber mirroring it — a \"following the\n // system\" badge, a tri-state settings control — would never hear about it.\n if (next === this.#last && overridden === this.#lastOverridden) return;\n this.#last = next;\n this.#lastOverridden = overridden;\n for (const listener of this.#listeners) listener(next, overridden);\n }\n\n #bind(): void {\n if (this.#media) return;\n this.#media = globalThis.matchMedia?.(DARK_QUERY) ?? null;\n this.#media?.addEventListener('change', this.#onOsChange);\n globalThis.addEventListener?.('storage', this.#onStorageChange);\n this.#last = this.current;\n this.#lastOverridden = this.overridden;\n this.#applyToRoot();\n }\n\n #unbind(): void {\n this.#media?.removeEventListener('change', this.#onOsChange);\n this.#media = null;\n globalThis.removeEventListener?.('storage', this.#onStorageChange);\n }\n}\n\n/** The document's light/dark state. One instance per page. */\nexport const colorScheme = new ColorSchemeStore();\n"],"mappings":"AAuDA,IAAI,EAAc,qBACd,EAA2B,GAEzB,EAAa,+BAGnB,SAAS,GAAwB,CAC/B,OAAO,WAAW,aAAa,CAAU,CAAC,CAAC,QAAU,OAAS,OAChE,CAEA,SAAS,EAAW,EAAiC,CACnD,GAAI,CAAC,EAAK,OAAO,KACjB,GAAI,CACF,IAAM,EAAQ,aAAa,QAAQ,CAAG,EACtC,OAAO,IAAU,SAAW,IAAU,OAAS,EAAQ,IACzD,MAAQ,CAEN,OAAO,IACT,CACF,CAyJA,IAAa,EAAc,IAAI,KAvJR,CAMrB,GAA+B,KAC/B,GAAa,IAAI,IACjB,GAAgC,KAChC,GAA4B,KAC5B,GAAkB,GAElB,OAAoB,KAAKA,GAAQ,EAEjC,GAAoB,GAAwB,CAEtC,EAAM,MAAQ,MAAQ,EAAM,MAAQ,IAGpC,IAAa,KAAKC,GAAW,MACjC,KAAKD,GAAQ,EACf,EAGA,IAAI,SAAuB,CACzB,OAAO,KAAKE,IAAa,EAAS,CACpC,CAGA,IAAI,YAAsB,CACxB,OAAO,KAAKA,KAAc,IAC5B,CAEA,GAAIA,IAAgC,CAClC,OAAO,EAAW,CAAW,GAAK,KAAKD,EACzC,CAMA,IAAI,EAAyB,CAC3B,IAAM,EAAU,IAAS,EAAS,EAElC,GAAI,EACF,GAAI,CACE,EAAS,aAAa,WAAW,CAAW,EAC3C,aAAa,QAAQ,EAAa,CAAI,EAG3C,KAAKA,GAAW,KAChB,KAAKE,GAAa,EAClB,KAAKH,GAAQ,EACb,MACF,MAAQ,CAER,CAGF,KAAKC,GAAW,EAAU,KAAO,EACjC,KAAKE,GAAa,EAClB,KAAKH,GAAQ,CACf,CAGA,QAAsB,CAEpB,OADA,KAAK,IAAI,KAAK,UAAY,OAAS,QAAU,MAAM,EAC5C,KAAK,OACd,CAcA,UAAU,EAA2C,CAInD,OAHA,KAAKI,GAAW,IAAI,CAAQ,EAC5B,KAAKC,GAAM,EACX,EAAS,KAAK,QAAS,KAAK,UAAU,MACzB,CACX,KAAKD,GAAW,OAAO,CAAQ,EAC3B,KAAKA,GAAW,OAAS,GAAG,KAAKE,GAAQ,CAC/C,CACF,CAGA,UAAU,EAAiC,CAGzC,GAFI,EAAO,aAAe,IAAA,KAAW,EAAc,EAAO,YAEtD,EAAO,QAAU,IAAA,GAAW,CAC9B,IAAM,EAAc,IAAW,OAC/B,EAAS,EAAO,MAEZ,GAAe,EAAO,QAAU,IAClC,WAAW,UAAU,gBAAgB,MAAM,eAAe,cAAc,CAE5E,CAEA,KAAKH,GAAa,EAClB,KAAKH,GAAQ,CACf,CAOA,IAAqB,CACnB,GAAI,IAAW,OAAQ,OACvB,IAAM,EAAO,WAAW,UAAU,gBAC9B,IAAM,EAAK,MAAM,YAAc,KAAKE,IAAa,aACvD,CAEA,IAAgB,CACd,IAAM,EAAO,KAAK,QACZ,EAAa,KAAK,WAKpB,SAAS,KAAKK,IAAS,IAAe,KAAKC,IAE/C,CADA,KAAKD,GAAQ,EACb,KAAKC,GAAkB,EACvB,IAAK,IAAM,KAAY,KAAKJ,GAAY,EAAS,EAAM,CAAU,CAD1C,CAEzB,CAEA,IAAc,CACR,KAAKK,KACT,KAAKA,GAAS,WAAW,aAAa,CAAU,GAAK,KACrD,KAAKA,IAAQ,iBAAiB,SAAU,KAAKC,EAAW,EACxD,WAAW,mBAAmB,UAAW,KAAKC,EAAgB,EAC9D,KAAKJ,GAAQ,KAAK,QAClB,KAAKC,GAAkB,KAAK,WAC5B,KAAKL,GAAa,EACpB,CAEA,IAAgB,CACd,KAAKM,IAAQ,oBAAoB,SAAU,KAAKC,EAAW,EAC3D,KAAKD,GAAS,KACd,WAAW,sBAAsB,UAAW,KAAKE,EAAgB,CACnE,CACF"}
|
|
1
|
+
{"version":3,"file":"color-scheme.js","names":["_storageKey","_apply","DARK_QUERY","osScheme","readStored","key","value","colorScheme","#notify","event","#session","#override","release","next","#applyToRoot","#listeners","listener","#bind","#unbind","config","wasApplying","root","overridden","#last","#lastOverridden","#media","#onOsChange","#onStorageChange"],"sources":["../src/html/color-scheme.ts"],"sourcesContent":["/**\n * Page-level light/dark state, shared by every control that shows or changes it.\n *\n * Deliberately not an element: the scheme is one value per document, and a\n * document can hold several controls for it — a header button, a menu row, a\n * settings page. Whichever one the user touches, all of them have to agree, so\n * the state belongs to the page rather than to any of them.\n *\n * The model is the one argued in Lea Verou's *Dark mode toggles should be a\n * two-state switch* (2026): three values — an explicit `light`, an explicit\n * `dark`, or no preference at all — but only two ever shown. That falls out of\n * two rules, both implemented here:\n *\n * 1. An override is stored **only when it differs from the OS preference**.\n * Choosing the scheme the OS already reports removes the override instead,\n * handing control back to the system. So a user on a dark OS who switches to\n * light and back is following the system again, not pinned to dark — and\n * \"system\" stays reachable without a third button.\n * 2. The stored value is read **only when the user acts**. If the OS flips while\n * an explicit override exists, the override survives: the user asked for it,\n * and nothing they did says otherwise.\n *\n * SSR-safe: nothing here touches `window`, `document` or `localStorage` at\n * module scope, and listeners are attached lazily on the first subscription.\n */\n\nexport type ColorScheme = 'light' | 'dark';\n\n/** Called whenever the effective scheme changes, from any source. */\nexport type ColorSchemeListener = (scheme: ColorScheme, overridden: boolean) => void;\n\n/** Where the store writes `color-scheme`, if anywhere. */\nexport type ColorSchemeApply = 'root' | false;\n\nexport interface ColorSchemeConfig {\n /**\n * `localStorage` key holding the override. Set to `''` to disable persistence\n * entirely — the choice then lasts for the session only.\n */\n storageKey?: string;\n /**\n * Write `color-scheme` on `<html>` when the scheme changes. Off by default:\n * most applications already own a color-mode story, and silently rewriting\n * `documentElement` would fight it. Turn it on for a plain page.\n */\n apply?: ColorSchemeApply;\n}\n\n/*\n * Defaults live as module-level bindings, not class fields, so that\n * `luxen-ui/vite-plugin` can bake a project's `luxen.config.mjs` values in at\n * build time by rewriting these two initialisers — the same mechanism it uses\n * for `_elementPrefix` / `_cssPrefix` in `registry.ts`. `configure()` stays the\n * runtime path for anything the build cannot know.\n */\nlet _storageKey = 'luxen-color-scheme';\nlet _apply: ColorSchemeApply = false;\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\n\n/** The OS-level preference. `light` when the query is unsupported. */\nfunction osScheme(): ColorScheme {\n return globalThis.matchMedia?.(DARK_QUERY).matches ? 'dark' : 'light';\n}\n\nfunction readStored(key: string): ColorScheme | null {\n if (!key) return null;\n try {\n const value = localStorage.getItem(key);\n return value === 'light' || value === 'dark' ? value : null;\n } catch {\n // Safari private mode, disabled storage, sandboxed iframe.\n return null;\n }\n}\n\nclass ColorSchemeStore {\n /**\n * In-memory copy of the override, used when persistence is off or when the\n * browser refuses to write. Without it a blocked write would leave every\n * control unable to move at all.\n */\n #session: ColorScheme | null = null;\n #listeners = new Set<ColorSchemeListener>();\n #media: MediaQueryList | null = null;\n #last: ColorScheme | null = null;\n #lastOverridden = false;\n\n #onOsChange = () => this.#notify();\n\n #onStorageChange = (event: StorageEvent) => {\n // `key === null` means the whole store was cleared.\n if (event.key !== null && event.key !== _storageKey) return;\n // Another tab is the authority now: drop this page's session copy so a\n // release made over there is not undone by a stale local value.\n if (_storageKey) this.#session = null;\n this.#notify();\n };\n\n /** The scheme actually in effect: a stored override, else the OS preference. */\n get current(): ColorScheme {\n return this.#override ?? osScheme();\n }\n\n /** Whether an override is in place, rather than the OS preference being followed. */\n get overridden(): boolean {\n return this.#override !== null;\n }\n\n get #override(): ColorScheme | null {\n return readStored(_storageKey) ?? this.#session;\n }\n\n /**\n * Choose a scheme. Rule 1 lives here: the override is written only when it\n * disagrees with the OS, and released when it agrees.\n */\n set(next: ColorScheme): void {\n const release = next === osScheme();\n\n if (_storageKey) {\n try {\n if (release) localStorage.removeItem(_storageKey);\n else localStorage.setItem(_storageKey, next);\n // Storage took it, so it is the single authority — drop any session copy\n // left over from a period when it was unavailable.\n this.#session = null;\n this.#applyToRoot();\n this.#notify();\n return;\n } catch {\n // Refused — fall through to memory.\n }\n }\n\n this.#session = release ? null : next;\n this.#applyToRoot();\n this.#notify();\n }\n\n /** Flip to the other scheme. Returns the scheme now in effect. */\n toggle(): ColorScheme {\n this.set(this.current === 'dark' ? 'light' : 'dark');\n return this.current;\n }\n\n /**\n * Observe the effective scheme. The listener is called **immediately with the\n * current value**, then on a user change, on an OS change with no override in\n * place, and on a change made in another tab. Returns an unsubscribe function;\n * the last unsubscribe releases the listeners.\n *\n * The immediate call is deliberate. A subscriber's job is almost always to\n * mirror the scheme somewhere — an `aria-pressed`, a `checked`, a class — and\n * a change-only contract leaves that mirror wrong until the first change,\n * which is a bug nobody sees until a screen reader hits it. Callers that only\n * want transitions can ignore the first call.\n */\n subscribe(listener: ColorSchemeListener): () => void {\n this.#listeners.add(listener);\n this.#bind();\n listener(this.current, this.overridden);\n return () => {\n this.#listeners.delete(listener);\n if (this.#listeners.size === 0) this.#unbind();\n };\n }\n\n /** Set the storage key and whether the store writes `color-scheme` on `<html>`. */\n configure(config: ColorSchemeConfig): void {\n if (config.storageKey !== undefined) _storageKey = config.storageKey;\n\n if (config.apply !== undefined) {\n const wasApplying = _apply === 'root';\n _apply = config.apply;\n // Leave no trace when application is switched off.\n if (wasApplying && config.apply === false) {\n globalThis.document?.documentElement.style.removeProperty('color-scheme');\n }\n }\n\n this.#applyToRoot();\n this.#notify();\n }\n\n /**\n * With no override, writes `light dark` rather than nothing: it declares\n * support for both schemes, so the used value follows `prefers-color-scheme`\n * and \"follow the system\" comes from the platform instead of being simulated.\n */\n #applyToRoot(): void {\n if (_apply !== 'root') return;\n const root = globalThis.document?.documentElement;\n if (root) root.style.colorScheme = this.#override ?? 'light dark';\n }\n\n #notify(): void {\n const next = this.current;\n const overridden = this.overridden;\n // Both halves of the payload are compared, not just the scheme: releasing an\n // override that already agreed with the OS leaves `current` untouched while\n // `overridden` flips, and a subscriber mirroring it — a \"following the\n // system\" badge, a tri-state settings control — would never hear about it.\n if (next === this.#last && overridden === this.#lastOverridden) return;\n this.#last = next;\n this.#lastOverridden = overridden;\n for (const listener of this.#listeners) listener(next, overridden);\n }\n\n #bind(): void {\n if (this.#media) return;\n this.#media = globalThis.matchMedia?.(DARK_QUERY) ?? null;\n this.#media?.addEventListener('change', this.#onOsChange);\n globalThis.addEventListener?.('storage', this.#onStorageChange);\n this.#last = this.current;\n this.#lastOverridden = this.overridden;\n this.#applyToRoot();\n }\n\n #unbind(): void {\n this.#media?.removeEventListener('change', this.#onOsChange);\n this.#media = null;\n globalThis.removeEventListener?.('storage', this.#onStorageChange);\n }\n}\n\n/** The document's light/dark state. One instance per page. */\nexport const colorScheme = new ColorSchemeStore();\n"],"mappings":"AAuDA,IAAIA,EAAc,qBACdC,EAA2B,GAEzBC,EAAa,+BAGnB,SAASC,GAAwB,CAC/B,OAAO,WAAW,aAAaD,CAAU,CAAC,CAAC,QAAU,OAAS,OAChE,CAEA,SAASE,EAAW,EAAiC,CACnD,GAAI,CAACC,EAAK,OAAO,KACjB,GAAI,CACF,IAAMC,EAAQ,aAAa,QAAQD,CAAG,EACtC,OAAOC,IAAU,SAAWA,IAAU,OAASA,EAAQ,IACzD,MAAQ,CAEN,OAAO,IACT,CACF,CAyJA,IAAaC,EAAc,IAAI,KAvJR,CAMrB,GAA+B,KAC/B,GAAa,IAAI,IACjB,GAAgC,KAChC,GAA4B,KAC5B,GAAkB,GAElB,OAAoB,KAAKC,GAAQ,EAEjC,GAAoB,GAAwB,EAEtCC,EAAM,MAAQ,MAAQA,EAAM,MAAQT,KAGpCA,IAAa,KAAKU,GAAW,MACjC,KAAKF,GAAQ,EACf,EAGA,IAAI,SAAuB,CACzB,OAAO,KAAKG,IAAaR,EAAS,CACpC,CAGA,IAAI,YAAsB,CACxB,OAAO,KAAKQ,KAAc,IAC5B,CAEA,GAAIA,IAAgC,CAClC,OAAOP,EAAWJ,CAAW,GAAK,KAAKU,EACzC,CAMA,IAAI,EAAyB,CAC3B,IAAME,EAAUC,IAASV,EAAS,EAElC,GAAIH,EACF,GAAI,CACEY,EAAS,aAAa,WAAWZ,CAAW,EAC3C,aAAa,QAAQA,EAAaa,CAAI,EAG3C,KAAKH,GAAW,KAChB,KAAKI,GAAa,EAClB,KAAKN,GAAQ,EACb,MACF,MAAQ,CAER,CAGF,KAAKE,GAAWE,EAAU,KAAOC,EACjC,KAAKC,GAAa,EAClB,KAAKN,GAAQ,CACf,CAGA,QAAsB,CAEpB,OADA,KAAK,IAAI,KAAK,UAAY,OAAS,QAAU,MAAM,EAC5C,KAAK,OACd,CAcA,UAAU,EAA2C,CAInD,OAHA,KAAKO,GAAW,IAAIC,CAAQ,EAC5B,KAAKC,GAAM,EACXD,EAAS,KAAK,QAAS,KAAK,UAAU,MACzB,CACX,KAAKD,GAAW,OAAOC,CAAQ,EAC3B,KAAKD,GAAW,OAAS,GAAG,KAAKG,GAAQ,CAC/C,CACF,CAGA,UAAU,EAAiC,CAGzC,GAFIC,EAAO,aAAe,IAAA,KAAW,EAAcA,EAAO,YAEtDA,EAAO,QAAU,IAAA,GAAW,CAC9B,IAAMC,EAAcnB,IAAW,OAC/B,EAASkB,EAAO,MAEZC,GAAeD,EAAO,QAAU,IAClC,WAAW,UAAU,gBAAgB,MAAM,eAAe,cAAc,CAE5E,CAEA,KAAKL,GAAa,EAClB,KAAKN,GAAQ,CACf,CAOA,IAAqB,CACnB,GAAIP,IAAW,OAAQ,OACvB,IAAMoB,EAAO,WAAW,UAAU,gBAC9BA,IAAM,EAAK,MAAM,YAAc,KAAKV,IAAa,aACvD,CAEA,IAAgB,CACd,IAAME,EAAO,KAAK,QACZS,EAAa,KAAK,WAKxB,GAAIT,IAAS,KAAKU,IAASD,IAAe,KAAKE,GAC/C,MAAKD,GAAQV,EACb,KAAKW,GAAkBF,EACvB,IAAK,IAAMN,KAAY,KAAKD,GAAYC,EAASH,EAAMS,CAAU,CAFpD,CAGf,CAEA,IAAc,CACR,KAAKG,KACT,KAAKA,GAAS,WAAW,aAAavB,CAAU,GAAK,KACrD,KAAKuB,IAAQ,iBAAiB,SAAU,KAAKC,EAAW,EACxD,WAAW,mBAAmB,UAAW,KAAKC,EAAgB,EAC9D,KAAKJ,GAAQ,KAAK,QAClB,KAAKC,GAAkB,KAAK,WAC5B,KAAKV,GAAa,EACpB,CAEA,IAAgB,CACd,KAAKW,IAAQ,oBAAoB,SAAU,KAAKC,EAAW,EAC3D,KAAKD,GAAS,KACd,WAAW,sBAAsB,UAAW,KAAKE,EAAgB,CACnE,CACF,E"}
|
package/cdn/custom-elements.json
CHANGED
|
@@ -2518,7 +2518,7 @@
|
|
|
2518
2518
|
"text": "boolean"
|
|
2519
2519
|
},
|
|
2520
2520
|
"default": "true",
|
|
2521
|
-
"description": "Wrap the matching substring of each option in `<mark
|
|
2521
|
+
"description": "Wrap the matching substring of each option in `<mark>` — the label of a\nplain option, the title and description of a rich one.",
|
|
2522
2522
|
"attribute": "highlight"
|
|
2523
2523
|
},
|
|
2524
2524
|
{
|
|
@@ -2648,7 +2648,7 @@
|
|
|
2648
2648
|
"text": "boolean"
|
|
2649
2649
|
},
|
|
2650
2650
|
"default": "true",
|
|
2651
|
-
"description": "Wrap the matching substring of each option in `<mark
|
|
2651
|
+
"description": "Wrap the matching substring of each option in `<mark>` — the label of a\nplain option, the title and description of a rich one.",
|
|
2652
2652
|
"fieldName": "highlight"
|
|
2653
2653
|
},
|
|
2654
2654
|
{
|
|
@@ -2673,6 +2673,28 @@
|
|
|
2673
2673
|
"language": "html",
|
|
2674
2674
|
"code": "<l-combobox label=\"Country\" name=\"country\" placeholder=\"Search…\">\n <datalist>\n <option value=\"us\">United States</option>\n <option value=\"fr\">France</option>\n </datalist>\n</l-combobox>"
|
|
2675
2675
|
}
|
|
2676
|
+
],
|
|
2677
|
+
"_cssClasses": [
|
|
2678
|
+
{
|
|
2679
|
+
"name": ".l-select-item-media",
|
|
2680
|
+
"description": "Rich option: leading image or icon."
|
|
2681
|
+
},
|
|
2682
|
+
{
|
|
2683
|
+
"name": ".l-select-item-text",
|
|
2684
|
+
"description": "Rich option: column holding the title and the description."
|
|
2685
|
+
},
|
|
2686
|
+
{
|
|
2687
|
+
"name": ".l-select-item-title",
|
|
2688
|
+
"description": "Rich option: title, truncated with an ellipsis. Used as the label when the option has no `label`."
|
|
2689
|
+
},
|
|
2690
|
+
{
|
|
2691
|
+
"name": ".l-select-item-description",
|
|
2692
|
+
"description": "Rich option: secondary line, shown in the listbox only."
|
|
2693
|
+
},
|
|
2694
|
+
{
|
|
2695
|
+
"name": ".l-select-item-suffix",
|
|
2696
|
+
"description": "Rich option: trailing badge, count or status icon on the title's line. Kept out of the input and the filter."
|
|
2697
|
+
}
|
|
2676
2698
|
]
|
|
2677
2699
|
}
|
|
2678
2700
|
],
|
|
@@ -5905,7 +5927,7 @@
|
|
|
5905
5927
|
},
|
|
5906
5928
|
"tagName": "l-prose-editor",
|
|
5907
5929
|
"customElement": true,
|
|
5908
|
-
"summary": "A rich text editor built on Tiptap (ProseMirror). Form-associated: its value is the editor HTML.\n\n### Keyboard — APG Toolbar pattern\nThe generated toolbar buttons follow the\n[APG Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/):\nexactly one button holds `tabindex=\"0\"` at a time (roving tabindex).\n**ArrowRight** / **ArrowLeft** move focus to the next / previous button,\nwrapping around. **Home** / **End** jump to the first / last button.\nA single Tab enters and leaves the toolbar without stepping through every\nbutton. Slotted `toolbar-start` / `toolbar-end` focusables are excluded\nfrom roving management — they are consumer-controlled content and their\ntab order is handled by the consumer."
|
|
5930
|
+
"summary": "A rich text editor built on Tiptap (ProseMirror). Form-associated: its value is the editor HTML.\n\n### Keyboard — APG Toolbar pattern\nThe generated toolbar buttons follow the\n[APG Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/):\nexactly one button holds `tabindex=\"0\"` at a time (roving tabindex).\n**ArrowRight** / **ArrowLeft** move focus to the next / previous button,\nwrapping around. **Home** / **End** jump to the first / last button.\nA single Tab enters and leaves the toolbar without stepping through every\nbutton. Slotted `toolbar-start` / `toolbar-end` focusables are excluded\nfrom roving management — they are consumer-controlled content and their\ntab order is handled by the consumer.\n\n### Pointer — focus stays in the editor\nPressing a generated toolbar button keeps focus and the selection in the\neditor. Emoji opens its picker and moves focus into it; closing the picker\nwithout picking (Escape, or Emoji again) returns focus to where it was, the\neditor's caret intact. Slotted content keeps its native press behavior, so a\nslotted input or select still takes focus. A slotted button that runs an\neditor command should do the same as the generated ones\nand cancel its own `mousedown` default\n(`button.addEventListener('mousedown', (e) => e.preventDefault())`), so the\neditor doesn't blur and the command applies to the user's selection."
|
|
5909
5931
|
}
|
|
5910
5932
|
],
|
|
5911
5933
|
"exports": [
|
|
@@ -6916,6 +6938,28 @@
|
|
|
6916
6938
|
"language": "html",
|
|
6917
6939
|
"code": "<l-select label=\"Country\" name=\"country\" placeholder=\"Select a country…\">\n <datalist>\n <option value=\"us\">United States</option>\n <option value=\"fr\" selected>France</option>\n </datalist>\n</l-select>"
|
|
6918
6940
|
}
|
|
6941
|
+
],
|
|
6942
|
+
"_cssClasses": [
|
|
6943
|
+
{
|
|
6944
|
+
"name": ".l-select-item-media",
|
|
6945
|
+
"description": "Rich option: leading image or icon."
|
|
6946
|
+
},
|
|
6947
|
+
{
|
|
6948
|
+
"name": ".l-select-item-text",
|
|
6949
|
+
"description": "Rich option: column holding the title and the description."
|
|
6950
|
+
},
|
|
6951
|
+
{
|
|
6952
|
+
"name": ".l-select-item-title",
|
|
6953
|
+
"description": "Rich option: title, truncated with an ellipsis. Used as the label when the option has no `label`."
|
|
6954
|
+
},
|
|
6955
|
+
{
|
|
6956
|
+
"name": ".l-select-item-description",
|
|
6957
|
+
"description": "Rich option: secondary line, shown in the listbox only."
|
|
6958
|
+
},
|
|
6959
|
+
{
|
|
6960
|
+
"name": ".l-select-item-suffix",
|
|
6961
|
+
"description": "Rich option: trailing badge, count or status icon on the title's line. Kept out of the trigger, the chips and the search."
|
|
6962
|
+
}
|
|
6919
6963
|
]
|
|
6920
6964
|
}
|
|
6921
6965
|
],
|
package/cdn/define.d.ts
CHANGED
package/cdn/define.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define.js","names":[],"sources":["../src/html/define.ts"],"sourcesContent":["import { markRegistered, isRegistered, tagName, type ElementBaseName } from './registry.js';\n\n/**\n * Register a Luxen element with the custom elements registry.\n *\n * @param baseName - The element's base name (e.g. `'badge'`, `'toast-item'`).\n * @param elementClass - The custom element class to define.\n */\nexport function define(baseName: ElementBaseName, elementClass: CustomElementConstructor): void {\n if (isRegistered(baseName)) return;\n markRegistered(baseName);\n const tag = tagName(baseName);\n if (!customElements.get(tag)) {\n customElements.define(tag, elementClass);\n }\n}\n"],"mappings":"8EAQA,
|
|
1
|
+
{"version":3,"file":"define.js","names":["define","isRegistered","baseName","markRegistered","tag","tagName","elementClass"],"sources":["../src/html/define.ts"],"sourcesContent":["import { markRegistered, isRegistered, tagName, type ElementBaseName } from './registry.js';\n\n/**\n * Register a Luxen element with the custom elements registry.\n *\n * @param baseName - The element's base name (e.g. `'badge'`, `'toast-item'`).\n * @param elementClass - The custom element class to define.\n */\nexport function define(baseName: ElementBaseName, elementClass: CustomElementConstructor): void {\n if (isRegistered(baseName)) return;\n markRegistered(baseName);\n const tag = tagName(baseName);\n if (!customElements.get(tag)) {\n customElements.define(tag, elementClass);\n }\n}\n"],"mappings":"A,8EAQA,SAAgBA,EAAO,EAA2B,EAA8C,CAC9F,GAAIC,EAAaC,CAAQ,EAAG,OAC5BC,EAAeD,CAAQ,EACvB,IAAME,EAAMC,EAAQH,CAAQ,EACvB,eAAe,IAAIE,CAAG,GACzB,eAAe,OAAOA,EAAKE,CAAY,CAE3C,C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/html/elements/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAK7D,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAWrE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,KAAM,SAAQ,YAAY;IAC5B,gBAAgB;
|
|
1
|
+
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/html/elements/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAK7D,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAWrE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,KAAM,SAAQ,YAAY;IAC5B,gBAAgB,SAExB;IAED,uFAAuF;IAEvF,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,oFAAoF;IAEpF,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,sCAAsC;IAEtC,WAAW,UAAS;IAEpB,iEAAiE;IAEjE,WAAW,UAAS;IAEpB,OAAO,CAAC,SAAS,CAAgC;IACjD,OAAO,CAAC,aAAa,CAAC,CAAgC;IAKtD,OAAO,CAAC,SAAS,CAA4C;IAEpD,iBAAiB,SAGzB;IAEQ,oBAAoB,SAI5B;IAEQ,OAAO,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,QAE9C;IAED,mFAAmF;IACnF,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,SAAS;IAsBjB;;;;;OAKG;IACH,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,QAAQ,CAQd;IAEF,OAAO,CAAC,WAAW;CA4BpB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import"../../chunks/iconify-icon.js";import{r as e,t}from"../../chunks/decorate.js";import{LuxenElement as n}from"../../shared/luxen-element.js";import{LocalizeController as r}from"../../shared/localize.js";import{cls as i}from"../../registry.js";import{HideEvent as a}from"../../events/hide.js";import{AfterHideEvent as o}from"../../events/after-hide.js";var s={neutral:`lucide:info`,info:`lucide:info`,success:`lucide:circle-check`,warning:`lucide:triangle-alert`,danger:`lucide:octagon-alert`},c=class extends n{constructor(...e){super(...e),this.withoutIcon=!1,this.dismissible=!1,this._localize=new r(this),this._observer=new MutationObserver(()=>this._sync()),this._dismiss=()=>{this.hasAttribute(`data-dismissing`)||this.dispatchEvent(new a)&&this.isConnected&&this._animateOut()}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this._sync()}disconnectedCallback(){super.disconnectedCallback(),this._observer.disconnect(),this._dismissTimer&&clearTimeout(this._dismissTimer)}updated(e){this._sync()}_sync(){this._observer.disconnect(),this._syncIcon(),this._syncContent(),this._syncClose(),this.isConnected&&this._observer.observe(this,{childList:!0})}_iconName(){return this.withoutIcon?null:this.icon?this.icon:s[this.variant??`neutral`]}_syncIcon(){let e=i(`alert-icon`),t=this.querySelector(`:scope > .${e}`),n=this._iconName();n?(t?this.firstElementChild!==t&&this.prepend(t):(t=document.createElement(`iconify-icon`),t.className=e,t.setAttribute(`aria-hidden`,`true`),this.prepend(t)),t.getAttribute(`icon`)!==n&&t.setAttribute(`icon`,n)):t?.remove()}_syncContent(){let e=i(`alert-content`),t=i(`alert-icon`),n=i(`close`),r=this.querySelector(`:scope > .${e}`);r||(r=document.createElement(`div`),r.className=e,this.append(r));for(let e of Array.from(this.childNodes))if(e!==r){if(e.nodeType===Node.ELEMENT_NODE){let r=e;if(r.classList.contains(t)||r.classList.contains(n))continue}else if(e.nodeType!==Node.TEXT_NODE)continue;r.append(e)}}_syncClose(){let e=i(`close`),t=this.querySelector(`:scope > .${e}[data-alert-close]`);this.dismissible?(t?this.lastElementChild!==t&&this.append(t):(t=document.createElement(`button`),t.type=`button`,t.className=e,t.dataset.appearance=`ring`,t.dataset.alertClose=``,t.addEventListener(`click`,this._dismiss),this.append(t)),t.setAttribute(`aria-label`,this._localize.term(`close`))):t?.remove()}_animateOut(){this.setAttribute(`data-dismissing`,``);let e=!1,t=()=>{e||(e=!0,this.removeEventListener(`transitionend`,n),this._dismissTimer&&clearTimeout(this._dismissTimer),this.dispatchEvent(new o),this.remove())},n=e=>{e.target===this&&t()},r=parseFloat(getComputedStyle(this).transitionDuration)*1e3;r?(this.addEventListener(`transitionend`,n),this._dismissTimer=setTimeout(t,r+50)):t()}};t([e({reflect:!0})],c.prototype,`variant`,void 0),t([e()],c.prototype,`icon`,void 0),t([e({attribute:`without-icon`,type:Boolean})],c.prototype,`withoutIcon`,void 0),t([e({type:Boolean,reflect:!0})],c.prototype,`dismissible`,void 0);export{c as Alert};
|
|
2
2
|
//# sourceMappingURL=alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.js","names":[],"sources":["../../../src/html/elements/alert/alert.ts"],"sourcesContent":["import 'iconify-icon';\nimport type { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport { LocalizeController } from '../../shared/localize.js';\nimport { cls } from '../../registry.js';\nimport { HideEvent, AfterHideEvent } from '../../events/index.js';\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'danger';\n\n/** Default Iconify icon per variant (neutral falls back to the info glyph). */\nconst DEFAULT_ICONS: Record<string, string> = {\n neutral: 'lucide:info',\n info: 'lucide:info',\n success: 'lucide:circle-check',\n warning: 'lucide:triangle-alert',\n danger: 'lucide:octagon-alert',\n};\n\n/**\n * @summary A callout box that highlights contextual information with a semantic color and a leading icon.\n * @customElement l-alert\n *\n * @event hide - Emitted when a dismissible alert is about to close. Cancelable — call `event.preventDefault()` to keep it open.\n * @event after-hide - Emitted after the dismiss animation completes and the alert is removed from the DOM. Not cancelable.\n *\n * @cssproperty [--gap=0.75rem] - Gap between the icon, content, and close button.\n * @cssproperty [--padding=1rem] - Inner padding.\n * @cssproperty [--border-radius=8px] - Corner radius.\n *\n * @cssClass .l-alert-icon - The leading icon, colored by variant (auto-injected).\n * @cssClass .l-alert-content - Wrapper the authored children are moved into; stacks them vertically (auto-injected).\n * @cssClass .l-alert-title - Optional bold heading placed above the body content. Use a real heading element (e.g. `<h3 class=\"l-alert-title\">`) when the alert is a section callout so it is reachable by heading navigation.\n *\n * @example\n * ```html\n * <l-alert variant=\"warning\" dismissible>\n * <span class=\"l-alert-title\">Heads up</span>\n * This action cannot be undone.\n * </l-alert>\n * ```\n */\nexport class Alert extends LuxenElement {\n override createRenderRoot() {\n return this;\n }\n\n /** Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral. */\n @property({ reflect: true })\n variant?: AlertVariant;\n\n /** Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon. */\n @property()\n icon?: string;\n\n /** Hide the leading icon entirely. */\n @property({ attribute: 'without-icon', type: Boolean })\n withoutIcon = false;\n\n /** Show a close button that dismisses the alert when clicked. */\n @property({ type: Boolean, reflect: true })\n dismissible = false;\n\n private _localize = new LocalizeController(this);\n private _dismissTimer?: ReturnType<typeof setTimeout>;\n // Re-home children the parser (upgrade-before-parse) or the consumer\n // (imperative `append`) adds directly to the host after a sync. Lit's\n // `updated()` only fires on reactive-property changes, so without this an\n // appended text-node body would escape `.l-alert-content`.\n private _observer = new MutationObserver(() => this._sync());\n\n override connectedCallback() {\n super.connectedCallback();\n this._sync();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this._observer.disconnect();\n if (this._dismissTimer) clearTimeout(this._dismissTimer);\n }\n\n override updated(_changed: PropertyValues<this>) {\n this._sync();\n }\n\n /** Idempotently reconcile the injected icon, content wrapper, and close button. */\n private _sync() {\n // Pause the observer so our own DOM moves below don't re-trigger it.\n this._observer.disconnect();\n this._syncIcon();\n this._syncContent();\n this._syncClose();\n if (this.isConnected) this._observer.observe(this, { childList: true });\n }\n\n private _iconName(): string | null {\n if (this.withoutIcon) return null;\n if (this.icon) return this.icon;\n return DEFAULT_ICONS[this.variant ?? 'neutral'];\n }\n\n private _syncIcon() {\n const iconClass = cls('alert-icon');\n let iconEl = this.querySelector<HTMLElement>(`:scope > .${iconClass}`);\n const name = this._iconName();\n\n if (!name) {\n iconEl?.remove();\n return;\n }\n\n if (!iconEl) {\n iconEl = document.createElement('iconify-icon');\n iconEl.className = iconClass;\n iconEl.setAttribute('aria-hidden', 'true');\n this.prepend(iconEl);\n } else if (this.firstElementChild !== iconEl) {\n this.prepend(iconEl);\n }\n\n if (iconEl.getAttribute('icon') !== name) iconEl.setAttribute('icon', name);\n }\n\n /**\n * Move the authored children into a `.l-alert-content` wrapper so they stack\n * as one column regardless of node type. A wrapper (rather than placing bare\n * children directly) is required because text nodes — a plain string body —\n * cannot be targeted by CSS, so they would otherwise escape the layout.\n */\n private _syncContent() {\n const contentClass = cls('alert-content');\n const iconClass = cls('alert-icon');\n const closeClass = cls('close');\n\n let content = this.querySelector<HTMLElement>(`:scope > .${contentClass}`);\n if (!content) {\n content = document.createElement('div');\n content.className = contentClass;\n this.append(content);\n }\n\n for (const node of Array.from(this.childNodes)) {\n if (node === content) continue;\n if (node.nodeType === Node.ELEMENT_NODE) {\n const el = node as Element;\n if (el.classList.contains(iconClass) || el.classList.contains(closeClass)) continue;\n } else if (node.nodeType !== Node.TEXT_NODE) {\n // Leave comment/marker nodes in place — notably Lit's empty\n // ChildPart marker (`<!---->`) from the default light-DOM render.\n continue;\n }\n content.append(node);\n }\n }\n\n private _syncClose() {\n const closeClass = cls('close');\n let btn = this.querySelector<HTMLButtonElement>(`:scope > .${closeClass}[data-alert-close]`);\n\n if (!this.dismissible) {\n btn?.remove();\n return;\n }\n\n if (!btn) {\n btn = document.createElement('button');\n btn.type = 'button';\n btn.className = closeClass;\n btn.dataset.appearance = 'ring';\n btn.dataset.alertClose = '';\n btn.addEventListener('click', this._dismiss);\n this.append(btn);\n } else if (this.lastElementChild !== btn) {\n this.append(btn);\n }\n\n btn.setAttribute('aria-label', this._localize.term('close'));\n }\n\n private _dismiss = () => {\n // Ignore repeat activations (fast double-click / double AT activation)\n // once a dismissal is already animating out.\n if (this.hasAttribute('data-dismissing')) return;\n if (!this.dispatchEvent(new HideEvent())) return;\n // A `hide` listener may have removed the alert itself; don't animate a\n // node that is no longer in the document.\n if (this.isConnected) this._animateOut();\n };\n\n private _animateOut() {\n this.setAttribute('data-dismissing', '');\n\n let done = false;\n const finish = () => {\n if (done) return;\n done = true;\n this.removeEventListener('transitionend', onEnd);\n if (this._dismissTimer) clearTimeout(this._dismissTimer);\n this.dispatchEvent(new AfterHideEvent());\n this.remove();\n };\n const onEnd = (e: TransitionEvent) => {\n if (e.target !== this) return;\n finish();\n };\n\n const duration = parseFloat(getComputedStyle(this).transitionDuration) * 1000;\n if (!duration) {\n finish();\n return;\n }\n\n this.addEventListener('transitionend', onEnd);\n // Fallback: hidden Preview tabs never fire `transitionend`. Tracked so\n // `disconnectedCallback` can cancel it if the alert is removed mid-animation.\n this._dismissTimer = setTimeout(finish, duration + 50);\n }\n}\n"],"mappings":"yWAWA,IAAM,EAAwC,CAC5C,QAAS,cACT,KAAM,cACN,QAAS,sBACT,QAAS,wBACT,OAAQ,sBACV,EAyBa,EAAb,cAA2B,CAAa,gDAexB,oBAIA,kBAEM,IAAI,EAAmB,IAAI,iBAM3B,IAAI,qBAAuB,KAAK,MAAM,CAAC,oBA+GlC,CAGnB,KAAK,aAAa,iBAAiB,GAClC,KAAK,cAAc,IAAI,CAAW,GAGnC,KAAK,aAAa,KAAK,YAAY,CACzC,EAjJA,kBAA4B,CAC1B,OAAO,IACT,CA0BA,mBAA6B,CAC3B,MAAM,kBAAkB,EACxB,KAAK,MAAM,CACb,CAEA,sBAAgC,CAC9B,MAAM,qBAAqB,EAC3B,KAAK,UAAU,WAAW,EACtB,KAAK,eAAe,aAAa,KAAK,aAAa,CACzD,CAEA,QAAiB,EAAgC,CAC/C,KAAK,MAAM,CACb,CAGA,OAAgB,CAEd,KAAK,UAAU,WAAW,EAC1B,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,WAAW,EACZ,KAAK,aAAa,KAAK,UAAU,QAAQ,KAAM,CAAE,UAAW,EAAK,CAAC,CACxE,CAEA,WAAmC,CAGjC,OAFI,KAAK,YAAoB,KACzB,KAAK,KAAa,KAAK,KACpB,EAAc,KAAK,SAAW,UACvC,CAEA,WAAoB,CAClB,IAAM,EAAY,EAAI,YAAY,EAC9B,EAAS,KAAK,cAA2B,aAAa,GAAW,EAC/D,EAAO,KAAK,UAAU,EAE5B,GAAI,CAAC,EAAM,CACT,GAAQ,OAAO,EACf,MACF,CAEK,EAKM,KAAK,oBAAsB,GACpC,KAAK,QAAQ,CAAM,GALnB,EAAS,SAAS,cAAc,cAAc,EAC9C,EAAO,UAAY,EACnB,EAAO,aAAa,cAAe,MAAM,EACzC,KAAK,QAAQ,CAAM,GAKjB,EAAO,aAAa,MAAM,IAAM,GAAM,EAAO,aAAa,OAAQ,CAAI,CAC5E,CAQA,cAAuB,CACrB,IAAM,EAAe,EAAI,eAAe,EAClC,EAAY,EAAI,YAAY,EAC5B,EAAa,EAAI,OAAO,EAE1B,EAAU,KAAK,cAA2B,aAAa,GAAc,EACpE,IACH,EAAU,SAAS,cAAc,KAAK,EACtC,EAAQ,UAAY,EACpB,KAAK,OAAO,CAAO,GAGrB,IAAK,IAAM,KAAQ,MAAM,KAAK,KAAK,UAAU,EACvC,OAAS,EACb,IAAI,EAAK,WAAa,KAAK,aAAc,CACvC,IAAM,EAAK,EACX,GAAI,EAAG,UAAU,SAAS,CAAS,GAAK,EAAG,UAAU,SAAS,CAAU,EAAG,QAC7E,MAAO,GAAI,EAAK,WAAa,KAAK,UAGhC,SAEF,EAAQ,OAAO,CAAI,CAFjB,CAIN,CAEA,YAAqB,CACnB,IAAM,EAAa,EAAI,OAAO,EAC1B,EAAM,KAAK,cAAiC,aAAa,EAAW,mBAAmB,EAE3F,GAAI,CAAC,KAAK,YAAa,CACrB,GAAK,OAAO,EACZ,MACF,CAEK,EAQM,KAAK,mBAAqB,GACnC,KAAK,OAAO,CAAG,GARf,EAAM,SAAS,cAAc,QAAQ,EACrC,EAAI,KAAO,SACX,EAAI,UAAY,EAChB,EAAI,QAAQ,WAAa,OACzB,EAAI,QAAQ,WAAa,GACzB,EAAI,iBAAiB,QAAS,KAAK,QAAQ,EAC3C,KAAK,OAAO,CAAG,GAKjB,EAAI,aAAa,aAAc,KAAK,UAAU,KAAK,OAAO,CAAC,CAC7D,CAYA,aAAsB,CACpB,KAAK,aAAa,kBAAmB,EAAE,EAEvC,IAAI,EAAO,GACL,MAAe,CACf,IACJ,EAAO,GACP,KAAK,oBAAoB,gBAAiB,CAAK,EAC3C,KAAK,eAAe,aAAa,KAAK,aAAa,EACvD,KAAK,cAAc,IAAI,CAAgB,EACvC,KAAK,OAAO,EACd,EACM,EAAS,GAAuB,CAChC,EAAE,SAAW,MACjB,EAAO,CACT,EAEM,EAAW,WAAW,iBAAiB,IAAI,CAAC,CAAC,kBAAkB,EAAI,IACzE,GAAI,CAAC,EAAU,CACb,EAAO,EACP,MACF,CAEA,KAAK,iBAAiB,gBAAiB,CAAK,EAG5C,KAAK,cAAgB,WAAW,EAAQ,EAAW,EAAE,CACvD,CACF,KA1KG,EAAS,CAAE,QAAS,EAAK,CAAC,CAAA,EAAA,EAAA,UAAA,UAAA,IAAA,EAAA,KAI1B,EAAS,CAAA,EAAA,EAAA,UAAA,OAAA,IAAA,EAAA,KAIT,EAAS,CAAE,UAAW,eAAgB,KAAM,OAAQ,CAAC,CAAA,EAAA,EAAA,UAAA,cAAA,IAAA,EAAA,KAIrD,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,CAAA,EAAA,EAAA,UAAA,cAAA,IAAA,EAAA"}
|
|
1
|
+
{"version":3,"file":"alert.js","names":["_decorate","property","n","DEFAULT_ICONS","Alert","LuxenElement","_args","LocalizeController","HideEvent","iconClass","cls","iconEl","name","contentClass","closeClass","content","node","el","btn","done","finish","onEnd","AfterHideEvent","duration","__decorate"],"sources":["../../../src/html/elements/alert/alert.ts"],"sourcesContent":["import 'iconify-icon';\nimport type { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport { LocalizeController } from '../../shared/localize.js';\nimport { cls } from '../../registry.js';\nimport { HideEvent, AfterHideEvent } from '../../events/index.js';\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'danger';\n\n/** Default Iconify icon per variant (neutral falls back to the info glyph). */\nconst DEFAULT_ICONS: Record<string, string> = {\n neutral: 'lucide:info',\n info: 'lucide:info',\n success: 'lucide:circle-check',\n warning: 'lucide:triangle-alert',\n danger: 'lucide:octagon-alert',\n};\n\n/**\n * @summary A callout box that highlights contextual information with a semantic color and a leading icon.\n * @customElement l-alert\n *\n * @event hide - Emitted when a dismissible alert is about to close. Cancelable — call `event.preventDefault()` to keep it open.\n * @event after-hide - Emitted after the dismiss animation completes and the alert is removed from the DOM. Not cancelable.\n *\n * @cssproperty [--gap=0.75rem] - Gap between the icon, content, and close button.\n * @cssproperty [--padding=1rem] - Inner padding.\n * @cssproperty [--border-radius=8px] - Corner radius.\n *\n * @cssClass .l-alert-icon - The leading icon, colored by variant (auto-injected).\n * @cssClass .l-alert-content - Wrapper the authored children are moved into; stacks them vertically (auto-injected).\n * @cssClass .l-alert-title - Optional bold heading placed above the body content. Use a real heading element (e.g. `<h3 class=\"l-alert-title\">`) when the alert is a section callout so it is reachable by heading navigation.\n *\n * @example\n * ```html\n * <l-alert variant=\"warning\" dismissible>\n * <span class=\"l-alert-title\">Heads up</span>\n * This action cannot be undone.\n * </l-alert>\n * ```\n */\nexport class Alert extends LuxenElement {\n override createRenderRoot() {\n return this;\n }\n\n /** Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral. */\n @property({ reflect: true })\n variant?: AlertVariant;\n\n /** Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon. */\n @property()\n icon?: string;\n\n /** Hide the leading icon entirely. */\n @property({ attribute: 'without-icon', type: Boolean })\n withoutIcon = false;\n\n /** Show a close button that dismisses the alert when clicked. */\n @property({ type: Boolean, reflect: true })\n dismissible = false;\n\n private _localize = new LocalizeController(this);\n private _dismissTimer?: ReturnType<typeof setTimeout>;\n // Re-home children the parser (upgrade-before-parse) or the consumer\n // (imperative `append`) adds directly to the host after a sync. Lit's\n // `updated()` only fires on reactive-property changes, so without this an\n // appended text-node body would escape `.l-alert-content`.\n private _observer = new MutationObserver(() => this._sync());\n\n override connectedCallback() {\n super.connectedCallback();\n this._sync();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this._observer.disconnect();\n if (this._dismissTimer) clearTimeout(this._dismissTimer);\n }\n\n override updated(_changed: PropertyValues<this>) {\n this._sync();\n }\n\n /** Idempotently reconcile the injected icon, content wrapper, and close button. */\n private _sync() {\n // Pause the observer so our own DOM moves below don't re-trigger it.\n this._observer.disconnect();\n this._syncIcon();\n this._syncContent();\n this._syncClose();\n if (this.isConnected) this._observer.observe(this, { childList: true });\n }\n\n private _iconName(): string | null {\n if (this.withoutIcon) return null;\n if (this.icon) return this.icon;\n return DEFAULT_ICONS[this.variant ?? 'neutral'];\n }\n\n private _syncIcon() {\n const iconClass = cls('alert-icon');\n let iconEl = this.querySelector<HTMLElement>(`:scope > .${iconClass}`);\n const name = this._iconName();\n\n if (!name) {\n iconEl?.remove();\n return;\n }\n\n if (!iconEl) {\n iconEl = document.createElement('iconify-icon');\n iconEl.className = iconClass;\n iconEl.setAttribute('aria-hidden', 'true');\n this.prepend(iconEl);\n } else if (this.firstElementChild !== iconEl) {\n this.prepend(iconEl);\n }\n\n if (iconEl.getAttribute('icon') !== name) iconEl.setAttribute('icon', name);\n }\n\n /**\n * Move the authored children into a `.l-alert-content` wrapper so they stack\n * as one column regardless of node type. A wrapper (rather than placing bare\n * children directly) is required because text nodes — a plain string body —\n * cannot be targeted by CSS, so they would otherwise escape the layout.\n */\n private _syncContent() {\n const contentClass = cls('alert-content');\n const iconClass = cls('alert-icon');\n const closeClass = cls('close');\n\n let content = this.querySelector<HTMLElement>(`:scope > .${contentClass}`);\n if (!content) {\n content = document.createElement('div');\n content.className = contentClass;\n this.append(content);\n }\n\n for (const node of Array.from(this.childNodes)) {\n if (node === content) continue;\n if (node.nodeType === Node.ELEMENT_NODE) {\n const el = node as Element;\n if (el.classList.contains(iconClass) || el.classList.contains(closeClass)) continue;\n } else if (node.nodeType !== Node.TEXT_NODE) {\n // Leave comment/marker nodes in place — notably Lit's empty\n // ChildPart marker (`<!---->`) from the default light-DOM render.\n continue;\n }\n content.append(node);\n }\n }\n\n private _syncClose() {\n const closeClass = cls('close');\n let btn = this.querySelector<HTMLButtonElement>(`:scope > .${closeClass}[data-alert-close]`);\n\n if (!this.dismissible) {\n btn?.remove();\n return;\n }\n\n if (!btn) {\n btn = document.createElement('button');\n btn.type = 'button';\n btn.className = closeClass;\n btn.dataset.appearance = 'ring';\n btn.dataset.alertClose = '';\n btn.addEventListener('click', this._dismiss);\n this.append(btn);\n } else if (this.lastElementChild !== btn) {\n this.append(btn);\n }\n\n btn.setAttribute('aria-label', this._localize.term('close'));\n }\n\n private _dismiss = () => {\n // Ignore repeat activations (fast double-click / double AT activation)\n // once a dismissal is already animating out.\n if (this.hasAttribute('data-dismissing')) return;\n if (!this.dispatchEvent(new HideEvent())) return;\n // A `hide` listener may have removed the alert itself; don't animate a\n // node that is no longer in the document.\n if (this.isConnected) this._animateOut();\n };\n\n private _animateOut() {\n this.setAttribute('data-dismissing', '');\n\n let done = false;\n const finish = () => {\n if (done) return;\n done = true;\n this.removeEventListener('transitionend', onEnd);\n if (this._dismissTimer) clearTimeout(this._dismissTimer);\n this.dispatchEvent(new AfterHideEvent());\n this.remove();\n };\n const onEnd = (e: TransitionEvent) => {\n if (e.target !== this) return;\n finish();\n };\n\n const duration = parseFloat(getComputedStyle(this).transitionDuration) * 1000;\n if (!duration) {\n finish();\n return;\n }\n\n this.addEventListener('transitionend', onEnd);\n // Fallback: hidden Preview tabs never fire `transitionend`. Tracked so\n // `disconnectedCallback` can cancel it if the alert is removed mid-animation.\n this._dismissTimer = setTimeout(finish, duration + 50);\n }\n}\n"],"mappings":"A,oWAWA,IAAMG,EAAwC,CAC5C,QAAS,cACT,KAAM,cACN,QAAS,sBACT,QAAS,wBACT,OAAQ,sBACV,EAyBaC,EAAb,cAA2BC,CAAa,C,8BAexB,KAAA,YAAA,GAIA,KAAA,YAAA,GAEM,KAAA,UAAA,IAAIE,EAAmB,IAAI,EAM3B,KAAA,UAAA,IAAI,qBAAuB,KAAK,MAAM,CAAC,EA+GlC,KAAA,aAAA,CAGnB,KAAK,aAAa,iBAAiB,GAClC,KAAK,cAAc,IAAIC,CAAW,GAGnC,KAAK,aAAa,KAAK,YAAY,CACzC,C,CAjJA,kBAA4B,CAC1B,OAAO,IACT,CA0BA,mBAA6B,CAC3B,MAAM,kBAAkB,EACxB,KAAK,MAAM,CACb,CAEA,sBAAgC,CAC9B,MAAM,qBAAqB,EAC3B,KAAK,UAAU,WAAW,EACtB,KAAK,eAAe,aAAa,KAAK,aAAa,CACzD,CAEA,QAAiB,EAAgC,CAC/C,KAAK,MAAM,CACb,CAGA,OAAgB,CAEd,KAAK,UAAU,WAAW,EAC1B,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,WAAW,EACZ,KAAK,aAAa,KAAK,UAAU,QAAQ,KAAM,CAAE,UAAW,EAAK,CAAC,CACxE,CAEA,WAAmC,CAGjC,OAFI,KAAK,YAAoB,KACzB,KAAK,KAAa,KAAK,KACpBL,EAAc,KAAK,SAAW,UACvC,CAEA,WAAoB,CAClB,IAAMM,EAAYC,EAAI,YAAY,EAC9BC,EAAS,KAAK,cAA2B,aAAaF,GAAW,EAC/DG,EAAO,KAAK,UAAU,EAEvBA,GAKAD,EAKM,KAAK,oBAAsBA,GACpC,KAAK,QAAQA,CAAM,GALnB,EAAS,SAAS,cAAc,cAAc,EAC9C,EAAO,UAAYF,EACnBE,EAAO,aAAa,cAAe,MAAM,EACzC,KAAK,QAAQA,CAAM,GAKjBA,EAAO,aAAa,MAAM,IAAMC,GAAMD,EAAO,aAAa,OAAQC,CAAI,GAbxED,GAAQ,OAAO,CAcnB,CAQA,cAAuB,CACrB,IAAME,EAAeH,EAAI,eAAe,EAClCD,EAAYC,EAAI,YAAY,EAC5BI,EAAaJ,EAAI,OAAO,EAE1BK,EAAU,KAAK,cAA2B,aAAaF,GAAc,EACpEE,IACH,EAAU,SAAS,cAAc,KAAK,EACtC,EAAQ,UAAYF,EACpB,KAAK,OAAOE,CAAO,GAGrB,IAAK,IAAMC,KAAQ,MAAM,KAAK,KAAK,UAAU,EAC3C,GAAIA,IAASD,EACb,IAAIC,EAAK,WAAa,KAAK,aAAc,CACvC,IAAMC,EAAKD,EACX,GAAIC,EAAG,UAAU,SAASR,CAAS,GAAKQ,EAAG,UAAU,SAASH,CAAU,EAAG,QAC7E,MAAO,GAAIE,EAAK,WAAa,KAAK,UAGhC,SAEFD,EAAQ,OAAOC,CAAI,CAFjB,CAIN,CAEA,YAAqB,CACnB,IAAMF,EAAaJ,EAAI,OAAO,EAC1BQ,EAAM,KAAK,cAAiC,aAAaJ,EAAW,mBAAmB,EAEtF,KAAK,aAKLI,EAQM,KAAK,mBAAqBA,GACnC,KAAK,OAAOA,CAAG,GARf,EAAM,SAAS,cAAc,QAAQ,EACrC,EAAI,KAAO,SACX,EAAI,UAAYJ,EAChB,EAAI,QAAQ,WAAa,OACzB,EAAI,QAAQ,WAAa,GACzBI,EAAI,iBAAiB,QAAS,KAAK,QAAQ,EAC3C,KAAK,OAAOA,CAAG,GAKjBA,EAAI,aAAa,aAAc,KAAK,UAAU,KAAK,OAAO,CAAC,GAhBzDA,GAAK,OAAO,CAiBhB,CAYA,aAAsB,CACpB,KAAK,aAAa,kBAAmB,EAAE,EAEvC,IAAIC,EAAO,GACLC,MAAe,CACfD,IACJ,EAAO,GACP,KAAK,oBAAoB,gBAAiBE,CAAK,EAC3C,KAAK,eAAe,aAAa,KAAK,aAAa,EACvD,KAAK,cAAc,IAAIC,CAAgB,EACvC,KAAK,OAAO,EACd,EACMD,EAAS,GAAuB,CAChC,EAAE,SAAW,MACjBD,EAAO,CACT,EAEMG,EAAW,WAAW,iBAAiB,IAAI,CAAC,CAAC,kBAAkB,EAAI,IACpEA,GAKL,KAAK,iBAAiB,gBAAiBF,CAAK,EAG5C,KAAK,cAAgB,WAAWD,EAAQG,EAAW,EAAE,GAPnDH,EAAO,CAQX,CACF,EA1KGpB,EAAA,CAAAC,EAAS,CAAE,QAAS,EAAK,CAAC,CAAA,EAAAG,EAAA,UAAA,UAAA,IAAA,EAAA,EAI1BJ,EAAA,CAAAC,EAAS,CAAA,EAAAG,EAAA,UAAA,OAAA,IAAA,EAAA,EAITJ,EAAA,CAAAC,EAAS,CAAE,UAAW,eAAgB,KAAM,OAAQ,CAAC,CAAA,EAAAG,EAAA,UAAA,cAAA,IAAA,EAAA,EAIrDJ,EAAA,CAAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,CAAA,EAAAG,EAAA,UAAA,cAAA,IAAA,EAAA,E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/alert/index.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { Alert } from './alert.js';\nexport * from './alert.js';\ndefine('alert', Alert);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":["define","Alert"],"sources":["../../../src/html/elements/alert/index.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { Alert } from './alert.js';\nexport * from './alert.js';\ndefine('alert', Alert);\n"],"mappings":"A,4EAGAA,EAAO,QAASC,CAAK"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { PropertyValues } from 'lit';
|
|
1
|
+
import { type PropertyValues } from 'lit';
|
|
2
2
|
import { Dialog } from '../dialog/dialog.js';
|
|
3
|
+
import '../spinner/index.js';
|
|
3
4
|
/**
|
|
4
5
|
* Fired when the user accepts an alert dialog (the confirm action). Cancelable —
|
|
5
6
|
* call `event.preventDefault()` to keep the dialog open (e.g. to await an async
|
|
@@ -64,7 +65,7 @@ export declare class CancelEvent extends Event {
|
|
|
64
65
|
* @customElement l-alert-dialog
|
|
65
66
|
*/
|
|
66
67
|
export declare class AlertDialog extends Dialog {
|
|
67
|
-
static styles: import(
|
|
68
|
+
static styles: import("lit").CSSResult[];
|
|
68
69
|
/** Label for the confirm action. */
|
|
69
70
|
confirmText: string;
|
|
70
71
|
/** Label for the cancel action. */
|
|
@@ -83,7 +84,7 @@ export declare class AlertDialog extends Dialog {
|
|
|
83
84
|
private _close;
|
|
84
85
|
private _activate;
|
|
85
86
|
private _onFooterClick;
|
|
86
|
-
protected renderFooter(): import(
|
|
87
|
+
protected renderFooter(): import("lit").TemplateResult<1>;
|
|
87
88
|
}
|
|
88
89
|
export interface AlertDialog {
|
|
89
90
|
addEventListener(type: 'confirm', listener: (this: AlertDialog, ev: ConfirmEvent) => void, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/html/elements/alert-dialog/alert-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAUpE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C,OAAO,qBAAqB,CAAC;AAU7B;;;;;;GAMG;AACH,qBAAa,YAAa,SAAQ,KAAK
|
|
1
|
+
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/html/elements/alert-dialog/alert-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAUpE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C,OAAO,qBAAqB,CAAC;AAU7B;;;;;;GAMG;AACH,qBAAa,YAAa,SAAQ,KAAK;IACrC,cAEC;CACF;AAED;;;;;GAKG;AACH,qBAAa,WAAY,SAAQ,KAAK;IACpC,cAEC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,qBAAa,WAAY,SAAQ,MAAM;IACrC,OAAgB,MAAM,4BAAyD;IAE/E,oCAAoC;IAEpC,WAAW,SAAa;IAExB,mCAAmC;IAEnC,UAAU,SAAY;IAEtB,uEAAuE;IAEvE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;2DACuD;IAEvD,OAAO,UAAS;IAEhB,cAAuB,KAAK,WAE3B;IAID,OAAO,CAAC,YAAY,CAA4C;IAChE,cAAuB,OAAO,uBAE7B;IAKD,UAAmB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,QAG1D;IAID,UAAmB,SAAS,CAAC,CAAC,EAAE,KAAK,QAEpC;IAQD,UAAmB,aAAa,SAa/B;IAED,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,cAAc,CASpB;IAEF,UAAmB,YAAY,oCAsC9B;CACF;AAMD,MAAM,WAAW,WAAW;IAC1B,gBAAgB,CACd,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,YAAY,KAAK,IAAI,EACvD,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,gBAAgB,CACd,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,KAAK,IAAI,EACtD,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,mBAAmB,CACjB,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,YAAY,KAAK,IAAI,EACvD,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IACR,mBAAmB,CACjB,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,KAAK,IAAI,EACtD,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IACR,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{i as e}from"../../chunks/lit.js";import{r as t}from"../../chunks/static-html.js";import{r as n,t as r}from"../../chunks/decorate.js";import{a as i,t as a}from"../../chunks/lit-html.js";import{cls as o}from"../../registry.js";import{staticTag as s}from"../../static-tag.js";import c from"../../shared/styles/host.styles.js";import{HasSlotController as l}from"../../shared/controllers/has-slot-controller.js";import{Dialog as u}from"../dialog/dialog.js";import d from"../dialog/dialog.styles.js";import f from"../../shared/styles/button-core.styles.js";var p=e(`:host{--backdrop:var(--l-backdrop-strong);--backdrop-blur:2px}[part=header]{padding-block-end:.5rem}[part=body]{color:var(--l-color-text-secondary);font-size:var(--l-text-sm);padding-block-end:var(--padding);line-height:1.5}[part=footer]{padding:1rem var(--padding);border-top:1px solid var(--l-color-border);background:var(--l-color-bg-fill-neutral-subtle);border-end-end-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}`),m=class extends Event{constructor(){super(`confirm`,{bubbles:!1,composed:!1,cancelable:!0})}},h=class extends Event{constructor(){super(`cancel`,{bubbles:!1,composed:!1,cancelable:!0})}},g=class extends u{constructor(...e){super(...e),this.confirmText=`Confirm`,this.cancelText=`Cancel`,this.loading=!1,this._bodyContent=new l(this,`[default]`),this._onFooterClick=e=>{for(let t of e.composedPath()){if(t===e.currentTarget)break;if(t instanceof Element){if(t.matches(`[slot="confirm"], [data-confirm]`))return this._activate(t,new m);if(t.matches(`[slot="cancel"], [data-cancel]`))return this._activate(t,new h)}}}}static{this.styles=[c,d,f,p]}get _role(){return`alertdialog`}get _bodyId(){return this._bodyContent.test(`[default]`)?`description`:``}willUpdate(e){super.willUpdate(e),this.lightDismiss&&=!1}_onCancel(e){this.dispatchEvent(new h)||e.preventDefault()}_focusInitial(){let e=[this.querySelector(`[autofocus]`),this.querySelector(`[slot="cancel"]`),this.renderRoot.querySelector(`[data-cancel]`)];for(let t of e)if(t&&!t.matches(`[disabled], [aria-disabled="true"]`)&&(t.focus({preventScroll:!0}),t===document.activeElement||t.contains(document.activeElement)))return}_close(){this.dialog.open&&this.dialog.close()}_activate(e,t){e.hasAttribute(`data-confirm`)&&this.loading||e.matches(`[disabled], [aria-disabled="true"]`)||this.dispatchEvent(t)&&this._close()}renderFooter(){let e=this.tone===`danger`?`destructive`:`primary`,n=s(`spinner`);return i`
|
|
2
2
|
<footer
|
|
3
3
|
part="footer"
|
|
4
4
|
@click=${this._onFooterClick}
|
|
@@ -6,7 +6,7 @@ import{cls as e}from"../../registry.js";import{i as t}from"../../chunks/lit.js";
|
|
|
6
6
|
<slot name="cancel">
|
|
7
7
|
<button
|
|
8
8
|
part="button cancel"
|
|
9
|
-
class=${
|
|
9
|
+
class=${o(`button`)}
|
|
10
10
|
type="button"
|
|
11
11
|
data-cancel
|
|
12
12
|
>
|
|
@@ -16,14 +16,14 @@ import{cls as e}from"../../registry.js";import{i as t}from"../../chunks/lit.js";
|
|
|
16
16
|
<slot name="confirm">
|
|
17
17
|
<button
|
|
18
18
|
part="button confirm"
|
|
19
|
-
class=${
|
|
19
|
+
class=${o(`button`)}
|
|
20
20
|
type="button"
|
|
21
21
|
data-confirm
|
|
22
|
-
data-variant=${
|
|
22
|
+
data-variant=${e}
|
|
23
23
|
aria-disabled=${this.loading?`true`:a}
|
|
24
24
|
aria-busy=${this.loading?`true`:a}
|
|
25
25
|
>
|
|
26
|
-
${this.loading?
|
|
26
|
+
${this.loading?t`<${n} aria-hidden="true"></${n}>`:a}
|
|
27
27
|
${this.confirmText}
|
|
28
28
|
</button>
|
|
29
29
|
</slot>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../../src/html/elements/alert-dialog/alert-dialog.css?inline","../../../src/html/elements/alert-dialog/alert-dialog.ts"],"sourcesContent":["/*\n * Layout for l-alert-dialog. Unlayered to match dialog.css (the inherited\n * shared styles) so these overrides win — inside a shadow root there's no host\n * cascade to guard against, and layered rules can't override dialog.css's\n * unlayered ones. The `.l-button` appearance comes from the shared button-core\n * (imported in alert-dialog.ts), not from here.\n *\n * Visual rhythm: a confirmation reads better with the title and description\n * grouped tight and the actions set off in their own bar.\n */\n\n/* Interruptive by nature: a stronger backdrop (the token meant for immersive\n overlays) plus a touch of blur pulls focus firmly onto the confirmation.\n Consumers can still retune --backdrop / --backdrop-blur. */\n:host {\n --backdrop: var(--l-backdrop-strong);\n --backdrop-blur: 2px;\n}\n\n/* Pull the description up close under the title (title keeps the inherited\n 1.125rem / 600 from dialog.css). */\n[part='header'] {\n padding-block-end: 0.5rem;\n}\n\n/* Muted, smaller description with a comfortable reading measure, plus its own\n block-end gap so the footer divider isn't crowded. */\n[part='body'] {\n padding-block-end: var(--padding);\n color: var(--l-color-text-secondary);\n font-size: var(--l-text-sm);\n line-height: 1.5;\n}\n\n/* Footer as a distinct action bar: subtle fill + top divider, corners rounded\n to match the dialog (which doesn't clip its overflow). */\n[part='footer'] {\n padding: 1rem var(--padding);\n border-top: 1px solid var(--l-color-border);\n background: var(--l-color-bg-fill-neutral-subtle);\n border-end-start-radius: var(--border-radius);\n border-end-end-radius: var(--border-radius);\n}\n","import { html, nothing, unsafeCSS, type PropertyValues } from 'lit';\n// Only the spinner fragment needs the static tag function; the outer template\n// stays on lit's `html` so `renderFooter()` keeps the return type `Dialog`\n// declares. A static-html result nests inside a regular one just fine.\nimport { html as staticHtml } from 'lit/static-html.js';\nimport { property } from 'lit/decorators.js';\nimport { cls } from '../../registry.js';\nimport { staticTag } from '../../static-tag.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport { HasSlotController } from '../../shared/controllers/has-slot-controller.js';\nimport { Dialog } from '../dialog/dialog.js';\nimport dialogStyles from '../dialog/dialog.styles.js';\nimport buttonStyles from '../../shared/styles/button-core.styles.js';\nimport rawAlertStyles from './alert-dialog.css?inline';\nimport '../spinner/index.js';\n\n// The built-in actions render as `.l-button`, styled inside the shadow root from\n// the SAME shared button-core as the light-DOM `.l-button` (single source of\n// truth — no copy to drift). alert-dialog.css adds only the dialog layout.\n// The class is emitted through `cls('button')` so it tracks a renamed\n// `cssPrefix` — button-core.css ships as a real CSS file the consumer's postcss\n// re-prefixes, and a static literal would desync from it (see button-core.css).\nconst alertStyles = unsafeCSS(rawAlertStyles);\n\n/**\n * Fired when the user accepts an alert dialog (the confirm action). Cancelable —\n * call `event.preventDefault()` to keep the dialog open (e.g. to await an async\n * task); close it yourself afterwards by setting `open = false`.\n *\n * Does not bubble and is not composed: listen on the element itself.\n */\nexport class ConfirmEvent extends Event {\n constructor() {\n super('confirm', { bubbles: false, composed: false, cancelable: true });\n }\n}\n\n/**\n * Fired when the user dismisses an alert dialog (the cancel action, Escape, or a\n * close request). Cancelable — call `event.preventDefault()` to keep it open.\n *\n * Does not bubble and is not composed: listen on the element itself.\n */\nexport class CancelEvent extends Event {\n constructor() {\n super('cancel', { bubbles: false, composed: false, cancelable: true });\n }\n}\n\n/**\n * An interruptive confirmation dialog built on `<l-dialog>`. Renders its own\n * cancel/confirm actions and exposes `role=\"alertdialog\"`. Use it to confirm a\n * consequential action (delete, publish, discard) — not for generic content.\n *\n * Open and close by toggling the `open` property (or the `--show` / `--hide`\n * Invoker commands). The dialog closes automatically when the user picks an\n * action, unless the matching `confirm` / `cancel` event is canceled.\n *\n * @slot - Description text. Provides the dialog's accessible description.\n * @slot title - Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name.\n * @slot cancel - Replaces the built-in cancel action (e.g. a link). Keep it focusable.\n * @slot confirm - Replaces the built-in confirm action.\n *\n * @csspart dialog - The native `<dialog>` element.\n * @csspart header - The header wrapper containing the title.\n * @csspart title - The dialog title heading.\n * @csspart body - The body wrapper around the description.\n * @csspart footer - The footer wrapper around the actions.\n * @csspart button - Both built-in action buttons.\n * @csspart cancel - The built-in cancel button.\n * @csspart confirm - The built-in confirm button.\n *\n * @cssproperty [--width=31rem] - Dialog width.\n * @cssproperty [--border-radius=6px] - Dialog border radius.\n * @cssproperty [--padding=1.5rem] - Padding applied to the header, footer, and inline-padding of the body.\n * @cssproperty [--show-duration=200ms] - Open transition duration.\n * @cssproperty [--hide-duration=200ms] - Close transition duration.\n * @cssproperty [--easing=cubic-bezier(0.32, 0.72, 0, 1)] - Timing function of the open and close transitions, backdrop included.\n * @cssproperty --backdrop - Backdrop color.\n * @cssproperty [--backdrop-blur=0] - Backdrop blur amount (any CSS length).\n *\n * @event confirm - Fired when the user accepts. Cancelable — `preventDefault()` keeps it open for async work.\n * @event cancel - Fired when the user dismisses (cancel action, Escape). Cancelable — `preventDefault()` keeps it open.\n * @event show - Fired when the dialog is about to open. Cancelable.\n * @event hide - Fired when the dialog is about to close via the `open` property. Cancelable. (The confirm, cancel, and Escape paths close natively and emit `confirm`/`cancel` instead of `hide`.)\n * @event after-show - Fired after the open animation completes. Not cancelable.\n * @event after-hide - Fired after the close animation completes. Not cancelable.\n *\n * @command --show - Sets `open = true`.\n * @command --hide - Sets `open = false`.\n *\n * @customElement l-alert-dialog\n */\n// oxlint-disable-next-line typescript/no-unsafe-declaration-merging -- typed addEventListener overloads merged below.\nexport class AlertDialog extends Dialog {\n static override styles = [hostStyles, dialogStyles, buttonStyles, alertStyles];\n\n /** Label for the confirm action. */\n @property({ attribute: 'confirm-text' })\n confirmText = 'Confirm';\n\n /** Label for the cancel action. */\n @property({ attribute: 'cancel-text' })\n cancelText = 'Cancel';\n\n /** Visual tone. `danger` renders the confirm action as destructive. */\n @property({ reflect: true })\n tone?: 'danger';\n\n /** Show a busy state on the confirm action (spinner + `aria-disabled`); the\n * cancel action stays operable as an escape hatch. */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n protected override get _role() {\n return 'alertdialog';\n }\n\n // Wire aria-describedby to the body only when it actually has content, so a\n // title-only confirmation doesn't advertise an empty description.\n private _bodyContent = new HasSlotController(this, '[default]');\n protected override get _bodyId() {\n return this._bodyContent.test('[default]') ? 'description' : '';\n }\n\n // Alert dialogs are interruptive: they are never dismissable by clicking\n // outside, so the inherited `light-dismiss` is forced off (a vetoed dismissal\n // gesture must go through an explicit action).\n protected override willUpdate(changed: PropertyValues<this>) {\n super.willUpdate(changed);\n if (this.lightDismiss) this.lightDismiss = false;\n }\n\n // Native Escape / close request → cancel intent. A vetoed `cancel` keeps the\n // dialog open; otherwise the native close proceeds (emitting `after-hide`).\n protected override _onCancel(e: Event) {\n if (!this.dispatchEvent(new CancelEvent())) e.preventDefault();\n }\n\n // Focus the least destructive action on open: an author `[autofocus]`, else\n // the slotted cancel action, else the built-in cancel button (in shadow DOM,\n // so the base light-DOM lookup can't reach it). Try each in order and keep the\n // first that actually takes focus — this skips a non-focusable slotted cancel\n // without rejecting a focusable one that reports `tabIndex === -1` (a custom\n // element with `delegatesFocus`, `<div role=\"button\" tabindex=\"0\">`, etc.).\n protected override _focusInitial() {\n const candidates = [\n this.querySelector<HTMLElement>('[autofocus]'),\n this.querySelector<HTMLElement>('[slot=\"cancel\"]'),\n this.renderRoot.querySelector<HTMLElement>('[data-cancel]'),\n ];\n for (const el of candidates) {\n if (!el || el.matches('[disabled], [aria-disabled=\"true\"]')) continue;\n el.focus({ preventScroll: true });\n // `document.activeElement` resolves to the shadow host when focus lands\n // inside an open shadow root, so this also covers delegatesFocus.\n if (el === document.activeElement || el.contains(document.activeElement)) return;\n }\n }\n\n private _close() {\n // Close natively rather than via `open = false` so we don't also emit the\n // inherited cancelable `hide` — `confirm` / `cancel` are the intent events.\n if (this.dialog.open) this.dialog.close();\n }\n\n // Activate an action unless its control is disabled. The built-in confirm also\n // respects `loading` via the property — immune to render timing, so a fast\n // second click in the window before `aria-disabled` is flushed can't fire a\n // duplicate confirm mid-async. A slotted action the consumer drives carries no\n // disabled state unless the author adds one, so it stays operable.\n private _activate(el: Element, event: ConfirmEvent | CancelEvent) {\n if (el.hasAttribute('data-confirm') && this.loading) return;\n if (el.matches('[disabled], [aria-disabled=\"true\"]')) return;\n if (this.dispatchEvent(event)) this._close();\n }\n\n // Single delegated handler covering both the built-in buttons (marked with\n // `data-confirm` / `data-cancel`) and slotted replacements (`slot=\"confirm\"` /\n // `slot=\"cancel\"`). `composedPath()` flattens across the slot boundary, so a\n // click on light-DOM slotted content still resolves here.\n private _onFooterClick = (e: Event) => {\n for (const node of e.composedPath()) {\n if (node === e.currentTarget) break;\n if (!(node instanceof Element)) continue;\n if (node.matches('[slot=\"confirm\"], [data-confirm]'))\n return this._activate(node, new ConfirmEvent());\n if (node.matches('[slot=\"cancel\"], [data-cancel]'))\n return this._activate(node, new CancelEvent());\n }\n };\n\n protected override renderFooter() {\n const confirmVariant = this.tone === 'danger' ? 'destructive' : 'primary';\n const spinnerTag = staticTag('spinner');\n return html`\n <footer\n part=\"footer\"\n @click=${this._onFooterClick}\n >\n <slot name=\"cancel\">\n <button\n part=\"button cancel\"\n class=${cls('button')}\n type=\"button\"\n data-cancel\n >\n ${this.cancelText}\n </button>\n </slot>\n <slot name=\"confirm\">\n <button\n part=\"button confirm\"\n class=${cls('button')}\n type=\"button\"\n data-confirm\n data-variant=${confirmVariant}\n aria-disabled=${this.loading ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n >\n ${this.loading\n ? staticHtml`<${spinnerTag} aria-hidden=\"true\"></${spinnerTag}>`\n : nothing}\n ${this.confirmText}\n </button>\n </slot>\n </footer>\n `;\n }\n}\n\n// `confirm` and `cancel` collide with lib.dom's event maps, so we cannot augment\n// the global map (as the shared lifecycle events do). Declaration-merge typed\n// listener overloads onto the element instead — must come after the class so the\n// CEM analyzer reads the class first.\nexport interface AlertDialog {\n addEventListener(\n type: 'confirm',\n listener: (this: AlertDialog, ev: ConfirmEvent) => void,\n options?: boolean | AddEventListenerOptions,\n ): void;\n addEventListener(\n type: 'cancel',\n listener: (this: AlertDialog, ev: CancelEvent) => void,\n options?: boolean | AddEventListenerOptions,\n ): void;\n addEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | AddEventListenerOptions,\n ): void;\n removeEventListener(\n type: 'confirm',\n listener: (this: AlertDialog, ev: ConfirmEvent) => void,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: 'cancel',\n listener: (this: AlertDialog, ev: CancelEvent) => void,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n}\n"],"mappings":"8iBCsBA,IAAM,EAAc,EAAU,gcAAc,EAS/B,EAAb,cAAkC,KAAM,CACtC,aAAc,CACZ,MAAM,UAAW,CAAE,QAAS,GAAO,SAAU,GAAO,WAAY,EAAK,CAAC,CACxE,CACF,EAQa,EAAb,cAAiC,KAAM,CACrC,aAAc,CACZ,MAAM,SAAU,CAAE,QAAS,GAAO,SAAU,GAAO,WAAY,EAAK,CAAC,CACvE,CACF,EA+Ca,EAAb,cAAiC,CAAO,gDAKxB,0BAID,sBASH,qBAQa,IAAI,EAAkB,KAAM,WAAW,sBA6DpC,GAAa,CACrC,IAAK,IAAM,KAAQ,EAAE,aAAa,EAAG,CACnC,GAAI,IAAS,EAAE,cAAe,MACxB,gBAAgB,QACtB,IAAI,EAAK,QAAQ,kCAAkC,EACjD,OAAO,KAAK,UAAU,EAAM,IAAI,CAAc,EAChD,GAAI,EAAK,QAAQ,gCAAgC,EAC/C,OAAO,KAAK,UAAU,EAAM,IAAI,CAAa,CAFC,CAGlD,CACF,qBA/FyB,CAAC,EAAY,EAAc,EAAc,CAAW,EAmB7E,IAAuB,OAAQ,CAC7B,MAAO,aACT,CAKA,IAAuB,SAAU,CAC/B,OAAO,KAAK,aAAa,KAAK,WAAW,EAAI,cAAgB,EAC/D,CAKA,WAA8B,EAA+B,CAC3D,MAAM,WAAW,CAAO,EACxB,AAAuB,KAAK,eAAe,EAC7C,CAIA,UAA6B,EAAU,CAChC,KAAK,cAAc,IAAI,CAAa,GAAG,EAAE,eAAe,CAC/D,CAQA,eAAmC,CACjC,IAAM,EAAa,CACjB,KAAK,cAA2B,aAAa,EAC7C,KAAK,cAA2B,iBAAiB,EACjD,KAAK,WAAW,cAA2B,eAAe,CAC5D,EACA,IAAK,IAAM,KAAM,EACX,MAAC,GAAM,EAAG,QAAQ,oCAAoC,KAC1D,EAAG,MAAM,CAAE,cAAe,EAAK,CAAC,EAG5B,IAAO,SAAS,eAAiB,EAAG,SAAS,SAAS,aAAa,GAAG,MAE9E,CAEA,QAAiB,CAGX,KAAK,OAAO,MAAM,KAAK,OAAO,MAAM,CAC1C,CAOA,UAAkB,EAAa,EAAmC,CAC5D,EAAG,aAAa,cAAc,GAAK,KAAK,SACxC,EAAG,QAAQ,oCAAoC,GAC/C,KAAK,cAAc,CAAK,GAAG,KAAK,OAAO,CAC7C,CAiBA,cAAkC,CAChC,IAAM,EAAiB,KAAK,OAAS,SAAW,cAAgB,UAC1D,EAAa,EAAU,SAAS,EACtC,MAAO,EAAI;;;iBAGE,KAAK,eAAe;;;;;oBAKjB,EAAI,QAAQ,EAAE;;;;cAIpB,KAAK,WAAW;;;;;;oBAMV,EAAI,QAAQ,EAAE;;;2BAGP,EAAe;4BACd,KAAK,QAAU,OAAS,EAAQ;wBACpC,KAAK,QAAU,OAAS,EAAQ;;cAE1C,KAAK,QACH,CAAU,IAAI,EAAW,wBAAwB,EAAW,GAC5D,EAAQ;cACV,KAAK,YAAY;;;;KAK7B,CACF,KAnIG,EAAS,CAAE,UAAW,cAAe,CAAC,CAAA,EAAA,EAAA,UAAA,cAAA,IAAA,EAAA,KAItC,EAAS,CAAE,UAAW,aAAc,CAAC,CAAA,EAAA,EAAA,UAAA,aAAA,IAAA,EAAA,KAIrC,EAAS,CAAE,QAAS,EAAK,CAAC,CAAA,EAAA,EAAA,UAAA,OAAA,IAAA,EAAA,KAK1B,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,CAAA,EAAA,EAAA,UAAA,UAAA,IAAA,EAAA"}
|
|
1
|
+
{"version":3,"file":"alert-dialog.js","names":["unsafeCSS","rawAlertStyles","hostStyles","dialogStyles","buttonStyles","nothing","_decorate","property","r","u","__decorate","b","A","host_styles_default","dialog_styles_default","button_core_styles_default","alertStyles","ConfirmEvent","CancelEvent","AlertDialog","Dialog","_args","HasSlotController","node","changed","candidates","el","event","confirmVariant","spinnerTag","staticTag","cls"],"sources":["../../../src/html/elements/alert-dialog/alert-dialog.css?inline","../../../src/html/elements/alert-dialog/alert-dialog.ts"],"sourcesContent":["/*\n * Layout for l-alert-dialog. Unlayered to match dialog.css (the inherited\n * shared styles) so these overrides win — inside a shadow root there's no host\n * cascade to guard against, and layered rules can't override dialog.css's\n * unlayered ones. The `.l-button` appearance comes from the shared button-core\n * (imported in alert-dialog.ts), not from here.\n *\n * Visual rhythm: a confirmation reads better with the title and description\n * grouped tight and the actions set off in their own bar.\n */\n\n/* Interruptive by nature: a stronger backdrop (the token meant for immersive\n overlays) plus a touch of blur pulls focus firmly onto the confirmation.\n Consumers can still retune --backdrop / --backdrop-blur. */\n:host {\n --backdrop: var(--l-backdrop-strong);\n --backdrop-blur: 2px;\n}\n\n/* Pull the description up close under the title (title keeps the inherited\n 1.125rem / 600 from dialog.css). */\n[part='header'] {\n padding-block-end: 0.5rem;\n}\n\n/* Muted, smaller description with a comfortable reading measure, plus its own\n block-end gap so the footer divider isn't crowded. */\n[part='body'] {\n padding-block-end: var(--padding);\n color: var(--l-color-text-secondary);\n font-size: var(--l-text-sm);\n line-height: 1.5;\n}\n\n/* Footer as a distinct action bar: subtle fill + top divider, corners rounded\n to match the dialog (which doesn't clip its overflow). */\n[part='footer'] {\n padding: 1rem var(--padding);\n border-top: 1px solid var(--l-color-border);\n background: var(--l-color-bg-fill-neutral-subtle);\n border-end-start-radius: var(--border-radius);\n border-end-end-radius: var(--border-radius);\n}\n","import { html, nothing, unsafeCSS, type PropertyValues } from 'lit';\n// Only the spinner fragment needs the static tag function; the outer template\n// stays on lit's `html` so `renderFooter()` keeps the return type `Dialog`\n// declares. A static-html result nests inside a regular one just fine.\nimport { html as staticHtml } from 'lit/static-html.js';\nimport { property } from 'lit/decorators.js';\nimport { cls } from '../../registry.js';\nimport { staticTag } from '../../static-tag.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport { HasSlotController } from '../../shared/controllers/has-slot-controller.js';\nimport { Dialog } from '../dialog/dialog.js';\nimport dialogStyles from '../dialog/dialog.styles.js';\nimport buttonStyles from '../../shared/styles/button-core.styles.js';\nimport rawAlertStyles from './alert-dialog.css?inline';\nimport '../spinner/index.js';\n\n// The built-in actions render as `.l-button`, styled inside the shadow root from\n// the SAME shared button-core as the light-DOM `.l-button` (single source of\n// truth — no copy to drift). alert-dialog.css adds only the dialog layout.\n// The class is emitted through `cls('button')` so it tracks a renamed\n// `cssPrefix` — button-core.css ships as a real CSS file the consumer's postcss\n// re-prefixes, and a static literal would desync from it (see button-core.css).\nconst alertStyles = unsafeCSS(rawAlertStyles);\n\n/**\n * Fired when the user accepts an alert dialog (the confirm action). Cancelable —\n * call `event.preventDefault()` to keep the dialog open (e.g. to await an async\n * task); close it yourself afterwards by setting `open = false`.\n *\n * Does not bubble and is not composed: listen on the element itself.\n */\nexport class ConfirmEvent extends Event {\n constructor() {\n super('confirm', { bubbles: false, composed: false, cancelable: true });\n }\n}\n\n/**\n * Fired when the user dismisses an alert dialog (the cancel action, Escape, or a\n * close request). Cancelable — call `event.preventDefault()` to keep it open.\n *\n * Does not bubble and is not composed: listen on the element itself.\n */\nexport class CancelEvent extends Event {\n constructor() {\n super('cancel', { bubbles: false, composed: false, cancelable: true });\n }\n}\n\n/**\n * An interruptive confirmation dialog built on `<l-dialog>`. Renders its own\n * cancel/confirm actions and exposes `role=\"alertdialog\"`. Use it to confirm a\n * consequential action (delete, publish, discard) — not for generic content.\n *\n * Open and close by toggling the `open` property (or the `--show` / `--hide`\n * Invoker commands). The dialog closes automatically when the user picks an\n * action, unless the matching `confirm` / `cancel` event is canceled.\n *\n * @slot - Description text. Provides the dialog's accessible description.\n * @slot title - Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name.\n * @slot cancel - Replaces the built-in cancel action (e.g. a link). Keep it focusable.\n * @slot confirm - Replaces the built-in confirm action.\n *\n * @csspart dialog - The native `<dialog>` element.\n * @csspart header - The header wrapper containing the title.\n * @csspart title - The dialog title heading.\n * @csspart body - The body wrapper around the description.\n * @csspart footer - The footer wrapper around the actions.\n * @csspart button - Both built-in action buttons.\n * @csspart cancel - The built-in cancel button.\n * @csspart confirm - The built-in confirm button.\n *\n * @cssproperty [--width=31rem] - Dialog width.\n * @cssproperty [--border-radius=6px] - Dialog border radius.\n * @cssproperty [--padding=1.5rem] - Padding applied to the header, footer, and inline-padding of the body.\n * @cssproperty [--show-duration=200ms] - Open transition duration.\n * @cssproperty [--hide-duration=200ms] - Close transition duration.\n * @cssproperty [--easing=cubic-bezier(0.32, 0.72, 0, 1)] - Timing function of the open and close transitions, backdrop included.\n * @cssproperty --backdrop - Backdrop color.\n * @cssproperty [--backdrop-blur=0] - Backdrop blur amount (any CSS length).\n *\n * @event confirm - Fired when the user accepts. Cancelable — `preventDefault()` keeps it open for async work.\n * @event cancel - Fired when the user dismisses (cancel action, Escape). Cancelable — `preventDefault()` keeps it open.\n * @event show - Fired when the dialog is about to open. Cancelable.\n * @event hide - Fired when the dialog is about to close via the `open` property. Cancelable. (The confirm, cancel, and Escape paths close natively and emit `confirm`/`cancel` instead of `hide`.)\n * @event after-show - Fired after the open animation completes. Not cancelable.\n * @event after-hide - Fired after the close animation completes. Not cancelable.\n *\n * @command --show - Sets `open = true`.\n * @command --hide - Sets `open = false`.\n *\n * @customElement l-alert-dialog\n */\n// oxlint-disable-next-line typescript/no-unsafe-declaration-merging -- typed addEventListener overloads merged below.\nexport class AlertDialog extends Dialog {\n static override styles = [hostStyles, dialogStyles, buttonStyles, alertStyles];\n\n /** Label for the confirm action. */\n @property({ attribute: 'confirm-text' })\n confirmText = 'Confirm';\n\n /** Label for the cancel action. */\n @property({ attribute: 'cancel-text' })\n cancelText = 'Cancel';\n\n /** Visual tone. `danger` renders the confirm action as destructive. */\n @property({ reflect: true })\n tone?: 'danger';\n\n /** Show a busy state on the confirm action (spinner + `aria-disabled`); the\n * cancel action stays operable as an escape hatch. */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n protected override get _role() {\n return 'alertdialog';\n }\n\n // Wire aria-describedby to the body only when it actually has content, so a\n // title-only confirmation doesn't advertise an empty description.\n private _bodyContent = new HasSlotController(this, '[default]');\n protected override get _bodyId() {\n return this._bodyContent.test('[default]') ? 'description' : '';\n }\n\n // Alert dialogs are interruptive: they are never dismissable by clicking\n // outside, so the inherited `light-dismiss` is forced off (a vetoed dismissal\n // gesture must go through an explicit action).\n protected override willUpdate(changed: PropertyValues<this>) {\n super.willUpdate(changed);\n if (this.lightDismiss) this.lightDismiss = false;\n }\n\n // Native Escape / close request → cancel intent. A vetoed `cancel` keeps the\n // dialog open; otherwise the native close proceeds (emitting `after-hide`).\n protected override _onCancel(e: Event) {\n if (!this.dispatchEvent(new CancelEvent())) e.preventDefault();\n }\n\n // Focus the least destructive action on open: an author `[autofocus]`, else\n // the slotted cancel action, else the built-in cancel button (in shadow DOM,\n // so the base light-DOM lookup can't reach it). Try each in order and keep the\n // first that actually takes focus — this skips a non-focusable slotted cancel\n // without rejecting a focusable one that reports `tabIndex === -1` (a custom\n // element with `delegatesFocus`, `<div role=\"button\" tabindex=\"0\">`, etc.).\n protected override _focusInitial() {\n const candidates = [\n this.querySelector<HTMLElement>('[autofocus]'),\n this.querySelector<HTMLElement>('[slot=\"cancel\"]'),\n this.renderRoot.querySelector<HTMLElement>('[data-cancel]'),\n ];\n for (const el of candidates) {\n if (!el || el.matches('[disabled], [aria-disabled=\"true\"]')) continue;\n el.focus({ preventScroll: true });\n // `document.activeElement` resolves to the shadow host when focus lands\n // inside an open shadow root, so this also covers delegatesFocus.\n if (el === document.activeElement || el.contains(document.activeElement)) return;\n }\n }\n\n private _close() {\n // Close natively rather than via `open = false` so we don't also emit the\n // inherited cancelable `hide` — `confirm` / `cancel` are the intent events.\n if (this.dialog.open) this.dialog.close();\n }\n\n // Activate an action unless its control is disabled. The built-in confirm also\n // respects `loading` via the property — immune to render timing, so a fast\n // second click in the window before `aria-disabled` is flushed can't fire a\n // duplicate confirm mid-async. A slotted action the consumer drives carries no\n // disabled state unless the author adds one, so it stays operable.\n private _activate(el: Element, event: ConfirmEvent | CancelEvent) {\n if (el.hasAttribute('data-confirm') && this.loading) return;\n if (el.matches('[disabled], [aria-disabled=\"true\"]')) return;\n if (this.dispatchEvent(event)) this._close();\n }\n\n // Single delegated handler covering both the built-in buttons (marked with\n // `data-confirm` / `data-cancel`) and slotted replacements (`slot=\"confirm\"` /\n // `slot=\"cancel\"`). `composedPath()` flattens across the slot boundary, so a\n // click on light-DOM slotted content still resolves here.\n private _onFooterClick = (e: Event) => {\n for (const node of e.composedPath()) {\n if (node === e.currentTarget) break;\n if (!(node instanceof Element)) continue;\n if (node.matches('[slot=\"confirm\"], [data-confirm]'))\n return this._activate(node, new ConfirmEvent());\n if (node.matches('[slot=\"cancel\"], [data-cancel]'))\n return this._activate(node, new CancelEvent());\n }\n };\n\n protected override renderFooter() {\n const confirmVariant = this.tone === 'danger' ? 'destructive' : 'primary';\n const spinnerTag = staticTag('spinner');\n return html`\n <footer\n part=\"footer\"\n @click=${this._onFooterClick}\n >\n <slot name=\"cancel\">\n <button\n part=\"button cancel\"\n class=${cls('button')}\n type=\"button\"\n data-cancel\n >\n ${this.cancelText}\n </button>\n </slot>\n <slot name=\"confirm\">\n <button\n part=\"button confirm\"\n class=${cls('button')}\n type=\"button\"\n data-confirm\n data-variant=${confirmVariant}\n aria-disabled=${this.loading ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n >\n ${\n this.loading\n ? staticHtml`<${spinnerTag} aria-hidden=\"true\"></${spinnerTag}>`\n : nothing\n }\n ${this.confirmText}\n </button>\n </slot>\n </footer>\n `;\n }\n}\n\n// `confirm` and `cancel` collide with lib.dom's event maps, so we cannot augment\n// the global map (as the shared lifecycle events do). Declaration-merge typed\n// listener overloads onto the element instead — must come after the class so the\n// CEM analyzer reads the class first.\nexport interface AlertDialog {\n addEventListener(\n type: 'confirm',\n listener: (this: AlertDialog, ev: ConfirmEvent) => void,\n options?: boolean | AddEventListenerOptions,\n ): void;\n addEventListener(\n type: 'cancel',\n listener: (this: AlertDialog, ev: CancelEvent) => void,\n options?: boolean | AddEventListenerOptions,\n ): void;\n addEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | AddEventListenerOptions,\n ): void;\n removeEventListener(\n type: 'confirm',\n listener: (this: AlertDialog, ev: ConfirmEvent) => void,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: 'cancel',\n listener: (this: AlertDialog, ev: CancelEvent) => void,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n}\n"],"mappings":"A,8iBCsBA,IAAMgB,EAAchB,EAAUC,gcAAc,EAS/BgB,EAAb,cAAkC,KAAM,CACtC,aAAc,CACZ,MAAM,UAAW,CAAE,QAAS,GAAO,SAAU,GAAO,WAAY,EAAK,CAAC,CACxE,CACF,EAQaC,EAAb,cAAiC,KAAM,CACrC,aAAc,CACZ,MAAM,SAAU,CAAE,QAAS,GAAO,SAAU,GAAO,WAAY,EAAK,CAAC,CACvE,CACF,EA+CaC,EAAb,cAAiCC,CAAO,C,8BAKxB,KAAA,YAAA,UAID,KAAA,WAAA,SASH,KAAA,QAAA,GAQa,KAAA,aAAA,IAAIE,EAAkB,KAAM,WAAW,EA6DpC,KAAA,eAAA,GAAa,CACrC,IAAK,IAAMC,KAAQ,EAAE,aAAa,EAAG,CACnC,GAAIA,IAAS,EAAE,cAAe,MAC9B,GAAMA,aAAgB,QACtB,IAAIA,EAAK,QAAQ,kCAAkC,EACjD,OAAO,KAAK,UAAUA,EAAM,IAAIN,CAAc,EAChD,GAAIM,EAAK,QAAQ,gCAAgC,EAC/C,OAAO,KAAK,UAAUA,EAAM,IAAIL,CAAa,CAFC,CAGlD,CACF,C,QA/FyB,KAAA,OAAA,CAAChB,EAAYC,EAAcC,EAAcY,CAAW,C,CAmB7E,IAAuB,OAAQ,CAC7B,MAAO,aACT,CAKA,IAAuB,SAAU,CAC/B,OAAO,KAAK,aAAa,KAAK,WAAW,EAAI,cAAgB,EAC/D,CAKA,WAA8B,EAA+B,CAC3D,MAAM,WAAWQ,CAAO,EACxB,AAAuB,KAAK,eAAe,EAC7C,CAIA,UAA6B,EAAU,CAChC,KAAK,cAAc,IAAIN,CAAa,GAAG,EAAE,eAAe,CAC/D,CAQA,eAAmC,CACjC,IAAMO,EAAa,CACjB,KAAK,cAA2B,aAAa,EAC7C,KAAK,cAA2B,iBAAiB,EACjD,KAAK,WAAW,cAA2B,eAAe,CAC5D,EACA,IAAK,IAAMC,KAAMD,EACf,GAAKC,GAAM,GAAG,QAAQ,oCAAoC,IAC1DA,EAAG,MAAM,CAAE,cAAe,EAAK,CAAC,EAG5BA,IAAO,SAAS,eAAiBA,EAAG,SAAS,SAAS,aAAa,GAAG,MAE9E,CAEA,QAAiB,CAGX,KAAK,OAAO,MAAM,KAAK,OAAO,MAAM,CAC1C,CAOA,UAAkB,EAAa,EAAmC,CAC5DA,EAAG,aAAa,cAAc,GAAK,KAAK,SACxCA,EAAG,QAAQ,oCAAoC,GAC/C,KAAK,cAAcC,CAAK,GAAG,KAAK,OAAO,CAC7C,CAiBA,cAAkC,CAChC,IAAMC,EAAiB,KAAK,OAAS,SAAW,cAAgB,UAC1DC,EAAaC,EAAU,SAAS,EACtC,MAAO,EAAI;;;iBAGE,KAAK,eAAe;;;;;oBAKjBC,EAAI,QAAQ,EAAE;;;;cAIpB,KAAK,WAAW;;;;;;oBAMVA,EAAI,QAAQ,EAAE;;;2BAGPH,EAAe;4BACd,KAAK,QAAU,OAASvB,EAAQ;wBACpC,KAAK,QAAU,OAASA,EAAQ;;cAG1C,KAAK,QACD,CAAU,IAAIwB,EAAW,wBAAwBA,EAAW,GAC5DxB,EACL;cACC,KAAK,YAAY;;;;KAK7B,CACF,EArIGC,EAAA,CAAAC,EAAS,CAAE,UAAW,cAAe,CAAC,CAAA,EAAAY,EAAA,UAAA,cAAA,IAAA,EAAA,EAItCb,EAAA,CAAAC,EAAS,CAAE,UAAW,aAAc,CAAC,CAAA,EAAAY,EAAA,UAAA,aAAA,IAAA,EAAA,EAIrCb,EAAA,CAAAC,EAAS,CAAE,QAAS,EAAK,CAAC,CAAA,EAAAY,EAAA,UAAA,OAAA,IAAA,EAAA,EAK1Bb,EAAA,CAAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,CAAA,EAAAY,EAAA,UAAA,UAAA,IAAA,EAAA,E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/alert-dialog/index.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { AlertDialog } from './alert-dialog.js';\nexport * from './alert-dialog.js';\ndefine('alert-dialog', AlertDialog);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":["define","AlertDialog"],"sources":["../../../src/html/elements/alert-dialog/index.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { AlertDialog } from './alert-dialog.js';\nexport * from './alert-dialog.js';\ndefine('alert-dialog', AlertDialog);\n"],"mappings":"A,yFAGAA,EAAO,eAAgBC,CAAW"}
|
|
@@ -13,7 +13,7 @@ import { LuxenElement } from '../../shared/luxen-element.js';
|
|
|
13
13
|
* @cssClass .l-avatar-group - Flex wrapper that overlaps a row of stacked avatars.
|
|
14
14
|
*/
|
|
15
15
|
export declare class Avatar extends LuxenElement {
|
|
16
|
-
static styles: import(
|
|
16
|
+
static styles: import("lit").CSSResult[];
|
|
17
17
|
/** Image URL. Falls back to initials (then the default icon) if it fails to load. */
|
|
18
18
|
src: string;
|
|
19
19
|
/** Name used as the accessible label and to derive the initials fallback. */
|
|
@@ -29,7 +29,7 @@ export declare class Avatar extends LuxenElement {
|
|
|
29
29
|
connectedCallback(): void;
|
|
30
30
|
updated(): void;
|
|
31
31
|
private get _tag();
|
|
32
|
-
render(): import(
|
|
32
|
+
render(): import("lit").TemplateResult;
|
|
33
33
|
private _onError;
|
|
34
34
|
}
|
|
35
35
|
//# sourceMappingURL=avatar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AA0C7D;;;;;;;;;;;;GAYG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,qFAAqF;IAErF,GAAG,SAAM;IAET,6EAA6E;IAE7E,IAAI,SAAM;IAEV,8DAA8D;IAE9D,IAAI,SAAQ;IAEZ,4DAA4D;IAE5D,KAAK,SAAK;IAEV,+DAA+D;IAE/D,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AA0C7D;;;;;;;;;;;;GAYG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,qFAAqF;IAErF,GAAG,SAAM;IAET,6EAA6E;IAE7E,IAAI,SAAM;IAEV,8DAA8D;IAE9D,IAAI,SAAQ;IAEZ,4DAA4D;IAE5D,KAAK,SAAK;IAEV,+DAA+D;IAE/D,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAIvC;IAED,iBAAiB,SAKhB;IAED,OAAO,SAcN;IAED,OAAO,KAAK,IAAI,GAEf;IAED,MAAM,iCAgCL;IAED,OAAO,CAAC,QAAQ,CAEd;CACH"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import{i as e}from"../../chunks/lit.js";import{
|
|
1
|
+
import{i as e}from"../../chunks/lit.js";import{LuxenElement as t}from"../../shared/luxen-element.js";import{a as n,s as r,t as i}from"../../chunks/lit-html.js";import{r as a,t as o}from"../../chunks/static-html.js";import{n as s,r as c,t as l}from"../../chunks/decorate.js";import u from"../../shared/styles/host.styles.js";var d=e(`:host{--size:40px;--_font-size:calc(var(--size) * .4);width:var(--size);height:var(--size);border-radius:calc(var(--size) * .15);isolation:isolate;vertical-align:middle;color:var(--l-color-text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}:host([size=xs]){--size:24px;--_font-size:.75rem}:host([size=sm]){--size:32px;--_font-size:.875rem}:host([size=lg]){--size:48px;--_font-size:1.25rem}:host([size=xl]){--size:56px;--_font-size:1.25rem}img{object-fit:cover;border-radius:inherit;width:100%;height:100%}.initials{margin:auto}.icon{color:currentColor;width:60%;height:60%}.badge{z-index:1;min-width:12px;height:12px;box-shadow:0 0 0 2px var(--l-color-surface);background-color:var(--l-color-surface);font-size:.625rem;font-weight:var(--l-font-weight-medium);font-variant-numeric:tabular-nums;color:var(--l-color-text-primary);border-radius:3px;justify-content:center;align-items:center;padding-inline:2px;line-height:1;display:flex;position:absolute;bottom:0;right:0;overflow:hidden}.base:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--lightningcss-light,oklch(0% 0 0/.07))var(--lightningcss-dark,oklch(100% 0 0/.1))}.base{border-radius:calc(var(--size) * .15);background-color:var(--color,var(--l-color-bg-fill-neutral-soft));--_on:calc(255 * ( 1 - sign(.2126 * (r / 255) * (r / 255) + .7152 * (g / 255) * (g / 255) + .0722 * (b / 255) * (b / 255) - .2) ) / 2);width:100%;height:100%;color:var(--text-color,rgb(from var(--color) var(--_on) var(--_on) var(--_on)));font-size:var(--_font-size);font-weight:var(--l-font-weight-medium);text-transform:uppercase;cursor:inherit;border:none;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}@supports (color:contrast-color(red)){.base{color:var(--text-color,contrast-color(var(--color)))}}button.base{cursor:pointer}button.base:focus-visible{outline:2px solid var(--l-focus-ring);outline-offset:2px}button.base:hover{box-shadow:inset 0 0 0 1.5px var(--l-color-border-interactive)}@container style(--appearance:circle){.base{border-radius:50%}}`);function f(e=``){let t=e.normalize(`NFC`).trim().split(/\s+/).filter(Boolean);if(t.length===0)return``;let n=e=>[...e][0];return(n(t[0])+(t.length>1?n(t[t.length-1]):``)).toUpperCase()}var p=r`<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
2
2
|
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
|
|
3
|
-
</svg>`,m=class extends
|
|
3
|
+
</svg>`,m=class extends t{constructor(...e){super(...e),this.src=``,this.name=``,this.size=`md`,this.badge=0,this.interactive=!1,this._hasError=!1,this._onError=()=>{this._hasError=!0}}static{this.styles=[u,d]}willUpdate(e){e.has(`src`)&&(this._hasError=!1)}connectedCallback(){super.connectedCallback(),!this.interactive&&!this.hasAttribute(`role`)&&this.setAttribute(`role`,`img`)}updated(){this.interactive?(this.getAttribute(`role`)===`img`&&this.removeAttribute(`role`),this.removeAttribute(`aria-label`)):(this.hasAttribute(`role`)||this.setAttribute(`role`,`img`),this.name&&this.setAttribute(`aria-label`,this.name));let e=getComputedStyle(this).getPropertyValue(`--appearance`).trim()===`circle`;this.style.borderRadius=e?`50%`:``}get _tag(){return this.interactive?o`button`:o`div`}render(){let e=this.src&&!this._hasError?n`<img
|
|
4
4
|
src=${this.src}
|
|
5
5
|
alt=${this.name||``}
|
|
6
6
|
@error=${this._onError}
|
|
7
|
-
/>`:this.name?
|
|
7
|
+
/>`:this.name?n`<span class="initials">${f(this.name)}</span>`:n`<slot>${p}</slot>`;return a`
|
|
8
8
|
<${this._tag}
|
|
9
9
|
class="base"
|
|
10
10
|
part="base"
|
|
11
|
-
type=${this.interactive?`button`:
|
|
12
|
-
aria-label=${this.interactive&&this.name?this.name:
|
|
11
|
+
type=${this.interactive?`button`:i}
|
|
12
|
+
aria-label=${this.interactive&&this.name?this.name:i}
|
|
13
13
|
>
|
|
14
14
|
${e}
|
|
15
15
|
</${this._tag}>
|
|
16
|
-
${this.badge?
|
|
16
|
+
${this.badge?n`<div
|
|
17
17
|
class="badge"
|
|
18
18
|
aria-hidden="true"
|
|
19
19
|
>
|
|
20
20
|
${this.badge}
|
|
21
|
-
</div>`:
|
|
22
|
-
`}};
|
|
21
|
+
</div>`:i}
|
|
22
|
+
`}};l([c()],m.prototype,`src`,void 0),l([c()],m.prototype,`name`,void 0),l([c({reflect:!0})],m.prototype,`size`,void 0),l([c({type:Number})],m.prototype,`badge`,void 0),l([c({type:Boolean,reflect:!0})],m.prototype,`interactive`,void 0),l([s()],m.prototype,`_hasError`,void 0);export{m as Avatar};
|
|
23
23
|
//# sourceMappingURL=avatar.js.map
|