@solid-design-system/components 3.13.0 → 3.14.1

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 (148) hide show
  1. package/dist/components/es/carousel.js +3 -3
  2. package/dist/components/es/navigation-item.js +1 -1
  3. package/dist/components/umd/solid-components.js +13 -13
  4. package/dist/custom-elements.json +1 -1
  5. package/dist/package/components/carousel/carousel.d.ts +4 -2
  6. package/dist/package/components/carousel/carousel.js +53 -14
  7. package/dist/package/components/navigation-item/navigation-item.d.ts +6 -4
  8. package/dist/package/components/navigation-item/navigation-item.js +50 -19
  9. package/dist/versioned-components/es/accordion-group.js +1 -1
  10. package/dist/versioned-components/es/accordion.js +1 -1
  11. package/dist/versioned-components/es/badge.js +1 -1
  12. package/dist/versioned-components/es/brandshape.js +1 -1
  13. package/dist/versioned-components/es/button.js +1 -1
  14. package/dist/versioned-components/es/carousel-item.js +1 -1
  15. package/dist/versioned-components/es/carousel.js +3 -3
  16. package/dist/versioned-components/es/checkbox-group.js +1 -1
  17. package/dist/versioned-components/es/checkbox.js +1 -1
  18. package/dist/versioned-components/es/dialog.js +1 -1
  19. package/dist/versioned-components/es/divider.js +1 -1
  20. package/dist/versioned-components/es/drawer.js +1 -1
  21. package/dist/versioned-components/es/dropdown.js +1 -1
  22. package/dist/versioned-components/es/expandable.js +1 -1
  23. package/dist/versioned-components/es/flipcard.js +1 -1
  24. package/dist/versioned-components/es/form.js +1 -1
  25. package/dist/versioned-components/es/header.js +1 -1
  26. package/dist/versioned-components/es/icon.js +1 -1
  27. package/dist/versioned-components/es/include.js +1 -1
  28. package/dist/versioned-components/es/input.js +1 -1
  29. package/dist/versioned-components/es/link.js +1 -1
  30. package/dist/versioned-components/es/map-marker.js +1 -1
  31. package/dist/versioned-components/es/navigation-item.js +1 -1
  32. package/dist/versioned-components/es/notification.js +1 -1
  33. package/dist/versioned-components/es/option.js +1 -1
  34. package/dist/versioned-components/es/quickfact.js +1 -1
  35. package/dist/versioned-components/es/radio-button.js +1 -1
  36. package/dist/versioned-components/es/radio-group.js +1 -1
  37. package/dist/versioned-components/es/radio.js +1 -1
  38. package/dist/versioned-components/es/scrollable.js +1 -1
  39. package/dist/versioned-components/es/select.js +3 -3
  40. package/dist/versioned-components/es/solid-components2.js +1 -1
  41. package/dist/versioned-components/es/spinner.js +1 -1
  42. package/dist/versioned-components/es/step-group.js +1 -1
  43. package/dist/versioned-components/es/step.js +1 -1
  44. package/dist/versioned-components/es/switch.js +1 -1
  45. package/dist/versioned-components/es/tab-group.js +1 -1
  46. package/dist/versioned-components/es/tab-panel.js +1 -1
  47. package/dist/versioned-components/es/tab.js +1 -1
  48. package/dist/versioned-components/es/tag.js +1 -1
  49. package/dist/versioned-components/es/teaser-media.js +1 -1
  50. package/dist/versioned-components/es/teaser.js +1 -1
  51. package/dist/versioned-components/es/textarea.js +1 -1
  52. package/dist/versioned-components/es/tooltip.js +2 -2
  53. package/dist/versioned-components/es/video.js +1 -1
  54. package/dist/versioned-package/_components/button-group/button-group.d.ts +1 -1
  55. package/dist/versioned-package/_components/button-group/button-group.js +11 -11
  56. package/dist/versioned-package/components/accordion/accordion.d.ts +1 -1
  57. package/dist/versioned-package/components/accordion/accordion.js +2 -2
  58. package/dist/versioned-package/components/accordion-group/accordion-group.d.ts +1 -1
  59. package/dist/versioned-package/components/accordion-group/accordion-group.js +3 -3
  60. package/dist/versioned-package/components/badge/badge.d.ts +1 -1
  61. package/dist/versioned-package/components/badge/badge.js +1 -1
  62. package/dist/versioned-package/components/brandshape/brandshape.d.ts +1 -1
  63. package/dist/versioned-package/components/brandshape/brandshape.js +1 -1
  64. package/dist/versioned-package/components/button/button.d.ts +1 -1
  65. package/dist/versioned-package/components/button/button.js +4 -4
  66. package/dist/versioned-package/components/carousel/carousel.d.ts +5 -3
  67. package/dist/versioned-package/components/carousel/carousel.js +59 -20
  68. package/dist/versioned-package/components/carousel-item/carousel-item.d.ts +1 -1
  69. package/dist/versioned-package/components/carousel-item/carousel-item.js +1 -1
  70. package/dist/versioned-package/components/checkbox/checkbox.d.ts +1 -1
  71. package/dist/versioned-package/components/checkbox/checkbox.js +3 -3
  72. package/dist/versioned-package/components/checkbox-group/checkbox-group.d.ts +1 -1
  73. package/dist/versioned-package/components/checkbox-group/checkbox-group.js +5 -5
  74. package/dist/versioned-package/components/dialog/dialog.d.ts +1 -1
  75. package/dist/versioned-package/components/dialog/dialog.js +2 -2
  76. package/dist/versioned-package/components/divider/divider.d.ts +1 -1
  77. package/dist/versioned-package/components/divider/divider.js +2 -2
  78. package/dist/versioned-package/components/drawer/drawer.d.ts +1 -1
  79. package/dist/versioned-package/components/drawer/drawer.js +2 -2
  80. package/dist/versioned-package/components/dropdown/dropdown.d.ts +1 -1
  81. package/dist/versioned-package/components/dropdown/dropdown.js +8 -8
  82. package/dist/versioned-package/components/expandable/expandable.d.ts +1 -1
  83. package/dist/versioned-package/components/expandable/expandable.js +2 -2
  84. package/dist/versioned-package/components/flipcard/flipcard.d.ts +1 -1
  85. package/dist/versioned-package/components/flipcard/flipcard.js +1 -1
  86. package/dist/versioned-package/components/header/header.d.ts +1 -1
  87. package/dist/versioned-package/components/header/header.js +4 -4
  88. package/dist/versioned-package/components/icon/icon.d.ts +1 -1
  89. package/dist/versioned-package/components/icon/icon.js +1 -1
  90. package/dist/versioned-package/components/include/include.d.ts +1 -1
  91. package/dist/versioned-package/components/include/include.js +1 -1
  92. package/dist/versioned-package/components/input/input.d.ts +1 -1
  93. package/dist/versioned-package/components/input/input.js +2 -2
  94. package/dist/versioned-package/components/link/link.d.ts +1 -1
  95. package/dist/versioned-package/components/link/link.js +2 -2
  96. package/dist/versioned-package/components/map-marker/map-marker.d.ts +1 -1
  97. package/dist/versioned-package/components/map-marker/map-marker.js +1 -1
  98. package/dist/versioned-package/components/navigation-item/navigation-item.d.ts +7 -5
  99. package/dist/versioned-package/components/navigation-item/navigation-item.js +52 -21
  100. package/dist/versioned-package/components/notification/notification.d.ts +1 -1
  101. package/dist/versioned-package/components/notification/notification.js +5 -5
  102. package/dist/versioned-package/components/option/option.d.ts +1 -1
  103. package/dist/versioned-package/components/option/option.js +2 -2
  104. package/dist/versioned-package/components/popup/popup.d.ts +1 -1
  105. package/dist/versioned-package/components/popup/popup.js +1 -1
  106. package/dist/versioned-package/components/quickfact/quickfact.d.ts +1 -1
  107. package/dist/versioned-package/components/quickfact/quickfact.js +2 -2
  108. package/dist/versioned-package/components/radio/radio.d.ts +1 -1
  109. package/dist/versioned-package/components/radio/radio.js +2 -2
  110. package/dist/versioned-package/components/radio-button/radio-button.d.ts +1 -1
  111. package/dist/versioned-package/components/radio-button/radio-button.js +2 -2
  112. package/dist/versioned-package/components/radio-group/radio-group.d.ts +2 -2
  113. package/dist/versioned-package/components/radio-group/radio-group.js +13 -13
  114. package/dist/versioned-package/components/scrollable/scrollable.d.ts +1 -1
  115. package/dist/versioned-package/components/scrollable/scrollable.js +3 -3
  116. package/dist/versioned-package/components/select/select.d.ts +4 -4
  117. package/dist/versioned-package/components/select/select.js +25 -25
  118. package/dist/versioned-package/components/spinner/spinner.d.ts +1 -1
  119. package/dist/versioned-package/components/spinner/spinner.js +1 -1
  120. package/dist/versioned-package/components/step/step.d.ts +1 -1
  121. package/dist/versioned-package/components/step/step.js +5 -5
  122. package/dist/versioned-package/components/step-group/step-group.d.ts +1 -1
  123. package/dist/versioned-package/components/step-group/step-group.js +2 -2
  124. package/dist/versioned-package/components/switch/switch.d.ts +1 -1
  125. package/dist/versioned-package/components/switch/switch.js +1 -1
  126. package/dist/versioned-package/components/tab/tab.d.ts +1 -1
  127. package/dist/versioned-package/components/tab/tab.js +2 -2
  128. package/dist/versioned-package/components/tab-group/tab-group.d.ts +1 -1
  129. package/dist/versioned-package/components/tab-group/tab-group.js +13 -13
  130. package/dist/versioned-package/components/tab-panel/tab-panel.d.ts +1 -1
  131. package/dist/versioned-package/components/tab-panel/tab-panel.js +2 -2
  132. package/dist/versioned-package/components/tag/tag.d.ts +1 -1
  133. package/dist/versioned-package/components/tag/tag.js +2 -2
  134. package/dist/versioned-package/components/teaser/teaser.js +1 -1
  135. package/dist/versioned-package/components/teaser-media/teaser-media.js +1 -1
  136. package/dist/versioned-package/components/textarea/textarea.d.ts +1 -1
  137. package/dist/versioned-package/components/textarea/textarea.js +2 -2
  138. package/dist/versioned-package/components/tooltip/tooltip.d.ts +1 -1
  139. package/dist/versioned-package/components/tooltip/tooltip.js +5 -5
  140. package/dist/versioned-package/components/video/video.d.ts +1 -1
  141. package/dist/versioned-package/components/video/video.js +2 -2
  142. package/dist/versioned-package/internal/form.js +3 -3
  143. package/dist/versioned-package/styles/headline/headline.css.js +1 -1
  144. package/dist/versioned-package/utilities/autocomplete-config.js +4 -4
  145. package/dist/versioned-styles/solid-styles.css +1 -1
  146. package/dist/vscode.html-custom-data.json +52 -44
  147. package/dist/web-types.json +107 -51
  148. package/package.json +3 -3
@@ -12,6 +12,7 @@ export default class SdCarousel extends SolidElement {
12
12
  scrollContainer: HTMLElement;
13
13
  paginationContainer: HTMLElement;
14
14
  activeSlide: number;
15
+ currentPage: number;
15
16
  pausedAutoplay: boolean;
16
17
  private autoplayController;
17
18
  private scrollController;
@@ -23,8 +24,8 @@ export default class SdCarousel extends SolidElement {
23
24
  connectedCallback(): void;
24
25
  disconnectedCallback(): void;
25
26
  protected firstUpdated(): void;
26
- private getPageCount;
27
- private getCurrentPage;
27
+ static getPageCount(totalSlides: number, slidesPerPage: number, slidesPerMove: number): number;
28
+ static getCurrentPage(totalSlides: number, activeSlide: number, slidesPerPage: number, slidesPerMove: number): number;
28
29
  private getSlides;
29
30
  private handleKeyDown;
30
31
  private handleScrollEnd;
@@ -36,6 +37,7 @@ export default class SdCarousel extends SolidElement {
36
37
  handleAutoplayChange(): void;
37
38
  previous(behavior?: ScrollBehavior): void;
38
39
  next(behavior?: ScrollBehavior): void;
40
+ nextTillFirst(behavior?: ScrollBehavior): void;
39
41
  goToSlide(index: number, behavior?: ScrollBehavior): void;
40
42
  render(): import("lit-html").TemplateResult<1>;
41
43
  static styles: import("lit").CSSResultGroup[];
@@ -35,6 +35,7 @@ let SdCarousel = class extends SolidElement {
35
35
  this.slidesPerPage = 1;
36
36
  this.slidesPerMove = 1;
37
37
  this.activeSlide = 0;
38
+ this.currentPage = 1;
38
39
  this.pausedAutoplay = false;
39
40
  this.autoplayController = new AutoplayController(this, () => this.next());
40
41
  this.scrollController = new ScrollController(this);
@@ -87,11 +88,14 @@ let SdCarousel = class extends SolidElement {
87
88
  this.mutationObserver = new MutationObserver(this.handleSlotChange);
88
89
  this.mutationObserver.observe(this, { childList: true, subtree: false });
89
90
  }
90
- getPageCount() {
91
- return Math.ceil(this.getSlides().length / this.slidesPerPage);
91
+ static getPageCount(totalSlides, slidesPerPage, slidesPerMove) {
92
+ return Math.ceil((totalSlides - slidesPerPage) / slidesPerMove) + 1 > 0 ? Math.ceil((totalSlides - slidesPerPage) / slidesPerMove) + 1 : (
93
+ // Returns 1 if the total number of slides is less than the number of slides per page
94
+ 1
95
+ );
92
96
  }
93
- getCurrentPage() {
94
- return Math.ceil(this.activeSlide / this.slidesPerPage);
97
+ static getCurrentPage(totalSlides, activeSlide, slidesPerPage, slidesPerMove) {
98
+ return Math.ceil((totalSlides - slidesPerPage) / slidesPerMove) - Math.ceil((totalSlides - slidesPerPage - activeSlide) / slidesPerMove) + 1;
95
99
  }
96
100
  getSlides({ excludeClones = true } = {}) {
97
101
  return [...this.slides].filter((slide) => !excludeClones || !slide.hasAttribute("data-clone"));
@@ -183,6 +187,12 @@ let SdCarousel = class extends SolidElement {
183
187
  this.goToSlide(this.activeSlide, "auto");
184
188
  }
185
189
  handelSlideChange() {
190
+ this.currentPage = SdCarousel.getCurrentPage(
191
+ this.getSlides().length,
192
+ this.activeSlide,
193
+ this.slidesPerPage,
194
+ this.slidesPerMove
195
+ );
186
196
  const slides = this.getSlides();
187
197
  slides.forEach((slide, i) => {
188
198
  slide.classList.toggle("--is-active", i === this.activeSlide);
@@ -195,6 +205,9 @@ let SdCarousel = class extends SolidElement {
195
205
  }
196
206
  });
197
207
  }
208
+ if (this.currentPage > SdCarousel.getPageCount(this.getSlides().length, this.slidesPerPage, this.slidesPerMove)) {
209
+ this.nextTillFirst();
210
+ }
198
211
  }
199
212
  handleSlidesPerMoveChange() {
200
213
  const slides = this.getSlides({ excludeClones: false });
@@ -226,7 +239,11 @@ let SdCarousel = class extends SolidElement {
226
239
  previousIndex -= 1;
227
240
  canSnap = Math.abs(previousIndex - this.slidesPerMove) % this.slidesPerMove === 0;
228
241
  }
229
- this.goToSlide(previousIndex, behavior);
242
+ if (this.currentPage - 1 === 0 && this.loop) {
243
+ this.goToSlide(this.activeSlide - this.slidesPerPage, behavior);
244
+ } else {
245
+ this.goToSlide(previousIndex, behavior);
246
+ }
230
247
  }
231
248
  /**
232
249
  * Move the carousel forward by `slides-per-move` slides.
@@ -234,7 +251,22 @@ let SdCarousel = class extends SolidElement {
234
251
  * @param behavior - The behavior used for scrolling.
235
252
  */
236
253
  next(behavior = "smooth") {
237
- this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
254
+ if (this.currentPage + 1 > SdCarousel.getPageCount(this.getSlides().length, this.slidesPerPage, this.slidesPerMove) && this.loop) {
255
+ this.nextTillFirst(behavior);
256
+ } else {
257
+ this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
258
+ }
259
+ }
260
+ nextTillFirst(behavior = "smooth") {
261
+ while (this.activeSlide !== 0) {
262
+ this.goToSlide(this.activeSlide + 1, behavior);
263
+ }
264
+ this.currentPage = SdCarousel.getCurrentPage(
265
+ this.getSlides().length,
266
+ this.activeSlide,
267
+ this.slidesPerPage,
268
+ this.slidesPerMove
269
+ );
238
270
  }
239
271
  /**
240
272
  * Scrolls the carousel to the slide specified by `index`.
@@ -248,7 +280,7 @@ let SdCarousel = class extends SolidElement {
248
280
  const slidesWithClones = this.getSlides({ excludeClones: false });
249
281
  const newActiveSlide = (index + slides.length) % slides.length;
250
282
  this.activeSlide = newActiveSlide;
251
- const nextSlideIndex = clamp(index + (loop ? slidesPerPage : 0), 0, slidesWithClones.length - 1);
283
+ const nextSlideIndex = clamp(index + (loop ? slidesPerPage : 0), 0, slidesWithClones.length + 1);
252
284
  const nextSlide = slidesWithClones[nextSlideIndex];
253
285
  const scrollContainerRect = scrollContainer.getBoundingClientRect();
254
286
  const nextSlideRect = nextSlide.getBoundingClientRect();
@@ -260,10 +292,15 @@ let SdCarousel = class extends SolidElement {
260
292
  }
261
293
  render() {
262
294
  const { scrollController, slidesPerPage } = this;
263
- const pagesCount = this.getPageCount();
264
- const currentPage = this.getCurrentPage();
265
- const prevEnabled = this.loop || currentPage > 0;
266
- const nextEnabled = this.loop || currentPage < pagesCount - 1;
295
+ const pagesCount = SdCarousel.getPageCount(this.getSlides().length, this.slidesPerPage, this.slidesPerMove);
296
+ const currentPage = SdCarousel.getCurrentPage(
297
+ this.getSlides().length,
298
+ this.activeSlide,
299
+ this.slidesPerPage,
300
+ this.slidesPerMove
301
+ );
302
+ const prevEnabled = this.loop || currentPage > 1;
303
+ const nextEnabled = this.loop || currentPage < pagesCount;
267
304
  const isLtr = this.localize.dir() === "ltr";
268
305
  return html`<div part="base" class="${cx(`carousel h-full w-full`)}"><div id="scroll-container" part="scroll-container" class="${cx(
269
306
  `carousel__slides mb-6
@@ -276,7 +313,7 @@ let SdCarousel = class extends SolidElement {
276
313
  !prevEnabled && "sd-interactive--disabled",
277
314
  this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset"
278
315
  )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? () => this.previous() : null}"><slot name="previous-icon"><sd-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
279
- const isActive = index === currentPage;
316
+ const isActive = index + 1 === currentPage;
280
317
  return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
281
318
  "carousel__pagination-item",
282
319
  "block cursor-pointer bg-none border-0 rounded-full",
@@ -288,12 +325,11 @@ let SdCarousel = class extends SolidElement {
288
325
  isActive && "bg-accent border-none",
289
326
  isActive ? this.inverted ? "hover:bg-accent-300" : "hover:bg-accent-550" : ""
290
327
  )}"></span></button>`;
291
- })}</div>` : html`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${cx("w-5 text-center border-b-2 border-accent", this.inverted ? "text-white" : "text-black")}">${currentPage + 1}</span> <span part="pagination-divider" class="${cx("scale-y-[1.5]", "text-center", this.inverted ? "text-white" : "text-black")}">/</span> <span part="pagination-item" class="${cx("w-5 text-center", this.inverted ? "text-white" : "text-black")}">${pagesCount}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!nextEnabled ? true : false}" class="${cx(
328
+ })}</div>` : html`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${cx("w-5 text-center border-b-2 border-accent", this.inverted ? "text-white" : "text-black")}">${currentPage}</span> <span part="pagination-divider" class="${cx("scale-y-[1.5]", "text-center", this.inverted ? "text-white" : "text-black")}">/</span> <span part="pagination-item" class="${cx("w-5 text-center", this.inverted ? "text-white" : "text-black")}">${pagesCount}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!nextEnabled ? true : false}" class="${cx(
292
329
  "!ml-6 !rounded-sm sd-interactive ",
293
330
  !nextEnabled && "sd-interactive--disabled",
294
331
  this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset"
295
332
  )}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @click="${nextEnabled ? () => {
296
- console.log("click-next");
297
333
  this.next();
298
334
  } : null}"><slot name="next-icon"><sd-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-icon></slot></button></div><button class="${cx(
299
335
  "ml-6 !rounded-sm",
@@ -339,6 +375,9 @@ __decorateClass([
339
375
  __decorateClass([
340
376
  state()
341
377
  ], SdCarousel.prototype, "activeSlide", 2);
378
+ __decorateClass([
379
+ state()
380
+ ], SdCarousel.prototype, "currentPage", 2);
342
381
  __decorateClass([
343
382
  state()
344
383
  ], SdCarousel.prototype, "pausedAutoplay", 2);
@@ -13,14 +13,16 @@ export default class SdNavigationItem extends SolidElement {
13
13
  relaxed: boolean;
14
14
  divider: boolean;
15
15
  open: boolean;
16
- private isButton;
17
- private isLink;
18
- private isAccordion;
16
+ separated: boolean;
17
+ private get isButton();
18
+ private get isLink();
19
+ private get isAccordion();
19
20
  private handleClickButton;
20
21
  private handleClickSummary;
21
22
  private hideDetails;
22
23
  private showDetails;
23
- private calculatePaddingX;
24
+ private get calculatePaddingX();
25
+ private get tag();
24
26
  render(): import("lit-html").TemplateResult;
25
27
  static styles: import("lit").CSSResultGroup[];
26
28
  }
@@ -1,4 +1,4 @@
1
- import { css } from "lit";
1
+ import { unsafeCSS, css } from "lit";
2
2
  import { customElement } from "../../internal/register-custom-element.js";
3
3
  import { HasSlotController } from "../../internal/slot.js";
4
4
  import { literal, html } from "lit/static-html.js";
@@ -6,6 +6,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
6
6
  import { property } from "lit/decorators.js";
7
7
  import componentStyles from "../../styles/component.styles.js";
8
8
  import cx from "classix";
9
+ import InteractiveStyles from "../../styles/interactive/interactive.css.js";
9
10
  import SolidElement from "../../internal/solid-element.js";
10
11
  var __defProp = Object.defineProperty;
11
12
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,14 +31,15 @@ let SdNavigationItem = class extends SolidElement {
30
31
  this.relaxed = false;
31
32
  this.divider = false;
32
33
  this.open = false;
34
+ this.separated = false;
33
35
  }
34
- isButton() {
36
+ get isButton() {
35
37
  return !this.href && !this.hasSlotController.test("children");
36
38
  }
37
- isLink() {
39
+ get isLink() {
38
40
  return !!this.href;
39
41
  }
40
- isAccordion() {
42
+ get isAccordion() {
41
43
  return !this.href && this.hasSlotController.test("children");
42
44
  }
43
45
  handleClickButton(event) {
@@ -65,32 +67,45 @@ let SdNavigationItem = class extends SolidElement {
65
67
  this.open = true;
66
68
  this.emit("sd-show", { cancelable: true });
67
69
  }
68
- calculatePaddingX() {
70
+ get calculatePaddingX() {
69
71
  if (this.relaxed && this.indented) return "pl-8 pr-4";
70
72
  if (this.relaxed) return "px-4";
71
73
  if (this.indented) return "pl-4";
72
74
  return "";
73
75
  }
76
+ get tag() {
77
+ if (this.isAccordion && !this.isLink) {
78
+ return literal`summary`;
79
+ }
80
+ if (this.separated) {
81
+ return literal`div`;
82
+ }
83
+ if (this.isLink) {
84
+ return literal`a`;
85
+ }
86
+ return literal`button`;
87
+ }
74
88
  render() {
75
- const isLink = this.isLink();
76
- const isButton = this.isButton();
77
- const isAccordion = this.isAccordion();
89
+ const tag = this.tag;
90
+ const isLink = this.isLink;
91
+ const isButton = this.isButton;
92
+ const isAccordion = this.isAccordion;
78
93
  const slots = {
79
94
  label: this.hasSlotController.test("[default]"),
80
95
  main: this.hasSlotController.test("main"),
81
96
  description: this.hasSlotController.test("description"),
82
97
  children: this.hasSlotController.test("children")
83
98
  };
84
- const tag = isLink ? literal`a` : isAccordion ? literal`summary` : literal`button`;
85
99
  const horizontalPaddingBottom = this.vertical ? "pb-3" : "pb-2";
86
100
  const root = html`<${tag} part="base" class="${cx(
87
- "px-4 hover:bg-neutral-200 group transition-all min-h-[48px] cursor-pointer relative focus-visible:focus-outline",
101
+ "cursor-pointer relative focus-visible:focus-outline",
88
102
  { base: "text-base", lg: "text-lg", sm: "text-[14px]" }[this.size],
89
103
  this.disabled ? "text-neutral-500 pointer-events-none" : "text-primary",
90
104
  isAccordion ? "flex flex-col" : "inline-block w-full",
91
105
  this.divider && this.vertical && "mt-0.25",
92
- !this.vertical && "inline-flex items-center"
93
- )}" aria-controls="${ifDefined(isAccordion ? "navigation-item-details" : void 0)}" aria-current="${ifDefined(this.current ? "page" : void 0)}" aria-disabled="${this.disabled}" ?disabled="${ifDefined(isButton ? this.disabled : void 0)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${isLink ? "link" : "button"}" tabindex="${this.disabled ? "-1" : "0"}" @click="${isAccordion ? this.handleClickSummary : isButton ? this.handleClickButton : void 0}"><div part="current-indicator" class="${cx(
106
+ !this.vertical && "inline-flex items-center",
107
+ !this.separated && "hover:bg-neutral-200 group transition-all min-h-[48px] px-4"
108
+ )}" aria-controls="${ifDefined(isAccordion ? "navigation-item-details" : void 0)}" aria-current="${ifDefined(this.current ? "page" : void 0)}" aria-disabled="${this.disabled}" ?disabled="${ifDefined(isButton ? this.disabled : void 0)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${isLink ? "link" : "button"}" tabindex="${this.disabled || this.separated ? "-1" : "0"}" @click="${this.separated ? void 0 : isAccordion ? this.handleClickSummary : isButton ? this.handleClickButton : void 0}"><div part="current-indicator" class="${cx(
94
109
  "absolute left-0 pointer-events-none transition-all duration-150",
95
110
  this.vertical ? "w-1 h-[calc(100%-16px)] top-2 group-hover:h-full group-hover:top-0" : "h-1 w-full bottom-0",
96
111
  this.current ? "bg-accent" : "bg-transparent",
@@ -98,23 +113,36 @@ let SdNavigationItem = class extends SolidElement {
98
113
  )}"></div><span part="content-area" class="${cx(
99
114
  "relative pt-3 inline-flex justify-between items-center",
100
115
  isAccordion ? "grow" : "w-full",
101
- slots["description"] ? "pb-1" : horizontalPaddingBottom,
102
- this.calculatePaddingX()
103
- )}">${this.divider && this.vertical ? html`<sd-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX())}"></sd-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline"></slot></span>${(this.chevron || slots["children"]) && this.vertical ? html`<sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
116
+ slots["description"] || this.separated ? "pb-1" : horizontalPaddingBottom,
117
+ this.calculatePaddingX
118
+ )}">${this.divider && this.vertical ? html`<sd-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated ? html`<a class="${cx(
119
+ "mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-all min-h-[48px]",
120
+ !slots["description"] && "py-4"
121
+ )}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline"></slot></a>` : html`<slot part="content" class="inline"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="chevron-down-button" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
122
+ "mr-4 h-6 w-6 transition-all",
123
+ isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
124
+ )}"></sd-icon></button>` : html`<sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
104
125
  "h-6 w-6 ml-2 transition-all",
105
126
  isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
106
127
  )}"></sd-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(
107
128
  "inline-block text-sm text-left text-black",
108
- isAccordion ? "grow" : "w-full",
109
- horizontalPaddingBottom,
110
- this.calculatePaddingX()
129
+ isAccordion || this.separated ? "grow" : "w-full",
130
+ this.separated ? "px-4" : this.calculatePaddingX,
131
+ horizontalPaddingBottom
111
132
  )}"></slot>` : ""}</${tag}>`;
112
- return isAccordion ? html`<details part="details" id="navigation-item-details" ?open="${this.open}" class="relative flex">${root}<slot name="children"></slot></details>` : html`${root}`;
133
+ if (isAccordion) {
134
+ return html`<details part="details" id="navigation-item-details" ?open="${this.open}" class="relative flex">${root}<slot name="children"></slot></details>`;
135
+ }
136
+ if (this.separated) {
137
+ return html`<div part="details" id="navigation-item-details" class="relative flex flex-col">${root}${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
138
+ }
139
+ return html`${root}`;
113
140
  }
114
141
  };
115
142
  SdNavigationItem.styles = [
116
143
  componentStyles,
117
144
  SolidElement.styles,
145
+ unsafeCSS(InteractiveStyles),
118
146
  css`:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}`
119
147
  ];
120
148
  __decorateClass([
@@ -153,6 +181,9 @@ __decorateClass([
153
181
  __decorateClass([
154
182
  property({ type: Boolean, reflect: true })
155
183
  ], SdNavigationItem.prototype, "open", 2);
184
+ __decorateClass([
185
+ property({ type: Boolean, reflect: true })
186
+ ], SdNavigationItem.prototype, "separated", 2);
156
187
  SdNavigationItem = __decorateClass([
157
188
  customElement("sd-navigation-item")
158
189
  ], SdNavigationItem);
@@ -1 +1 @@
1
- import"./accordion.js";import{S as e,x as t,c as o,i as s,n as r,a}from"./solid-components2.js";import{o as c}from"./query-assigned-elements.js";var n=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(e,t,o,s)=>{for(var r,a=s>1?void 0:s?d(t,o):t,c=e.length-1;c>=0;c--)(r=e[c])&&(a=(s?r(t,o,a):r(a))||a);return s&&a&&n(t,o,a),a};let l=class extends e{constructor(){super(...arguments),this.closeOthers=!1,this.handleAccordionShow=e=>{this.closeOthers&&this._accordionsInDefaultSlot.forEach((t=>{t!==e.target&&t.parentNode===e.target.parentNode&&t.removeAttribute("open")}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("sd-show",this.handleAccordionShow)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("sd-show",this.handleAccordionShow)}render(){return t`<div part="base"><slot></slot></div>`}};l.styles=[o,e.styles,s`:host{display:block}::slotted(sd-3-13-0-accordion:not(:first-of-type)){margin-top:-1px}`],i([c({selector:"sd-3-13-0-accordion"})],l.prototype,"_accordionsInDefaultSlot",2),i([r({attribute:"close-others",type:Boolean})],l.prototype,"closeOthers",2),l=i([a("sd-3-13-0-accordion-group")],l);export{l as default};
1
+ import"./accordion.js";import{S as e,x as t,c as o,i as s,n as r,a}from"./solid-components2.js";import{o as c}from"./query-assigned-elements.js";var n=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(e,t,o,s)=>{for(var r,a=s>1?void 0:s?d(t,o):t,c=e.length-1;c>=0;c--)(r=e[c])&&(a=(s?r(t,o,a):r(a))||a);return s&&a&&n(t,o,a),a};let l=class extends e{constructor(){super(...arguments),this.closeOthers=!1,this.handleAccordionShow=e=>{this.closeOthers&&this._accordionsInDefaultSlot.forEach((t=>{t!==e.target&&t.parentNode===e.target.parentNode&&t.removeAttribute("open")}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("sd-show",this.handleAccordionShow)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("sd-show",this.handleAccordionShow)}render(){return t`<div part="base"><slot></slot></div>`}};l.styles=[o,e.styles,s`:host{display:block}::slotted(sd-3-14-1-accordion:not(:first-of-type)){margin-top:-1px}`],i([c({selector:"sd-3-14-1-accordion"})],l.prototype,"_accordionsInDefaultSlot",2),i([r({attribute:"close-others",type:Boolean})],l.prototype,"closeOthers",2),l=i([a("sd-3-14-1-accordion-group")],l);export{l as default};
@@ -1 +1 @@
1
- import"./icon.js";import{s as e,a as t,b as s}from"./animate.js";import{S as o,L as i,x as a,t as r,i as n,e as h,n as d,a as l}from"./solid-components2.js";import{g as p,s as c}from"./animation-registry.js";import{w as y}from"./event.js";import{w as m}from"./watch.js";var u=Object.defineProperty,f=Object.getOwnPropertyDescriptor,b=(e,t,s,o)=>{for(var i,a=o>1?void 0:o?f(t,s):t,r=e.length-1;r>=0;r--)(i=e[r])&&(a=(o?i(t,s,a):i(a))||a);return o&&a&&u(t,s,a),a};let w=class extends o{constructor(){super(...arguments),this.localize=new i(this),this.open=!1}firstUpdated(){this.body.hidden=!this.open,this.body.style.height=this.open?"auto":"0"}handleSummaryClick(){this.open?this.hide():this.show()}handleSummaryKeyDown(e){("Enter"===e.key||" "===e.key)&&(e.preventDefault(),this.open?this.hide():this.show()),("ArrowUp"===e.key||"ArrowLeft"===e.key)&&(e.preventDefault(),this.hide()),("ArrowDown"===e.key||"ArrowRight"===e.key)&&(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){if(this.emit("sd-show",{cancelable:!0}).defaultPrevented)return void(this.open=!1);await e(this.body),this.body.hidden=!1;const{keyframes:o,options:i}=p(this,"accordion.show",{dir:this.localize.dir()});await t(this.body,s(o,this.body.scrollHeight),i),this.body.style.height="auto",this.emit("sd-after-show")}else{if(this.emit("sd-hide",{cancelable:!0}).defaultPrevented)return void(this.open=!0);await e(this.body);const{keyframes:o,options:i}=p(this,"accordion.hide",{dir:this.localize.dir()});await t(this.body,s(o,this.body.scrollHeight),i),this.body.hidden=!0,this.body.style.height="auto",this.emit("sd-after-hide")}}async show(){if(!this.open)return this.open=!0,y(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,y(this,"sd-after-hide")}render(){return a`<div part="base" class="border-y border-neutral-400"><header part="header" id="header" class="${r("flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline text-primary hover:bg-neutral-200 relative group")}" role="button" aria-expanded="${this.open?"true":"false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${r(!this.open&&"opacity-0","w-1 bg-accent absolute left-0 transition-all h-[calc(100%-16px)] group-hover:h-full")}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${r("flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",this.open&&"rotate-180")}"><slot name="expand-icon" class="${r(this.open&&"hidden")}"><sd-3-13-0-icon library="system" name="chevron-down"></sd-3-13-0-icon></slot><slot name="collapse-icon" class="${r(!this.open&&"hidden")}"><sd-3-13-0-icon library="system" name="chevron-down"></sd-3-13-0-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`}};w.styles=[o.styles,n`:host{display:block}`],b([h('[part="base"]')],w.prototype,"accordion",2),b([h('[part="header"]')],w.prototype,"header",2),b([h('[part="content"]')],w.prototype,"body",2),b([d({type:Boolean,reflect:!0})],w.prototype,"open",2),b([d()],w.prototype,"summary",2),b([m("open",{waitUntilFirstUpdate:!0})],w.prototype,"handleOpenChange",1),w=b([l("sd-3-13-0-accordion")],w),c("accordion.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"ease"}}),c("accordion.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"ease"}});export{w as default};
1
+ import"./icon.js";import{s as e,a as t,b as s}from"./animate.js";import{S as o,L as i,x as a,t as r,i as n,e as h,n as d,a as l}from"./solid-components2.js";import{g as p,s as c}from"./animation-registry.js";import{w as y}from"./event.js";import{w as m}from"./watch.js";var u=Object.defineProperty,f=Object.getOwnPropertyDescriptor,b=(e,t,s,o)=>{for(var i,a=o>1?void 0:o?f(t,s):t,r=e.length-1;r>=0;r--)(i=e[r])&&(a=(o?i(t,s,a):i(a))||a);return o&&a&&u(t,s,a),a};let w=class extends o{constructor(){super(...arguments),this.localize=new i(this),this.open=!1}firstUpdated(){this.body.hidden=!this.open,this.body.style.height=this.open?"auto":"0"}handleSummaryClick(){this.open?this.hide():this.show()}handleSummaryKeyDown(e){("Enter"===e.key||" "===e.key)&&(e.preventDefault(),this.open?this.hide():this.show()),("ArrowUp"===e.key||"ArrowLeft"===e.key)&&(e.preventDefault(),this.hide()),("ArrowDown"===e.key||"ArrowRight"===e.key)&&(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){if(this.emit("sd-show",{cancelable:!0}).defaultPrevented)return void(this.open=!1);await e(this.body),this.body.hidden=!1;const{keyframes:o,options:i}=p(this,"accordion.show",{dir:this.localize.dir()});await t(this.body,s(o,this.body.scrollHeight),i),this.body.style.height="auto",this.emit("sd-after-show")}else{if(this.emit("sd-hide",{cancelable:!0}).defaultPrevented)return void(this.open=!0);await e(this.body);const{keyframes:o,options:i}=p(this,"accordion.hide",{dir:this.localize.dir()});await t(this.body,s(o,this.body.scrollHeight),i),this.body.hidden=!0,this.body.style.height="auto",this.emit("sd-after-hide")}}async show(){if(!this.open)return this.open=!0,y(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,y(this,"sd-after-hide")}render(){return a`<div part="base" class="border-y border-neutral-400"><header part="header" id="header" class="${r("flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline text-primary hover:bg-neutral-200 relative group")}" role="button" aria-expanded="${this.open?"true":"false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${r(!this.open&&"opacity-0","w-1 bg-accent absolute left-0 transition-all h-[calc(100%-16px)] group-hover:h-full")}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${r("flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",this.open&&"rotate-180")}"><slot name="expand-icon" class="${r(this.open&&"hidden")}"><sd-3-14-1-icon library="system" name="chevron-down"></sd-3-14-1-icon></slot><slot name="collapse-icon" class="${r(!this.open&&"hidden")}"><sd-3-14-1-icon library="system" name="chevron-down"></sd-3-14-1-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`}};w.styles=[o.styles,n`:host{display:block}`],b([h('[part="base"]')],w.prototype,"accordion",2),b([h('[part="header"]')],w.prototype,"header",2),b([h('[part="content"]')],w.prototype,"body",2),b([d({type:Boolean,reflect:!0})],w.prototype,"open",2),b([d()],w.prototype,"summary",2),b([m("open",{waitUntilFirstUpdate:!0})],w.prototype,"handleOpenChange",1),w=b([l("sd-3-14-1-accordion")],w),c("accordion.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"ease"}}),c("accordion.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"ease"}});export{w as default};
@@ -1 +1 @@
1
- import{S as e,x as t,t as r,i as s,n as i,a as n}from"./solid-components2.js";var a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,p=(e,t,r,s)=>{for(var i,n=s>1?void 0:s?o(t,r):t,p=e.length-1;p>=0;p--)(i=e[p])&&(n=(s?i(t,r,n):i(n))||n);return s&&n&&a(t,r,n),n};let d=class extends e{constructor(){super(...arguments),this.variant="default",this.size="lg",this.inverted=!1}render(){return t`<span tabindex="0" role="status" part="base" class="${r("inline-flex items-center justify-center gap-x-[1px] text-center leading-none whitespace-nowrap border rounded-full select-none cursor-[inherit]",{default:this.inverted?"text-primary bg-white border-primary":"text-white bg-primary-500 border-white",success:this.inverted?"text-white bg-success border-primary":"text-white bg-success border-white",error:this.inverted?"text-white bg-error border-primary":"text-white bg-error border-white"}[this.variant],{sm:"h-2 min-w-[8px] text-[10px]",md:"h-4 px-[4px] min-w-[16px] text-[10px]",lg:"h-5 px-[5px] min-w-[20px] text-[12px]"}[this.size])}"><span part="content" class="${r("sm"===this.size&&"hidden")}"><slot></slot></span></span>`}};d.styles=[e.styles,s`:host{display:inline-flex;align-items:center;justify-content:center}`],p([i({reflect:!0})],d.prototype,"variant",2),p([i({reflect:!0})],d.prototype,"size",2),p([i({type:Boolean,reflect:!0})],d.prototype,"inverted",2),d=p([n("sd-3-13-0-badge")],d);export{d as default};
1
+ import{S as e,x as t,t as r,i as s,n as i,a as n}from"./solid-components2.js";var a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,p=(e,t,r,s)=>{for(var i,n=s>1?void 0:s?o(t,r):t,p=e.length-1;p>=0;p--)(i=e[p])&&(n=(s?i(t,r,n):i(n))||n);return s&&n&&a(t,r,n),n};let d=class extends e{constructor(){super(...arguments),this.variant="default",this.size="lg",this.inverted=!1}render(){return t`<span tabindex="0" role="status" part="base" class="${r("inline-flex items-center justify-center gap-x-[1px] text-center leading-none whitespace-nowrap border rounded-full select-none cursor-[inherit]",{default:this.inverted?"text-primary bg-white border-primary":"text-white bg-primary-500 border-white",success:this.inverted?"text-white bg-success border-primary":"text-white bg-success border-white",error:this.inverted?"text-white bg-error border-primary":"text-white bg-error border-white"}[this.variant],{sm:"h-2 min-w-[8px] text-[10px]",md:"h-4 px-[4px] min-w-[16px] text-[10px]",lg:"h-5 px-[5px] min-w-[20px] text-[12px]"}[this.size])}"><span part="content" class="${r("sm"===this.size&&"hidden")}"><slot></slot></span></span>`}};d.styles=[e.styles,s`:host{display:inline-flex;align-items:center;justify-content:center}`],p([i({reflect:!0})],d.prototype,"variant",2),p([i({reflect:!0})],d.prototype,"size",2),p([i({type:Boolean,reflect:!0})],d.prototype,"inverted",2),d=p([n("sd-3-14-1-badge")],d);export{d as default};
@@ -1 +1 @@
1
- import{S as e,x as t,t as r,c as i,i as a,e as s,n as o,a as n}from"./solid-components2.js";import{r as p}from"./state.js";var d=Object.defineProperty,l=Object.getOwnPropertyDescriptor,h=(e,t,r,i)=>{for(var a,s=i>1?void 0:i?l(t,r):t,o=e.length-1;o>=0;o--)(a=e[o])&&(s=(i?a(t,r,s):a(s))||s);return i&&s&&d(t,r,s),s};let c=class extends e{constructor(){super(...arguments),this.variant="primary",this.shapes=["top","middle","bottom"],this.componentBreakpoint=0}getSvg(e,t){return{0:this.smallSvg(t),414:this.mediumSvg(t),640:this.largeSvg(t)}[e]}largeSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M610.777 1.393.001 120.146 0 123h700.001V74.79c0-4.797-.462-9.585-1.381-14.294-7.909-40.537-47.237-66.998-87.843-59.103Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 123"><path d="M89.224 121.607 700 2.854 700.001 0h-700L0 48.21c0 4.797.463 9.584 1.381 14.294 7.909 40.537 47.237 66.998 87.843 59.103Z"/></svg>`}mediumSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 119"><path d="M597.75 1.6 0 118.046V121h700V85.872c0-5.509-.53-11.006-1.583-16.413-9.063-46.543-54.133-76.924-100.667-67.86Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M102.25 119.4 700 2.954V0H0v35.128c0 5.509.53 11.006 1.583 16.413 9.063 46.543 54.134 76.924 100.667 67.859Z"/></svg>`}smallSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 113"><path d="M566.951 2.08 0 112.466v2.934h700v-3.672c0-7.166-.689-14.314-2.059-21.348-11.789-60.557-70.436-100.09-130.99-88.3Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 116"><path d="M133.049 113.32 700 2.934V0H0v3.672c0 7.165.69 14.314 2.059 21.348 11.79 60.557 70.436 100.09 130.99 88.3Z"/></svg>`}setBreakpoint(){switch(!0){case this.containerElem.clientWidth<=414:this.componentBreakpoint=0;break;case this.containerElem.clientWidth<640:this.componentBreakpoint=414;break;default:this.componentBreakpoint=640}}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.setBreakpoint())),this.updateComplete.then((()=>{this.setBreakpoint(),this.resizeObserver.observe(this.containerElem)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.containerElem)}renderTopBrandshape(){return t`<div class="relative" part="shape-top">${1===this.shapes.length?t`<div class="relative">${this.getSvg(this.componentBreakpoint,"top")}<div part="content" class="absolute bottom-0 right-0 flex items-end w-2/5 h-2/3 px-6 py-4"><slot></slot></div></div>`:this.getSvg(this.componentBreakpoint,"top")} ${this.renderWhitespaceFix("top")}</div>`}renderMiddleBrandshape(){return t`<div class="${r({0:"px-6 py-4",414:"px-10 py-8",640:"px-10 py-8"}[this.componentBreakpoint],"w-full block relative")}"><div part="shape-middle" class="${r({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white","border-white":"bg-transparent","border-primary":"bg-transparent",image:"bg-transparent"}[this.variant],"w-full block absolute h-full top-0 left-0 z-0")}"></div><div class="z-10 relative" part="content"><slot></slot></div></div>`}renderBottomBrandshape(){return t`<div class="relative" part="shape-bottom">${this.getSvg(this.componentBreakpoint,"bottom")}${this.renderWhitespaceFix("bottom")}</div>`}renderWhitespaceFix(e){return t`<div class="${r({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white","border-white":"bg-transparent","border-primary":"bg-transparent",image:"bg-transparent"}[this.variant],{top:"bottom-0",bottom:"top-0"}[e],"block absolute left-0 w-full h-[1px]")}"></div>`}renderSkewedBorder(){return t`<div class="${r("border-primary"===this.variant?"container--outline-primary":"","border-white"===this.variant?"container--outline-white":"","container--stylized bg-transparent py-10 relative z-10 border-0;")}">${this.renderTopBrandshape()} ${this.renderMiddleBrandshape()} ${this.renderBottomBrandshape()}</div>`}renderSkewedImage(){return t`<div class="container--stylized bg-transparent py-10 relative z-10 border-0;"><div class="image-wrapper"><slot name="image"></slot></div>${this.renderTopBrandshape()} ${this.renderMiddleBrandshape()} ${this.renderBottomBrandshape()}</div>`}renderShapes(){return t`${this.shapes.includes("top")?this.renderTopBrandshape():""} ${this.shapes.includes("middle")?this.renderMiddleBrandshape():""} ${this.shapes.includes("bottom")?this.renderBottomBrandshape():""}`}render(){const e=this.variant.startsWith("border-"),i="image"===this.variant;return t`<div class="${r({"neutral-100":"fill-neutral-100",primary:"fill-primary",white:"fill-white","border-white":"fill-transparent","border-primary":"fill-transparent",image:"fill-transparent"}[this.variant])}" part="base">${e?this.renderSkewedBorder():""} ${i?this.renderSkewedImage():""} ${e||i?"":this.renderShapes()}<slot></slot></div>`}};c.styles=[i,e.styles,a`:host{display:block}.container--outline-primary::before{--internal-border-color:rgb(var(--sd-color-primary, 0 53 142));--internal-border-width:2px}.container--outline-white::before{--internal-border-color:var(--sd-color-white, white);--internal-border-width:2px}.container--stylized::before{position:absolute;inset:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);bottom:var(--sd-spacing-0,0);right:var(--sd-spacing-0,0);left:var(--sd-spacing-0,0);z-index:-1;border-style:solid;content:'';color:var(--internal-color,#000);border-color:var(--internal-border-color,#000);border-width:var(--internal-border-width,0);border-radius:0 60px;margin-bottom:calc(21.256% / 2);margin-top:calc(21.256% / 2);transform:skewY(-11deg)}.image-wrapper{position:absolute;top:var(--sd-spacing-0,0);left:var(--sd-spacing-0,0);z-index:10;width:100%;overflow:hidden;height:-webkit-fill-available;margin-bottom:calc(21.256% / 2);margin-top:calc(21.256% / 2);border-radius:0 60px;transform:skewY(-11deg)}slot[name=image]::slotted(img){height:100%;width:100%;transform-origin:top left;-o-object-fit:cover;object-fit:cover;transform:skewY(11deg)}@media (min-width:414px){.container--stylized::before,.image-wrapper{border-radius:0 72px}}@media (min-width:640px){.container--stylized::before,.image-wrapper{border-radius:0 84px}}`],h([s("[part=base]")],c.prototype,"containerElem",2),h([o({type:String})],c.prototype,"variant",2),h([o({type:Array})],c.prototype,"shapes",2),h([p()],c.prototype,"componentBreakpoint",2),c=h([n("sd-3-13-0-brandshape")],c);export{c as default};
1
+ import{S as e,x as t,t as r,c as i,i as a,e as s,n as o,a as n}from"./solid-components2.js";import{r as p}from"./state.js";var d=Object.defineProperty,l=Object.getOwnPropertyDescriptor,h=(e,t,r,i)=>{for(var a,s=i>1?void 0:i?l(t,r):t,o=e.length-1;o>=0;o--)(a=e[o])&&(s=(i?a(t,r,s):a(s))||s);return i&&s&&d(t,r,s),s};let c=class extends e{constructor(){super(...arguments),this.variant="primary",this.shapes=["top","middle","bottom"],this.componentBreakpoint=0}getSvg(e,t){return{0:this.smallSvg(t),414:this.mediumSvg(t),640:this.largeSvg(t)}[e]}largeSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M610.777 1.393.001 120.146 0 123h700.001V74.79c0-4.797-.462-9.585-1.381-14.294-7.909-40.537-47.237-66.998-87.843-59.103Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 123"><path d="M89.224 121.607 700 2.854 700.001 0h-700L0 48.21c0 4.797.463 9.584 1.381 14.294 7.909 40.537 47.237 66.998 87.843 59.103Z"/></svg>`}mediumSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 119"><path d="M597.75 1.6 0 118.046V121h700V85.872c0-5.509-.53-11.006-1.583-16.413-9.063-46.543-54.133-76.924-100.667-67.86Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M102.25 119.4 700 2.954V0H0v35.128c0 5.509.53 11.006 1.583 16.413 9.063 46.543 54.134 76.924 100.667 67.859Z"/></svg>`}smallSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 113"><path d="M566.951 2.08 0 112.466v2.934h700v-3.672c0-7.166-.689-14.314-2.059-21.348-11.789-60.557-70.436-100.09-130.99-88.3Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 116"><path d="M133.049 113.32 700 2.934V0H0v3.672c0 7.165.69 14.314 2.059 21.348 11.79 60.557 70.436 100.09 130.99 88.3Z"/></svg>`}setBreakpoint(){switch(!0){case this.containerElem.clientWidth<=414:this.componentBreakpoint=0;break;case this.containerElem.clientWidth<640:this.componentBreakpoint=414;break;default:this.componentBreakpoint=640}}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.setBreakpoint())),this.updateComplete.then((()=>{this.setBreakpoint(),this.resizeObserver.observe(this.containerElem)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.containerElem)}renderTopBrandshape(){return t`<div class="relative" part="shape-top">${1===this.shapes.length?t`<div class="relative">${this.getSvg(this.componentBreakpoint,"top")}<div part="content" class="absolute bottom-0 right-0 flex items-end w-2/5 h-2/3 px-6 py-4"><slot></slot></div></div>`:this.getSvg(this.componentBreakpoint,"top")} ${this.renderWhitespaceFix("top")}</div>`}renderMiddleBrandshape(){return t`<div class="${r({0:"px-6 py-4",414:"px-10 py-8",640:"px-10 py-8"}[this.componentBreakpoint],"w-full block relative")}"><div part="shape-middle" class="${r({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white","border-white":"bg-transparent","border-primary":"bg-transparent",image:"bg-transparent"}[this.variant],"w-full block absolute h-full top-0 left-0 z-0")}"></div><div class="z-10 relative" part="content"><slot></slot></div></div>`}renderBottomBrandshape(){return t`<div class="relative" part="shape-bottom">${this.getSvg(this.componentBreakpoint,"bottom")}${this.renderWhitespaceFix("bottom")}</div>`}renderWhitespaceFix(e){return t`<div class="${r({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white","border-white":"bg-transparent","border-primary":"bg-transparent",image:"bg-transparent"}[this.variant],{top:"bottom-0",bottom:"top-0"}[e],"block absolute left-0 w-full h-[1px]")}"></div>`}renderSkewedBorder(){return t`<div class="${r("border-primary"===this.variant?"container--outline-primary":"","border-white"===this.variant?"container--outline-white":"","container--stylized bg-transparent py-10 relative z-10 border-0;")}">${this.renderTopBrandshape()} ${this.renderMiddleBrandshape()} ${this.renderBottomBrandshape()}</div>`}renderSkewedImage(){return t`<div class="container--stylized bg-transparent py-10 relative z-10 border-0;"><div class="image-wrapper"><slot name="image"></slot></div>${this.renderTopBrandshape()} ${this.renderMiddleBrandshape()} ${this.renderBottomBrandshape()}</div>`}renderShapes(){return t`${this.shapes.includes("top")?this.renderTopBrandshape():""} ${this.shapes.includes("middle")?this.renderMiddleBrandshape():""} ${this.shapes.includes("bottom")?this.renderBottomBrandshape():""}`}render(){const e=this.variant.startsWith("border-"),i="image"===this.variant;return t`<div class="${r({"neutral-100":"fill-neutral-100",primary:"fill-primary",white:"fill-white","border-white":"fill-transparent","border-primary":"fill-transparent",image:"fill-transparent"}[this.variant])}" part="base">${e?this.renderSkewedBorder():""} ${i?this.renderSkewedImage():""} ${e||i?"":this.renderShapes()}<slot></slot></div>`}};c.styles=[i,e.styles,a`:host{display:block}.container--outline-primary::before{--internal-border-color:rgb(var(--sd-color-primary, 0 53 142));--internal-border-width:2px}.container--outline-white::before{--internal-border-color:var(--sd-color-white, white);--internal-border-width:2px}.container--stylized::before{position:absolute;inset:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);bottom:var(--sd-spacing-0,0);right:var(--sd-spacing-0,0);left:var(--sd-spacing-0,0);z-index:-1;border-style:solid;content:'';color:var(--internal-color,#000);border-color:var(--internal-border-color,#000);border-width:var(--internal-border-width,0);border-radius:0 60px;margin-bottom:calc(21.256% / 2);margin-top:calc(21.256% / 2);transform:skewY(-11deg)}.image-wrapper{position:absolute;top:var(--sd-spacing-0,0);left:var(--sd-spacing-0,0);z-index:10;width:100%;overflow:hidden;height:-webkit-fill-available;margin-bottom:calc(21.256% / 2);margin-top:calc(21.256% / 2);border-radius:0 60px;transform:skewY(-11deg)}slot[name=image]::slotted(img){height:100%;width:100%;transform-origin:top left;-o-object-fit:cover;object-fit:cover;transform:skewY(11deg)}@media (min-width:414px){.container--stylized::before,.image-wrapper{border-radius:0 72px}}@media (min-width:640px){.container--stylized::before,.image-wrapper{border-radius:0 84px}}`],h([s("[part=base]")],c.prototype,"containerElem",2),h([o({type:String})],c.prototype,"variant",2),h([o({type:Array})],c.prototype,"shapes",2),h([p()],c.prototype,"componentBreakpoint",2),c=h([n("sd-3-14-1-brandshape")],c);export{c as default};
@@ -1 +1 @@
1
- import"./spinner.js";import{S as t,t as e,c as r,i,e as o,n as a,a as s}from"./solid-components2.js";import{F as n,v as l}from"./form.js";import{H as d}from"./slot.js";import{s as p,n as h}from"./static.js";import{o as c}from"./if-defined.js";import{r as m}from"./state.js";import{o as u}from"./query-assigned-elements.js";import{w as b}from"./watch.js";var v=Object.defineProperty,y=Object.getOwnPropertyDescriptor,f=(t,e,r,i)=>{for(var o,a=i>1?void 0:i?y(e,r):e,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(i?o(e,r,a):o(a))||a);return i&&a&&v(e,r,a),a};let g=class extends t{constructor(){super(...arguments),this.formControlController=new n(this,{form:t=>{if(t.hasAttribute("form")){const e=t.getRootNode(),r=t.getAttribute("form");return e.getElementById(r)}return t.closest("form")}}),this.hasSlotController=new d(this,"[default]","icon-left","icon-right"),this.invalid=!1,this.title="",this.variant="primary",this.inverted=!1,this.size="lg",this.disabled=!1,this.loading=!1,this.type="button",this.name="",this.value="",this.href=""}get validity(){return this.isButton()?this.button.validity:l}get validationMessage(){return this.isButton()?this.button.validationMessage:""}firstUpdated(){this.isButton()&&this.formControlController.updateValidity()}handleBlur(){this.emit("sd-blur")}handleFocus(){this.emit("sd-focus")}handleClick(t){if(this.disabled||this.loading)return t.preventDefault(),void t.stopPropagation();"submit"===this.type&&this.formControlController.submit(this),"reset"===this.type&&this.formControlController.reset(this)}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}isButton(){return!this.href}isLink(){return!!this.href}handleDisabledChange(){this.isButton()&&this.formControlController.setValidity(this.disabled)}click(){this.button.click()}focus(t){this.button.focus(t)}blur(){this.button.blur()}checkValidity(){return!this.isButton()||this.button.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return!this.isButton()||this.button.reportValidity()}setCustomValidity(t){this.isButton()&&(this.button.setCustomValidity(t),this.formControlController.updateValidity())}render(){const t=this.isLink(),r=t?p`a`:p`button`,i={label:this.hasSlotController.test("[default]"),"icon-left":this.hasSlotController.test("icon-left"),"icon-right":this.hasSlotController.test("icon-right"),"icon-only":this._iconsInDefaultSlot.length>0};return h`<${r} part="base" class="${e("font-md leading-[calc(var(--tw-varspacing)-2px)] no-underline\n w-full h-varspacing whitespace-nowrap align-middle inline-flex items-stretch justify-center\n border transition-colors duration-200 ease-in-out rounded-default\n select-none cursor-[inherit]",this.inverted?"focus-visible:focus-outline-inverted":"focus-visible:focus-outline",this.loading&&"relative cursor-wait",this.disabled&&"cursor-not-allowed",i["icon-only"]&&"px-0 w-varspacing",{sm:"text-sm varspacing-8 px-4",md:"text-base varspacing-10 px-4",lg:"text-base varspacing-12 px-4"}[this.size],{primary:this.inverted?"text-primary bg-white border-transparent\n hover:text-primary-500 hover:bg-primary-100\n active:text-primary-800 active:bg-primary-200\n disabled:bg-neutral-600 disabled:text-white":"text-white bg-primary border-transparent\n hover:text-primary-100 hover:bg-primary-500\n active:text-primary-200 active:bg-primary-800\n disabled:bg-neutral-500",secondary:this.inverted?"text-white border-white\n hover:text-primary-100 hover:bg-primary-500 hover:border-primary-100\n active:text-primary-200 active:bg-primary-800 active:border-primary-200\n disabled:text-neutral-600 disabled:border-neutral-600":"text-primary border-primary\n hover:text-primary-500 hover:border-primary-500 hover:bg-primary-100\n active:text-primary-800 active:border-primary-800 active:bg-primary-200\n disabled:text-neutral-500 disabled:border-neutral-500",tertiary:this.inverted?"text-white border-transparent\n hover:text-primary-100 hover:bg-primary-500\n active:text-primary-200 active:bg-primary-800\n disabled:text-neutral-600":"text-primary border-transparent\n hover:text-primary-500 hover:bg-primary-100\n active:text-primary-800 active:bg-primary-200\n disabled:text-neutral-500",cta:`text-white bg-accent-500 border-transparent\n hover:bg-accent-550\n active:bg-accent-700\n ${this.inverted?"disabled:bg-neutral-600":"disabled:bg-neutral-500"} disabled:text-white`}[this.variant])}" ?disabled="${c(t?void 0:this.disabled)}" type="${c(t?void 0:this.type)}" title="${this.title}" name="${c(t?void 0:this.name)}" value="${c(t?void 0:this.value)}" href="${c(t?this.href:void 0)}" target="${c(t?this.target:void 0)}" download="${c(t?this.download:void 0)}" rel="${c(t&&this.target?"noreferrer noopener":void 0)}" role="${c(t?void 0:"button")}" aria-disabled="${this.disabled?"true":"false"}" tabindex="${this.disabled?"-1":"0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton()?this.handleInvalid:null}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${e("flex flex-auto items-center pointer-events-none",i["icon-only"]&&"hidden",this.loading&&"invisible",i["icon-left"]&&{sm:"mr-1",md:"mr-2",lg:"mr-2"}[this.size])}"></slot><slot part="label" class="${e(i["icon-only"]?"flex flex-auto items-center pointer-events-none":"inline-block",this.loading&&"invisible")}"></slot><slot name="icon-right" part="icon-right" class="${e("flex flex-auto items-center pointer-events-none",this.loading&&"invisible",i["icon-only"]&&"hidden",i["icon-right"]&&{sm:"ml-1",md:"ml-2",lg:"ml-2"}[this.size])}"></slot>${this.loading?h`<sd-3-13-0-spinner class="${e("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-3-13-0-spinner>`:""}</${r}>`}};g.styles=[r,t.styles,i`:host{position:relative;display:inline-block;width:var(--sd-spacing-auto,auto);cursor:pointer}sd-3-13-0-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-3-13-0-badge){pointer-events:none;position:absolute;top:var(--sd-spacing-0,0);right:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;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))!important}::slotted(sd-3-13-0-icon),sd-3-13-0-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`],f([o("a, button")],g.prototype,"button",2),f([u({selector:"sd-3-13-0-icon"})],g.prototype,"_iconsInDefaultSlot",2),f([m()],g.prototype,"invalid",2),f([a()],g.prototype,"title",2),f([a({reflect:!0})],g.prototype,"variant",2),f([a({type:Boolean,reflect:!0})],g.prototype,"inverted",2),f([a({reflect:!0})],g.prototype,"size",2),f([a({type:Boolean,reflect:!0})],g.prototype,"disabled",2),f([a({type:Boolean,reflect:!0})],g.prototype,"loading",2),f([a()],g.prototype,"type",2),f([a()],g.prototype,"name",2),f([a()],g.prototype,"value",2),f([a()],g.prototype,"href",2),f([a()],g.prototype,"target",2),f([a()],g.prototype,"download",2),f([a()],g.prototype,"form",2),f([a({attribute:"formaction"})],g.prototype,"formAction",2),f([a({attribute:"formenctype"})],g.prototype,"formEnctype",2),f([a({attribute:"formmethod"})],g.prototype,"formMethod",2),f([a({attribute:"formnovalidate",type:Boolean})],g.prototype,"formNoValidate",2),f([a({attribute:"formtarget"})],g.prototype,"formTarget",2),f([b("disabled",{waitUntilFirstUpdate:!0})],g.prototype,"handleDisabledChange",1),g=f([s("sd-3-13-0-button")],g);export{g as default};
1
+ import"./spinner.js";import{S as t,t as e,c as r,i,e as o,n as a,a as s}from"./solid-components2.js";import{F as n,v as l}from"./form.js";import{H as d}from"./slot.js";import{s as p,n as h}from"./static.js";import{o as c}from"./if-defined.js";import{r as m}from"./state.js";import{o as u}from"./query-assigned-elements.js";import{w as b}from"./watch.js";var v=Object.defineProperty,y=Object.getOwnPropertyDescriptor,f=(t,e,r,i)=>{for(var o,a=i>1?void 0:i?y(e,r):e,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(i?o(e,r,a):o(a))||a);return i&&a&&v(e,r,a),a};let g=class extends t{constructor(){super(...arguments),this.formControlController=new n(this,{form:t=>{if(t.hasAttribute("form")){const e=t.getRootNode(),r=t.getAttribute("form");return e.getElementById(r)}return t.closest("form")}}),this.hasSlotController=new d(this,"[default]","icon-left","icon-right"),this.invalid=!1,this.title="",this.variant="primary",this.inverted=!1,this.size="lg",this.disabled=!1,this.loading=!1,this.type="button",this.name="",this.value="",this.href=""}get validity(){return this.isButton()?this.button.validity:l}get validationMessage(){return this.isButton()?this.button.validationMessage:""}firstUpdated(){this.isButton()&&this.formControlController.updateValidity()}handleBlur(){this.emit("sd-blur")}handleFocus(){this.emit("sd-focus")}handleClick(t){if(this.disabled||this.loading)return t.preventDefault(),void t.stopPropagation();"submit"===this.type&&this.formControlController.submit(this),"reset"===this.type&&this.formControlController.reset(this)}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}isButton(){return!this.href}isLink(){return!!this.href}handleDisabledChange(){this.isButton()&&this.formControlController.setValidity(this.disabled)}click(){this.button.click()}focus(t){this.button.focus(t)}blur(){this.button.blur()}checkValidity(){return!this.isButton()||this.button.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return!this.isButton()||this.button.reportValidity()}setCustomValidity(t){this.isButton()&&(this.button.setCustomValidity(t),this.formControlController.updateValidity())}render(){const t=this.isLink(),r=t?p`a`:p`button`,i={label:this.hasSlotController.test("[default]"),"icon-left":this.hasSlotController.test("icon-left"),"icon-right":this.hasSlotController.test("icon-right"),"icon-only":this._iconsInDefaultSlot.length>0};return h`<${r} part="base" class="${e("font-md leading-[calc(var(--tw-varspacing)-2px)] no-underline\n w-full h-varspacing whitespace-nowrap align-middle inline-flex items-stretch justify-center\n border transition-colors duration-200 ease-in-out rounded-default\n select-none cursor-[inherit]",this.inverted?"focus-visible:focus-outline-inverted":"focus-visible:focus-outline",this.loading&&"relative cursor-wait",this.disabled&&"cursor-not-allowed",i["icon-only"]&&"px-0 w-varspacing",{sm:"text-sm varspacing-8 px-4",md:"text-base varspacing-10 px-4",lg:"text-base varspacing-12 px-4"}[this.size],{primary:this.inverted?"text-primary bg-white border-transparent\n hover:text-primary-500 hover:bg-primary-100\n active:text-primary-800 active:bg-primary-200\n disabled:bg-neutral-600 disabled:text-white":"text-white bg-primary border-transparent\n hover:text-primary-100 hover:bg-primary-500\n active:text-primary-200 active:bg-primary-800\n disabled:bg-neutral-500",secondary:this.inverted?"text-white border-white\n hover:text-primary-100 hover:bg-primary-500 hover:border-primary-100\n active:text-primary-200 active:bg-primary-800 active:border-primary-200\n disabled:text-neutral-600 disabled:border-neutral-600":"text-primary border-primary\n hover:text-primary-500 hover:border-primary-500 hover:bg-primary-100\n active:text-primary-800 active:border-primary-800 active:bg-primary-200\n disabled:text-neutral-500 disabled:border-neutral-500",tertiary:this.inverted?"text-white border-transparent\n hover:text-primary-100 hover:bg-primary-500\n active:text-primary-200 active:bg-primary-800\n disabled:text-neutral-600":"text-primary border-transparent\n hover:text-primary-500 hover:bg-primary-100\n active:text-primary-800 active:bg-primary-200\n disabled:text-neutral-500",cta:`text-white bg-accent-500 border-transparent\n hover:bg-accent-550\n active:bg-accent-700\n ${this.inverted?"disabled:bg-neutral-600":"disabled:bg-neutral-500"} disabled:text-white`}[this.variant])}" ?disabled="${c(t?void 0:this.disabled)}" type="${c(t?void 0:this.type)}" title="${this.title}" name="${c(t?void 0:this.name)}" value="${c(t?void 0:this.value)}" href="${c(t?this.href:void 0)}" target="${c(t?this.target:void 0)}" download="${c(t?this.download:void 0)}" rel="${c(t&&this.target?"noreferrer noopener":void 0)}" role="${c(t?void 0:"button")}" aria-disabled="${this.disabled?"true":"false"}" tabindex="${this.disabled?"-1":"0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton()?this.handleInvalid:null}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${e("flex flex-auto items-center pointer-events-none",i["icon-only"]&&"hidden",this.loading&&"invisible",i["icon-left"]&&{sm:"mr-1",md:"mr-2",lg:"mr-2"}[this.size])}"></slot><slot part="label" class="${e(i["icon-only"]?"flex flex-auto items-center pointer-events-none":"inline-block",this.loading&&"invisible")}"></slot><slot name="icon-right" part="icon-right" class="${e("flex flex-auto items-center pointer-events-none",this.loading&&"invisible",i["icon-only"]&&"hidden",i["icon-right"]&&{sm:"ml-1",md:"ml-2",lg:"ml-2"}[this.size])}"></slot>${this.loading?h`<sd-3-14-1-spinner class="${e("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-3-14-1-spinner>`:""}</${r}>`}};g.styles=[r,t.styles,i`:host{position:relative;display:inline-block;width:var(--sd-spacing-auto,auto);cursor:pointer}sd-3-14-1-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-3-14-1-badge){pointer-events:none;position:absolute;top:var(--sd-spacing-0,0);right:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;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))!important}::slotted(sd-3-14-1-icon),sd-3-14-1-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`],f([o("a, button")],g.prototype,"button",2),f([u({selector:"sd-3-14-1-icon"})],g.prototype,"_iconsInDefaultSlot",2),f([m()],g.prototype,"invalid",2),f([a()],g.prototype,"title",2),f([a({reflect:!0})],g.prototype,"variant",2),f([a({type:Boolean,reflect:!0})],g.prototype,"inverted",2),f([a({reflect:!0})],g.prototype,"size",2),f([a({type:Boolean,reflect:!0})],g.prototype,"disabled",2),f([a({type:Boolean,reflect:!0})],g.prototype,"loading",2),f([a()],g.prototype,"type",2),f([a()],g.prototype,"name",2),f([a()],g.prototype,"value",2),f([a()],g.prototype,"href",2),f([a()],g.prototype,"target",2),f([a()],g.prototype,"download",2),f([a()],g.prototype,"form",2),f([a({attribute:"formaction"})],g.prototype,"formAction",2),f([a({attribute:"formenctype"})],g.prototype,"formEnctype",2),f([a({attribute:"formmethod"})],g.prototype,"formMethod",2),f([a({attribute:"formnovalidate",type:Boolean})],g.prototype,"formNoValidate",2),f([a({attribute:"formtarget"})],g.prototype,"formTarget",2),f([b("disabled",{waitUntilFirstUpdate:!0})],g.prototype,"handleDisabledChange",1),g=f([s("sd-3-14-1-button")],g);export{g as default};
@@ -1 +1 @@
1
- import{S as t,x as e,c as s,i as r,a as o}from"./solid-components2.js";Object.defineProperty,Object.getOwnPropertyDescriptor;let a=class extends t{static isCarouselItem(t){return t instanceof Element&&"slide"===t.getAttribute("aria-roledescription")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group")}render(){return e`<slot></slot>`}};a.styles=[t.styles,s,r`:host{aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always;display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}::slotted(img){height:100%;width:100%;-o-object-fit:cover;object-fit:cover}`],a=((t,e,s,r)=>{for(var o,a=e,i=t.length-1;i>=0;i--)(o=t[i])&&(a=o(a)||a);return a})([o("sd-3-13-0-carousel-item")],a);export{a as default};
1
+ import{S as t,x as e,c as s,i as r,a as o}from"./solid-components2.js";Object.defineProperty,Object.getOwnPropertyDescriptor;let a=class extends t{static isCarouselItem(t){return t instanceof Element&&"slide"===t.getAttribute("aria-roledescription")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group")}render(){return e`<slot></slot>`}};a.styles=[t.styles,s,r`:host{aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always;display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}::slotted(img){height:100%;width:100%;-o-object-fit:cover;object-fit:cover}`],a=((t,e,s,r)=>{for(var o,a=e,i=t.length-1;i>=0;i--)(o=t[i])&&(a=o(a)||a);return a})([o("sd-3-14-1-carousel-item")],a);export{a as default};
@@ -1,11 +1,11 @@
1
- import"./icon.js";import{AutoplayController as e}from"./autoplay-controller.js";import{S as t,L as i,x as s,t as o,r as a,c as r,i as l,n,e as d,a as c}from"./solid-components2.js";import{p as h}from"./animate.js";import{r as p}from"./state.js";import{ScrollController as u}from"./scroll-controller.js";import{w as g}from"./watch.js";import{I as v}from"./interactive.js";import b from"./carousel-item.js";var m=Object.defineProperty,y=Object.getOwnPropertyDescriptor,f=(e,t,i,s)=>{for(var o,a=s>1?void 0:s?y(t,i):t,r=e.length-1;r>=0;r--)(o=e[r])&&(a=(s?o(t,i,a):o(a))||a);return s&&a&&m(t,i,a),a};let w=class extends t{constructor(){super(...arguments),this.variant="number",this.inverted=!1,this.loop=!1,this.autoplay=!1,this.slidesPerPage=1,this.slidesPerMove=1,this.activeSlide=0,this.pausedAutoplay=!1,this.autoplayController=new e(this,(()=>this.next())),this.scrollController=new u(this),this.slides=this.getElementsByTagName("sd-3-13-0-carousel-item"),this.intersectionObserverEntries=new Map,this.localize=new i(this),this.handleSlotChange=e=>{e.some((e=>[...e.addedNodes,...e.removedNodes].some((e=>b.isCarouselItem(e)&&!e.hasAttribute("data-clone")))))&&this.initializeSlides(),this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-label",this.localize.term("carousel"));const e=new IntersectionObserver((e=>{e.forEach((e=>{this.intersectionObserverEntries.set(e.target,e);const t=e.target;t.toggleAttribute("inert",!e.isIntersecting),t.classList.toggle("--in-view",e.isIntersecting),t.setAttribute("aria-hidden",e.isIntersecting?"false":"true")}))}),{root:this,threshold:.6});this.intersectionObserver=e,e.takeRecords().forEach((e=>{this.intersectionObserverEntries.set(e.target,e)}))}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(){this.initializeSlides(),this.mutationObserver=new MutationObserver(this.handleSlotChange),this.mutationObserver.observe(this,{childList:!0,subtree:!1})}getPageCount(){return Math.ceil(this.getSlides().length/this.slidesPerPage)}getCurrentPage(){return Math.ceil(this.activeSlide/this.slidesPerPage)}getSlides({excludeClones:e=!0}={}){return[...this.slides].filter((t=>!e||!t.hasAttribute("data-clone")))}handleKeyDown(e){if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)){const t=e.target,i="rtl"===this.localize.dir(),s=null!==t.closest('[part~="pagination-item"]'),o="ArrowDown"===e.key||!i&&"ArrowRight"===e.key||i&&"ArrowLeft"===e.key,a="ArrowUp"===e.key||!i&&"ArrowLeft"===e.key||i&&"ArrowRight"===e.key;e.preventDefault(),a&&this.previous(),o&&this.next(),"Home"===e.key&&this.goToSlide(0),"End"===e.key&&this.goToSlide(this.getSlides().length-1),s&&this.updateComplete.then((()=>{var e;const t=null==(e=this.shadowRoot)?void 0:e.querySelector('[part~="pagination-item--active"]');t&&t.focus()}))}}handleScrollEnd(){const e=this.getSlides(),t=[...this.intersectionObserverEntries.values()].find((e=>e.isIntersecting));if(this.loop&&null!=t&&t.target.hasAttribute("data-clone")){const e=Number(t.target.getAttribute("data-clone"));this.goToSlide(e,"auto")}else t&&(this.activeSlide=e.indexOf(t.target))}handlePausedAutoplay(){this.pausedAutoplay?this.autoplayController.controlledPause():this.autoplay&&this.autoplayController.controlledResume()}initializeSlides(){const e=this.getSlides(),t=this.intersectionObserver;if(this.intersectionObserverEntries.clear(),this.getSlides({excludeClones:!1}).forEach(((e,i)=>{t.unobserve(e),e.classList.remove("--in-view"),e.classList.remove("--is-active"),e.setAttribute("aria-label",this.localize.term("slideNum",i+1)),e.hasAttribute("data-clone")&&e.remove()})),this.loop){const t=this.slidesPerPage,i=e.slice(-t),s=e.slice(0,t);i.reverse().forEach(((t,i)=>{const s=t.cloneNode(!0);s.setAttribute("data-clone",String(e.length-i-1)),this.prepend(s)})),s.forEach(((e,t)=>{const i=e.cloneNode(!0);i.setAttribute("data-clone",String(t)),this.append(i)}))}this.getSlides({excludeClones:!1}).forEach((e=>{t.observe(e)})),this.goToSlide(this.activeSlide,"auto")}handelSlideChange(){const e=this.getSlides();e.forEach(((e,t)=>{e.classList.toggle("--is-active",t===this.activeSlide)})),this.hasUpdated&&this.emit("sd-slide-change",{detail:{index:this.activeSlide,slide:e[this.activeSlide]}})}handleSlidesPerMoveChange(){const e=this.getSlides({excludeClones:!1}),t=this.slidesPerMove;e.forEach(((e,i)=>{Math.abs(i-t)%t==0?e.style.removeProperty("scroll-snap-align"):e.style.setProperty("scroll-snap-align","none")}))}handleAutoplayChange(){this.autoplayController.stop(),this.autoplay&&!this.pausedAutoplay&&this.autoplayController.start(3e3)}previous(e="smooth"){let t=this.activeSlide||this.activeSlide-this.slidesPerMove,i=!1;for(;!i&&t>0;)t-=1,i=Math.abs(t-this.slidesPerMove)%this.slidesPerMove==0;this.goToSlide(t,e)}next(e="smooth"){this.goToSlide(this.activeSlide+this.slidesPerMove,e)}goToSlide(e,t="smooth"){const{slidesPerPage:i,loop:s,scrollContainer:o}=this,a=this.getSlides(),r=this.getSlides({excludeClones:!1}),l=(e+a.length)%a.length;this.activeSlide=l;const n=function(e,t,i){return(e=>Object.is(e,-0)?0:e)(e<0?0:e>i?i:e)}
1
+ import"./icon.js";import{AutoplayController as e}from"./autoplay-controller.js";import{S as t,L as i,x as s,t as o,r,c as a,i as l,n,e as d,a as c}from"./solid-components2.js";import{p as h}from"./animate.js";import{r as p}from"./state.js";import{ScrollController as u}from"./scroll-controller.js";import{w as g}from"./watch.js";import{I as v}from"./interactive.js";import b from"./carousel-item.js";var m=Object.defineProperty,y=Object.getOwnPropertyDescriptor,f=(e,t,i,s)=>{for(var o,r=s>1?void 0:s?y(t,i):t,a=e.length-1;a>=0;a--)(o=e[a])&&(r=(s?o(t,i,r):o(r))||r);return s&&r&&m(t,i,r),r};let P=class extends t{constructor(){super(...arguments),this.variant="number",this.inverted=!1,this.loop=!1,this.autoplay=!1,this.slidesPerPage=1,this.slidesPerMove=1,this.activeSlide=0,this.currentPage=1,this.pausedAutoplay=!1,this.autoplayController=new e(this,(()=>this.next())),this.scrollController=new u(this),this.slides=this.getElementsByTagName("sd-3-14-1-carousel-item"),this.intersectionObserverEntries=new Map,this.localize=new i(this),this.handleSlotChange=e=>{e.some((e=>[...e.addedNodes,...e.removedNodes].some((e=>b.isCarouselItem(e)&&!e.hasAttribute("data-clone")))))&&this.initializeSlides(),this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-label",this.localize.term("carousel"));const e=new IntersectionObserver((e=>{e.forEach((e=>{this.intersectionObserverEntries.set(e.target,e);const t=e.target;t.toggleAttribute("inert",!e.isIntersecting),t.classList.toggle("--in-view",e.isIntersecting),t.setAttribute("aria-hidden",e.isIntersecting?"false":"true")}))}),{root:this,threshold:.6});this.intersectionObserver=e,e.takeRecords().forEach((e=>{this.intersectionObserverEntries.set(e.target,e)}))}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(){this.initializeSlides(),this.mutationObserver=new MutationObserver(this.handleSlotChange),this.mutationObserver.observe(this,{childList:!0,subtree:!1})}static getPageCount(e,t,i){return Math.ceil((e-t)/i)+1>0?Math.ceil((e-t)/i)+1:1}static getCurrentPage(e,t,i,s){return Math.ceil((e-i)/s)-Math.ceil((e-i-t)/s)+1}getSlides({excludeClones:e=!0}={}){return[...this.slides].filter((t=>!e||!t.hasAttribute("data-clone")))}handleKeyDown(e){if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)){const t=e.target,i="rtl"===this.localize.dir(),s=null!==t.closest('[part~="pagination-item"]'),o="ArrowDown"===e.key||!i&&"ArrowRight"===e.key||i&&"ArrowLeft"===e.key,r="ArrowUp"===e.key||!i&&"ArrowLeft"===e.key||i&&"ArrowRight"===e.key;e.preventDefault(),r&&this.previous(),o&&this.next(),"Home"===e.key&&this.goToSlide(0),"End"===e.key&&this.goToSlide(this.getSlides().length-1),s&&this.updateComplete.then((()=>{var e;const t=null==(e=this.shadowRoot)?void 0:e.querySelector('[part~="pagination-item--active"]');t&&t.focus()}))}}handleScrollEnd(){const e=this.getSlides(),t=[...this.intersectionObserverEntries.values()].find((e=>e.isIntersecting));if(this.loop&&null!=t&&t.target.hasAttribute("data-clone")){const e=Number(t.target.getAttribute("data-clone"));this.goToSlide(e,"auto")}else t&&(this.activeSlide=e.indexOf(t.target))}handlePausedAutoplay(){this.pausedAutoplay?this.autoplayController.controlledPause():this.autoplay&&this.autoplayController.controlledResume()}initializeSlides(){const e=this.getSlides(),t=this.intersectionObserver;if(this.intersectionObserverEntries.clear(),this.getSlides({excludeClones:!1}).forEach(((e,i)=>{t.unobserve(e),e.classList.remove("--in-view"),e.classList.remove("--is-active"),e.setAttribute("aria-label",this.localize.term("slideNum",i+1)),e.hasAttribute("data-clone")&&e.remove()})),this.loop){const t=this.slidesPerPage,i=e.slice(-t),s=e.slice(0,t);i.reverse().forEach(((t,i)=>{const s=t.cloneNode(!0);s.setAttribute("data-clone",String(e.length-i-1)),this.prepend(s)})),s.forEach(((e,t)=>{const i=e.cloneNode(!0);i.setAttribute("data-clone",String(t)),this.append(i)}))}this.getSlides({excludeClones:!1}).forEach((e=>{t.observe(e)})),this.goToSlide(this.activeSlide,"auto")}handelSlideChange(){this.currentPage=P.getCurrentPage(this.getSlides().length,this.activeSlide,this.slidesPerPage,this.slidesPerMove);const e=this.getSlides();e.forEach(((e,t)=>{e.classList.toggle("--is-active",t===this.activeSlide)})),this.hasUpdated&&this.emit("sd-slide-change",{detail:{index:this.activeSlide,slide:e[this.activeSlide]}}),this.currentPage>P.getPageCount(this.getSlides().length,this.slidesPerPage,this.slidesPerMove)&&this.nextTillFirst()}handleSlidesPerMoveChange(){const e=this.getSlides({excludeClones:!1}),t=this.slidesPerMove;e.forEach(((e,i)=>{Math.abs(i-t)%t==0?e.style.removeProperty("scroll-snap-align"):e.style.setProperty("scroll-snap-align","none")}))}handleAutoplayChange(){this.autoplayController.stop(),this.autoplay&&!this.pausedAutoplay&&this.autoplayController.start(3e3)}previous(e="smooth"){let t=this.activeSlide||this.activeSlide-this.slidesPerMove,i=!1;for(;!i&&t>0;)t-=1,i=Math.abs(t-this.slidesPerMove)%this.slidesPerMove==0;this.currentPage-1==0&&this.loop?this.goToSlide(this.activeSlide-this.slidesPerPage,e):this.goToSlide(t,e)}next(e="smooth"){this.currentPage+1>P.getPageCount(this.getSlides().length,this.slidesPerPage,this.slidesPerMove)&&this.loop?this.nextTillFirst(e):this.goToSlide(this.activeSlide+this.slidesPerMove,e)}nextTillFirst(e="smooth"){for(;0!==this.activeSlide;)this.goToSlide(this.activeSlide+1,e);this.currentPage=P.getCurrentPage(this.getSlides().length,this.activeSlide,this.slidesPerPage,this.slidesPerMove)}goToSlide(e,t="smooth"){const{slidesPerPage:i,loop:s,scrollContainer:o}=this,r=this.getSlides(),a=this.getSlides({excludeClones:!1}),l=(e+r.length)%r.length;this.activeSlide=l;const n=function(e,t,i){return(e=>Object.is(e,-0)?0:e)(e<0?0:e>i?i:e)}
2
2
  /**
3
3
  * @license
4
4
  * Copyright 2021 Google LLC
5
5
  * SPDX-License-Identifier: BSD-3-Clause
6
- */(e+(s?i:0),0,r.length-1),d=r[n],c=o.getBoundingClientRect(),p=d.getBoundingClientRect();o.scrollTo({left:p.left-c.left+o.scrollLeft,top:p.top-c.top+o.scrollTop,behavior:h()?"auto":t})}render(){const{scrollController:e,slidesPerPage:t}=this,i=this.getPageCount(),a=this.getCurrentPage(),r=this.loop||a>0,l=this.loop||a<i-1,n="ltr"===this.localize.dir();return s`<div part="base" class="${o("carousel h-full w-full")}"><div id="scroll-container" part="scroll-container" class="${o("carousel__slides mb-6\n grid max-h-full w-full items-center justify-items-center overflow-auto",this.inverted?"focus-visible:focus-outline-inverted":"focus-visible:focus-outline","overscroll-x-contain grid-flow-col auto-rows-[100%]\n snap-x snap-mandatory overflow-y-hidden")}" style="--slides-per-page:${this.slidesPerPage}" aria-busy="${e.scrolling?"true":"false"}" aria-atomic="true" tabindex="0" @keydown="${this.handleKeyDown}" @scrollend="${this.handleScrollEnd}"><slot></slot></div><div part="controls" class="${o("w-full flex items-center justify-center relative")}"><div part="navigation" class="${o("carousel__navigation flex items-center justify-center")}"><button part="navigation-button navigation-button--previous" id="carousel__navigation-button--previous" ?disabled="${!r}" class="${o("!mr-6 !rounded-sm sd-interactive",!r&&"sd-interactive--disabled",this.inverted?"sd-interactive--inverted":"sd-interactive--reset")}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${r?"false":"true"}" @click="${r?()=>this.previous():null}"><slot name="previous-icon"><sd-3-13-0-icon class="${o("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${n?"chevron-down":"chevron-up"}"></sd-3-13-0-icon></slot></button> ${"dot"===this.variant?s`<div part="pagination-dot" role="tablist" class="${o("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${function*(e,t){if(void 0!==e){let i=0;for(const s of e)yield t(s,i++)}}
6
+ */(e+(s?i:0),0,a.length+1),d=a[n],c=o.getBoundingClientRect(),p=d.getBoundingClientRect();o.scrollTo({left:p.left-c.left+o.scrollLeft,top:p.top-c.top+o.scrollTop,behavior:h()?"auto":t})}render(){const{scrollController:e,slidesPerPage:t}=this,i=P.getPageCount(this.getSlides().length,this.slidesPerPage,this.slidesPerMove),r=P.getCurrentPage(this.getSlides().length,this.activeSlide,this.slidesPerPage,this.slidesPerMove),a=this.loop||r>1,l=this.loop||r<i,n="ltr"===this.localize.dir();return s`<div part="base" class="${o("carousel h-full w-full")}"><div id="scroll-container" part="scroll-container" class="${o("carousel__slides mb-6\n grid max-h-full w-full items-center justify-items-center overflow-auto",this.inverted?"focus-visible:focus-outline-inverted":"focus-visible:focus-outline","overscroll-x-contain grid-flow-col auto-rows-[100%]\n snap-x snap-mandatory overflow-y-hidden")}" style="--slides-per-page:${this.slidesPerPage}" aria-busy="${e.scrolling?"true":"false"}" aria-atomic="true" tabindex="0" @keydown="${this.handleKeyDown}" @scrollend="${this.handleScrollEnd}"><slot></slot></div><div part="controls" class="${o("w-full flex items-center justify-center relative")}"><div part="navigation" class="${o("carousel__navigation flex items-center justify-center")}"><button part="navigation-button navigation-button--previous" id="carousel__navigation-button--previous" ?disabled="${!a}" class="${o("!mr-6 !rounded-sm sd-interactive",!a&&"sd-interactive--disabled",this.inverted?"sd-interactive--inverted":"sd-interactive--reset")}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${a?"false":"true"}" @click="${a?()=>this.previous():null}"><slot name="previous-icon"><sd-3-14-1-icon class="${o("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${n?"chevron-down":"chevron-up"}"></sd-3-14-1-icon></slot></button> ${"dot"===this.variant?s`<div part="pagination-dot" role="tablist" class="${o("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${function*(e,t){if(void 0!==e){let i=0;for(const s of e)yield t(s,i++)}}
7
7
  /**
8
8
  * @license
9
9
  * Copyright 2021 Google LLC
10
10
  * SPDX-License-Identifier: BSD-3-Clause
11
- */(function*(e,t,i=1){const s=void 0===t?0:e;t??(t=e);for(let e=s;i>0?e<t:t<e;e+=i)yield e}(i),(e=>{const r=e===a;return s`<button part="pagination-item ${r?"pagination-item--active":""}" class="${o("carousel__pagination-item","block cursor-pointer bg-none border-0 rounded-full",r?"bg-accent":"",this.inverted?"focus-within:focus-outline-inverted":"focus-within:focus-outline")}" role="tab" tabindex="0" aria-selected="${r?"true":"false"}" aria-label="${this.localize.term("goToSlide",e+1,i)}" @click="${()=>this.goToSlide(e*t)}" @keydown="${this.handleKeyDown}"><span class="${o("h-4 w-4 block border hover:border-primary-500 rounded-full",this.inverted?"border-white hover:border-primary-500":"border-primary",r&&"bg-accent border-none",r?this.inverted?"hover:bg-accent-300":"hover:bg-accent-550":"")}"></span></button>`}))}</div>`:s`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${o("w-5 text-center border-b-2 border-accent",this.inverted?"text-white":"text-black")}">${a+1}</span> <span part="pagination-divider" class="${o("scale-y-[1.5]","text-center",this.inverted?"text-white":"text-black")}">/</span> <span part="pagination-item" class="${o("w-5 text-center",this.inverted?"text-white":"text-black")}">${i}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!l}" class="${o("!ml-6 !rounded-sm sd-interactive ",!l&&"sd-interactive--disabled",this.inverted?"sd-interactive--inverted":"sd-interactive--reset")}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${l?"false":"true"}" @click="${l?()=>{console.log("click-next"),this.next()}:null}"><slot name="next-icon"><sd-3-13-0-icon class="${o("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${n?"chevron-up":"chevron-down"}"></sd-3-13-0-icon></slot></button></div><button class="${o("ml-6 !rounded-sm","!absolute !right-0 sd-interactive",this.inverted?"sd-interactive--inverted":"sd-interactive--reset",!this.autoplay&&"!hidden")}" part="autoplay-controls" @click="${()=>this.pausedAutoplay=!this.pausedAutoplay}"><slot name="autoplay-start" class="${o(this.pausedAutoplay?"":"hidden")}"><sd-3-13-0-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-3-13-0-icon></slot><slot name="autoplay-pause" class="${o(this.pausedAutoplay?"hidden":"")}"><sd-3-13-0-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-3-13-0-icon></slot></button></div></div>`}};w.styles=[t.styles,a(v),r,l`:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-3-13-0-button::part(label){pointer-events:none;display:flex;flex:1 1 auto;align-items:center}`],f([n({type:String,reflect:!0})],w.prototype,"variant",2),f([n({type:Boolean,reflect:!0})],w.prototype,"inverted",2),f([n({type:Boolean,reflect:!0})],w.prototype,"loop",2),f([n({type:Boolean,reflect:!0})],w.prototype,"autoplay",2),f([n({type:Number,attribute:"slides-per-page"})],w.prototype,"slidesPerPage",2),f([n({type:Number,attribute:"slides-per-move"})],w.prototype,"slidesPerMove",2),f([d("slot:not([name])")],w.prototype,"defaultSlot",2),f([d(".carousel__slides")],w.prototype,"scrollContainer",2),f([d(".carousel__pagination")],w.prototype,"paginationContainer",2),f([p()],w.prototype,"activeSlide",2),f([p()],w.prototype,"pausedAutoplay",2),f([g("pausedAutoplay")],w.prototype,"handlePausedAutoplay",1),f([g("loop",{waitUntilFirstUpdate:!0}),g("slidesPerPage",{waitUntilFirstUpdate:!0})],w.prototype,"initializeSlides",1),f([g("activeSlide")],w.prototype,"handelSlideChange",1),f([g("slidesPerMove")],w.prototype,"handleSlidesPerMoveChange",1),f([g("autoplay")],w.prototype,"handleAutoplayChange",1),w=f([c("sd-3-13-0-carousel")],w);export{w as default};
11
+ */(function*(e,t,i=1){const s=void 0===t?0:e;t??(t=e);for(let e=s;i>0?e<t:t<e;e+=i)yield e}(i),(e=>{const a=e+1===r;return s`<button part="pagination-item ${a?"pagination-item--active":""}" class="${o("carousel__pagination-item","block cursor-pointer bg-none border-0 rounded-full",a?"bg-accent":"",this.inverted?"focus-within:focus-outline-inverted":"focus-within:focus-outline")}" role="tab" tabindex="0" aria-selected="${a?"true":"false"}" aria-label="${this.localize.term("goToSlide",e+1,i)}" @click="${()=>this.goToSlide(e*t)}" @keydown="${this.handleKeyDown}"><span class="${o("h-4 w-4 block border hover:border-primary-500 rounded-full",this.inverted?"border-white hover:border-primary-500":"border-primary",a&&"bg-accent border-none",a?this.inverted?"hover:bg-accent-300":"hover:bg-accent-550":"")}"></span></button>`}))}</div>`:s`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${o("w-5 text-center border-b-2 border-accent",this.inverted?"text-white":"text-black")}">${r}</span> <span part="pagination-divider" class="${o("scale-y-[1.5]","text-center",this.inverted?"text-white":"text-black")}">/</span> <span part="pagination-item" class="${o("w-5 text-center",this.inverted?"text-white":"text-black")}">${i}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!l}" class="${o("!ml-6 !rounded-sm sd-interactive ",!l&&"sd-interactive--disabled",this.inverted?"sd-interactive--inverted":"sd-interactive--reset")}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${l?"false":"true"}" @click="${l?()=>{this.next()}:null}"><slot name="next-icon"><sd-3-14-1-icon class="${o("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${n?"chevron-up":"chevron-down"}"></sd-3-14-1-icon></slot></button></div><button class="${o("ml-6 !rounded-sm","!absolute !right-0 sd-interactive",this.inverted?"sd-interactive--inverted":"sd-interactive--reset",!this.autoplay&&"!hidden")}" part="autoplay-controls" @click="${()=>this.pausedAutoplay=!this.pausedAutoplay}"><slot name="autoplay-start" class="${o(this.pausedAutoplay?"":"hidden")}"><sd-3-14-1-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-3-14-1-icon></slot><slot name="autoplay-pause" class="${o(this.pausedAutoplay?"hidden":"")}"><sd-3-14-1-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-3-14-1-icon></slot></button></div></div>`}};P.styles=[t.styles,r(v),a,l`:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-3-14-1-button::part(label){pointer-events:none;display:flex;flex:1 1 auto;align-items:center}`],f([n({type:String,reflect:!0})],P.prototype,"variant",2),f([n({type:Boolean,reflect:!0})],P.prototype,"inverted",2),f([n({type:Boolean,reflect:!0})],P.prototype,"loop",2),f([n({type:Boolean,reflect:!0})],P.prototype,"autoplay",2),f([n({type:Number,attribute:"slides-per-page"})],P.prototype,"slidesPerPage",2),f([n({type:Number,attribute:"slides-per-move"})],P.prototype,"slidesPerMove",2),f([d("slot:not([name])")],P.prototype,"defaultSlot",2),f([d(".carousel__slides")],P.prototype,"scrollContainer",2),f([d(".carousel__pagination")],P.prototype,"paginationContainer",2),f([p()],P.prototype,"activeSlide",2),f([p()],P.prototype,"currentPage",2),f([p()],P.prototype,"pausedAutoplay",2),f([g("pausedAutoplay")],P.prototype,"handlePausedAutoplay",1),f([g("loop",{waitUntilFirstUpdate:!0}),g("slidesPerPage",{waitUntilFirstUpdate:!0})],P.prototype,"initializeSlides",1),f([g("activeSlide")],P.prototype,"handelSlideChange",1),f([g("slidesPerMove")],P.prototype,"handleSlidesPerMoveChange",1),f([g("autoplay")],P.prototype,"handleAutoplayChange",1),P=f([c("sd-3-14-1-carousel")],P);export{P as default};
@@ -1 +1 @@
1
- import"./icon.js";import{S as t,x as e,t as s,c as o,i as l,n as a,a as i}from"./solid-components2.js";import{H as r}from"./slot.js";import{w as n}from"./watch.js";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,d=(t,e,s,o)=>{for(var l,a=o>1?void 0:o?h(e,s):e,i=t.length-1;i>=0;i--)(l=t[i])&&(a=(o?l(e,s,a):l(a))||a);return o&&a&&c(e,s,a),a};let b=class extends t{constructor(){super(...arguments),this.hasSlotController=new r(this,"label"),this.label="",this.size="lg",this.orientation="vertical"}getAllCheckboxes(){return[...this.querySelectorAll("sd-3-13-0-checkbox")]}async syncCheckboxElements(){const t=this.getAllCheckboxes();await Promise.all(t.map((async t=>{await t.updateComplete,t.size=this.size}))),t.some((t=>t.checked))||(t[0].tabIndex=0)}syncCheckboxes(){customElements.get("sd-3-13-0-checkbox")?this.syncCheckboxElements():customElements.whenDefined("sd-3-13-0-checkbox").then((()=>this.syncCheckboxes()))}handleSizeChange(){this.syncCheckboxes()}handleInvalid(){this.syncCheckboxes()}render(){const t=this.hasSlotController.test("label"),o=!!this.label||t,l=e`<slot @slotchange="${this.syncCheckboxes}"></slot>`;return e`<fieldset part="form-control" class="${s("border-0 p-0 m-0",{sm:"text-sm",lg:"text-base"}[this.size])}" role="group" aria-labelledby="label"><label part="form-control-label" id="label" class="${s("mb-2 p-0 font-bold leading-normal text-black",o?"flex":"hidden")}" aria-hidden="${o?"false":"true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${s({vertical:"flex flex-col",horizontal:"flex flex-row"}[this.orientation])}">${l}</div></fieldset>`}};b.styles=[o,t.styles,l`:host{display:block}:host([orientation=vertical]) ::slotted(sd-3-13-0-checkbox){margin-bottom:var(--sd-spacing-2,.5rem);display:flex}:host([orientation=vertical]) ::slotted(sd-3-13-0-checkbox:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-3-13-0-checkbox){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-3-13-0-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-3-13-0-checkbox){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-3-13-0-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}`],d([a()],b.prototype,"label",2),d([a({reflect:!0})],b.prototype,"size",2),d([a({reflect:!0})],b.prototype,"orientation",2),d([n("size",{waitUntilFirstUpdate:!0})],b.prototype,"handleSizeChange",1),d([n("invalid",{waitUntilFirstUpdate:!0})],b.prototype,"handleInvalid",1),b=d([i("sd-3-13-0-checkbox-group")],b);export{b as default};
1
+ import"./icon.js";import{S as t,x as e,t as s,c as o,i as l,n as a,a as i}from"./solid-components2.js";import{H as r}from"./slot.js";import{w as n}from"./watch.js";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,d=(t,e,s,o)=>{for(var l,a=o>1?void 0:o?h(e,s):e,i=t.length-1;i>=0;i--)(l=t[i])&&(a=(o?l(e,s,a):l(a))||a);return o&&a&&c(e,s,a),a};let b=class extends t{constructor(){super(...arguments),this.hasSlotController=new r(this,"label"),this.label="",this.size="lg",this.orientation="vertical"}getAllCheckboxes(){return[...this.querySelectorAll("sd-3-14-1-checkbox")]}async syncCheckboxElements(){const t=this.getAllCheckboxes();await Promise.all(t.map((async t=>{await t.updateComplete,t.size=this.size}))),t.some((t=>t.checked))||(t[0].tabIndex=0)}syncCheckboxes(){customElements.get("sd-3-14-1-checkbox")?this.syncCheckboxElements():customElements.whenDefined("sd-3-14-1-checkbox").then((()=>this.syncCheckboxes()))}handleSizeChange(){this.syncCheckboxes()}handleInvalid(){this.syncCheckboxes()}render(){const t=this.hasSlotController.test("label"),o=!!this.label||t,l=e`<slot @slotchange="${this.syncCheckboxes}"></slot>`;return e`<fieldset part="form-control" class="${s("border-0 p-0 m-0",{sm:"text-sm",lg:"text-base"}[this.size])}" role="group" aria-labelledby="label"><label part="form-control-label" id="label" class="${s("mb-2 p-0 font-bold leading-normal text-black",o?"flex":"hidden")}" aria-hidden="${o?"false":"true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${s({vertical:"flex flex-col",horizontal:"flex flex-row"}[this.orientation])}">${l}</div></fieldset>`}};b.styles=[o,t.styles,l`:host{display:block}:host([orientation=vertical]) ::slotted(sd-3-14-1-checkbox){margin-bottom:var(--sd-spacing-2,.5rem);display:flex}:host([orientation=vertical]) ::slotted(sd-3-14-1-checkbox:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-3-14-1-checkbox){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-3-14-1-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-3-14-1-checkbox){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-3-14-1-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}`],d([a()],b.prototype,"label",2),d([a({reflect:!0})],b.prototype,"size",2),d([a({reflect:!0})],b.prototype,"orientation",2),d([n("size",{waitUntilFirstUpdate:!0})],b.prototype,"handleSizeChange",1),d([n("invalid",{waitUntilFirstUpdate:!0})],b.prototype,"handleInvalid",1),b=d([i("sd-3-14-1-checkbox-group")],b);export{b as default};