@solid-design-system/components 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/dist/components/es/accordion-group.js +1 -1
  2. package/dist/components/es/accordion.js +1 -1
  3. package/dist/components/es/dropdown.js +1 -0
  4. package/dist/components/es/event.js +1 -0
  5. package/dist/components/es/popup.js +1 -0
  6. package/dist/components/es/solid-components2.js +1 -1
  7. package/dist/components/es/solid-element.js +1 -1
  8. package/dist/components/umd/solid-components.js +15 -15
  9. package/dist/custom-elements.json +1 -1
  10. package/dist/package/components/dropdown/dropdown.d.ts +49 -0
  11. package/dist/package/components/dropdown/dropdown.js +335 -0
  12. package/dist/package/components/popup/popup.d.ts +42 -0
  13. package/dist/package/components/popup/popup.js +318 -0
  14. package/dist/package/internal/offset.d.ts +4 -0
  15. package/dist/package/internal/offset.js +9 -0
  16. package/dist/package/internal/scroll.d.ts +3 -0
  17. package/dist/package/internal/scroll.js +27 -0
  18. package/dist/package/internal/tabbable.d.ts +4 -0
  19. package/dist/package/internal/tabbable.js +50 -0
  20. package/dist/package/solid-components.d.ts +2 -0
  21. package/dist/package/solid-components.js +14 -10
  22. package/dist/package/styles/tailwind.css.js +1 -1
  23. package/dist/versioned-components/es/accordion-group.js +1 -1
  24. package/dist/versioned-components/es/accordion.js +1 -1
  25. package/dist/versioned-components/es/badge.js +1 -1
  26. package/dist/versioned-components/es/brandshape.js +1 -1
  27. package/dist/versioned-components/es/button.js +2 -2
  28. package/dist/versioned-components/es/divider.js +1 -1
  29. package/dist/versioned-components/es/dropdown.js +1 -0
  30. package/dist/versioned-components/es/event.js +1 -0
  31. package/dist/versioned-components/es/icon.js +1 -1
  32. package/dist/versioned-components/es/include.js +1 -1
  33. package/dist/versioned-components/es/link.js +1 -1
  34. package/dist/versioned-components/es/popup.js +1 -0
  35. package/dist/versioned-components/es/solid-components2.js +1 -1
  36. package/dist/versioned-components/es/solid-element.js +1 -1
  37. package/dist/versioned-components/es/spinner.js +1 -1
  38. package/dist/versioned-components/es/teaser.js +1 -1
  39. package/dist/versioned-package/components/accordion/accordion.d.ts +1 -1
  40. package/dist/versioned-package/components/accordion/accordion.js +2 -2
  41. package/dist/versioned-package/components/accordion-group/accordion-group.d.ts +1 -1
  42. package/dist/versioned-package/components/accordion-group/accordion-group.js +3 -3
  43. package/dist/versioned-package/components/badge/badge.d.ts +1 -1
  44. package/dist/versioned-package/components/badge/badge.js +1 -1
  45. package/dist/versioned-package/components/brandshape/brandshape.d.ts +1 -1
  46. package/dist/versioned-package/components/brandshape/brandshape.js +1 -1
  47. package/dist/versioned-package/components/button/button.d.ts +1 -1
  48. package/dist/versioned-package/components/button/button.js +4 -4
  49. package/dist/versioned-package/components/divider/divider.d.ts +1 -1
  50. package/dist/versioned-package/components/divider/divider.js +2 -2
  51. package/dist/versioned-package/components/dropdown/dropdown.d.ts +49 -0
  52. package/dist/versioned-package/components/dropdown/dropdown.js +335 -0
  53. package/dist/versioned-package/components/icon/icon.d.ts +1 -1
  54. package/dist/versioned-package/components/icon/icon.js +1 -1
  55. package/dist/versioned-package/components/include/include.d.ts +1 -1
  56. package/dist/versioned-package/components/include/include.js +1 -1
  57. package/dist/versioned-package/components/link/link.d.ts +1 -1
  58. package/dist/versioned-package/components/link/link.js +2 -2
  59. package/dist/versioned-package/components/popup/popup.d.ts +42 -0
  60. package/dist/versioned-package/components/popup/popup.js +318 -0
  61. package/dist/versioned-package/components/spinner/spinner.d.ts +1 -1
  62. package/dist/versioned-package/components/spinner/spinner.js +1 -1
  63. package/dist/versioned-package/components/teaser/teaser.js +1 -1
  64. package/dist/versioned-package/internal/form.js +1 -1
  65. package/dist/versioned-package/internal/offset.d.ts +4 -0
  66. package/dist/versioned-package/internal/offset.js +9 -0
  67. package/dist/versioned-package/internal/scroll.d.ts +3 -0
  68. package/dist/versioned-package/internal/scroll.js +27 -0
  69. package/dist/versioned-package/internal/tabbable.d.ts +4 -0
  70. package/dist/versioned-package/internal/tabbable.js +50 -0
  71. package/dist/versioned-package/solid-components.d.ts +2 -0
  72. package/dist/versioned-package/solid-components.js +14 -10
  73. package/dist/versioned-package/styles/tailwind.css.js +1 -1
  74. package/dist/vscode.html-custom-data.json +653 -11
  75. package/dist/web-types.json +1240 -64
  76. package/package.json +4 -3
@@ -0,0 +1,318 @@
1
+ import { autoUpdate, offset, size, flip, shift, arrow, computePosition } from "@floating-ui/dom";
2
+ import { css, html } from "lit";
3
+ import { query, property, customElement } from "lit/decorators.js";
4
+ import componentStyles from "../../styles/component.styles.js";
5
+ import cx from "classix";
6
+ import SolidElement from "../../internal/solid-element.js";
7
+ var __defProp = Object.defineProperty;
8
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
9
+ var __decorateClass = (decorators, target, key, kind) => {
10
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
11
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
12
+ if (decorator = decorators[i])
13
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
14
+ if (kind && result)
15
+ __defProp(target, key, result);
16
+ return result;
17
+ };
18
+ let SdPopup = class extends SolidElement {
19
+ constructor() {
20
+ super(...arguments);
21
+ this.active = false;
22
+ this.placement = "top";
23
+ this.strategy = "absolute";
24
+ this.distance = 0;
25
+ this.skidding = 0;
26
+ this.arrow = false;
27
+ this.arrowPlacement = "anchor";
28
+ this.arrowPadding = 10;
29
+ this.flip = false;
30
+ this.flipFallbackPlacements = "";
31
+ this.flipFallbackStrategy = "best-fit";
32
+ this.flipPadding = 0;
33
+ this.shift = false;
34
+ this.shiftPadding = 0;
35
+ this.autoSizePadding = 0;
36
+ }
37
+ async connectedCallback() {
38
+ super.connectedCallback();
39
+ await this.updateComplete;
40
+ this.start();
41
+ }
42
+ disconnectedCallback() {
43
+ this.stop();
44
+ }
45
+ async updated(changedProps) {
46
+ super.updated(changedProps);
47
+ if (changedProps.has("active")) {
48
+ if (this.active) {
49
+ this.start();
50
+ } else {
51
+ this.stop();
52
+ }
53
+ }
54
+ if (changedProps.has("anchor")) {
55
+ this.handleAnchorChange();
56
+ }
57
+ if (this.active) {
58
+ await this.updateComplete;
59
+ this.reposition();
60
+ }
61
+ }
62
+ async handleAnchorChange() {
63
+ await this.stop();
64
+ if (this.anchor && typeof this.anchor === "string") {
65
+ const root = this.getRootNode();
66
+ this.anchorEl = root.getElementById(this.anchor);
67
+ } else if (this.anchor instanceof HTMLElement) {
68
+ this.anchorEl = this.anchor;
69
+ } else {
70
+ this.anchorEl = this.querySelector('[slot="anchor"]');
71
+ }
72
+ if (this.anchorEl instanceof HTMLSlotElement) {
73
+ this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0];
74
+ }
75
+ if (!this.anchorEl) {
76
+ throw new Error(
77
+ "Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute."
78
+ );
79
+ }
80
+ this.start();
81
+ }
82
+ start() {
83
+ if (!this.anchorEl) {
84
+ return;
85
+ }
86
+ this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
87
+ this.reposition();
88
+ });
89
+ }
90
+ async stop() {
91
+ return new Promise((resolve) => {
92
+ if (this.cleanup) {
93
+ this.cleanup();
94
+ this.cleanup = void 0;
95
+ this.removeAttribute("data-current-placement");
96
+ this.style.removeProperty("--auto-size-available-width");
97
+ this.style.removeProperty("--auto-size-available-height");
98
+ requestAnimationFrame(() => resolve());
99
+ } else {
100
+ resolve();
101
+ }
102
+ });
103
+ }
104
+ /** Forces the popup to recalculate and reposition itself. */
105
+ reposition() {
106
+ if (!this.active || !this.anchorEl) {
107
+ return;
108
+ }
109
+ const middleware = [
110
+ // The offset middleware goes first
111
+ offset({ mainAxis: this.distance, crossAxis: this.skidding })
112
+ ];
113
+ if (this.sync) {
114
+ middleware.push(
115
+ size({
116
+ apply: ({ rects }) => {
117
+ const syncWidth = this.sync === "width" || this.sync === "both";
118
+ const syncHeight = this.sync === "height" || this.sync === "both";
119
+ this.popup.style.width = syncWidth ? `${rects.reference.width}px` : "";
120
+ this.popup.style.height = syncHeight ? `${rects.reference.height}px` : "";
121
+ }
122
+ })
123
+ );
124
+ } else {
125
+ this.popup.style.width = "";
126
+ this.popup.style.height = "";
127
+ }
128
+ if (this.flip) {
129
+ middleware.push(
130
+ flip({
131
+ boundary: this.flipBoundary,
132
+ // @ts-expect-error - We're converting a string attribute to an array here
133
+ fallbackPlacements: this.flipFallbackPlacements,
134
+ fallbackStrategy: this.flipFallbackStrategy === "best-fit" ? "bestFit" : "initialPlacement",
135
+ padding: this.flipPadding
136
+ })
137
+ );
138
+ }
139
+ if (this.shift) {
140
+ middleware.push(
141
+ shift({
142
+ boundary: this.shiftBoundary,
143
+ padding: this.shiftPadding
144
+ })
145
+ );
146
+ }
147
+ if (this.autoSize) {
148
+ middleware.push(
149
+ size({
150
+ boundary: this.autoSizeBoundary,
151
+ padding: this.autoSizePadding,
152
+ apply: ({ availableWidth, availableHeight }) => {
153
+ if (this.autoSize === "vertical" || this.autoSize === "both") {
154
+ this.style.setProperty("--auto-size-available-height", `${availableHeight}px`);
155
+ } else {
156
+ this.style.removeProperty("--auto-size-available-height");
157
+ }
158
+ if (this.autoSize === "horizontal" || this.autoSize === "both") {
159
+ this.style.setProperty("--auto-size-available-width", `${availableWidth}px`);
160
+ } else {
161
+ this.style.removeProperty("--auto-size-available-width");
162
+ }
163
+ }
164
+ })
165
+ );
166
+ } else {
167
+ this.style.removeProperty("--auto-size-available-width");
168
+ this.style.removeProperty("--auto-size-available-height");
169
+ }
170
+ if (this.arrow) {
171
+ middleware.push(
172
+ arrow({
173
+ element: this.arrowEl,
174
+ padding: this.arrowPadding
175
+ })
176
+ );
177
+ }
178
+ computePosition(this.anchorEl, this.popup, {
179
+ placement: this.placement,
180
+ middleware,
181
+ strategy: this.strategy
182
+ }).then(({ x, y, middlewareData, placement }) => {
183
+ const isRtl = getComputedStyle(this).direction === "rtl";
184
+ const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right" }[placement.split("-")[0]];
185
+ this.setAttribute("data-current-placement", placement);
186
+ Object.assign(this.popup.style, {
187
+ left: `${x}px`,
188
+ top: `${y}px`
189
+ });
190
+ if (this.arrow) {
191
+ const arrowX = middlewareData.arrow.x;
192
+ const arrowY = middlewareData.arrow.y;
193
+ let top = "";
194
+ let right = "";
195
+ let bottom = "";
196
+ let left = "";
197
+ if (this.arrowPlacement === "start") {
198
+ const value = typeof arrowX === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
199
+ top = typeof arrowY === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
200
+ right = isRtl ? value : "";
201
+ left = isRtl ? "" : value;
202
+ } else if (this.arrowPlacement === "end") {
203
+ const value = typeof arrowX === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
204
+ right = isRtl ? "" : value;
205
+ left = isRtl ? value : "";
206
+ bottom = typeof arrowY === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
207
+ } else if (this.arrowPlacement === "center") {
208
+ left = typeof arrowX === "number" ? `calc(50% - var(--arrow-size-diagonal))` : "";
209
+ top = typeof arrowY === "number" ? `calc(50% - var(--arrow-size-diagonal))` : "";
210
+ } else {
211
+ left = typeof arrowX === "number" ? `${arrowX}px` : "";
212
+ top = typeof arrowY === "number" ? `${arrowY}px` : "";
213
+ }
214
+ Object.assign(this.arrowEl.style, {
215
+ top,
216
+ right,
217
+ bottom,
218
+ left,
219
+ [staticSide]: "calc(var(--arrow-size-diagonal) * -1)"
220
+ });
221
+ }
222
+ });
223
+ this.emit("sd-reposition");
224
+ }
225
+ render() {
226
+ return html`<slot name="anchor" @slotchange="${this.handleAnchorChange}"></slot><div part="popup" class="${cx("isolate", this.strategy !== "fixed" ? "absolute" : "fixed", !this.active && "hidden")}"><slot></slot>${this.arrow ? html`<div part="arrow" class="absolute rotate-45 -z-10" role="presentation"></div>` : ""}</div>`;
227
+ }
228
+ };
229
+ SdPopup.styles = [
230
+ SolidElement.styles,
231
+ componentStyles,
232
+ css`:host{--arrow-color:var(--sd-color-neutral-1000);--arrow-size:6px;--arrow-size-diagonal:calc(var(--arrow-size) * 0.7071);--arrow-padding-offset:calc(var(--arrow-size-diagonal) - var(--arrow-size));display:contents}[part=popup]{max-width:var(--auto-size-available-width,none);max-height:var(--auto-size-available-height,none)}[part=arrow]{width:calc(var(--arrow-size-diagonal) * 2);height:calc(var(--arrow-size-diagonal) * 2);background:var(--arrow-color)}`
233
+ ];
234
+ __decorateClass([
235
+ query('[part="popup"]')
236
+ ], SdPopup.prototype, "popup", 2);
237
+ __decorateClass([
238
+ query('[part="arrow"]')
239
+ ], SdPopup.prototype, "arrowEl", 2);
240
+ __decorateClass([
241
+ property()
242
+ ], SdPopup.prototype, "anchor", 2);
243
+ __decorateClass([
244
+ property({ type: Boolean, reflect: true })
245
+ ], SdPopup.prototype, "active", 2);
246
+ __decorateClass([
247
+ property({ reflect: true })
248
+ ], SdPopup.prototype, "placement", 2);
249
+ __decorateClass([
250
+ property({ reflect: true })
251
+ ], SdPopup.prototype, "strategy", 2);
252
+ __decorateClass([
253
+ property({ type: Number })
254
+ ], SdPopup.prototype, "distance", 2);
255
+ __decorateClass([
256
+ property({ type: Number })
257
+ ], SdPopup.prototype, "skidding", 2);
258
+ __decorateClass([
259
+ property({ type: Boolean })
260
+ ], SdPopup.prototype, "arrow", 2);
261
+ __decorateClass([
262
+ property({ attribute: "arrow-placement" })
263
+ ], SdPopup.prototype, "arrowPlacement", 2);
264
+ __decorateClass([
265
+ property({ attribute: "arrow-padding", type: Number })
266
+ ], SdPopup.prototype, "arrowPadding", 2);
267
+ __decorateClass([
268
+ property({ type: Boolean })
269
+ ], SdPopup.prototype, "flip", 2);
270
+ __decorateClass([
271
+ property({
272
+ attribute: "flip-fallback-placements",
273
+ converter: {
274
+ fromAttribute: (value) => {
275
+ return value.split(" ").map((p) => p.trim()).filter((p) => p !== "");
276
+ },
277
+ toAttribute: (value) => {
278
+ return value.join(" ");
279
+ }
280
+ }
281
+ })
282
+ ], SdPopup.prototype, "flipFallbackPlacements", 2);
283
+ __decorateClass([
284
+ property({ attribute: "flip-fallback-strategy" })
285
+ ], SdPopup.prototype, "flipFallbackStrategy", 2);
286
+ __decorateClass([
287
+ property({ type: Object })
288
+ ], SdPopup.prototype, "flipBoundary", 2);
289
+ __decorateClass([
290
+ property({ attribute: "flip-padding", type: Number })
291
+ ], SdPopup.prototype, "flipPadding", 2);
292
+ __decorateClass([
293
+ property({ type: Boolean })
294
+ ], SdPopup.prototype, "shift", 2);
295
+ __decorateClass([
296
+ property({ type: Object })
297
+ ], SdPopup.prototype, "shiftBoundary", 2);
298
+ __decorateClass([
299
+ property({ attribute: "shift-padding", type: Number })
300
+ ], SdPopup.prototype, "shiftPadding", 2);
301
+ __decorateClass([
302
+ property({ attribute: "auto-size" })
303
+ ], SdPopup.prototype, "autoSize", 2);
304
+ __decorateClass([
305
+ property()
306
+ ], SdPopup.prototype, "sync", 2);
307
+ __decorateClass([
308
+ property({ type: Object })
309
+ ], SdPopup.prototype, "autoSizeBoundary", 2);
310
+ __decorateClass([
311
+ property({ attribute: "auto-size-padding", type: Number })
312
+ ], SdPopup.prototype, "autoSizePadding", 2);
313
+ SdPopup = __decorateClass([
314
+ customElement("sd-1-8-0-popup")
315
+ ], SdPopup);
316
+ export {
317
+ SdPopup as default
318
+ };
@@ -7,6 +7,6 @@ export default class SdSpinner extends SolidElement {
7
7
  }
8
8
  declare global {
9
9
  interface HTMLElementTagNameMap {
10
- 'sd-1-7-0-spinner': SdSpinner;
10
+ 'sd-1-8-0-spinner': SdSpinner;
11
11
  }
12
12
  }
@@ -39,7 +39,7 @@ __decorateClass([
39
39
  property({ reflect: true })
40
40
  ], SdSpinner.prototype, "color", 2);
41
41
  SdSpinner = __decorateClass([
42
- customElement("sd-1-7-0-spinner")
42
+ customElement("sd-1-8-0-spinner")
43
43
  ], SdSpinner);
44
44
  export {
45
45
  SdSpinner as default
@@ -97,7 +97,7 @@ __decorateClass([
97
97
  state()
98
98
  ], SdTeaser.prototype, "_orientation", 2);
99
99
  SdTeaser = __decorateClass([
100
- customElement("sd-1-7-0-teaser")
100
+ customElement("sd-1-8-0-teaser")
101
101
  ], SdTeaser);
102
102
  export {
103
103
  SdTeaser as default
@@ -90,7 +90,7 @@ class FormControlController {
90
90
  const disabled = this.options.disabled(this.host);
91
91
  const name = this.options.name(this.host);
92
92
  const value = this.options.value(this.host);
93
- const isButton = this.host.tagName.toLowerCase() === "sd-1-7-0-button";
93
+ const isButton = this.host.tagName.toLowerCase() === "sd-1-8-0-button";
94
94
  if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
95
95
  if (Array.isArray(value)) {
96
96
  value.forEach((val) => {
@@ -0,0 +1,4 @@
1
+ export declare function getOffset(element: HTMLElement, parent: HTMLElement): {
2
+ top: number;
3
+ left: number;
4
+ };
@@ -0,0 +1,9 @@
1
+ function getOffset(element, parent) {
2
+ return {
3
+ top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
4
+ left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
5
+ };
6
+ }
7
+ export {
8
+ getOffset
9
+ };
@@ -0,0 +1,3 @@
1
+ export declare function lockBodyScrolling(lockingEl: HTMLElement): void;
2
+ export declare function unlockBodyScrolling(lockingEl: HTMLElement): void;
3
+ export declare function scrollIntoView(element: HTMLElement, container: HTMLElement, direction?: 'horizontal' | 'vertical' | 'both', behavior?: 'smooth' | 'auto'): void;
@@ -0,0 +1,27 @@
1
+ import { getOffset } from "./offset.js";
2
+ function scrollIntoView(element, container, direction = "vertical", behavior = "smooth") {
3
+ const offset = getOffset(element, container);
4
+ const offsetTop = offset.top + container.scrollTop;
5
+ const offsetLeft = offset.left + container.scrollLeft;
6
+ const minX = container.scrollLeft;
7
+ const maxX = container.scrollLeft + container.offsetWidth;
8
+ const minY = container.scrollTop;
9
+ const maxY = container.scrollTop + container.offsetHeight;
10
+ if (direction === "horizontal" || direction === "both") {
11
+ if (offsetLeft < minX) {
12
+ container.scrollTo({ left: offsetLeft, behavior });
13
+ } else if (offsetLeft + element.clientWidth > maxX) {
14
+ container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
15
+ }
16
+ }
17
+ if (direction === "vertical" || direction === "both") {
18
+ if (offsetTop < minY) {
19
+ container.scrollTo({ top: offsetTop, behavior });
20
+ } else if (offsetTop + element.clientHeight > maxY) {
21
+ container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
22
+ }
23
+ }
24
+ }
25
+ export {
26
+ scrollIntoView
27
+ };
@@ -0,0 +1,4 @@
1
+ export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
2
+ start: HTMLElement | null;
3
+ end: HTMLElement | null;
4
+ };
@@ -0,0 +1,50 @@
1
+ function isTabbable(el) {
2
+ const tag = el.tagName.toLowerCase();
3
+ if (el.getAttribute("tabindex") === "-1") {
4
+ return false;
5
+ }
6
+ if (el.hasAttribute("disabled")) {
7
+ return false;
8
+ }
9
+ if (el.hasAttribute("aria-disabled") && el.getAttribute("aria-disabled") !== "false") {
10
+ return false;
11
+ }
12
+ if (tag === "input" && el.getAttribute("type") === "radio" && !el.hasAttribute("checked")) {
13
+ return false;
14
+ }
15
+ if (el.offsetParent === null) {
16
+ return false;
17
+ }
18
+ if (window.getComputedStyle(el).visibility === "hidden") {
19
+ return false;
20
+ }
21
+ if ((tag === "audio" || tag === "video") && el.hasAttribute("controls")) {
22
+ return true;
23
+ }
24
+ if (el.hasAttribute("tabindex")) {
25
+ return true;
26
+ }
27
+ if (el.hasAttribute("contenteditable") && el.getAttribute("contenteditable") !== "false") {
28
+ return true;
29
+ }
30
+ return ["button", "input", "select", "textarea", "a", "audio", "video", "summary"].includes(tag);
31
+ }
32
+ function getTabbableBoundary(root) {
33
+ const allElements = [];
34
+ function walk(el) {
35
+ if (el instanceof HTMLElement) {
36
+ allElements.push(el);
37
+ if (el.shadowRoot !== null && el.shadowRoot.mode === "open") {
38
+ walk(el.shadowRoot);
39
+ }
40
+ }
41
+ [...el.children].forEach((e) => walk(e));
42
+ }
43
+ walk(root);
44
+ const start = allElements.find((el) => isTabbable(el)) ?? null;
45
+ const end = allElements.reverse().find((el) => isTabbable(el)) ?? null;
46
+ return { start, end };
47
+ }
48
+ export {
49
+ getTabbableBoundary
50
+ };
@@ -4,9 +4,11 @@ export { default as SdBadge } from './components/badge/badge';
4
4
  export { default as SdBrandshape } from './components/brandshape/brandshape';
5
5
  export { default as SdButton } from './components/button/button';
6
6
  export { default as SdDivider } from './components/divider/divider';
7
+ export { default as SdDropdown } from './components/dropdown/dropdown';
7
8
  export { default as SdIcon } from './components/icon/icon';
8
9
  export { default as SdInclude } from './components/include/include';
9
10
  export { default as SdLink } from './components/link/link';
11
+ export { default as SdPopup } from './components/popup/popup';
10
12
  export { default as SdSpinner } from './components/spinner/spinner';
11
13
  export { default as SdTeaser } from './components/teaser/teaser';
12
14
  export * from './utilities/icon-library';
@@ -4,11 +4,13 @@ import { default as default4 } from "./components/badge/badge.js";
4
4
  import { default as default5 } from "./components/brandshape/brandshape.js";
5
5
  import { default as default6 } from "./components/button/button.js";
6
6
  import { default as default7 } from "./components/divider/divider.js";
7
- import { default as default8 } from "./components/icon/icon.js";
8
- import { default as default9 } from "./components/include/include.js";
9
- import { default as default10 } from "./components/link/link.js";
10
- import { default as default11 } from "./components/spinner/spinner.js";
11
- import { default as default12 } from "./components/teaser/teaser.js";
7
+ import { default as default8 } from "./components/dropdown/dropdown.js";
8
+ import { default as default9 } from "./components/icon/icon.js";
9
+ import { default as default10 } from "./components/include/include.js";
10
+ import { default as default11 } from "./components/link/link.js";
11
+ import { default as default12 } from "./components/popup/popup.js";
12
+ import { default as default13 } from "./components/spinner/spinner.js";
13
+ import { default as default14 } from "./components/teaser/teaser.js";
12
14
  import { registerIconLibrary, unregisterIconLibrary } from "./components/icon/library.js";
13
15
  import { LocalizeController } from "./utilities/localize.js";
14
16
  export {
@@ -19,11 +21,13 @@ export {
19
21
  default5 as SdBrandshape,
20
22
  default6 as SdButton,
21
23
  default7 as SdDivider,
22
- default8 as SdIcon,
23
- default9 as SdInclude,
24
- default10 as SdLink,
25
- default11 as SdSpinner,
26
- default12 as SdTeaser,
24
+ default8 as SdDropdown,
25
+ default9 as SdIcon,
26
+ default10 as SdInclude,
27
+ default11 as SdLink,
28
+ default12 as SdPopup,
29
+ default13 as SdSpinner,
30
+ default14 as SdTeaser,
27
31
  registerIconLibrary,
28
32
  unregisterIconLibrary
29
33
  };
@@ -1,4 +1,4 @@
1
- const tailwind = '/*! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:var(--sd-spacing-0,0)}.left-0{left:var(--sd-spacing-0,0)}.left-1\\/2{left:50%}.right-0{right:var(--sd-spacing-0,0)}.top-0{top:var(--sd-spacing-0,0)}.top-1\\/2{top:50%}.z-0{z-index:0}.z-10{z-index:10}.m-0{margin:var(--sd-spacing-0,0)}.m-4{margin:var(--sd-spacing-4,1rem)}.mb-4{margin-bottom:var(--sd-spacing-4,1rem)}.ml-1{margin-left:var(--sd-spacing-1,.25rem)}.ml-2{margin-left:var(--sd-spacing-2,.5rem)}.ml-\\[0\\.25em\\]{margin-left:.25em}.ml-\\[0\\.5em\\]{margin-left:.5em}.mr-1{margin-right:var(--sd-spacing-1,.25rem)}.mr-2{margin-right:var(--sd-spacing-2,.5rem)}.mr-\\[0\\.25em\\]{margin-right:.25em}.mr-\\[0\\.5em\\]{margin-right:.5em}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-2{height:var(--sd-spacing-2,.5rem)}.h-2\\/3{height:66.666667%}.h-4{height:var(--sd-spacing-4,1rem)}.h-5{height:var(--sd-spacing-5,1.25rem)}.h-\\[1px\\]{height:1px}.h-full{height:100%}.h-varspacing{height:var(--tw-varspacing)}.w-2\\/5{width:40%}.w-full{width:100%}.w-varspacing{width:var(--tw-varspacing)}.min-w-\\[16px\\]{min-width:16px}.min-w-\\[20px\\]{min-width:20px}.min-w-\\[8px\\]{min-width:8px}.flex-auto{flex:1 1 auto}.flex-shrink-0{flex-shrink:0}.flex-grow-0{flex-grow:0}.-translate-x-1\\/2{--tw-translate-x:-50%}.-translate-x-1\\/2,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%}.rotate-180{--tw-rotate:180deg}.rotate-180,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-\\[inherit\\]{cursor:inherit}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.gap-2{gap:var(--sd-spacing-2,.5rem)}.gap-4{gap:var(--sd-spacing-4,1rem)}.gap-8{gap:var(--sd-spacing-8,2rem)}.gap-x-\\[1px\\]{-moz-column-gap:1px;column-gap:1px}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:var(--sd-border-radius-full,9999px)}.rounded-md{border-radius:var(--sd-border-radius-md,.375rem)}.border{border-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-300,218 218 218)/var(--tw-border-opacity))}.border-neutral-400{--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-400,195 195 195)/var(--tw-border-opacity))}.border-primary{--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-border-opacity))}.border-primary-400{--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary-400,153 171 208)/var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity:1;border-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-border-opacity))}.bg-accent{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-accent,45 157 0)/var(--tw-bg-opacity))}.bg-error{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-error,204 25 55)/var(--tw-bg-opacity))}.bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-bg-opacity))}.bg-primary-100{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-bg-opacity))}.bg-primary-500{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-500,70 109 175)/var(--tw-bg-opacity))}.bg-success{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-success,54 123 40)/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity))}.fill-neutral-100{fill:rgb(var(--sd-color-neutral-100,246 246 246)/1)}.fill-primary{fill:rgb(var(--sd-color-primary,0 53 142)/1)}.fill-white{fill:rgb(var(--sd-color-white,255 255 255)/1)}.px-0{padding-left:var(--sd-spacing-0,0);padding-right:var(--sd-spacing-0,0)}.px-10{padding-left:var(--sd-spacing-10,2.5rem);padding-right:var(--sd-spacing-10,2.5rem)}.px-4{padding-left:var(--sd-spacing-4,1rem);padding-right:var(--sd-spacing-4,1rem)}.px-6{padding-left:var(--sd-spacing-6,1.5rem);padding-right:var(--sd-spacing-6,1.5rem)}.px-\\[4px\\]{padding-left:4px;padding-right:4px}.px-\\[5px\\]{padding-left:5px;padding-right:5px}.py-3{padding-bottom:var(--sd-spacing-3,.75rem);padding-top:var(--sd-spacing-3,.75rem)}.py-4{padding-bottom:var(--sd-spacing-4,1rem);padding-top:var(--sd-spacing-4,1rem)}.py-6{padding-bottom:var(--sd-spacing-6,1.5rem);padding-top:var(--sd-spacing-6,1.5rem)}.py-8{padding-bottom:var(--sd-spacing-8,2rem);padding-top:var(--sd-spacing-8,2rem)}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.text-\\[10px\\]{font-size:10px}.text-\\[12px\\]{font-size:12px}.text-base{font-size:var(--sd-font-size-base,1rem)}.text-lg{font-size:var(--sd-font-size-lg,1.25rem)}.text-sm{font-size:var(--sd-font-size-sm,.875rem)}.text-xl{font-size:var(--sd-font-size-xl,1.5rem)}.font-bold{font-weight:700}.leading-\\[calc\\(var\\(--tw-varspacing\\)-2px\\)\\]{line-height:calc(var(--tw-varspacing) - 2px)}.leading-none{line-height:var(--sd-line-height-none,100%)}.text-accent{--tw-text-opacity:1;color:rgb(var(--sd-color-accent,45 157 0)/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity))}.text-neutral-500{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity))}.text-neutral-600{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.underline-offset-2{text-underline-offset:2px}.opacity-20{opacity:var(--sd-opacity-20,.2)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.outline-1{outline-width:1px}.-outline-offset-1{outline-offset:-1px}.outline-neutral-400{outline-color:rgb(var(--sd-color-neutral-400,195 195 195)/1)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.varspacing-10{--tw-varspacing:var(--sd-spacing-10,2.5rem)}.varspacing-12{--tw-varspacing:var(--sd-spacing-12,3rem)}.varspacing-8{--tw-varspacing:var(--sd-spacing-8,2rem)}.focus-visible\\:focus-outline:focus-visible{outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}.focus-visible\\:focus-outline-inverted:focus-visible{outline-color:rgb(var(--sd-color-white,255 255 255)/1);outline-offset:2px;outline-style:solid;outline-width:2px}.disabled\\:border-neutral-500:disabled{--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-border-opacity))}.disabled\\:border-neutral-600:disabled{--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-border-opacity))}.disabled\\:bg-neutral-500:disabled{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-bg-opacity))}.disabled\\:bg-neutral-600:disabled{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-bg-opacity))}.disabled\\:text-neutral-500:disabled{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity))}.disabled\\:text-neutral-600:disabled{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-text-opacity))}.disabled\\:text-white:disabled{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}.hover\\:border-primary-100:hover:not([disabled]){--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-border-opacity))}.hover\\:border-primary-500:hover:not([disabled]){--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary-500,70 109 175)/var(--tw-border-opacity))}.hover\\:bg-accent-550:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-accent-550,54 123 40)/var(--tw-bg-opacity))}.hover\\:bg-neutral-200:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity))}.hover\\:bg-primary-100:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-bg-opacity))}.hover\\:bg-primary-500:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-500,70 109 175)/var(--tw-bg-opacity))}.hover\\:text-primary-100:hover:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-text-opacity))}.hover\\:text-primary-200:hover:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-200,224 233 243)/var(--tw-text-opacity))}.hover\\:text-primary-500:hover:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-500,70 109 175)/var(--tw-text-opacity))}.active\\:border-primary-200:active:not([disabled]){--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary-200,224 233 243)/var(--tw-border-opacity))}.active\\:border-primary-800:active:not([disabled]){--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary-800,5 21 48)/var(--tw-border-opacity))}.active\\:bg-accent-700:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-accent-700,33 87 37)/var(--tw-bg-opacity))}.active\\:bg-primary-200:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-200,224 233 243)/var(--tw-bg-opacity))}.active\\:bg-primary-800:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-800,5 21 48)/var(--tw-bg-opacity))}.active\\:text-primary-200:active:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-200,224 233 243)/var(--tw-text-opacity))}.active\\:text-primary-400:active:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-400,153 171 208)/var(--tw-text-opacity))}.active\\:text-primary-800:active:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-800,5 21 48)/var(--tw-text-opacity))}';
1
+ const tailwind = '/*! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:var(--sd-spacing-0,0)}.left-0{left:var(--sd-spacing-0,0)}.left-1\\/2{left:50%}.right-0{right:var(--sd-spacing-0,0)}.top-0{top:var(--sd-spacing-0,0)}.top-1\\/2{top:50%}.isolate{isolation:isolate}.-z-10{z-index:-10}.z-0{z-index:0}.z-10{z-index:10}.m-0{margin:var(--sd-spacing-0,0)}.m-4{margin:var(--sd-spacing-4,1rem)}.mb-4{margin-bottom:var(--sd-spacing-4,1rem)}.ml-1{margin-left:var(--sd-spacing-1,.25rem)}.ml-2{margin-left:var(--sd-spacing-2,.5rem)}.ml-\\[0\\.25em\\]{margin-left:.25em}.ml-\\[0\\.5em\\]{margin-left:.5em}.mr-1{margin-right:var(--sd-spacing-1,.25rem)}.mr-2{margin-right:var(--sd-spacing-2,.5rem)}.mr-\\[0\\.25em\\]{margin-right:.25em}.mr-\\[0\\.5em\\]{margin-right:.5em}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.contents{display:contents}.hidden{display:none}.h-2{height:var(--sd-spacing-2,.5rem)}.h-2\\/3{height:66.666667%}.h-4{height:var(--sd-spacing-4,1rem)}.h-5{height:var(--sd-spacing-5,1.25rem)}.h-\\[1px\\]{height:1px}.h-full{height:100%}.h-varspacing{height:var(--tw-varspacing)}.w-2\\/5{width:40%}.w-full{width:100%}.w-varspacing{width:var(--tw-varspacing)}.min-w-\\[16px\\]{min-width:16px}.min-w-\\[20px\\]{min-width:20px}.min-w-\\[8px\\]{min-width:8px}.flex-auto{flex:1 1 auto}.flex-shrink-0{flex-shrink:0}.flex-grow-0{flex-grow:0}.-translate-x-1\\/2{--tw-translate-x:-50%}.-translate-x-1\\/2,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-\\[inherit\\]{cursor:inherit}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.gap-2{gap:var(--sd-spacing-2,.5rem)}.gap-4{gap:var(--sd-spacing-4,1rem)}.gap-8{gap:var(--sd-spacing-8,2rem)}.gap-x-\\[1px\\]{-moz-column-gap:1px;column-gap:1px}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:var(--sd-border-radius-full,9999px)}.rounded-md{border-radius:var(--sd-border-radius-md,.375rem)}.border{border-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-300,218 218 218)/var(--tw-border-opacity))}.border-neutral-400{--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-400,195 195 195)/var(--tw-border-opacity))}.border-primary{--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-border-opacity))}.border-primary-400{--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary-400,153 171 208)/var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity:1;border-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-border-opacity))}.bg-accent{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-accent,45 157 0)/var(--tw-bg-opacity))}.bg-error{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-error,204 25 55)/var(--tw-bg-opacity))}.bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-bg-opacity))}.bg-primary-100{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-bg-opacity))}.bg-primary-500{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-500,70 109 175)/var(--tw-bg-opacity))}.bg-success{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-success,54 123 40)/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity))}.fill-neutral-100{fill:rgb(var(--sd-color-neutral-100,246 246 246)/1)}.fill-primary{fill:rgb(var(--sd-color-primary,0 53 142)/1)}.fill-white{fill:rgb(var(--sd-color-white,255 255 255)/1)}.px-0{padding-left:var(--sd-spacing-0,0);padding-right:var(--sd-spacing-0,0)}.px-10{padding-left:var(--sd-spacing-10,2.5rem);padding-right:var(--sd-spacing-10,2.5rem)}.px-4{padding-left:var(--sd-spacing-4,1rem);padding-right:var(--sd-spacing-4,1rem)}.px-6{padding-left:var(--sd-spacing-6,1.5rem);padding-right:var(--sd-spacing-6,1.5rem)}.px-\\[4px\\]{padding-left:4px;padding-right:4px}.px-\\[5px\\]{padding-left:5px;padding-right:5px}.py-3{padding-bottom:var(--sd-spacing-3,.75rem);padding-top:var(--sd-spacing-3,.75rem)}.py-4{padding-bottom:var(--sd-spacing-4,1rem);padding-top:var(--sd-spacing-4,1rem)}.py-6{padding-bottom:var(--sd-spacing-6,1.5rem);padding-top:var(--sd-spacing-6,1.5rem)}.py-8{padding-bottom:var(--sd-spacing-8,2rem);padding-top:var(--sd-spacing-8,2rem)}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.text-\\[10px\\]{font-size:10px}.text-\\[12px\\]{font-size:12px}.text-base{font-size:var(--sd-font-size-base,1rem)}.text-lg{font-size:var(--sd-font-size-lg,1.25rem)}.text-sm{font-size:var(--sd-font-size-sm,.875rem)}.text-xl{font-size:var(--sd-font-size-xl,1.5rem)}.font-bold{font-weight:700}.leading-\\[calc\\(var\\(--tw-varspacing\\)-2px\\)\\]{line-height:calc(var(--tw-varspacing) - 2px)}.leading-none{line-height:var(--sd-line-height-none,100%)}.text-accent{--tw-text-opacity:1;color:rgb(var(--sd-color-accent,45 157 0)/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity))}.text-neutral-500{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity))}.text-neutral-600{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.underline-offset-2{text-underline-offset:2px}.opacity-20{opacity:var(--sd-opacity-20,.2)}.shadow{--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.outline-1{outline-width:1px}.-outline-offset-1{outline-offset:-1px}.outline-neutral-400{outline-color:rgb(var(--sd-color-neutral-400,195 195 195)/1)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.varspacing-10{--tw-varspacing:var(--sd-spacing-10,2.5rem)}.varspacing-12{--tw-varspacing:var(--sd-spacing-12,3rem)}.varspacing-8{--tw-varspacing:var(--sd-spacing-8,2rem)}.focus-visible\\:focus-outline:focus-visible{outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}.focus-visible\\:focus-outline-inverted:focus-visible{outline-color:rgb(var(--sd-color-white,255 255 255)/1);outline-offset:2px;outline-style:solid;outline-width:2px}.disabled\\:border-neutral-500:disabled{--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-border-opacity))}.disabled\\:border-neutral-600:disabled{--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-border-opacity))}.disabled\\:bg-neutral-500:disabled{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-bg-opacity))}.disabled\\:bg-neutral-600:disabled{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-bg-opacity))}.disabled\\:text-neutral-500:disabled{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity))}.disabled\\:text-neutral-600:disabled{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-text-opacity))}.disabled\\:text-white:disabled{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}.hover\\:border-primary-100:hover:not([disabled]){--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-border-opacity))}.hover\\:border-primary-500:hover:not([disabled]){--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary-500,70 109 175)/var(--tw-border-opacity))}.hover\\:bg-accent-550:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-accent-550,54 123 40)/var(--tw-bg-opacity))}.hover\\:bg-neutral-200:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity))}.hover\\:bg-primary-100:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-bg-opacity))}.hover\\:bg-primary-500:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-500,70 109 175)/var(--tw-bg-opacity))}.hover\\:text-primary-100:hover:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-text-opacity))}.hover\\:text-primary-200:hover:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-200,224 233 243)/var(--tw-text-opacity))}.hover\\:text-primary-500:hover:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-500,70 109 175)/var(--tw-text-opacity))}.active\\:border-primary-200:active:not([disabled]){--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary-200,224 233 243)/var(--tw-border-opacity))}.active\\:border-primary-800:active:not([disabled]){--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary-800,5 21 48)/var(--tw-border-opacity))}.active\\:bg-accent-700:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-accent-700,33 87 37)/var(--tw-bg-opacity))}.active\\:bg-primary-200:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-200,224 233 243)/var(--tw-bg-opacity))}.active\\:bg-primary-800:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-800,5 21 48)/var(--tw-bg-opacity))}.active\\:text-primary-200:active:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-200,224 233 243)/var(--tw-text-opacity))}.active\\:text-primary-400:active:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-400,153 171 208)/var(--tw-text-opacity))}.active\\:text-primary-800:active:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-800,5 21 48)/var(--tw-text-opacity))}';
2
2
  export {
3
3
  tailwind as default
4
4
  };