@solid-design-system/components 1.0.1 → 1.1.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 (63) hide show
  1. package/dist/components/es/accordion-group.js +1 -0
  2. package/dist/components/es/accordion.js +1 -0
  3. package/dist/components/es/button.js +12 -12
  4. package/dist/components/es/if-defined.js +2 -7
  5. package/dist/components/es/link.js +1 -1
  6. package/dist/components/es/query.js +6 -0
  7. package/dist/components/es/solid-components2.js +1 -1
  8. package/dist/components/es/solid-element.js +1 -1
  9. package/dist/components/es/spinner.js +1 -1
  10. package/dist/components/umd/solid-components.js +46 -46
  11. package/dist/custom-elements.json +1 -1
  12. package/dist/package/components/accordion/accordion.d.ts +23 -0
  13. package/dist/package/components/accordion/accordion.js +152 -0
  14. package/dist/package/components/accordion-group/accordion-group.d.ts +16 -0
  15. package/dist/package/components/accordion-group/accordion-group.js +63 -0
  16. package/dist/package/components/spinner/spinner.js +1 -1
  17. package/dist/package/internal/animate.d.ts +10 -0
  18. package/dist/package/internal/animate.js +41 -0
  19. package/dist/package/internal/event.d.ts +1 -0
  20. package/dist/package/internal/event.js +14 -0
  21. package/dist/package/solid-components.d.ts +2 -0
  22. package/dist/package/solid-components.js +14 -10
  23. package/dist/package/styles/tailwind.css.js +1 -1
  24. package/dist/package/utilities/animation-registry.d.ts +14 -0
  25. package/dist/package/utilities/animation-registry.js +35 -0
  26. package/dist/versioned-components/es/accordion-group.js +1 -0
  27. package/dist/versioned-components/es/accordion.js +1 -0
  28. package/dist/versioned-components/es/button.js +28 -28
  29. package/dist/versioned-components/es/icon.js +1 -1
  30. package/dist/versioned-components/es/if-defined.js +2 -7
  31. package/dist/versioned-components/es/include.js +1 -1
  32. package/dist/versioned-components/es/link.js +1 -1
  33. package/dist/versioned-components/es/query.js +6 -0
  34. package/dist/versioned-components/es/solid-components2.js +1 -1
  35. package/dist/versioned-components/es/solid-element.js +1 -1
  36. package/dist/versioned-components/es/spinner.js +1 -1
  37. package/dist/versioned-package/components/accordion/accordion.d.ts +23 -0
  38. package/dist/versioned-package/components/accordion/accordion.js +152 -0
  39. package/dist/versioned-package/components/accordion-group/accordion-group.d.ts +16 -0
  40. package/dist/versioned-package/components/accordion-group/accordion-group.js +63 -0
  41. package/dist/versioned-package/components/button/button.d.ts +1 -1
  42. package/dist/versioned-package/components/button/button.js +18 -18
  43. package/dist/versioned-package/components/icon/icon.d.ts +1 -1
  44. package/dist/versioned-package/components/icon/icon.js +1 -1
  45. package/dist/versioned-package/components/include/include.d.ts +1 -1
  46. package/dist/versioned-package/components/include/include.js +1 -1
  47. package/dist/versioned-package/components/link/link.d.ts +1 -1
  48. package/dist/versioned-package/components/link/link.js +2 -2
  49. package/dist/versioned-package/components/spinner/spinner.d.ts +1 -1
  50. package/dist/versioned-package/components/spinner/spinner.js +2 -2
  51. package/dist/versioned-package/internal/animate.d.ts +10 -0
  52. package/dist/versioned-package/internal/animate.js +41 -0
  53. package/dist/versioned-package/internal/event.d.ts +1 -0
  54. package/dist/versioned-package/internal/event.js +14 -0
  55. package/dist/versioned-package/internal/form.js +1 -1
  56. package/dist/versioned-package/solid-components.d.ts +2 -0
  57. package/dist/versioned-package/solid-components.js +14 -10
  58. package/dist/versioned-package/styles/tailwind.css.js +1 -1
  59. package/dist/versioned-package/utilities/animation-registry.d.ts +14 -0
  60. package/dist/versioned-package/utilities/animation-registry.js +35 -0
  61. package/dist/vscode.html-custom-data.json +63 -5
  62. package/dist/web-types.json +232 -6
  63. package/package.json +7 -22
@@ -0,0 +1,152 @@
1
+ import "../icon/icon.js";
2
+ import { stopAnimations, animateTo, shimKeyframesHeightAuto } from "../../internal/animate.js";
3
+ import { css, html } from "lit";
4
+ import { query, property, customElement } from "lit/decorators.js";
5
+ import { setDefaultAnimation, getAnimation } from "../../utilities/animation-registry.js";
6
+ import { LocalizeController } from "../../utilities/localize.js";
7
+ import { waitForEvent } from "../../internal/event.js";
8
+ import { watch } from "../../internal/watch.js";
9
+ import cx from "classix";
10
+ import SolidElement from "../../internal/solid-element.js";
11
+ var __defProp = Object.defineProperty;
12
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
13
+ var __decorateClass = (decorators, target, key, kind) => {
14
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
15
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
16
+ if (decorator = decorators[i])
17
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
18
+ if (kind && result)
19
+ __defProp(target, key, result);
20
+ return result;
21
+ };
22
+ let SdAccordion = class extends SolidElement {
23
+ constructor() {
24
+ super(...arguments);
25
+ this.localize = new LocalizeController(this);
26
+ this.open = false;
27
+ }
28
+ firstUpdated() {
29
+ this.body.hidden = !this.open;
30
+ this.body.style.height = this.open ? "auto" : "0";
31
+ }
32
+ handleSummaryClick() {
33
+ this.header.focus();
34
+ if (this.open) {
35
+ this.hide();
36
+ } else {
37
+ this.show();
38
+ }
39
+ }
40
+ handleSummaryKeyDown(event) {
41
+ if (event.key === "Enter" || event.key === " ") {
42
+ event.preventDefault();
43
+ if (this.open) {
44
+ this.hide();
45
+ } else {
46
+ this.show();
47
+ }
48
+ }
49
+ if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
50
+ event.preventDefault();
51
+ this.hide();
52
+ }
53
+ if (event.key === "ArrowDown" || event.key === "ArrowRight") {
54
+ event.preventDefault();
55
+ this.show();
56
+ }
57
+ }
58
+ async handleOpenChange() {
59
+ if (this.open) {
60
+ const slShow = this.emit("sd-show", { cancelable: true });
61
+ if (slShow.defaultPrevented) {
62
+ this.open = false;
63
+ return;
64
+ }
65
+ await stopAnimations(this.body);
66
+ this.body.hidden = false;
67
+ const { keyframes, options } = getAnimation(this, "accordion.show", { dir: this.localize.dir() });
68
+ await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
69
+ this.body.style.height = "auto";
70
+ this.emit("sd-after-show");
71
+ } else {
72
+ const slHide = this.emit("sd-hide", { cancelable: true });
73
+ if (slHide.defaultPrevented) {
74
+ this.open = true;
75
+ return;
76
+ }
77
+ await stopAnimations(this.body);
78
+ const { keyframes, options } = getAnimation(this, "accordion.hide", { dir: this.localize.dir() });
79
+ await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
80
+ this.body.hidden = true;
81
+ this.body.style.height = "auto";
82
+ this.emit("sd-after-hide");
83
+ }
84
+ }
85
+ /** Shows the accordion. */
86
+ async show() {
87
+ if (this.open) {
88
+ return void 0;
89
+ }
90
+ this.open = true;
91
+ return waitForEvent(this, "sd-after-show");
92
+ }
93
+ /** Hides the accordion */
94
+ async hide() {
95
+ if (!this.open) {
96
+ return void 0;
97
+ }
98
+ this.open = false;
99
+ return waitForEvent(this, "sd-after-hide");
100
+ }
101
+ render() {
102
+ return html`<div part="base" class="outline outline-1 outline-neutral-400 -outline-offset-1"><header part="header" id="header" class="${cx(
103
+ "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus:outline focus:outline-primary focus:outline-2 focus:outline-offset-2 focus-visible:focus",
104
+ this.open ? "bg-white text-accent hover:bg-neutral-200" : "text-primary bg-neutral-100 hover:bg-neutral-200"
105
+ )}" role="button" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
106
+ "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",
107
+ this.open && "rotate-180"
108
+ )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-1-1-0-icon library="system" name="chevron-down"></sd-1-1-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-1-1-0-icon library="system" name="chevron-down"></sd-1-1-0-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`;
109
+ }
110
+ };
111
+ SdAccordion.styles = [
112
+ SolidElement.styles,
113
+ css`:host{display:block}`
114
+ ];
115
+ __decorateClass([
116
+ query('[part="base"]')
117
+ ], SdAccordion.prototype, "accordion", 2);
118
+ __decorateClass([
119
+ query('[part="header"]')
120
+ ], SdAccordion.prototype, "header", 2);
121
+ __decorateClass([
122
+ query('[part="content"]')
123
+ ], SdAccordion.prototype, "body", 2);
124
+ __decorateClass([
125
+ property({ type: Boolean, reflect: true })
126
+ ], SdAccordion.prototype, "open", 2);
127
+ __decorateClass([
128
+ property()
129
+ ], SdAccordion.prototype, "summary", 2);
130
+ __decorateClass([
131
+ watch("open", { waitUntilFirstUpdate: true })
132
+ ], SdAccordion.prototype, "handleOpenChange", 1);
133
+ SdAccordion = __decorateClass([
134
+ customElement("sd-1-1-0-accordion")
135
+ ], SdAccordion);
136
+ setDefaultAnimation("accordion.show", {
137
+ keyframes: [
138
+ { height: "0", opacity: "0" },
139
+ { height: "auto", opacity: "1" }
140
+ ],
141
+ options: { duration: 300, easing: "ease" }
142
+ });
143
+ setDefaultAnimation("accordion.hide", {
144
+ keyframes: [
145
+ { height: "auto", opacity: "1" },
146
+ { height: "0", opacity: "0" }
147
+ ],
148
+ options: { duration: 300, easing: "ease" }
149
+ });
150
+ export {
151
+ SdAccordion as default
152
+ };
@@ -0,0 +1,16 @@
1
+ import '../accordion/accordion';
2
+ import SolidElement from '../../internal/solid-element';
3
+ export default class SdAccordionGroup extends SolidElement {
4
+ _accordionsInDefaultSlot: HTMLElement[];
5
+ closeOthers: boolean;
6
+ connectedCallback(): void;
7
+ disconnectedCallback(): void;
8
+ private handleAccordionShow;
9
+ render(): import("lit").TemplateResult<1>;
10
+ static styles: import("lit").CSSResultGroup[];
11
+ }
12
+ declare global {
13
+ interface HTMLElementTagNameMap {
14
+ 'sd-1-1-0-accordion-group': SdAccordionGroup;
15
+ }
16
+ }
@@ -0,0 +1,63 @@
1
+ import "../accordion/accordion.js";
2
+ import { css, html } from "lit";
3
+ import { queryAssignedElements, property, customElement } from "lit/decorators.js";
4
+ import componentStyles from "../../styles/component.styles.js";
5
+ import SolidElement from "../../internal/solid-element.js";
6
+ var __defProp = Object.defineProperty;
7
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
8
+ var __decorateClass = (decorators, target, key, kind) => {
9
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
10
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
11
+ if (decorator = decorators[i])
12
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
13
+ if (kind && result)
14
+ __defProp(target, key, result);
15
+ return result;
16
+ };
17
+ let SdAccordionGroup = class extends SolidElement {
18
+ constructor() {
19
+ super(...arguments);
20
+ this.closeOthers = false;
21
+ this.handleAccordionShow = (event) => {
22
+ if (this.closeOthers) {
23
+ this._accordionsInDefaultSlot.forEach((accordionElement) => {
24
+ if (accordionElement === event.target) {
25
+ return;
26
+ }
27
+ if (accordionElement.parentNode !== event.target.parentNode) {
28
+ return;
29
+ }
30
+ accordionElement.removeAttribute("open");
31
+ });
32
+ }
33
+ };
34
+ }
35
+ connectedCallback() {
36
+ super.connectedCallback();
37
+ this.addEventListener("sd-show", this.handleAccordionShow);
38
+ }
39
+ disconnectedCallback() {
40
+ super.disconnectedCallback();
41
+ this.removeEventListener("sd-show", this.handleAccordionShow);
42
+ }
43
+ render() {
44
+ return html`<div part="base"><slot></slot></div>`;
45
+ }
46
+ };
47
+ SdAccordionGroup.styles = [
48
+ componentStyles,
49
+ SolidElement.styles,
50
+ css`:host{display:block}::slotted(sd-1-1-0-accordion:not(:first-of-type)){margin-top:-1px}`
51
+ ];
52
+ __decorateClass([
53
+ queryAssignedElements({ selector: "sd-1-1-0-accordion" })
54
+ ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
55
+ __decorateClass([
56
+ property({ attribute: "close-others", type: Boolean })
57
+ ], SdAccordionGroup.prototype, "closeOthers", 2);
58
+ SdAccordionGroup = __decorateClass([
59
+ customElement("sd-1-1-0-accordion-group")
60
+ ], SdAccordionGroup);
61
+ export {
62
+ SdAccordionGroup as default
63
+ };
@@ -43,6 +43,6 @@ export default class SdButton extends SolidElement implements SolidFormControl {
43
43
  }
44
44
  declare global {
45
45
  interface HTMLElementTagNameMap {
46
- 'sd-1-0-1-button': SdButton;
46
+ 'sd-1-1-0-button': SdButton;
47
47
  }
48
48
  }
@@ -216,9 +216,9 @@ let SdButton = class extends SolidElement {
216
216
  }[this.size]
217
217
  )}>
218
218
  </slot>
219
- ${this.loading ? html`<sd-1-0-1-spinner
219
+ ${this.loading ? html`<sd-1-1-0-spinner
220
220
  class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"
221
- ></sd-1-0-1-spinner>` : ""}
221
+ ></sd-1-1-0-spinner>` : ""}
222
222
  </${tag}>
223
223
  `;
224
224
  }
@@ -234,7 +234,7 @@ SdButton.styles = [
234
234
  cursor: pointer;
235
235
  }
236
236
 
237
- sd-1-0-1-spinner {
237
+ sd-1-1-0-spinner {
238
238
  --indicator-color: currentColor;
239
239
  --track-color: var(--tw-varcolor-200);
240
240
  }
@@ -253,11 +253,11 @@ SdButton.styles = [
253
253
  }
254
254
 
255
255
  /**
256
- * sd-1-0-1-icons should automatically resize correctly based on the button size.
256
+ * sd-1-1-0-icons should automatically resize correctly based on the button size.
257
257
  */
258
258
 
259
- ::slotted(sd-1-0-1-icon),
260
- sd-1-0-1-spinner {
259
+ ::slotted(sd-1-1-0-icon),
260
+ sd-1-1-0-spinner {
261
261
  font-size: calc(var(--tw-varspacing) / 2);
262
262
  }
263
263
 
@@ -268,30 +268,30 @@ SdButton.styles = [
268
268
  // * buttons and we style them here instead.
269
269
  // */
270
270
 
271
- // :host(.sd-1-0-1-button-group__button--first:not(.sd-1-0-1-button-group__button--last)) .button {
271
+ // :host(.sd-1-1-0-button-group__button--first:not(.sd-1-1-0-button-group__button--last)) .button {
272
272
  // border-start-end-radius: 0;
273
273
  // border-end-end-radius: 0;
274
274
  // }
275
275
 
276
- // :host(.sd-1-0-1-button-group__button--inner) .button {
276
+ // :host(.sd-1-1-0-button-group__button--inner) .button {
277
277
  // border-radius: 0;
278
278
  // }
279
279
 
280
- // :host(.sd-1-0-1-button-group__button--last:not(.sd-1-0-1-button-group__button--first)) .button {
280
+ // :host(.sd-1-1-0-button-group__button--last:not(.sd-1-1-0-button-group__button--first)) .button {
281
281
  // border-start-start-radius: 0;
282
282
  // border-end-start-radius: 0;
283
283
  // }
284
284
 
285
285
  // /* All except the first */
286
- // :host(.sd-1-0-1-button-group__button:not(.sd-1-0-1-button-group__button--first)) {
286
+ // :host(.sd-1-1-0-button-group__button:not(.sd-1-1-0-button-group__button--first)) {
287
287
  // margin-inline-start: calc(-1 * var(--sd-input-border-width));
288
288
  // }
289
289
 
290
290
  // /* Add a visual separator between solid buttons */
291
291
  // :host(
292
- // .sd-1-0-1-button-group__button:not(
293
- // .sd-1-0-1-button-group__button--first,
294
- // .sd-1-0-1-button-group__button--radio,
292
+ // .sd-1-1-0-button-group__button:not(
293
+ // .sd-1-1-0-button-group__button--first,
294
+ // .sd-1-1-0-button-group__button--radio,
295
295
  // [variant='default']
296
296
  // ):not(:hover)
297
297
  // )
@@ -306,13 +306,13 @@ SdButton.styles = [
306
306
  // }
307
307
 
308
308
  // /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
309
- // :host(.sd-1-0-1-button-group__button--hover) {
309
+ // :host(.sd-1-1-0-button-group__button--hover) {
310
310
  // z-index: 1;
311
311
  // }
312
312
 
313
313
  // /* Focus and checked are always on top */
314
- // :host(.sd-1-0-1-button-group__button--focus),
315
- // :host(.sd-1-0-1-button-group__button[checked]) {
314
+ // :host(.sd-1-1-0-button-group__button--focus),
315
+ // :host(.sd-1-1-0-button-group__button[checked]) {
316
316
  // z-index: 2;
317
317
  // }
318
318
  `
@@ -321,7 +321,7 @@ __decorateClass([
321
321
  query("a, button")
322
322
  ], SdButton.prototype, "button", 2);
323
323
  __decorateClass([
324
- queryAssignedElements({ selector: "sd-1-0-1-icon" })
324
+ queryAssignedElements({ selector: "sd-1-1-0-icon" })
325
325
  ], SdButton.prototype, "_iconsInDefaultSlot", 2);
326
326
  __decorateClass([
327
327
  state()
@@ -384,7 +384,7 @@ __decorateClass([
384
384
  watch("disabled", { waitUntilFirstUpdate: true })
385
385
  ], SdButton.prototype, "handleDisabledChange", 1);
386
386
  SdButton = __decorateClass([
387
- customElement("sd-1-0-1-button")
387
+ customElement("sd-1-1-0-button")
388
388
  ], SdButton);
389
389
  export {
390
390
  SdButton as default
@@ -17,6 +17,6 @@ export default class SdIcon extends SolidElement {
17
17
  }
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'sd-1-0-1-icon': SdIcon;
20
+ 'sd-1-1-0-icon': SdIcon;
21
21
  }
22
22
  }
@@ -122,7 +122,7 @@ __decorateClass([
122
122
  watch(["name", "src", "library"])
123
123
  ], SdIcon.prototype, "setIcon", 1);
124
124
  SdIcon = __decorateClass([
125
- customElement("sd-1-0-1-icon")
125
+ customElement("sd-1-1-0-icon")
126
126
  ], SdIcon);
127
127
  export {
128
128
  SdIcon as default
@@ -11,6 +11,6 @@ export default class SdInclude extends SolidElement {
11
11
  }
12
12
  declare global {
13
13
  interface HTMLElementTagNameMap {
14
- 'sd-1-0-1-include': SdInclude;
14
+ 'sd-1-1-0-include': SdInclude;
15
15
  }
16
16
  }
@@ -65,7 +65,7 @@ __decorateClass([
65
65
  watch("src")
66
66
  ], SdInclude.prototype, "handleSrcChange", 1);
67
67
  SdInclude = __decorateClass([
68
- customElement("sd-1-0-1-include")
68
+ customElement("sd-1-1-0-include")
69
69
  ], SdInclude);
70
70
  export {
71
71
  SdInclude as default
@@ -17,6 +17,6 @@ export default class SdLink extends SolidElement {
17
17
  }
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'sd-1-0-1-link': SdLink;
20
+ 'sd-1-1-0-link': SdLink;
21
21
  }
22
22
  }
@@ -76,7 +76,7 @@ let SdLink = class extends SolidElement {
76
76
  };
77
77
  SdLink.styles = [
78
78
  SolidElement.styles,
79
- css`::slotted(sd-1-0-1-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-0-1-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-0-1-icon){font-size:1.5rem}`
79
+ css`::slotted(sd-1-1-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-1-0-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-1-0-icon){font-size:1.5rem}`
80
80
  ];
81
81
  __decorateClass([
82
82
  query("a")
@@ -100,7 +100,7 @@ __decorateClass([
100
100
  property()
101
101
  ], SdLink.prototype, "download", 2);
102
102
  SdLink = __decorateClass([
103
- customElement("sd-1-0-1-link")
103
+ customElement("sd-1-1-0-link")
104
104
  ], SdLink);
105
105
  export {
106
106
  SdLink as default
@@ -7,6 +7,6 @@ export default class SdSpinner extends SolidElement {
7
7
  }
8
8
  declare global {
9
9
  interface HTMLElementTagNameMap {
10
- 'sd-1-0-1-spinner': SdSpinner;
10
+ 'sd-1-1-0-spinner': SdSpinner;
11
11
  }
12
12
  }
@@ -28,7 +28,7 @@ let SdSpinner = class extends SolidElement {
28
28
  white: "text-white",
29
29
  currentColor: ""
30
30
  }[this.color]
31
- )}" aria-valuetext="${this.localize.term("loading")}"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" class="opacity-20" fill="currentColor"/><mask id="mask0_5273_25391" style="mask-type:alpha" maskUnits="userSpaceOnUse"><path d="M24 12C24 5.37258 18.6274 0 12 0V12H24Z" fill="currentColor"/></mask><g mask="url(#mask0_5273_25391)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" fill="currentColor"/></g></svg>`;
31
+ )}" aria-label="${this.localize.term("loading")}"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" class="opacity-20" fill="currentColor"/><mask id="mask0_5273_25391" style="mask-type:alpha" maskUnits="userSpaceOnUse"><path d="M24 12C24 5.37258 18.6274 0 12 0V12H24Z" fill="currentColor"/></mask><g mask="url(#mask0_5273_25391)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" fill="currentColor"/></g></svg>`;
32
32
  }
33
33
  };
34
34
  SdSpinner.styles = [
@@ -39,7 +39,7 @@ __decorateClass([
39
39
  property({ reflect: true })
40
40
  ], SdSpinner.prototype, "color", 2);
41
41
  SdSpinner = __decorateClass([
42
- customElement("sd-1-0-1-spinner")
42
+ customElement("sd-1-1-0-spinner")
43
43
  ], SdSpinner);
44
44
  export {
45
45
  SdSpinner as default
@@ -0,0 +1,10 @@
1
+ export declare function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
2
+ export declare function parseDuration(delay: number | string): number;
3
+ export declare function prefersReducedMotion(): boolean;
4
+ export declare function stopAnimations(el: HTMLElement): Promise<unknown[]>;
5
+ export declare function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
6
+ height: string | number | null | undefined;
7
+ composite?: CompositeOperationOrAuto | undefined;
8
+ easing?: string | undefined;
9
+ offset?: number | null | undefined;
10
+ }[];
@@ -0,0 +1,41 @@
1
+ function animateTo(el, keyframes, options) {
2
+ return new Promise((resolve) => {
3
+ if ((options == null ? void 0 : options.duration) === Infinity) {
4
+ throw new Error("Promise-based animations must be finite.");
5
+ }
6
+ const animation = el.animate(keyframes, {
7
+ ...options,
8
+ duration: prefersReducedMotion() ? 0 : options.duration
9
+ });
10
+ animation.addEventListener("cancel", resolve, { once: true });
11
+ animation.addEventListener("finish", resolve, { once: true });
12
+ });
13
+ }
14
+ function prefersReducedMotion() {
15
+ const query = window.matchMedia("(prefers-reduced-motion: reduce)");
16
+ return query.matches;
17
+ }
18
+ function stopAnimations(el) {
19
+ return Promise.all(
20
+ el.getAnimations().map((animation) => {
21
+ return new Promise((resolve) => {
22
+ const handleAnimationEvent = requestAnimationFrame(resolve);
23
+ animation.addEventListener("cancel", () => handleAnimationEvent, { once: true });
24
+ animation.addEventListener("finish", () => handleAnimationEvent, { once: true });
25
+ animation.cancel();
26
+ });
27
+ })
28
+ );
29
+ }
30
+ function shimKeyframesHeightAuto(keyframes, calculatedHeight) {
31
+ return keyframes.map((keyframe) => ({
32
+ ...keyframe,
33
+ height: keyframe.height === "auto" ? `${calculatedHeight}px` : keyframe.height
34
+ }));
35
+ }
36
+ export {
37
+ animateTo,
38
+ prefersReducedMotion,
39
+ shimKeyframesHeightAuto,
40
+ stopAnimations
41
+ };
@@ -0,0 +1 @@
1
+ export declare function waitForEvent(el: HTMLElement, eventName: string): Promise<void>;
@@ -0,0 +1,14 @@
1
+ function waitForEvent(el, eventName) {
2
+ return new Promise((resolve) => {
3
+ function done(event) {
4
+ if (event.target === el) {
5
+ el.removeEventListener(eventName, done);
6
+ resolve();
7
+ }
8
+ }
9
+ el.addEventListener(eventName, done);
10
+ });
11
+ }
12
+ export {
13
+ waitForEvent
14
+ };
@@ -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-0-1-button";
93
+ const isButton = this.host.tagName.toLowerCase() === "sd-1-1-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) => {
@@ -1,3 +1,5 @@
1
+ export { default as SdAccordion } from './components/accordion/accordion';
2
+ export { default as SdAccordionGroup } from './components/accordion-group/accordion-group';
1
3
  export { default as SdButton } from './components/button/button';
2
4
  export { default as SdIcon } from './components/icon/icon';
3
5
  export { default as SdInclude } from './components/include/include';
@@ -1,17 +1,21 @@
1
- import { default as default2 } from "./components/button/button.js";
2
- import { default as default3 } from "./components/icon/icon.js";
3
- import { default as default4 } from "./components/include/include.js";
4
- import { default as default5 } from "./components/link/link.js";
5
- import { default as default6 } from "./components/spinner/spinner.js";
1
+ import { default as default2 } from "./components/accordion/accordion.js";
2
+ import { default as default3 } from "./components/accordion-group/accordion-group.js";
3
+ import { default as default4 } from "./components/button/button.js";
4
+ import { default as default5 } from "./components/icon/icon.js";
5
+ import { default as default6 } from "./components/include/include.js";
6
+ import { default as default7 } from "./components/link/link.js";
7
+ import { default as default8 } from "./components/spinner/spinner.js";
6
8
  import { registerIconLibrary, unregisterIconLibrary } from "./components/icon/library.js";
7
9
  import { LocalizeController } from "./utilities/localize.js";
8
10
  export {
9
11
  LocalizeController,
10
- default2 as SdButton,
11
- default3 as SdIcon,
12
- default4 as SdInclude,
13
- default5 as SdLink,
14
- default6 as SdSpinner,
12
+ default2 as SdAccordion,
13
+ default3 as SdAccordionGroup,
14
+ default4 as SdButton,
15
+ default5 as SdIcon,
16
+ default6 as SdInclude,
17
+ default7 as SdLink,
18
+ default8 as SdSpinner,
15
19
  registerIconLibrary,
16
20
  unregisterIconLibrary
17
21
  };
@@ -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}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.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-varspacing{height:var(--tw-varspacing)}.w-full{width:100%}.w-varspacing{width:var(--tw-varspacing)}.flex-auto{flex:1 1 auto}.-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%}.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}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.whitespace-nowrap{white-space:nowrap}.rounded-md{border-radius:var(--sd-border-radius-md,.375rem)}.border{border-width:1px}.border-primary{--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/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,67 176 42)/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-white{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity))}.px-0{padding-left:var(--sd-spacing-0,0);padding-right:var(--sd-spacing-0,0)}.px-4{padding-left:var(--sd-spacing-4,1rem);padding-right:var(--sd-spacing-4,1rem)}.align-middle{vertical-align:middle}.text-base{font-size:var(--sd-font-size-base,1rem)}.text-sm{font-size:var(--sd-font-size-sm,.875rem)}.leading-\\[calc\\(var\\(--tw-varspacing\\)-2px\\)\\]{line-height:calc(var(--tw-varspacing) - 2px)}.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)}.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-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}.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-300:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-accent-300,108 194 84)/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-500:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-accent-500,66 147 50)/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}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.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-varspacing{height:var(--tw-varspacing)}.w-full{width:100%}.w-varspacing{width:var(--tw-varspacing)}.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}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.gap-4{gap:var(--sd-spacing-4,1rem)}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-md{border-radius:var(--sd-border-radius-md,.375rem)}.border{border-width:1px}.border-primary{--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/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,67 176 42)/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-white{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity))}.px-0{padding-left:var(--sd-spacing-0,0);padding-right:var(--sd-spacing-0,0)}.px-4{padding-left:var(--sd-spacing-4,1rem);padding-right:var(--sd-spacing-4,1rem)}.py-3{padding-bottom:var(--sd-spacing-3,.75rem);padding-top:var(--sd-spacing-3,.75rem)}.py-6{padding-bottom:var(--sd-spacing-6,1.5rem);padding-top:var(--sd-spacing-6,1.5rem)}.text-left{text-align:left}.align-middle{vertical-align:middle}.text-base{font-size:var(--sd-font-size-base,1rem)}.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)}.text-accent{--tw-text-opacity:1;color:rgb(var(--sd-color-accent,67 176 42)/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}.focus\\:outline:focus{outline-style:solid}.focus\\:outline-2:focus{outline-width:2px}.focus\\:outline-offset-2:focus{outline-offset:2px}.focus\\:outline-primary:focus{outline-color:rgb(var(--sd-color-primary,0 53 142)/1)}.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-300:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-accent-300,108 194 84)/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-500:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-accent-500,66 147 50)/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
  };