@vielzeug/refine 1.5.4 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion.cjs +1 -1
- package/dist/accordion.cjs.map +1 -1
- package/dist/accordion.js +30 -28
- package/dist/accordion.js.map +1 -1
- package/dist/async.cjs +11 -11
- package/dist/async.cjs.map +1 -1
- package/dist/async.js +1 -2
- package/dist/async.js.map +1 -1
- package/dist/button-group.cjs.map +1 -1
- package/dist/button-group.js.map +1 -1
- package/dist/button.cjs +1 -1
- package/dist/button.cjs.map +1 -1
- package/dist/button.js +1 -0
- package/dist/button.js.map +1 -1
- package/dist/calendar.cjs +26 -26
- package/dist/calendar.cjs.map +1 -1
- package/dist/calendar.js +4 -5
- package/dist/calendar.js.map +1 -1
- package/dist/checkbox-group.cjs +9 -9
- package/dist/checkbox-group.cjs.map +1 -1
- package/dist/checkbox-group.js +50 -58
- package/dist/checkbox-group.js.map +1 -1
- package/dist/code-window.cjs +4 -4
- package/dist/code-window.cjs.map +1 -1
- package/dist/code-window.js +1 -2
- package/dist/code-window.js.map +1 -1
- package/dist/combobox.cjs +29 -28
- package/dist/combobox.cjs.map +1 -1
- package/dist/combobox.js +201 -195
- package/dist/combobox.js.map +1 -1
- package/dist/command-palette.cjs +6 -6
- package/dist/command-palette.cjs.map +1 -1
- package/dist/command-palette.js +46 -47
- package/dist/command-palette.js.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/chat-message/chat-message.css.cjs +1 -1
- package/dist/content/chat-message/chat-message.css.cjs.map +1 -1
- package/dist/content/chat-message/chat-message.css.js +1 -1
- package/dist/content/chat-message/chat-message.css.js.map +1 -1
- package/dist/content/code-window/code-window.d.ts.map +1 -1
- package/dist/content/icon/icon.d.ts.map +1 -1
- package/dist/content/index.d.ts +4 -0
- package/dist/content/index.d.ts.map +1 -1
- package/dist/content/list/_list-item-reveal.cjs +2 -0
- package/dist/content/list/_list-item-reveal.cjs.map +1 -0
- package/dist/content/list/_list-item-reveal.d.ts +25 -0
- package/dist/content/list/_list-item-reveal.d.ts.map +1 -0
- package/dist/content/list/_list-item-reveal.js +33 -0
- package/dist/content/list/_list-item-reveal.js.map +1 -0
- package/dist/content/list/list-item.css.cjs +2 -0
- package/dist/content/list/list-item.css.cjs.map +1 -0
- package/dist/content/list/list-item.css.js +6 -0
- package/dist/content/list/list-item.css.js.map +1 -0
- package/dist/content/list/list-item.d.ts +111 -0
- package/dist/content/list/list-item.d.ts.map +1 -0
- package/dist/content/list/list.css.cjs +2 -0
- package/dist/content/list/list.css.cjs.map +1 -0
- package/dist/content/list/list.css.js +6 -0
- package/dist/content/list/list.css.js.map +1 -0
- package/dist/content/list/list.d.ts +93 -0
- package/dist/content/list/list.d.ts.map +1 -0
- package/dist/custom-elements.json +5693 -5090
- package/dist/datagrid.cjs +2 -2
- package/dist/datagrid.js +206 -206
- package/dist/datagrid.js.map +1 -1
- package/dist/date-picker.cjs +2 -1
- package/dist/date-picker.cjs.map +1 -1
- package/dist/date-picker.js +2 -0
- package/dist/date-picker.js.map +1 -1
- package/dist/disclosure/tab-item/tab-item.d.ts.map +1 -1
- package/dist/disclosure/tabs/tabs.d.ts.map +1 -1
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.cjs.map +1 -1
- package/dist/drawer.js +47 -48
- package/dist/drawer.js.map +1 -1
- package/dist/feedback/async/async.d.ts.map +1 -1
- package/dist/feedback/progress/progress.d.ts.map +1 -1
- package/dist/file-input.cjs +108 -42
- package/dist/file-input.cjs.map +1 -1
- package/dist/file-input.js +215 -156
- package/dist/file-input.js.map +1 -1
- package/dist/headless/aria-reflection.cjs +2 -0
- package/dist/headless/aria-reflection.cjs.map +1 -0
- package/dist/headless/aria-reflection.d.ts +27 -0
- package/dist/headless/aria-reflection.d.ts.map +1 -0
- package/dist/headless/aria-reflection.js +18 -0
- package/dist/headless/aria-reflection.js.map +1 -0
- package/dist/headless/checkable.cjs +1 -1
- package/dist/headless/checkable.cjs.map +1 -1
- package/dist/headless/checkable.d.ts +2 -10
- package/dist/headless/checkable.d.ts.map +1 -1
- package/dist/headless/checkable.js +29 -29
- package/dist/headless/checkable.js.map +1 -1
- package/dist/headless/choice-field.cjs +1 -1
- package/dist/headless/choice-field.cjs.map +1 -1
- package/dist/headless/choice-field.d.ts +2 -7
- package/dist/headless/choice-field.d.ts.map +1 -1
- package/dist/headless/choice-field.js +37 -37
- package/dist/headless/choice-field.js.map +1 -1
- package/dist/headless/field-base.cjs +1 -1
- package/dist/headless/field-base.cjs.map +1 -1
- package/dist/headless/field-base.d.ts +17 -0
- package/dist/headless/field-base.d.ts.map +1 -1
- package/dist/headless/field-base.js +21 -6
- package/dist/headless/field-base.js.map +1 -1
- package/dist/headless/focus.cjs +1 -1
- package/dist/headless/focus.cjs.map +1 -1
- package/dist/headless/focus.d.ts +7 -0
- package/dist/headless/focus.d.ts.map +1 -1
- package/dist/headless/focus.js +6 -6
- package/dist/headless/focus.js.map +1 -1
- package/dist/headless/index.d.ts +4 -2
- package/dist/headless/index.d.ts.map +1 -1
- package/dist/headless/nav.cjs +1 -1
- package/dist/headless/nav.cjs.map +1 -1
- package/dist/headless/nav.d.ts +12 -0
- package/dist/headless/nav.d.ts.map +1 -1
- package/dist/headless/nav.js +68 -50
- package/dist/headless/nav.js.map +1 -1
- package/dist/headless/overlay.cjs +1 -1
- package/dist/headless/overlay.cjs.map +1 -1
- package/dist/headless/overlay.d.ts +2 -0
- package/dist/headless/overlay.d.ts.map +1 -1
- package/dist/headless/overlay.js +8 -5
- package/dist/headless/overlay.js.map +1 -1
- package/dist/headless/ref-callback.cjs +2 -0
- package/dist/headless/ref-callback.cjs.map +1 -0
- package/dist/headless/ref-callback.d.ts +26 -0
- package/dist/headless/ref-callback.d.ts.map +1 -0
- package/dist/headless/ref-callback.js +13 -0
- package/dist/headless/ref-callback.js.map +1 -0
- package/dist/headless/swipe.cjs +1 -1
- package/dist/headless/swipe.cjs.map +1 -1
- package/dist/headless/swipe.d.ts +2 -0
- package/dist/headless/swipe.d.ts.map +1 -1
- package/dist/headless/swipe.js +26 -21
- package/dist/headless/swipe.js.map +1 -1
- package/dist/headless.cjs +1 -1
- package/dist/headless.js +28 -26
- package/dist/icon.cjs +1 -1
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.js +35 -38
- package/dist/icon.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +63 -61
- package/dist/input.cjs +29 -26
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +91 -79
- package/dist/input.js.map +1 -1
- package/dist/inputs/button/button.css.cjs +1 -1
- package/dist/inputs/button/button.css.cjs.map +1 -1
- package/dist/inputs/button/button.css.js +1 -1
- package/dist/inputs/button/button.css.js.map +1 -1
- package/dist/inputs/button/button.d.ts +8 -0
- package/dist/inputs/button/button.d.ts.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.cjs.map +1 -1
- package/dist/inputs/checkbox/checkbox.css.js +1 -1
- package/dist/inputs/checkbox/checkbox.css.js.map +1 -1
- package/dist/inputs/combobox/combobox.d.ts +1 -0
- package/dist/inputs/combobox/combobox.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 +6 -0
- package/dist/inputs/date-picker/date-picker.d.ts.map +1 -1
- package/dist/inputs/file-input/file-input-upload.cjs +2 -0
- package/dist/inputs/file-input/file-input-upload.cjs.map +1 -0
- package/dist/inputs/file-input/file-input-upload.d.ts +76 -0
- package/dist/inputs/file-input/file-input-upload.d.ts.map +1 -0
- package/dist/inputs/file-input/file-input-upload.js +145 -0
- package/dist/inputs/file-input/file-input-upload.js.map +1 -0
- package/dist/inputs/file-input/file-input.css.cjs +1 -1
- package/dist/inputs/file-input/file-input.css.cjs.map +1 -1
- package/dist/inputs/file-input/file-input.css.js +1 -1
- package/dist/inputs/file-input/file-input.css.js.map +1 -1
- package/dist/inputs/file-input/file-input.d.ts +54 -1
- package/dist/inputs/file-input/file-input.d.ts.map +1 -1
- package/dist/inputs/input/input.css.cjs +1 -1
- package/dist/inputs/input/input.css.cjs.map +1 -1
- package/dist/inputs/input/input.css.js +1 -1
- package/dist/inputs/input/input.css.js.map +1 -1
- package/dist/inputs/input/input.d.ts +13 -0
- 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.cjs.map +1 -1
- package/dist/inputs/message-composer/message-composer.css.js +1 -1
- package/dist/inputs/message-composer/message-composer.css.js.map +1 -1
- package/dist/inputs/message-composer/message-composer.d.ts +7 -0
- package/dist/inputs/message-composer/message-composer.d.ts.map +1 -1
- package/dist/inputs/number-input/number-input.css.cjs +1 -1
- package/dist/inputs/number-input/number-input.css.cjs.map +1 -1
- package/dist/inputs/number-input/number-input.css.js +1 -1
- package/dist/inputs/number-input/number-input.css.js.map +1 -1
- package/dist/inputs/number-input/number-input.d.ts +15 -0
- package/dist/inputs/number-input/number-input.d.ts.map +1 -1
- package/dist/inputs/otp-input/otp-input.css.cjs +1 -1
- package/dist/inputs/otp-input/otp-input.css.cjs.map +1 -1
- package/dist/inputs/otp-input/otp-input.css.js +1 -1
- package/dist/inputs/otp-input/otp-input.css.js.map +1 -1
- package/dist/inputs/radio/radio.d.ts.map +1 -1
- package/dist/inputs/select/select.d.ts +1 -0
- package/dist/inputs/select/select.d.ts.map +1 -1
- package/dist/inputs/shared/index.d.ts +1 -1
- package/dist/inputs/shared/index.d.ts.map +1 -1
- package/dist/inputs/shared/templates.cjs +26 -3
- package/dist/inputs/shared/templates.cjs.map +1 -1
- package/dist/inputs/shared/templates.d.ts +20 -0
- package/dist/inputs/shared/templates.d.ts.map +1 -1
- package/dist/inputs/shared/templates.js +29 -5
- package/dist/inputs/shared/templates.js.map +1 -1
- package/dist/inputs/switch/switch.css.cjs +1 -1
- package/dist/inputs/switch/switch.css.cjs.map +1 -1
- package/dist/inputs/switch/switch.css.js +1 -1
- package/dist/inputs/switch/switch.css.js.map +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.cjs.map +1 -1
- package/dist/inputs/textarea/textarea.css.js +1 -1
- package/dist/inputs/textarea/textarea.css.js.map +1 -1
- package/dist/inputs/textarea/textarea.d.ts +14 -0
- 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 +6 -0
- package/dist/inputs/time-picker/time-picker.d.ts.map +1 -1
- package/dist/list-item.cjs +22 -0
- package/dist/list-item.cjs.map +1 -0
- package/dist/list-item.js +91 -0
- package/dist/list-item.js.map +1 -0
- package/dist/list.cjs +2 -0
- package/dist/list.cjs.map +1 -0
- package/dist/list.js +64 -0
- package/dist/list.js.map +1 -0
- package/dist/menu.cjs +4 -4
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.js +60 -59
- package/dist/menu.js.map +1 -1
- package/dist/message-composer.cjs +14 -20
- package/dist/message-composer.cjs.map +1 -1
- package/dist/message-composer.js +63 -64
- package/dist/message-composer.js.map +1 -1
- package/dist/number-input.cjs +5 -3
- package/dist/number-input.cjs.map +1 -1
- package/dist/number-input.js +8 -4
- package/dist/number-input.js.map +1 -1
- package/dist/otp-input.cjs +9 -9
- package/dist/otp-input.cjs.map +1 -1
- package/dist/otp-input.js +70 -62
- package/dist/otp-input.js.map +1 -1
- package/dist/overlay/menu/menu-item.css.cjs +1 -1
- package/dist/overlay/menu/menu-item.css.cjs.map +1 -1
- package/dist/overlay/menu/menu-item.css.js +1 -1
- package/dist/overlay/menu/menu-item.css.js.map +1 -1
- package/dist/overlay/menu/menu-separator.css.cjs +1 -1
- package/dist/overlay/menu/menu-separator.css.cjs.map +1 -1
- package/dist/overlay/menu/menu-separator.css.js +1 -1
- package/dist/overlay/menu/menu-separator.css.js.map +1 -1
- package/dist/overlay/menu/menu.css.cjs +1 -1
- package/dist/overlay/menu/menu.css.cjs.map +1 -1
- package/dist/overlay/menu/menu.css.js +1 -1
- package/dist/overlay/menu/menu.css.js.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 +7 -6
- package/dist/overlay/shared/use-dialog.js.map +1 -1
- package/dist/progress.cjs +13 -13
- package/dist/progress.cjs.map +1 -1
- package/dist/progress.js +3 -4
- package/dist/progress.js.map +1 -1
- package/dist/radio-group.cjs +11 -11
- package/dist/radio-group.cjs.map +1 -1
- package/dist/radio-group.js +63 -70
- package/dist/radio-group.js.map +1 -1
- package/dist/radio.cjs +4 -4
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.js +58 -58
- package/dist/radio.js.map +1 -1
- package/dist/rating.cjs.map +1 -1
- package/dist/rating.js.map +1 -1
- package/dist/refine.cjs +502 -309
- package/dist/refine.cjs.map +1 -1
- package/dist/refine.iife.js +562 -369
- package/dist/refine.iife.js.map +1 -1
- package/dist/refine.js +558 -365
- package/dist/refine.js.map +1 -1
- package/dist/select.cjs +21 -21
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +135 -127
- package/dist/select.js.map +1 -1
- package/dist/shared/size-presets.cjs +1 -1
- package/dist/shared/size-presets.cjs.map +1 -1
- package/dist/shared/size-presets.d.ts +74 -0
- package/dist/shared/size-presets.d.ts.map +1 -1
- package/dist/shared/size-presets.js +48 -1
- package/dist/shared/size-presets.js.map +1 -1
- package/dist/shared/types.d.ts +5 -0
- package/dist/shared/types.d.ts.map +1 -1
- package/dist/styles/index.cjs +1 -1
- package/dist/styles/index.cjs.map +1 -1
- package/dist/styles/index.d.ts +1 -0
- package/dist/styles/index.d.ts.map +1 -1
- package/dist/styles/index.js +5 -4
- package/dist/styles/index.js.map +1 -1
- package/dist/styles/mixins/field-variants.css.cjs +85 -0
- package/dist/styles/mixins/field-variants.css.cjs.map +1 -0
- package/dist/styles/mixins/field-variants.css.d.ts +66 -0
- package/dist/styles/mixins/field-variants.css.d.ts.map +1 -0
- package/dist/styles/mixins/field-variants.css.js +90 -0
- package/dist/styles/mixins/field-variants.css.js.map +1 -0
- package/dist/switch.cjs +3 -3
- package/dist/switch.cjs.map +1 -1
- package/dist/switch.js +38 -36
- package/dist/switch.js.map +1 -1
- package/dist/tab-item.cjs +8 -8
- package/dist/tab-item.cjs.map +1 -1
- package/dist/tab-item.js +38 -28
- package/dist/tab-item.js.map +1 -1
- package/dist/tab-panel.cjs +7 -7
- package/dist/tab-panel.cjs.map +1 -1
- package/dist/tab-panel.js +33 -26
- package/dist/tab-panel.js.map +1 -1
- package/dist/tabs.cjs +4 -4
- package/dist/tabs.cjs.map +1 -1
- package/dist/tabs.js +64 -60
- package/dist/tabs.js.map +1 -1
- package/dist/testing/index.d.ts +15 -60
- package/dist/testing/index.d.ts.map +1 -1
- package/dist/testing.cjs +1 -1
- package/dist/testing.cjs.map +1 -1
- package/dist/testing.js +7 -24
- package/dist/testing.js.map +1 -1
- package/dist/textarea.cjs +15 -18
- package/dist/textarea.cjs.map +1 -1
- package/dist/textarea.js +83 -74
- package/dist/textarea.js.map +1 -1
- package/dist/time-picker.cjs +34 -31
- package/dist/time-picker.cjs.map +1 -1
- package/dist/time-picker.js +121 -109
- package/dist/time-picker.js.map +1 -1
- package/package.json +22 -9
- package/dist/headless/dialog-focus.cjs +0 -2
- package/dist/headless/dialog-focus.cjs.map +0 -1
- package/dist/headless/dialog-focus.d.ts +0 -40
- package/dist/headless/dialog-focus.d.ts.map +0 -1
- package/dist/headless/dialog-focus.js +0 -22
- package/dist/headless/dialog-focus.js.map +0 -1
- package/dist/headless/focus-trap.cjs +0 -2
- package/dist/headless/focus-trap.cjs.map +0 -1
- package/dist/headless/focus-trap.d.ts +0 -45
- package/dist/headless/focus-trap.d.ts.map +0 -1
- package/dist/headless/focus-trap.js +0 -51
- package/dist/headless/focus-trap.js.map +0 -1
- package/dist/keymap/dist/_dev.cjs +0 -2
- package/dist/keymap/dist/_dev.cjs.map +0 -1
- package/dist/keymap/dist/_dev.js +0 -4
- package/dist/keymap/dist/_dev.js.map +0 -1
- package/dist/keymap/dist/format.cjs +0 -1
- package/dist/keymap/dist/format.js +0 -1
- package/dist/keymap/dist/index.cjs +0 -1
- package/dist/keymap/dist/index.js +0 -4
- package/dist/keymap/dist/keymap.cjs +0 -2
- package/dist/keymap/dist/keymap.cjs.map +0 -1
- package/dist/keymap/dist/keymap.js +0 -221
- package/dist/keymap/dist/keymap.js.map +0 -1
- package/dist/keymap/dist/layer.cjs +0 -1
- package/dist/keymap/dist/layer.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.css.cjs","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--button-bg, var(--color-contrast-100));\n --_color: var(--button-color, var(--color-contrast-900));\n --_border-color: var(--button-border-color, var(--color-contrast-300));\n --_radius: var(--button-radius, var(--rounded-lg));\n\n display: inline-flex;\n align-items: center;\n justify-content: var(--button-justify, center);\n }\n\n /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n :host([disabled]) a,\n :host([loading]) a {\n pointer-events: none;\n cursor: not-allowed;\n }\n\n :host([loading]) a {\n cursor: wait;\n }\n\n [part='button'] {\n position: relative;\n box-sizing: border-box;\n display: flex;\n gap: var(--_gap, var(--size-2));\n align-items: center;\n justify-content: var(--button-justify, center);\n width: 100%;\n min-width: 0;\n height: var(--_height, var(--size-10));\n min-height: var(--_touch-target);\n padding: var(--_padding, var(--size-2) var(--size-4));\n font-size: var(--_font-size, var(--text-sm));\n font-weight: var(--font-medium);\n line-height: var(--_line-height, var(--leading-normal));\n color: var(--_color);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n background: var(--_bg);\n border: var(--button-border, var(--border)) solid var(--_border-color);\n border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n border-radius: var(--_radius);\n transition: var(\n --_motion-transition,\n background var(--transition-normal),\n border-color var(--transition-normal),\n box-shadow var(--transition-normal),\n color var(--transition-normal),\n transform 120ms var(--ease-spring)\n );\n }\n\n [part='button']:focus-visible {\n outline: none;\n }\n\n /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .loader {\n position: absolute;\n width: 1em;\n height: 1em;\n border: var(--border-2) solid currentcolor;\n border-inline-end-color: transparent;\n border-radius: 50%;\n animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n }\n\n .content {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: middle;\n white-space: nowrap;\n }\n\n ::slotted([slot='prefix']),\n ::slotted([slot='suffix']) {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n\n ::slotted(svg) {\n flex-shrink: 0;\n width: var(--_icon-size, var(--leading-6));\n height: var(--_icon-size, var(--leading-6));\n }\n}\n\n@layer refine.overrides {\n :host([fullwidth]) {\n display: flex;\n width: 100%;\n }\n\n /* Icon-only always uses perfect circle */\n :host([rounded][icon-only]) [part='button'] {\n border-radius: 50%;\n }\n\n :host([loading]) .content {\n visibility: hidden;\n }\n}\n\n@layer refine.variants {\n :host([icon-only]) [part='button'] {\n aspect-ratio: 1;\n padding: 0;\n }\n\n /* ── Per-variant token assignments ─────────────────────────────────────────\n Each variant sets --_bg/--_color/--_border-color (consuming the public\n --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n tokens for interactive states.\n The shared :is(button, a):hover / :active rules below read these tokens.\n ─────────────────────────────────────────────────────────────────────── */\n\n /* Solid (Default) */\n :host(:not([variant])),\n :host([variant='solid']) {\n --_bg: var(--button-bg, var(--_theme-base));\n --_color: var(--button-color, var(--_theme-contrast));\n --_border-color: var(--button-border-color, var(--_theme-base));\n --_hover-bg: var(--_theme-focus);\n --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n /* Flat */\n :host([variant='flat']) {\n --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n --_hover-bg: var(--_theme-focus);\n --_hover-color: var(--_theme-contrast);\n --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n :host([variant='flat']) [part='button'] {\n box-shadow: var(--inset-shadow-2xs);\n }\n\n :host([variant='flat']) [part='button']:hover {\n box-shadow: var(--inset-shadow-xs);\n }\n\n :host([variant='flat']) [part='button']:active {\n box-shadow: var(--inset-shadow-sm);\n }\n\n /* Bordered */\n :host([variant='bordered']) {\n --_bg: var(--button-bg, var(--_theme-backdrop));\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, var(--_theme-border));\n --_hover-bg: var(--_theme-focus);\n --_hover-color: var(--_theme-contrast);\n --_hover-border-color: var(--_theme-focus);\n --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n :host([variant='bordered']) [part='button'] {\n box-shadow: var(--inset-shadow-xs);\n }\n\n :host([variant='bordered']) [part='button']:hover {\n box-shadow: var(--inset-shadow-xs);\n }\n\n :host([variant='bordered']) [part='button']:active {\n box-shadow: var(--inset-shadow-sm);\n }\n\n /* Outline */\n :host([variant='outline']) {\n --_bg: var(--button-bg, transparent);\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, var(--_theme-base));\n --_hover-bg: var(--_theme-backdrop);\n --_hover-border-color: var(--_theme-focus);\n --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n /* Ghost */\n :host([variant='ghost']) {\n --_bg: var(--button-bg, transparent);\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, transparent);\n --_hover-bg: var(--_theme-backdrop);\n --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n :host([variant='ghost']) [part='button'] {\n border-width: 0;\n }\n\n /* Text */\n :host([variant='text']) {\n --_bg: var(--button-bg, transparent);\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, transparent);\n --_hover-color: var(--_theme-focus);\n --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n }\n\n :host([variant='text']) [part='button'] {\n border-width: 0;\n }\n\n /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n :host([variant='frost']:not([color])) {\n --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n --_hover-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n );\n --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n --_active-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n );\n }\n\n :host([variant='frost'][color]) {\n --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n --_hover-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n );\n --_active-bg: var(\n --button-frost-active-bg,\n color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n );\n --_active-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n );\n }\n\n /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n [part='button']:hover {\n color: var(--_hover-color, var(--_color));\n background: var(--_hover-bg, var(--_bg));\n border-color: var(--_hover-border-color, var(--_border-color));\n }\n\n [part='button']:active {\n color: var(--_active-color, var(--_color));\n background: var(--_active-bg, var(--_bg));\n border-color: var(--_active-border-color, var(--_border-color));\n box-shadow: var(--inset-shadow-2xs);\n }\n}\n\n@layer refine.overrides {\n /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n [part='button']:focus-visible {\n outline: none;\n box-shadow: var(--_theme-shadow), var(--_theme-halo);\n }\n\n /* Hover depth — halo border effect matching ore-input focus style */\n [part='button']:hover,\n [part='button']:active {\n border-color: var(--_hover-border-color, var(--_theme-focus));\n box-shadow: var(--_theme-shadow), var(--_theme-halo);\n }\n\n /* Ghost + Text variants: no border/shadow decoration on hover */\n :host([variant='ghost']) [part='button']:hover,\n :host([variant='text']) [part='button']:hover {\n border-color: transparent;\n box-shadow: none;\n transform: none;\n }\n\n /* ...nor on :active — stay borderless even though the shared rule above now\n adds a halo to :active too (physical press transform below still applies,\n this only cancels border-color/box-shadow). */\n :host([variant='ghost']) [part='button']:active,\n :host([variant='text']) [part='button']:active {\n border-color: transparent;\n box-shadow: none;\n }\n\n /* Physical press feedback */\n [part='button']:active {\n transform: translateY(1px);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"button.css.cjs","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--button-bg, var(--color-contrast-100));\n --_color: var(--button-color, var(--color-contrast-900));\n --_border-color: var(--button-border-color, var(--color-contrast-300));\n --_radius: var(--button-radius, var(--rounded-lg));\n\n display: inline-flex;\n align-items: center;\n justify-content: var(--button-justify, center);\n }\n\n /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n :host([disabled]) a,\n :host([loading]) a {\n pointer-events: none;\n cursor: not-allowed;\n }\n\n :host([loading]) a {\n cursor: wait;\n }\n\n [part='button'] {\n position: relative;\n box-sizing: border-box;\n display: flex;\n gap: var(--_gap, var(--size-2));\n align-items: center;\n justify-content: var(--button-justify, center);\n width: 100%;\n min-width: 0;\n height: var(--_height, var(--size-10));\n min-height: var(--_touch-target);\n padding: var(--_padding, var(--size-2) var(--size-4));\n font-size: var(--_font-size, var(--text-sm));\n font-weight: var(--font-medium);\n line-height: var(--_line-height, var(--leading-normal));\n color: var(--_color);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n background: var(--_bg);\n border: var(--button-border, var(--border)) solid var(--_border-color);\n border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n border-radius: var(--_radius);\n transition: var(\n --_motion-transition,\n background var(--transition-normal),\n border-color var(--transition-normal),\n box-shadow var(--transition-normal),\n color var(--transition-normal),\n transform 120ms var(--ease-spring)\n );\n }\n\n [part='button']:focus-visible {\n outline: none;\n }\n\n /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .loader {\n position: absolute;\n width: 1em;\n height: 1em;\n border: var(--border-2) solid currentcolor;\n border-inline-end-color: transparent;\n border-radius: 50%;\n animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n }\n\n .content {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: middle;\n white-space: nowrap;\n }\n\n ::slotted([slot='prefix']),\n ::slotted([slot='suffix']) {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n\n ::slotted(svg) {\n flex-shrink: 0;\n width: var(--_icon-size, var(--leading-6));\n height: var(--_icon-size, var(--leading-6));\n }\n}\n\n@layer refine.overrides {\n :host([fullwidth]) {\n display: flex;\n width: 100%;\n }\n\n /* `[part='button']`'s own height otherwise comes from the fixed size-preset var\n (`--_height`, default `--size-10`) — overriding just the host's own box height (e.g. via an\n external `height: 100%` from a swipe-action panel container) stretches an invisible wrapper\n without moving the visible button surface at all. Both declarations are needed. */\n :host([fullheight]) {\n display: flex;\n height: 100%;\n }\n\n :host([fullheight]) [part='button'] {\n height: 100%;\n }\n\n /* Icon-only always uses perfect circle */\n :host([rounded][icon-only]) [part='button'] {\n border-radius: 50%;\n }\n\n :host([loading]) .content {\n visibility: hidden;\n }\n}\n\n@layer refine.variants {\n :host([icon-only]) [part='button'] {\n aspect-ratio: 1;\n padding: 0;\n }\n\n /* ── Per-variant token assignments ─────────────────────────────────────────\n Each variant sets --_bg/--_color/--_border-color (consuming the public\n --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n tokens for interactive states.\n The shared :is(button, a):hover / :active rules below read these tokens.\n ─────────────────────────────────────────────────────────────────────── */\n\n /* Solid (Default) */\n :host(:not([variant])),\n :host([variant='solid']) {\n --_bg: var(--button-bg, var(--_theme-base));\n --_color: var(--button-color, var(--_theme-contrast));\n --_border-color: var(--button-border-color, var(--_theme-base));\n --_hover-bg: var(--_theme-focus);\n --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n /* Flat */\n :host([variant='flat']) {\n --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n --_hover-bg: var(--_theme-focus);\n --_hover-color: var(--_theme-contrast);\n --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n :host([variant='flat']) [part='button'] {\n box-shadow: var(--inset-shadow-2xs);\n }\n\n :host([variant='flat']) [part='button']:hover {\n box-shadow: var(--inset-shadow-xs);\n }\n\n :host([variant='flat']) [part='button']:active {\n box-shadow: var(--inset-shadow-sm);\n }\n\n /* Bordered */\n :host([variant='bordered']) {\n --_bg: var(--button-bg, var(--_theme-backdrop));\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, var(--_theme-border));\n --_hover-bg: var(--_theme-focus);\n --_hover-color: var(--_theme-contrast);\n --_hover-border-color: var(--_theme-focus);\n --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n :host([variant='bordered']) [part='button'] {\n box-shadow: var(--inset-shadow-xs);\n }\n\n :host([variant='bordered']) [part='button']:hover {\n box-shadow: var(--inset-shadow-xs);\n }\n\n :host([variant='bordered']) [part='button']:active {\n box-shadow: var(--inset-shadow-sm);\n }\n\n /* Outline */\n :host([variant='outline']) {\n --_bg: var(--button-bg, transparent);\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, var(--_theme-base));\n --_hover-bg: var(--_theme-backdrop);\n --_hover-border-color: var(--_theme-focus);\n --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n /* Ghost */\n :host([variant='ghost']) {\n --_bg: var(--button-bg, transparent);\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, transparent);\n --_hover-bg: var(--_theme-backdrop);\n --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n :host([variant='ghost']) [part='button'] {\n border-width: 0;\n }\n\n /* Text */\n :host([variant='text']) {\n --_bg: var(--button-bg, transparent);\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, transparent);\n --_hover-color: var(--_theme-focus);\n --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n }\n\n :host([variant='text']) [part='button'] {\n border-width: 0;\n }\n\n /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n :host([variant='frost']:not([color])) {\n --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n --_hover-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n );\n --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n --_active-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n );\n }\n\n :host([variant='frost'][color]) {\n --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n --_hover-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n );\n --_active-bg: var(\n --button-frost-active-bg,\n color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n );\n --_active-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n );\n }\n\n /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n [part='button']:hover {\n color: var(--_hover-color, var(--_color));\n background: var(--_hover-bg, var(--_bg));\n border-color: var(--_hover-border-color, var(--_border-color));\n }\n\n [part='button']:active {\n color: var(--_active-color, var(--_color));\n background: var(--_active-bg, var(--_bg));\n border-color: var(--_active-border-color, var(--_border-color));\n box-shadow: var(--inset-shadow-2xs);\n }\n}\n\n@layer refine.overrides {\n /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n [part='button']:focus-visible {\n outline: none;\n box-shadow: var(--_theme-shadow), var(--_theme-halo);\n }\n\n /* Hover depth — halo border effect matching ore-input focus style */\n [part='button']:hover,\n [part='button']:active {\n border-color: var(--_hover-border-color, var(--_theme-focus));\n box-shadow: var(--_theme-shadow), var(--_theme-halo);\n }\n\n /* Ghost + Text variants: no border/shadow decoration on hover */\n :host([variant='ghost']) [part='button']:hover,\n :host([variant='text']) [part='button']:hover {\n border-color: transparent;\n box-shadow: none;\n transform: none;\n }\n\n /* ...nor on :active — stay borderless even though the shared rule above now\n adds a halo to :active too (physical press transform below still applies,\n this only cancels border-color/box-shadow). */\n :host([variant='ghost']) [part='button']:active,\n :host([variant='text']) [part='button']:active {\n border-color: transparent;\n box-shadow: none;\n }\n\n /* Physical press feedback */\n [part='button']:active {\n transform: translateY(1px);\n }\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/inputs/button/button.css?inline
|
|
2
|
-
var e = "@layer refine.base{:host{--_bg:var(--button-bg,var(--color-contrast-100));--_color:var(--button-color,var(--color-contrast-900));--_border-color:var(--button-border-color,var(--color-contrast-300));--_radius:var(--button-radius,var(--rounded-lg));align-items:center;justify-content:var(--button-justify,center);display:inline-flex}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed}:host([loading]) a{cursor:wait}[part=button]{box-sizing:border-box;gap:var(--_gap,var(--size-2));align-items:center;justify-content:var(--button-justify,center);width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--_padding,var(--size-2) var(--size-4));font-size:var(--_font-size,var(--text-sm));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--button-border,var(--border)) solid var(--_border-color);border-top-width:var(--button-border-top,var(--button-border,var(--border)));border-bottom-width:var(--button-border-bottom,var(--button-border,var(--border)));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform .12s var(--ease-spring));display:flex;position:relative}[part=button]: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-left-width:var(--button-border-start,var(--button-border,var(--border)));border-right-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]: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-width:var(--button-border-start,var(--button-border,var(--border)));border-left-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:focus-visible{outline:none}@keyframes spin{to{transform:rotate(360deg)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;position:absolute}.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}.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}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([rounded][icon-only]) [part=button]{border-radius:50%}:host([loading]) .content{visibility:hidden}[part=button]:focus-visible{box-shadow:var(--_theme-shadow), var(--_theme-halo);outline:none}[part=button]:hover,[part=button]:active{border-color:var(--_hover-border-color,var(--_theme-focus));box-shadow:var(--_theme-shadow), var(--_theme-halo)}:host([variant=ghost]) [part=button]:hover,:host([variant=text]) [part=button]:hover{box-shadow:none;border-color:#0000;transform:none}:host([variant=ghost]) [part=button]:active,:host([variant=text]) [part=button]:active{box-shadow:none;border-color:#0000}[part=button]:active{transform:translateY(1px)}}@layer refine.variants{:host([icon-only]) [part=button]{aspect-ratio:1;padding:0}:host(:not([variant])),:host([variant=solid]){--_bg:var(--button-bg,var(--_theme-base));--_color:var(--button-color,var(--_theme-contrast));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]){--_bg:var(--button-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]) [part=button]{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]){--_bg:var(--button-bg,var(--_theme-backdrop));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-border));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=bordered]) [part=button],:host([variant=bordered]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=outline]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-backdrop);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-bg:var(--_theme-backdrop);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]) [part=button]{border-width:0}:host([variant=text]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-color:var(--_theme-focus);--_active-color:color-mix(in oklch, var(--_theme-focus) 85%, black)}:host([variant=text]) [part=button]{border-width:0}:host([variant=frost]:not([color])){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent))}:host([variant=frost][color]){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent))}[part=button]:hover{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}[part=button]:active{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));border-color:var(--_active-border-color,var(--_border-color));box-shadow:var(--inset-shadow-2xs)}}";
|
|
2
|
+
var e = "@layer refine.base{:host{--_bg:var(--button-bg,var(--color-contrast-100));--_color:var(--button-color,var(--color-contrast-900));--_border-color:var(--button-border-color,var(--color-contrast-300));--_radius:var(--button-radius,var(--rounded-lg));align-items:center;justify-content:var(--button-justify,center);display:inline-flex}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed}:host([loading]) a{cursor:wait}[part=button]{box-sizing:border-box;gap:var(--_gap,var(--size-2));align-items:center;justify-content:var(--button-justify,center);width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--_padding,var(--size-2) var(--size-4));font-size:var(--_font-size,var(--text-sm));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--button-border,var(--border)) solid var(--_border-color);border-top-width:var(--button-border-top,var(--button-border,var(--border)));border-bottom-width:var(--button-border-bottom,var(--button-border,var(--border)));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform .12s var(--ease-spring));display:flex;position:relative}[part=button]: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-left-width:var(--button-border-start,var(--button-border,var(--border)));border-right-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]: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-width:var(--button-border-start,var(--button-border,var(--border)));border-left-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:focus-visible{outline:none}@keyframes spin{to{transform:rotate(360deg)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;position:absolute}.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}.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}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullheight]){height:100%;display:flex}:host([fullheight]) [part=button]{height:100%}:host([rounded][icon-only]) [part=button]{border-radius:50%}:host([loading]) .content{visibility:hidden}[part=button]:focus-visible{box-shadow:var(--_theme-shadow), var(--_theme-halo);outline:none}[part=button]:hover,[part=button]:active{border-color:var(--_hover-border-color,var(--_theme-focus));box-shadow:var(--_theme-shadow), var(--_theme-halo)}:host([variant=ghost]) [part=button]:hover,:host([variant=text]) [part=button]:hover{box-shadow:none;border-color:#0000;transform:none}:host([variant=ghost]) [part=button]:active,:host([variant=text]) [part=button]:active{box-shadow:none;border-color:#0000}[part=button]:active{transform:translateY(1px)}}@layer refine.variants{:host([icon-only]) [part=button]{aspect-ratio:1;padding:0}:host(:not([variant])),:host([variant=solid]){--_bg:var(--button-bg,var(--_theme-base));--_color:var(--button-color,var(--_theme-contrast));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]){--_bg:var(--button-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]) [part=button]{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]){--_bg:var(--button-bg,var(--_theme-backdrop));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-border));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=bordered]) [part=button],:host([variant=bordered]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=outline]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-backdrop);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-bg:var(--_theme-backdrop);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]) [part=button]{border-width:0}:host([variant=text]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-color:var(--_theme-focus);--_active-color:color-mix(in oklch, var(--_theme-focus) 85%, black)}:host([variant=text]) [part=button]{border-width:0}:host([variant=frost]:not([color])){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent))}:host([variant=frost][color]){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent))}[part=button]:hover{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}[part=button]:active{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));border-color:var(--_active-border-color,var(--_border-color));box-shadow:var(--inset-shadow-2xs)}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.css.js","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--button-bg, var(--color-contrast-100));\n --_color: var(--button-color, var(--color-contrast-900));\n --_border-color: var(--button-border-color, var(--color-contrast-300));\n --_radius: var(--button-radius, var(--rounded-lg));\n\n display: inline-flex;\n align-items: center;\n justify-content: var(--button-justify, center);\n }\n\n /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n :host([disabled]) a,\n :host([loading]) a {\n pointer-events: none;\n cursor: not-allowed;\n }\n\n :host([loading]) a {\n cursor: wait;\n }\n\n [part='button'] {\n position: relative;\n box-sizing: border-box;\n display: flex;\n gap: var(--_gap, var(--size-2));\n align-items: center;\n justify-content: var(--button-justify, center);\n width: 100%;\n min-width: 0;\n height: var(--_height, var(--size-10));\n min-height: var(--_touch-target);\n padding: var(--_padding, var(--size-2) var(--size-4));\n font-size: var(--_font-size, var(--text-sm));\n font-weight: var(--font-medium);\n line-height: var(--_line-height, var(--leading-normal));\n color: var(--_color);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n background: var(--_bg);\n border: var(--button-border, var(--border)) solid var(--_border-color);\n border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n border-radius: var(--_radius);\n transition: var(\n --_motion-transition,\n background var(--transition-normal),\n border-color var(--transition-normal),\n box-shadow var(--transition-normal),\n color var(--transition-normal),\n transform 120ms var(--ease-spring)\n );\n }\n\n [part='button']:focus-visible {\n outline: none;\n }\n\n /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .loader {\n position: absolute;\n width: 1em;\n height: 1em;\n border: var(--border-2) solid currentcolor;\n border-inline-end-color: transparent;\n border-radius: 50%;\n animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n }\n\n .content {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: middle;\n white-space: nowrap;\n }\n\n ::slotted([slot='prefix']),\n ::slotted([slot='suffix']) {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n\n ::slotted(svg) {\n flex-shrink: 0;\n width: var(--_icon-size, var(--leading-6));\n height: var(--_icon-size, var(--leading-6));\n }\n}\n\n@layer refine.overrides {\n :host([fullwidth]) {\n display: flex;\n width: 100%;\n }\n\n /* Icon-only always uses perfect circle */\n :host([rounded][icon-only]) [part='button'] {\n border-radius: 50%;\n }\n\n :host([loading]) .content {\n visibility: hidden;\n }\n}\n\n@layer refine.variants {\n :host([icon-only]) [part='button'] {\n aspect-ratio: 1;\n padding: 0;\n }\n\n /* ── Per-variant token assignments ─────────────────────────────────────────\n Each variant sets --_bg/--_color/--_border-color (consuming the public\n --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n tokens for interactive states.\n The shared :is(button, a):hover / :active rules below read these tokens.\n ─────────────────────────────────────────────────────────────────────── */\n\n /* Solid (Default) */\n :host(:not([variant])),\n :host([variant='solid']) {\n --_bg: var(--button-bg, var(--_theme-base));\n --_color: var(--button-color, var(--_theme-contrast));\n --_border-color: var(--button-border-color, var(--_theme-base));\n --_hover-bg: var(--_theme-focus);\n --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n /* Flat */\n :host([variant='flat']) {\n --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n --_hover-bg: var(--_theme-focus);\n --_hover-color: var(--_theme-contrast);\n --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n :host([variant='flat']) [part='button'] {\n box-shadow: var(--inset-shadow-2xs);\n }\n\n :host([variant='flat']) [part='button']:hover {\n box-shadow: var(--inset-shadow-xs);\n }\n\n :host([variant='flat']) [part='button']:active {\n box-shadow: var(--inset-shadow-sm);\n }\n\n /* Bordered */\n :host([variant='bordered']) {\n --_bg: var(--button-bg, var(--_theme-backdrop));\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, var(--_theme-border));\n --_hover-bg: var(--_theme-focus);\n --_hover-color: var(--_theme-contrast);\n --_hover-border-color: var(--_theme-focus);\n --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n :host([variant='bordered']) [part='button'] {\n box-shadow: var(--inset-shadow-xs);\n }\n\n :host([variant='bordered']) [part='button']:hover {\n box-shadow: var(--inset-shadow-xs);\n }\n\n :host([variant='bordered']) [part='button']:active {\n box-shadow: var(--inset-shadow-sm);\n }\n\n /* Outline */\n :host([variant='outline']) {\n --_bg: var(--button-bg, transparent);\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, var(--_theme-base));\n --_hover-bg: var(--_theme-backdrop);\n --_hover-border-color: var(--_theme-focus);\n --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n /* Ghost */\n :host([variant='ghost']) {\n --_bg: var(--button-bg, transparent);\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, transparent);\n --_hover-bg: var(--_theme-backdrop);\n --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n :host([variant='ghost']) [part='button'] {\n border-width: 0;\n }\n\n /* Text */\n :host([variant='text']) {\n --_bg: var(--button-bg, transparent);\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, transparent);\n --_hover-color: var(--_theme-focus);\n --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n }\n\n :host([variant='text']) [part='button'] {\n border-width: 0;\n }\n\n /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n :host([variant='frost']:not([color])) {\n --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n --_hover-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n );\n --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n --_active-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n );\n }\n\n :host([variant='frost'][color]) {\n --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n --_hover-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n );\n --_active-bg: var(\n --button-frost-active-bg,\n color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n );\n --_active-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n );\n }\n\n /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n [part='button']:hover {\n color: var(--_hover-color, var(--_color));\n background: var(--_hover-bg, var(--_bg));\n border-color: var(--_hover-border-color, var(--_border-color));\n }\n\n [part='button']:active {\n color: var(--_active-color, var(--_color));\n background: var(--_active-bg, var(--_bg));\n border-color: var(--_active-border-color, var(--_border-color));\n box-shadow: var(--inset-shadow-2xs);\n }\n}\n\n@layer refine.overrides {\n /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n [part='button']:focus-visible {\n outline: none;\n box-shadow: var(--_theme-shadow), var(--_theme-halo);\n }\n\n /* Hover depth — halo border effect matching ore-input focus style */\n [part='button']:hover,\n [part='button']:active {\n border-color: var(--_hover-border-color, var(--_theme-focus));\n box-shadow: var(--_theme-shadow), var(--_theme-halo);\n }\n\n /* Ghost + Text variants: no border/shadow decoration on hover */\n :host([variant='ghost']) [part='button']:hover,\n :host([variant='text']) [part='button']:hover {\n border-color: transparent;\n box-shadow: none;\n transform: none;\n }\n\n /* ...nor on :active — stay borderless even though the shared rule above now\n adds a halo to :active too (physical press transform below still applies,\n this only cancels border-color/box-shadow). */\n :host([variant='ghost']) [part='button']:active,\n :host([variant='text']) [part='button']:active {\n border-color: transparent;\n box-shadow: none;\n }\n\n /* Physical press feedback */\n [part='button']:active {\n transform: translateY(1px);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"button.css.js","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--button-bg, var(--color-contrast-100));\n --_color: var(--button-color, var(--color-contrast-900));\n --_border-color: var(--button-border-color, var(--color-contrast-300));\n --_radius: var(--button-radius, var(--rounded-lg));\n\n display: inline-flex;\n align-items: center;\n justify-content: var(--button-justify, center);\n }\n\n /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n :host([disabled]) a,\n :host([loading]) a {\n pointer-events: none;\n cursor: not-allowed;\n }\n\n :host([loading]) a {\n cursor: wait;\n }\n\n [part='button'] {\n position: relative;\n box-sizing: border-box;\n display: flex;\n gap: var(--_gap, var(--size-2));\n align-items: center;\n justify-content: var(--button-justify, center);\n width: 100%;\n min-width: 0;\n height: var(--_height, var(--size-10));\n min-height: var(--_touch-target);\n padding: var(--_padding, var(--size-2) var(--size-4));\n font-size: var(--_font-size, var(--text-sm));\n font-weight: var(--font-medium);\n line-height: var(--_line-height, var(--leading-normal));\n color: var(--_color);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n background: var(--_bg);\n border: var(--button-border, var(--border)) solid var(--_border-color);\n border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n border-radius: var(--_radius);\n transition: var(\n --_motion-transition,\n background var(--transition-normal),\n border-color var(--transition-normal),\n box-shadow var(--transition-normal),\n color var(--transition-normal),\n transform 120ms var(--ease-spring)\n );\n }\n\n [part='button']:focus-visible {\n outline: none;\n }\n\n /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .loader {\n position: absolute;\n width: 1em;\n height: 1em;\n border: var(--border-2) solid currentcolor;\n border-inline-end-color: transparent;\n border-radius: 50%;\n animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n }\n\n .content {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: middle;\n white-space: nowrap;\n }\n\n ::slotted([slot='prefix']),\n ::slotted([slot='suffix']) {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n\n ::slotted(svg) {\n flex-shrink: 0;\n width: var(--_icon-size, var(--leading-6));\n height: var(--_icon-size, var(--leading-6));\n }\n}\n\n@layer refine.overrides {\n :host([fullwidth]) {\n display: flex;\n width: 100%;\n }\n\n /* `[part='button']`'s own height otherwise comes from the fixed size-preset var\n (`--_height`, default `--size-10`) — overriding just the host's own box height (e.g. via an\n external `height: 100%` from a swipe-action panel container) stretches an invisible wrapper\n without moving the visible button surface at all. Both declarations are needed. */\n :host([fullheight]) {\n display: flex;\n height: 100%;\n }\n\n :host([fullheight]) [part='button'] {\n height: 100%;\n }\n\n /* Icon-only always uses perfect circle */\n :host([rounded][icon-only]) [part='button'] {\n border-radius: 50%;\n }\n\n :host([loading]) .content {\n visibility: hidden;\n }\n}\n\n@layer refine.variants {\n :host([icon-only]) [part='button'] {\n aspect-ratio: 1;\n padding: 0;\n }\n\n /* ── Per-variant token assignments ─────────────────────────────────────────\n Each variant sets --_bg/--_color/--_border-color (consuming the public\n --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n tokens for interactive states.\n The shared :is(button, a):hover / :active rules below read these tokens.\n ─────────────────────────────────────────────────────────────────────── */\n\n /* Solid (Default) */\n :host(:not([variant])),\n :host([variant='solid']) {\n --_bg: var(--button-bg, var(--_theme-base));\n --_color: var(--button-color, var(--_theme-contrast));\n --_border-color: var(--button-border-color, var(--_theme-base));\n --_hover-bg: var(--_theme-focus);\n --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n /* Flat */\n :host([variant='flat']) {\n --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n --_hover-bg: var(--_theme-focus);\n --_hover-color: var(--_theme-contrast);\n --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n :host([variant='flat']) [part='button'] {\n box-shadow: var(--inset-shadow-2xs);\n }\n\n :host([variant='flat']) [part='button']:hover {\n box-shadow: var(--inset-shadow-xs);\n }\n\n :host([variant='flat']) [part='button']:active {\n box-shadow: var(--inset-shadow-sm);\n }\n\n /* Bordered */\n :host([variant='bordered']) {\n --_bg: var(--button-bg, var(--_theme-backdrop));\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, var(--_theme-border));\n --_hover-bg: var(--_theme-focus);\n --_hover-color: var(--_theme-contrast);\n --_hover-border-color: var(--_theme-focus);\n --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n :host([variant='bordered']) [part='button'] {\n box-shadow: var(--inset-shadow-xs);\n }\n\n :host([variant='bordered']) [part='button']:hover {\n box-shadow: var(--inset-shadow-xs);\n }\n\n :host([variant='bordered']) [part='button']:active {\n box-shadow: var(--inset-shadow-sm);\n }\n\n /* Outline */\n :host([variant='outline']) {\n --_bg: var(--button-bg, transparent);\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, var(--_theme-base));\n --_hover-bg: var(--_theme-backdrop);\n --_hover-border-color: var(--_theme-focus);\n --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n /* Ghost */\n :host([variant='ghost']) {\n --_bg: var(--button-bg, transparent);\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, transparent);\n --_hover-bg: var(--_theme-backdrop);\n --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n --_active-color: var(--_theme-contrast);\n }\n\n :host([variant='ghost']) [part='button'] {\n border-width: 0;\n }\n\n /* Text */\n :host([variant='text']) {\n --_bg: var(--button-bg, transparent);\n --_color: var(--button-color, var(--_theme-base));\n --_border-color: var(--button-border-color, transparent);\n --_hover-color: var(--_theme-focus);\n --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n }\n\n :host([variant='text']) [part='button'] {\n border-width: 0;\n }\n\n /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n :host([variant='frost']:not([color])) {\n --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n --_hover-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n );\n --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n --_active-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n );\n }\n\n :host([variant='frost'][color]) {\n --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n --_hover-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n );\n --_active-bg: var(\n --button-frost-active-bg,\n color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n );\n --_active-border-color: var(\n --button-frost-active-border-color,\n color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n );\n }\n\n /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n [part='button']:hover {\n color: var(--_hover-color, var(--_color));\n background: var(--_hover-bg, var(--_bg));\n border-color: var(--_hover-border-color, var(--_border-color));\n }\n\n [part='button']:active {\n color: var(--_active-color, var(--_color));\n background: var(--_active-bg, var(--_bg));\n border-color: var(--_active-border-color, var(--_border-color));\n box-shadow: var(--inset-shadow-2xs);\n }\n}\n\n@layer refine.overrides {\n /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n [part='button']:focus-visible {\n outline: none;\n box-shadow: var(--_theme-shadow), var(--_theme-halo);\n }\n\n /* Hover depth — halo border effect matching ore-input focus style */\n [part='button']:hover,\n [part='button']:active {\n border-color: var(--_hover-border-color, var(--_theme-focus));\n box-shadow: var(--_theme-shadow), var(--_theme-halo);\n }\n\n /* Ghost + Text variants: no border/shadow decoration on hover */\n :host([variant='ghost']) [part='button']:hover,\n :host([variant='text']) [part='button']:hover {\n border-color: transparent;\n box-shadow: none;\n transform: none;\n }\n\n /* ...nor on :active — stay borderless even though the shared rule above now\n adds a halo to :active too (physical press transform below still applies,\n this only cancels border-color/box-shadow). */\n :host([variant='ghost']) [part='button']:active,\n :host([variant='text']) [part='button']:active {\n border-color: transparent;\n box-shadow: none;\n }\n\n /* Physical press feedback */\n [part='button']:active {\n transform: translateY(1px);\n }\n}\n"],"mappings":""}
|
|
@@ -12,6 +12,13 @@ export type OreButtonProps = {
|
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
/** Animated border effect: 'shine' (color-aware neon sweep) or 'rainbow' */
|
|
14
14
|
effect?: ButtonEffect;
|
|
15
|
+
/**
|
|
16
|
+
* Full height button (100% of container) — the inner `[part="button"]` fills its host's
|
|
17
|
+
* height instead of the size preset's fixed height. Useful when the button itself is the
|
|
18
|
+
* whole tappable surface of a container it doesn't otherwise control the size of (e.g. a
|
|
19
|
+
* swipe-revealed row action in `ore-list-item`'s `actions-left`/`actions-right` slots).
|
|
20
|
+
*/
|
|
21
|
+
fullheight?: boolean;
|
|
15
22
|
/** Full width button (100% of container) */
|
|
16
23
|
fullwidth?: boolean;
|
|
17
24
|
/** When set, renders an `<a>` instead of `<button>` */
|
|
@@ -51,6 +58,7 @@ export type OreButtonProps = {
|
|
|
51
58
|
* @attr {string} effect - Animated border effect: 'shine' | 'rainbow'
|
|
52
59
|
* @attr {boolean} icon-only - Icon-only mode (square aspect ratio, no padding)
|
|
53
60
|
* @attr {boolean} fullwidth - Full width button (100% of container)
|
|
61
|
+
* @attr {boolean} fullheight - Full height button (100% of container)
|
|
54
62
|
*
|
|
55
63
|
* @fires click - Emitted when button is clicked (unless disabled/loading)
|
|
56
64
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/inputs/button/button.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAoBlG,eAAO,MAAM,eAAe,6EAA8E,CAAC;AAE3G,iGAAiG;AACjG,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,6CAA6C;AAC7C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/C,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG;IAC3B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kCAAkC;IAClC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/inputs/button/button.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAoBlG,eAAO,MAAM,eAAe,6EAA8E,CAAC;AAE3G,iGAAiG;AACjG,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,6CAA6C;AAC7C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/C,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG;IAC3B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kCAAkC;IAClC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/inputs/calendar/calendar.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/inputs/calendar/calendar.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE3E,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AAQpC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`@layer refine.base{:host{--_size:var(--checkbox-size,var(--size-5));--_radius:var(--checkbox-radius,var(--rounded-lg));--_font-size:var(--checkbox-font-size,var(--text-sm));--_bg:var(--checkbox-bg,var(--color-contrast-200));--_border:var(--checkbox-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.checkbox-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.box{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);border-radius:var(--_radius);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);position:relative}
|
|
1
|
+
var e=`@layer refine.base{:host{--_size:var(--checkbox-size,var(--size-5));--_radius:var(--checkbox-radius,var(--rounded-lg));--_font-size:var(--checkbox-font-size,var(--text-sm));--_bg:var(--checkbox-bg,var(--color-contrast-200));--_border:var(--checkbox-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.checkbox-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.box{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);border-radius:var(--_radius);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);position:relative}:host(:focus-visible) .box{box-shadow:var(--_focus-shadow)}.checkmark,.dash{color:var(--_icon-color);opacity:0;transition:opacity var(--transition-spring), transform var(--transition-spring);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.checkmark::part(svg),.dash::part(svg){width:calc(var(--_size) * .6);height:calc(var(--_size) * .6);fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.label{font-size:var(--_font-size);color:var(--color-contrast)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text: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)){padding-left:calc(var(--_size) + var(--size-2))}.helper-text: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)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--checkbox-checked-bg,var(--_theme-base));--_icon-color:var(--checkbox-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .box,:host([indeterminate]) .box{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .checkmark,:host([indeterminate]:not([checked])) .dash{opacity:1;transform:translate(-50%,-50%)scale(1)}}`;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=checkbox.css.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.css.cjs","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer refine.base {\n /* ========================================\n Base Styles & Defaults\n ======================================== */\n\n :host {\n --_size: var(--checkbox-size, var(--size-5));\n --_radius: var(--checkbox-radius, var(--rounded-lg));\n --_font-size: var(--checkbox-font-size, var(--text-sm));\n --_bg: var(--checkbox-bg, var(--color-contrast-200));\n --_border: var(--checkbox-border-color, var(--color-contrast-300));\n\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--_gap, var(--size-2));\n align-items: center;\n min-height: var(--_touch-target);\n cursor: pointer;\n user-select: none;\n }\n\n .checkbox-wrapper {\n position: relative;\n display: block;\n flex-shrink: 0;\n width: var(--_size);\n height: var(--_size);\n }\n\n .box {\n position: relative;\n box-sizing: border-box;\n width: var(--_size);\n height: var(--_size);\n background: var(--_bg);\n border: var(--border-2) solid var(--_border);\n border-radius: var(--_radius);\n transition:\n background var(--transition-normal),\n border-color var(--transition-normal),\n box-shadow var(--transition-normal);\n }\n\n /* ========================================\n Focus State\n ======================================== */\n\n
|
|
1
|
+
{"version":3,"file":"checkbox.css.cjs","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer refine.base {\n /* ========================================\n Base Styles & Defaults\n ======================================== */\n\n :host {\n --_size: var(--checkbox-size, var(--size-5));\n --_radius: var(--checkbox-radius, var(--rounded-lg));\n --_font-size: var(--checkbox-font-size, var(--text-sm));\n --_bg: var(--checkbox-bg, var(--color-contrast-200));\n --_border: var(--checkbox-border-color, var(--color-contrast-300));\n\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--_gap, var(--size-2));\n align-items: center;\n min-height: var(--_touch-target);\n cursor: pointer;\n user-select: none;\n }\n\n .checkbox-wrapper {\n position: relative;\n display: block;\n flex-shrink: 0;\n width: var(--_size);\n height: var(--_size);\n }\n\n .box {\n position: relative;\n box-sizing: border-box;\n width: var(--_size);\n height: var(--_size);\n background: var(--_bg);\n border: var(--border-2) solid var(--_border);\n border-radius: var(--_radius);\n transition:\n background var(--transition-normal),\n border-color var(--transition-normal),\n box-shadow var(--transition-normal);\n }\n\n /* ========================================\n Focus State\n ======================================== */\n\n :host(:focus-visible) .box {\n box-shadow: var(--_focus-shadow);\n }\n\n /* ========================================\n Icons (Checkmark & Dash)\n ======================================== */\n\n .checkmark,\n .dash {\n position: absolute;\n top: 50%;\n left: 50%;\n color: var(--_icon-color);\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.5);\n transition:\n opacity var(--transition-spring),\n transform var(--transition-spring);\n }\n\n .checkmark::part(svg),\n .dash::part(svg) {\n width: calc(var(--_size) * 0.6);\n height: calc(var(--_size) * 0.6);\n fill: none;\n stroke: currentcolor;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n /* ========================================\n Label\n ======================================== */\n\n .label {\n font-size: var(--_font-size);\n color: var(--color-contrast);\n }\n\n /* ========================================\n Helper / Error Text\n ======================================== */\n\n .helper-text[hidden] {\n display: none;\n }\n\n .helper-text {\n width: 100%;\n padding-inline-start: calc(var(--_size) + var(--size-2));\n font-size: var(--text-xs);\n line-height: var(--leading-tight);\n color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n }\n\n .helper-text[role='alert'] {\n color: var(--color-error);\n }\n}\n\n@layer refine.overrides {\n /* Map theme variables to checkbox-specific variables */\n :host {\n --_active-bg: var(--checkbox-checked-bg, var(--_theme-base));\n --_icon-color: var(--checkbox-color, var(--_theme-contrast));\n --_focus-shadow: var(--_theme-shadow);\n }\n\n /* ========================================\n Checked & Indeterminate States\n ======================================== */\n\n :host([checked]) .box,\n :host([indeterminate]) .box {\n background: var(--_active-bg);\n border-color: var(--_active-bg);\n }\n\n :host([checked]) .checkmark,\n :host([indeterminate]:not([checked])) .dash {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/inputs/checkbox/checkbox.css?inline
|
|
2
|
-
var e = "@layer refine.base{:host{--_size:var(--checkbox-size,var(--size-5));--_radius:var(--checkbox-radius,var(--rounded-lg));--_font-size:var(--checkbox-font-size,var(--text-sm));--_bg:var(--checkbox-bg,var(--color-contrast-200));--_border:var(--checkbox-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.checkbox-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.box{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);border-radius:var(--_radius);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);position:relative}
|
|
2
|
+
var e = "@layer refine.base{:host{--_size:var(--checkbox-size,var(--size-5));--_radius:var(--checkbox-radius,var(--rounded-lg));--_font-size:var(--checkbox-font-size,var(--text-sm));--_bg:var(--checkbox-bg,var(--color-contrast-200));--_border:var(--checkbox-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.checkbox-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.box{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);border-radius:var(--_radius);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);position:relative}:host(:focus-visible) .box{box-shadow:var(--_focus-shadow)}.checkmark,.dash{color:var(--_icon-color);opacity:0;transition:opacity var(--transition-spring), transform var(--transition-spring);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.checkmark::part(svg),.dash::part(svg){width:calc(var(--_size) * .6);height:calc(var(--_size) * .6);fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.label{font-size:var(--_font-size);color:var(--color-contrast)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text: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)){padding-left:calc(var(--_size) + var(--size-2))}.helper-text: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)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--checkbox-checked-bg,var(--_theme-base));--_icon-color:var(--checkbox-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .box,:host([indeterminate]) .box{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .checkmark,:host([indeterminate]:not([checked])) .dash{opacity:1;transform:translate(-50%,-50%)scale(1)}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.css.js","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer refine.base {\n /* ========================================\n Base Styles & Defaults\n ======================================== */\n\n :host {\n --_size: var(--checkbox-size, var(--size-5));\n --_radius: var(--checkbox-radius, var(--rounded-lg));\n --_font-size: var(--checkbox-font-size, var(--text-sm));\n --_bg: var(--checkbox-bg, var(--color-contrast-200));\n --_border: var(--checkbox-border-color, var(--color-contrast-300));\n\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--_gap, var(--size-2));\n align-items: center;\n min-height: var(--_touch-target);\n cursor: pointer;\n user-select: none;\n }\n\n .checkbox-wrapper {\n position: relative;\n display: block;\n flex-shrink: 0;\n width: var(--_size);\n height: var(--_size);\n }\n\n .box {\n position: relative;\n box-sizing: border-box;\n width: var(--_size);\n height: var(--_size);\n background: var(--_bg);\n border: var(--border-2) solid var(--_border);\n border-radius: var(--_radius);\n transition:\n background var(--transition-normal),\n border-color var(--transition-normal),\n box-shadow var(--transition-normal);\n }\n\n /* ========================================\n Focus State\n ======================================== */\n\n
|
|
1
|
+
{"version":3,"file":"checkbox.css.js","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer refine.base {\n /* ========================================\n Base Styles & Defaults\n ======================================== */\n\n :host {\n --_size: var(--checkbox-size, var(--size-5));\n --_radius: var(--checkbox-radius, var(--rounded-lg));\n --_font-size: var(--checkbox-font-size, var(--text-sm));\n --_bg: var(--checkbox-bg, var(--color-contrast-200));\n --_border: var(--checkbox-border-color, var(--color-contrast-300));\n\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--_gap, var(--size-2));\n align-items: center;\n min-height: var(--_touch-target);\n cursor: pointer;\n user-select: none;\n }\n\n .checkbox-wrapper {\n position: relative;\n display: block;\n flex-shrink: 0;\n width: var(--_size);\n height: var(--_size);\n }\n\n .box {\n position: relative;\n box-sizing: border-box;\n width: var(--_size);\n height: var(--_size);\n background: var(--_bg);\n border: var(--border-2) solid var(--_border);\n border-radius: var(--_radius);\n transition:\n background var(--transition-normal),\n border-color var(--transition-normal),\n box-shadow var(--transition-normal);\n }\n\n /* ========================================\n Focus State\n ======================================== */\n\n :host(:focus-visible) .box {\n box-shadow: var(--_focus-shadow);\n }\n\n /* ========================================\n Icons (Checkmark & Dash)\n ======================================== */\n\n .checkmark,\n .dash {\n position: absolute;\n top: 50%;\n left: 50%;\n color: var(--_icon-color);\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.5);\n transition:\n opacity var(--transition-spring),\n transform var(--transition-spring);\n }\n\n .checkmark::part(svg),\n .dash::part(svg) {\n width: calc(var(--_size) * 0.6);\n height: calc(var(--_size) * 0.6);\n fill: none;\n stroke: currentcolor;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n /* ========================================\n Label\n ======================================== */\n\n .label {\n font-size: var(--_font-size);\n color: var(--color-contrast);\n }\n\n /* ========================================\n Helper / Error Text\n ======================================== */\n\n .helper-text[hidden] {\n display: none;\n }\n\n .helper-text {\n width: 100%;\n padding-inline-start: calc(var(--_size) + var(--size-2));\n font-size: var(--text-xs);\n line-height: var(--leading-tight);\n color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n }\n\n .helper-text[role='alert'] {\n color: var(--color-error);\n }\n}\n\n@layer refine.overrides {\n /* Map theme variables to checkbox-specific variables */\n :host {\n --_active-bg: var(--checkbox-checked-bg, var(--_theme-base));\n --_icon-color: var(--checkbox-color, var(--_theme-contrast));\n --_focus-shadow: var(--_theme-shadow);\n }\n\n /* ========================================\n Checked & Indeterminate States\n ======================================== */\n\n :host([checked]) .box,\n :host([indeterminate]) .box {\n background: var(--_active-bg);\n border-color: var(--_active-bg);\n }\n\n :host([checked]) .checkmark,\n :host([indeterminate]:not([checked])) .dash {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n"],"mappings":""}
|
|
@@ -12,6 +12,7 @@ export type { OreComboboxEvents, OreComboboxProps } from './combobox.types';
|
|
|
12
12
|
* @attr {boolean} no-filter - Disable client-side filtering (useful for server-side search)
|
|
13
13
|
* @attr {string} placeholder - Placeholder text
|
|
14
14
|
* @attr {boolean} required - Require a non-blank selection for `<ore-form>` validation
|
|
15
|
+
* @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)
|
|
15
16
|
*
|
|
16
17
|
* @fires {CustomEvent} change - Emitted when selection changes. detail: { value: string | string[], values: string[], labels: string[] }
|
|
17
18
|
* @fires {CustomEvent} search - Emitted when user types. detail: { query: string }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox.ts"],"names":[],"mappings":"AA8BA,OAAO,0BAA0B,CAAC;AAClC,OAAO,gBAAgB,CAAC;AAGxB,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE5E
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox.ts"],"names":[],"mappings":"AA8BA,OAAO,0BAA0B,CAAC;AAClC,OAAO,gBAAgB,CAAC;AAGxB,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`@layer refine.base{:host{--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-focus));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-focus));--_day-outside-opacity:var(--date-picker-day-outside-opacity,.35);min-width:var(--date-picker-min-width,12rem);display:inline-block}:host([fullwidth]){display:block}:host([color=secondary]){--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-base));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-base))}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.calendar{z-index:var(--z-dropdown,8000);gap:var(--size-2);min-width:18rem;padding:var(--size-3);pointer-events:none;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--date-picker-shadow,var(--shadow-lg));opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;display:flex;position:fixed;inset:0 auto auto 0}.calendar[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.calendar[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.cal-header{gap:var(--size-1);border-bottom:var(--border) solid var(--_border-color);padding-bottom:var(--size-2);justify-content:space-between;align-items:center;display:flex}.nav-btn{width:var(--size-8);height:var(--size-8);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.nav-btn:hover{color:var(--color-contrast-900);background:var(--color-contrast-300)}.nav-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-btn{padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);background:0 0;border:none;outline:none;flex:1}.cal-label-btn:hover{background:var(--color-contrast-300)}.cal-label-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-month,.cal-label-year{display:inline-block}.cal-label-sep{padding-inline:var(--size-1);font-weight:var(--font-normal);color:var(--color-contrast-400);display:inline-block}[hidden]{display:none!important}.cal-grid{gap:var(--size-0-5);flex-direction:column;display:flex}.cal-grid-days{gap:var(--size-0-5);min-height:calc(7 * var(--size-10) + 6 * var(--size-0-5));grid-template-columns:repeat(7,1fr);display:grid}.cal-grid [role=row]{display:contents}.cal-cell{font-size:var(--text-sm);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);outline:none;justify-content:center;align-items:center;display:flex}.cal-cell-head{height:var(--size-8);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500);cursor:default}.cal-cell-day{height:var(--size-8);color:var(--color-contrast-800)}.cal-cell-day:hover:not([data-disabled]){color:var(--color-contrast-900);background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-day:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-day[data-today]{font-weight:var(--font-semibold);color:var(--_day-today-color)}.cal-cell-day[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-day[data-outside]{opacity:var(--_day-outside-opacity)}.cal-cell-day[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}.cal-grid-months,.cal-grid-years{gap:var(--size-1);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.cal-cell-month,.cal-cell-year{height:var(--size-10);font-size:var(--text-sm);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md)}.cal-cell-month:hover:not([data-disabled]),.cal-cell-year:hover:not([data-disabled]){background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-month:focus-visible,.cal-cell-year:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-month[data-selected],.cal-cell-year[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-month[data-disabled],.cal-cell-year[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}@media (prefers-reduced-motion:reduce){.field,.nav-btn,.cal-label-btn,.cal-cell{transition:none}}}`;exports.default=e;
|
|
1
|
+
var e=`@layer refine.base{:host{--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-focus));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-focus));--_day-outside-opacity:var(--date-picker-day-outside-opacity,.35);--_bg:var(--date-picker-bg,var(--color-canvas));--_border-color:var(--date-picker-border-color,var(--color-contrast-200));--_radius:var(--date-picker-radius,var(--rounded-xl));min-width:var(--date-picker-min-width,12rem);display:inline-block}:host([fullwidth]){display:block}:host([color=secondary]){--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-base));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-base))}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.calendar{z-index:var(--z-dropdown,8000);gap:var(--size-2);min-width:18rem;padding:var(--size-3);pointer-events:none;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--date-picker-shadow,var(--shadow-lg));opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;display:flex;position:fixed;inset:0 auto auto 0}.calendar[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.calendar[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.cal-header{gap:var(--size-1);border-bottom:var(--border) solid var(--_border-color);padding-bottom:var(--size-2);justify-content:space-between;align-items:center;display:flex}.nav-btn{width:var(--size-8);height:var(--size-8);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.nav-btn:hover{color:var(--color-contrast-900);background:var(--color-contrast-300)}.nav-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-btn{padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);background:0 0;border:none;outline:none;flex:1}.cal-label-btn:hover{background:var(--color-contrast-300)}.cal-label-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-month,.cal-label-year{display:inline-block}.cal-label-sep{padding-inline:var(--size-1);font-weight:var(--font-normal);color:var(--color-contrast-400);display:inline-block}[hidden]{display:none!important}.cal-grid{gap:var(--size-0-5);flex-direction:column;display:flex}.cal-grid-days{gap:var(--size-0-5);min-height:calc(7 * var(--size-10) + 6 * var(--size-0-5));grid-template-columns:repeat(7,1fr);display:grid}.cal-grid [role=row]{display:contents}.cal-cell{font-size:var(--text-sm);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);outline:none;justify-content:center;align-items:center;display:flex}.cal-cell-head{height:var(--size-8);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500);cursor:default}.cal-cell-day{height:var(--size-8);color:var(--color-contrast-800)}.cal-cell-day:hover:not([data-disabled]){color:var(--color-contrast-900);background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-day:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-day[data-today]{font-weight:var(--font-semibold);color:var(--_day-today-color)}.cal-cell-day[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-day[data-outside]{opacity:var(--_day-outside-opacity)}.cal-cell-day[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}.cal-grid-months,.cal-grid-years{gap:var(--size-1);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.cal-cell-month,.cal-cell-year{height:var(--size-10);font-size:var(--text-sm);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md)}.cal-cell-month:hover:not([data-disabled]),.cal-cell-year:hover:not([data-disabled]){background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-month:focus-visible,.cal-cell-year:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-month[data-selected],.cal-cell-year[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-month[data-disabled],.cal-cell-year[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}@media (prefers-reduced-motion:reduce){.field,.nav-btn,.cal-label-btn,.cal-cell{transition:none}}}`;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=date-picker.css.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.css.cjs","names":[],"sources":["../../../src/inputs/date-picker/date-picker.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-focus));\n --_day-today-color: var(--date-picker-day-today-color, var(--_theme-focus));\n --_day-outside-opacity: var(--date-picker-day-outside-opacity, 0.35);\n\n display: inline-block;\n min-width: var(--date-picker-min-width, 12rem);\n }\n\n :host([fullwidth]) {\n display: block;\n }\n\n :host([color='secondary']) {\n --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-base));\n --_day-today-color: var(--date-picker-day-today-color, var(--_theme-base));\n }\n\n /* Make the trigger look like a button — ore-input is readonly so pointer changes to text by\n default. `width: 100%` matters just as much — see ore-select's own `.trigger` for why:\n `:host` is `display: inline-block`, which never stretches its own children to fill its own\n box the way a flex/grid container with `stretch` alignment would. */\n .trigger {\n width: 100%;\n cursor: pointer;\n }\n\n .trigger::part(input) {\n cursor: pointer;\n caret-color: transparent;\n user-select: none;\n }\n\n /* ── Calendar popup ──────────────────────────────────────────────────────── */\n\n /* `fixed` (not `absolute`) — positioned via JS-computed top/left (see the positioner in\n date-picker.ts), same as ore-select's own `.dropdown`. Laid out relative to the viewport,\n so it never affects any ancestor's box size or scrollable-overflow area — `absolute`\n positioned relative to the host did, once the host sat near a scroll/clip ancestor's edge. */\n .calendar {\n position: fixed;\n inset: 0 auto auto 0;\n z-index: var(--z-dropdown, 8000);\n display: flex;\n flex-direction: column;\n gap: var(--size-2);\n min-width: 18rem;\n padding: var(--size-3);\n pointer-events: none;\n background: var(--_bg);\n border: var(--border) solid var(--_border-color);\n border-radius: var(--_radius);\n box-shadow: var(--date-picker-shadow, var(--shadow-lg));\n\n /* Hidden by default */\n opacity: 0;\n backdrop-filter: blur(var(--blur-sm));\n transform: translateY(var(--overlay-enter-translate-y));\n transition: var(\n --_motion-transition,\n opacity var(--transition-fast),\n transform var(--transition-fast),\n display var(--transition-fast) allow-discrete\n );\n }\n\n .calendar[data-open] {\n pointer-events: auto;\n opacity: 1;\n transform: translateY(0);\n\n @starting-style {\n opacity: 0;\n transform: translateY(var(--overlay-enter-translate-y));\n }\n }\n\n /* ── Calendar header ─────────────────────────────────────────────────────── */\n\n .cal-header {\n display: flex;\n gap: var(--size-1);\n align-items: center;\n justify-content: space-between;\n padding-block-end: var(--size-2);\n border-block-end: var(--border) solid var(--_border-color);\n }\n\n .nav-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-8);\n height: var(--size-8);\n padding: 0;\n color: var(--color-contrast-600);\n cursor: pointer;\n outline: none;\n background: transparent;\n border: none;\n border-radius: var(--rounded-md);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n .nav-btn:hover {\n color: var(--color-contrast-900);\n background: var(--color-contrast-300);\n }\n\n .nav-btn:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-label-btn {\n flex: 1;\n padding: var(--size-1) var(--size-2);\n font-size: var(--text-sm);\n font-weight: var(--font-semibold);\n color: var(--color-contrast-900);\n text-align: center;\n cursor: pointer;\n outline: none;\n background: transparent;\n border: none;\n border-radius: var(--rounded-md);\n transition: background var(--transition-fast);\n }\n\n .cal-label-btn:hover {\n background: var(--color-contrast-300);\n }\n\n .cal-label-btn:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-label-month,\n .cal-label-year {\n display: inline-block;\n }\n\n .cal-label-sep {\n display: inline-block;\n padding-inline: var(--size-1);\n font-weight: var(--font-normal);\n color: var(--color-contrast-400);\n }\n\n /* ── Day grid ────────────────────────────────────────────────────────────── */\n\n /* Prevent display:flex from overriding the [hidden] attribute */\n [hidden] {\n display: none !important;\n }\n\n .cal-grid {\n display: flex;\n flex-direction: column;\n gap: var(--size-0-5);\n }\n\n .cal-grid-days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: var(--size-0-5);\n min-height: calc(7 * var(--size-10) + 6 * var(--size-0-5));\n }\n\n /* role=\"row\" wrappers exist for ARIA grid structure only — `display: contents`\n removes them from layout so their children still participate directly in the\n parent's CSS grid tracks. */\n .cal-grid [role='row'] {\n display: contents;\n }\n\n .cal-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--text-sm);\n cursor: pointer;\n outline: none;\n border-radius: var(--rounded-md);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n .cal-cell-head {\n height: var(--size-8);\n font-size: var(--text-xs);\n font-weight: var(--font-medium);\n color: var(--color-contrast-500);\n cursor: default;\n }\n\n .cal-cell-day {\n height: var(--size-8);\n color: var(--color-contrast-800);\n }\n\n .cal-cell-day:hover:not([data-disabled]) {\n color: var(--color-contrast-900);\n background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n }\n\n .cal-cell-day:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-cell-day[data-today] {\n font-weight: var(--font-semibold);\n color: var(--_day-today-color);\n }\n\n .cal-cell-day[data-selected] {\n font-weight: var(--font-semibold);\n color: var(--color-white, #fff);\n background: var(--_day-selected-bg);\n }\n\n .cal-cell-day[data-outside] {\n opacity: var(--_day-outside-opacity);\n }\n\n .cal-cell-day[data-disabled] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.3;\n }\n\n /* ── Month / Year grids ──────────────────────────────────────────────────── */\n\n .cal-grid-months,\n .cal-grid-years {\n /* 4-column grid — same width as cal-grid-days, natural height. */\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--size-1);\n }\n\n .cal-cell-month,\n .cal-cell-year {\n height: var(--size-10);\n font-size: var(--text-sm);\n color: var(--color-contrast-800);\n cursor: pointer;\n border-radius: var(--rounded-md);\n }\n\n .cal-cell-month:hover:not([data-disabled]),\n .cal-cell-year:hover:not([data-disabled]) {\n background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n }\n\n .cal-cell-month:focus-visible,\n .cal-cell-year:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-cell-month[data-selected],\n .cal-cell-year[data-selected] {\n font-weight: var(--font-semibold);\n color: var(--color-white, #fff);\n background: var(--_day-selected-bg);\n }\n\n .cal-cell-month[data-disabled],\n .cal-cell-year[data-disabled] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.3;\n }\n\n /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n @media (prefers-reduced-motion: reduce) {\n .field,\n .nav-btn,\n .cal-label-btn,\n .cal-cell {\n transition: none;\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"date-picker.css.cjs","names":[],"sources":["../../../src/inputs/date-picker/date-picker.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-focus));\n --_day-today-color: var(--date-picker-day-today-color, var(--_theme-focus));\n --_day-outside-opacity: var(--date-picker-day-outside-opacity, 0.35);\n --_bg: var(--date-picker-bg, var(--color-canvas));\n --_border-color: var(--date-picker-border-color, var(--color-contrast-200));\n --_radius: var(--date-picker-radius, var(--rounded-xl));\n\n display: inline-block;\n min-width: var(--date-picker-min-width, 12rem);\n }\n\n :host([fullwidth]) {\n display: block;\n }\n\n :host([color='secondary']) {\n --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-base));\n --_day-today-color: var(--date-picker-day-today-color, var(--_theme-base));\n }\n\n /* Make the trigger look like a button — ore-input is readonly so pointer changes to text by\n default. `width: 100%` matters just as much — see ore-select's own `.trigger` for why:\n `:host` is `display: inline-block`, which never stretches its own children to fill its own\n box the way a flex/grid container with `stretch` alignment would. */\n .trigger {\n width: 100%;\n cursor: pointer;\n }\n\n .trigger::part(input) {\n cursor: pointer;\n caret-color: transparent;\n user-select: none;\n }\n\n /* ── Calendar popup ──────────────────────────────────────────────────────── */\n\n /* `fixed` (not `absolute`) — positioned via JS-computed top/left (see the positioner in\n date-picker.ts), same as ore-select's own `.dropdown`. Laid out relative to the viewport,\n so it never affects any ancestor's box size or scrollable-overflow area — `absolute`\n positioned relative to the host did, once the host sat near a scroll/clip ancestor's edge. */\n .calendar {\n position: fixed;\n inset: 0 auto auto 0;\n z-index: var(--z-dropdown, 8000);\n display: flex;\n flex-direction: column;\n gap: var(--size-2);\n min-width: 18rem;\n padding: var(--size-3);\n pointer-events: none;\n background: var(--_bg);\n border: var(--border) solid var(--_border-color);\n border-radius: var(--_radius);\n box-shadow: var(--date-picker-shadow, var(--shadow-lg));\n\n /* Hidden by default */\n opacity: 0;\n backdrop-filter: blur(var(--blur-sm));\n transform: translateY(var(--overlay-enter-translate-y));\n transition: var(\n --_motion-transition,\n opacity var(--transition-fast),\n transform var(--transition-fast),\n display var(--transition-fast) allow-discrete\n );\n }\n\n .calendar[data-open] {\n pointer-events: auto;\n opacity: 1;\n transform: translateY(0);\n\n @starting-style {\n opacity: 0;\n transform: translateY(var(--overlay-enter-translate-y));\n }\n }\n\n /* ── Calendar header ─────────────────────────────────────────────────────── */\n\n .cal-header {\n display: flex;\n gap: var(--size-1);\n align-items: center;\n justify-content: space-between;\n padding-block-end: var(--size-2);\n border-block-end: var(--border) solid var(--_border-color);\n }\n\n .nav-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-8);\n height: var(--size-8);\n padding: 0;\n color: var(--color-contrast-600);\n cursor: pointer;\n outline: none;\n background: transparent;\n border: none;\n border-radius: var(--rounded-md);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n .nav-btn:hover {\n color: var(--color-contrast-900);\n background: var(--color-contrast-300);\n }\n\n .nav-btn:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-label-btn {\n flex: 1;\n padding: var(--size-1) var(--size-2);\n font-size: var(--text-sm);\n font-weight: var(--font-semibold);\n color: var(--color-contrast-900);\n text-align: center;\n cursor: pointer;\n outline: none;\n background: transparent;\n border: none;\n border-radius: var(--rounded-md);\n transition: background var(--transition-fast);\n }\n\n .cal-label-btn:hover {\n background: var(--color-contrast-300);\n }\n\n .cal-label-btn:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-label-month,\n .cal-label-year {\n display: inline-block;\n }\n\n .cal-label-sep {\n display: inline-block;\n padding-inline: var(--size-1);\n font-weight: var(--font-normal);\n color: var(--color-contrast-400);\n }\n\n /* ── Day grid ────────────────────────────────────────────────────────────── */\n\n /* Prevent display:flex from overriding the [hidden] attribute */\n [hidden] {\n display: none !important;\n }\n\n .cal-grid {\n display: flex;\n flex-direction: column;\n gap: var(--size-0-5);\n }\n\n .cal-grid-days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: var(--size-0-5);\n min-height: calc(7 * var(--size-10) + 6 * var(--size-0-5));\n }\n\n /* role=\"row\" wrappers exist for ARIA grid structure only — `display: contents`\n removes them from layout so their children still participate directly in the\n parent's CSS grid tracks. */\n .cal-grid [role='row'] {\n display: contents;\n }\n\n .cal-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--text-sm);\n cursor: pointer;\n outline: none;\n border-radius: var(--rounded-md);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n .cal-cell-head {\n height: var(--size-8);\n font-size: var(--text-xs);\n font-weight: var(--font-medium);\n color: var(--color-contrast-500);\n cursor: default;\n }\n\n .cal-cell-day {\n height: var(--size-8);\n color: var(--color-contrast-800);\n }\n\n .cal-cell-day:hover:not([data-disabled]) {\n color: var(--color-contrast-900);\n background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n }\n\n .cal-cell-day:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-cell-day[data-today] {\n font-weight: var(--font-semibold);\n color: var(--_day-today-color);\n }\n\n .cal-cell-day[data-selected] {\n font-weight: var(--font-semibold);\n color: var(--color-white, #fff);\n background: var(--_day-selected-bg);\n }\n\n .cal-cell-day[data-outside] {\n opacity: var(--_day-outside-opacity);\n }\n\n .cal-cell-day[data-disabled] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.3;\n }\n\n /* ── Month / Year grids ──────────────────────────────────────────────────── */\n\n .cal-grid-months,\n .cal-grid-years {\n /* 4-column grid — same width as cal-grid-days, natural height. */\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--size-1);\n }\n\n .cal-cell-month,\n .cal-cell-year {\n height: var(--size-10);\n font-size: var(--text-sm);\n color: var(--color-contrast-800);\n cursor: pointer;\n border-radius: var(--rounded-md);\n }\n\n .cal-cell-month:hover:not([data-disabled]),\n .cal-cell-year:hover:not([data-disabled]) {\n background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n }\n\n .cal-cell-month:focus-visible,\n .cal-cell-year:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-cell-month[data-selected],\n .cal-cell-year[data-selected] {\n font-weight: var(--font-semibold);\n color: var(--color-white, #fff);\n background: var(--_day-selected-bg);\n }\n\n .cal-cell-month[data-disabled],\n .cal-cell-year[data-disabled] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.3;\n }\n\n /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n @media (prefers-reduced-motion: reduce) {\n .field,\n .nav-btn,\n .cal-label-btn,\n .cal-cell {\n transition: none;\n }\n }\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/inputs/date-picker/date-picker.css?inline
|
|
2
|
-
var e = "@layer refine.base{:host{--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-focus));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-focus));--_day-outside-opacity:var(--date-picker-day-outside-opacity,.35);min-width:var(--date-picker-min-width,12rem);display:inline-block}:host([fullwidth]){display:block}:host([color=secondary]){--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-base));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-base))}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.calendar{z-index:var(--z-dropdown,8000);gap:var(--size-2);min-width:18rem;padding:var(--size-3);pointer-events:none;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--date-picker-shadow,var(--shadow-lg));opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;display:flex;position:fixed;inset:0 auto auto 0}.calendar[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.calendar[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.cal-header{gap:var(--size-1);border-bottom:var(--border) solid var(--_border-color);padding-bottom:var(--size-2);justify-content:space-between;align-items:center;display:flex}.nav-btn{width:var(--size-8);height:var(--size-8);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.nav-btn:hover{color:var(--color-contrast-900);background:var(--color-contrast-300)}.nav-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-btn{padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);background:0 0;border:none;outline:none;flex:1}.cal-label-btn:hover{background:var(--color-contrast-300)}.cal-label-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-month,.cal-label-year{display:inline-block}.cal-label-sep{padding-inline:var(--size-1);font-weight:var(--font-normal);color:var(--color-contrast-400);display:inline-block}[hidden]{display:none!important}.cal-grid{gap:var(--size-0-5);flex-direction:column;display:flex}.cal-grid-days{gap:var(--size-0-5);min-height:calc(7 * var(--size-10) + 6 * var(--size-0-5));grid-template-columns:repeat(7,1fr);display:grid}.cal-grid [role=row]{display:contents}.cal-cell{font-size:var(--text-sm);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);outline:none;justify-content:center;align-items:center;display:flex}.cal-cell-head{height:var(--size-8);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500);cursor:default}.cal-cell-day{height:var(--size-8);color:var(--color-contrast-800)}.cal-cell-day:hover:not([data-disabled]){color:var(--color-contrast-900);background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-day:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-day[data-today]{font-weight:var(--font-semibold);color:var(--_day-today-color)}.cal-cell-day[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-day[data-outside]{opacity:var(--_day-outside-opacity)}.cal-cell-day[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}.cal-grid-months,.cal-grid-years{gap:var(--size-1);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.cal-cell-month,.cal-cell-year{height:var(--size-10);font-size:var(--text-sm);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md)}.cal-cell-month:hover:not([data-disabled]),.cal-cell-year:hover:not([data-disabled]){background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-month:focus-visible,.cal-cell-year:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-month[data-selected],.cal-cell-year[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-month[data-disabled],.cal-cell-year[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}@media (prefers-reduced-motion:reduce){.field,.nav-btn,.cal-label-btn,.cal-cell{transition:none}}}";
|
|
2
|
+
var e = "@layer refine.base{:host{--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-focus));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-focus));--_day-outside-opacity:var(--date-picker-day-outside-opacity,.35);--_bg:var(--date-picker-bg,var(--color-canvas));--_border-color:var(--date-picker-border-color,var(--color-contrast-200));--_radius:var(--date-picker-radius,var(--rounded-xl));min-width:var(--date-picker-min-width,12rem);display:inline-block}:host([fullwidth]){display:block}:host([color=secondary]){--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-base));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-base))}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.calendar{z-index:var(--z-dropdown,8000);gap:var(--size-2);min-width:18rem;padding:var(--size-3);pointer-events:none;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--date-picker-shadow,var(--shadow-lg));opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;display:flex;position:fixed;inset:0 auto auto 0}.calendar[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.calendar[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.cal-header{gap:var(--size-1);border-bottom:var(--border) solid var(--_border-color);padding-bottom:var(--size-2);justify-content:space-between;align-items:center;display:flex}.nav-btn{width:var(--size-8);height:var(--size-8);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.nav-btn:hover{color:var(--color-contrast-900);background:var(--color-contrast-300)}.nav-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-btn{padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);background:0 0;border:none;outline:none;flex:1}.cal-label-btn:hover{background:var(--color-contrast-300)}.cal-label-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-month,.cal-label-year{display:inline-block}.cal-label-sep{padding-inline:var(--size-1);font-weight:var(--font-normal);color:var(--color-contrast-400);display:inline-block}[hidden]{display:none!important}.cal-grid{gap:var(--size-0-5);flex-direction:column;display:flex}.cal-grid-days{gap:var(--size-0-5);min-height:calc(7 * var(--size-10) + 6 * var(--size-0-5));grid-template-columns:repeat(7,1fr);display:grid}.cal-grid [role=row]{display:contents}.cal-cell{font-size:var(--text-sm);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);outline:none;justify-content:center;align-items:center;display:flex}.cal-cell-head{height:var(--size-8);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500);cursor:default}.cal-cell-day{height:var(--size-8);color:var(--color-contrast-800)}.cal-cell-day:hover:not([data-disabled]){color:var(--color-contrast-900);background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-day:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-day[data-today]{font-weight:var(--font-semibold);color:var(--_day-today-color)}.cal-cell-day[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-day[data-outside]{opacity:var(--_day-outside-opacity)}.cal-cell-day[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}.cal-grid-months,.cal-grid-years{gap:var(--size-1);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.cal-cell-month,.cal-cell-year{height:var(--size-10);font-size:var(--text-sm);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md)}.cal-cell-month:hover:not([data-disabled]),.cal-cell-year:hover:not([data-disabled]){background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-month:focus-visible,.cal-cell-year:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-month[data-selected],.cal-cell-year[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-month[data-disabled],.cal-cell-year[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}@media (prefers-reduced-motion:reduce){.field,.nav-btn,.cal-label-btn,.cal-cell{transition:none}}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.css.js","names":[],"sources":["../../../src/inputs/date-picker/date-picker.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-focus));\n --_day-today-color: var(--date-picker-day-today-color, var(--_theme-focus));\n --_day-outside-opacity: var(--date-picker-day-outside-opacity, 0.35);\n\n display: inline-block;\n min-width: var(--date-picker-min-width, 12rem);\n }\n\n :host([fullwidth]) {\n display: block;\n }\n\n :host([color='secondary']) {\n --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-base));\n --_day-today-color: var(--date-picker-day-today-color, var(--_theme-base));\n }\n\n /* Make the trigger look like a button — ore-input is readonly so pointer changes to text by\n default. `width: 100%` matters just as much — see ore-select's own `.trigger` for why:\n `:host` is `display: inline-block`, which never stretches its own children to fill its own\n box the way a flex/grid container with `stretch` alignment would. */\n .trigger {\n width: 100%;\n cursor: pointer;\n }\n\n .trigger::part(input) {\n cursor: pointer;\n caret-color: transparent;\n user-select: none;\n }\n\n /* ── Calendar popup ──────────────────────────────────────────────────────── */\n\n /* `fixed` (not `absolute`) — positioned via JS-computed top/left (see the positioner in\n date-picker.ts), same as ore-select's own `.dropdown`. Laid out relative to the viewport,\n so it never affects any ancestor's box size or scrollable-overflow area — `absolute`\n positioned relative to the host did, once the host sat near a scroll/clip ancestor's edge. */\n .calendar {\n position: fixed;\n inset: 0 auto auto 0;\n z-index: var(--z-dropdown, 8000);\n display: flex;\n flex-direction: column;\n gap: var(--size-2);\n min-width: 18rem;\n padding: var(--size-3);\n pointer-events: none;\n background: var(--_bg);\n border: var(--border) solid var(--_border-color);\n border-radius: var(--_radius);\n box-shadow: var(--date-picker-shadow, var(--shadow-lg));\n\n /* Hidden by default */\n opacity: 0;\n backdrop-filter: blur(var(--blur-sm));\n transform: translateY(var(--overlay-enter-translate-y));\n transition: var(\n --_motion-transition,\n opacity var(--transition-fast),\n transform var(--transition-fast),\n display var(--transition-fast) allow-discrete\n );\n }\n\n .calendar[data-open] {\n pointer-events: auto;\n opacity: 1;\n transform: translateY(0);\n\n @starting-style {\n opacity: 0;\n transform: translateY(var(--overlay-enter-translate-y));\n }\n }\n\n /* ── Calendar header ─────────────────────────────────────────────────────── */\n\n .cal-header {\n display: flex;\n gap: var(--size-1);\n align-items: center;\n justify-content: space-between;\n padding-block-end: var(--size-2);\n border-block-end: var(--border) solid var(--_border-color);\n }\n\n .nav-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-8);\n height: var(--size-8);\n padding: 0;\n color: var(--color-contrast-600);\n cursor: pointer;\n outline: none;\n background: transparent;\n border: none;\n border-radius: var(--rounded-md);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n .nav-btn:hover {\n color: var(--color-contrast-900);\n background: var(--color-contrast-300);\n }\n\n .nav-btn:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-label-btn {\n flex: 1;\n padding: var(--size-1) var(--size-2);\n font-size: var(--text-sm);\n font-weight: var(--font-semibold);\n color: var(--color-contrast-900);\n text-align: center;\n cursor: pointer;\n outline: none;\n background: transparent;\n border: none;\n border-radius: var(--rounded-md);\n transition: background var(--transition-fast);\n }\n\n .cal-label-btn:hover {\n background: var(--color-contrast-300);\n }\n\n .cal-label-btn:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-label-month,\n .cal-label-year {\n display: inline-block;\n }\n\n .cal-label-sep {\n display: inline-block;\n padding-inline: var(--size-1);\n font-weight: var(--font-normal);\n color: var(--color-contrast-400);\n }\n\n /* ── Day grid ────────────────────────────────────────────────────────────── */\n\n /* Prevent display:flex from overriding the [hidden] attribute */\n [hidden] {\n display: none !important;\n }\n\n .cal-grid {\n display: flex;\n flex-direction: column;\n gap: var(--size-0-5);\n }\n\n .cal-grid-days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: var(--size-0-5);\n min-height: calc(7 * var(--size-10) + 6 * var(--size-0-5));\n }\n\n /* role=\"row\" wrappers exist for ARIA grid structure only — `display: contents`\n removes them from layout so their children still participate directly in the\n parent's CSS grid tracks. */\n .cal-grid [role='row'] {\n display: contents;\n }\n\n .cal-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--text-sm);\n cursor: pointer;\n outline: none;\n border-radius: var(--rounded-md);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n .cal-cell-head {\n height: var(--size-8);\n font-size: var(--text-xs);\n font-weight: var(--font-medium);\n color: var(--color-contrast-500);\n cursor: default;\n }\n\n .cal-cell-day {\n height: var(--size-8);\n color: var(--color-contrast-800);\n }\n\n .cal-cell-day:hover:not([data-disabled]) {\n color: var(--color-contrast-900);\n background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n }\n\n .cal-cell-day:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-cell-day[data-today] {\n font-weight: var(--font-semibold);\n color: var(--_day-today-color);\n }\n\n .cal-cell-day[data-selected] {\n font-weight: var(--font-semibold);\n color: var(--color-white, #fff);\n background: var(--_day-selected-bg);\n }\n\n .cal-cell-day[data-outside] {\n opacity: var(--_day-outside-opacity);\n }\n\n .cal-cell-day[data-disabled] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.3;\n }\n\n /* ── Month / Year grids ──────────────────────────────────────────────────── */\n\n .cal-grid-months,\n .cal-grid-years {\n /* 4-column grid — same width as cal-grid-days, natural height. */\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--size-1);\n }\n\n .cal-cell-month,\n .cal-cell-year {\n height: var(--size-10);\n font-size: var(--text-sm);\n color: var(--color-contrast-800);\n cursor: pointer;\n border-radius: var(--rounded-md);\n }\n\n .cal-cell-month:hover:not([data-disabled]),\n .cal-cell-year:hover:not([data-disabled]) {\n background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n }\n\n .cal-cell-month:focus-visible,\n .cal-cell-year:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-cell-month[data-selected],\n .cal-cell-year[data-selected] {\n font-weight: var(--font-semibold);\n color: var(--color-white, #fff);\n background: var(--_day-selected-bg);\n }\n\n .cal-cell-month[data-disabled],\n .cal-cell-year[data-disabled] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.3;\n }\n\n /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n @media (prefers-reduced-motion: reduce) {\n .field,\n .nav-btn,\n .cal-label-btn,\n .cal-cell {\n transition: none;\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"date-picker.css.js","names":[],"sources":["../../../src/inputs/date-picker/date-picker.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-focus));\n --_day-today-color: var(--date-picker-day-today-color, var(--_theme-focus));\n --_day-outside-opacity: var(--date-picker-day-outside-opacity, 0.35);\n --_bg: var(--date-picker-bg, var(--color-canvas));\n --_border-color: var(--date-picker-border-color, var(--color-contrast-200));\n --_radius: var(--date-picker-radius, var(--rounded-xl));\n\n display: inline-block;\n min-width: var(--date-picker-min-width, 12rem);\n }\n\n :host([fullwidth]) {\n display: block;\n }\n\n :host([color='secondary']) {\n --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-base));\n --_day-today-color: var(--date-picker-day-today-color, var(--_theme-base));\n }\n\n /* Make the trigger look like a button — ore-input is readonly so pointer changes to text by\n default. `width: 100%` matters just as much — see ore-select's own `.trigger` for why:\n `:host` is `display: inline-block`, which never stretches its own children to fill its own\n box the way a flex/grid container with `stretch` alignment would. */\n .trigger {\n width: 100%;\n cursor: pointer;\n }\n\n .trigger::part(input) {\n cursor: pointer;\n caret-color: transparent;\n user-select: none;\n }\n\n /* ── Calendar popup ──────────────────────────────────────────────────────── */\n\n /* `fixed` (not `absolute`) — positioned via JS-computed top/left (see the positioner in\n date-picker.ts), same as ore-select's own `.dropdown`. Laid out relative to the viewport,\n so it never affects any ancestor's box size or scrollable-overflow area — `absolute`\n positioned relative to the host did, once the host sat near a scroll/clip ancestor's edge. */\n .calendar {\n position: fixed;\n inset: 0 auto auto 0;\n z-index: var(--z-dropdown, 8000);\n display: flex;\n flex-direction: column;\n gap: var(--size-2);\n min-width: 18rem;\n padding: var(--size-3);\n pointer-events: none;\n background: var(--_bg);\n border: var(--border) solid var(--_border-color);\n border-radius: var(--_radius);\n box-shadow: var(--date-picker-shadow, var(--shadow-lg));\n\n /* Hidden by default */\n opacity: 0;\n backdrop-filter: blur(var(--blur-sm));\n transform: translateY(var(--overlay-enter-translate-y));\n transition: var(\n --_motion-transition,\n opacity var(--transition-fast),\n transform var(--transition-fast),\n display var(--transition-fast) allow-discrete\n );\n }\n\n .calendar[data-open] {\n pointer-events: auto;\n opacity: 1;\n transform: translateY(0);\n\n @starting-style {\n opacity: 0;\n transform: translateY(var(--overlay-enter-translate-y));\n }\n }\n\n /* ── Calendar header ─────────────────────────────────────────────────────── */\n\n .cal-header {\n display: flex;\n gap: var(--size-1);\n align-items: center;\n justify-content: space-between;\n padding-block-end: var(--size-2);\n border-block-end: var(--border) solid var(--_border-color);\n }\n\n .nav-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-8);\n height: var(--size-8);\n padding: 0;\n color: var(--color-contrast-600);\n cursor: pointer;\n outline: none;\n background: transparent;\n border: none;\n border-radius: var(--rounded-md);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n .nav-btn:hover {\n color: var(--color-contrast-900);\n background: var(--color-contrast-300);\n }\n\n .nav-btn:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-label-btn {\n flex: 1;\n padding: var(--size-1) var(--size-2);\n font-size: var(--text-sm);\n font-weight: var(--font-semibold);\n color: var(--color-contrast-900);\n text-align: center;\n cursor: pointer;\n outline: none;\n background: transparent;\n border: none;\n border-radius: var(--rounded-md);\n transition: background var(--transition-fast);\n }\n\n .cal-label-btn:hover {\n background: var(--color-contrast-300);\n }\n\n .cal-label-btn:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-label-month,\n .cal-label-year {\n display: inline-block;\n }\n\n .cal-label-sep {\n display: inline-block;\n padding-inline: var(--size-1);\n font-weight: var(--font-normal);\n color: var(--color-contrast-400);\n }\n\n /* ── Day grid ────────────────────────────────────────────────────────────── */\n\n /* Prevent display:flex from overriding the [hidden] attribute */\n [hidden] {\n display: none !important;\n }\n\n .cal-grid {\n display: flex;\n flex-direction: column;\n gap: var(--size-0-5);\n }\n\n .cal-grid-days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: var(--size-0-5);\n min-height: calc(7 * var(--size-10) + 6 * var(--size-0-5));\n }\n\n /* role=\"row\" wrappers exist for ARIA grid structure only — `display: contents`\n removes them from layout so their children still participate directly in the\n parent's CSS grid tracks. */\n .cal-grid [role='row'] {\n display: contents;\n }\n\n .cal-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--text-sm);\n cursor: pointer;\n outline: none;\n border-radius: var(--rounded-md);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n .cal-cell-head {\n height: var(--size-8);\n font-size: var(--text-xs);\n font-weight: var(--font-medium);\n color: var(--color-contrast-500);\n cursor: default;\n }\n\n .cal-cell-day {\n height: var(--size-8);\n color: var(--color-contrast-800);\n }\n\n .cal-cell-day:hover:not([data-disabled]) {\n color: var(--color-contrast-900);\n background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n }\n\n .cal-cell-day:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-cell-day[data-today] {\n font-weight: var(--font-semibold);\n color: var(--_day-today-color);\n }\n\n .cal-cell-day[data-selected] {\n font-weight: var(--font-semibold);\n color: var(--color-white, #fff);\n background: var(--_day-selected-bg);\n }\n\n .cal-cell-day[data-outside] {\n opacity: var(--_day-outside-opacity);\n }\n\n .cal-cell-day[data-disabled] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.3;\n }\n\n /* ── Month / Year grids ──────────────────────────────────────────────────── */\n\n .cal-grid-months,\n .cal-grid-years {\n /* 4-column grid — same width as cal-grid-days, natural height. */\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--size-1);\n }\n\n .cal-cell-month,\n .cal-cell-year {\n height: var(--size-10);\n font-size: var(--text-sm);\n color: var(--color-contrast-800);\n cursor: pointer;\n border-radius: var(--rounded-md);\n }\n\n .cal-cell-month:hover:not([data-disabled]),\n .cal-cell-year:hover:not([data-disabled]) {\n background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n }\n\n .cal-cell-month:focus-visible,\n .cal-cell-year:focus-visible {\n box-shadow: 0 0 0 2px var(--_day-selected-bg);\n }\n\n .cal-cell-month[data-selected],\n .cal-cell-year[data-selected] {\n font-weight: var(--font-semibold);\n color: var(--color-white, #fff);\n background: var(--_day-selected-bg);\n }\n\n .cal-cell-month[data-disabled],\n .cal-cell-year[data-disabled] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.3;\n }\n\n /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n @media (prefers-reduced-motion: reduce) {\n .field,\n .nav-btn,\n .cal-label-btn,\n .cal-cell {\n transition: none;\n }\n }\n}\n"],"mappings":""}
|
|
@@ -37,6 +37,11 @@ export type OreDatePickerProps = {
|
|
|
37
37
|
rounded?: RoundedSize;
|
|
38
38
|
/** Component size */
|
|
39
39
|
size?: ComponentSize;
|
|
40
|
+
/**
|
|
41
|
+
* Shows an inline green check icon inside the field to confirm the value has
|
|
42
|
+
* passed validation. Ignored while `error` is set — an error always wins.
|
|
43
|
+
*/
|
|
44
|
+
success?: boolean;
|
|
40
45
|
/**
|
|
41
46
|
* Selected date in ISO 8601 format (yyyy-MM-dd).
|
|
42
47
|
* @example '2025-06-15'
|
|
@@ -70,6 +75,7 @@ export type OreDatePickerProps = {
|
|
|
70
75
|
* @attr {boolean} required - Required field
|
|
71
76
|
* @attr {string} name - Form field name
|
|
72
77
|
* @attr {string} error - Error message
|
|
78
|
+
* @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)
|
|
73
79
|
* @attr {string} helper - Helper text
|
|
74
80
|
* @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
|
|
75
81
|
* @attr {string} size - Component size: 'sm' | 'md' | 'lg'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/inputs/date-picker/date-picker.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAU1F,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AAQxB,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IACnD;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/inputs/date-picker/date-picker.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAU1F,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AAQxB,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IACnD;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,eAAe,EAAG,iBAA0B,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const e=require("../../headless/announcer.cjs");let t=require("@vielzeug/ripple"),n=require("@vielzeug/dnd");var r=e=>{if(e===0)return`0 B`;let t=1024,n=[`B`,`KB`,`MB`,`GB`,`TB`],r=Math.floor(Math.log(e)/Math.log(t));return`${parseFloat((e/t**r).toFixed(1))} ${n[r]}`},i=(e,t)=>!t||e.size<=t,a=e=>e>0?`${r(e)}/s`:``,o=e=>e?e.split(`,`).map(e=>e.trim()):[],s={error:null,loaded:0,speedBps:0,status:`idle`},c=e=>{if(e.speedBps<=0||e.status!==`uploading`)return``;let t=Math.max(0,Math.round((e.total-e.loaded)/e.speedBps));return t<60?`${t}s left`:`${Math.round(t/60)}m left`};function l(r){let l=(0,t.signal)([]),u=new Map,d=new Map;function f(e){let n=u.get(e);return n||(n=(0,t.signal)({...s,total:e.size}),u.set(e,n)),n}function p(e){return f(e).value}function m(e,t){let n=f(e);n.value={...n.value,...t}}function h(t,n=0){if(r.disabled.value)return;let i=r.upload.value;if(!i)return;d.get(t)?.abort();let a=new AbortController;d.set(t,a),m(t,{error:null,loaded:n,speedBps:0,status:`uploading`,total:t.size});let o=performance.now(),s=n;i(t,{onProgress:(e,n)=>{if(a.signal.aborted)return;let i=performance.now(),c=(i-o)/1e3,l=c>0?Math.max(0,(e-s)/c):0,u=p(t).speedBps,d=u>0?u*.7+l*.3:l;o=i,s=e,m(t,{loaded:e,speedBps:d,total:n||t.size}),r.onUploadProgress(t,e,n||t.size)},resumeFrom:n,signal:a.signal}).then(()=>{a.signal.aborted||(m(t,{loaded:t.size,speedBps:0,status:`success`}),e.announce(`${t.name} uploaded successfully.`),r.onUploadSuccess(t))}).catch(n=>{if(a.signal.aborted)return;let i=n instanceof Error?n.message:String(n);m(t,{error:i,speedBps:0,status:`error`}),e.announce(`${t.name} failed to upload: ${i}`,{politeness:`assertive`}),r.onUploadError(t,n)})}function g(e){r.disabled.value||h(e,p(e).loaded)}function _(e){let t=new Set(e);for(let e of u.keys())t.has(e)||(d.get(e)?.abort(),d.delete(e),u.delete(e))}let v=(0,t.watch)(l,_);function y(e,t){if(r.disabled.value)return;let a=r.multiple.value,s=Array.from(e);a||(s=s.slice(0,1));let c=o(r.accept.value),u=r.maxSize.value;s=s.filter(e=>(0,n.matchesAccept)(e,c)&&i(e,u));let d=a?[...l.value]:[],f=[];for(let e of s)d.includes(e)||(d.push(e),f.push(e));let p=r.maxFiles.value;p>0&&d.length>p&&(d=d.slice(0,p)),l.value=d,r.onChange(l.value,t);for(let e of f)l.value.includes(e)&&h(e)}function b(e,t){r.disabled.value||(l.value=l.value.filter(t=>t!==e),r.onRemove(e,l.value,t),r.onChange(l.value,t))}function x(e,t,a){return r.disabled.value||!(0,n.matchesAccept)(t,o(r.accept.value))||!i(t,r.maxSize.value)?!1:(l.value=l.value.map(n=>n===e?t:n),r.onRemove(e,l.value,a),r.onChange(l.value,a),h(t),!0)}function S(e){let t=p(e);return t.total<=0?0:Math.min(100,Math.round(t.loaded/t.total*100))}function C(e){let t=p(e);return[a(t.speedBps),c(t)].filter(Boolean).join(` · `)}function w(e){let t=p(e).status;return t===`success`?`check`:t===`error`?`alert-circle`:`file`}function T(){v.dispose();for(let e of d.values())e.abort();d.clear(),u.clear()}return{addFiles:y,dispose:T,files:l,fileState:p,removeFile:b,replaceFile:x,retryUpload:g,statusIconName:w,uploadMetaText:C,uploadPercent:S}}exports.createFileQueue=l,exports.formatBytes=r;
|
|
2
|
+
//# sourceMappingURL=file-input-upload.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"file-input-upload.cjs","names":[],"sources":["../../../src/inputs/file-input/file-input-upload.ts"],"sourcesContent":["import { matchesAccept } from '@vielzeug/dnd';\nimport { type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../headless';\n\n// ── Byte/speed formatting ────────────────────────────────────────────────────\n\nexport const formatBytes = (bytes: number): string => {\n if (bytes === 0) return '0 B';\n\n const k = 1024;\n const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;\n};\n\nconst isFileSizeAllowed = (file: File, maxSize: number): boolean => !maxSize || file.size <= maxSize;\n\nconst formatSpeed = (bytesPerSecond: number): string => (bytesPerSecond > 0 ? `${formatBytes(bytesPerSecond)}/s` : '');\n\nconst parseAccept = (accept: string | undefined): string[] => (accept ? accept.split(',').map((t) => t.trim()) : []);\n\n// ── Upload lifecycle types ───────────────────────────────────────────────────\n\n/** Upload lifecycle status for a single file. `idle` covers both \"no `upload` handler wired up\"\n * (picker-only mode, fully supported) and \"not started yet\". */\nexport type FileUploadStatus = 'error' | 'idle' | 'success' | 'uploading';\n\n/** Per-file upload snapshot. One reactive signal per file — see `createFileQueue` — not one\n * signal holding a map, so a progress tick for one file never invalidates another's bindings. */\nexport type FileUploadState = {\n error: string | null;\n loaded: number;\n speedBps: number;\n status: FileUploadStatus;\n total: number;\n};\n\nconst IDLE_UPLOAD_STATE: Omit<FileUploadState, 'total'> = { error: null, loaded: 0, speedBps: 0, status: 'idle' };\n\nconst formatEta = (state: FileUploadState): string => {\n if (state.speedBps <= 0 || state.status !== 'uploading') return '';\n\n const remainingSeconds = Math.max(0, Math.round((state.total - state.loaded) / state.speedBps));\n\n if (remainingSeconds < 60) return `${remainingSeconds}s left`;\n\n return `${Math.round(remainingSeconds / 60)}m left`;\n};\n\n/**\n * Consumer-supplied transport — this component has no built-in network layer (zero-dependency,\n * transport-agnostic by design, same reasoning as `courier`'s own fetch-wrapping-only stance).\n * This function is the seam between the UI's upload lifecycle (progress, retry, per-file\n * isolation) and however the app actually moves bytes (`fetch`, `XMLHttpRequest`, a presigned S3\n * PUT, `@vielzeug/courier`, …).\n *\n * `resumeFrom` is a *hint*, not a guarantee: it's the byte offset the component last observed\n * via `onProgress` before the previous attempt failed (0 on a fresh upload). A transport that\n * supports byte ranges (e.g. an HTTP `Range`/`Content-Range` header, S3 multipart, tus) can use\n * it to genuinely resume from that point; a plain `fetch(url, { body: file })` can ignore it and\n * simply re-send the whole file — the UI still shows a resumed-from-N-bytes experience either\n * way, since the file itself was never dropped from memory.\n */\nexport type FileUploadFn = (\n file: File,\n ctx: { onProgress: (loaded: number, total: number) => void; resumeFrom: number; signal: AbortSignal },\n) => Promise<void>;\n\n// ── Queue ─────────────────────────────────────────────────────────────────────\n\nexport type FileQueueOptions = {\n accept: Readable<string | undefined>;\n disabled: Readable<boolean>;\n maxFiles: Readable<number>;\n maxSize: Readable<number>;\n multiple: Readable<boolean>;\n onChange: (files: File[], originalEvent?: Event) => void;\n onRemove: (file: File, files: File[], originalEvent?: Event) => void;\n onUploadError: (file: File, error: unknown) => void;\n onUploadProgress: (file: File, loaded: number, total: number) => void;\n onUploadSuccess: (file: File) => void;\n upload: Readable<FileUploadFn | undefined>;\n};\n\nexport type FileQueue = {\n addFiles(newFiles: File[], originalEvent?: Event): void;\n dispose(): void;\n readonly files: Readable<File[]>;\n fileState(file: File): FileUploadState;\n removeFile(file: File, originalEvent?: Event): void;\n /** Validates `newFile` (accept/max-size) and, if accepted, swaps it in for `oldFile` in place\n * and starts its upload. Returns whether the replacement was accepted. Also fires `onRemove`\n * for `oldFile` — a replace is a removal-and-add that happen to land in the same slot, and a\n * consumer listening only for removal (e.g. to clean up a server-side record) still needs to\n * hear that the old file is gone. */\n replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean;\n retryUpload(file: File): void;\n statusIconName(file: File): string;\n uploadMetaText(file: File): string;\n uploadPercent(file: File): number;\n};\n\n/**\n * Owns file selection *and* the opt-in upload lifecycle together — they were never really\n * separable (adding a file starts its upload; removing one must abort it; replacing one is both\n * at once). Independent of `html`/rendering, following the same shape as `datagrid`'s\n * `createDataGridControls` and `combobox`'s `combobox-options.ts`: a factory `file-input.ts`\n * wires into drag/drop/native-input events and the template, directly unit-testable without\n * mounting a component.\n *\n * Every file-level rule (accept, max-size, max-files, disabled) and every upload-lifecycle rule\n * (progress, retry-from-offset, per-file isolation) lives here in one place.\n */\nexport function createFileQueue(options: FileQueueOptions): FileQueue {\n const files = signal<File[]>([]);\n const stateSignals = new Map<File, ReturnType<typeof signal<FileUploadState>>>();\n const controllers = new Map<File, AbortController>();\n\n function stateSignal(file: File): ReturnType<typeof signal<FileUploadState>> {\n let s = stateSignals.get(file);\n\n if (!s) {\n s = signal<FileUploadState>({ ...IDLE_UPLOAD_STATE, total: file.size });\n stateSignals.set(file, s);\n }\n\n return s;\n }\n\n function fileState(file: File): FileUploadState {\n return stateSignal(file).value;\n }\n\n function patchState(file: File, patch: Partial<FileUploadState>): void {\n const s = stateSignal(file);\n\n s.value = { ...s.value, ...patch };\n }\n\n // Each file gets its own `AbortController` and its own promise chain — nothing here `await`s\n // another file's upload, so one file's rejection can never block, freeze, or cancel the others.\n function startUpload(file: File, resumeFrom = 0): void {\n if (options.disabled.value) return;\n\n const uploadFn = options.upload.value;\n\n if (!uploadFn) return;\n\n controllers.get(file)?.abort();\n\n const controller = new AbortController();\n\n controllers.set(file, controller);\n patchState(file, { error: null, loaded: resumeFrom, speedBps: 0, status: 'uploading', total: file.size });\n\n // Rolling (exponential-moving-average) speed estimate rather than a naive\n // `loaded / elapsedSinceStart` average — the latter drags heavily behind the file's actual\n // *current* rate right after a slow start or a mid-transfer stall.\n let lastSampleAt = performance.now();\n let lastSampleLoaded = resumeFrom;\n\n uploadFn(file, {\n onProgress: (loaded, total) => {\n if (controller.signal.aborted) return;\n\n const now = performance.now();\n const elapsedSeconds = (now - lastSampleAt) / 1000;\n const instantBps = elapsedSeconds > 0 ? Math.max(0, (loaded - lastSampleLoaded) / elapsedSeconds) : 0;\n const previousBps = fileState(file).speedBps;\n const speedBps = previousBps > 0 ? previousBps * 0.7 + instantBps * 0.3 : instantBps;\n\n lastSampleAt = now;\n lastSampleLoaded = loaded;\n patchState(file, { loaded, speedBps, total: total || file.size });\n options.onUploadProgress(file, loaded, total || file.size);\n },\n resumeFrom,\n signal: controller.signal,\n })\n .then(() => {\n if (controller.signal.aborted) return;\n\n patchState(file, { loaded: file.size, speedBps: 0, status: 'success' });\n announce(`${file.name} uploaded successfully.`);\n options.onUploadSuccess(file);\n })\n .catch((error: unknown) => {\n if (controller.signal.aborted) return;\n\n const message = error instanceof Error ? error.message : String(error);\n\n patchState(file, { error: message, speedBps: 0, status: 'error' });\n announce(`${file.name} failed to upload: ${message}`, { politeness: 'assertive' });\n options.onUploadError(file, error);\n });\n }\n\n // Resumes from the last byte offset this file actually reached, not from 0 — see\n // `FileUploadFn`'s doc comment on what \"resume\" honestly means when the transport is\n // consumer-supplied.\n function retryUpload(file: File): void {\n if (options.disabled.value) return;\n\n startUpload(file, fileState(file).loaded);\n }\n\n // Aborts + drops upload state for any file no longer in `files` — covers plain removal, a\n // non-`multiple` selection replacing the previous file, and `replaceFile()` swapping one File\n // for another. One cleanup path instead of duplicating it at every call site that can shrink\n // `files`.\n function dropOrphanedState(activeFiles: File[]): void {\n const keep = new Set(activeFiles);\n\n for (const file of stateSignals.keys()) {\n if (keep.has(file)) continue;\n\n controllers.get(file)?.abort();\n controllers.delete(file);\n stateSignals.delete(file);\n }\n }\n\n const filesWatch = watch(files, dropOrphanedState);\n\n function addFiles(newFiles: File[], originalEvent?: Event): void {\n if (options.disabled.value) return;\n\n const isMultiple = options.multiple.value;\n let incoming = Array.from(newFiles);\n\n if (!isMultiple) incoming = incoming.slice(0, 1);\n\n const acceptList = parseAccept(options.accept.value);\n const maxSize = options.maxSize.value;\n\n incoming = incoming.filter((f) => matchesAccept(f, acceptList) && isFileSizeAllowed(f, maxSize));\n\n let updated: File[] = isMultiple ? [...files.value] : [];\n const added: File[] = [];\n\n for (const f of incoming) {\n if (!updated.includes(f)) {\n updated.push(f);\n added.push(f);\n }\n }\n\n const maxFiles = options.maxFiles.value;\n\n if (maxFiles > 0 && updated.length > maxFiles) updated = updated.slice(0, maxFiles);\n\n files.value = updated;\n options.onChange(files.value, originalEvent);\n\n for (const f of added) {\n if (files.value.includes(f)) startUpload(f);\n }\n }\n\n function removeFile(file: File, originalEvent?: Event): void {\n if (options.disabled.value) return;\n\n files.value = files.value.filter((f) => f !== file);\n options.onRemove(file, files.value, originalEvent);\n options.onChange(files.value, originalEvent);\n }\n\n function replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean {\n if (options.disabled.value) return false;\n\n const acceptList = parseAccept(options.accept.value);\n\n if (!matchesAccept(newFile, acceptList) || !isFileSizeAllowed(newFile, options.maxSize.value)) return false;\n\n files.value = files.value.map((f) => (f === oldFile ? newFile : f));\n options.onRemove(oldFile, files.value, originalEvent);\n options.onChange(files.value, originalEvent);\n startUpload(newFile);\n\n return true;\n }\n\n function uploadPercent(file: File): number {\n const state = fileState(file);\n\n if (state.total <= 0) return 0;\n\n return Math.min(100, Math.round((state.loaded / state.total) * 100));\n }\n\n // Speed + ETA on one line — percent itself is rendered separately (e.g. `<ore-progress>`'s\n // own `label`), so this only needs the two metrics that wouldn't otherwise fit there.\n function uploadMetaText(file: File): string {\n const state = fileState(file);\n\n return [formatSpeed(state.speedBps), formatEta(state)].filter(Boolean).join(' · ');\n }\n\n function statusIconName(file: File): string {\n const status = fileState(file).status;\n\n if (status === 'success') return 'check';\n\n if (status === 'error') return 'alert-circle';\n\n return 'file';\n }\n\n function dispose(): void {\n filesWatch.dispose();\n\n for (const controller of controllers.values()) controller.abort();\n\n controllers.clear();\n stateSignals.clear();\n }\n\n return {\n addFiles,\n dispose,\n files,\n fileState,\n removeFile,\n replaceFile,\n retryUpload,\n statusIconName,\n uploadMetaText,\n uploadPercent,\n };\n}\n"],"mappings":"6GAOA,IAAa,EAAe,GAA0B,CACpD,GAAI,IAAU,EAAG,MAAO,MAExB,IAAM,EAAI,KACJ,EAAQ,CAAC,IAAK,KAAM,KAAM,KAAM,IAAI,EACpC,EAAI,KAAK,MAAM,KAAK,IAAI,CAAK,EAAI,KAAK,IAAI,CAAC,CAAC,EAElD,MAAO,GAAG,YAAY,EAAiB,GAAG,EAAC,CAAG,QAAQ,CAAC,CAAC,EAAE,GAAG,EAAM,IACrE,EAEM,GAAqB,EAAY,IAA6B,CAAC,GAAW,EAAK,MAAQ,EAEvF,EAAe,GAAoC,EAAiB,EAAI,GAAG,EAAY,CAAc,EAAE,IAAM,GAE7G,EAAe,GAA0C,EAAS,EAAO,MAAM,GAAG,CAAC,CAAC,IAAK,GAAM,EAAE,KAAK,CAAC,EAAI,CAAC,EAkB5G,EAAoD,CAAE,MAAO,KAAM,OAAQ,EAAG,SAAU,EAAG,OAAQ,MAAO,EAE1G,EAAa,GAAmC,CACpD,GAAI,EAAM,UAAY,GAAK,EAAM,SAAW,YAAa,MAAO,GAEhE,IAAM,EAAmB,KAAK,IAAI,EAAG,KAAK,OAAO,EAAM,MAAQ,EAAM,QAAU,EAAM,QAAQ,CAAC,EAI9F,OAFI,EAAmB,GAAW,GAAG,EAAiB,QAE/C,GAAG,KAAK,MAAM,EAAmB,EAAE,EAAE,OAC9C,EAkEA,SAAgB,EAAgB,EAAsC,CACpE,IAAM,GAAA,EAAA,EAAA,OAAA,CAAuB,CAAC,CAAC,EACzB,EAAe,IAAI,IACnB,EAAc,IAAI,IAExB,SAAS,EAAY,EAAwD,CAC3E,IAAI,EAAI,EAAa,IAAI,CAAI,EAO7B,OALK,IACH,GAAA,EAAA,EAAA,OAAA,CAA4B,CAAE,GAAG,EAAmB,MAAO,EAAK,IAAK,CAAC,EACtE,EAAa,IAAI,EAAM,CAAC,GAGnB,CACT,CAEA,SAAS,EAAU,EAA6B,CAC9C,OAAO,EAAY,CAAI,CAAC,CAAC,KAC3B,CAEA,SAAS,EAAW,EAAY,EAAuC,CACrE,IAAM,EAAI,EAAY,CAAI,EAE1B,EAAE,MAAQ,CAAE,GAAG,EAAE,MAAO,GAAG,CAAM,CACnC,CAIA,SAAS,EAAY,EAAY,EAAa,EAAS,CACrD,GAAI,EAAQ,SAAS,MAAO,OAE5B,IAAM,EAAW,EAAQ,OAAO,MAEhC,GAAI,CAAC,EAAU,OAEf,EAAY,IAAI,CAAI,CAAC,EAAE,MAAM,EAE7B,IAAM,EAAa,IAAI,gBAEvB,EAAY,IAAI,EAAM,CAAU,EAChC,EAAW,EAAM,CAAE,MAAO,KAAM,OAAQ,EAAY,SAAU,EAAG,OAAQ,YAAa,MAAO,EAAK,IAAK,CAAC,EAKxG,IAAI,EAAe,YAAY,IAAI,EAC/B,EAAmB,EAEvB,EAAS,EAAM,CACb,YAAa,EAAQ,IAAU,CAC7B,GAAI,EAAW,OAAO,QAAS,OAE/B,IAAM,EAAM,YAAY,IAAI,EACtB,GAAkB,EAAM,GAAgB,IACxC,EAAa,EAAiB,EAAI,KAAK,IAAI,GAAI,EAAS,GAAoB,CAAc,EAAI,EAC9F,EAAc,EAAU,CAAI,CAAC,CAAC,SAC9B,EAAW,EAAc,EAAI,EAAc,GAAM,EAAa,GAAM,EAE1E,EAAe,EACf,EAAmB,EACnB,EAAW,EAAM,CAAE,SAAQ,WAAU,MAAO,GAAS,EAAK,IAAK,CAAC,EAChE,EAAQ,iBAAiB,EAAM,EAAQ,GAAS,EAAK,IAAI,CAC3D,EACA,aACA,OAAQ,EAAW,MACrB,CAAC,CAAC,CACC,SAAW,CACN,EAAW,OAAO,UAEtB,EAAW,EAAM,CAAE,OAAQ,EAAK,KAAM,SAAU,EAAG,OAAQ,SAAU,CAAC,EACtE,EAAA,SAAS,GAAG,EAAK,KAAK,wBAAwB,EAC9C,EAAQ,gBAAgB,CAAI,EAC9B,CAAC,CAAC,CACD,MAAO,GAAmB,CACzB,GAAI,EAAW,OAAO,QAAS,OAE/B,IAAM,EAAU,aAAiB,MAAQ,EAAM,QAAU,OAAO,CAAK,EAErE,EAAW,EAAM,CAAE,MAAO,EAAS,SAAU,EAAG,OAAQ,OAAQ,CAAC,EACjE,EAAA,SAAS,GAAG,EAAK,KAAK,qBAAqB,IAAW,CAAE,WAAY,WAAY,CAAC,EACjF,EAAQ,cAAc,EAAM,CAAK,CACnC,CAAC,CACL,CAKA,SAAS,EAAY,EAAkB,CACjC,EAAQ,SAAS,OAErB,EAAY,EAAM,EAAU,CAAI,CAAC,CAAC,MAAM,CAC1C,CAMA,SAAS,EAAkB,EAA2B,CACpD,IAAM,EAAO,IAAI,IAAI,CAAW,EAEhC,IAAK,IAAM,KAAQ,EAAa,KAAK,EAC/B,EAAK,IAAI,CAAI,IAEjB,EAAY,IAAI,CAAI,CAAC,EAAE,MAAM,EAC7B,EAAY,OAAO,CAAI,EACvB,EAAa,OAAO,CAAI,EAE5B,CAEA,IAAM,GAAA,EAAA,EAAA,MAAA,CAAmB,EAAO,CAAiB,EAEjD,SAAS,EAAS,EAAkB,EAA6B,CAC/D,GAAI,EAAQ,SAAS,MAAO,OAE5B,IAAM,EAAa,EAAQ,SAAS,MAChC,EAAW,MAAM,KAAK,CAAQ,EAE7B,IAAY,EAAW,EAAS,MAAM,EAAG,CAAC,GAE/C,IAAM,EAAa,EAAY,EAAQ,OAAO,KAAK,EAC7C,EAAU,EAAQ,QAAQ,MAEhC,EAAW,EAAS,OAAQ,IAAA,EAAA,EAAA,cAAA,CAAoB,EAAG,CAAU,GAAK,EAAkB,EAAG,CAAO,CAAC,EAE/F,IAAI,EAAkB,EAAa,CAAC,GAAG,EAAM,KAAK,EAAI,CAAC,EACjD,EAAgB,CAAC,EAEvB,IAAK,IAAM,KAAK,EACT,EAAQ,SAAS,CAAC,IACrB,EAAQ,KAAK,CAAC,EACd,EAAM,KAAK,CAAC,GAIhB,IAAM,EAAW,EAAQ,SAAS,MAE9B,EAAW,GAAK,EAAQ,OAAS,IAAU,EAAU,EAAQ,MAAM,EAAG,CAAQ,GAElF,EAAM,MAAQ,EACd,EAAQ,SAAS,EAAM,MAAO,CAAa,EAE3C,IAAK,IAAM,KAAK,EACV,EAAM,MAAM,SAAS,CAAC,GAAG,EAAY,CAAC,CAE9C,CAEA,SAAS,EAAW,EAAY,EAA6B,CACvD,EAAQ,SAAS,QAErB,EAAM,MAAQ,EAAM,MAAM,OAAQ,GAAM,IAAM,CAAI,EAClD,EAAQ,SAAS,EAAM,EAAM,MAAO,CAAa,EACjD,EAAQ,SAAS,EAAM,MAAO,CAAa,EAC7C,CAEA,SAAS,EAAY,EAAe,EAAe,EAAgC,CAYjF,OAXI,EAAQ,SAAS,OAIjB,EAAA,EAAA,EAAA,cAAA,CAAe,EAFA,EAAY,EAAQ,OAAO,KAElB,CAAU,GAAK,CAAC,EAAkB,EAAS,EAAQ,QAAQ,KAAK,EAAU,IAEtG,EAAM,MAAQ,EAAM,MAAM,IAAK,GAAO,IAAM,EAAU,EAAU,CAAE,EAClE,EAAQ,SAAS,EAAS,EAAM,MAAO,CAAa,EACpD,EAAQ,SAAS,EAAM,MAAO,CAAa,EAC3C,EAAY,CAAO,EAEZ,GACT,CAEA,SAAS,EAAc,EAAoB,CACzC,IAAM,EAAQ,EAAU,CAAI,EAI5B,OAFI,EAAM,OAAS,EAAU,EAEtB,KAAK,IAAI,IAAK,KAAK,MAAO,EAAM,OAAS,EAAM,MAAS,GAAG,CAAC,CACrE,CAIA,SAAS,EAAe,EAAoB,CAC1C,IAAM,EAAQ,EAAU,CAAI,EAE5B,MAAO,CAAC,EAAY,EAAM,QAAQ,EAAG,EAAU,CAAK,CAAC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,KAAK,CACnF,CAEA,SAAS,EAAe,EAAoB,CAC1C,IAAM,EAAS,EAAU,CAAI,CAAC,CAAC,OAM/B,OAJI,IAAW,UAAkB,QAE7B,IAAW,QAAgB,eAExB,MACT,CAEA,SAAS,GAAgB,CACvB,EAAW,QAAQ,EAEnB,IAAK,IAAM,KAAc,EAAY,OAAO,EAAG,EAAW,MAAM,EAEhE,EAAY,MAAM,EAClB,EAAa,MAAM,CACrB,CAEA,MAAO,CACL,WACA,UACA,QACA,YACA,aACA,cACA,cACA,iBACA,iBACA,eACF,CACF"}
|