@editora/ui-core 0.1.19 → 0.1.21
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/{ElementBase-1b301e7f.js → ElementBase-EV6mVBUV.js} +1 -1
- package/dist/{ElementBase-909688f3.mjs → ElementBase-YlTLMsGk.mjs} +3 -3
- package/dist/accordion.cjs.js +3 -3
- package/dist/accordion.esm.js +39 -62
- package/dist/alert-dialog.cjs.js +19 -19
- package/dist/alert-dialog.esm.js +69 -87
- package/dist/alert.cjs.js +1 -1
- package/dist/alert.esm.js +4 -7
- package/dist/anchor.cjs.js +2 -2
- package/dist/anchor.esm.js +3 -3
- package/dist/animated-beam.cjs.js +83 -83
- package/dist/animated-beam.esm.js +250 -277
- package/dist/animated-list.cjs.js +4 -4
- package/dist/animated-list.esm.js +47 -61
- package/dist/animated-text.cjs.js +2 -2
- package/dist/animated-text.esm.js +13 -24
- package/dist/app-header.cjs.js +3 -3
- package/dist/app-header.esm.js +11 -13
- package/dist/aspect-ratio.cjs.js +1 -1
- package/dist/aspect-ratio.esm.js +4 -7
- package/dist/avatar.cjs.js +1 -1
- package/dist/avatar.esm.js +7 -13
- package/dist/badge.cjs.js +1 -1
- package/dist/badge.esm.js +4 -7
- package/dist/block-controls.cjs.js +2 -2
- package/dist/block-controls.esm.js +19 -35
- package/dist/box.cjs.js +1 -1
- package/dist/box.esm.js +8 -15
- package/dist/breadcrumb.cjs.js +2 -2
- package/dist/breadcrumb.esm.js +20 -37
- package/dist/button.cjs.js +1 -521
- package/dist/button.esm.js +2 -671
- package/dist/{calendar-2c11b824.mjs → calendar-DLY4acgn.mjs} +293 -342
- package/dist/{calendar-a8735e40.js → calendar-Dkof-FTK.js} +25 -25
- package/dist/calendar.cjs.js +1 -1
- package/dist/calendar.esm.js +8 -9
- package/dist/card.cjs.js +4 -4
- package/dist/card.esm.js +13 -19
- package/dist/chart.cjs.js +64 -64
- package/dist/chart.esm.js +223 -254
- package/dist/checkbox.cjs.js +1 -1
- package/dist/checkbox.esm.js +2 -3
- package/dist/collapsible.cjs.js +1 -1
- package/dist/collapsible.esm.js +5 -9
- package/dist/{collection-a1aac0c6.mjs → collection-C7URGjEI.mjs} +8 -14
- package/dist/collection.cjs.js +1 -1
- package/dist/collection.esm.js +30 -29
- package/dist/color-picker.cjs.js +10 -10
- package/dist/color-picker.esm.js +190 -253
- package/dist/combobox.cjs.js +13 -13
- package/dist/combobox.esm.js +93 -126
- package/dist/command-palette.cjs.js +3 -3
- package/dist/command-palette.esm.js +19 -30
- package/dist/command.cjs.js +4 -4
- package/dist/command.esm.js +41 -53
- package/dist/components/ui-collection.d.ts.map +1 -1
- package/dist/components/ui-multi-select.d.ts.map +1 -1
- package/dist/components/ui-orbiter.d.ts.map +1 -1
- package/dist/components/ui-portal.d.ts.map +1 -1
- package/dist/components/ui-positioner.d.ts.map +1 -1
- package/dist/components/ui-skeleton.d.ts.map +1 -1
- package/dist/components/ui-sortable.d.ts +8 -0
- package/dist/components/ui-sortable.d.ts.map +1 -1
- package/dist/components/ui-split-button.d.ts +1 -0
- package/dist/components/ui-split-button.d.ts.map +1 -1
- package/dist/components/ui-tabs.d.ts.map +1 -1
- package/dist/components/ui-textarea.d.ts.map +1 -1
- package/dist/components/ui-time-picker.d.ts.map +1 -1
- package/dist/container.cjs.js +2 -2
- package/dist/container.esm.js +2 -3
- package/dist/context-menu.cjs.js +8 -8
- package/dist/context-menu.esm.js +157 -219
- package/dist/control-group.cjs.js +1 -1
- package/dist/control-group.esm.js +2 -3
- package/dist/data-table.cjs.js +4 -4
- package/dist/data-table.esm.js +299 -381
- package/dist/date-field.cjs.js +3 -3
- package/dist/date-field.esm.js +68 -80
- package/dist/date-picker.cjs.js +9 -9
- package/dist/date-picker.esm.js +69 -97
- package/dist/date-range-picker.cjs.js +3 -3
- package/dist/date-range-picker.esm.js +32 -56
- package/dist/date-range-time-picker.cjs.js +9 -9
- package/dist/date-range-time-picker.esm.js +111 -140
- package/dist/date-time-picker.cjs.js +7 -7
- package/dist/date-time-picker.esm.js +115 -147
- package/dist/date-time-utils-Dmost5Ee.js +1 -0
- package/dist/date-time-utils-y1N2gvG2.mjs +268 -0
- package/dist/description.cjs.js +1 -1
- package/dist/description.esm.js +3 -5
- package/dist/dialog.cjs.js +12 -12
- package/dist/dialog.esm.js +44 -63
- package/dist/direction-provider.cjs.js +1 -1
- package/dist/direction-provider.esm.js +2 -3
- package/dist/{dismissable-layer-9c7e6b58.mjs → dismissable-layer-BmPIoK80.mjs} +29 -33
- package/dist/dismissable-layer-DNfrKA20.js +1 -0
- package/dist/dismissable-layer.cjs.js +2 -2
- package/dist/dismissable-layer.esm.js +4 -6
- package/dist/dock.cjs.js +5 -5
- package/dist/dock.esm.js +134 -155
- package/dist/drawer.cjs.js +2 -2
- package/dist/drawer.esm.js +18 -35
- package/dist/dropdown.cjs.js +2 -2
- package/dist/dropdown.esm.js +119 -149
- package/dist/dropzone.cjs.js +1 -1
- package/dist/dropzone.esm.js +0 -1
- package/dist/empty-state.cjs.js +1 -1
- package/dist/empty-state.esm.js +1 -1
- package/dist/field-error.cjs.js +1 -1
- package/dist/field-error.esm.js +3 -5
- package/dist/field.cjs.js +5 -5
- package/dist/field.esm.js +27 -34
- package/dist/fieldset.cjs.js +4 -4
- package/dist/fieldset.esm.js +19 -24
- package/dist/file-upload.cjs.js +4 -4
- package/dist/file-upload.esm.js +69 -93
- package/dist/flex.cjs.js +1 -1
- package/dist/flex.esm.js +5 -9
- package/dist/floating-toolbar.cjs.js +4 -4
- package/dist/floating-toolbar.esm.js +60 -85
- package/dist/focus-scope-Bwug2gDv.js +1 -0
- package/dist/{focus-scope-103833ee.mjs → focus-scope-CmEsG5UZ.mjs} +39 -48
- package/dist/focus-scope.cjs.js +2 -2
- package/dist/focus-scope.esm.js +15 -20
- package/dist/form.cjs.js +2 -2
- package/dist/form.esm.js +26 -53
- package/dist/gantt.cjs.js +43 -43
- package/dist/gantt.esm.js +295 -322
- package/dist/grid.cjs.js +1 -1
- package/dist/grid.esm.js +5 -9
- package/dist/hover-card.cjs.js +4 -4
- package/dist/hover-card.esm.js +22 -28
- package/dist/icon-cloud.cjs.js +7 -7
- package/dist/icon-cloud.esm.js +48 -62
- package/dist/icon.cjs.js +1 -1
- package/dist/icon.esm.js +2 -4
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +378 -390
- package/dist/inline-edit.cjs.js +11 -11
- package/dist/inline-edit.esm.js +32 -36
- package/dist/input.cjs.js +17 -17
- package/dist/input.esm.js +50 -63
- package/dist/label.cjs.js +2 -2
- package/dist/label.esm.js +8 -17
- package/dist/layout.cjs.js +2 -2
- package/dist/layout.esm.js +20 -26
- package/dist/listbox-B6QgECax.js +46 -0
- package/dist/listbox-DJamVeFj.mjs +200 -0
- package/dist/listbox.cjs.js +1 -1
- package/dist/listbox.esm.js +2 -4
- package/dist/marquee.cjs.js +5 -5
- package/dist/marquee.esm.js +33 -50
- package/dist/masonry-grid.cjs.js +1 -1
- package/dist/masonry-grid.esm.js +5 -9
- package/dist/menu.cjs.js +3 -3
- package/dist/menu.esm.js +106 -126
- package/dist/menubar.cjs.js +5 -5
- package/dist/menubar.esm.js +118 -164
- package/dist/meter.cjs.js +2 -2
- package/dist/meter.esm.js +4 -4
- package/dist/multi-select.cjs.js +5 -5
- package/dist/multi-select.esm.js +125 -137
- package/dist/navigation-menu.cjs.js +4 -4
- package/dist/navigation-menu.esm.js +44 -55
- package/dist/number-field.cjs.js +2 -2
- package/dist/number-field.esm.js +73 -98
- package/dist/number-ticker.cjs.js +3 -3
- package/dist/number-ticker.esm.js +22 -43
- package/dist/odometer.cjs.js +1 -1
- package/dist/odometer.esm.js +5 -9
- package/dist/orbiter.cjs.js +13 -13
- package/dist/orbiter.esm.js +79 -90
- package/dist/{overlayManager-5bbd4dc3.mjs → overlayManager-BJjU1VA8.mjs} +4 -5
- package/dist/{overlayManager-0eda4e08.js → overlayManager-CSy3fJmJ.js} +1 -1
- package/dist/pagination.cjs.js +2 -2
- package/dist/pagination.esm.js +14 -18
- package/dist/{panel-group-a376cc5e.mjs → panel-group-8sVNnGxg.mjs} +24 -46
- package/dist/panel-group-CaD0_KQf.js +36 -0
- package/dist/panel-group.cjs.js +1 -1
- package/dist/panel-group.esm.js +2 -5
- package/dist/panel.cjs.js +4 -4
- package/dist/panel.esm.js +8 -10
- package/dist/password-field.cjs.js +9 -9
- package/dist/password-field.esm.js +62 -82
- package/dist/pin-input.cjs.js +3 -3
- package/dist/pin-input.esm.js +33 -39
- package/dist/placement-grid.cjs.js +4 -4
- package/dist/placement-grid.esm.js +108 -131
- package/dist/plugin-panel.cjs.js +7 -7
- package/dist/plugin-panel.esm.js +13 -15
- package/dist/popover.cjs.js +2 -2
- package/dist/popover.esm.js +21 -31
- package/dist/portal-DgpQ3Jo1.js +1 -0
- package/dist/{portal-fe73e5cc.mjs → portal-bR42gHvG.mjs} +43 -48
- package/dist/portal.cjs.js +3 -3
- package/dist/portal.esm.js +20 -28
- package/dist/{positioner-e9770c66.mjs → positioner-D0VGxtYU.mjs} +189 -209
- package/dist/positioner-D_fqyx_j.js +1 -0
- package/dist/positioner.cjs.js +2 -2
- package/dist/positioner.esm.js +22 -28
- package/dist/presence.cjs.js +1 -1
- package/dist/presence.esm.js +7 -13
- package/dist/primitives/auto-scroll.d.ts +9 -0
- package/dist/primitives/auto-scroll.d.ts.map +1 -0
- package/dist/primitives/selector.d.ts +4 -0
- package/dist/primitives/selector.d.ts.map +1 -0
- package/dist/progress.cjs.js +1 -1
- package/dist/progress.esm.js +5 -9
- package/dist/quick-actions.cjs.js +6 -6
- package/dist/quick-actions.esm.js +52 -62
- package/dist/radio-group.cjs.js +13 -13
- package/dist/radio-group.esm.js +39 -51
- package/dist/radio.cjs.js +1 -1
- package/dist/radio.esm.js +5 -9
- package/dist/rating.cjs.js +1 -1
- package/dist/rating.esm.js +12 -23
- package/dist/{roving-focus-group-4350c9a7.mjs → roving-focus-group-Dbm1Jko_.mjs} +3 -6
- package/dist/roving-focus-group.cjs.js +1 -1
- package/dist/roving-focus-group.esm.js +3 -5
- package/dist/runtime-CTaOSmBj.js +1 -0
- package/dist/{runtime-161f68a2.mjs → runtime-D1gFh1fS.mjs} +338 -366
- package/dist/runtime.cjs.js +1 -1
- package/dist/runtime.esm.js +6 -6
- package/dist/scroll-area.cjs.js +3 -3
- package/dist/scroll-area.esm.js +38 -46
- package/dist/{scroll-lock-31da444f.mjs → scroll-lock-LfqXXqsu.mjs} +5 -9
- package/dist/section.cjs.js +1 -1
- package/dist/section.esm.js +1 -1
- package/dist/select.cjs.js +7 -7
- package/dist/select.esm.js +67 -97
- package/dist/selection-popup.cjs.js +1 -1
- package/dist/selection-popup.esm.js +8 -15
- package/dist/selector-BvAh35ve.js +1 -0
- package/dist/selector-WI8pD7YO.mjs +18 -0
- package/dist/separator.cjs.js +1 -1
- package/dist/separator.esm.js +1 -1
- package/dist/sidebar.cjs.js +18 -18
- package/dist/sidebar.esm.js +117 -139
- package/dist/skeleton.cjs.js +11 -11
- package/dist/skeleton.esm.js +27 -24
- package/dist/slider.cjs.js +1 -1
- package/dist/slider.esm.js +6 -11
- package/dist/slot.cjs.js +4 -4
- package/dist/slot.esm.js +16 -19
- package/dist/sortable.cjs.js +79 -65
- package/dist/sortable.esm.js +714 -734
- package/dist/spinning-text.cjs.js +12 -12
- package/dist/spinning-text.esm.js +80 -92
- package/dist/split-button.cjs.js +4 -4
- package/dist/split-button.esm.js +77 -62
- package/dist/splitter.cjs.js +1 -1
- package/dist/splitter.esm.js +1 -1
- package/dist/stepper.cjs.js +8 -8
- package/dist/stepper.esm.js +32 -52
- package/dist/switch.cjs.js +7 -7
- package/dist/switch.esm.js +23 -31
- package/dist/table.cjs.js +2 -2
- package/dist/table.esm.js +46 -56
- package/dist/tabs.cjs.js +8 -8
- package/dist/tabs.esm.js +89 -109
- package/dist/tags-input.cjs.js +4 -4
- package/dist/tags-input.esm.js +45 -62
- package/dist/textarea.cjs.js +10 -10
- package/dist/textarea.esm.js +49 -52
- package/dist/time-field.cjs.js +4 -4
- package/dist/time-field.esm.js +70 -84
- package/dist/time-picker.cjs.js +22 -22
- package/dist/time-picker.esm.js +88 -110
- package/dist/timeline.cjs.js +1 -1
- package/dist/timeline.esm.js +3 -5
- package/dist/toast.cjs.js +2 -2
- package/dist/toast.esm.js +33 -47
- package/dist/toggle-group.cjs.js +6 -6
- package/dist/toggle-group.esm.js +85 -105
- package/dist/toggle.cjs.js +1 -1
- package/dist/toggle.esm.js +3 -5
- package/dist/toolbar.cjs.js +1 -1
- package/dist/toolbar.esm.js +13 -24
- package/dist/tooltip.cjs.js +2 -2
- package/dist/tooltip.esm.js +31 -42
- package/dist/transfer-list.cjs.js +31 -31
- package/dist/transfer-list.esm.js +114 -127
- package/dist/{tree-dcd74a4a.mjs → tree-B3kE8ESs.mjs} +55 -62
- package/dist/tree-Dx_kv_ih.js +39 -0
- package/dist/tree-item.cjs.js +2 -2
- package/dist/tree-item.esm.js +2 -3
- package/dist/tree.cjs.js +1 -1
- package/dist/tree.esm.js +2 -5
- package/dist/ui-button-Q0GNNWKC.mjs +665 -0
- package/dist/ui-button-rXQOS9QJ.js +521 -0
- package/dist/{icon-9e9da03b.js → ui-icon-BzVNC_lr.js} +4 -4
- package/dist/{icon-e2a85cc1.mjs → ui-icon-YI6lyuqU.mjs} +58 -65
- package/dist/visually-hidden.cjs.js +1 -1
- package/dist/visually-hidden.esm.js +1 -1
- package/dist/wizard.cjs.js +14 -14
- package/dist/wizard.esm.js +85 -105
- package/package.json +2 -2
- package/dist/date-time-utils-66480de4.js +0 -1
- package/dist/date-time-utils-a2c7af25.mjs +0 -307
- package/dist/dismissable-layer-193e3bed.js +0 -1
- package/dist/focus-scope-2b12b4e7.js +0 -1
- package/dist/listbox-308789a0.mjs +0 -210
- package/dist/listbox-ef2f708e.js +0 -46
- package/dist/panel-group-40254cdd.js +0 -36
- package/dist/portal-c69756c0.js +0 -1
- package/dist/positioner-33529bb8.js +0 -1
- package/dist/runtime-3f13807b.js +0 -1
- package/dist/tree-0a7a8d05.js +0 -39
- /package/dist/{collection-a2969ad2.js → collection-qv8A8rq4.js} +0 -0
- /package/dist/{menu-item-styles-27fdbac4.mjs → menu-item-styles-CZiPwPwl.mjs} +0 -0
- /package/dist/{menu-item-styles-83ad1e22.js → menu-item-styles-CbNUEwP2.js} +0 -0
- /package/dist/{roving-focus-group-5c059bf9.js → roving-focus-group-BdJ_4Njm.js} +0 -0
- /package/dist/{scroll-lock-d7b0df21.js → scroll-lock-BX6e3Ced.js} +0 -0
|
@@ -0,0 +1,521 @@
|
|
|
1
|
+
"use strict";const D=require("./ElementBase-EV6mVBUV.js");require("./ui-icon-BzVNC_lr.js");const F=`
|
|
2
|
+
:host {
|
|
3
|
+
--ui-btn-radius: var(--ui-control-radius, var(--ui-radius, 4px));
|
|
4
|
+
--ui-btn-min-height: var(--ui-control-min-height, var(--base-button-height-md, 40px));
|
|
5
|
+
--ui-btn-padding-inline: var(--ui-control-padding-inline, 14px);
|
|
6
|
+
--ui-btn-gap: var(--ui-control-gap, var(--ui-default-gap, 8px));
|
|
7
|
+
--ui-btn-font-size: var(--ui-control-font-size, var(--ui-default-font-size, var(--ui-font-size-md, var(--font-size-2, 14px))));
|
|
8
|
+
--ui-btn-font-weight: 400;
|
|
9
|
+
--ui-btn-letter-spacing: var(--ui-default-letter-spacing, var(--letter-spacing-2, 0em));
|
|
10
|
+
--ui-btn-duration: var(--ui-motion-base, 160ms);
|
|
11
|
+
--ui-btn-easing: var(--ui-motion-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
|
|
12
|
+
|
|
13
|
+
--ui-btn-accent: var(--ui-color-primary, #2563eb);
|
|
14
|
+
--ui-btn-accent-strong: color-mix(in srgb, var(--ui-btn-accent) 82%, #0f172a 18%);
|
|
15
|
+
--ui-btn-accent-soft: color-mix(in srgb, var(--ui-btn-accent) 10%, var(--ui-color-surface, #ffffff));
|
|
16
|
+
|
|
17
|
+
--ui-btn-surface: var(--ui-color-surface, #ffffff);
|
|
18
|
+
--ui-btn-surface-alt: var(--ui-color-surface-alt, #f8fafc);
|
|
19
|
+
--ui-btn-text: var(--ui-color-text, #0f172a);
|
|
20
|
+
--ui-btn-muted: var(--ui-color-muted, #64748b);
|
|
21
|
+
--ui-btn-ring: var(--ui-color-focus-ring, #2563eb);
|
|
22
|
+
|
|
23
|
+
display: inline-flex;
|
|
24
|
+
vertical-align: middle;
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
color-scheme: light dark;
|
|
27
|
+
font-family: var(--ui-font-family, var(--default-font-family, system-ui, sans-serif));
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
:host([block]) {
|
|
31
|
+
display: flex;
|
|
32
|
+
inline-size: 100%;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:host([tone="neutral"]) {
|
|
36
|
+
--ui-btn-accent: color-mix(in srgb, var(--ui-color-muted, #64748b) 74%, var(--ui-color-text, #0f172a) 26%);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host([tone="info"]) {
|
|
40
|
+
--ui-btn-accent: var(--ui-color-primary, #2563eb);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:host([tone="success"]) {
|
|
44
|
+
--ui-btn-accent: var(--ui-color-success, #16a34a);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
:host([tone="warning"]) {
|
|
48
|
+
--ui-btn-accent: var(--ui-color-warning, #d97706);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
:host([tone="danger"]) {
|
|
52
|
+
--ui-btn-accent: var(--ui-color-danger, #dc2626);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
:host([state="error"]) {
|
|
56
|
+
--ui-btn-accent: var(--ui-color-danger, #dc2626);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
:host([state="success"]) {
|
|
60
|
+
--ui-btn-accent: var(--ui-color-success, #16a34a);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
:host([theme="dark"]) {
|
|
64
|
+
--ui-btn-surface: color-mix(in srgb, var(--ui-color-surface, #0f172a) 88%, #020617 12%);
|
|
65
|
+
--ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-surface) 86%, #111827 14%);
|
|
66
|
+
--ui-btn-text: var(--ui-color-text, #e2e8f0);
|
|
67
|
+
--ui-btn-muted: var(--ui-color-muted, #94a3b8);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
:host([theme="brand"]) {
|
|
71
|
+
--ui-btn-accent: color-mix(in srgb, var(--ui-color-primary, #2563eb) 78%, #0ea5e9 22%);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
:host([recipe="classic"]) .btn:not([disabled]) {
|
|
75
|
+
background-image: linear-gradient(180deg, color-mix(in srgb, white 18%, transparent), color-mix(in srgb, black 10%, transparent));
|
|
76
|
+
box-shadow:
|
|
77
|
+
inset 0 1px 0 color-mix(in srgb, white 52%, transparent),
|
|
78
|
+
inset 0 -1px 0 color-mix(in srgb, black 22%, transparent),
|
|
79
|
+
0 1px 2px rgba(15, 23, 42, 0.08),
|
|
80
|
+
0 8px 18px color-mix(in srgb, var(--ui-btn-accent) 22%, transparent);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
:host([recipe="solid"]) .btn {
|
|
84
|
+
background-image: none;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
:host([recipe="soft"]) {
|
|
88
|
+
--ui-btn-surface: color-mix(in srgb, var(--ui-btn-accent) 10%, white);
|
|
89
|
+
--ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-accent) 14%, white);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
:host([recipe="soft"]) .btn--secondary {
|
|
93
|
+
border-color: transparent;
|
|
94
|
+
box-shadow: none;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:host([recipe="surface"]) {
|
|
98
|
+
--ui-btn-surface: var(--color-panel-solid, var(--ui-color-surface));
|
|
99
|
+
--ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-accent) 5%, var(--color-panel-solid, var(--ui-color-surface)));
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
:host([recipe="surface"]) .btn--secondary {
|
|
103
|
+
border-color: color-mix(in srgb, var(--ui-btn-accent) 28%, var(--ui-color-border));
|
|
104
|
+
box-shadow: var(--shadow-1);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
:host([recipe="outline"]) {
|
|
108
|
+
--ui-btn-surface: transparent;
|
|
109
|
+
--ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-accent) 6%, transparent);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
:host([recipe="outline"]) .btn--secondary {
|
|
113
|
+
border-width: 1px;
|
|
114
|
+
border-style: solid;
|
|
115
|
+
border-color: color-mix(in srgb, var(--ui-btn-accent) 42%, var(--ui-color-border));
|
|
116
|
+
box-shadow: none;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
:host([recipe="ghost"]) {
|
|
120
|
+
--ui-btn-surface: transparent;
|
|
121
|
+
--ui-btn-surface-alt: transparent;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
:host([shape="none"]) {
|
|
125
|
+
--ui-btn-radius: 0px;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
:host([shape="sm"]) {
|
|
129
|
+
--ui-btn-radius: 4px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
:host([shape="md"]) {
|
|
133
|
+
--ui-btn-radius: 8px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
:host([shape="lg"]) {
|
|
137
|
+
--ui-btn-radius: 12px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
:host([shape="full"]) {
|
|
141
|
+
--ui-btn-radius: 999px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
:host([scale="1"]) {
|
|
145
|
+
--ui-btn-min-height: 30px;
|
|
146
|
+
--ui-btn-padding-inline: 10px;
|
|
147
|
+
--ui-btn-font-size: 14px;
|
|
148
|
+
--ui-btn-gap: 6px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
:host([scale="2"]) {
|
|
152
|
+
--ui-btn-min-height: 36px;
|
|
153
|
+
--ui-btn-padding-inline: 14px;
|
|
154
|
+
--ui-btn-font-size: 14px;
|
|
155
|
+
--ui-btn-gap: 8px;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
:host([scale="3"]) {
|
|
159
|
+
--ui-btn-min-height: 44px;
|
|
160
|
+
--ui-btn-padding-inline: 18px;
|
|
161
|
+
--ui-btn-font-size: 16px;
|
|
162
|
+
--ui-btn-gap: 8px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
:host([scale="4"]) {
|
|
166
|
+
--ui-btn-min-height: 56px;
|
|
167
|
+
--ui-btn-padding-inline: 24px;
|
|
168
|
+
--ui-btn-font-size: 18px;
|
|
169
|
+
--ui-btn-gap: 10px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.btn {
|
|
173
|
+
position: relative;
|
|
174
|
+
isolation: isolate;
|
|
175
|
+
box-sizing: border-box;
|
|
176
|
+
inline-size: auto;
|
|
177
|
+
min-block-size: var(--ui-btn-min-height);
|
|
178
|
+
padding-inline: var(--ui-btn-padding-inline);
|
|
179
|
+
border-radius: var(--ui-btn-radius);
|
|
180
|
+
border: 1px solid transparent;
|
|
181
|
+
margin: 0;
|
|
182
|
+
appearance: none;
|
|
183
|
+
-webkit-appearance: none;
|
|
184
|
+
font: inherit;
|
|
185
|
+
font-size: var(--ui-btn-font-size);
|
|
186
|
+
font-weight: var(--ui-btn-font-weight);
|
|
187
|
+
letter-spacing: var(--ui-btn-letter-spacing);
|
|
188
|
+
line-height: var(--ui-default-line-height, 20px);
|
|
189
|
+
display: inline-flex;
|
|
190
|
+
align-items: center;
|
|
191
|
+
justify-content: center;
|
|
192
|
+
gap: var(--ui-btn-gap);
|
|
193
|
+
white-space: nowrap;
|
|
194
|
+
cursor: pointer;
|
|
195
|
+
user-select: none;
|
|
196
|
+
-webkit-tap-highlight-color: transparent;
|
|
197
|
+
transition:
|
|
198
|
+
transform var(--ui-btn-duration) var(--ui-btn-easing),
|
|
199
|
+
box-shadow var(--ui-btn-duration) var(--ui-btn-easing),
|
|
200
|
+
background-color var(--ui-btn-duration) var(--ui-btn-easing),
|
|
201
|
+
color var(--ui-btn-duration) var(--ui-btn-easing),
|
|
202
|
+
border-color var(--ui-btn-duration) var(--ui-btn-easing),
|
|
203
|
+
opacity var(--ui-btn-duration) var(--ui-btn-easing);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
:host([block]) .btn {
|
|
207
|
+
inline-size: 100%;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.btn:focus-visible {
|
|
211
|
+
outline: 2px solid color-mix(in srgb, var(--ui-btn-ring) 70%, transparent);
|
|
212
|
+
outline-offset: 2px;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.btn::after {
|
|
216
|
+
content: '';
|
|
217
|
+
position: absolute;
|
|
218
|
+
inset: 0;
|
|
219
|
+
border-radius: inherit;
|
|
220
|
+
background: currentColor;
|
|
221
|
+
opacity: 0;
|
|
222
|
+
pointer-events: none;
|
|
223
|
+
transition: opacity 140ms var(--ui-btn-easing);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.btn:active::after {
|
|
227
|
+
opacity: 0.08;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.btn--primary {
|
|
231
|
+
background: var(--ui-btn-accent);
|
|
232
|
+
color: #ffffff;
|
|
233
|
+
border-color: color-mix(in srgb, var(--ui-btn-accent) 74%, #0f172a 26%);
|
|
234
|
+
box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-btn-accent) 22%, transparent);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.btn--primary:hover:not([disabled]) {
|
|
238
|
+
background: var(--ui-btn-accent-strong);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.btn--secondary {
|
|
242
|
+
background: var(--ui-btn-surface);
|
|
243
|
+
color: color-mix(in srgb, var(--ui-btn-accent) 78%, var(--ui-btn-text) 22%);
|
|
244
|
+
border-color: color-mix(in srgb, var(--ui-btn-accent) 22%, var(--ui-btn-muted));
|
|
245
|
+
box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.btn--secondary:hover:not([disabled]) {
|
|
249
|
+
background: color-mix(in srgb, var(--ui-btn-accent) 8%, var(--ui-btn-surface-alt));
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.btn--ghost {
|
|
253
|
+
background: transparent;
|
|
254
|
+
color: color-mix(in srgb, var(--ui-btn-accent) 80%, var(--ui-btn-text) 20%);
|
|
255
|
+
border-color: transparent;
|
|
256
|
+
box-shadow: none;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.btn--ghost:hover:not([disabled]) {
|
|
260
|
+
background: var(--ui-btn-accent-soft);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.btn--danger {
|
|
264
|
+
background: var(--ui-color-danger, #dc2626);
|
|
265
|
+
color: #ffffff;
|
|
266
|
+
border-color: color-mix(in srgb, var(--ui-color-danger, #dc2626) 72%, #0f172a 28%);
|
|
267
|
+
box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-danger, #dc2626) 22%, transparent);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.btn--danger:hover:not([disabled]) {
|
|
271
|
+
background: color-mix(in srgb, var(--ui-color-danger, #dc2626) 86%, #0f172a 14%);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.btn--success {
|
|
275
|
+
background: var(--ui-color-success, #16a34a);
|
|
276
|
+
color: #ffffff;
|
|
277
|
+
border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 70%, #0f172a 30%);
|
|
278
|
+
box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-success, #16a34a) 20%, transparent);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.btn--success:hover:not([disabled]) {
|
|
282
|
+
background: color-mix(in srgb, var(--ui-color-success, #16a34a) 86%, #0f172a 14%);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.btn--warning {
|
|
286
|
+
background: var(--ui-color-warning, #d97706);
|
|
287
|
+
color: #ffffff;
|
|
288
|
+
border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 70%, #0f172a 30%);
|
|
289
|
+
box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-warning, #d97706) 18%, transparent);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.btn--warning:hover:not([disabled]) {
|
|
293
|
+
background: color-mix(in srgb, var(--ui-color-warning, #d97706) 86%, #0f172a 14%);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
:host([size="sm"]) {
|
|
297
|
+
--ui-btn-font-size: var(--ui-font-size-sm, var(--font-size-1, 12px));
|
|
298
|
+
--ui-btn-min-height: var(--base-button-height-sm, 32px);
|
|
299
|
+
--ui-btn-padding-inline: 10px;
|
|
300
|
+
--ui-btn-gap: 6px;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
:host([size="lg"]) {
|
|
304
|
+
--ui-btn-font-size: var(--ui-font-size-lg, var(--font-size-3, 16px));
|
|
305
|
+
--ui-btn-min-height: var(--base-button-height-lg, 44px);
|
|
306
|
+
--ui-btn-padding-inline: 18px;
|
|
307
|
+
--ui-btn-gap: 10px;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
:host([state="loading"]) .btn,
|
|
311
|
+
:host([loading]) .btn,
|
|
312
|
+
:host([aria-busy="true"]) .btn {
|
|
313
|
+
cursor: progress;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
:host([state="error"]) .btn:not([disabled]) {
|
|
317
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-color-danger, #dc2626) 38%, transparent), 0 8px 18px rgba(127, 29, 29, 0.14);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
:host([state="success"]) .btn:not([disabled]) {
|
|
321
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-color-success, #16a34a) 30%, transparent), 0 8px 18px rgba(22, 163, 74, 0.14);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
:host([data-animation]) .btn:not([disabled]):hover {
|
|
325
|
+
transform: translateY(-1px);
|
|
326
|
+
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
:host([data-animation]) .btn:not([disabled]):active {
|
|
330
|
+
transform: translateY(0) scale(0.99);
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
:host([data-animation="scale"]) .btn:not([disabled]):hover {
|
|
334
|
+
transform-origin: center;
|
|
335
|
+
transform: translate3d(0, -2px, 0) scale(1.02);
|
|
336
|
+
z-index: 1;
|
|
337
|
+
backface-visibility: hidden;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
:host([data-animation="pulse"]) .btn:not([disabled]):hover {
|
|
341
|
+
animation: ui-btn-pulse 900ms ease-in-out infinite;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
:host([data-animation="none"]) .btn:not([disabled]) {
|
|
345
|
+
transition: none;
|
|
346
|
+
animation: none;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
:host([headless]) .btn {
|
|
350
|
+
all: unset;
|
|
351
|
+
box-sizing: border-box;
|
|
352
|
+
display: inline-flex;
|
|
353
|
+
align-items: center;
|
|
354
|
+
justify-content: center;
|
|
355
|
+
gap: var(--ui-btn-gap);
|
|
356
|
+
cursor: pointer;
|
|
357
|
+
border-radius: inherit;
|
|
358
|
+
color: inherit;
|
|
359
|
+
font: inherit;
|
|
360
|
+
line-height: inherit;
|
|
361
|
+
padding: inherit;
|
|
362
|
+
border: inherit;
|
|
363
|
+
background: inherit;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
:host([headless][block]) .btn {
|
|
367
|
+
inline-size: 100%;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.slot {
|
|
371
|
+
display: inline-flex;
|
|
372
|
+
align-items: center;
|
|
373
|
+
justify-content: center;
|
|
374
|
+
min-inline-size: 0;
|
|
375
|
+
max-inline-size: 100%;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.slot--label {
|
|
379
|
+
display: inline-flex;
|
|
380
|
+
align-items: center;
|
|
381
|
+
line-height: inherit;
|
|
382
|
+
overflow: hidden;
|
|
383
|
+
text-overflow: ellipsis;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.slot--prefix,
|
|
387
|
+
.slot--suffix {
|
|
388
|
+
line-height: 0;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.slot--prefix ::slotted(*),
|
|
392
|
+
.slot--suffix ::slotted(*) {
|
|
393
|
+
display: inline-flex;
|
|
394
|
+
align-items: center;
|
|
395
|
+
justify-content: center;
|
|
396
|
+
line-height: 0;
|
|
397
|
+
vertical-align: middle;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.slot--label ::slotted(*) {
|
|
401
|
+
line-height: inherit;
|
|
402
|
+
vertical-align: middle;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.icon {
|
|
406
|
+
width: 16px;
|
|
407
|
+
min-width: 16px;
|
|
408
|
+
height: 16px;
|
|
409
|
+
display: inline-flex;
|
|
410
|
+
align-items: center;
|
|
411
|
+
justify-content: center;
|
|
412
|
+
line-height: 0;
|
|
413
|
+
vertical-align: middle;
|
|
414
|
+
pointer-events: none;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.spinner {
|
|
418
|
+
width: 14px;
|
|
419
|
+
min-width: 14px;
|
|
420
|
+
height: 14px;
|
|
421
|
+
border-radius: 999px;
|
|
422
|
+
border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
|
|
423
|
+
border-top-color: currentColor;
|
|
424
|
+
animation: ui-btn-spin 700ms linear infinite;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.sr-only {
|
|
428
|
+
border: 0;
|
|
429
|
+
clip: rect(0 0 0 0);
|
|
430
|
+
height: 1px;
|
|
431
|
+
margin: -1px;
|
|
432
|
+
overflow: hidden;
|
|
433
|
+
padding: 0;
|
|
434
|
+
position: absolute;
|
|
435
|
+
width: 1px;
|
|
436
|
+
white-space: nowrap;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.btn[disabled] {
|
|
440
|
+
opacity: 0.56;
|
|
441
|
+
cursor: not-allowed;
|
|
442
|
+
box-shadow: none;
|
|
443
|
+
transform: none !important;
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
@keyframes ui-btn-spin {
|
|
447
|
+
to {
|
|
448
|
+
transform: rotate(360deg);
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
@keyframes ui-btn-pulse {
|
|
453
|
+
0% {
|
|
454
|
+
transform: translateY(0);
|
|
455
|
+
}
|
|
456
|
+
50% {
|
|
457
|
+
transform: translateY(-2px);
|
|
458
|
+
}
|
|
459
|
+
100% {
|
|
460
|
+
transform: translateY(0);
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
@media (prefers-reduced-motion: reduce) {
|
|
465
|
+
.btn,
|
|
466
|
+
.btn::after,
|
|
467
|
+
.spinner {
|
|
468
|
+
animation: none !important;
|
|
469
|
+
transition: none !important;
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
@media (prefers-contrast: more) {
|
|
474
|
+
.btn {
|
|
475
|
+
border-width: 2px;
|
|
476
|
+
border-color: currentColor;
|
|
477
|
+
box-shadow: none !important;
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
@media (forced-colors: active) {
|
|
482
|
+
:host {
|
|
483
|
+
--ui-btn-accent: Highlight;
|
|
484
|
+
--ui-btn-surface: Canvas;
|
|
485
|
+
--ui-btn-text: CanvasText;
|
|
486
|
+
--ui-btn-ring: Highlight;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.btn {
|
|
490
|
+
forced-color-adjust: auto;
|
|
491
|
+
border-color: ButtonText;
|
|
492
|
+
color: ButtonText;
|
|
493
|
+
background: ButtonFace;
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
.btn--primary,
|
|
497
|
+
.btn--danger,
|
|
498
|
+
.btn--success,
|
|
499
|
+
.btn--warning {
|
|
500
|
+
background: Highlight;
|
|
501
|
+
color: HighlightText;
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
`;function _(t){return t!==null&&t.toLowerCase()!=="false"&&t!=="0"}function I(t){return t==="secondary"||t==="ghost"||t==="danger"||t==="success"||t==="warning"?t:"primary"}function U(t){return t==="sm"||t==="lg"?t:"md"}function S(t){return t==="scale"||t==="pulse"||t==="none"?t:null}function N(t){return t==="neutral"||t==="info"||t==="success"||t==="warning"||t==="danger"?t:null}function G(t){return t==="loading"||t==="error"||t==="success"?t:"idle"}function $(t){return t==="submit"||t==="reset"?t:"button"}function J(t){return t==="classic"||t==="solid"||t==="soft"||t==="surface"||t==="outline"||t==="ghost"?t:null}function K(t){return t==="none"||t==="sm"||t==="md"||t==="lg"||t==="full"?t:null}function Q(t){return t==="1"||t==="2"||t==="3"||t==="4"?t:null}function V(t){if(!t)return null;const n=t.trim();return n?n==="full"?"999px":/^-?\d+(\.\d+)?$/.test(n)?`${n}px`:n:null}function r(t,n){const e=t.getAttribute(n);if(e!=null)return e;const i=t[n];return typeof i=="string"&&i.length>0?i:null}function c(t,n){const e=t.getAttribute(n);if(e!=null)return _(e);const i=t[n];return typeof i=="boolean"?i:typeof i=="string"?_(i):!1}function u(t){return t.replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">")}function L(t,n){return!!t.querySelector(`[slot="${n}"]`)}function W(t,n){if(n==="button")return;const e=t.closest("form");if(!e)return;if(n==="reset"){e.reset();return}if(typeof e.requestSubmit=="function"){e.requestSubmit();return}const i=new Event("submit",{bubbles:!0,cancelable:!0});e.dispatchEvent(i)}class E extends D.ElementBase{constructor(){super(),this._slots=[],this._contentObserver=null,this._onRootClick=this._onRootClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this),this._onContentMutations=this._onContentMutations.bind(this)}static get observedAttributes(){return["disabled","variant","size","headless","loading","icon","block","animation","theme","tone","state","type","recipe","shape","radius","scale","loading-label","aria-label"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this._contentObserver=new MutationObserver(this._onContentMutations),this._contentObserver.observe(this,{childList:!0,subtree:!1,characterData:!0})}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this._contentObserver?.disconnect(),this._contentObserver=null,this._detachSlotListeners(),super.disconnectedCallback()}attributeChangedCallback(n,e,i){if(e!==i){if(n==="animation"){const o=S(i);o?this.setAttribute("data-animation",o):this.removeAttribute("data-animation")}this.isConnected&&this.requestRender()}}_onRootClick(n){const i=n.target?.closest('button[data-ui-button="true"]');if(!i||i.disabled)return;const o=$(i.getAttribute("data-request-type"));queueMicrotask(()=>{n.defaultPrevented||W(this,o)})}_attachSlotListeners(){this._detachSlotListeners(),this._slots=Array.from(this.root.querySelectorAll("slot")),this._slots.forEach(n=>n.addEventListener("slotchange",this._onSlotChange))}_detachSlotListeners(){this._slots.forEach(n=>n.removeEventListener("slotchange",this._onSlotChange)),this._slots=[]}_onSlotChange(){this.requestRender()}_onContentMutations(){this.requestRender()}render(){const n=c(this,"disabled"),e=c(this,"loading"),i=r(this,"state"),o=G(i),s=e||o==="loading",l=r(this,"icon"),q=I(r(this,"variant")),b=r(this,"size"),d=U(b),h=S(r(this,"animation")),a=r(this,"theme"),p=a==="dark"||a==="brand"?a:null,f=r(this,"tone"),g=N(f),R=c(this,"block"),T=c(this,"headless"),M=$(r(this,"type")),m=J(r(this,"recipe")),x=r(this,"shape"),v=K(x),B=r(this,"radius"),y=V(B),w=Q(r(this,"scale")),k=r(this,"aria-label"),j=r(this,"loading-label")||"Loading";h?this.setAttribute("data-animation",h):this.removeAttribute("data-animation"),R?this.setAttribute("block",""):this.removeAttribute("block"),T?this.setAttribute("headless",""):this.removeAttribute("headless"),f!=null&&(g?this.setAttribute("tone",g):this.removeAttribute("tone")),b!=null&&(d==="md"?this.removeAttribute("size"):this.setAttribute("size",d)),a!=null&&(p?this.setAttribute("theme",p):this.removeAttribute("theme")),i!=null&&(o==="idle"?this.removeAttribute("state"):this.setAttribute("state",o)),m?this.setAttribute("recipe",m):this.removeAttribute("recipe"),x!=null&&(v?this.setAttribute("shape",v):this.removeAttribute("shape")),y?this.style.setProperty("--ui-btn-radius",y):this.style.removeProperty("--ui-btn-radius"),w?this.setAttribute("scale",w):this.removeAttribute("scale");const z=n||s;z?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),s?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const H=L(this,"prefix"),O=L(this,"suffix"),A=!s&&l?`<ui-icon class="icon" name="${u(l)}" aria-hidden="true"></ui-icon>`:"",C=s?'<span class="spinner" aria-hidden="true" part="spinner"></span>':"",Y=C||A||H?`<span class="slot slot--prefix" part="prefix">${C}${A}${s?"":'<slot name="prefix"></slot>'}</span>`:"",P=O?'<span class="slot slot--suffix" part="suffix"><slot name="suffix"></slot></span>':"";this.setContent(`
|
|
505
|
+
<style>${F}</style>
|
|
506
|
+
<button
|
|
507
|
+
class="btn btn--${q}"
|
|
508
|
+
part="button"
|
|
509
|
+
type="button"
|
|
510
|
+
data-ui-button="true"
|
|
511
|
+
data-request-type="${M}"
|
|
512
|
+
aria-busy="${s?"true":"false"}"
|
|
513
|
+
${k?`aria-label="${u(k)}"`:""}
|
|
514
|
+
${z?"disabled":""}
|
|
515
|
+
>
|
|
516
|
+
${Y}
|
|
517
|
+
<span class="slot slot--label" part="label"><slot></slot></span>
|
|
518
|
+
${P}
|
|
519
|
+
${s?`<span class="sr-only">${u(j)}</span>`:""}
|
|
520
|
+
</button>
|
|
521
|
+
`),this._attachSlotListeners()}}typeof customElements<"u"&&!customElements.get("ui-button")&&customElements.define("ui-button",E);exports.UIButton=E;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const k=require("./ElementBase-
|
|
1
|
+
"use strict";const k=require("./ElementBase-EV6mVBUV.js"),l=require("@editora/icons"),a=new Map,d=new Map;function c(i){return String(i||"").trim().toLowerCase().replace(/\s+/g,"-").replace(/_/g,"-")}function y(i,e){if(!e)return`${i}::default`;const r=e.variant||"outline",t=e.iconWeight||"",n=e.secondaryColor||"",o=e.strokeWidth==null?"":String(e.strokeWidth),s=e.absoluteStrokeWidth?"1":"0",b=e.strokeLinecap||"",f=e.strokeLinejoin||"",m=e.rotate==null?"":String(e.rotate),v=e.flip||"",x=e.rtl?"1":"0";return[i,r,t,n,o,s,b,f,m,v,x].join("::")}function z(i,e){const r=c(i);r&&a.set(r,e)}function w(i){const e=c(i);e&&a.delete(e)}function C(){a.clear()}function I(i){const e=c(i);return e?a.has(e)?!0:l.hasIcon(e):!1}function A(i,e){return u(i,{variant:e})}function u(i,e){const r=c(i);if(!r)return"";const t=a.get(r);if(t)return t;if(!l.hasIcon(r))return"";const n=y(r,e),o=d.get(n);if(o)return o;const s=l.renderIconSvg(r,{variant:e?.variant||"outline",iconWeight:e?.iconWeight,secondaryColor:e?.secondaryColor,strokeWidth:e?.strokeWidth,absoluteStrokeWidth:e?.absoluteStrokeWidth,strokeLinecap:e?.strokeLinecap,strokeLinejoin:e?.strokeLinejoin,rotate:e?.rotate,flip:e?.flip,rtl:e?.rtl,color:"currentColor",decorative:!0});return s&&d.set(n,s),s}const W=`
|
|
2
2
|
:host {
|
|
3
3
|
--ui-icon-size: 1em;
|
|
4
4
|
--ui-icon-color: currentColor;
|
|
@@ -195,13 +195,13 @@
|
|
|
195
195
|
border-color: Canvas;
|
|
196
196
|
}
|
|
197
197
|
}
|
|
198
|
-
`;function h(
|
|
198
|
+
`;function h(i){return i.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function S(i){if(!i)return null;const e=i.trim();return e?/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function p(i){if(!i)return;const e=Number(i);return Number.isFinite(e)?e:void 0}class g extends k.ElementBase{constructor(){super(),this._lastName=""}static get observedAttributes(){return["name","size","color","variant","icon-variant","icon-weight","secondary-color","tone","shape","spin","pulse","badge","label","decorative","stroke-width","absolute-stroke-width","stroke-linecap","stroke-linejoin","rotate","flip","rtl","headless"]}_syncDynamicVars(){const e=S(this.getAttribute("size"));e?this.style.setProperty("--ui-icon-size",e):this.style.removeProperty("--ui-icon-size");const r=this.getAttribute("color");r?this.style.setProperty("--ui-icon-color",r):this.style.removeProperty("--ui-icon-color");const t=this.getAttribute("stroke-width");t?this.style.setProperty("--ui-icon-stroke-width",t):this.style.removeProperty("--ui-icon-stroke-width")}render(){if(this._syncDynamicVars(),this.hasAttribute("headless")){this.setContent("<style></style><slot></slot>");return}const e=this.getAttribute("name")||"",r=this.getAttribute("label")||"",t=this.hasAttribute("decorative"),n=e?u(e,{variant:this.getAttribute("icon-variant")||void 0,iconWeight:this.getAttribute("icon-weight")||void 0,secondaryColor:this.getAttribute("secondary-color")||void 0,strokeWidth:p(this.getAttribute("stroke-width")),absoluteStrokeWidth:this.hasAttribute("absolute-stroke-width"),strokeLinecap:this.getAttribute("stroke-linecap")||void 0,strokeLinejoin:this.getAttribute("stroke-linejoin")||void 0,rotate:p(this.getAttribute("rotate")),flip:this.getAttribute("flip")||void 0,rtl:this.hasAttribute("rtl")}):"",o=!!n,s=t?'aria-hidden="true" role="presentation"':`role="img" aria-label="${h(r||e||"icon")}"`;this.setContent(`
|
|
199
199
|
<style>${W}</style>
|
|
200
|
-
<span class="icon" part="icon" ${
|
|
200
|
+
<span class="icon" part="icon" ${s}>
|
|
201
201
|
<span class="glyph" part="glyph">
|
|
202
202
|
${o?n:`<span class="fallback" part="fallback">${h((e||"?").slice(0,1).toUpperCase())}</span>`}
|
|
203
203
|
${o?"":"<slot></slot>"}
|
|
204
204
|
</span>
|
|
205
205
|
${this.hasAttribute("badge")?'<span class="badge" part="badge" aria-hidden="true"></span>':""}
|
|
206
206
|
</span>
|
|
207
|
-
`),e!==this._lastName&&(this.dispatchEvent(new CustomEvent("iconchange",{detail:{name:e,found:o},bubbles:!0})),this._lastName=e)}shouldRenderOnAttributeChange(e,
|
|
207
|
+
`),e!==this._lastName&&(this.dispatchEvent(new CustomEvent("iconchange",{detail:{name:e,found:o},bubbles:!0})),this._lastName=e)}shouldRenderOnAttributeChange(e,r,t){return!0}}typeof customElements<"u"&&!customElements.get("ui-icon")&&customElements.define("ui-icon",g);exports.UIIcon=g;exports.clearCustomIcons=C;exports.getIcon=u;exports.getIconVariant=A;exports.hasIcon=I;exports.registerIcon=z;exports.unregisterIcon=w;
|