@editora/ui-core 0.1.18 → 0.1.20
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 -669
- 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 +4 -7
- package/dist/color-picker.cjs.js +9 -9
- package/dist/color-picker.esm.js +189 -252
- 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-button.d.ts +1 -0
- package/dist/components/ui-button.d.ts.map +1 -1
- package/dist/components/ui-date-picker.d.ts.map +1 -1
- package/dist/components/ui-date-range-picker.d.ts.map +1 -1
- package/dist/components/ui-date-range-time-picker.d.ts +1 -0
- package/dist/components/ui-date-range-time-picker.d.ts.map +1 -1
- package/dist/components/ui-date-time-picker.d.ts +1 -0
- package/dist/components/ui-date-time-picker.d.ts.map +1 -1
- package/dist/components/ui-orbiter.d.ts.map +1 -1
- package/dist/components/ui-skeleton.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-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 +30 -9
- package/dist/date-picker.esm.js +90 -97
- package/dist/date-range-picker.cjs.js +22 -3
- package/dist/date-range-picker.esm.js +103 -108
- package/dist/date-range-time-picker.cjs.js +28 -12
- package/dist/date-range-time-picker.esm.js +137 -150
- package/dist/date-time-picker.cjs.js +25 -9
- package/dist/date-time-picker.esm.js +139 -155
- 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 +4 -4
- package/dist/multi-select.esm.js +120 -140
- 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 +2 -2
- package/dist/portal.esm.js +10 -19
- 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 +11 -18
- package/dist/presence.cjs.js +1 -1
- package/dist/presence.esm.js +7 -13
- 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/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 +45 -45
- package/dist/sortable.esm.js +421 -524
- 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 +3 -3
- package/dist/tabs.esm.js +35 -55
- package/dist/tags-input.cjs.js +4 -4
- package/dist/tags-input.esm.js +45 -62
- package/dist/textarea.cjs.js +6 -6
- package/dist/textarea.esm.js +32 -41
- package/dist/time-field.cjs.js +4 -4
- package/dist/time-field.esm.js +70 -84
- package/dist/time-picker.cjs.js +29 -21
- package/dist/time-picker.esm.js +96 -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 +19 -19
- package/dist/transfer-list.esm.js +98 -111
- 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 +3 -3
- 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
package/dist/button.cjs.js
CHANGED
|
@@ -1,521 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
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 C(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 C(e);const i=t[n];return typeof i=="boolean"?i:typeof i=="string"?C(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(){var n;this.root.removeEventListener("click",this._onRootClick),(n=this._contentObserver)==null||n.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 e=n.target,i=e==null?void 0:e.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),M=c(this,"block"),T=c(this,"headless"),R=$(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"),M?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 O=L(this,"prefix"),H=L(this,"suffix"),A=!s&&l?`<ui-icon class="icon" name="${u(l)}" aria-hidden="true"></ui-icon>`:"",_=s?'<span class="spinner" aria-hidden="true" part="spinner"></span>':"",P=_||A||O?`<span class="slot slot--prefix" part="prefix">${_}${A}${s?"":'<slot name="prefix"></slot>'}</span>`:"",Y=H?'<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="${R}"
|
|
512
|
-
aria-busy="${s?"true":"false"}"
|
|
513
|
-
${k?`aria-label="${u(k)}"`:""}
|
|
514
|
-
${z?"disabled":""}
|
|
515
|
-
>
|
|
516
|
-
${P}
|
|
517
|
-
<span class="slot slot--label" part="label"><slot></slot></span>
|
|
518
|
-
${Y}
|
|
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
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ui-button-rXQOS9QJ.js");exports.UIButton=e.UIButton;
|