@vielzeug/refine 2.1.0 → 2.1.3
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/dist/accordion-item.cjs +1 -1
- package/dist/accordion-item.cjs.map +1 -1
- package/dist/accordion-item.js +1 -1
- package/dist/accordion-item.js.map +1 -1
- package/dist/accordion.cjs +1 -1
- package/dist/accordion.cjs.map +1 -1
- package/dist/accordion.js +1 -1
- package/dist/accordion.js.map +1 -1
- package/dist/alert.cjs.map +1 -1
- package/dist/alert.js.map +1 -1
- package/dist/async.cjs.map +1 -1
- package/dist/async.js.map +1 -1
- package/dist/avatar-group.cjs.map +1 -1
- package/dist/avatar-group.js.map +1 -1
- package/dist/avatar.cjs +6 -6
- package/dist/avatar.cjs.map +1 -1
- package/dist/avatar.js +1 -2
- package/dist/avatar.js.map +1 -1
- package/dist/badge.cjs.map +1 -1
- package/dist/badge.js.map +1 -1
- package/dist/box.cjs.map +1 -1
- package/dist/box.js.map +1 -1
- package/dist/breadcrumb.cjs +3 -3
- package/dist/breadcrumb.cjs.map +1 -1
- package/dist/breadcrumb.js +4 -4
- package/dist/breadcrumb.js.map +1 -1
- package/dist/button-group.cjs +1 -1
- package/dist/button-group.cjs.map +1 -1
- package/dist/button-group.js +0 -1
- package/dist/button-group.js.map +1 -1
- package/dist/button.cjs.map +1 -1
- package/dist/button.js.map +1 -1
- package/dist/calendar.cjs.map +1 -1
- package/dist/calendar.js.map +1 -1
- package/dist/card.cjs +7 -7
- package/dist/card.cjs.map +1 -1
- package/dist/card.js +27 -27
- package/dist/card.js.map +1 -1
- package/dist/carousel.cjs +20 -20
- package/dist/carousel.cjs.map +1 -1
- package/dist/carousel.js +7 -8
- package/dist/carousel.js.map +1 -1
- package/dist/chat-message.cjs +10 -10
- package/dist/chat-message.cjs.map +1 -1
- package/dist/chat-message.js +1 -2
- package/dist/chat-message.js.map +1 -1
- package/dist/checkbox-group.cjs +7 -7
- package/dist/checkbox-group.cjs.map +1 -1
- package/dist/checkbox-group.js +26 -26
- package/dist/checkbox-group.js.map +1 -1
- package/dist/checkbox.cjs +2 -2
- package/dist/checkbox.cjs.map +1 -1
- package/dist/checkbox.js +33 -33
- package/dist/checkbox.js.map +1 -1
- package/dist/chip.cjs +16 -16
- package/dist/chip.cjs.map +1 -1
- package/dist/chip.js +1 -2
- package/dist/chip.js.map +1 -1
- package/dist/combobox.cjs +28 -28
- package/dist/combobox.cjs.map +1 -1
- package/dist/combobox.js +211 -211
- package/dist/combobox.js.map +1 -1
- package/dist/command-palette.cjs +21 -21
- package/dist/command-palette.cjs.map +1 -1
- package/dist/command-palette.js +27 -28
- package/dist/command-palette.js.map +1 -1
- package/dist/content/avatar/avatar.css.cjs +1 -1
- package/dist/content/avatar/avatar.css.js +1 -1
- package/dist/content/avatar/avatar.d.ts.map +1 -1
- package/dist/content/breadcrumb/breadcrumb.d.ts.map +1 -1
- package/dist/content/card/card.css.cjs +1 -1
- package/dist/content/card/card.css.cjs.map +1 -1
- package/dist/content/card/card.css.js +1 -1
- package/dist/content/card/card.css.js.map +1 -1
- package/dist/content/card/card.d.ts.map +1 -1
- package/dist/content/carousel/carousel-slide.cjs.map +1 -1
- package/dist/content/carousel/carousel-slide.js.map +1 -1
- package/dist/content/carousel/carousel.css.cjs +1 -1
- package/dist/content/carousel/carousel.css.cjs.map +1 -1
- package/dist/content/carousel/carousel.css.js +1 -1
- package/dist/content/carousel/carousel.css.js.map +1 -1
- package/dist/content/carousel/carousel.d.ts.map +1 -1
- package/dist/content/carousel/index.d.ts +1 -1
- package/dist/content/carousel/index.d.ts.map +1 -1
- package/dist/content/chat-message/chat-message.css.cjs +1 -1
- package/dist/content/chat-message/chat-message.css.js +1 -1
- package/dist/content/chat-message/chat-message.d.ts.map +1 -1
- package/dist/content/code-window/code-window.css.cjs +1 -1
- package/dist/content/code-window/code-window.css.js +1 -1
- package/dist/content/copy-command/copy-command.css.cjs +1 -1
- package/dist/content/copy-command/copy-command.css.js +1 -1
- package/dist/content/copy-command/copy-command.d.ts.map +1 -1
- package/dist/content/index.d.ts +22 -22
- package/dist/content/index.d.ts.map +1 -1
- package/dist/content/list/_list-item-reveal.cjs.map +1 -1
- package/dist/content/list/_list-item-reveal.d.ts +1 -1
- package/dist/content/list/_list-item-reveal.d.ts.map +1 -1
- package/dist/content/list/_list-item-reveal.js.map +1 -1
- package/dist/content/list/list-item.css.cjs +1 -1
- package/dist/content/list/list-item.css.cjs.map +1 -1
- package/dist/content/list/list-item.css.js +1 -1
- package/dist/content/list/list-item.css.js.map +1 -1
- package/dist/content/list/list.d.ts.map +1 -1
- package/dist/content/marquee/marquee.css.cjs +1 -1
- package/dist/content/marquee/marquee.css.js +1 -1
- package/dist/content/pagination/pagination.css.cjs +1 -1
- package/dist/content/pagination/pagination.css.js +1 -1
- package/dist/content/pagination/pagination.d.ts.map +1 -1
- package/dist/content/separator/separator.css.cjs +1 -1
- package/dist/content/separator/separator.css.js +1 -1
- package/dist/content/separator/separator.d.ts.map +1 -1
- package/dist/content/stepper/step.css.cjs.map +1 -1
- package/dist/content/stepper/step.css.js.map +1 -1
- package/dist/content/stepper/stepper.d.ts.map +1 -1
- package/dist/content/table/table.css.cjs +1 -1
- package/dist/content/table/table.css.js +1 -1
- package/dist/content/text/text.css.cjs +1 -1
- package/dist/content/text/text.css.js +1 -1
- package/dist/copy-command.cjs.map +1 -1
- package/dist/copy-command.js.map +1 -1
- package/dist/core/checkable.cjs +1 -1
- package/dist/core/checkable.cjs.map +1 -1
- package/dist/core/checkable.d.ts.map +1 -1
- package/dist/core/checkable.js +4 -4
- package/dist/core/checkable.js.map +1 -1
- package/dist/core/choice-field.cjs +1 -1
- package/dist/core/choice-field.cjs.map +1 -1
- package/dist/core/choice-field.d.ts.map +1 -1
- package/dist/core/choice-field.js +1 -2
- package/dist/core/choice-field.js.map +1 -1
- package/dist/core/date-picker.cjs +1 -1
- package/dist/core/date-picker.cjs.map +1 -1
- package/dist/core/date-picker.d.ts.map +1 -1
- package/dist/core/date-picker.js +3 -3
- package/dist/core/date-picker.js.map +1 -1
- package/dist/core/index.d.ts +17 -17
- package/dist/core/index.d.ts.map +1 -1
- package/dist/core/option-list.cjs +1 -1
- package/dist/core/option-list.cjs.map +1 -1
- package/dist/core/option-list.d.ts.map +1 -1
- package/dist/core/option-list.js +4 -4
- package/dist/core/option-list.js.map +1 -1
- package/dist/core/ref-callback.cjs +1 -1
- package/dist/core/ref-callback.cjs.map +1 -1
- package/dist/core/ref-callback.d.ts.map +1 -1
- package/dist/core/ref-callback.js +1 -1
- package/dist/core/ref-callback.js.map +1 -1
- package/dist/core/signals.cjs +1 -1
- package/dist/core/signals.cjs.map +1 -1
- package/dist/core/signals.d.ts.map +1 -1
- package/dist/core/signals.js +1 -2
- package/dist/core/signals.js.map +1 -1
- package/dist/core/slider.cjs.map +1 -1
- package/dist/core/slider.d.ts.map +1 -1
- package/dist/core/slider.js.map +1 -1
- package/dist/core/spinner.cjs.map +1 -1
- package/dist/core/spinner.d.ts.map +1 -1
- package/dist/core/spinner.js.map +1 -1
- package/dist/core/text-field.cjs +1 -1
- package/dist/core/text-field.cjs.map +1 -1
- package/dist/core/text-field.js +1 -1
- package/dist/core/text-field.js.map +1 -1
- package/dist/custom-elements.json +4253 -4253
- package/dist/datagrid.cjs +114 -114
- package/dist/datagrid.cjs.map +1 -1
- package/dist/datagrid.js +42 -43
- package/dist/datagrid.js.map +1 -1
- package/dist/date-picker.cjs.map +1 -1
- package/dist/date-picker.js.map +1 -1
- package/dist/dialog.cjs.map +1 -1
- package/dist/dialog.js.map +1 -1
- package/dist/disclosure/accordion/accordion.d.ts.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.cjs +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.cjs.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.js +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.js.map +1 -1
- package/dist/disclosure/index.d.ts +6 -6
- package/dist/disclosure/index.d.ts.map +1 -1
- package/dist/disclosure/tab-item/tab-item.css.cjs.map +1 -1
- package/dist/disclosure/tab-item/tab-item.css.js.map +1 -1
- package/dist/disclosure/tab-item/tab-item.d.ts.map +1 -1
- package/dist/disclosure/tabs/tabs.css.cjs +1 -1
- package/dist/disclosure/tabs/tabs.css.cjs.map +1 -1
- package/dist/disclosure/tabs/tabs.css.js +1 -1
- package/dist/disclosure/tabs/tabs.css.js.map +1 -1
- package/dist/disclosure/tabs/tabs.d.ts.map +1 -1
- package/dist/drawer.cjs +5 -5
- package/dist/drawer.cjs.map +1 -1
- package/dist/drawer.js +26 -26
- package/dist/drawer.js.map +1 -1
- package/dist/feedback/alert/alert.css.cjs +1 -1
- package/dist/feedback/alert/alert.css.js +1 -1
- package/dist/feedback/async/async.d.ts +1 -1
- package/dist/feedback/async/async.d.ts.map +1 -1
- package/dist/feedback/badge/badge.css.cjs +1 -1
- package/dist/feedback/badge/badge.css.js +1 -1
- package/dist/feedback/badge/badge.d.ts.map +1 -1
- package/dist/feedback/chip/chip.css.cjs.map +1 -1
- package/dist/feedback/chip/chip.css.js.map +1 -1
- package/dist/feedback/chip/chip.d.ts.map +1 -1
- package/dist/feedback/index.d.ts +12 -12
- package/dist/feedback/index.d.ts.map +1 -1
- package/dist/feedback/progress/progress.d.ts.map +1 -1
- package/dist/feedback/skeleton/skeleton.d.ts.map +1 -1
- package/dist/feedback/toast/index.d.ts +1 -1
- package/dist/feedback/toast/index.d.ts.map +1 -1
- package/dist/feedback/toast/toast.css.cjs +1 -1
- package/dist/feedback/toast/toast.css.cjs.map +1 -1
- package/dist/feedback/toast/toast.css.js +1 -1
- package/dist/feedback/toast/toast.css.js.map +1 -1
- package/dist/feedback/toast/toast.d.ts +1 -1
- package/dist/feedback/toast/toast.d.ts.map +1 -1
- package/dist/feedback/typing-indicator/typing-indicator.d.ts.map +1 -1
- package/dist/file-input.cjs +67 -67
- package/dist/file-input.cjs.map +1 -1
- package/dist/file-input.js +129 -130
- package/dist/file-input.js.map +1 -1
- package/dist/grid.cjs.map +1 -1
- package/dist/grid.js.map +1 -1
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.js.map +1 -1
- package/dist/input.cjs +21 -21
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +58 -58
- package/dist/input.js.map +1 -1
- package/dist/inputs/button/button.css.cjs +1 -1
- package/dist/inputs/button/button.css.js +1 -1
- package/dist/inputs/button/button.d.ts.map +1 -1
- package/dist/inputs/button-group/button-group.css.cjs.map +1 -1
- package/dist/inputs/button-group/button-group.css.js.map +1 -1
- package/dist/inputs/button-group/button-group.d.ts +1 -1
- package/dist/inputs/button-group/button-group.d.ts.map +1 -1
- package/dist/inputs/calendar/calendar.css.cjs +1 -1
- package/dist/inputs/calendar/calendar.css.cjs.map +1 -1
- package/dist/inputs/calendar/calendar.css.js +1 -1
- package/dist/inputs/calendar/calendar.css.js.map +1 -1
- package/dist/inputs/calendar/calendar.d.ts.map +1 -1
- package/dist/inputs/checkbox/checkbox.css.cjs +1 -1
- package/dist/inputs/checkbox/checkbox.css.js +1 -1
- package/dist/inputs/checkbox/checkbox.d.ts.map +1 -1
- package/dist/inputs/checkbox-group/checkbox-group.d.ts +1 -1
- package/dist/inputs/checkbox-group/checkbox-group.d.ts.map +1 -1
- package/dist/inputs/combobox/combobox.css.cjs +1 -1
- package/dist/inputs/combobox/combobox.css.js +1 -1
- package/dist/inputs/combobox/combobox.d.ts.map +1 -1
- package/dist/inputs/datagrid/datagrid-column.cjs.map +1 -1
- package/dist/inputs/datagrid/datagrid-column.d.ts.map +1 -1
- package/dist/inputs/datagrid/datagrid-column.js.map +1 -1
- package/dist/inputs/datagrid/datagrid-model.cjs +1 -1
- package/dist/inputs/datagrid/datagrid-model.cjs.map +1 -1
- package/dist/inputs/datagrid/datagrid-model.d.ts.map +1 -1
- package/dist/inputs/datagrid/datagrid-model.js +1 -2
- package/dist/inputs/datagrid/datagrid-model.js.map +1 -1
- package/dist/inputs/datagrid/datagrid.css.cjs +1 -1
- package/dist/inputs/datagrid/datagrid.css.cjs.map +1 -1
- package/dist/inputs/datagrid/datagrid.css.js +1 -1
- package/dist/inputs/datagrid/datagrid.css.js.map +1 -1
- package/dist/inputs/datagrid/datagrid.d.ts +1 -1
- package/dist/inputs/datagrid/datagrid.d.ts.map +1 -1
- package/dist/inputs/date-picker/date-picker.css.cjs +1 -1
- package/dist/inputs/date-picker/date-picker.css.cjs.map +1 -1
- package/dist/inputs/date-picker/date-picker.css.js +1 -1
- package/dist/inputs/date-picker/date-picker.css.js.map +1 -1
- package/dist/inputs/date-picker/date-picker.d.ts.map +1 -1
- package/dist/inputs/file-input/file-input-upload.cjs +1 -1
- package/dist/inputs/file-input/file-input-upload.cjs.map +1 -1
- package/dist/inputs/file-input/file-input-upload.d.ts.map +1 -1
- package/dist/inputs/file-input/file-input-upload.js +2 -3
- package/dist/inputs/file-input/file-input-upload.js.map +1 -1
- package/dist/inputs/file-input/file-input.css.cjs +1 -1
- package/dist/inputs/file-input/file-input.css.js +1 -1
- package/dist/inputs/file-input/file-input.d.ts.map +1 -1
- package/dist/inputs/index.d.ts +28 -28
- package/dist/inputs/index.d.ts.map +1 -1
- package/dist/inputs/input/input.css.cjs +1 -1
- package/dist/inputs/input/input.css.js +1 -1
- package/dist/inputs/input/input.d.ts.map +1 -1
- package/dist/inputs/message-composer/message-composer.css.cjs +1 -1
- package/dist/inputs/message-composer/message-composer.css.js +1 -1
- package/dist/inputs/message-composer/message-composer.d.ts +1 -1
- package/dist/inputs/message-composer/message-composer.d.ts.map +1 -1
- package/dist/inputs/number-input/number-input.d.ts.map +1 -1
- package/dist/inputs/otp-input/otp-input.d.ts.map +1 -1
- package/dist/inputs/radio/radio.css.cjs +1 -1
- package/dist/inputs/radio/radio.css.js +1 -1
- package/dist/inputs/radio/radio.d.ts.map +1 -1
- package/dist/inputs/radio-group/radio-group.d.ts +2 -2
- package/dist/inputs/radio-group/radio-group.d.ts.map +1 -1
- package/dist/inputs/rating/rating.d.ts.map +1 -1
- package/dist/inputs/select/select.css.cjs +1 -1
- package/dist/inputs/select/select.css.js +1 -1
- package/dist/inputs/select/select.d.ts.map +1 -1
- package/dist/inputs/shared/field-binding.cjs.map +1 -1
- package/dist/inputs/shared/field-binding.d.ts.map +1 -1
- package/dist/inputs/shared/field-binding.js.map +1 -1
- package/dist/inputs/shared/templates.cjs.map +1 -1
- package/dist/inputs/shared/templates.d.ts.map +1 -1
- package/dist/inputs/shared/templates.js.map +1 -1
- package/dist/inputs/slider/slider.d.ts.map +1 -1
- package/dist/inputs/switch/switch.css.cjs +1 -1
- package/dist/inputs/switch/switch.css.js +1 -1
- package/dist/inputs/switch/switch.d.ts.map +1 -1
- package/dist/inputs/textarea/textarea.css.cjs +1 -1
- package/dist/inputs/textarea/textarea.css.js +1 -1
- package/dist/inputs/textarea/textarea.d.ts.map +1 -1
- package/dist/inputs/time-picker/time-picker.css.cjs +1 -1
- package/dist/inputs/time-picker/time-picker.css.cjs.map +1 -1
- package/dist/inputs/time-picker/time-picker.css.js +1 -1
- package/dist/inputs/time-picker/time-picker.css.js.map +1 -1
- package/dist/inputs/time-picker/time-picker.d.ts.map +1 -1
- package/dist/layout/box/box.d.ts.map +1 -1
- package/dist/layout/grid/grid.d.ts.map +1 -1
- package/dist/layout/index.d.ts +6 -6
- package/dist/layout/index.d.ts.map +1 -1
- package/dist/layout/navbar/navbar.css.cjs +1 -1
- package/dist/layout/navbar/navbar.css.js +1 -1
- package/dist/layout/navbar/navbar.d.ts.map +1 -1
- package/dist/layout/sidebar/sidebar-group.css.cjs +1 -1
- package/dist/layout/sidebar/sidebar-group.css.cjs.map +1 -1
- package/dist/layout/sidebar/sidebar-group.css.js +1 -1
- package/dist/layout/sidebar/sidebar-group.css.js.map +1 -1
- package/dist/layout/sidebar/sidebar.css.cjs +1 -1
- package/dist/layout/sidebar/sidebar.css.cjs.map +1 -1
- package/dist/layout/sidebar/sidebar.css.js +1 -1
- package/dist/layout/sidebar/sidebar.css.js.map +1 -1
- package/dist/layout/sidebar/sidebar.d.ts.map +1 -1
- package/dist/list-item.cjs.map +1 -1
- package/dist/list-item.js.map +1 -1
- package/dist/list.cjs +2 -2
- package/dist/list.cjs.map +1 -1
- package/dist/list.js +15 -16
- package/dist/list.js.map +1 -1
- package/dist/marquee.cjs +1 -1
- package/dist/marquee.cjs.map +1 -1
- package/dist/marquee.js +1 -1
- package/dist/marquee.js.map +1 -1
- package/dist/menu.cjs +5 -5
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.js +38 -39
- package/dist/menu.js.map +1 -1
- package/dist/message-composer.cjs +16 -16
- package/dist/message-composer.cjs.map +1 -1
- package/dist/message-composer.js +61 -61
- package/dist/message-composer.js.map +1 -1
- package/dist/navbar.cjs +9 -9
- package/dist/navbar.cjs.map +1 -1
- package/dist/navbar.js +1 -2
- package/dist/navbar.js.map +1 -1
- package/dist/navigation-menu.cjs +5 -5
- package/dist/navigation-menu.cjs.map +1 -1
- package/dist/navigation-menu.js +33 -34
- package/dist/navigation-menu.js.map +1 -1
- package/dist/number-input.cjs +24 -24
- package/dist/number-input.cjs.map +1 -1
- package/dist/number-input.js +41 -42
- package/dist/number-input.js.map +1 -1
- package/dist/otp-input.cjs +13 -13
- package/dist/otp-input.cjs.map +1 -1
- package/dist/otp-input.js +32 -33
- package/dist/otp-input.js.map +1 -1
- package/dist/overlay/command-palette/command-palette-items.cjs.map +1 -1
- package/dist/overlay/command-palette/command-palette-items.d.ts.map +1 -1
- package/dist/overlay/command-palette/command-palette-items.js.map +1 -1
- package/dist/overlay/command-palette/command-palette.css.cjs +1 -1
- package/dist/overlay/command-palette/command-palette.css.cjs.map +1 -1
- package/dist/overlay/command-palette/command-palette.css.js +1 -1
- package/dist/overlay/command-palette/command-palette.css.js.map +1 -1
- package/dist/overlay/command-palette/command-palette.d.ts.map +1 -1
- package/dist/overlay/dialog/dialog.css.cjs +1 -1
- package/dist/overlay/dialog/dialog.css.js +1 -1
- package/dist/overlay/dialog/dialog.d.ts.map +1 -1
- package/dist/overlay/drawer/drawer.css.cjs +1 -1
- package/dist/overlay/drawer/drawer.css.js +1 -1
- package/dist/overlay/drawer/drawer.d.ts +2 -2
- package/dist/overlay/drawer/drawer.d.ts.map +1 -1
- package/dist/overlay/index.d.ts +6 -6
- package/dist/overlay/index.d.ts.map +1 -1
- package/dist/overlay/menu/menu.css.cjs +1 -1
- package/dist/overlay/menu/menu.css.js +1 -1
- package/dist/overlay/menu/menu.d.ts +2 -2
- package/dist/overlay/menu/menu.d.ts.map +1 -1
- package/dist/overlay/navigation-menu/navigation-menu.d.ts.map +1 -1
- package/dist/overlay/popover/popover.d.ts +1 -1
- package/dist/overlay/popover/popover.d.ts.map +1 -1
- package/dist/overlay/shared/use-dialog.cjs +1 -1
- package/dist/overlay/shared/use-dialog.cjs.map +1 -1
- package/dist/overlay/shared/use-dialog.d.ts.map +1 -1
- package/dist/overlay/shared/use-dialog.js +4 -5
- package/dist/overlay/shared/use-dialog.js.map +1 -1
- package/dist/overlay/shared/use-floating-trigger.cjs +1 -1
- package/dist/overlay/shared/use-floating-trigger.cjs.map +1 -1
- package/dist/overlay/shared/use-floating-trigger.d.ts.map +1 -1
- package/dist/overlay/shared/use-floating-trigger.js +1 -2
- package/dist/overlay/shared/use-floating-trigger.js.map +1 -1
- package/dist/overlay/tooltip/tooltip.d.ts +1 -1
- package/dist/overlay/tooltip/tooltip.d.ts.map +1 -1
- package/dist/pagination.cjs.map +1 -1
- package/dist/pagination.js.map +1 -1
- package/dist/popover.cjs +1 -1
- package/dist/popover.cjs.map +1 -1
- package/dist/popover.js +0 -1
- package/dist/popover.js.map +1 -1
- package/dist/progress.cjs.map +1 -1
- package/dist/progress.js.map +1 -1
- package/dist/radio-group.cjs +5 -5
- package/dist/radio-group.cjs.map +1 -1
- package/dist/radio-group.js +26 -27
- package/dist/radio-group.js.map +1 -1
- package/dist/radio.cjs +2 -2
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.js +41 -41
- package/dist/radio.js.map +1 -1
- package/dist/rating.cjs +4 -4
- package/dist/rating.cjs.map +1 -1
- package/dist/rating.js +36 -36
- package/dist/rating.js.map +1 -1
- package/dist/refine.cjs +686 -686
- package/dist/refine.cjs.map +1 -1
- package/dist/refine.iife.js +686 -686
- package/dist/refine.iife.js.map +1 -1
- package/dist/refine.js +737 -737
- package/dist/refine.js.map +1 -1
- package/dist/select.cjs +42 -42
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +146 -147
- package/dist/select.js.map +1 -1
- package/dist/separator.cjs.map +1 -1
- package/dist/separator.js.map +1 -1
- package/dist/sidebar.cjs +17 -17
- package/dist/sidebar.cjs.map +1 -1
- package/dist/sidebar.js +7 -8
- package/dist/sidebar.js.map +1 -1
- package/dist/skeleton.cjs +3 -3
- package/dist/skeleton.cjs.map +1 -1
- package/dist/skeleton.js +1 -2
- package/dist/skeleton.js.map +1 -1
- package/dist/slider.cjs +12 -12
- package/dist/slider.cjs.map +1 -1
- package/dist/slider.js +54 -55
- package/dist/slider.js.map +1 -1
- package/dist/step.cjs.map +1 -1
- package/dist/step.js.map +1 -1
- package/dist/stepper.cjs +2 -2
- package/dist/stepper.cjs.map +1 -1
- package/dist/stepper.js +8 -7
- package/dist/stepper.js.map +1 -1
- package/dist/styles/index.d.ts +2 -2
- package/dist/styles/index.d.ts.map +1 -1
- package/dist/styles/preflight.css +1 -1
- package/dist/styles/theme.css +15 -30
- package/dist/switch.cjs +3 -3
- package/dist/switch.cjs.map +1 -1
- package/dist/switch.js +28 -28
- package/dist/switch.js.map +1 -1
- package/dist/tab-item.cjs +2 -2
- package/dist/tab-item.cjs.map +1 -1
- package/dist/tab-item.js +21 -21
- package/dist/tab-item.js.map +1 -1
- package/dist/tab-panel.cjs +2 -2
- package/dist/tab-panel.cjs.map +1 -1
- package/dist/tab-panel.js +9 -9
- package/dist/tab-panel.js.map +1 -1
- package/dist/table.cjs +1 -1
- package/dist/table.cjs.map +1 -1
- package/dist/table.js +1 -1
- package/dist/table.js.map +1 -1
- package/dist/tabs.cjs +6 -6
- package/dist/tabs.cjs.map +1 -1
- package/dist/tabs.js +14 -15
- package/dist/tabs.js.map +1 -1
- package/dist/textarea.cjs +11 -11
- package/dist/textarea.cjs.map +1 -1
- package/dist/textarea.js +59 -59
- package/dist/textarea.js.map +1 -1
- package/dist/time-picker.cjs.map +1 -1
- package/dist/time-picker.js.map +1 -1
- package/dist/toast.cjs +16 -16
- package/dist/toast.cjs.map +1 -1
- package/dist/toast.js +20 -21
- package/dist/toast.js.map +1 -1
- package/dist/tooltip.cjs.map +1 -1
- package/dist/tooltip.js.map +1 -1
- package/dist/typing-indicator.cjs +1 -1
- package/dist/typing-indicator.cjs.map +1 -1
- package/dist/typing-indicator.js +1 -1
- package/dist/typing-indicator.js.map +1 -1
- package/package.json +96 -97
package/dist/otp-input.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { fieldVariantMixin as e } from "./styles/mixins/field-variants.css.js";
|
|
2
2
|
import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
|
|
3
3
|
import { colorThemeMixin as n, forcedColorsFocusMixin as r } from "./styles/mixins/theme.css.js";
|
|
4
|
-
import {
|
|
4
|
+
import { lifecycleSignal as i } from "./core/ore.js";
|
|
5
5
|
import { createListControl as a } from "./core/nav.js";
|
|
6
6
|
import { disablableBundle as o, sizableBundle as s, themableBundle as c } from "./shared/prop-bundles.js";
|
|
7
7
|
import { defineFieldValue as l, dispatchNativeFieldEvent as u, setFieldValue as d } from "./inputs/shared/native-field-event.js";
|
|
8
8
|
import f from "./inputs/otp-input/otp-input.css.js";
|
|
9
9
|
import { bind as p, define as m, getHost as h, html as g, onCleanup as _, onMounted as v, prop as y, useEmit as b, useField as x } from "@vielzeug/ore";
|
|
10
|
-
import { computed as S, signal as C } from "@vielzeug/ripple";
|
|
11
|
-
import { watch as w } from "@vielzeug/ripple/watch";
|
|
10
|
+
import { computed as S, signal as C, watch as w } from "@vielzeug/ripple";
|
|
12
11
|
//#region src/inputs/otp-input/otp-input.ts
|
|
13
12
|
var T = "ore-otp-input";
|
|
14
13
|
m(T, {
|
|
@@ -26,19 +25,19 @@ m(T, {
|
|
|
26
25
|
value: y.string(),
|
|
27
26
|
variant: y.string()
|
|
28
27
|
},
|
|
29
|
-
setup(
|
|
30
|
-
let
|
|
28
|
+
setup(e) {
|
|
29
|
+
let t = h(), n = b(), r = S(() => Number(e.length.value) || 6), o = S(() => !!e.disabled.value), s = S(() => Array.from({ length: r.value }, (e, t) => t)), c = C(String(e.value.value || "")), f = () => String(e.value.value || "");
|
|
31
30
|
x({
|
|
32
31
|
disabled: o,
|
|
33
32
|
toFormValue: (e) => e,
|
|
34
33
|
value: c
|
|
35
34
|
}), p({ attr: {
|
|
36
|
-
size:
|
|
35
|
+
size: e.size,
|
|
37
36
|
value: () => c.value || null,
|
|
38
|
-
variant:
|
|
37
|
+
variant: e.variant
|
|
39
38
|
} });
|
|
40
39
|
function m() {
|
|
41
|
-
return [...
|
|
40
|
+
return [...t.shadowRoot?.querySelectorAll("input.cell") ?? []];
|
|
42
41
|
}
|
|
43
42
|
let y = a({
|
|
44
43
|
getItems: () => m(),
|
|
@@ -50,7 +49,7 @@ m(T, {
|
|
|
50
49
|
onNavigate: (e, t) => {
|
|
51
50
|
m()[t]?.focus();
|
|
52
51
|
},
|
|
53
|
-
signal:
|
|
52
|
+
signal: i(_)
|
|
54
53
|
});
|
|
55
54
|
function T() {
|
|
56
55
|
return m().map((e) => e.value).join("");
|
|
@@ -62,18 +61,18 @@ m(T, {
|
|
|
62
61
|
t[n] && (t[n].value = e);
|
|
63
62
|
}), c.value = T();
|
|
64
63
|
}
|
|
65
|
-
l(
|
|
64
|
+
l(t, () => c.value, (e) => {
|
|
66
65
|
E(e);
|
|
67
66
|
});
|
|
68
|
-
function D(e,
|
|
69
|
-
let i = m(), a = T(), o =
|
|
70
|
-
c.value = a, d(
|
|
67
|
+
function D(e, r) {
|
|
68
|
+
let i = m(), a = T(), o = r ?? (a.length === i.length && a.split("").every(Boolean));
|
|
69
|
+
c.value = a, d(t, a), u(t, "input"), u(t, "change"), o && n("complete", {
|
|
71
70
|
originalEvent: e,
|
|
72
71
|
value: a
|
|
73
72
|
});
|
|
74
73
|
}
|
|
75
|
-
function O(
|
|
76
|
-
return
|
|
74
|
+
function O(t) {
|
|
75
|
+
return e.type.value === "numeric" ? /^\d$/.test(t) : /^[a-z\d]$/i.test(t);
|
|
77
76
|
}
|
|
78
77
|
function k(e, t) {
|
|
79
78
|
let n = e.target, r = n.value;
|
|
@@ -98,40 +97,40 @@ m(T, {
|
|
|
98
97
|
}
|
|
99
98
|
function j(e) {
|
|
100
99
|
e.preventDefault();
|
|
101
|
-
let t = (e.clipboardData?.getData("text") ?? "").split("").filter((e) => O(e)).slice(0,
|
|
100
|
+
let t = (e.clipboardData?.getData("text") ?? "").split("").filter((e) => O(e)).slice(0, r.value), n = m();
|
|
102
101
|
t.forEach((e, t) => {
|
|
103
102
|
n[t] && (n[t].value = e);
|
|
104
103
|
}), D(e), n[Math.min(t.length, n.length - 1)]?.focus();
|
|
105
104
|
}
|
|
106
|
-
w(
|
|
105
|
+
w(e.value, (e) => {
|
|
107
106
|
E(String(e || ""));
|
|
108
|
-
}), w(
|
|
107
|
+
}), w(e.length, () => {
|
|
109
108
|
requestAnimationFrame(() => E(f()));
|
|
110
109
|
});
|
|
111
110
|
let M = S(() => {
|
|
112
|
-
let
|
|
113
|
-
return
|
|
111
|
+
let t = Number(e.length.value) || 6;
|
|
112
|
+
return e.separator.value == null ? -1 : Math.floor(t / 2);
|
|
114
113
|
});
|
|
115
114
|
return v(() => {
|
|
116
115
|
E(f());
|
|
117
116
|
}), g`
|
|
118
|
-
<div class="otp-group" part="group" role="group" aria-label="${
|
|
119
|
-
${() => s.value.map((
|
|
120
|
-
${() => M.value > 0 &&
|
|
121
|
-
<span class="separator" aria-hidden="true">${() =>
|
|
117
|
+
<div class="otp-group" part="group" role="group" aria-label="${e.label}">
|
|
118
|
+
${() => s.value.map((t) => g`
|
|
119
|
+
${() => M.value > 0 && t === M.value ? g`
|
|
120
|
+
<span class="separator" aria-hidden="true">${() => e.separator.value || "-"}</span>
|
|
122
121
|
` : ""}
|
|
123
122
|
<input
|
|
124
123
|
class="cell"
|
|
125
124
|
part="cell"
|
|
126
|
-
type="${() =>
|
|
127
|
-
inputmode="${() =>
|
|
125
|
+
type="${() => e.masked.value ? "password" : "text"}"
|
|
126
|
+
inputmode="${() => e.type.value === "numeric" ? "numeric" : "text"}"
|
|
128
127
|
maxlength="1"
|
|
129
|
-
autocomplete="${() =>
|
|
130
|
-
aria-label="${() => `Digit ${
|
|
128
|
+
autocomplete="${() => t === 0 ? "one-time-code" : "off"}"
|
|
129
|
+
aria-label="${() => `Digit ${t + 1} of ${r.value}`}"
|
|
131
130
|
disabled="${() => o.value ? !0 : null}"
|
|
132
|
-
@input="${(
|
|
133
|
-
@keydown="${(
|
|
134
|
-
@paste="${(
|
|
131
|
+
@input="${(e) => k(e, t)}"
|
|
132
|
+
@keydown="${(e) => A(e, t)}"
|
|
133
|
+
@paste="${(e) => t === 0 ? j(e) : e.preventDefault()}"
|
|
135
134
|
@focus="${(e) => e.target.select()}" />
|
|
136
135
|
`)}
|
|
137
136
|
</div>
|
|
@@ -142,7 +141,7 @@ m(T, {
|
|
|
142
141
|
t({}),
|
|
143
142
|
r(".cell"),
|
|
144
143
|
f,
|
|
145
|
-
|
|
144
|
+
e({
|
|
146
145
|
accentVar: "--_cell-focus-border",
|
|
147
146
|
container: ".cell",
|
|
148
147
|
tokenPrefix: "otp-cell"
|
package/dist/otp-input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"otp-input.js","names":[],"sources":["../src/inputs/otp-input/otp-input.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onCleanup, onMounted, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { createListControl, lifecycleSignal } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, fieldVariantMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './otp-input.css?inline';\n\nexport type OreOtpInputEvents = {\n change: Event;\n complete: { originalEvent?: Event; value: string };\n input: Event;\n};\n\n/** OTP Input props */\nexport type OreOtpInputProps = {\n /** Theme color */\n color?: ThemeColor;\n /** Make inputs disabled */\n disabled?: boolean;\n /** Accessible label */\n label?: string;\n /** Number of input cells */\n length?: number;\n /** Mask input (show dots instead of characters) */\n masked?: boolean;\n /** Form field name */\n name?: string;\n /** Show a separator in the middle (e.g. \"–\") */\n separator?: string;\n /** Component size */\n size?: ComponentSize;\n /** Input type: 'numeric' (digits only) or 'alphanumeric' */\n type?: 'numeric' | 'alphanumeric';\n /** Current value */\n value?: string;\n /** Visual variant */\n variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n};\n\n/**\n * A segmented OTP (One-Time Password) input with N individual cells.\n * Auto-advances focus on input, auto-backs on Backspace, handles paste.\n *\n * @element ore-otp-input\n *\n * @attr {number} length - Number of cells (default: 6)\n * @attr {string} type - 'numeric' (default) | 'alphanumeric'\n * @attr {string} value - Current code value\n * @attr {boolean} disabled - Disable all cells\n * @attr {boolean} masked - Show as password\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} name - Form field name\n * @attr {string} label - Group aria-label\n * @attr {string} separator - Optional separator character shown in the middle\n *\n * @fires input - Emitted whenever a cell changes.\n * @fires change - Emitted whenever a cell changes.\n * @fires complete - Emitted when all cells are filled. detail: { value: string, originalEvent?: Event }\n *\n * @slot label - Custom label above the OTP input\n * @slot helper - Custom helper text below the OTP input\n * @slot error - Custom error content below the OTP input\n *\n * @cssprop --otp-cell-size - Width and height of each cell\n * @cssprop --otp-cell-gap - Gap between cells\n * @cssprop --otp-cell-font-size - Font size inside cells\n * @cssprop --otp-cell-radius - Border radius of cells\n * @cssprop --otp-cell-bg - Cell background color\n * @cssprop --otp-cell-border-color - Default border color\n * @cssprop --otp-cell-focus-border - Focused border/caret color\n * @cssprop --otp-cell-hover-bg - Cell background on hover (flat/ghost variants)\n * @cssprop --otp-cell-hover-border-color - Cell border on hover (flat/bordered variants)\n * @cssprop --otp-cell-focus-bg - Cell background when focused (flat variant)\n * @cssprop --otp-cell-focus-border-color - Cell border when focused (flat variant)\n *\n * @part group - Group container.\n * @part cell - Shadow part for the `cell` element.\n * @example\n * ```html\n * <ore-otp-input length=\"6\" color=\"primary\"></ore-otp-input>\n * ```\n */\nexport const OTP_INPUT_TAG = 'ore-otp-input' as const;\ndefine<OreOtpInputProps>(OTP_INPUT_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n label: prop.string('One-time password'),\n length: prop.number(6),\n masked: prop.bool(false),\n name: prop.string(),\n separator: prop.string(),\n type: prop.oneOf(['numeric', 'alphanumeric'] as const, 'numeric'),\n value: prop.string(),\n variant: prop.string<Exclude<VisualVariant, 'text' | 'frost'>>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreOtpInputEvents>();\n\n const lengthValue = computed(() => Number(props.length.value) || 6);\n const isDisabled = computed(() => Boolean(props.disabled.value));\n const cells = computed(() => Array.from({ length: lengthValue.value }, (_, i) => i));\n const otpValue = signal(String(props.value.value || ''));\n const normalizedPropValue = () => String(props.value.value || '');\n\n // Form association: the joined cell value is the single form value for `name`,\n // since individual per-cell <input> elements inside the shadow root cannot\n // participate in an ancestor <form>'s submission on their own.\n useField<string>({ disabled: isDisabled, toFormValue: (v) => v, value: otpValue });\n\n bind({\n attr: {\n size: props.size,\n value: () => otpValue.value || null,\n variant: props.variant,\n },\n });\n\n function getInputs(): HTMLInputElement[] {\n return [...(el.shadowRoot?.querySelectorAll<HTMLInputElement>('input.cell') ?? [])];\n }\n\n const listControl = createListControl({\n getItems: () => getInputs(),\n keys: { next: ['ArrowRight'], prev: ['ArrowLeft'] },\n loop: false,\n onNavigate: (_action, index) => {\n const inputs = getInputs();\n\n inputs[index]?.focus();\n },\n signal: lifecycleSignal(onCleanup),\n });\n\n function getValue(): string {\n return getInputs()\n .map((i) => i.value)\n .join('');\n }\n function syncInputsFromValue(raw: string) {\n const allInputs = getInputs();\n const normalized = String(raw || '').slice(0, allInputs.length);\n\n for (const input of allInputs) input.value = '';\n\n normalized.split('').forEach((c, i) => {\n if (allInputs[i]) allInputs[i].value = c;\n });\n\n otpValue.value = getValue();\n }\n defineFieldValue(\n el,\n () => otpValue.value,\n (value) => {\n syncInputsFromValue(value);\n },\n );\n function emitOtpState(originalEvent?: Event, forceComplete?: boolean): void {\n const allInputs = getInputs();\n const full = getValue();\n const complete = forceComplete ?? (full.length === allInputs.length && full.split('').every(Boolean));\n\n otpValue.value = full;\n setFieldValue(el, full);\n dispatchNativeFieldEvent(el, 'input');\n dispatchNativeFieldEvent(el, 'change');\n\n if (complete) emit('complete', { originalEvent, value: full });\n }\n function isAllowed(char: string): boolean {\n if (props.type.value === 'numeric') return /^\\d$/.test(char);\n\n return /^[a-z\\d]$/i.test(char);\n }\n function handleInput(e: Event, index: number) {\n const input = e.target as HTMLInputElement;\n let val = input.value;\n\n // Keep only last character if multiple were typed somehow\n if (val.length > 1) val = val.slice(-1);\n\n // Validate character\n if (val && !isAllowed(val)) {\n input.value = '';\n\n return;\n }\n\n input.value = val;\n\n const allInputs = getInputs();\n\n emitOtpState(e);\n\n // Auto-advance\n if (val && index < allInputs.length - 1) {\n allInputs[index + 1].focus();\n allInputs[index + 1].select();\n }\n }\n function handleKeydown(e: KeyboardEvent, index: number) {\n const input = e.target as HTMLInputElement;\n const allInputs = getInputs();\n\n listControl.set(index);\n\n if (e.key === 'Backspace') {\n if (input.value) {\n input.value = '';\n } else if (index > 0) {\n const prevIndex = listControl.navigate('prev');\n const prevInput = allInputs[prevIndex];\n\n if (prevInput) {\n prevInput.select();\n prevInput.value = '';\n }\n }\n\n emitOtpState(e, false);\n e.preventDefault();\n } else {\n listControl.handleKeydown(e);\n }\n }\n function handlePaste(e: ClipboardEvent) {\n e.preventDefault();\n\n const pasted = e.clipboardData?.getData('text') ?? '';\n const chars = pasted\n .split('')\n .filter((c) => isAllowed(c))\n .slice(0, lengthValue.value);\n const allInputs = getInputs();\n\n chars.forEach((char, i) => {\n if (allInputs[i]) allInputs[i].value = char;\n });\n\n emitOtpState(e);\n\n // Focus the cell after last pasted char\n const focusIdx = Math.min(chars.length, allInputs.length - 1);\n\n allInputs[focusIdx]?.focus();\n }\n\n watch(props.value, (value) => {\n syncInputsFromValue(String(value || ''));\n });\n\n watch(props.length, () => {\n // Cells re-render when length changes; sync after DOM updates.\n requestAnimationFrame(() => syncInputsFromValue(normalizedPropValue()));\n });\n\n const separatorIdx = computed(() => {\n const len = Number(props.length.value) || 6;\n\n return props.separator.value != null ? Math.floor(len / 2) : -1;\n });\n\n onMounted(() => {\n // Populate cells from value prop on mount\n syncInputsFromValue(normalizedPropValue());\n });\n\n return html`\n <div class=\"otp-group\" part=\"group\" role=\"group\" aria-label=\"${props.label}\">\n ${() =>\n cells.value.map(\n (i) => html`\n ${() =>\n separatorIdx.value > 0 && i === separatorIdx.value\n ? html`\n <span class=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '-'}</span>\n `\n : ''}\n <input\n class=\"cell\"\n part=\"cell\"\n type=\"${() => (props.masked.value ? 'password' : 'text')}\"\n inputmode=\"${() => (props.type.value === 'numeric' ? 'numeric' : 'text')}\"\n maxlength=\"1\"\n autocomplete=\"${() => (i === 0 ? 'one-time-code' : 'off')}\"\n aria-label=\"${() => `Digit ${i + 1} of ${lengthValue.value}`}\"\n disabled=\"${() => (isDisabled.value ? true : null)}\"\n @input=\"${(e: Event) => handleInput(e, i)}\"\n @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, i)}\"\n @paste=\"${(e: ClipboardEvent) => (i === 0 ? handlePaste(e) : e.preventDefault())}\"\n @focus=\"${(e: FocusEvent) => (e.target as HTMLInputElement).select()}\" />\n `,\n )}\n </div>\n `;\n },\n styles: [\n colorThemeMixin,\n sizeVariantMixin({}),\n forcedColorsFocusMixin('.cell'),\n componentStyles,\n // Must come after `componentStyles` — see `ore-input`'s identical ordering note for why.\n fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),\n ],\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"otp-input.js","names":[],"sources":["../src/inputs/otp-input/otp-input.ts"],"sourcesContent":["import { bind, define, getHost, html, onCleanup, onMounted, prop, useEmit, useField } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { createListControl, lifecycleSignal } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, fieldVariantMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './otp-input.css?inline';\n\nexport type OreOtpInputEvents = {\n change: Event;\n complete: { originalEvent?: Event; value: string };\n input: Event;\n};\n\n/** OTP Input props */\nexport type OreOtpInputProps = {\n /** Theme color */\n color?: ThemeColor;\n /** Make inputs disabled */\n disabled?: boolean;\n /** Accessible label */\n label?: string;\n /** Number of input cells */\n length?: number;\n /** Mask input (show dots instead of characters) */\n masked?: boolean;\n /** Form field name */\n name?: string;\n /** Show a separator in the middle (e.g. \"–\") */\n separator?: string;\n /** Component size */\n size?: ComponentSize;\n /** Input type: 'numeric' (digits only) or 'alphanumeric' */\n type?: 'numeric' | 'alphanumeric';\n /** Current value */\n value?: string;\n /** Visual variant */\n variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n};\n\n/**\n * A segmented OTP (One-Time Password) input with N individual cells.\n * Auto-advances focus on input, auto-backs on Backspace, handles paste.\n *\n * @element ore-otp-input\n *\n * @attr {number} length - Number of cells (default: 6)\n * @attr {string} type - 'numeric' (default) | 'alphanumeric'\n * @attr {string} value - Current code value\n * @attr {boolean} disabled - Disable all cells\n * @attr {boolean} masked - Show as password\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} name - Form field name\n * @attr {string} label - Group aria-label\n * @attr {string} separator - Optional separator character shown in the middle\n *\n * @fires input - Emitted whenever a cell changes.\n * @fires change - Emitted whenever a cell changes.\n * @fires complete - Emitted when all cells are filled. detail: { value: string, originalEvent?: Event }\n *\n * @slot label - Custom label above the OTP input\n * @slot helper - Custom helper text below the OTP input\n * @slot error - Custom error content below the OTP input\n *\n * @cssprop --otp-cell-size - Width and height of each cell\n * @cssprop --otp-cell-gap - Gap between cells\n * @cssprop --otp-cell-font-size - Font size inside cells\n * @cssprop --otp-cell-radius - Border radius of cells\n * @cssprop --otp-cell-bg - Cell background color\n * @cssprop --otp-cell-border-color - Default border color\n * @cssprop --otp-cell-focus-border - Focused border/caret color\n * @cssprop --otp-cell-hover-bg - Cell background on hover (flat/ghost variants)\n * @cssprop --otp-cell-hover-border-color - Cell border on hover (flat/bordered variants)\n * @cssprop --otp-cell-focus-bg - Cell background when focused (flat variant)\n * @cssprop --otp-cell-focus-border-color - Cell border when focused (flat variant)\n *\n * @part group - Group container.\n * @part cell - Shadow part for the `cell` element.\n * @example\n * ```html\n * <ore-otp-input length=\"6\" color=\"primary\"></ore-otp-input>\n * ```\n */\nexport const OTP_INPUT_TAG = 'ore-otp-input' as const;\ndefine<OreOtpInputProps>(OTP_INPUT_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n label: prop.string('One-time password'),\n length: prop.number(6),\n masked: prop.bool(false),\n name: prop.string(),\n separator: prop.string(),\n type: prop.oneOf(['numeric', 'alphanumeric'] as const, 'numeric'),\n value: prop.string(),\n variant: prop.string<Exclude<VisualVariant, 'text' | 'frost'>>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreOtpInputEvents>();\n\n const lengthValue = computed(() => Number(props.length.value) || 6);\n const isDisabled = computed(() => Boolean(props.disabled.value));\n const cells = computed(() => Array.from({ length: lengthValue.value }, (_, i) => i));\n const otpValue = signal(String(props.value.value || ''));\n const normalizedPropValue = () => String(props.value.value || '');\n\n // Form association: the joined cell value is the single form value for `name`,\n // since individual per-cell <input> elements inside the shadow root cannot\n // participate in an ancestor <form>'s submission on their own.\n useField<string>({ disabled: isDisabled, toFormValue: (v) => v, value: otpValue });\n\n bind({\n attr: {\n size: props.size,\n value: () => otpValue.value || null,\n variant: props.variant,\n },\n });\n\n function getInputs(): HTMLInputElement[] {\n return [...(el.shadowRoot?.querySelectorAll<HTMLInputElement>('input.cell') ?? [])];\n }\n\n const listControl = createListControl({\n getItems: () => getInputs(),\n keys: { next: ['ArrowRight'], prev: ['ArrowLeft'] },\n loop: false,\n onNavigate: (_action, index) => {\n const inputs = getInputs();\n\n inputs[index]?.focus();\n },\n signal: lifecycleSignal(onCleanup),\n });\n\n function getValue(): string {\n return getInputs()\n .map((i) => i.value)\n .join('');\n }\n function syncInputsFromValue(raw: string) {\n const allInputs = getInputs();\n const normalized = String(raw || '').slice(0, allInputs.length);\n\n for (const input of allInputs) input.value = '';\n\n normalized.split('').forEach((c, i) => {\n if (allInputs[i]) allInputs[i].value = c;\n });\n\n otpValue.value = getValue();\n }\n defineFieldValue(\n el,\n () => otpValue.value,\n (value) => {\n syncInputsFromValue(value);\n },\n );\n function emitOtpState(originalEvent?: Event, forceComplete?: boolean): void {\n const allInputs = getInputs();\n const full = getValue();\n const complete = forceComplete ?? (full.length === allInputs.length && full.split('').every(Boolean));\n\n otpValue.value = full;\n setFieldValue(el, full);\n dispatchNativeFieldEvent(el, 'input');\n dispatchNativeFieldEvent(el, 'change');\n\n if (complete) emit('complete', { originalEvent, value: full });\n }\n function isAllowed(char: string): boolean {\n if (props.type.value === 'numeric') return /^\\d$/.test(char);\n\n return /^[a-z\\d]$/i.test(char);\n }\n function handleInput(e: Event, index: number) {\n const input = e.target as HTMLInputElement;\n let val = input.value;\n\n // Keep only last character if multiple were typed somehow\n if (val.length > 1) val = val.slice(-1);\n\n // Validate character\n if (val && !isAllowed(val)) {\n input.value = '';\n\n return;\n }\n\n input.value = val;\n\n const allInputs = getInputs();\n\n emitOtpState(e);\n\n // Auto-advance\n if (val && index < allInputs.length - 1) {\n allInputs[index + 1].focus();\n allInputs[index + 1].select();\n }\n }\n function handleKeydown(e: KeyboardEvent, index: number) {\n const input = e.target as HTMLInputElement;\n const allInputs = getInputs();\n\n listControl.set(index);\n\n if (e.key === 'Backspace') {\n if (input.value) {\n input.value = '';\n } else if (index > 0) {\n const prevIndex = listControl.navigate('prev');\n const prevInput = allInputs[prevIndex];\n\n if (prevInput) {\n prevInput.select();\n prevInput.value = '';\n }\n }\n\n emitOtpState(e, false);\n e.preventDefault();\n } else {\n listControl.handleKeydown(e);\n }\n }\n function handlePaste(e: ClipboardEvent) {\n e.preventDefault();\n\n const pasted = e.clipboardData?.getData('text') ?? '';\n const chars = pasted\n .split('')\n .filter((c) => isAllowed(c))\n .slice(0, lengthValue.value);\n const allInputs = getInputs();\n\n chars.forEach((char, i) => {\n if (allInputs[i]) allInputs[i].value = char;\n });\n\n emitOtpState(e);\n\n // Focus the cell after last pasted char\n const focusIdx = Math.min(chars.length, allInputs.length - 1);\n\n allInputs[focusIdx]?.focus();\n }\n\n watch(props.value, (value) => {\n syncInputsFromValue(String(value || ''));\n });\n\n watch(props.length, () => {\n // Cells re-render when length changes; sync after DOM updates.\n requestAnimationFrame(() => syncInputsFromValue(normalizedPropValue()));\n });\n\n const separatorIdx = computed(() => {\n const len = Number(props.length.value) || 6;\n\n return props.separator.value != null ? Math.floor(len / 2) : -1;\n });\n\n onMounted(() => {\n // Populate cells from value prop on mount\n syncInputsFromValue(normalizedPropValue());\n });\n\n return html`\n <div class=\"otp-group\" part=\"group\" role=\"group\" aria-label=\"${props.label}\">\n ${() =>\n cells.value.map(\n (i) => html`\n ${() =>\n separatorIdx.value > 0 && i === separatorIdx.value\n ? html`\n <span class=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '-'}</span>\n `\n : ''}\n <input\n class=\"cell\"\n part=\"cell\"\n type=\"${() => (props.masked.value ? 'password' : 'text')}\"\n inputmode=\"${() => (props.type.value === 'numeric' ? 'numeric' : 'text')}\"\n maxlength=\"1\"\n autocomplete=\"${() => (i === 0 ? 'one-time-code' : 'off')}\"\n aria-label=\"${() => `Digit ${i + 1} of ${lengthValue.value}`}\"\n disabled=\"${() => (isDisabled.value ? true : null)}\"\n @input=\"${(e: Event) => handleInput(e, i)}\"\n @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, i)}\"\n @paste=\"${(e: ClipboardEvent) => (i === 0 ? handlePaste(e) : e.preventDefault())}\"\n @focus=\"${(e: FocusEvent) => (e.target as HTMLInputElement).select()}\" />\n `,\n )}\n </div>\n `;\n },\n styles: [\n colorThemeMixin,\n sizeVariantMixin({}),\n forcedColorsFocusMixin('.cell'),\n componentStyles,\n // Must come after `componentStyles` — see `ore-input`'s identical ordering note for why.\n fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),\n ],\n});\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-palette-items.cjs","names":[],"sources":["../../../src/overlay/command-palette/command-palette-items.ts"],"sourcesContent":["import type { CommandPaletteItem, CommandPaletteItemInput } from './command-palette.types';\n\n// ── Flat row model ────────────────────────────────────────────────────────────\n// Items are grouped by `group` (preserving first-seen order) and flattened into a\n// single list of rows so the listbox can render group headings inline while\n// keyboard navigation still walks a single, index-addressable sequence.\n\nexport type CommandPaletteRow =\n { group: string; type: 'group' }
|
|
1
|
+
{"version":3,"file":"command-palette-items.cjs","names":[],"sources":["../../../src/overlay/command-palette/command-palette-items.ts"],"sourcesContent":["import type { CommandPaletteItem, CommandPaletteItemInput } from './command-palette.types';\n\n// ── Flat row model ────────────────────────────────────────────────────────────\n// Items are grouped by `group` (preserving first-seen order) and flattened into a\n// single list of rows so the listbox can render group headings inline while\n// keyboard navigation still walks a single, index-addressable sequence.\n\nexport type CommandPaletteRow =\n | { group: string; type: 'group' }\n | { idx: number; item: CommandPaletteItem; type: 'item' };\n\nexport function parseSlottedItems(elements: Element[]): CommandPaletteItem[] {\n return elements\n .filter((el) => el.localName === 'ore-command-palette-item')\n .map((el) => ({\n disabled: el.hasAttribute('disabled'),\n group: el.getAttribute('group') ?? undefined,\n icon: el.getAttribute('icon') ?? undefined,\n keywords: (el.getAttribute('keywords') ?? '')\n .split(',')\n .map((term) => term.trim())\n .filter(Boolean),\n label:\n el.getAttribute('label') ||\n [...el.childNodes]\n .filter((node) => node.nodeType === Node.TEXT_NODE)\n .map((node) => node.textContent?.trim())\n .filter(Boolean)\n .join(' ') ||\n '',\n shortcut: el.getAttribute('shortcut') ?? undefined,\n value: el.getAttribute('value') ?? '',\n }));\n}\n\n/**\n * Splits a display-only shortcut hint into individual keys so each can be rendered in its\n * own `<kbd>`. Keys are separated with `+` (e.g. `\"⌘+N\"` → `[\"⌘\", \"N\"]`); a shortcut with no\n * `+` renders as a single key, unchanged. A literal `+` key can't be represented this way —\n * spell it out instead (e.g. `\"Ctrl+Plus\"`).\n */\nexport function splitShortcutKeys(shortcut: string): string[] {\n return shortcut\n .split('+')\n .map((key) => key.trim())\n .filter(Boolean);\n}\n\nexport function normalizeItem(input: CommandPaletteItemInput): CommandPaletteItem {\n return {\n disabled: Boolean(input.disabled),\n group: input.group,\n icon: input.icon,\n keywords: input.keywords ?? [],\n label: input.label ?? input.value,\n shortcut: input.shortcut,\n value: input.value,\n };\n}\n\nexport function filterItems(items: CommandPaletteItem[], query: string, noFilter: boolean): CommandPaletteItem[] {\n if (noFilter) return items;\n\n const normalizedQuery = query.toLowerCase().trim();\n\n if (!normalizedQuery) return items;\n\n return items.filter(\n (item) =>\n item.label.toLowerCase().includes(normalizedQuery) ||\n item.value.toLowerCase().includes(normalizedQuery) ||\n item.keywords.some((keyword) => keyword.toLowerCase().includes(normalizedQuery)),\n );\n}\n\n/** Groups items by `group` (first-seen order) and flattens into index-addressable rows. */\nexport function buildRows(items: CommandPaletteItem[]): CommandPaletteRow[] {\n const groups = new Map<string | undefined, CommandPaletteItem[]>();\n\n for (const item of items) {\n const key = item.group;\n let bucket = groups.get(key);\n\n if (!bucket) {\n bucket = [];\n groups.set(key, bucket);\n }\n\n bucket.push(item);\n }\n\n const rows: CommandPaletteRow[] = [];\n let idx = 0;\n\n for (const [group, groupItems] of groups) {\n if (group !== undefined) rows.push({ group, type: 'group' });\n\n for (const item of groupItems) rows.push({ idx: idx++, item, type: 'item' });\n }\n\n return rows;\n}\n"],"mappings":"AAWA,SAAgB,EAAkB,EAA2C,CAC3E,OAAO,EACJ,OAAQ,GAAO,EAAG,YAAc,0BAA0B,CAAC,CAC3D,IAAK,IAAQ,CACZ,SAAU,EAAG,aAAa,UAAU,EACpC,MAAO,EAAG,aAAa,OAAO,GAAK,IAAA,GACnC,KAAM,EAAG,aAAa,MAAM,GAAK,IAAA,GACjC,UAAW,EAAG,aAAa,UAAU,GAAK,GAAA,CACvC,MAAM,GAAG,CAAC,CACV,IAAK,GAAS,EAAK,KAAK,CAAC,CAAC,CAC1B,OAAO,OAAO,EACjB,MACE,EAAG,aAAa,OAAO,GACvB,CAAC,GAAG,EAAG,UAAU,CAAC,CACf,OAAQ,GAAS,EAAK,WAAa,KAAK,SAAS,CAAC,CAClD,IAAK,GAAS,EAAK,aAAa,KAAK,CAAC,CAAC,CACvC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACX,GACF,SAAU,EAAG,aAAa,UAAU,GAAK,IAAA,GACzC,MAAO,EAAG,aAAa,OAAO,GAAK,EACrC,EAAE,CACN,CAQA,SAAgB,EAAkB,EAA4B,CAC5D,OAAO,EACJ,MAAM,GAAG,CAAC,CACV,IAAK,GAAQ,EAAI,KAAK,CAAC,CAAC,CACxB,OAAO,OAAO,CACnB,CAEA,SAAgB,EAAc,EAAoD,CAChF,MAAO,CACL,SAAU,EAAQ,EAAM,SACxB,MAAO,EAAM,MACb,KAAM,EAAM,KACZ,SAAU,EAAM,UAAY,CAAC,EAC7B,MAAO,EAAM,OAAS,EAAM,MAC5B,SAAU,EAAM,SAChB,MAAO,EAAM,KACf,CACF,CAEA,SAAgB,EAAY,EAA6B,EAAe,EAAyC,CAC/G,GAAI,EAAU,OAAO,EAErB,IAAM,EAAkB,EAAM,YAAY,CAAC,CAAC,KAAK,EAIjD,OAFK,EAEE,EAAM,OACV,GACC,EAAK,MAAM,YAAY,CAAC,CAAC,SAAS,CAAe,GACjD,EAAK,MAAM,YAAY,CAAC,CAAC,SAAS,CAAe,GACjD,EAAK,SAAS,KAAM,GAAY,EAAQ,YAAY,CAAC,CAAC,SAAS,CAAe,CAAC,CACnF,EAP6B,CAQ/B,CAGA,SAAgB,EAAU,EAAkD,CAC1E,IAAM,EAAS,IAAI,IAEnB,IAAK,IAAM,KAAQ,EAAO,CACxB,IAAM,EAAM,EAAK,MACb,EAAS,EAAO,IAAI,CAAG,EAEtB,IACH,EAAS,CAAC,EACV,EAAO,IAAI,EAAK,CAAM,GAGxB,EAAO,KAAK,CAAI,CAClB,CAEA,IAAM,EAA4B,CAAC,EAC/B,EAAM,EAEV,IAAK,GAAM,CAAC,EAAO,KAAe,EAAQ,CACpC,IAAU,IAAA,IAAW,EAAK,KAAK,CAAE,QAAO,KAAM,OAAQ,CAAC,EAE3D,IAAK,IAAM,KAAQ,EAAY,EAAK,KAAK,CAAE,IAAK,IAAO,OAAM,KAAM,MAAO,CAAC,CAC7E,CAEA,OAAO,CACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-palette-items.d.ts","sourceRoot":"","sources":["../../../src/overlay/command-palette/command-palette-items.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAO3F,MAAM,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"command-palette-items.d.ts","sourceRoot":"","sources":["../../../src/overlay/command-palette/command-palette-items.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAO3F,MAAM,MAAM,iBAAiB,GACzB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,GAChC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,kBAAkB,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE,CAsB3E;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAK5D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,uBAAuB,GAAG,kBAAkB,CAUhF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,kBAAkB,EAAE,CAa/G;AAED,2FAA2F;AAC3F,wBAAgB,SAAS,CAAC,KAAK,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE,CAyB1E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-palette-items.js","names":[],"sources":["../../../src/overlay/command-palette/command-palette-items.ts"],"sourcesContent":["import type { CommandPaletteItem, CommandPaletteItemInput } from './command-palette.types';\n\n// ── Flat row model ────────────────────────────────────────────────────────────\n// Items are grouped by `group` (preserving first-seen order) and flattened into a\n// single list of rows so the listbox can render group headings inline while\n// keyboard navigation still walks a single, index-addressable sequence.\n\nexport type CommandPaletteRow =\n { group: string; type: 'group' }
|
|
1
|
+
{"version":3,"file":"command-palette-items.js","names":[],"sources":["../../../src/overlay/command-palette/command-palette-items.ts"],"sourcesContent":["import type { CommandPaletteItem, CommandPaletteItemInput } from './command-palette.types';\n\n// ── Flat row model ────────────────────────────────────────────────────────────\n// Items are grouped by `group` (preserving first-seen order) and flattened into a\n// single list of rows so the listbox can render group headings inline while\n// keyboard navigation still walks a single, index-addressable sequence.\n\nexport type CommandPaletteRow =\n | { group: string; type: 'group' }\n | { idx: number; item: CommandPaletteItem; type: 'item' };\n\nexport function parseSlottedItems(elements: Element[]): CommandPaletteItem[] {\n return elements\n .filter((el) => el.localName === 'ore-command-palette-item')\n .map((el) => ({\n disabled: el.hasAttribute('disabled'),\n group: el.getAttribute('group') ?? undefined,\n icon: el.getAttribute('icon') ?? undefined,\n keywords: (el.getAttribute('keywords') ?? '')\n .split(',')\n .map((term) => term.trim())\n .filter(Boolean),\n label:\n el.getAttribute('label') ||\n [...el.childNodes]\n .filter((node) => node.nodeType === Node.TEXT_NODE)\n .map((node) => node.textContent?.trim())\n .filter(Boolean)\n .join(' ') ||\n '',\n shortcut: el.getAttribute('shortcut') ?? undefined,\n value: el.getAttribute('value') ?? '',\n }));\n}\n\n/**\n * Splits a display-only shortcut hint into individual keys so each can be rendered in its\n * own `<kbd>`. Keys are separated with `+` (e.g. `\"⌘+N\"` → `[\"⌘\", \"N\"]`); a shortcut with no\n * `+` renders as a single key, unchanged. A literal `+` key can't be represented this way —\n * spell it out instead (e.g. `\"Ctrl+Plus\"`).\n */\nexport function splitShortcutKeys(shortcut: string): string[] {\n return shortcut\n .split('+')\n .map((key) => key.trim())\n .filter(Boolean);\n}\n\nexport function normalizeItem(input: CommandPaletteItemInput): CommandPaletteItem {\n return {\n disabled: Boolean(input.disabled),\n group: input.group,\n icon: input.icon,\n keywords: input.keywords ?? [],\n label: input.label ?? input.value,\n shortcut: input.shortcut,\n value: input.value,\n };\n}\n\nexport function filterItems(items: CommandPaletteItem[], query: string, noFilter: boolean): CommandPaletteItem[] {\n if (noFilter) return items;\n\n const normalizedQuery = query.toLowerCase().trim();\n\n if (!normalizedQuery) return items;\n\n return items.filter(\n (item) =>\n item.label.toLowerCase().includes(normalizedQuery) ||\n item.value.toLowerCase().includes(normalizedQuery) ||\n item.keywords.some((keyword) => keyword.toLowerCase().includes(normalizedQuery)),\n );\n}\n\n/** Groups items by `group` (first-seen order) and flattens into index-addressable rows. */\nexport function buildRows(items: CommandPaletteItem[]): CommandPaletteRow[] {\n const groups = new Map<string | undefined, CommandPaletteItem[]>();\n\n for (const item of items) {\n const key = item.group;\n let bucket = groups.get(key);\n\n if (!bucket) {\n bucket = [];\n groups.set(key, bucket);\n }\n\n bucket.push(item);\n }\n\n const rows: CommandPaletteRow[] = [];\n let idx = 0;\n\n for (const [group, groupItems] of groups) {\n if (group !== undefined) rows.push({ group, type: 'group' });\n\n for (const item of groupItems) rows.push({ idx: idx++, item, type: 'item' });\n }\n\n return rows;\n}\n"],"mappings":";AAWA,SAAgB,EAAkB,GAA2C;CAC3E,OAAO,EACJ,QAAQ,MAAO,EAAG,cAAc,0BAA0B,CAAC,CAC3D,KAAK,OAAQ;EACZ,UAAU,EAAG,aAAa,UAAU;EACpC,OAAO,EAAG,aAAa,OAAO,KAAK,KAAA;EACnC,MAAM,EAAG,aAAa,MAAM,KAAK,KAAA;EACjC,WAAW,EAAG,aAAa,UAAU,KAAK,GAAA,CACvC,MAAM,GAAG,CAAC,CACV,KAAK,MAAS,EAAK,KAAK,CAAC,CAAC,CAC1B,OAAO,OAAO;EACjB,OACE,EAAG,aAAa,OAAO,KACvB,CAAC,GAAG,EAAG,UAAU,CAAC,CACf,QAAQ,MAAS,EAAK,aAAa,KAAK,SAAS,CAAC,CAClD,KAAK,MAAS,EAAK,aAAa,KAAK,CAAC,CAAC,CACvC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KACX;EACF,UAAU,EAAG,aAAa,UAAU,KAAK,KAAA;EACzC,OAAO,EAAG,aAAa,OAAO,KAAK;CACrC,EAAE;AACN;AAQA,SAAgB,EAAkB,GAA4B;CAC5D,OAAO,EACJ,MAAM,GAAG,CAAC,CACV,KAAK,MAAQ,EAAI,KAAK,CAAC,CAAC,CACxB,OAAO,OAAO;AACnB;AAEA,SAAgB,EAAc,GAAoD;CAChF,OAAO;EACL,UAAU,EAAQ,EAAM;EACxB,OAAO,EAAM;EACb,MAAM,EAAM;EACZ,UAAU,EAAM,YAAY,CAAC;EAC7B,OAAO,EAAM,SAAS,EAAM;EAC5B,UAAU,EAAM;EAChB,OAAO,EAAM;CACf;AACF;AAEA,SAAgB,EAAY,GAA6B,GAAe,GAAyC;CAC/G,IAAI,GAAU,OAAO;CAErB,IAAM,IAAkB,EAAM,YAAY,CAAC,CAAC,KAAK;CAIjD,OAFK,IAEE,EAAM,QACV,MACC,EAAK,MAAM,YAAY,CAAC,CAAC,SAAS,CAAe,KACjD,EAAK,MAAM,YAAY,CAAC,CAAC,SAAS,CAAe,KACjD,EAAK,SAAS,MAAM,MAAY,EAAQ,YAAY,CAAC,CAAC,SAAS,CAAe,CAAC,CACnF,IAP6B;AAQ/B;AAGA,SAAgB,EAAU,GAAkD;CAC1E,IAAM,oBAAS,IAAI,IAA8C;CAEjE,KAAK,IAAM,KAAQ,GAAO;EACxB,IAAM,IAAM,EAAK,OACb,IAAS,EAAO,IAAI,CAAG;EAO3B,AALK,MACH,IAAS,CAAC,GACV,EAAO,IAAI,GAAK,CAAM,IAGxB,EAAO,KAAK,CAAI;CAClB;CAEA,IAAM,IAA4B,CAAC,GAC/B,IAAM;CAEV,KAAK,IAAM,CAAC,GAAO,MAAe,GAAQ;EACxC,AAAI,MAAU,KAAA,KAAW,EAAK,KAAK;GAAE;GAAO,MAAM;EAAQ,CAAC;EAE3D,KAAK,IAAM,KAAQ,GAAY,EAAK,KAAK;GAAE,KAAK;GAAO;GAAM,MAAM;EAAO,CAAC;CAC7E;CAEA,OAAO;AACT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`@layer refine.base{:host{--_radius:var(--command-palette-radius,var(--rounded-lg));--_max-width:var(--command-palette-max-width,40rem);--_backdrop-bg:var(--command-palette-backdrop,color-mix(in oklch, var(--color-canvas) 40%, transparent));--_panel-bg:var(--command-palette-bg,var(--color-canvas));--_panel-border-color:var(--command-palette-border-color,var(--color-divider));--_option-hover-bg:var(--command-palette-option-hover-bg,var(--color-contrast-100));--_option-focus-bg:var(--command-palette-option-focus-bg,color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100)));display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display .2s allow-discrete, overlay .2s allow-discrete;padding-top:min(14vh, var(--size-24));background:0 0;border:none;justify-content:center;align-items:flex-start;margin:0;display:flex;position:fixed;inset:0;overflow:hidden}dialog:not([open]),dialog:not([open]) .panel{display:none}dialog[open]{pointer-events:auto}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::backdrop{opacity:0}}dialog.closing::backdrop{opacity:0}.panel{box-sizing:border-box;width:var(--_max-width);max-width:calc(100vw - var(--size-8));max-height:min(28rem, calc(100dvh - var(--size-16)));background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_radius);box-shadow:var(--command-palette-shadow,var(--shadow-2xl));opacity:1;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:opacity .2s var(--ease-spring), transform .2s var(--ease-spring);flex-direction:column;display:flex;position:relative;overflow:hidden;transform:scale(1)translateY(0)}@starting-style{.panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(-4px)}}dialog.closing .panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(-4px);transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring)}@media (width<=640px){.panel{width:calc(100vw - var(--size-4));max-width:calc(100vw - var(--size-4))}dialog{padding-top:var(--size-4)}}.search{gap:var(--size-2);padding:var(--size-3) var(--size-4);border-bottom:var(--border) solid var(--color-contrast-100);flex-shrink:0;align-items:center;display:flex}.search-icon{color:var(--color-contrast-400);flex-shrink:0;display:inline-flex}.search-input{min-width:0;font:inherit;font-size:var(--text-md);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1;padding:0}.search-input::placeholder{color:var(--color-contrast-400)}.search-loader{border:2px solid var(--color-contrast-300);width:1em;height:1em;animation:command-palette-spin var(--transition-loader) infinite;border-radius:50%;flex-shrink:0;display:inline-flex}.search-loader:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-color:#0000}.search-loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}.search-loader[hidden]{display:none}@keyframes command-palette-spin{to{transform:rotate(360deg)}}.listbox{padding:var(--size-1);overscroll-behavior:contain;scrollbar-width:thin;flex:1;overflow-y:auto}.empty{padding:var(--size-6) var(--size-3);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.group-heading{padding:var(--size-2) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.item{gap:var(--size-2-5);padding:var(--size-2) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);align-items:center;display:flex}.item:hover:not([data-disabled]){background:var(--_option-hover-bg)}.item[data-focused]:not([data-disabled]){background:var(--_option-focus-bg)}.item[data-disabled]{color:var(--color-contrast-400);cursor:not-allowed;opacity:.6}.item-icon{color:var(--color-contrast-500);flex-shrink:0;align-items:center;display:inline-flex}.item-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.item-shortcut{gap:var(--size-1);flex-shrink:0;display:inline-flex}.item-shortcut kbd{padding:var(--size-0-5) var(--size-1-5);font-family:var(--font-mono,monospace);font-size:var(--text-xs);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-bottom-width:calc(var(--border) + 1px);border-radius:var(--rounded-sm)}.footer{gap:var(--size-4);padding:var(--size-2) var(--size-4);font-size:var(--text-xs);color:var(--color-contrast-500);border-top:var(--border) solid var(--color-contrast-100);flex-shrink:0;align-items:center;display:flex}.footer-hint{gap:var(--size-1);align-items:center;display:inline-flex}.footer kbd{padding:var(--size-0-5) var(--size-1);font-family:inherit;font-size:var(--text-xs);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-bottom-width:calc(var(--border) + 1px);border-radius:var(--rounded-sm)}::slotted(ore-command-palette-item){display:none
|
|
1
|
+
var e=`@layer refine.base{:host{--_radius:var(--command-palette-radius,var(--rounded-lg));--_max-width:var(--command-palette-max-width,40rem);--_backdrop-bg:var(--command-palette-backdrop,color-mix(in oklch, var(--color-canvas) 40%, transparent));--_panel-bg:var(--command-palette-bg,var(--color-canvas));--_panel-border-color:var(--command-palette-border-color,var(--color-divider));--_option-hover-bg:var(--command-palette-option-hover-bg,var(--color-contrast-100));--_option-focus-bg:var(--command-palette-option-focus-bg,color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100)));display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display .2s allow-discrete, overlay .2s allow-discrete;padding-top:min(14vh, var(--size-24));background:0 0;border:none;justify-content:center;align-items:flex-start;margin:0;display:flex;position:fixed;inset:0;overflow:hidden}dialog:not([open]),dialog:not([open]) .panel{display:none}dialog[open]{pointer-events:auto}dialog::-ms-backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::-ms-backdrop{opacity:0}}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::backdrop{opacity:0}}dialog.closing::-ms-backdrop{opacity:0}dialog.closing::backdrop{opacity:0}.panel{box-sizing:border-box;width:var(--_max-width);max-width:calc(100vw - var(--size-8));max-height:min(28rem, calc(100dvh - var(--size-16)));background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_radius);box-shadow:var(--command-palette-shadow,var(--shadow-2xl));opacity:1;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:opacity .2s var(--ease-spring), transform .2s var(--ease-spring);flex-direction:column;display:flex;position:relative;overflow:hidden;transform:scale(1)translateY(0)}@starting-style{.panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(-4px)}}dialog.closing .panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(-4px);transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring)}@media (width<=640px){.panel{width:calc(100vw - var(--size-4));max-width:calc(100vw - var(--size-4))}dialog{padding-top:var(--size-4)}}.search{gap:var(--size-2);padding:var(--size-3) var(--size-4);border-bottom:var(--border) solid var(--color-contrast-100);flex-shrink:0;align-items:center;display:flex}.search-icon{color:var(--color-contrast-400);flex-shrink:0;display:inline-flex}.search-input{min-width:0;font:inherit;font-size:var(--text-md);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1;padding:0}.search-input::placeholder{color:var(--color-contrast-400)}.search-loader{border:2px solid var(--color-contrast-300);width:1em;height:1em;animation:command-palette-spin var(--transition-loader) infinite;border-radius:50%;flex-shrink:0;display:inline-flex}.search-loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.search-loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}.search-loader[hidden]{display:none}@keyframes command-palette-spin{to{transform:rotate(360deg)}}.listbox{padding:var(--size-1);overscroll-behavior:contain;scrollbar-width:thin;flex:1;overflow-y:auto}.empty{padding:var(--size-6) var(--size-3);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.group-heading{padding:var(--size-2) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.item{gap:var(--size-2-5);padding:var(--size-2) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);align-items:center;display:flex}.item:hover:not([data-disabled]){background:var(--_option-hover-bg)}.item[data-focused]:not([data-disabled]){background:var(--_option-focus-bg)}.item[data-disabled]{color:var(--color-contrast-400);cursor:not-allowed;opacity:.6}.item-icon{color:var(--color-contrast-500);flex-shrink:0;align-items:center;display:inline-flex}.item-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.item-shortcut{gap:var(--size-1);flex-shrink:0;display:inline-flex}.item-shortcut kbd{padding:var(--size-0-5) var(--size-1-5);font-family:var(--font-mono,monospace);font-size:var(--text-xs);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-bottom-width:calc(var(--border) + 1px);border-radius:var(--rounded-sm)}.footer{gap:var(--size-4);padding:var(--size-2) var(--size-4);font-size:var(--text-xs);color:var(--color-contrast-500);border-top:var(--border) solid var(--color-contrast-100);flex-shrink:0;align-items:center;display:flex}.footer-hint{gap:var(--size-1);align-items:center;display:inline-flex}.footer kbd{padding:var(--size-0-5) var(--size-1);font-family:inherit;font-size:var(--text-xs);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-bottom-width:calc(var(--border) + 1px);border-radius:var(--rounded-sm)}::slotted(ore-command-palette-item){display:none}}`;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=command-palette.css.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-palette.css.cjs","names":[],"sources":["../../../src/overlay/command-palette/command-palette.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_radius: var(--command-palette-radius, var(--rounded-lg));\n --_max-width: var(--command-palette-max-width, 40rem);\n --_backdrop-bg: var(--command-palette-backdrop, color-mix(in oklch, var(--color-canvas) 40%, transparent));\n --_panel-bg: var(--command-palette-bg, var(--color-canvas));\n --_panel-border-color: var(--command-palette-border-color, var(--color-divider));\n --_option-hover-bg: var(--command-palette-option-hover-bg, var(--color-contrast-100));\n --_option-focus-bg: var(\n --command-palette-option-focus-bg,\n color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100))\n );\n\n display: contents;\n }\n\n /* =====================\n Native <dialog> resets — see ore-dialog for the full rationale.\n ===================== */\n\n dialog {\n all: unset;\n position: fixed;\n inset: 0;\n box-sizing: border-box;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n padding-block-start: min(14vh, var(--size-24));\n margin: 0;\n overflow: hidden;\n pointer-events: none;\n background: transparent;\n border: none;\n transition:\n display 200ms allow-discrete,\n overlay 200ms allow-discrete;\n }\n\n dialog:not([open]) {\n display: none;\n }\n\n dialog:not([open]) .panel {\n display: none;\n }\n\n dialog[open] {\n pointer-events: auto;\n }\n\n dialog::backdrop {\n background: var(--_backdrop-bg);\n opacity: 1;\n backdrop-filter: blur(var(--blur-xs));\n transition:\n opacity var(--transition-normal),\n overlay var(--transition-normal) allow-discrete,\n display var(--transition-normal) allow-discrete;\n\n @starting-style {\n opacity: 0;\n }\n }\n\n dialog.closing::backdrop {\n opacity: 0;\n }\n\n /* =====================\n Panel\n ===================== */\n\n .panel {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: var(--_max-width);\n max-width: calc(100vw - var(--size-8));\n max-height: min(28rem, calc(100dvh - var(--size-16)));\n overflow: hidden;\n background: var(--_panel-bg);\n border: var(--border) solid var(--_panel-border-color);\n border-radius: var(--_radius);\n box-shadow: var(--command-palette-shadow, var(--shadow-2xl));\n opacity: 1;\n backdrop-filter: blur(var(--blur-md));\n transform: scale(1) translateY(0);\n transition:\n opacity 200ms var(--ease-spring),\n transform 200ms var(--ease-spring);\n\n @starting-style {\n opacity: 0;\n transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n }\n }\n\n dialog.closing .panel {\n opacity: 0;\n transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n transition:\n opacity 150ms var(--ease-spring),\n transform 150ms var(--ease-spring);\n }\n\n @media (width <= 640px) {\n .panel {\n width: calc(100vw - var(--size-4));\n max-width: calc(100vw - var(--size-4));\n }\n\n dialog {\n padding-block-start: var(--size-4);\n }\n }\n\n /* =====================\n Search field\n ===================== */\n\n .search {\n display: flex;\n flex-shrink: 0;\n gap: var(--size-2);\n align-items: center;\n padding: var(--size-3) var(--size-4);\n border-block-end: var(--border) solid var(--color-contrast-100);\n }\n\n .search-icon {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--color-contrast-400);\n }\n\n .search-input {\n flex: 1;\n min-width: 0;\n padding: 0;\n font: inherit;\n font-size: var(--text-md);\n color: var(--color-contrast-900);\n outline: none;\n background: transparent;\n border: none;\n }\n\n .search-input::placeholder {\n color: var(--color-contrast-400);\n }\n\n .search-loader {\n display: inline-flex;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border: 2px solid var(--color-contrast-300);\n border-inline-end-color: transparent;\n border-radius: 50%;\n animation: command-palette-spin var(--transition-loader) infinite;\n }\n\n .search-loader[hidden] {\n display: none;\n }\n\n @keyframes command-palette-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n /* =====================\n Listbox\n ===================== */\n\n .listbox {\n flex: 1;\n padding: var(--size-1);\n overflow-y: auto;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n }\n\n .empty {\n padding: var(--size-6) var(--size-3);\n font-size: var(--text-sm);\n color: var(--color-contrast-400);\n text-align: center;\n }\n\n .group-heading {\n padding: var(--size-2) var(--size-2-5) var(--size-1);\n font-size: var(--text-xs);\n font-weight: var(--font-semibold);\n color: var(--color-contrast-500);\n text-transform: uppercase;\n letter-spacing: var(--tracking-wide, 0.05em);\n }\n\n .item {\n display: flex;\n gap: var(--size-2-5);\n align-items: center;\n padding: var(--size-2) var(--size-2-5);\n font-size: var(--text-sm);\n line-height: var(--leading-normal);\n color: var(--color-contrast-800);\n cursor: pointer;\n border-radius: var(--rounded-md);\n transition: background var(--transition-fast);\n }\n\n .item:hover:not([data-disabled]) {\n background: var(--_option-hover-bg);\n }\n\n .item[data-focused]:not([data-disabled]) {\n background: var(--_option-focus-bg);\n }\n\n .item[data-disabled] {\n color: var(--color-contrast-400);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n .item-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n color: var(--color-contrast-500);\n }\n\n .item-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .item-shortcut {\n display: inline-flex;\n flex-shrink: 0;\n gap: var(--size-1);\n }\n\n .item-shortcut kbd {\n padding: var(--size-0-5) var(--size-1-5);\n font-family: var(--font-mono, monospace);\n font-size: var(--text-xs);\n color: var(--color-contrast-500);\n background: var(--color-contrast-100);\n border: var(--border) solid var(--color-contrast-200);\n border-bottom-width: calc(var(--border) + 1px);\n border-radius: var(--rounded-sm);\n }\n\n /* =====================\n Footer hints\n ===================== */\n\n .footer {\n display: flex;\n flex-shrink: 0;\n gap: var(--size-4);\n align-items: center;\n padding: var(--size-2) var(--size-4);\n font-size: var(--text-xs);\n color: var(--color-contrast-500);\n border-block-start: var(--border) solid var(--color-contrast-100);\n }\n\n .footer-hint {\n display: inline-flex;\n gap: var(--size-1);\n align-items: center;\n }\n\n .footer kbd {\n padding: var(--size-0-5) var(--size-1);\n font-family: inherit;\n font-size: var(--text-xs);\n background: var(--color-contrast-100);\n border: var(--border) solid var(--color-contrast-200);\n border-bottom-width: calc(var(--border) + 1px);\n border-radius: var(--rounded-sm);\n }\n\n /* Slotted item elements are pure data nodes — never rendered directly. */\n ::slotted(ore-command-palette-item) {\n display: none
|
|
1
|
+
{"version":3,"file":"command-palette.css.cjs","names":[],"sources":["../../../src/overlay/command-palette/command-palette.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_radius: var(--command-palette-radius, var(--rounded-lg));\n --_max-width: var(--command-palette-max-width, 40rem);\n --_backdrop-bg: var(--command-palette-backdrop, color-mix(in oklch, var(--color-canvas) 40%, transparent));\n --_panel-bg: var(--command-palette-bg, var(--color-canvas));\n --_panel-border-color: var(--command-palette-border-color, var(--color-divider));\n --_option-hover-bg: var(--command-palette-option-hover-bg, var(--color-contrast-100));\n --_option-focus-bg: var(\n --command-palette-option-focus-bg,\n color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100))\n );\n\n display: contents;\n }\n\n /* =====================\n Native <dialog> resets — see ore-dialog for the full rationale.\n ===================== */\n\n dialog {\n all: unset;\n position: fixed;\n inset: 0;\n box-sizing: border-box;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n padding-block-start: min(14vh, var(--size-24));\n margin: 0;\n overflow: hidden;\n pointer-events: none;\n background: transparent;\n border: none;\n transition:\n display 200ms allow-discrete,\n overlay 200ms allow-discrete;\n }\n\n dialog:not([open]) {\n display: none;\n }\n\n dialog:not([open]) .panel {\n display: none;\n }\n\n dialog[open] {\n pointer-events: auto;\n }\n\n dialog::backdrop {\n background: var(--_backdrop-bg);\n opacity: 1;\n backdrop-filter: blur(var(--blur-xs));\n transition:\n opacity var(--transition-normal),\n overlay var(--transition-normal) allow-discrete,\n display var(--transition-normal) allow-discrete;\n\n @starting-style {\n opacity: 0;\n }\n }\n\n dialog.closing::backdrop {\n opacity: 0;\n }\n\n /* =====================\n Panel\n ===================== */\n\n .panel {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: var(--_max-width);\n max-width: calc(100vw - var(--size-8));\n max-height: min(28rem, calc(100dvh - var(--size-16)));\n overflow: hidden;\n background: var(--_panel-bg);\n border: var(--border) solid var(--_panel-border-color);\n border-radius: var(--_radius);\n box-shadow: var(--command-palette-shadow, var(--shadow-2xl));\n opacity: 1;\n backdrop-filter: blur(var(--blur-md));\n transform: scale(1) translateY(0);\n transition:\n opacity 200ms var(--ease-spring),\n transform 200ms var(--ease-spring);\n\n @starting-style {\n opacity: 0;\n transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n }\n }\n\n dialog.closing .panel {\n opacity: 0;\n transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n transition:\n opacity 150ms var(--ease-spring),\n transform 150ms var(--ease-spring);\n }\n\n @media (width <= 640px) {\n .panel {\n width: calc(100vw - var(--size-4));\n max-width: calc(100vw - var(--size-4));\n }\n\n dialog {\n padding-block-start: var(--size-4);\n }\n }\n\n /* =====================\n Search field\n ===================== */\n\n .search {\n display: flex;\n flex-shrink: 0;\n gap: var(--size-2);\n align-items: center;\n padding: var(--size-3) var(--size-4);\n border-block-end: var(--border) solid var(--color-contrast-100);\n }\n\n .search-icon {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--color-contrast-400);\n }\n\n .search-input {\n flex: 1;\n min-width: 0;\n padding: 0;\n font: inherit;\n font-size: var(--text-md);\n color: var(--color-contrast-900);\n outline: none;\n background: transparent;\n border: none;\n }\n\n .search-input::placeholder {\n color: var(--color-contrast-400);\n }\n\n .search-loader {\n display: inline-flex;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border: 2px solid var(--color-contrast-300);\n border-inline-end-color: transparent;\n border-radius: 50%;\n animation: command-palette-spin var(--transition-loader) infinite;\n }\n\n .search-loader[hidden] {\n display: none;\n }\n\n @keyframes command-palette-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n /* =====================\n Listbox\n ===================== */\n\n .listbox {\n flex: 1;\n padding: var(--size-1);\n overflow-y: auto;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n }\n\n .empty {\n padding: var(--size-6) var(--size-3);\n font-size: var(--text-sm);\n color: var(--color-contrast-400);\n text-align: center;\n }\n\n .group-heading {\n padding: var(--size-2) var(--size-2-5) var(--size-1);\n font-size: var(--text-xs);\n font-weight: var(--font-semibold);\n color: var(--color-contrast-500);\n text-transform: uppercase;\n letter-spacing: var(--tracking-wide, 0.05em);\n }\n\n .item {\n display: flex;\n gap: var(--size-2-5);\n align-items: center;\n padding: var(--size-2) var(--size-2-5);\n font-size: var(--text-sm);\n line-height: var(--leading-normal);\n color: var(--color-contrast-800);\n cursor: pointer;\n border-radius: var(--rounded-md);\n transition: background var(--transition-fast);\n }\n\n .item:hover:not([data-disabled]) {\n background: var(--_option-hover-bg);\n }\n\n .item[data-focused]:not([data-disabled]) {\n background: var(--_option-focus-bg);\n }\n\n .item[data-disabled] {\n color: var(--color-contrast-400);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n .item-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n color: var(--color-contrast-500);\n }\n\n .item-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .item-shortcut {\n display: inline-flex;\n flex-shrink: 0;\n gap: var(--size-1);\n }\n\n .item-shortcut kbd {\n padding: var(--size-0-5) var(--size-1-5);\n font-family: var(--font-mono, monospace);\n font-size: var(--text-xs);\n color: var(--color-contrast-500);\n background: var(--color-contrast-100);\n border: var(--border) solid var(--color-contrast-200);\n border-bottom-width: calc(var(--border) + 1px);\n border-radius: var(--rounded-sm);\n }\n\n /* =====================\n Footer hints\n ===================== */\n\n .footer {\n display: flex;\n flex-shrink: 0;\n gap: var(--size-4);\n align-items: center;\n padding: var(--size-2) var(--size-4);\n font-size: var(--text-xs);\n color: var(--color-contrast-500);\n border-block-start: var(--border) solid var(--color-contrast-100);\n }\n\n .footer-hint {\n display: inline-flex;\n gap: var(--size-1);\n align-items: center;\n }\n\n .footer kbd {\n padding: var(--size-0-5) var(--size-1);\n font-family: inherit;\n font-size: var(--text-xs);\n background: var(--color-contrast-100);\n border: var(--border) solid var(--color-contrast-200);\n border-bottom-width: calc(var(--border) + 1px);\n border-radius: var(--rounded-sm);\n }\n\n /* Slotted item elements are pure data nodes — never rendered directly. */\n ::slotted(ore-command-palette-item) {\n display: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/overlay/command-palette/command-palette.css?inline
|
|
2
|
-
var e = "@layer refine.base{:host{--_radius:var(--command-palette-radius,var(--rounded-lg));--_max-width:var(--command-palette-max-width,40rem);--_backdrop-bg:var(--command-palette-backdrop,color-mix(in oklch, var(--color-canvas) 40%, transparent));--_panel-bg:var(--command-palette-bg,var(--color-canvas));--_panel-border-color:var(--command-palette-border-color,var(--color-divider));--_option-hover-bg:var(--command-palette-option-hover-bg,var(--color-contrast-100));--_option-focus-bg:var(--command-palette-option-focus-bg,color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100)));display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display .2s allow-discrete, overlay .2s allow-discrete;padding-top:min(14vh, var(--size-24));background:0 0;border:none;justify-content:center;align-items:flex-start;margin:0;display:flex;position:fixed;inset:0;overflow:hidden}dialog:not([open]),dialog:not([open]) .panel{display:none}dialog[open]{pointer-events:auto}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::backdrop{opacity:0}}dialog.closing::backdrop{opacity:0}.panel{box-sizing:border-box;width:var(--_max-width);max-width:calc(100vw - var(--size-8));max-height:min(28rem, calc(100dvh - var(--size-16)));background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_radius);box-shadow:var(--command-palette-shadow,var(--shadow-2xl));opacity:1;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:opacity .2s var(--ease-spring), transform .2s var(--ease-spring);flex-direction:column;display:flex;position:relative;overflow:hidden;transform:scale(1)translateY(0)}@starting-style{.panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(-4px)}}dialog.closing .panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(-4px);transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring)}@media (width<=640px){.panel{width:calc(100vw - var(--size-4));max-width:calc(100vw - var(--size-4))}dialog{padding-top:var(--size-4)}}.search{gap:var(--size-2);padding:var(--size-3) var(--size-4);border-bottom:var(--border) solid var(--color-contrast-100);flex-shrink:0;align-items:center;display:flex}.search-icon{color:var(--color-contrast-400);flex-shrink:0;display:inline-flex}.search-input{min-width:0;font:inherit;font-size:var(--text-md);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1;padding:0}.search-input::placeholder{color:var(--color-contrast-400)}.search-loader{border:2px solid var(--color-contrast-300);width:1em;height:1em;animation:command-palette-spin var(--transition-loader) infinite;border-radius:50%;flex-shrink:0;display:inline-flex}.search-loader:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-color:#0000}.search-loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}.search-loader[hidden]{display:none}@keyframes command-palette-spin{to{transform:rotate(360deg)}}.listbox{padding:var(--size-1);overscroll-behavior:contain;scrollbar-width:thin;flex:1;overflow-y:auto}.empty{padding:var(--size-6) var(--size-3);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.group-heading{padding:var(--size-2) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.item{gap:var(--size-2-5);padding:var(--size-2) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);align-items:center;display:flex}.item:hover:not([data-disabled]){background:var(--_option-hover-bg)}.item[data-focused]:not([data-disabled]){background:var(--_option-focus-bg)}.item[data-disabled]{color:var(--color-contrast-400);cursor:not-allowed;opacity:.6}.item-icon{color:var(--color-contrast-500);flex-shrink:0;align-items:center;display:inline-flex}.item-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.item-shortcut{gap:var(--size-1);flex-shrink:0;display:inline-flex}.item-shortcut kbd{padding:var(--size-0-5) var(--size-1-5);font-family:var(--font-mono,monospace);font-size:var(--text-xs);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-bottom-width:calc(var(--border) + 1px);border-radius:var(--rounded-sm)}.footer{gap:var(--size-4);padding:var(--size-2) var(--size-4);font-size:var(--text-xs);color:var(--color-contrast-500);border-top:var(--border) solid var(--color-contrast-100);flex-shrink:0;align-items:center;display:flex}.footer-hint{gap:var(--size-1);align-items:center;display:inline-flex}.footer kbd{padding:var(--size-0-5) var(--size-1);font-family:inherit;font-size:var(--text-xs);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-bottom-width:calc(var(--border) + 1px);border-radius:var(--rounded-sm)}::slotted(ore-command-palette-item){display:none
|
|
2
|
+
var e = "@layer refine.base{:host{--_radius:var(--command-palette-radius,var(--rounded-lg));--_max-width:var(--command-palette-max-width,40rem);--_backdrop-bg:var(--command-palette-backdrop,color-mix(in oklch, var(--color-canvas) 40%, transparent));--_panel-bg:var(--command-palette-bg,var(--color-canvas));--_panel-border-color:var(--command-palette-border-color,var(--color-divider));--_option-hover-bg:var(--command-palette-option-hover-bg,var(--color-contrast-100));--_option-focus-bg:var(--command-palette-option-focus-bg,color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100)));display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display .2s allow-discrete, overlay .2s allow-discrete;padding-top:min(14vh, var(--size-24));background:0 0;border:none;justify-content:center;align-items:flex-start;margin:0;display:flex;position:fixed;inset:0;overflow:hidden}dialog:not([open]),dialog:not([open]) .panel{display:none}dialog[open]{pointer-events:auto}dialog::-ms-backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::-ms-backdrop{opacity:0}}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::backdrop{opacity:0}}dialog.closing::-ms-backdrop{opacity:0}dialog.closing::backdrop{opacity:0}.panel{box-sizing:border-box;width:var(--_max-width);max-width:calc(100vw - var(--size-8));max-height:min(28rem, calc(100dvh - var(--size-16)));background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_radius);box-shadow:var(--command-palette-shadow,var(--shadow-2xl));opacity:1;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:opacity .2s var(--ease-spring), transform .2s var(--ease-spring);flex-direction:column;display:flex;position:relative;overflow:hidden;transform:scale(1)translateY(0)}@starting-style{.panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(-4px)}}dialog.closing .panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(-4px);transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring)}@media (width<=640px){.panel{width:calc(100vw - var(--size-4));max-width:calc(100vw - var(--size-4))}dialog{padding-top:var(--size-4)}}.search{gap:var(--size-2);padding:var(--size-3) var(--size-4);border-bottom:var(--border) solid var(--color-contrast-100);flex-shrink:0;align-items:center;display:flex}.search-icon{color:var(--color-contrast-400);flex-shrink:0;display:inline-flex}.search-input{min-width:0;font:inherit;font-size:var(--text-md);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1;padding:0}.search-input::placeholder{color:var(--color-contrast-400)}.search-loader{border:2px solid var(--color-contrast-300);width:1em;height:1em;animation:command-palette-spin var(--transition-loader) infinite;border-radius:50%;flex-shrink:0;display:inline-flex}.search-loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.search-loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}.search-loader[hidden]{display:none}@keyframes command-palette-spin{to{transform:rotate(360deg)}}.listbox{padding:var(--size-1);overscroll-behavior:contain;scrollbar-width:thin;flex:1;overflow-y:auto}.empty{padding:var(--size-6) var(--size-3);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.group-heading{padding:var(--size-2) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.item{gap:var(--size-2-5);padding:var(--size-2) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);align-items:center;display:flex}.item:hover:not([data-disabled]){background:var(--_option-hover-bg)}.item[data-focused]:not([data-disabled]){background:var(--_option-focus-bg)}.item[data-disabled]{color:var(--color-contrast-400);cursor:not-allowed;opacity:.6}.item-icon{color:var(--color-contrast-500);flex-shrink:0;align-items:center;display:inline-flex}.item-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.item-shortcut{gap:var(--size-1);flex-shrink:0;display:inline-flex}.item-shortcut kbd{padding:var(--size-0-5) var(--size-1-5);font-family:var(--font-mono,monospace);font-size:var(--text-xs);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-bottom-width:calc(var(--border) + 1px);border-radius:var(--rounded-sm)}.footer{gap:var(--size-4);padding:var(--size-2) var(--size-4);font-size:var(--text-xs);color:var(--color-contrast-500);border-top:var(--border) solid var(--color-contrast-100);flex-shrink:0;align-items:center;display:flex}.footer-hint{gap:var(--size-1);align-items:center;display:inline-flex}.footer kbd{padding:var(--size-0-5) var(--size-1);font-family:inherit;font-size:var(--text-xs);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-bottom-width:calc(var(--border) + 1px);border-radius:var(--rounded-sm)}::slotted(ore-command-palette-item){display:none}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-palette.css.js","names":[],"sources":["../../../src/overlay/command-palette/command-palette.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_radius: var(--command-palette-radius, var(--rounded-lg));\n --_max-width: var(--command-palette-max-width, 40rem);\n --_backdrop-bg: var(--command-palette-backdrop, color-mix(in oklch, var(--color-canvas) 40%, transparent));\n --_panel-bg: var(--command-palette-bg, var(--color-canvas));\n --_panel-border-color: var(--command-palette-border-color, var(--color-divider));\n --_option-hover-bg: var(--command-palette-option-hover-bg, var(--color-contrast-100));\n --_option-focus-bg: var(\n --command-palette-option-focus-bg,\n color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100))\n );\n\n display: contents;\n }\n\n /* =====================\n Native <dialog> resets — see ore-dialog for the full rationale.\n ===================== */\n\n dialog {\n all: unset;\n position: fixed;\n inset: 0;\n box-sizing: border-box;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n padding-block-start: min(14vh, var(--size-24));\n margin: 0;\n overflow: hidden;\n pointer-events: none;\n background: transparent;\n border: none;\n transition:\n display 200ms allow-discrete,\n overlay 200ms allow-discrete;\n }\n\n dialog:not([open]) {\n display: none;\n }\n\n dialog:not([open]) .panel {\n display: none;\n }\n\n dialog[open] {\n pointer-events: auto;\n }\n\n dialog::backdrop {\n background: var(--_backdrop-bg);\n opacity: 1;\n backdrop-filter: blur(var(--blur-xs));\n transition:\n opacity var(--transition-normal),\n overlay var(--transition-normal) allow-discrete,\n display var(--transition-normal) allow-discrete;\n\n @starting-style {\n opacity: 0;\n }\n }\n\n dialog.closing::backdrop {\n opacity: 0;\n }\n\n /* =====================\n Panel\n ===================== */\n\n .panel {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: var(--_max-width);\n max-width: calc(100vw - var(--size-8));\n max-height: min(28rem, calc(100dvh - var(--size-16)));\n overflow: hidden;\n background: var(--_panel-bg);\n border: var(--border) solid var(--_panel-border-color);\n border-radius: var(--_radius);\n box-shadow: var(--command-palette-shadow, var(--shadow-2xl));\n opacity: 1;\n backdrop-filter: blur(var(--blur-md));\n transform: scale(1) translateY(0);\n transition:\n opacity 200ms var(--ease-spring),\n transform 200ms var(--ease-spring);\n\n @starting-style {\n opacity: 0;\n transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n }\n }\n\n dialog.closing .panel {\n opacity: 0;\n transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n transition:\n opacity 150ms var(--ease-spring),\n transform 150ms var(--ease-spring);\n }\n\n @media (width <= 640px) {\n .panel {\n width: calc(100vw - var(--size-4));\n max-width: calc(100vw - var(--size-4));\n }\n\n dialog {\n padding-block-start: var(--size-4);\n }\n }\n\n /* =====================\n Search field\n ===================== */\n\n .search {\n display: flex;\n flex-shrink: 0;\n gap: var(--size-2);\n align-items: center;\n padding: var(--size-3) var(--size-4);\n border-block-end: var(--border) solid var(--color-contrast-100);\n }\n\n .search-icon {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--color-contrast-400);\n }\n\n .search-input {\n flex: 1;\n min-width: 0;\n padding: 0;\n font: inherit;\n font-size: var(--text-md);\n color: var(--color-contrast-900);\n outline: none;\n background: transparent;\n border: none;\n }\n\n .search-input::placeholder {\n color: var(--color-contrast-400);\n }\n\n .search-loader {\n display: inline-flex;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border: 2px solid var(--color-contrast-300);\n border-inline-end-color: transparent;\n border-radius: 50%;\n animation: command-palette-spin var(--transition-loader) infinite;\n }\n\n .search-loader[hidden] {\n display: none;\n }\n\n @keyframes command-palette-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n /* =====================\n Listbox\n ===================== */\n\n .listbox {\n flex: 1;\n padding: var(--size-1);\n overflow-y: auto;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n }\n\n .empty {\n padding: var(--size-6) var(--size-3);\n font-size: var(--text-sm);\n color: var(--color-contrast-400);\n text-align: center;\n }\n\n .group-heading {\n padding: var(--size-2) var(--size-2-5) var(--size-1);\n font-size: var(--text-xs);\n font-weight: var(--font-semibold);\n color: var(--color-contrast-500);\n text-transform: uppercase;\n letter-spacing: var(--tracking-wide, 0.05em);\n }\n\n .item {\n display: flex;\n gap: var(--size-2-5);\n align-items: center;\n padding: var(--size-2) var(--size-2-5);\n font-size: var(--text-sm);\n line-height: var(--leading-normal);\n color: var(--color-contrast-800);\n cursor: pointer;\n border-radius: var(--rounded-md);\n transition: background var(--transition-fast);\n }\n\n .item:hover:not([data-disabled]) {\n background: var(--_option-hover-bg);\n }\n\n .item[data-focused]:not([data-disabled]) {\n background: var(--_option-focus-bg);\n }\n\n .item[data-disabled] {\n color: var(--color-contrast-400);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n .item-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n color: var(--color-contrast-500);\n }\n\n .item-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .item-shortcut {\n display: inline-flex;\n flex-shrink: 0;\n gap: var(--size-1);\n }\n\n .item-shortcut kbd {\n padding: var(--size-0-5) var(--size-1-5);\n font-family: var(--font-mono, monospace);\n font-size: var(--text-xs);\n color: var(--color-contrast-500);\n background: var(--color-contrast-100);\n border: var(--border) solid var(--color-contrast-200);\n border-bottom-width: calc(var(--border) + 1px);\n border-radius: var(--rounded-sm);\n }\n\n /* =====================\n Footer hints\n ===================== */\n\n .footer {\n display: flex;\n flex-shrink: 0;\n gap: var(--size-4);\n align-items: center;\n padding: var(--size-2) var(--size-4);\n font-size: var(--text-xs);\n color: var(--color-contrast-500);\n border-block-start: var(--border) solid var(--color-contrast-100);\n }\n\n .footer-hint {\n display: inline-flex;\n gap: var(--size-1);\n align-items: center;\n }\n\n .footer kbd {\n padding: var(--size-0-5) var(--size-1);\n font-family: inherit;\n font-size: var(--text-xs);\n background: var(--color-contrast-100);\n border: var(--border) solid var(--color-contrast-200);\n border-bottom-width: calc(var(--border) + 1px);\n border-radius: var(--rounded-sm);\n }\n\n /* Slotted item elements are pure data nodes — never rendered directly. */\n ::slotted(ore-command-palette-item) {\n display: none
|
|
1
|
+
{"version":3,"file":"command-palette.css.js","names":[],"sources":["../../../src/overlay/command-palette/command-palette.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_radius: var(--command-palette-radius, var(--rounded-lg));\n --_max-width: var(--command-palette-max-width, 40rem);\n --_backdrop-bg: var(--command-palette-backdrop, color-mix(in oklch, var(--color-canvas) 40%, transparent));\n --_panel-bg: var(--command-palette-bg, var(--color-canvas));\n --_panel-border-color: var(--command-palette-border-color, var(--color-divider));\n --_option-hover-bg: var(--command-palette-option-hover-bg, var(--color-contrast-100));\n --_option-focus-bg: var(\n --command-palette-option-focus-bg,\n color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100))\n );\n\n display: contents;\n }\n\n /* =====================\n Native <dialog> resets — see ore-dialog for the full rationale.\n ===================== */\n\n dialog {\n all: unset;\n position: fixed;\n inset: 0;\n box-sizing: border-box;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n padding-block-start: min(14vh, var(--size-24));\n margin: 0;\n overflow: hidden;\n pointer-events: none;\n background: transparent;\n border: none;\n transition:\n display 200ms allow-discrete,\n overlay 200ms allow-discrete;\n }\n\n dialog:not([open]) {\n display: none;\n }\n\n dialog:not([open]) .panel {\n display: none;\n }\n\n dialog[open] {\n pointer-events: auto;\n }\n\n dialog::backdrop {\n background: var(--_backdrop-bg);\n opacity: 1;\n backdrop-filter: blur(var(--blur-xs));\n transition:\n opacity var(--transition-normal),\n overlay var(--transition-normal) allow-discrete,\n display var(--transition-normal) allow-discrete;\n\n @starting-style {\n opacity: 0;\n }\n }\n\n dialog.closing::backdrop {\n opacity: 0;\n }\n\n /* =====================\n Panel\n ===================== */\n\n .panel {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: var(--_max-width);\n max-width: calc(100vw - var(--size-8));\n max-height: min(28rem, calc(100dvh - var(--size-16)));\n overflow: hidden;\n background: var(--_panel-bg);\n border: var(--border) solid var(--_panel-border-color);\n border-radius: var(--_radius);\n box-shadow: var(--command-palette-shadow, var(--shadow-2xl));\n opacity: 1;\n backdrop-filter: blur(var(--blur-md));\n transform: scale(1) translateY(0);\n transition:\n opacity 200ms var(--ease-spring),\n transform 200ms var(--ease-spring);\n\n @starting-style {\n opacity: 0;\n transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n }\n }\n\n dialog.closing .panel {\n opacity: 0;\n transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n transition:\n opacity 150ms var(--ease-spring),\n transform 150ms var(--ease-spring);\n }\n\n @media (width <= 640px) {\n .panel {\n width: calc(100vw - var(--size-4));\n max-width: calc(100vw - var(--size-4));\n }\n\n dialog {\n padding-block-start: var(--size-4);\n }\n }\n\n /* =====================\n Search field\n ===================== */\n\n .search {\n display: flex;\n flex-shrink: 0;\n gap: var(--size-2);\n align-items: center;\n padding: var(--size-3) var(--size-4);\n border-block-end: var(--border) solid var(--color-contrast-100);\n }\n\n .search-icon {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--color-contrast-400);\n }\n\n .search-input {\n flex: 1;\n min-width: 0;\n padding: 0;\n font: inherit;\n font-size: var(--text-md);\n color: var(--color-contrast-900);\n outline: none;\n background: transparent;\n border: none;\n }\n\n .search-input::placeholder {\n color: var(--color-contrast-400);\n }\n\n .search-loader {\n display: inline-flex;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border: 2px solid var(--color-contrast-300);\n border-inline-end-color: transparent;\n border-radius: 50%;\n animation: command-palette-spin var(--transition-loader) infinite;\n }\n\n .search-loader[hidden] {\n display: none;\n }\n\n @keyframes command-palette-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n /* =====================\n Listbox\n ===================== */\n\n .listbox {\n flex: 1;\n padding: var(--size-1);\n overflow-y: auto;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n }\n\n .empty {\n padding: var(--size-6) var(--size-3);\n font-size: var(--text-sm);\n color: var(--color-contrast-400);\n text-align: center;\n }\n\n .group-heading {\n padding: var(--size-2) var(--size-2-5) var(--size-1);\n font-size: var(--text-xs);\n font-weight: var(--font-semibold);\n color: var(--color-contrast-500);\n text-transform: uppercase;\n letter-spacing: var(--tracking-wide, 0.05em);\n }\n\n .item {\n display: flex;\n gap: var(--size-2-5);\n align-items: center;\n padding: var(--size-2) var(--size-2-5);\n font-size: var(--text-sm);\n line-height: var(--leading-normal);\n color: var(--color-contrast-800);\n cursor: pointer;\n border-radius: var(--rounded-md);\n transition: background var(--transition-fast);\n }\n\n .item:hover:not([data-disabled]) {\n background: var(--_option-hover-bg);\n }\n\n .item[data-focused]:not([data-disabled]) {\n background: var(--_option-focus-bg);\n }\n\n .item[data-disabled] {\n color: var(--color-contrast-400);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n .item-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n color: var(--color-contrast-500);\n }\n\n .item-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .item-shortcut {\n display: inline-flex;\n flex-shrink: 0;\n gap: var(--size-1);\n }\n\n .item-shortcut kbd {\n padding: var(--size-0-5) var(--size-1-5);\n font-family: var(--font-mono, monospace);\n font-size: var(--text-xs);\n color: var(--color-contrast-500);\n background: var(--color-contrast-100);\n border: var(--border) solid var(--color-contrast-200);\n border-bottom-width: calc(var(--border) + 1px);\n border-radius: var(--rounded-sm);\n }\n\n /* =====================\n Footer hints\n ===================== */\n\n .footer {\n display: flex;\n flex-shrink: 0;\n gap: var(--size-4);\n align-items: center;\n padding: var(--size-2) var(--size-4);\n font-size: var(--text-xs);\n color: var(--color-contrast-500);\n border-block-start: var(--border) solid var(--color-contrast-100);\n }\n\n .footer-hint {\n display: inline-flex;\n gap: var(--size-1);\n align-items: center;\n }\n\n .footer kbd {\n padding: var(--size-0-5) var(--size-1);\n font-family: inherit;\n font-size: var(--text-xs);\n background: var(--color-contrast-100);\n border: var(--border) solid var(--color-contrast-200);\n border-bottom-width: calc(var(--border) + 1px);\n border-radius: var(--rounded-sm);\n }\n\n /* Slotted item elements are pure data nodes — never rendered directly. */\n ::slotted(ore-command-palette-item) {\n display: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/overlay/command-palette/command-palette.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/overlay/command-palette/command-palette.ts"],"names":[],"mappings":"AASA,OAAO,yBAAyB,CAAC;AAGjC,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAK/F;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,wBAAwB,EAAG,0BAAmC,CAAC;AAO5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,mBAAmB,EAAG,qBAA8B,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`@layer refine.base{:host{--_radius:var(--dialog-radius,var(--rounded-lg));--_padding:var(--dialog-padding,var(--size-4));--_gap:var(--dialog-gap,var(--size-4));--_max-width:var(--dialog-max-width,32rem);--_elevation:var(--shadow-xl);--_backdrop-filter:none;--_backdrop-bg:var(--dialog-backdrop,color-mix(in oklch, var(--color-canvas) 40%, transparent));--_panel-bg:var(--dialog-bg,var(--color-canvas));--_panel-blur:var(--dialog-panel-blur,var(--blur-md));--_panel-border-color:var(--dialog-border-color,var(--color-divider));display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display .2s allow-discrete, overlay .2s allow-discrete;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:fixed;inset:0;overflow:hidden}dialog:not([open]),dialog:not([open]) .panel{display:none}dialog[open]{pointer-events:auto}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::backdrop{opacity:0}}dialog.closing::backdrop{opacity:0;transition:opacity .15s var(--ease-in-out), overlay .15s allow-discrete, display .15s allow-discrete}.panel{box-sizing:border-box;width:var(--_max-width);max-width:calc(100vw - var(--size-8));max-height:calc(100dvh - var(--size-8));background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_radius);box-shadow:var(--dialog-shadow,var(--_elevation));opacity:1;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity .2s var(--ease-spring), transform .2s var(--ease-spring);flex-direction:column;display:flex;position:relative;overflow:hidden;transform:scale(1)translateY(0)}@starting-style{.panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(4px)}}dialog.closing .panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(4px);transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring)}.panel[data-size=sm]{--_max-width:var(--dialog-max-width,22rem)}.panel[data-size=md]{--_max-width:var(--dialog-max-width,32rem)}.panel[data-size=lg]{--_max-width:var(--dialog-max-width,48rem)}.panel[data-size=xl]{--_max-width:var(--dialog-max-width,64rem)}.panel[data-size=full]{width:calc(100vw - var(--size-8));max-width:calc(100vw - var(--size-8));max-height:calc(100dvh - var(--size-8))}.header{gap:var(--size-2);padding:var(--_padding);flex-shrink:0;align-items:center;padding-bottom:0;display:flex}.header[hidden]{display:none}.title{font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight);color:var(--color-contrast-900);flex:1}.close{width:var(--size-8);min-width:var(--_touch-target);height:var(--size-8);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.close:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:auto}.close:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.close:hover{color:var(--color-contrast-900);background:var(--color-contrast-200)}.close:focus-visible{outline:var(--border-2) solid var(--color-focus);outline-offset:var(--border-2)}.close[hidden]{display:none}.body{padding:var(--_padding);overscroll-behavior:contain;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-contrast-700);flex:1;overflow-y:auto}.footer{gap:var(--_gap);padding:var(--_padding);flex-wrap:wrap;flex-shrink:0;justify-content:flex-end;align-items:center;padding-top:0;display:flex}.footer[hidden]{display:none}.header:not([hidden])+.body{padding-top:var(--size-4)}.body+.footer:not([hidden]){padding-top:var(--size-4);border-top:var(--border) solid var(--color-contrast-100)}@media (width<=640px){.panel,.panel[data-size=sm],.panel[data-size=md],.panel[data-size=lg],.panel[data-size=xl]{width:calc(100vw - var(--size-4));max-width:calc(100vw - var(--size-4));max-height:calc(100dvh - var(--size-4))}.header,.body,.footer{padding-inline:var(--size-3)}}}@layer refine.config{:host([backdrop=blur]){--_backdrop-filter:blur(var(--blur-xs))}:host([backdrop=transparent]){--_backdrop-bg:transparent}:host([elevation=none]){--_elevation:var(--shadow-none)}:host([elevation=sm]){--_elevation:var(--shadow-sm)}:host([elevation=md]){--_elevation:var(--shadow-md)}:host([elevation=lg]){--_elevation:var(--shadow-lg)}:host([elevation=xl]){--_elevation:var(--shadow-xl)}:host([elevation="2xl"]){--_elevation:var(--shadow-2xl)}:host([padding=none]){--_padding:var(--size-0)}:host([padding=sm]){--_padding:var(--size-3)}:host([padding=md]){--_padding:var(--size-4)}:host([padding=lg]){--_padding:var(--size-6)}:host([padding=xl]){--_padding:var(--size-8)}}`;exports.default=e;
|
|
1
|
+
var e=`@layer refine.base{:host{--_radius:var(--dialog-radius,var(--rounded-lg));--_padding:var(--dialog-padding,var(--size-4));--_gap:var(--dialog-gap,var(--size-4));--_max-width:var(--dialog-max-width,32rem);--_elevation:var(--shadow-xl);--_backdrop-filter:none;--_backdrop-bg:var(--dialog-backdrop,color-mix(in oklch, var(--color-canvas) 40%, transparent));--_panel-bg:var(--dialog-bg,var(--color-canvas));--_panel-blur:var(--dialog-panel-blur,var(--blur-md));--_panel-border-color:var(--dialog-border-color,var(--color-divider));display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display .2s allow-discrete, overlay .2s allow-discrete;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:fixed;inset:0;overflow:hidden}dialog:not([open]),dialog:not([open]) .panel{display:none}dialog[open]{pointer-events:auto}dialog::-ms-backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::-ms-backdrop{opacity:0}}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::backdrop{opacity:0}}dialog.closing::-ms-backdrop{opacity:0;transition:opacity .15s var(--ease-in-out), overlay .15s allow-discrete, display .15s allow-discrete}dialog.closing::backdrop{opacity:0;transition:opacity .15s var(--ease-in-out), overlay .15s allow-discrete, display .15s allow-discrete}.panel{box-sizing:border-box;width:var(--_max-width);max-width:calc(100vw - var(--size-8));max-height:calc(100dvh - var(--size-8));background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_radius);box-shadow:var(--dialog-shadow,var(--_elevation));opacity:1;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity .2s var(--ease-spring), transform .2s var(--ease-spring);flex-direction:column;display:flex;position:relative;overflow:hidden;transform:scale(1)translateY(0)}@starting-style{.panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(4px)}}dialog.closing .panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(4px);transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring)}.panel[data-size=sm]{--_max-width:var(--dialog-max-width,22rem)}.panel[data-size=md]{--_max-width:var(--dialog-max-width,32rem)}.panel[data-size=lg]{--_max-width:var(--dialog-max-width,48rem)}.panel[data-size=xl]{--_max-width:var(--dialog-max-width,64rem)}.panel[data-size=full]{width:calc(100vw - var(--size-8));max-width:calc(100vw - var(--size-8));max-height:calc(100dvh - var(--size-8))}.header{gap:var(--size-2);padding:var(--_padding);flex-shrink:0;align-items:center;padding-bottom:0;display:flex}.header[hidden]{display:none}.title{font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight);color:var(--color-contrast-900);flex:1}.close{width:var(--size-8);min-width:var(--_touch-target);height:var(--size-8);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.close:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.close:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.close:hover{color:var(--color-contrast-900);background:var(--color-contrast-200)}.close:focus-visible{outline:var(--border-2) solid var(--color-focus);outline-offset:var(--border-2)}.close[hidden]{display:none}.body{padding:var(--_padding);overscroll-behavior:contain;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-contrast-700);flex:1;overflow-y:auto}.footer{gap:var(--_gap);padding:var(--_padding);flex-wrap:wrap;flex-shrink:0;justify-content:flex-end;align-items:center;padding-top:0;display:flex}.footer[hidden]{display:none}.header:not([hidden])+.body{padding-top:var(--size-4)}.body+.footer:not([hidden]){padding-top:var(--size-4);border-top:var(--border) solid var(--color-contrast-100)}@media (width<=640px){.panel,.panel[data-size=sm],.panel[data-size=md],.panel[data-size=lg],.panel[data-size=xl]{width:calc(100vw - var(--size-4));max-width:calc(100vw - var(--size-4));max-height:calc(100dvh - var(--size-4))}.header,.body,.footer{padding-inline:var(--size-3)}}}@layer refine.config{:host([backdrop=blur]){--_backdrop-filter:blur(var(--blur-xs))}:host([backdrop=transparent]){--_backdrop-bg:transparent}:host([elevation=none]){--_elevation:var(--shadow-none)}:host([elevation=sm]){--_elevation:var(--shadow-sm)}:host([elevation=md]){--_elevation:var(--shadow-md)}:host([elevation=lg]){--_elevation:var(--shadow-lg)}:host([elevation=xl]){--_elevation:var(--shadow-xl)}:host([elevation="2xl"]){--_elevation:var(--shadow-2xl)}:host([padding=none]){--_padding:var(--size-0)}:host([padding=sm]){--_padding:var(--size-3)}:host([padding=md]){--_padding:var(--size-4)}:host([padding=lg]){--_padding:var(--size-6)}:host([padding=xl]){--_padding:var(--size-8)}}`;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=dialog.css.cjs.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/overlay/dialog/dialog.css?inline
|
|
2
|
-
var e = "@layer refine.base{:host{--_radius:var(--dialog-radius,var(--rounded-lg));--_padding:var(--dialog-padding,var(--size-4));--_gap:var(--dialog-gap,var(--size-4));--_max-width:var(--dialog-max-width,32rem);--_elevation:var(--shadow-xl);--_backdrop-filter:none;--_backdrop-bg:var(--dialog-backdrop,color-mix(in oklch, var(--color-canvas) 40%, transparent));--_panel-bg:var(--dialog-bg,var(--color-canvas));--_panel-blur:var(--dialog-panel-blur,var(--blur-md));--_panel-border-color:var(--dialog-border-color,var(--color-divider));display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display .2s allow-discrete, overlay .2s allow-discrete;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:fixed;inset:0;overflow:hidden}dialog:not([open]),dialog:not([open]) .panel{display:none}dialog[open]{pointer-events:auto}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::backdrop{opacity:0}}dialog.closing::backdrop{opacity:0;transition:opacity .15s var(--ease-in-out), overlay .15s allow-discrete, display .15s allow-discrete}.panel{box-sizing:border-box;width:var(--_max-width);max-width:calc(100vw - var(--size-8));max-height:calc(100dvh - var(--size-8));background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_radius);box-shadow:var(--dialog-shadow,var(--_elevation));opacity:1;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity .2s var(--ease-spring), transform .2s var(--ease-spring);flex-direction:column;display:flex;position:relative;overflow:hidden;transform:scale(1)translateY(0)}@starting-style{.panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(4px)}}dialog.closing .panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(4px);transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring)}.panel[data-size=sm]{--_max-width:var(--dialog-max-width,22rem)}.panel[data-size=md]{--_max-width:var(--dialog-max-width,32rem)}.panel[data-size=lg]{--_max-width:var(--dialog-max-width,48rem)}.panel[data-size=xl]{--_max-width:var(--dialog-max-width,64rem)}.panel[data-size=full]{width:calc(100vw - var(--size-8));max-width:calc(100vw - var(--size-8));max-height:calc(100dvh - var(--size-8))}.header{gap:var(--size-2);padding:var(--_padding);flex-shrink:0;align-items:center;padding-bottom:0;display:flex}.header[hidden]{display:none}.title{font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight);color:var(--color-contrast-900);flex:1}.close{width:var(--size-8);min-width:var(--_touch-target);height:var(--size-8);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.close:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:auto}.close:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.close:hover{color:var(--color-contrast-900);background:var(--color-contrast-200)}.close:focus-visible{outline:var(--border-2) solid var(--color-focus);outline-offset:var(--border-2)}.close[hidden]{display:none}.body{padding:var(--_padding);overscroll-behavior:contain;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-contrast-700);flex:1;overflow-y:auto}.footer{gap:var(--_gap);padding:var(--_padding);flex-wrap:wrap;flex-shrink:0;justify-content:flex-end;align-items:center;padding-top:0;display:flex}.footer[hidden]{display:none}.header:not([hidden])+.body{padding-top:var(--size-4)}.body+.footer:not([hidden]){padding-top:var(--size-4);border-top:var(--border) solid var(--color-contrast-100)}@media (width<=640px){.panel,.panel[data-size=sm],.panel[data-size=md],.panel[data-size=lg],.panel[data-size=xl]{width:calc(100vw - var(--size-4));max-width:calc(100vw - var(--size-4));max-height:calc(100dvh - var(--size-4))}.header,.body,.footer{padding-inline:var(--size-3)}}}@layer refine.config{:host([backdrop=blur]){--_backdrop-filter:blur(var(--blur-xs))}:host([backdrop=transparent]){--_backdrop-bg:transparent}:host([elevation=none]){--_elevation:var(--shadow-none)}:host([elevation=sm]){--_elevation:var(--shadow-sm)}:host([elevation=md]){--_elevation:var(--shadow-md)}:host([elevation=lg]){--_elevation:var(--shadow-lg)}:host([elevation=xl]){--_elevation:var(--shadow-xl)}:host([elevation=\"2xl\"]){--_elevation:var(--shadow-2xl)}:host([padding=none]){--_padding:var(--size-0)}:host([padding=sm]){--_padding:var(--size-3)}:host([padding=md]){--_padding:var(--size-4)}:host([padding=lg]){--_padding:var(--size-6)}:host([padding=xl]){--_padding:var(--size-8)}}";
|
|
2
|
+
var e = "@layer refine.base{:host{--_radius:var(--dialog-radius,var(--rounded-lg));--_padding:var(--dialog-padding,var(--size-4));--_gap:var(--dialog-gap,var(--size-4));--_max-width:var(--dialog-max-width,32rem);--_elevation:var(--shadow-xl);--_backdrop-filter:none;--_backdrop-bg:var(--dialog-backdrop,color-mix(in oklch, var(--color-canvas) 40%, transparent));--_panel-bg:var(--dialog-bg,var(--color-canvas));--_panel-blur:var(--dialog-panel-blur,var(--blur-md));--_panel-border-color:var(--dialog-border-color,var(--color-divider));display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display .2s allow-discrete, overlay .2s allow-discrete;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:fixed;inset:0;overflow:hidden}dialog:not([open]),dialog:not([open]) .panel{display:none}dialog[open]{pointer-events:auto}dialog::-ms-backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::-ms-backdrop{opacity:0}}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:opacity var(--transition-normal), overlay var(--transition-normal) allow-discrete, display var(--transition-normal) allow-discrete}@starting-style{dialog::backdrop{opacity:0}}dialog.closing::-ms-backdrop{opacity:0;transition:opacity .15s var(--ease-in-out), overlay .15s allow-discrete, display .15s allow-discrete}dialog.closing::backdrop{opacity:0;transition:opacity .15s var(--ease-in-out), overlay .15s allow-discrete, display .15s allow-discrete}.panel{box-sizing:border-box;width:var(--_max-width);max-width:calc(100vw - var(--size-8));max-height:calc(100dvh - var(--size-8));background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_radius);box-shadow:var(--dialog-shadow,var(--_elevation));opacity:1;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity .2s var(--ease-spring), transform .2s var(--ease-spring);flex-direction:column;display:flex;position:relative;overflow:hidden;transform:scale(1)translateY(0)}@starting-style{.panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(4px)}}dialog.closing .panel{opacity:0;transform:scale(var(--overlay-enter-scale-dialog)) translateY(4px);transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring)}.panel[data-size=sm]{--_max-width:var(--dialog-max-width,22rem)}.panel[data-size=md]{--_max-width:var(--dialog-max-width,32rem)}.panel[data-size=lg]{--_max-width:var(--dialog-max-width,48rem)}.panel[data-size=xl]{--_max-width:var(--dialog-max-width,64rem)}.panel[data-size=full]{width:calc(100vw - var(--size-8));max-width:calc(100vw - var(--size-8));max-height:calc(100dvh - var(--size-8))}.header{gap:var(--size-2);padding:var(--_padding);flex-shrink:0;align-items:center;padding-bottom:0;display:flex}.header[hidden]{display:none}.title{font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight);color:var(--color-contrast-900);flex:1}.close{width:var(--size-8);min-width:var(--_touch-target);height:var(--size-8);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.close:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.close:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.close:hover{color:var(--color-contrast-900);background:var(--color-contrast-200)}.close:focus-visible{outline:var(--border-2) solid var(--color-focus);outline-offset:var(--border-2)}.close[hidden]{display:none}.body{padding:var(--_padding);overscroll-behavior:contain;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-contrast-700);flex:1;overflow-y:auto}.footer{gap:var(--_gap);padding:var(--_padding);flex-wrap:wrap;flex-shrink:0;justify-content:flex-end;align-items:center;padding-top:0;display:flex}.footer[hidden]{display:none}.header:not([hidden])+.body{padding-top:var(--size-4)}.body+.footer:not([hidden]){padding-top:var(--size-4);border-top:var(--border) solid var(--color-contrast-100)}@media (width<=640px){.panel,.panel[data-size=sm],.panel[data-size=md],.panel[data-size=lg],.panel[data-size=xl]{width:calc(100vw - var(--size-4));max-width:calc(100vw - var(--size-4));max-height:calc(100dvh - var(--size-4))}.header,.body,.footer{padding-inline:var(--size-3)}}}@layer refine.config{:host([backdrop=blur]){--_backdrop-filter:blur(var(--blur-xs))}:host([backdrop=transparent]){--_backdrop-bg:transparent}:host([elevation=none]){--_elevation:var(--shadow-none)}:host([elevation=sm]){--_elevation:var(--shadow-sm)}:host([elevation=md]){--_elevation:var(--shadow-md)}:host([elevation=lg]){--_elevation:var(--shadow-lg)}:host([elevation=xl]){--_elevation:var(--shadow-xl)}:host([elevation=\"2xl\"]){--_elevation:var(--shadow-2xl)}:host([padding=none]){--_padding:var(--size-0)}:host([padding=sm]){--_padding:var(--size-3)}:host([padding=md]){--_padding:var(--size-4)}:host([padding=lg]){--_padding:var(--size-6)}:host([padding=xl]){--_padding:var(--size-8)}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/overlay/dialog/dialog.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/overlay/dialog/dialog.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE5D,OAAO,yBAAyB,CAAC;AAGjC,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AACrD,KAAK,cAAc,GAAG,QAAQ,GAAG,MAAM,GAAG,aAAa,CAAC;AACxD,KAAK,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAKlE,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,aAAa,EAAE,uBAAuB,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,qHAAqH;IACrH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,mEAAmE;IACnE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,kBAAkB;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AAEH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`@layer refine.base{:host{--_backdrop-bg:var(--drawer-backdrop-bg,color-mix(in oklch, var(--color-canvas) 40%, transparent));--_backdrop-filter:none;--_panel-bg:var(--drawer-bg,var(--color-canvas));--_panel-blur:var(--drawer-panel-blur,var(--blur-md));--_panel-shadow:var(--drawer-shadow,var(--shadow-xl));--_panel-border-color:var(--color-divider);--_panel-bleed:var(--size-8);--_drag-handle-inset:calc(var(--size-1) * -1);display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display .2s allow-discrete, overlay .2s allow-discrete;display:flex;position:fixed;inset:0}dialog:not([open]),dialog:not([open]) .panel{display:none}dialog[open]{pointer-events:auto;display:flex}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:display .2s allow-discrete, overlay .2s allow-discrete, opacity var(--transition-normal), backdrop-filter var(--transition-normal)}@starting-style{dialog::backdrop{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}}dialog.closing::backdrop{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur();transition:opacity .3s var(--ease-in-out), backdrop-filter .3s var(--ease-in-out), overlay .3s allow-discrete, display .3s allow-discrete}.panel{box-sizing:border-box;background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);box-shadow:var(--_panel-shadow);opacity:1;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity var(--transition-normal), transform .3s var(--ease-move);flex-direction:column;display:flex;position:absolute;overflow:visible;transform:translate(0)}@starting-style{.panel{opacity:0;transform:var(--_panel-exit-transform,translate3d(0, 0, 0))}}dialog.closing .panel{opacity:0;transform:var(--_panel-exit-transform,translate3d(0, 0, 0))}:host([placement=left]) .panel{--_panel-exit-transform:translateX(calc(-100% - var(--_panel-bleed)));width:calc(var(--drawer-size,20rem) + var(--_panel-bleed));max-width:calc(100dvw + var(--_panel-bleed));border-top:none;border-bottom:none;top:0;bottom:0}:host([placement=left]) .panel:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:calc(var(--_panel-bleed) * -1);padding-left:var(--_panel-bleed);border-left:none;left:0}:host([placement=left]) .panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:calc(var(--_panel-bleed) * -1);padding-right:var(--_panel-bleed);border-right:none;right:0}:host(:not([placement])) .panel,:host([placement=right]) .panel{--_panel-exit-transform:translateX(calc(100% + var(--_panel-bleed)));width:calc(var(--drawer-size,20rem) + var(--_panel-bleed));max-width:calc(100dvw + var(--_panel-bleed));border-top:none;border-bottom:none;top:0;bottom:0}:host(:not([placement])) .panel:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),:host([placement=right]) .panel:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:calc(var(--_panel-bleed) * -1);padding-right:var(--_panel-bleed);border-right:none;right:0}:host(:not([placement])) .panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:calc(var(--_panel-bleed) * -1);padding-left:var(--_panel-bleed);border-left:none;left:0}:host([placement=right]) .panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:calc(var(--_panel-bleed) * -1);padding-left:var(--_panel-bleed);border-left:none;left:0}:host([placement=top]) .panel{--_panel-exit-transform:translateY(calc(-100% - var(--_panel-bleed)));height:calc(var(--drawer-size,16rem) + var(--_panel-bleed));max-height:calc(100dvh + var(--_panel-bleed));margin-top:calc(var(--_panel-bleed) * -1);padding-top:var(--_panel-bleed);border-top:none;border-left:none;border-right:none;top:0;left:0;right:0}:host([placement=bottom]) .panel{--_panel-exit-transform:translateY(calc(100% + var(--_panel-bleed)));height:calc(var(--drawer-size,16rem) + var(--_panel-bleed));max-height:calc(100dvh + var(--_panel-bleed));margin-bottom:calc(var(--_panel-bleed) * -1);padding-bottom:var(--_panel-bleed);border-bottom:none;border-left:none;border-right:none;bottom:0;left:0;right:0}:host(:dir(rtl)[placement=left]) .panel{--_panel-exit-transform:translateX(calc(100% + var(--_panel-bleed)))}:host(:dir(rtl)[placement=right]) .panel,:host(:dir(rtl):not([placement])) .panel{--_panel-exit-transform:translateX(calc(-100% - var(--_panel-bleed)))}:host([size=sm]){--drawer-size:14rem}:host([size=lg]){--drawer-size:32rem}:host([size=full]){--drawer-size:100%}:host([size=full]) .panel{width:calc(100% + var(--_panel-bleed));max-width:none;height:calc(100% + var(--_panel-bleed));border:none;max-height:none}.header{gap:var(--size-2);padding:var(--size-4);border-bottom:var(--border) solid var(--color-contrast-200);flex-shrink:0;align-items:center;display:flex}.header-title{text-overflow:ellipsis;min-width:0;font-size:var(--text-lg);font-weight:var(--font-semibold);white-space:nowrap;flex:1;overflow:hidden}.body{padding:var(--size-4);flex:1;overflow-y:auto}.footer{gap:var(--size-2);padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0;justify-content:flex-end;display:flex}.header[hidden],.footer[hidden],.close-btn[hidden]{display:none}.close-btn{all:unset;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.close-btn:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:auto}.close-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.close-btn:hover{color:var(--color-contrast-800);background:var(--color-contrast-200)}.close-btn:active{opacity:.8}.drag-handle{z-index:10;pointer-events:all;touch-action:none;cursor:grab;position:absolute}.drag-handle:active{cursor:grabbing}:host([placement=left]) .drag-handle,:host(:not([placement])) .drag-handle,:host([placement=right]) .drag-handle{width:var(--_panel-bleed);height:3.5rem;top:50%;translate:0 -50%}:host([placement=left]) .drag-handle{right:calc(var(--_panel-bleed) * -1)}:host([placement=right]) .drag-handle,:host(:not([placement])) .drag-handle{left:calc(var(--_panel-bleed) * -1)}:host([placement=top]) .drag-handle,:host([placement=bottom]) .drag-handle{width:3.5rem;height:var(--_panel-bleed);left:50%;translate:-50%}:host([placement=top]) .drag-handle{bottom:calc(var(--_panel-bleed) * -1)}:host([placement=bottom]) .drag-handle{top:calc(var(--_panel-bleed) * -1)}:host([drag-handle-placement=inset][placement=left]) .drag-handle{right:var(--_drag-handle-inset)}:host([drag-handle-placement=inset][placement=right]) .drag-handle,:host([drag-handle-placement=inset]:not([placement])) .drag-handle{left:var(--_drag-handle-inset)}:host([drag-handle-placement=inset][placement=top]) .drag-handle{bottom:var(--_drag-handle-inset)}:host([drag-handle-placement=inset][placement=bottom]) .drag-handle{top:var(--_drag-handle-inset)}.drag-handle:before{content:"";background:var(--color-contrast-400);border-radius:var(--rounded-full);opacity:.6;transition:background var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);position:absolute;inset:50%;translate:-50% -50%}:host([placement=left]) .drag-handle:before,:host([placement=right]) .drag-handle:before,:host(:not([placement])) .drag-handle:before{width:5px;height:2.5rem}:host([placement=top]) .drag-handle:before,:host([placement=bottom]) .drag-handle:before{width:2.5rem;height:5px}.drag-handle:hover:before{background:var(--color-contrast-600);opacity:.9;transform:scale(1.15)}.close-btn:focus-visible{outline:var(--focus-ring)}@media (width<=640px){:host([placement=left]) .panel,:host(:not([placement])) .panel,:host([placement=right]) .panel{width:calc(min(var(--drawer-size,20rem), calc(100vw - var(--size-2))) + var(--_panel-bleed));max-width:calc(100vw - var(--size-2) + var(--_panel-bleed))}:host([placement=top]) .panel,:host([placement=bottom]) .panel{height:calc(min(var(--drawer-size,16rem), calc(100dvh - var(--size-2))) + var(--_panel-bleed));max-height:calc(100dvh - var(--size-2) + var(--_panel-bleed))}.header,.body,.footer{padding:var(--size-3)}}}@layer refine.config{:host([backdrop=blur]){--_backdrop-filter:blur(var(--blur-xs))}:host([backdrop=transparent]){--_backdrop-bg:transparent}}`;exports.default=e;
|
|
1
|
+
var e=`@layer refine.base{:host{--_backdrop-bg:var(--drawer-backdrop-bg,color-mix(in oklch, var(--color-canvas) 40%, transparent));--_backdrop-filter:none;--_panel-bg:var(--drawer-bg,var(--color-canvas));--_panel-blur:var(--drawer-panel-blur,var(--blur-md));--_panel-shadow:var(--drawer-shadow,var(--shadow-xl));--_panel-border-color:var(--color-divider);--_panel-bleed:var(--size-8);--_drag-handle-inset:calc(var(--size-1) * -1);display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display .2s allow-discrete, overlay .2s allow-discrete;display:flex;position:fixed;inset:0}dialog:not([open]),dialog:not([open]) .panel{display:none}dialog[open]{pointer-events:auto;display:flex}dialog::-ms-backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:display .2s allow-discrete, overlay .2s allow-discrete, opacity var(--transition-normal), backdrop-filter var(--transition-normal)}@starting-style{dialog::-ms-backdrop{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:display .2s allow-discrete, overlay .2s allow-discrete, opacity var(--transition-normal), backdrop-filter var(--transition-normal)}@starting-style{dialog::backdrop{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}}dialog.closing::-ms-backdrop{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur();transition:opacity .3s var(--ease-in-out), backdrop-filter .3s var(--ease-in-out), overlay .3s allow-discrete, display .3s allow-discrete}dialog.closing::backdrop{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur();transition:opacity .3s var(--ease-in-out), backdrop-filter .3s var(--ease-in-out), overlay .3s allow-discrete, display .3s allow-discrete}.panel{box-sizing:border-box;background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);box-shadow:var(--_panel-shadow);opacity:1;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity var(--transition-normal), transform .3s var(--ease-move);flex-direction:column;display:flex;position:absolute;overflow:visible;transform:translate(0)}@starting-style{.panel{opacity:0;transform:var(--_panel-exit-transform,translate3d(0, 0, 0))}}dialog.closing .panel{opacity:0;transform:var(--_panel-exit-transform,translate3d(0, 0, 0))}:host([placement=left]) .panel{--_panel-exit-transform:translateX(calc(-100% - var(--_panel-bleed)));width:calc(var(--drawer-size,20rem) + var(--_panel-bleed));max-width:calc(100dvw + var(--_panel-bleed));border-top:none;border-bottom:none;top:0;bottom:0}:host([placement=left]) .panel:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:calc(var(--_panel-bleed) * -1);padding-left:var(--_panel-bleed);border-left:none;left:0}:host([placement=left]) .panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:calc(var(--_panel-bleed) * -1);padding-right:var(--_panel-bleed);border-right:none;right:0}:host(:not([placement])) .panel{--_panel-exit-transform:translateX(calc(100% + var(--_panel-bleed)));width:calc(var(--drawer-size,20rem) + var(--_panel-bleed));max-width:calc(100dvw + var(--_panel-bleed));border-top:none;border-bottom:none;top:0;bottom:0}:host(:not([placement])) .panel:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:calc(var(--_panel-bleed) * -1);padding-right:var(--_panel-bleed);border-right:none;right:0}:host(:not([placement])) .panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:calc(var(--_panel-bleed) * -1);padding-left:var(--_panel-bleed);border-left:none;left:0}:host([placement=right]) .panel{--_panel-exit-transform:translateX(calc(100% + var(--_panel-bleed)));width:calc(var(--drawer-size,20rem) + var(--_panel-bleed));max-width:calc(100dvw + var(--_panel-bleed));border-top:none;border-bottom:none;top:0;bottom:0}:host([placement=right]) .panel:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:calc(var(--_panel-bleed) * -1);padding-right:var(--_panel-bleed);border-right:none;right:0}:host([placement=right]) .panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:calc(var(--_panel-bleed) * -1);padding-left:var(--_panel-bleed);border-left:none;left:0}:host([placement=top]) .panel{--_panel-exit-transform:translateY(calc(-100% - var(--_panel-bleed)));height:calc(var(--drawer-size,16rem) + var(--_panel-bleed));max-height:calc(100dvh + var(--_panel-bleed));margin-top:calc(var(--_panel-bleed) * -1);padding-top:var(--_panel-bleed);border-top:none;border-left:none;border-right:none;top:0;left:0;right:0}:host([placement=bottom]) .panel{--_panel-exit-transform:translateY(calc(100% + var(--_panel-bleed)));height:calc(var(--drawer-size,16rem) + var(--_panel-bleed));max-height:calc(100dvh + var(--_panel-bleed));margin-bottom:calc(var(--_panel-bleed) * -1);padding-bottom:var(--_panel-bleed);border-bottom:none;border-left:none;border-right:none;bottom:0;left:0;right:0}:host(:dir(rtl)[placement=left]) .panel{--_panel-exit-transform:translateX(calc(100% + var(--_panel-bleed)))}:host(:dir(rtl)[placement=right]) .panel,:host(:dir(rtl):not([placement])) .panel{--_panel-exit-transform:translateX(calc(-100% - var(--_panel-bleed)))}:host([size=sm]){--drawer-size:14rem}:host([size=lg]){--drawer-size:32rem}:host([size=full]){--drawer-size:100%}:host([size=full]) .panel{width:calc(100% + var(--_panel-bleed));max-width:none;height:calc(100% + var(--_panel-bleed));border:none;max-height:none}.header{gap:var(--size-2);padding:var(--size-4);border-bottom:var(--border) solid var(--color-contrast-200);flex-shrink:0;align-items:center;display:flex}.header-title{text-overflow:ellipsis;min-width:0;font-size:var(--text-lg);font-weight:var(--font-semibold);white-space:nowrap;flex:1;overflow:hidden}.body{padding:var(--size-4);flex:1;overflow-y:auto}.footer{gap:var(--size-2);padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0;justify-content:flex-end;display:flex}.header[hidden],.footer[hidden],.close-btn[hidden]{display:none}.close-btn{all:unset;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.close-btn:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.close-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.close-btn:hover{color:var(--color-contrast-800);background:var(--color-contrast-200)}.close-btn:active{opacity:.8}.drag-handle{z-index:10;pointer-events:all;touch-action:none;cursor:grab;position:absolute}.drag-handle:active{cursor:grabbing}:host([placement=left]) .drag-handle,:host(:not([placement])) .drag-handle,:host([placement=right]) .drag-handle{width:var(--_panel-bleed);height:3.5rem;top:50%;translate:0 -50%}:host([placement=left]) .drag-handle{right:calc(var(--_panel-bleed) * -1)}:host([placement=right]) .drag-handle,:host(:not([placement])) .drag-handle{left:calc(var(--_panel-bleed) * -1)}:host([placement=top]) .drag-handle,:host([placement=bottom]) .drag-handle{width:3.5rem;height:var(--_panel-bleed);left:50%;translate:-50%}:host([placement=top]) .drag-handle{bottom:calc(var(--_panel-bleed) * -1)}:host([placement=bottom]) .drag-handle{top:calc(var(--_panel-bleed) * -1)}:host([drag-handle-placement=inset][placement=left]) .drag-handle{right:var(--_drag-handle-inset)}:host([drag-handle-placement=inset][placement=right]) .drag-handle,:host([drag-handle-placement=inset]:not([placement])) .drag-handle{left:var(--_drag-handle-inset)}:host([drag-handle-placement=inset][placement=top]) .drag-handle{bottom:var(--_drag-handle-inset)}:host([drag-handle-placement=inset][placement=bottom]) .drag-handle{top:var(--_drag-handle-inset)}.drag-handle:before{content:"";background:var(--color-contrast-400);border-radius:var(--rounded-full);opacity:.6;transition:background var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);position:absolute;inset:50%;translate:-50% -50%}:host([placement=left]) .drag-handle:before,:host([placement=right]) .drag-handle:before,:host(:not([placement])) .drag-handle:before{width:5px;height:2.5rem}:host([placement=top]) .drag-handle:before,:host([placement=bottom]) .drag-handle:before{width:2.5rem;height:5px}.drag-handle:hover:before{background:var(--color-contrast-600);opacity:.9;transform:scale(1.15)}.close-btn:focus-visible{outline:var(--focus-ring)}@media (width<=640px){:host([placement=left]) .panel,:host(:not([placement])) .panel,:host([placement=right]) .panel{width:calc(min(var(--drawer-size,20rem), calc(100vw - var(--size-2))) + var(--_panel-bleed));max-width:calc(100vw - var(--size-2) + var(--_panel-bleed))}:host([placement=top]) .panel,:host([placement=bottom]) .panel{height:calc(min(var(--drawer-size,16rem), calc(100dvh - var(--size-2))) + var(--_panel-bleed));max-height:calc(100dvh - var(--size-2) + var(--_panel-bleed))}.header,.body,.footer{padding:var(--size-3)}}}@layer refine.config{:host([backdrop=blur]){--_backdrop-filter:blur(var(--blur-xs))}:host([backdrop=transparent]){--_backdrop-bg:transparent}}`;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=drawer.css.cjs.map
|