@juspay/svelte-ui-components 4.10.3 → 4.10.4
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/Accordion.svelte +16 -0
- package/dist/Card/properties.d.ts +12 -4
- package/dist/Pill/Pill.svelte +8 -1
- package/dist/Pill/properties.d.ts +13 -0
- package/dist/Sheet/Sheet.svelte +50 -1
- package/dist/Sheet/properties.d.ts +8 -0
- package/dist-wc/index.js +142 -83
- package/package.json +1 -1
|
@@ -83,6 +83,22 @@
|
|
|
83
83
|
display: grid;
|
|
84
84
|
grid-template-rows: 0fr;
|
|
85
85
|
overflow: hidden;
|
|
86
|
+
/* overflow: hidden drops this element's automatic minimum size to zero, so
|
|
87
|
+
when it is placed as an item of a consumer's own grid or flex container
|
|
88
|
+
it is otherwise free to be stretched down to whatever size that
|
|
89
|
+
container hands it -- as small as 0px -- independent of how tall its
|
|
90
|
+
own children actually are (issue #550). align-self: start opts the
|
|
91
|
+
panel out of that stretch so it always sizes from its own expanded
|
|
92
|
+
content instead. It is inert when the panel is not a grid or flex item,
|
|
93
|
+
and does not change the collapse animation: collapsed still resolves
|
|
94
|
+
to 0px either way.
|
|
95
|
+
|
|
96
|
+
Exposed as --accordion-align-self rather than hardcoded: Svelte's
|
|
97
|
+
scoped class raises .accordion's specificity above a plain utility
|
|
98
|
+
class passed through `classes`, so a consumer who legitimately wants
|
|
99
|
+
the panel stretched (or centered, etc.) could not otherwise override
|
|
100
|
+
this one declaration without reaching for :global() or !important. */
|
|
101
|
+
align-self: var(--accordion-align-self, start);
|
|
86
102
|
transition: grid-template-rows var(--accordion-transition, 0.2s ease-out);
|
|
87
103
|
}
|
|
88
104
|
|
|
@@ -97,10 +97,18 @@ export type OptionalCardProperties = {
|
|
|
97
97
|
attrs?: Record<string, string>;
|
|
98
98
|
/**
|
|
99
99
|
* Overrides the tag `svelte:element` renders for the card root — e.g.
|
|
100
|
-
* `'figure'` for a card
|
|
101
|
-
*
|
|
102
|
-
*
|
|
103
|
-
*
|
|
100
|
+
* `'figure'` for a card whose root needs real `<figure>` sectioning-content
|
|
101
|
+
* semantics, without a separate wrapper element around a `<div>`-rooted
|
|
102
|
+
* Card.
|
|
103
|
+
*
|
|
104
|
+
* This does NOT provide a place for a `<figcaption>`: `children` is always
|
|
105
|
+
* wrapped in an inner `.card-content` div (and `title`/`headerRight` in
|
|
106
|
+
* `.card-header`, `footer` in a `<footer>` element), so a `<figcaption>`
|
|
107
|
+
* passed through any of those slots is not a direct child of the `<figure>`
|
|
108
|
+
* root and per spec is not exposed as its caption by any browser or
|
|
109
|
+
* assistive technology — do not put one there. If a `<figure>` needs a real
|
|
110
|
+
* caption today, wrap a plain (non-`as="figure"`) Card in your own
|
|
111
|
+
* `<figure>`/`<figcaption>` pair instead; Card has no caption slot.
|
|
104
112
|
*
|
|
105
113
|
* When omitted, the root keeps its existing behaviour exactly: `'a'` when
|
|
106
114
|
* `href` is set, `'div'` otherwise. Setting `as` to anything other than
|
package/dist/Pill/Pill.svelte
CHANGED
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
leadingIcon,
|
|
17
17
|
onclick,
|
|
18
18
|
ondismiss,
|
|
19
|
-
classes
|
|
19
|
+
classes,
|
|
20
|
+
attrs
|
|
20
21
|
}: PillProperties = $props();
|
|
21
22
|
|
|
22
23
|
let interactive = $derived(typeof onclick === 'function');
|
|
@@ -51,6 +52,7 @@
|
|
|
51
52
|
|
|
52
53
|
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
|
53
54
|
<div
|
|
55
|
+
{...attrs ?? {}}
|
|
54
56
|
class="pill {pillToneClass(tone)} {classes ?? ''}"
|
|
55
57
|
class:disabled
|
|
56
58
|
onclick={interactive ? handleClick : null}
|
|
@@ -122,6 +124,11 @@
|
|
|
122
124
|
cursor: var(--pill-cursor, pointer);
|
|
123
125
|
}
|
|
124
126
|
|
|
127
|
+
.pill[role='button']:focus-visible {
|
|
128
|
+
outline: var(--pill-focus-outline, 2px solid currentColor);
|
|
129
|
+
outline-offset: var(--pill-focus-outline-offset, 2px);
|
|
130
|
+
}
|
|
131
|
+
|
|
125
132
|
/* Tone defaults — an internal --_pill-tone-* layer, mirroring how Button's
|
|
126
133
|
variant classes set --_btn-*: a plain --pill-background/--pill-color
|
|
127
134
|
(explicit, or via `classes`) always wins over the tone's default. */
|
|
@@ -36,6 +36,19 @@ export type OptionalPillProperties = {
|
|
|
36
36
|
*/
|
|
37
37
|
leadingIcon?: Snippet;
|
|
38
38
|
classes?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Arbitrary attributes spread onto the pill root — `data-*`/`aria-*` (or any
|
|
41
|
+
* other) attribute names mapped to string values. For consumers that key off
|
|
42
|
+
* attribute-selector CSS (`[data-state="waiting"]`, `[data-density]`) the way
|
|
43
|
+
* the rest of their app does, instead of wrapping Pill in an extra element
|
|
44
|
+
* just to hold the attribute, or adding a second `classes` modifier for the
|
|
45
|
+
* same state. Applied before Pill's own `class`/`onclick`/`onkeydown`/
|
|
46
|
+
* `role`/`tabindex`/`aria-disabled`/`data-pw`/`title`/`testID` attributes, so
|
|
47
|
+
* an entry here can never override one of those — only add attributes Pill
|
|
48
|
+
* does not already manage. Omitted by default, so existing consumers render
|
|
49
|
+
* exactly the same attributes as before.
|
|
50
|
+
*/
|
|
51
|
+
attrs?: Record<string, string>;
|
|
39
52
|
};
|
|
40
53
|
export type PillEventProperties = {
|
|
41
54
|
onclick?: (event: MouseEvent) => void;
|
package/dist/Sheet/Sheet.svelte
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
title,
|
|
12
12
|
showOverlay = true,
|
|
13
13
|
dismissOnOutsideClick = showOverlay,
|
|
14
|
+
overlayAriaLabel,
|
|
14
15
|
showCloseButton = true,
|
|
15
16
|
headingLevel,
|
|
16
17
|
testId,
|
|
@@ -62,6 +63,23 @@
|
|
|
62
63
|
return;
|
|
63
64
|
}
|
|
64
65
|
|
|
66
|
+
// The overlay only carries role="button" while it is dismissible, and a
|
|
67
|
+
// role="button" has to answer Enter/Space as well as click (WCAG 2.1
|
|
68
|
+
// SC 2.1.1) -- tabindex="-1" keeps it out of the Tab sequence, but the
|
|
69
|
+
// focus trap can still park focus here, and browse-mode AT reaches it.
|
|
70
|
+
// The target check is what stops an Enter pressed on a focusable
|
|
71
|
+
// descendant from bubbling up and reading as an activation of the overlay
|
|
72
|
+
// itself, exactly as handleOverlayClick already guards the click case.
|
|
73
|
+
if (
|
|
74
|
+
(event.key === 'Enter' || event.key === ' ') &&
|
|
75
|
+
dismissOnOutsideClick &&
|
|
76
|
+
event.target === overlayDiv
|
|
77
|
+
) {
|
|
78
|
+
event.preventDefault();
|
|
79
|
+
close();
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
|
|
65
83
|
if (event.key === 'Tab' && sheetPanel !== null) {
|
|
66
84
|
const focusable = sheetPanel.querySelectorAll<HTMLElement>(
|
|
67
85
|
'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
|
|
@@ -123,6 +141,20 @@
|
|
|
123
141
|
</script>
|
|
124
142
|
|
|
125
143
|
{#if open}
|
|
144
|
+
<!-- The overlay only carries role="button" -- and therefore an accessible
|
|
145
|
+
name -- while it is actually dismissible (dismissOnOutsideClick):
|
|
146
|
+
clicking it is already a guarded no-op otherwise (see
|
|
147
|
+
handleOverlayClick), and announcing a no-op as a focusable "button" is
|
|
148
|
+
worse for assistive tech than leaving it out of the accessibility tree
|
|
149
|
+
entirely. Modal's overlay applies the same reasoning for the same
|
|
150
|
+
shape of problem. When it IS dismissible, a role="button" node with no
|
|
151
|
+
accessible name would be announced as an unlabelled button, so it gets
|
|
152
|
+
one -- "Close sheet" by default, overridable via `overlayAriaLabel`.
|
|
153
|
+
The fallback is `||` on a trimmed value rather than `??`: an empty or
|
|
154
|
+
whitespace-only override is a name a screen reader cannot announce, so
|
|
155
|
+
it has to fall back like an absent one. `??` would forward it and leave
|
|
156
|
+
the overlay silently unnamed, which is the defect this whole block
|
|
157
|
+
exists to prevent. -->
|
|
126
158
|
<div
|
|
127
159
|
bind:this={overlayDiv}
|
|
128
160
|
use:scrollLockAction
|
|
@@ -132,7 +164,8 @@
|
|
|
132
164
|
: 'overlay-noninteractive'} {classes ?? ''}"
|
|
133
165
|
onclick={handleOverlayClick}
|
|
134
166
|
onkeydown={handleKeyDown}
|
|
135
|
-
role=
|
|
167
|
+
role={dismissOnOutsideClick ? 'button' : null}
|
|
168
|
+
aria-label={dismissOnOutsideClick ? overlayAriaLabel?.trim() || 'Close sheet' : null}
|
|
136
169
|
tabindex="-1"
|
|
137
170
|
data-pw={typeof testId === 'string' ? testId : null}
|
|
138
171
|
testID={typeof testId === 'string' ? testId : null}
|
|
@@ -223,6 +256,22 @@
|
|
|
223
256
|
outline: none;
|
|
224
257
|
}
|
|
225
258
|
|
|
259
|
+
/* The panel itself is the initial focus target on open (scrollLockAction
|
|
260
|
+
focuses it directly, and it's the Tab-trap's own boundary), so removing
|
|
261
|
+
its outline unconditionally left a keyboard user with no visible sign
|
|
262
|
+
focus had moved into the sheet at all -- particularly visible on the
|
|
263
|
+
"Raw" variant, which has no focusable child for focus to land on
|
|
264
|
+
instead. :focus-visible restores a ring precisely when the browser
|
|
265
|
+
judges it's from keyboard/programmatic focus rather than a mouse click,
|
|
266
|
+
so clicking the trigger still shows nothing new. outline-offset is
|
|
267
|
+
negative (inset) rather than the usual positive offset other components
|
|
268
|
+
in this library use, because left/right/top/bottom panels sit flush
|
|
269
|
+
against a viewport edge -- a positive offset would clip there. */
|
|
270
|
+
.sheet-panel:focus-visible {
|
|
271
|
+
outline: var(--sheet-panel-focus-outline, 2px solid #2563eb);
|
|
272
|
+
outline-offset: var(--sheet-panel-focus-outline-offset, -2px);
|
|
273
|
+
}
|
|
274
|
+
|
|
226
275
|
/* --sheet-top/-right/-bottom/-left all default to the previous hardcoded
|
|
227
276
|
edge-to-edge values below, so an unconfigured Sheet renders unchanged.
|
|
228
277
|
Overriding one (e.g. --sheet-top to clear a fixed header, or --sheet-bottom:
|
|
@@ -17,6 +17,14 @@ export type OptionalSheetProperties = {
|
|
|
17
17
|
* dimming backdrop — e.g. an anchored dropdown-style panel.
|
|
18
18
|
*/
|
|
19
19
|
dismissOnOutsideClick?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Accessible name (rendered as `aria-label`) for the overlay's `role="button"`
|
|
22
|
+
* wrapper. Only meaningful when the overlay is dismissible
|
|
23
|
+
* (`dismissOnOutsideClick`) — that's the only state where the overlay is
|
|
24
|
+
* announced as a button at all (see Accessibility below). Defaults to
|
|
25
|
+
* `"Close sheet"`; override for a more specific or localized wording.
|
|
26
|
+
*/
|
|
27
|
+
overlayAriaLabel?: string;
|
|
20
28
|
showCloseButton?: boolean;
|
|
21
29
|
/**
|
|
22
30
|
* Renders `title` through a real `<h1>`-`<h6>` heading element instead of
|
package/dist-wc/index.js
CHANGED
|
@@ -6768,21 +6768,21 @@ function pillToneClass(e) {
|
|
|
6768
6768
|
//#region src/lib/Pill/Pill.svelte
|
|
6769
6769
|
var root$75 = /* @__PURE__ */ from_html("<span class=\"pill-leading-icon svelte-13eug5u\"><!></span>"), root_1$64 = /* @__PURE__ */ from_html("<div class=\"pill-dismiss svelte-13eug5u\"><!></div>"), root_2$48 = /* @__PURE__ */ from_html("<div><!> <span class=\"pill-text svelte-13eug5u\"> </span> <!></div>"), $$css$75 = {
|
|
6770
6770
|
hash: "svelte-13eug5u",
|
|
6771
|
-
code: ".pill.svelte-13eug5u {display:inline-flex;align-items:center;\n /* A pill is content-width by default. A caller stacking pills into a menu needs\n them to fill the column and align their labels left, which is a layout choice\n the call site owns — hence tokens rather than a variant. */width:var(--pill-width, auto);justify-content:var(--pill-justify-content, center);text-align:var(--pill-text-align, center);gap:var(--pill-gap, 4px);background-color:var(--pill-background, var(--_pill-tone-background, #e0e0e0));color:var(--pill-color, var(--_pill-tone-color, #333333));font-size:var(--pill-font-size, 13px);font-weight:var(--pill-font-weight, 500);font-family:var(--pill-font-family);letter-spacing:var(--pill-letter-spacing, normal);text-transform:var(--pill-text-transform, none);padding:var(--pill-padding, 6px 10px);border-radius:var(--pill-border-radius, 999px);border:var(--pill-border, none);\n /* Non-interactive by default: nothing is clickable, so nothing should look\n clickable. The pointer default below applies only once role=\"button\" is\n actually present (see handleClick / `interactive`) — an explicit\n --pill-cursor still wins in both cases. */cursor:var(--pill-cursor, default);max-width:var(--pill-max-width);line-height:var(--pill-line-height, 1);flex-shrink:var(--pill-flex-shrink);}.pill[role='button'].svelte-13eug5u {cursor:var(--pill-cursor, pointer);}\n\n /* Tone defaults — an internal --_pill-tone-* layer, mirroring how Button's\n variant classes set --_btn-*: a plain --pill-background/--pill-color\n (explicit, or via `classes`) always wins over the tone's default. */.tone-accent.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-accent-background, #d1ecf1);--_pill-tone-color: var(--pill-tone-accent-color, #0c5460);}.tone-ok.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-ok-background, #d4edda);--_pill-tone-color: var(--pill-tone-ok-color, #155724);}.tone-warn.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-warn-background, #fff3cd);--_pill-tone-color: var(--pill-tone-warn-color, #856404);}.tone-danger.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-danger-background, #f8d7da);--_pill-tone-color: var(--pill-tone-danger-color, #721c24);}.tone-muted.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-muted-background, #f1f1f1);--_pill-tone-color: var(--pill-tone-muted-color, #6b7280);}.pill.svelte-13eug5u:hover:not(.disabled) {background-color:var(\n --pill-hover-background,\n var(--pill-background, var(--_pill-tone-background, #d0d0d0))\n );color:var(--pill-hover-color, var(--pill-color, var(--_pill-tone-color, #333333)));}.pill.disabled.svelte-13eug5u {opacity:var(--pill-disabled-opacity, 0.4);cursor:var(--pill-disabled-cursor, not-allowed);}.pill-text.svelte-13eug5u {overflow:hidden;text-overflow:var(--pill-text-overflow, ellipsis);white-space:var(--pill-text-white-space, nowrap);}.pill-leading-icon.svelte-13eug5u {display:inline-flex;align-items:center;flex-shrink:0;}.pill-dismiss.svelte-13eug5u {--button-color: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-text-color: var(\n --pill-dismiss-hover-color,\n var(--pill-dismiss-color, currentColor)\n );--cursor: inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}\n\n /* Consumer themes can set Button tokens on its container, beating inherited\n wrapper values. Pin the painting element too so the chip owns its enabled\n glyph; leave disabled colours and focus indicators to the consumer theme. */.pill-dismiss.svelte-13eug5u .button-container,\n .pill-dismiss.svelte-13eug5u .button-el {--button-color: transparent;--button-background: none;--button-active-background: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-border: none;--button-hover-text-color: var(\n --pill-dismiss-hover-color,\n var(--pill-dismiss-color, currentColor)\n );}.pill-dismiss.svelte-13eug5u svg {width:var(--pill-dismiss-size, 14px);height:var(--pill-dismiss-size, 14px);}"
|
|
6771
|
+
code: ".pill.svelte-13eug5u {display:inline-flex;align-items:center;\n /* A pill is content-width by default. A caller stacking pills into a menu needs\n them to fill the column and align their labels left, which is a layout choice\n the call site owns — hence tokens rather than a variant. */width:var(--pill-width, auto);justify-content:var(--pill-justify-content, center);text-align:var(--pill-text-align, center);gap:var(--pill-gap, 4px);background-color:var(--pill-background, var(--_pill-tone-background, #e0e0e0));color:var(--pill-color, var(--_pill-tone-color, #333333));font-size:var(--pill-font-size, 13px);font-weight:var(--pill-font-weight, 500);font-family:var(--pill-font-family);letter-spacing:var(--pill-letter-spacing, normal);text-transform:var(--pill-text-transform, none);padding:var(--pill-padding, 6px 10px);border-radius:var(--pill-border-radius, 999px);border:var(--pill-border, none);\n /* Non-interactive by default: nothing is clickable, so nothing should look\n clickable. The pointer default below applies only once role=\"button\" is\n actually present (see handleClick / `interactive`) — an explicit\n --pill-cursor still wins in both cases. */cursor:var(--pill-cursor, default);max-width:var(--pill-max-width);line-height:var(--pill-line-height, 1);flex-shrink:var(--pill-flex-shrink);}.pill[role='button'].svelte-13eug5u {cursor:var(--pill-cursor, pointer);}.pill[role='button'].svelte-13eug5u:focus-visible {outline:var(--pill-focus-outline, 2px solid currentColor);outline-offset:var(--pill-focus-outline-offset, 2px);}\n\n /* Tone defaults — an internal --_pill-tone-* layer, mirroring how Button's\n variant classes set --_btn-*: a plain --pill-background/--pill-color\n (explicit, or via `classes`) always wins over the tone's default. */.tone-accent.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-accent-background, #d1ecf1);--_pill-tone-color: var(--pill-tone-accent-color, #0c5460);}.tone-ok.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-ok-background, #d4edda);--_pill-tone-color: var(--pill-tone-ok-color, #155724);}.tone-warn.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-warn-background, #fff3cd);--_pill-tone-color: var(--pill-tone-warn-color, #856404);}.tone-danger.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-danger-background, #f8d7da);--_pill-tone-color: var(--pill-tone-danger-color, #721c24);}.tone-muted.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-muted-background, #f1f1f1);--_pill-tone-color: var(--pill-tone-muted-color, #6b7280);}.pill.svelte-13eug5u:hover:not(.disabled) {background-color:var(\n --pill-hover-background,\n var(--pill-background, var(--_pill-tone-background, #d0d0d0))\n );color:var(--pill-hover-color, var(--pill-color, var(--_pill-tone-color, #333333)));}.pill.disabled.svelte-13eug5u {opacity:var(--pill-disabled-opacity, 0.4);cursor:var(--pill-disabled-cursor, not-allowed);}.pill-text.svelte-13eug5u {overflow:hidden;text-overflow:var(--pill-text-overflow, ellipsis);white-space:var(--pill-text-white-space, nowrap);}.pill-leading-icon.svelte-13eug5u {display:inline-flex;align-items:center;flex-shrink:0;}.pill-dismiss.svelte-13eug5u {--button-color: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-text-color: var(\n --pill-dismiss-hover-color,\n var(--pill-dismiss-color, currentColor)\n );--cursor: inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}\n\n /* Consumer themes can set Button tokens on its container, beating inherited\n wrapper values. Pin the painting element too so the chip owns its enabled\n glyph; leave disabled colours and focus indicators to the consumer theme. */.pill-dismiss.svelte-13eug5u .button-container,\n .pill-dismiss.svelte-13eug5u .button-el {--button-color: transparent;--button-background: none;--button-active-background: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-border: none;--button-hover-text-color: var(\n --pill-dismiss-hover-color,\n var(--pill-dismiss-color, currentColor)\n );}.pill-dismiss.svelte-13eug5u svg {width:var(--pill-dismiss-size, 14px);height:var(--pill-dismiss-size, 14px);}"
|
|
6772
6772
|
};
|
|
6773
6773
|
function Pill(e, t) {
|
|
6774
6774
|
push(t, !0), append_styles$1(e, $$css$75);
|
|
6775
|
-
let n = prop(t, "text", 7), i = prop(t, "dismissible", 7, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "tone", 7), s = prop(t, "testId", 7), c = prop(t, "title", 7), l = prop(t, "dismissIcon", 7), u = prop(t, "dismissLabel", 7), f = prop(t, "leadingIcon", 7), p = prop(t, "onclick", 7), h = prop(t, "ondismiss", 7), S = prop(t, "classes", 7), C = /* @__PURE__ */ user_derived(() => typeof p() == "function");
|
|
6776
|
-
function
|
|
6775
|
+
let n = prop(t, "text", 7), i = prop(t, "dismissible", 7, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "tone", 7), s = prop(t, "testId", 7), c = prop(t, "title", 7), l = prop(t, "dismissIcon", 7), u = prop(t, "dismissLabel", 7), f = prop(t, "leadingIcon", 7), p = prop(t, "onclick", 7), h = prop(t, "ondismiss", 7), S = prop(t, "classes", 7), C = prop(t, "attrs", 7), k = /* @__PURE__ */ user_derived(() => typeof p() == "function");
|
|
6776
|
+
function R(e) {
|
|
6777
6777
|
a() || p()?.(e);
|
|
6778
6778
|
}
|
|
6779
|
-
function
|
|
6779
|
+
function G(e) {
|
|
6780
6780
|
e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.click());
|
|
6781
6781
|
}
|
|
6782
|
-
function
|
|
6782
|
+
function te(e) {
|
|
6783
6783
|
e.stopPropagation(), !a() && h()?.();
|
|
6784
6784
|
}
|
|
6785
|
-
var
|
|
6785
|
+
var ne = {
|
|
6786
6786
|
get text() {
|
|
6787
6787
|
return n();
|
|
6788
6788
|
},
|
|
@@ -6854,10 +6854,28 @@ function Pill(e, t) {
|
|
|
6854
6854
|
},
|
|
6855
6855
|
set classes(e) {
|
|
6856
6856
|
S(e), flushSync();
|
|
6857
|
+
},
|
|
6858
|
+
get attrs() {
|
|
6859
|
+
return C();
|
|
6860
|
+
},
|
|
6861
|
+
set attrs(e) {
|
|
6862
|
+
C(e), flushSync();
|
|
6857
6863
|
}
|
|
6858
|
-
},
|
|
6859
|
-
|
|
6860
|
-
|
|
6864
|
+
}, re = root_2$48();
|
|
6865
|
+
attribute_effect(re, (e) => ({
|
|
6866
|
+
...C() ?? {},
|
|
6867
|
+
class: `pill ${e ?? ""} ${S() ?? "" ?? ""}`,
|
|
6868
|
+
onclick: get(k) ? R : null,
|
|
6869
|
+
onkeydown: get(k) ? G : null,
|
|
6870
|
+
role: get(k) ? "button" : null,
|
|
6871
|
+
tabindex: get(k) ? 0 : null,
|
|
6872
|
+
"aria-disabled": get(k) && a() ? !0 : null,
|
|
6873
|
+
"data-pw": typeof s() == "string" ? s() : null,
|
|
6874
|
+
title: c() ?? null,
|
|
6875
|
+
testID: typeof s() == "string" ? s() : null,
|
|
6876
|
+
[CLASS]: { disabled: a() }
|
|
6877
|
+
}), [() => pillToneClass(o())], void 0, void 0, "svelte-13eug5u");
|
|
6878
|
+
var be = child(re), Me = (e) => {
|
|
6861
6879
|
var t = root$75();
|
|
6862
6880
|
snippet(child(t), f), reset(t), append(e, t);
|
|
6863
6881
|
};
|
|
@@ -6875,7 +6893,7 @@ function Pill(e, t) {
|
|
|
6875
6893
|
get disabled() {
|
|
6876
6894
|
return a();
|
|
6877
6895
|
},
|
|
6878
|
-
onclick:
|
|
6896
|
+
onclick: te,
|
|
6879
6897
|
get ariaLabel() {
|
|
6880
6898
|
return get(e);
|
|
6881
6899
|
}
|
|
@@ -6899,15 +6917,9 @@ function Pill(e, t) {
|
|
|
6899
6917
|
};
|
|
6900
6918
|
return if_block(it, (e) => {
|
|
6901
6919
|
i() && e(at);
|
|
6902
|
-
}), reset(
|
|
6903
|
-
re = set_class(ne, 1, `pill ${e ?? ""} ${S() ?? "" ?? ""}`, "svelte-13eug5u", re, { disabled: a() }), set_attribute(ne, "role", get(C) ? "button" : null), set_attribute(ne, "tabindex", get(C) ? 0 : null), set_attribute(ne, "aria-disabled", get(C) && a() ? !0 : null), set_attribute(ne, "data-pw", typeof s() == "string" ? s() : null), set_attribute(ne, "title", c() ?? null), set_attribute(ne, "testid", typeof s() == "string" ? s() : null), set_text(Ue, n());
|
|
6904
|
-
}, [() => pillToneClass(o())]), delegated("click", ne, function(...e) {
|
|
6905
|
-
(get(C) ? k : null)?.apply(this, e);
|
|
6906
|
-
}), delegated("keydown", ne, function(...e) {
|
|
6907
|
-
(get(C) ? R : null)?.apply(this, e);
|
|
6908
|
-
}), append(e, ne), pop(te);
|
|
6920
|
+
}), reset(re), template_effect(() => set_text(Ue, n())), append(e, re), pop(ne);
|
|
6909
6921
|
}
|
|
6910
|
-
|
|
6922
|
+
create_custom_element(Pill, {
|
|
6911
6923
|
text: {},
|
|
6912
6924
|
dismissible: {},
|
|
6913
6925
|
disabled: {},
|
|
@@ -6919,7 +6931,8 @@ delegate(["click", "keydown"]), create_custom_element(Pill, {
|
|
|
6919
6931
|
leadingIcon: {},
|
|
6920
6932
|
onclick: {},
|
|
6921
6933
|
ondismiss: {},
|
|
6922
|
-
classes: {}
|
|
6934
|
+
classes: {},
|
|
6935
|
+
attrs: {}
|
|
6923
6936
|
}, [], [], { mode: "open" });
|
|
6924
6937
|
//#endregion
|
|
6925
6938
|
//#region src/lib/ChipInput/ChipInput.svelte
|
|
@@ -10340,7 +10353,8 @@ customElements.define("sui-pill", create_custom_element(Pill_wc, {
|
|
|
10340
10353
|
},
|
|
10341
10354
|
classes: { type: "String" },
|
|
10342
10355
|
onclick: { type: "Object" },
|
|
10343
|
-
ondismiss: { type: "Object" }
|
|
10356
|
+
ondismiss: { type: "Object" },
|
|
10357
|
+
attrs: { type: "Object" }
|
|
10344
10358
|
}, ["leading-icon", "dismiss-icon"], [], { mode: "open" }));
|
|
10345
10359
|
//#endregion
|
|
10346
10360
|
//#region src/lib/Progress/Progress.svelte
|
|
@@ -12399,7 +12413,7 @@ customElements.define("sui-toggle", create_custom_element(Toggle_wc, {
|
|
|
12399
12413
|
//#region src/lib/Accordion/Accordion.svelte
|
|
12400
12414
|
var root$49 = /* @__PURE__ */ from_html("<div role=\"button\"><!></div>"), root_1$43 = /* @__PURE__ */ from_html("<!> <div><div class=\"accordion-content svelte-1p9ezsm\"><!></div></div>", 1), $$css$49 = {
|
|
12401
12415
|
hash: "svelte-1p9ezsm",
|
|
12402
|
-
code: ".accordion-trigger.svelte-1p9ezsm {cursor:var(--accordion-trigger-cursor, pointer);}.accordion-trigger.disabled.svelte-1p9ezsm {cursor:var(--accordion-trigger-disabled-cursor, not-allowed);}.accordion.svelte-1p9ezsm {display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows var(--accordion-transition, 0.2s ease-out);}.accordion.expanded.svelte-1p9ezsm {grid-template-rows:1fr;}.accordion-content.svelte-1p9ezsm {min-height:0;}"
|
|
12416
|
+
code: ".accordion-trigger.svelte-1p9ezsm {cursor:var(--accordion-trigger-cursor, pointer);}.accordion-trigger.disabled.svelte-1p9ezsm {cursor:var(--accordion-trigger-disabled-cursor, not-allowed);}.accordion.svelte-1p9ezsm {display:grid;grid-template-rows:0fr;overflow:hidden;\n /* overflow: hidden drops this element's automatic minimum size to zero, so\n when it is placed as an item of a consumer's own grid or flex container\n it is otherwise free to be stretched down to whatever size that\n container hands it -- as small as 0px -- independent of how tall its\n own children actually are (issue #550). align-self: start opts the\n panel out of that stretch so it always sizes from its own expanded\n content instead. It is inert when the panel is not a grid or flex item,\n and does not change the collapse animation: collapsed still resolves\n to 0px either way.\n\n Exposed as --accordion-align-self rather than hardcoded: Svelte's\n scoped class raises .accordion's specificity above a plain utility\n class passed through `classes`, so a consumer who legitimately wants\n the panel stretched (or centered, etc.) could not otherwise override\n this one declaration without reaching for :global() or !important. */align-self:var(--accordion-align-self, start);transition:grid-template-rows var(--accordion-transition, 0.2s ease-out);}.accordion.expanded.svelte-1p9ezsm {grid-template-rows:1fr;}.accordion-content.svelte-1p9ezsm {min-height:0;}"
|
|
12403
12417
|
};
|
|
12404
12418
|
function Accordion(e, t) {
|
|
12405
12419
|
let n = props_id();
|
|
@@ -16274,12 +16288,20 @@ var rest_excludes$37 = new Set([
|
|
|
16274
16288
|
"$$slots",
|
|
16275
16289
|
"$$events",
|
|
16276
16290
|
"$$legacy",
|
|
16277
|
-
"$$host"
|
|
16291
|
+
"$$host",
|
|
16292
|
+
"modalAriaLabel",
|
|
16293
|
+
"modalRole"
|
|
16278
16294
|
]);
|
|
16279
16295
|
function Modal_wc(e, t) {
|
|
16280
16296
|
push(t, !0);
|
|
16281
|
-
let n = /* @__PURE__ */ rest_props(t, rest_excludes$37);
|
|
16282
|
-
Modal(e, spread_props(() =>
|
|
16297
|
+
let n = prop(t, "modalAriaLabel", 7), i = prop(t, "modalRole", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$37);
|
|
16298
|
+
return Modal(e, spread_props(() => a, {
|
|
16299
|
+
get ariaLabel() {
|
|
16300
|
+
return n();
|
|
16301
|
+
},
|
|
16302
|
+
get role() {
|
|
16303
|
+
return i();
|
|
16304
|
+
},
|
|
16283
16305
|
content: (e) => {
|
|
16284
16306
|
var n = comment(), i = first_child(n), a = (e) => {
|
|
16285
16307
|
var n = comment();
|
|
@@ -16308,7 +16330,20 @@ function Modal_wc(e, t) {
|
|
|
16308
16330
|
content: !0,
|
|
16309
16331
|
footerSnippet: !0
|
|
16310
16332
|
}
|
|
16311
|
-
})), pop(
|
|
16333
|
+
})), pop({
|
|
16334
|
+
get modalAriaLabel() {
|
|
16335
|
+
return n();
|
|
16336
|
+
},
|
|
16337
|
+
set modalAriaLabel(e) {
|
|
16338
|
+
n(e), flushSync();
|
|
16339
|
+
},
|
|
16340
|
+
get modalRole() {
|
|
16341
|
+
return i();
|
|
16342
|
+
},
|
|
16343
|
+
set modalRole(e) {
|
|
16344
|
+
i(e), flushSync();
|
|
16345
|
+
}
|
|
16346
|
+
});
|
|
16312
16347
|
}
|
|
16313
16348
|
customElements.define("sui-modal", create_custom_element(Modal_wc, {
|
|
16314
16349
|
size: {
|
|
@@ -16395,7 +16430,15 @@ customElements.define("sui-modal", create_custom_element(Modal_wc, {
|
|
|
16395
16430
|
onprimarybuttonclick: { type: "Object" },
|
|
16396
16431
|
onsecondarybuttonclick: { type: "Object" },
|
|
16397
16432
|
onoverlayclick: { type: "Object" },
|
|
16398
|
-
ondismiss: { type: "Object" }
|
|
16433
|
+
ondismiss: { type: "Object" },
|
|
16434
|
+
modalAriaLabel: {
|
|
16435
|
+
attribute: "modal-aria-label",
|
|
16436
|
+
type: "String"
|
|
16437
|
+
},
|
|
16438
|
+
modalRole: {
|
|
16439
|
+
attribute: "modal-role",
|
|
16440
|
+
type: "String"
|
|
16441
|
+
}
|
|
16399
16442
|
}, ["default", "footer"], [], { mode: "open" }));
|
|
16400
16443
|
//#endregion
|
|
16401
16444
|
//#region src/lib/assets/signal.svg?raw
|
|
@@ -17566,13 +17609,13 @@ customElements.define("sui-select", create_custom_element(Select_wc, {
|
|
|
17566
17609
|
}, ["bottom-content"], [], { mode: "open" }));
|
|
17567
17610
|
//#endregion
|
|
17568
17611
|
//#region src/lib/Sheet/Sheet.svelte
|
|
17569
|
-
var root$31 = /* @__PURE__ */ from_html("<span class=\"sheet-title svelte-1dln6bq\"> </span>"), root_1$28 = /* @__PURE__ */ from_html("<div class=\"sheet-close-button svelte-1dln6bq\"><!></div>"), root_2$22 = /* @__PURE__ */ from_html("<div class=\"sheet-header svelte-1dln6bq\"><!> <!></div>"), root_3$20 = /* @__PURE__ */ from_html("<div class=\"sheet-footer svelte-1dln6bq\"><!></div>"), root_4$16 = /* @__PURE__ */ from_html("<div
|
|
17612
|
+
var root$31 = /* @__PURE__ */ from_html("<span class=\"sheet-title svelte-1dln6bq\"> </span>"), root_1$28 = /* @__PURE__ */ from_html("<div class=\"sheet-close-button svelte-1dln6bq\"><!></div>"), root_2$22 = /* @__PURE__ */ from_html("<div class=\"sheet-header svelte-1dln6bq\"><!> <!></div>"), root_3$20 = /* @__PURE__ */ from_html("<div class=\"sheet-footer svelte-1dln6bq\"><!></div>"), root_4$16 = /* @__PURE__ */ from_html("<div tabindex=\"-1\"><div role=\"dialog\" aria-modal=\"true\" tabindex=\"-1\"><!> <div class=\"sheet-content svelte-1dln6bq\"><!></div> <!></div></div>"), $$css$33 = {
|
|
17570
17613
|
hash: "svelte-1dln6bq",
|
|
17571
|
-
code: ".sheet-overlay.svelte-1dln6bq {position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--sheet-overlay-z-index, 15);-webkit-tap-highlight-color:transparent;}.overlay-visible.svelte-1dln6bq {background-color:var(--sheet-overlay-background, #00000066);}.overlay-invisible.svelte-1dln6bq {background-color:transparent;}.overlay-interactive.svelte-1dln6bq {pointer-events:auto;}.overlay-noninteractive.svelte-1dln6bq {pointer-events:none;}.sheet-panel.svelte-1dln6bq {position:fixed;display:flex;flex-direction:column;background-color:var(--sheet-background, #ffffff);box-shadow:var(--sheet-box-shadow, -2px 0 8px rgba(0, 0, 0, 0.15));z-index:var(--sheet-z-index, 16);pointer-events:auto;outline:none;}\n\n /* --sheet-top/-right/-bottom/-left all default to the previous hardcoded\n edge-to-edge values below, so an unconfigured Sheet renders unchanged.\n Overriding one (e.g. --sheet-top to clear a fixed header, or --sheet-bottom:\n auto to size to content) turns the panel from an edge-to-edge slide-in into\n an anchored floating panel, without needing a different component. */.sheet-panel.left.svelte-1dln6bq,\n .sheet-panel.right.svelte-1dln6bq {top:var(--sheet-top, 0);bottom:var(--sheet-bottom, 0);width:var(--sheet-width, 400px);max-width:var(--sheet-max-width, 100vw);}.sheet-panel.left.svelte-1dln6bq {left:var(--sheet-left, 0);border-right:var(--sheet-border, none);}.sheet-panel.right.svelte-1dln6bq {right:var(--sheet-right, 0);border-left:var(--sheet-border, none);}.sheet-panel.top.svelte-1dln6bq,\n .sheet-panel.bottom.svelte-1dln6bq {left:var(--sheet-left, 0);right:var(--sheet-right, 0);height:var(--sheet-height, 300px);max-height:var(--sheet-max-height, 100vh);}.sheet-panel.top.svelte-1dln6bq {top:var(--sheet-top, 0);border-bottom:var(--sheet-border, none);}.sheet-panel.bottom.svelte-1dln6bq {bottom:var(--sheet-bottom, 0);border-top:var(--sheet-border, none);}\n\n /* `side=\"center\"` is a fixed-size floating dialog, not an edge-anchored\n panel: no top/bottom/left/right offset, sized by its own tokens rather\n than --sheet-width/--sheet-height (so an existing left/right/top/bottom\n theme is untouched by adding this variant), and centered with a\n transform instead of stretching to an edge. */.sheet-panel.center.svelte-1dln6bq {top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sheet-center-width, 480px);max-width:var(--sheet-center-max-width, calc(100vw - 32px));max-height:var(--sheet-center-max-height, 90vh);}.sheet-header.svelte-1dln6bq {display:flex;align-items:center;padding:var(--sheet-header-padding, 16px 20px);background-color:var(--sheet-header-background, inherit);border-bottom:var(--sheet-header-border-bottom, 1px solid #e0e0e0);flex-shrink:0;}.sheet-title.svelte-1dln6bq {flex:1;font-size:var(--sheet-title-font-size, 18px);font-weight:var(--sheet-title-font-weight, 600);font-family:var(--sheet-title-font-family, inherit);color:var(--sheet-title-color, #1a1a1a);line-height:var(--sheet-title-line-height, 1.4);}.sheet-close-button.svelte-1dln6bq {--button-width: var(--sheet-close-button-size, 32px);--button-height: var(--sheet-close-button-size, 32px);--button-border: none;--button-border-radius: var(--sheet-close-button-border-radius, var(--radius, 4px));--button-color: var(--sheet-close-button-background, transparent);--button-text-color: var(--sheet-close-button-color, #666666);--button-font-size: var(--sheet-close-button-font-size, 16px);--button-padding: 0;--button-hover-color: var(--sheet-close-button-hover-background, #f0f0f0);flex-shrink:0;display:flex;align-items:center;justify-content:center;}.sheet-content.svelte-1dln6bq {flex:1;overflow-y:var(--sheet-content-overflow-y, auto);padding:var(--sheet-content-padding, 20px);scrollbar-width:var(--sheet-scrollbar-width, none);}.sheet-content.svelte-1dln6bq::-webkit-scrollbar {display:none;}.sheet-footer.svelte-1dln6bq {padding:var(--sheet-footer-padding, 16px 20px);background-color:var(--sheet-footer-background, inherit);border-top:var(--sheet-footer-border-top, 1px solid #e0e0e0);flex-shrink:0;}"
|
|
17614
|
+
code: ".sheet-overlay.svelte-1dln6bq {position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--sheet-overlay-z-index, 15);-webkit-tap-highlight-color:transparent;}.overlay-visible.svelte-1dln6bq {background-color:var(--sheet-overlay-background, #00000066);}.overlay-invisible.svelte-1dln6bq {background-color:transparent;}.overlay-interactive.svelte-1dln6bq {pointer-events:auto;}.overlay-noninteractive.svelte-1dln6bq {pointer-events:none;}.sheet-panel.svelte-1dln6bq {position:fixed;display:flex;flex-direction:column;background-color:var(--sheet-background, #ffffff);box-shadow:var(--sheet-box-shadow, -2px 0 8px rgba(0, 0, 0, 0.15));z-index:var(--sheet-z-index, 16);pointer-events:auto;outline:none;}\n\n /* The panel itself is the initial focus target on open (scrollLockAction\n focuses it directly, and it's the Tab-trap's own boundary), so removing\n its outline unconditionally left a keyboard user with no visible sign\n focus had moved into the sheet at all -- particularly visible on the\n \"Raw\" variant, which has no focusable child for focus to land on\n instead. :focus-visible restores a ring precisely when the browser\n judges it's from keyboard/programmatic focus rather than a mouse click,\n so clicking the trigger still shows nothing new. outline-offset is\n negative (inset) rather than the usual positive offset other components\n in this library use, because left/right/top/bottom panels sit flush\n against a viewport edge -- a positive offset would clip there. */.sheet-panel.svelte-1dln6bq:focus-visible {outline:var(--sheet-panel-focus-outline, 2px solid #2563eb);outline-offset:var(--sheet-panel-focus-outline-offset, -2px);}\n\n /* --sheet-top/-right/-bottom/-left all default to the previous hardcoded\n edge-to-edge values below, so an unconfigured Sheet renders unchanged.\n Overriding one (e.g. --sheet-top to clear a fixed header, or --sheet-bottom:\n auto to size to content) turns the panel from an edge-to-edge slide-in into\n an anchored floating panel, without needing a different component. */.sheet-panel.left.svelte-1dln6bq,\n .sheet-panel.right.svelte-1dln6bq {top:var(--sheet-top, 0);bottom:var(--sheet-bottom, 0);width:var(--sheet-width, 400px);max-width:var(--sheet-max-width, 100vw);}.sheet-panel.left.svelte-1dln6bq {left:var(--sheet-left, 0);border-right:var(--sheet-border, none);}.sheet-panel.right.svelte-1dln6bq {right:var(--sheet-right, 0);border-left:var(--sheet-border, none);}.sheet-panel.top.svelte-1dln6bq,\n .sheet-panel.bottom.svelte-1dln6bq {left:var(--sheet-left, 0);right:var(--sheet-right, 0);height:var(--sheet-height, 300px);max-height:var(--sheet-max-height, 100vh);}.sheet-panel.top.svelte-1dln6bq {top:var(--sheet-top, 0);border-bottom:var(--sheet-border, none);}.sheet-panel.bottom.svelte-1dln6bq {bottom:var(--sheet-bottom, 0);border-top:var(--sheet-border, none);}\n\n /* `side=\"center\"` is a fixed-size floating dialog, not an edge-anchored\n panel: no top/bottom/left/right offset, sized by its own tokens rather\n than --sheet-width/--sheet-height (so an existing left/right/top/bottom\n theme is untouched by adding this variant), and centered with a\n transform instead of stretching to an edge. */.sheet-panel.center.svelte-1dln6bq {top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sheet-center-width, 480px);max-width:var(--sheet-center-max-width, calc(100vw - 32px));max-height:var(--sheet-center-max-height, 90vh);}.sheet-header.svelte-1dln6bq {display:flex;align-items:center;padding:var(--sheet-header-padding, 16px 20px);background-color:var(--sheet-header-background, inherit);border-bottom:var(--sheet-header-border-bottom, 1px solid #e0e0e0);flex-shrink:0;}.sheet-title.svelte-1dln6bq {flex:1;font-size:var(--sheet-title-font-size, 18px);font-weight:var(--sheet-title-font-weight, 600);font-family:var(--sheet-title-font-family, inherit);color:var(--sheet-title-color, #1a1a1a);line-height:var(--sheet-title-line-height, 1.4);}.sheet-close-button.svelte-1dln6bq {--button-width: var(--sheet-close-button-size, 32px);--button-height: var(--sheet-close-button-size, 32px);--button-border: none;--button-border-radius: var(--sheet-close-button-border-radius, var(--radius, 4px));--button-color: var(--sheet-close-button-background, transparent);--button-text-color: var(--sheet-close-button-color, #666666);--button-font-size: var(--sheet-close-button-font-size, 16px);--button-padding: 0;--button-hover-color: var(--sheet-close-button-hover-background, #f0f0f0);flex-shrink:0;display:flex;align-items:center;justify-content:center;}.sheet-content.svelte-1dln6bq {flex:1;overflow-y:var(--sheet-content-overflow-y, auto);padding:var(--sheet-content-padding, 20px);scrollbar-width:var(--sheet-scrollbar-width, none);}.sheet-content.svelte-1dln6bq::-webkit-scrollbar {display:none;}.sheet-footer.svelte-1dln6bq {padding:var(--sheet-footer-padding, 16px 20px);background-color:var(--sheet-footer-background, inherit);border-top:var(--sheet-footer-border-top, 1px solid #e0e0e0);flex-shrink:0;}"
|
|
17572
17615
|
};
|
|
17573
17616
|
function Sheet(e, t) {
|
|
17574
17617
|
push(t, !0), append_styles$1(e, $$css$33);
|
|
17575
|
-
let n = prop(t, "open", 15, !1), i = prop(t, "side", 7, "right"), a = prop(t, "title", 7), o = prop(t, "showOverlay", 7, !0), s = prop(t, "dismissOnOutsideClick", 23, o), c = prop(t, "showCloseButton", 7, !0),
|
|
17618
|
+
let n = prop(t, "open", 15, !1), i = prop(t, "side", 7, "right"), a = prop(t, "title", 7), o = prop(t, "showOverlay", 7, !0), s = prop(t, "dismissOnOutsideClick", 23, o), c = prop(t, "overlayAriaLabel", 7), l = prop(t, "showCloseButton", 7, !0), u = prop(t, "headingLevel", 7), f = prop(t, "testId", 7), p = prop(t, "content", 7), h = prop(t, "footer", 7), S = prop(t, "onclose", 7), C = prop(t, "onafteropen", 7), k = prop(t, "onafterclose", 7), R = prop(t, "classes", 7), G = /* @__PURE__ */ state(null), te = /* @__PURE__ */ state(null), ne = /* @__PURE__ */ user_derived(() => {
|
|
17576
17619
|
switch (i()) {
|
|
17577
17620
|
case "left": return {
|
|
17578
17621
|
x: -400,
|
|
@@ -17601,38 +17644,42 @@ function Sheet(e, t) {
|
|
|
17601
17644
|
};
|
|
17602
17645
|
}
|
|
17603
17646
|
});
|
|
17604
|
-
function
|
|
17605
|
-
n(!1),
|
|
17606
|
-
}
|
|
17607
|
-
function re(e) {
|
|
17608
|
-
e.target === get(R) && s() && ne();
|
|
17647
|
+
function re() {
|
|
17648
|
+
n(!1), S()?.();
|
|
17609
17649
|
}
|
|
17610
17650
|
function be(e) {
|
|
17651
|
+
e.target === get(G) && s() && re();
|
|
17652
|
+
}
|
|
17653
|
+
function Me(e) {
|
|
17611
17654
|
if (e.key === "Escape") {
|
|
17612
|
-
|
|
17655
|
+
re();
|
|
17656
|
+
return;
|
|
17657
|
+
}
|
|
17658
|
+
if ((e.key === "Enter" || e.key === " ") && s() && e.target === get(G)) {
|
|
17659
|
+
e.preventDefault(), re();
|
|
17613
17660
|
return;
|
|
17614
17661
|
}
|
|
17615
|
-
if (e.key === "Tab" && get(
|
|
17616
|
-
let t = get(
|
|
17662
|
+
if (e.key === "Tab" && get(te) !== null) {
|
|
17663
|
+
let t = get(te).querySelectorAll("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"), n = t.item(0), i = t.item(t.length - 1);
|
|
17617
17664
|
if (n === null || i === null) return;
|
|
17618
17665
|
document.activeElement === (e.shiftKey ? n : i) && (e.preventDefault(), (e.shiftKey ? i : n).focus());
|
|
17619
17666
|
}
|
|
17620
17667
|
}
|
|
17621
|
-
function
|
|
17668
|
+
function Re(e) {
|
|
17622
17669
|
return lockBodyScroll(), tick().then(() => {
|
|
17623
|
-
get(
|
|
17670
|
+
get(te) !== null && get(te).focus();
|
|
17624
17671
|
}), { destroy() {
|
|
17625
17672
|
unlockBodyScroll();
|
|
17626
17673
|
} };
|
|
17627
17674
|
}
|
|
17628
|
-
function Re() {
|
|
17629
|
-
typeof S() == "function" && S()();
|
|
17630
|
-
}
|
|
17631
17675
|
function Ue() {
|
|
17632
17676
|
typeof C() == "function" && C()();
|
|
17633
17677
|
}
|
|
17634
|
-
|
|
17635
|
-
|
|
17678
|
+
function it() {
|
|
17679
|
+
typeof k() == "function" && k()();
|
|
17680
|
+
}
|
|
17681
|
+
let at = /* @__PURE__ */ user_derived(() => typeof u() == "number" && Number.isInteger(u()) && u() >= 1 && u() <= 6 ? `h${u()}` : null);
|
|
17682
|
+
var ot = {
|
|
17636
17683
|
get open() {
|
|
17637
17684
|
return n();
|
|
17638
17685
|
},
|
|
@@ -17663,66 +17710,72 @@ function Sheet(e, t) {
|
|
|
17663
17710
|
set dismissOnOutsideClick(e = o) {
|
|
17664
17711
|
s(e), flushSync();
|
|
17665
17712
|
},
|
|
17666
|
-
get
|
|
17713
|
+
get overlayAriaLabel() {
|
|
17667
17714
|
return c();
|
|
17668
17715
|
},
|
|
17669
|
-
set
|
|
17716
|
+
set overlayAriaLabel(e) {
|
|
17670
17717
|
c(e), flushSync();
|
|
17671
17718
|
},
|
|
17672
|
-
get
|
|
17719
|
+
get showCloseButton() {
|
|
17673
17720
|
return l();
|
|
17674
17721
|
},
|
|
17675
|
-
set
|
|
17722
|
+
set showCloseButton(e = !0) {
|
|
17676
17723
|
l(e), flushSync();
|
|
17677
17724
|
},
|
|
17678
|
-
get
|
|
17725
|
+
get headingLevel() {
|
|
17679
17726
|
return u();
|
|
17680
17727
|
},
|
|
17681
|
-
set
|
|
17728
|
+
set headingLevel(e) {
|
|
17682
17729
|
u(e), flushSync();
|
|
17683
17730
|
},
|
|
17684
|
-
get
|
|
17731
|
+
get testId() {
|
|
17685
17732
|
return f();
|
|
17686
17733
|
},
|
|
17687
|
-
set
|
|
17734
|
+
set testId(e) {
|
|
17688
17735
|
f(e), flushSync();
|
|
17689
17736
|
},
|
|
17690
|
-
get
|
|
17737
|
+
get content() {
|
|
17691
17738
|
return p();
|
|
17692
17739
|
},
|
|
17693
|
-
set
|
|
17740
|
+
set content(e) {
|
|
17694
17741
|
p(e), flushSync();
|
|
17695
17742
|
},
|
|
17696
|
-
get
|
|
17743
|
+
get footer() {
|
|
17697
17744
|
return h();
|
|
17698
17745
|
},
|
|
17699
|
-
set
|
|
17746
|
+
set footer(e) {
|
|
17700
17747
|
h(e), flushSync();
|
|
17701
17748
|
},
|
|
17702
|
-
get
|
|
17749
|
+
get onclose() {
|
|
17703
17750
|
return S();
|
|
17704
17751
|
},
|
|
17705
|
-
set
|
|
17752
|
+
set onclose(e) {
|
|
17706
17753
|
S(e), flushSync();
|
|
17707
17754
|
},
|
|
17708
|
-
get
|
|
17755
|
+
get onafteropen() {
|
|
17709
17756
|
return C();
|
|
17710
17757
|
},
|
|
17711
|
-
set
|
|
17758
|
+
set onafteropen(e) {
|
|
17712
17759
|
C(e), flushSync();
|
|
17713
17760
|
},
|
|
17714
|
-
get
|
|
17761
|
+
get onafterclose() {
|
|
17715
17762
|
return k();
|
|
17716
17763
|
},
|
|
17717
|
-
set
|
|
17764
|
+
set onafterclose(e) {
|
|
17718
17765
|
k(e), flushSync();
|
|
17766
|
+
},
|
|
17767
|
+
get classes() {
|
|
17768
|
+
return R();
|
|
17769
|
+
},
|
|
17770
|
+
set classes(e) {
|
|
17771
|
+
R(e), flushSync();
|
|
17719
17772
|
}
|
|
17720
|
-
},
|
|
17721
|
-
var t = root_4$16(), n = child(t),
|
|
17773
|
+
}, ct = comment(), lt = first_child(ct), ut = (e) => {
|
|
17774
|
+
var t = root_4$16(), n = child(t), u = child(n), S = (e) => {
|
|
17722
17775
|
var t = root_2$22(), n = child(t), i = (e) => {
|
|
17723
17776
|
var t = comment(), n = first_child(t), i = (e) => {
|
|
17724
17777
|
var t = comment();
|
|
17725
|
-
element(first_child(t), () => get(
|
|
17778
|
+
element(first_child(t), () => get(at), !1, (e, t) => {
|
|
17726
17779
|
set_class(e, 0, "sheet-title svelte-1dln6bq");
|
|
17727
17780
|
var n = text();
|
|
17728
17781
|
template_effect(() => set_text(n, a())), append(t, n);
|
|
@@ -17732,7 +17785,7 @@ function Sheet(e, t) {
|
|
|
17732
17785
|
reset(t), template_effect(() => set_text(n, a())), append(e, t);
|
|
17733
17786
|
};
|
|
17734
17787
|
if_block(n, (e) => {
|
|
17735
|
-
get(
|
|
17788
|
+
get(at) === null ? e(o, -1) : e(i);
|
|
17736
17789
|
}), append(e, t);
|
|
17737
17790
|
};
|
|
17738
17791
|
if_block(n, (e) => {
|
|
@@ -17741,9 +17794,9 @@ function Sheet(e, t) {
|
|
|
17741
17794
|
var o = sibling(n, 2), s = (e) => {
|
|
17742
17795
|
var t = root_1$28();
|
|
17743
17796
|
Button(child(t), spread_props({
|
|
17744
|
-
onclick:
|
|
17797
|
+
onclick: re,
|
|
17745
17798
|
ariaLabel: "Close"
|
|
17746
|
-
}, () => typeof
|
|
17799
|
+
}, () => typeof f() == "string" ? { testId: `${f()}-close` } : {}, {
|
|
17747
17800
|
children: (e, t) => {
|
|
17748
17801
|
next(), append(e, text("✕"));
|
|
17749
17802
|
},
|
|
@@ -17751,27 +17804,27 @@ function Sheet(e, t) {
|
|
|
17751
17804
|
})), reset(t), append(e, t);
|
|
17752
17805
|
};
|
|
17753
17806
|
if_block(o, (e) => {
|
|
17754
|
-
|
|
17807
|
+
l() && e(s);
|
|
17755
17808
|
}), reset(t), append(e, t);
|
|
17756
17809
|
};
|
|
17757
|
-
if_block(
|
|
17758
|
-
(typeof a() == "string" ||
|
|
17810
|
+
if_block(u, (e) => {
|
|
17811
|
+
(typeof a() == "string" || l()) && e(S);
|
|
17759
17812
|
});
|
|
17760
|
-
var
|
|
17761
|
-
snippet(child(
|
|
17762
|
-
var
|
|
17813
|
+
var C = sibling(u, 2);
|
|
17814
|
+
snippet(child(C), p), reset(C);
|
|
17815
|
+
var k = sibling(C, 2), ot = (e) => {
|
|
17763
17816
|
var t = root_3$20();
|
|
17764
|
-
snippet(child(t),
|
|
17817
|
+
snippet(child(t), h), reset(t), append(e, t);
|
|
17765
17818
|
};
|
|
17766
|
-
if_block(
|
|
17767
|
-
typeof
|
|
17768
|
-
}), reset(n), bind_this(n, (e) => set(
|
|
17769
|
-
set_class(t, 1, `sheet-overlay ${o() ? "overlay-visible" : "overlay-invisible"} ${o() || s() ? "overlay-interactive" : "overlay-noninteractive"} ${
|
|
17770
|
-
}), delegated("click", t,
|
|
17819
|
+
if_block(k, (e) => {
|
|
17820
|
+
typeof h() == "function" && e(ot);
|
|
17821
|
+
}), reset(n), bind_this(n, (e) => set(te, e), () => get(te)), reset(t), bind_this(t, (e) => set(G, e), () => get(G)), action(t, (e) => Re?.(e)), template_effect((e) => {
|
|
17822
|
+
set_class(t, 1, `sheet-overlay ${o() ? "overlay-visible" : "overlay-invisible"} ${o() || s() ? "overlay-interactive" : "overlay-noninteractive"} ${R() ?? "" ?? ""}`, "svelte-1dln6bq"), set_attribute(t, "role", s() ? "button" : null), set_attribute(t, "aria-label", e), set_attribute(t, "data-pw", typeof f() == "string" ? f() : null), set_attribute(t, "testid", typeof f() == "string" ? f() : null), set_class(n, 1, `sheet-panel ${i() ?? ""}`, "svelte-1dln6bq"), set_attribute(n, "aria-label", a() ?? "Sheet"), set_attribute(n, "data-pw", typeof f() == "string" ? `${f()}-panel` : null), set_attribute(n, "testid", typeof f() == "string" ? `${f()}-panel` : null);
|
|
17823
|
+
}, [() => s() ? c()?.trim() || "Close sheet" : null]), delegated("click", t, be), delegated("keydown", t, Me), event("introend", n, Ue), event("outroend", n, it), transition(7, n, () => fly, () => get(ne)), transition(3, t, () => fade, () => ({ duration: 200 })), append(e, t);
|
|
17771
17824
|
};
|
|
17772
|
-
return if_block(
|
|
17773
|
-
n() && e(
|
|
17774
|
-
}), append(e,
|
|
17825
|
+
return if_block(lt, (e) => {
|
|
17826
|
+
n() && e(ut);
|
|
17827
|
+
}), append(e, ct), pop(ot);
|
|
17775
17828
|
}
|
|
17776
17829
|
delegate(["click", "keydown"]), create_custom_element(Sheet, {
|
|
17777
17830
|
open: {},
|
|
@@ -17779,6 +17832,7 @@ delegate(["click", "keydown"]), create_custom_element(Sheet, {
|
|
|
17779
17832
|
title: {},
|
|
17780
17833
|
showOverlay: {},
|
|
17781
17834
|
dismissOnOutsideClick: {},
|
|
17835
|
+
overlayAriaLabel: {},
|
|
17782
17836
|
showCloseButton: {},
|
|
17783
17837
|
headingLevel: {},
|
|
17784
17838
|
testId: {},
|
|
@@ -17845,6 +17899,11 @@ customElements.define("sui-sheet", create_custom_element(Sheet_wc, {
|
|
|
17845
17899
|
reflect: !0,
|
|
17846
17900
|
type: "Boolean"
|
|
17847
17901
|
},
|
|
17902
|
+
overlayAriaLabel: {
|
|
17903
|
+
attribute: "overlay-aria-label",
|
|
17904
|
+
reflect: !0,
|
|
17905
|
+
type: "String"
|
|
17906
|
+
},
|
|
17848
17907
|
showCloseButton: {
|
|
17849
17908
|
attribute: "show-close-button",
|
|
17850
17909
|
reflect: !0,
|