@solid-design-system/components 3.23.4 → 3.24.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (157) hide show
  1. package/dist/components/es/solid-components2.js +1 -1
  2. package/dist/components/umd/solid-components.js +1 -1
  3. package/dist/custom-elements.json +1 -1
  4. package/dist/package/styles/tailwind.css.js +1 -1
  5. package/dist/styles/solid-styles.css +1 -1
  6. package/dist/versioned-components/es/accordion-group.js +1 -1
  7. package/dist/versioned-components/es/accordion.js +1 -1
  8. package/dist/versioned-components/es/audio.js +1 -1
  9. package/dist/versioned-components/es/badge.js +1 -1
  10. package/dist/versioned-components/es/brandshape.js +1 -1
  11. package/dist/versioned-components/es/button.js +1 -1
  12. package/dist/versioned-components/es/carousel-item.js +1 -1
  13. package/dist/versioned-components/es/carousel.js +3 -3
  14. package/dist/versioned-components/es/checkbox-group.js +1 -1
  15. package/dist/versioned-components/es/checkbox.js +1 -1
  16. package/dist/versioned-components/es/combobox.js +4 -4
  17. package/dist/versioned-components/es/dialog.js +1 -1
  18. package/dist/versioned-components/es/divider.js +1 -1
  19. package/dist/versioned-components/es/drawer.js +1 -1
  20. package/dist/versioned-components/es/dropdown.js +1 -1
  21. package/dist/versioned-components/es/expandable.js +1 -1
  22. package/dist/versioned-components/es/flipcard.js +1 -1
  23. package/dist/versioned-components/es/form.js +1 -1
  24. package/dist/versioned-components/es/header.js +1 -1
  25. package/dist/versioned-components/es/icon.js +1 -1
  26. package/dist/versioned-components/es/include.js +1 -1
  27. package/dist/versioned-components/es/input.js +1 -1
  28. package/dist/versioned-components/es/link.js +1 -1
  29. package/dist/versioned-components/es/map-marker.js +1 -1
  30. package/dist/versioned-components/es/navigation-item.js +1 -1
  31. package/dist/versioned-components/es/notification.js +1 -1
  32. package/dist/versioned-components/es/optgroup.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 +4 -4
  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/utils.js +1 -1
  54. package/dist/versioned-components/es/video.js +1 -1
  55. package/dist/versioned-package/_components/button-group/button-group.d.ts +1 -1
  56. package/dist/versioned-package/_components/button-group/button-group.js +11 -11
  57. package/dist/versioned-package/components/accordion/accordion.d.ts +1 -1
  58. package/dist/versioned-package/components/accordion/accordion.js +2 -2
  59. package/dist/versioned-package/components/accordion-group/accordion-group.d.ts +1 -1
  60. package/dist/versioned-package/components/accordion-group/accordion-group.js +3 -3
  61. package/dist/versioned-package/components/audio/audio.d.ts +1 -1
  62. package/dist/versioned-package/components/audio/audio.js +6 -6
  63. package/dist/versioned-package/components/badge/badge.d.ts +1 -1
  64. package/dist/versioned-package/components/badge/badge.js +1 -1
  65. package/dist/versioned-package/components/brandshape/brandshape.d.ts +1 -1
  66. package/dist/versioned-package/components/brandshape/brandshape.js +1 -1
  67. package/dist/versioned-package/components/button/button.d.ts +1 -1
  68. package/dist/versioned-package/components/button/button.js +4 -4
  69. package/dist/versioned-package/components/carousel/carousel.d.ts +1 -1
  70. package/dist/versioned-package/components/carousel/carousel.js +6 -6
  71. package/dist/versioned-package/components/carousel-item/carousel-item.d.ts +1 -1
  72. package/dist/versioned-package/components/carousel-item/carousel-item.js +1 -1
  73. package/dist/versioned-package/components/checkbox/checkbox.d.ts +1 -1
  74. package/dist/versioned-package/components/checkbox/checkbox.js +3 -3
  75. package/dist/versioned-package/components/checkbox-group/checkbox-group.d.ts +1 -1
  76. package/dist/versioned-package/components/checkbox-group/checkbox-group.js +5 -5
  77. package/dist/versioned-package/components/combobox/combobox.d.ts +4 -4
  78. package/dist/versioned-package/components/combobox/combobox.js +26 -26
  79. package/dist/versioned-package/components/combobox/utils.js +2 -2
  80. package/dist/versioned-package/components/dialog/dialog.d.ts +1 -1
  81. package/dist/versioned-package/components/dialog/dialog.js +2 -2
  82. package/dist/versioned-package/components/divider/divider.d.ts +1 -1
  83. package/dist/versioned-package/components/divider/divider.js +2 -2
  84. package/dist/versioned-package/components/drawer/drawer.d.ts +1 -1
  85. package/dist/versioned-package/components/drawer/drawer.js +2 -2
  86. package/dist/versioned-package/components/dropdown/dropdown.d.ts +1 -1
  87. package/dist/versioned-package/components/dropdown/dropdown.js +9 -9
  88. package/dist/versioned-package/components/expandable/expandable.d.ts +1 -1
  89. package/dist/versioned-package/components/expandable/expandable.js +2 -2
  90. package/dist/versioned-package/components/flipcard/flipcard.d.ts +1 -1
  91. package/dist/versioned-package/components/flipcard/flipcard.js +1 -1
  92. package/dist/versioned-package/components/header/header.d.ts +1 -1
  93. package/dist/versioned-package/components/header/header.js +4 -4
  94. package/dist/versioned-package/components/icon/icon.d.ts +1 -1
  95. package/dist/versioned-package/components/icon/icon.js +1 -1
  96. package/dist/versioned-package/components/include/include.d.ts +1 -1
  97. package/dist/versioned-package/components/include/include.js +1 -1
  98. package/dist/versioned-package/components/input/input.d.ts +1 -1
  99. package/dist/versioned-package/components/input/input.js +3 -3
  100. package/dist/versioned-package/components/link/link.d.ts +1 -1
  101. package/dist/versioned-package/components/link/link.js +2 -2
  102. package/dist/versioned-package/components/map-marker/map-marker.d.ts +1 -1
  103. package/dist/versioned-package/components/map-marker/map-marker.js +1 -1
  104. package/dist/versioned-package/components/navigation-item/navigation-item.d.ts +1 -1
  105. package/dist/versioned-package/components/navigation-item/navigation-item.js +5 -5
  106. package/dist/versioned-package/components/notification/notification.d.ts +1 -1
  107. package/dist/versioned-package/components/notification/notification.js +5 -5
  108. package/dist/versioned-package/components/optgroup/optgroup.d.ts +2 -2
  109. package/dist/versioned-package/components/optgroup/optgroup.js +5 -5
  110. package/dist/versioned-package/components/option/option.d.ts +1 -1
  111. package/dist/versioned-package/components/option/option.js +2 -2
  112. package/dist/versioned-package/components/popup/popup.d.ts +1 -1
  113. package/dist/versioned-package/components/popup/popup.js +1 -1
  114. package/dist/versioned-package/components/quickfact/quickfact.d.ts +1 -1
  115. package/dist/versioned-package/components/quickfact/quickfact.js +2 -2
  116. package/dist/versioned-package/components/radio/radio.d.ts +1 -1
  117. package/dist/versioned-package/components/radio/radio.js +2 -2
  118. package/dist/versioned-package/components/radio-button/radio-button.d.ts +1 -1
  119. package/dist/versioned-package/components/radio-button/radio-button.js +2 -2
  120. package/dist/versioned-package/components/radio-group/radio-group.d.ts +2 -2
  121. package/dist/versioned-package/components/radio-group/radio-group.js +13 -13
  122. package/dist/versioned-package/components/scrollable/scrollable.d.ts +1 -1
  123. package/dist/versioned-package/components/scrollable/scrollable.js +3 -3
  124. package/dist/versioned-package/components/select/select.d.ts +4 -4
  125. package/dist/versioned-package/components/select/select.js +29 -29
  126. package/dist/versioned-package/components/spinner/spinner.d.ts +1 -1
  127. package/dist/versioned-package/components/spinner/spinner.js +1 -1
  128. package/dist/versioned-package/components/step/step.d.ts +1 -1
  129. package/dist/versioned-package/components/step/step.js +2 -2
  130. package/dist/versioned-package/components/step-group/step-group.d.ts +1 -1
  131. package/dist/versioned-package/components/step-group/step-group.js +2 -2
  132. package/dist/versioned-package/components/switch/switch.d.ts +1 -1
  133. package/dist/versioned-package/components/switch/switch.js +1 -1
  134. package/dist/versioned-package/components/tab/tab.d.ts +1 -1
  135. package/dist/versioned-package/components/tab/tab.js +2 -2
  136. package/dist/versioned-package/components/tab-group/tab-group.d.ts +1 -1
  137. package/dist/versioned-package/components/tab-group/tab-group.js +13 -13
  138. package/dist/versioned-package/components/tab-panel/tab-panel.d.ts +1 -1
  139. package/dist/versioned-package/components/tab-panel/tab-panel.js +2 -2
  140. package/dist/versioned-package/components/tag/tag.d.ts +1 -1
  141. package/dist/versioned-package/components/tag/tag.js +2 -2
  142. package/dist/versioned-package/components/teaser/teaser.js +1 -1
  143. package/dist/versioned-package/components/teaser-media/teaser-media.js +1 -1
  144. package/dist/versioned-package/components/textarea/textarea.d.ts +1 -1
  145. package/dist/versioned-package/components/textarea/textarea.js +2 -2
  146. package/dist/versioned-package/components/tooltip/tooltip.d.ts +1 -1
  147. package/dist/versioned-package/components/tooltip/tooltip.js +5 -5
  148. package/dist/versioned-package/components/video/video.d.ts +1 -1
  149. package/dist/versioned-package/components/video/video.js +2 -2
  150. package/dist/versioned-package/internal/form.js +3 -3
  151. package/dist/versioned-package/styles/headline/headline.css.js +1 -1
  152. package/dist/versioned-package/styles/tailwind.css.js +1 -1
  153. package/dist/versioned-package/utilities/autocomplete-config.js +4 -4
  154. package/dist/versioned-styles/solid-styles.css +1 -1
  155. package/dist/vscode.html-custom-data.json +47 -47
  156. package/dist/web-types.json +48 -48
  157. package/package.json +1 -1
@@ -134,14 +134,14 @@ let SdScrollable = class extends SolidElement {
134
134
  this.orientation === "auto" && "scroll-auto overflow-auto",
135
135
  this.scrollbars ? "show-scrollbars" : "hide-scrollbars",
136
136
  this.inset ? "p-4" : ""
137
- )}" @scroll="${this.updateScrollIndicatorVisibility}" tabindex="0"><div part="scroll-content" class="flex-1"><slot></slot></div></div>${this.buttons ? html`${this.isScrollHorizontalEnabled ? html`${this.canScroll.left ? html`<div part="button-left" class="absolute z-10 flex items-center justify-center top-0 left-0 h-full w-8"><button part="button-start" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("left", e)}"><slot name="icon-start"><sd-3-23-4-icon library="system" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-3-23-4-icon></slot></button></div>` : null} ${this.canScroll.right ? html`<div part="button-right" class="absolute z-10 flex items-center justify-center top-0 right-0 h-full w-8"><button part="button-end" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("right", e)}"><slot name="icon-end"><sd-3-23-4-icon library="system" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-3-23-4-icon></slot></button></div>` : null}` : null} ${this.isScrollVerticalEnabled ? html`${this.canScroll.up ? html`<div part="button-top" class="absolute z-10 flex items-center justify-center top-0 left-0 w-full h-8"><button part="button-start" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("up", e)}"><slot name="icon-start"><sd-3-23-4-icon library="system" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-3-23-4-icon></slot></button></div>` : null} ${this.canScroll.down ? html`<div part="button-bottom" class="absolute z-10 flex items-center justify-center bottom-0 left-0 w-full h-8"><button part="button-end" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("down", e)}"><slot name="icon-end"><sd-3-23-4-icon library="system" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-3-23-4-icon></slot></button></div>` : null}` : null}` : null} ${this.shadows ? html`${this.isScrollHorizontalEnabled ? html`${this.canScroll.left ? html`<div part="shadow-left" class="${scrollShadowClasses} left top-0 left-0 w-[6px] h-full"></div>` : null} ${this.canScroll.right ? html`<div part="shadow-right" class="${scrollShadowClasses} right top-0 right-0 w-[6px] h-full"></div>` : null}` : null} ${this.isScrollVerticalEnabled ? html`${this.canScroll.up ? html`<div part="shadow-top" class="${scrollShadowClasses} top top-0 left-0 w-full h-[6px]"></div>` : null} ${this.canScroll.down ? html`<div part="shadow-bottom" class="${scrollShadowClasses} bottom bottom-0 left-0 w-full h-[6px]"></div>` : null}` : null}` : null}`;
137
+ )}" @scroll="${this.updateScrollIndicatorVisibility}" tabindex="0"><div part="scroll-content" class="flex-1"><slot></slot></div></div>${this.buttons ? html`${this.isScrollHorizontalEnabled ? html`${this.canScroll.left ? html`<div part="button-left" class="absolute z-10 flex items-center justify-center top-0 left-0 h-full w-8"><button part="button-start" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("left", e)}"><slot name="icon-start"><sd-3-24-0-icon library="system" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-3-24-0-icon></slot></button></div>` : null} ${this.canScroll.right ? html`<div part="button-right" class="absolute z-10 flex items-center justify-center top-0 right-0 h-full w-8"><button part="button-end" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("right", e)}"><slot name="icon-end"><sd-3-24-0-icon library="system" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-3-24-0-icon></slot></button></div>` : null}` : null} ${this.isScrollVerticalEnabled ? html`${this.canScroll.up ? html`<div part="button-top" class="absolute z-10 flex items-center justify-center top-0 left-0 w-full h-8"><button part="button-start" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("up", e)}"><slot name="icon-start"><sd-3-24-0-icon library="system" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-3-24-0-icon></slot></button></div>` : null} ${this.canScroll.down ? html`<div part="button-bottom" class="absolute z-10 flex items-center justify-center bottom-0 left-0 w-full h-8"><button part="button-end" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("down", e)}"><slot name="icon-end"><sd-3-24-0-icon library="system" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-3-24-0-icon></slot></button></div>` : null}` : null}` : null} ${this.shadows ? html`${this.isScrollHorizontalEnabled ? html`${this.canScroll.left ? html`<div part="shadow-left" class="${scrollShadowClasses} left top-0 left-0 w-[6px] h-full"></div>` : null} ${this.canScroll.right ? html`<div part="shadow-right" class="${scrollShadowClasses} right top-0 right-0 w-[6px] h-full"></div>` : null}` : null} ${this.isScrollVerticalEnabled ? html`${this.canScroll.up ? html`<div part="shadow-top" class="${scrollShadowClasses} top top-0 left-0 w-full h-[6px]"></div>` : null} ${this.canScroll.down ? html`<div part="shadow-bottom" class="${scrollShadowClasses} bottom bottom-0 left-0 w-full h-[6px]"></div>` : null}` : null}` : null}`;
138
138
  }
139
139
  };
140
140
  SdScrollable.styles = [
141
141
  SolidElement.styles,
142
142
  unsafeCSS(InteractiveStyles),
143
143
  componentStyles,
144
- css`:host{--gradient-color:rgba(255, 255, 255, 0);--gradient:var(--gradient-color) 0%,#fff 80%,#fff 100%;position:relative;display:flex;overflow:hidden}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-border-radius-sm,.125rem)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1,.25rem);width:var(--sd-spacing-1,.25rem)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,rgba(24,24,24,0) 50%,rgba(24,24,24,.4) 100%)}[part=shadow-right]{background:linear-gradient(90deg,rgba(24,24,24,0) 50%,rgba(24,24,24,.4) 100%)}[part=shadow-top]{background:linear-gradient(0deg,rgba(24,24,24,0) 50%,rgba(24,24,24,.4) 100%)}[part=shadow-bottom]{background:linear-gradient(180deg,rgba(24,24,24,0) 50%,rgba(24,24,24,.4) 100%)}.sd-3-23-4-icon--top{align-self:flex-start}.sd-3-23-4-icon--down{align-self:flex-end}`
144
+ css`:host{--gradient-color:rgba(255, 255, 255, 0);--gradient:var(--gradient-color) 0%,#fff 80%,#fff 100%;position:relative;display:flex;overflow:hidden}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-border-radius-sm,.125rem)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1,.25rem);width:var(--sd-spacing-1,.25rem)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,rgba(24,24,24,0) 50%,rgba(24,24,24,.4) 100%)}[part=shadow-right]{background:linear-gradient(90deg,rgba(24,24,24,0) 50%,rgba(24,24,24,.4) 100%)}[part=shadow-top]{background:linear-gradient(0deg,rgba(24,24,24,0) 50%,rgba(24,24,24,.4) 100%)}[part=shadow-bottom]{background:linear-gradient(180deg,rgba(24,24,24,0) 50%,rgba(24,24,24,.4) 100%)}.sd-3-24-0-icon--top{align-self:flex-start}.sd-3-24-0-icon--down{align-self:flex-end}`
145
145
  ];
146
146
  __decorateClass([
147
147
  property({ type: String, reflect: true })
@@ -174,7 +174,7 @@ __decorateClass([
174
174
  state()
175
175
  ], SdScrollable.prototype, "isKeyboardNavigation", 2);
176
176
  SdScrollable = __decorateClass([
177
- customElement("sd-3-23-4-scrollable")
177
+ customElement("sd-3-24-0-scrollable")
178
178
  ], SdScrollable);
179
179
  export {
180
180
  SdScrollable as default
@@ -8,9 +8,9 @@ import type { TemplateResult } from 'lit';
8
8
  import type SdOption from '../option/option';
9
9
  export default class SdSelect extends SolidElement implements SolidFormControl {
10
10
  static dependencies: {
11
- 'sd-3-23-4-icon': typeof SdIcon;
12
- 'sd-3-23-4-popup': typeof SdPopup;
13
- 'sd-3-23-4-tag': typeof SdTag;
11
+ 'sd-3-24-0-icon': typeof SdIcon;
12
+ 'sd-3-24-0-popup': typeof SdPopup;
13
+ 'sd-3-24-0-tag': typeof SdTag;
14
14
  };
15
15
  private readonly formControlController;
16
16
  private readonly hasSlotController;
@@ -103,6 +103,6 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
103
103
  }
104
104
  declare global {
105
105
  interface HTMLElementTagNameMap {
106
- 'sd-3-23-4-select': SdSelect;
106
+ 'sd-3-24-0-select': SdSelect;
107
107
  }
108
108
  }
@@ -31,7 +31,7 @@ let SdSelect = class extends SolidElement {
31
31
  constructor() {
32
32
  super(...arguments);
33
33
  this.formControlController = new FormControlController(this, {
34
- assumeInteractionOn: ["sd-blur", "sd-3-23-4-input"]
34
+ assumeInteractionOn: ["sd-blur", "sd-3-24-0-input"]
35
35
  });
36
36
  this.hasSlotController = new HasSlotController(this, "help-text", "label");
37
37
  this.localize = new LocalizeController(this);
@@ -63,11 +63,11 @@ let SdSelect = class extends SolidElement {
63
63
  this.styleOnValid = false;
64
64
  this.hoist = false;
65
65
  this.getTag = (option) => {
66
- return html`<sd-3-23-4-tag ?disabled="${this.disabled}" part="tag" exportparts="
66
+ return html`<sd-3-24-0-tag ?disabled="${this.disabled}" part="tag" exportparts="
67
67
  base:tag__base,
68
68
  content:tag__content,
69
69
  removable-indicator:tag__removable-indicator,
70
- " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-3-23-4-tag>`;
70
+ " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-3-24-0-tag>`;
71
71
  };
72
72
  this.handleDocumentFocusIn = (event) => {
73
73
  const path = event.composedPath();
@@ -78,7 +78,7 @@ let SdSelect = class extends SolidElement {
78
78
  this.handleDocumentKeyDown = (event) => {
79
79
  const target = event.target;
80
80
  const isClearButton = target.closest(".select__clear") !== null;
81
- const isIconButton = target.closest("sd-3-23-4-icon-button") !== null;
81
+ const isIconButton = target.closest("sd-3-24-0-icon-button") !== null;
82
82
  if (isClearButton || isIconButton) {
83
83
  return;
84
84
  }
@@ -211,8 +211,8 @@ let SdSelect = class extends SolidElement {
211
211
  if (event.key === "Backspace" && this.multiple) {
212
212
  event.stopPropagation();
213
213
  const tagParent = (_a = event.currentTarget) == null ? void 0 : _a.parentElement;
214
- const previousTag = (_b = tagParent == null ? void 0 : tagParent.previousElementSibling) == null ? void 0 : _b.querySelector("sd-3-23-4-tag");
215
- const nextTag = (_c = tagParent == null ? void 0 : tagParent.nextElementSibling) == null ? void 0 : _c.querySelector("sd-3-23-4-tag");
214
+ const previousTag = (_b = tagParent == null ? void 0 : tagParent.previousElementSibling) == null ? void 0 : _b.querySelector("sd-3-24-0-tag");
215
+ const nextTag = (_c = tagParent == null ? void 0 : tagParent.nextElementSibling) == null ? void 0 : _c.querySelector("sd-3-24-0-tag");
216
216
  this.handleTagRemove(new CustomEvent("sd-remove"), option);
217
217
  this.updateComplete.then(() => {
218
218
  if (nextTag) {
@@ -231,7 +231,7 @@ let SdSelect = class extends SolidElement {
231
231
  this.handleTagRemove(new CustomEvent("sd-remove"), this.selectedOptions[this.selectedOptions.length - 1]);
232
232
  this.updateComplete.then(() => {
233
233
  var _a;
234
- const tags = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll("sd-3-23-4-tag");
234
+ const tags = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll("sd-3-24-0-tag");
235
235
  if (tags && tags.length > 0) {
236
236
  tags == null ? void 0 : tags[(tags == null ? void 0 : tags.length) - 1].focus();
237
237
  } else {
@@ -276,7 +276,7 @@ let SdSelect = class extends SolidElement {
276
276
  }
277
277
  handleOptionClick(event) {
278
278
  const target = event.target;
279
- const option = target.closest("sd-3-23-4-option");
279
+ const option = target.closest("sd-3-24-0-option");
280
280
  const oldValue = this.value;
281
281
  if (option && !option.disabled) {
282
282
  if (this.multiple) {
@@ -301,7 +301,7 @@ let SdSelect = class extends SolidElement {
301
301
  const allOptions = this.getAllOptions();
302
302
  const value = Array.isArray(this.value) ? this.value : [this.value];
303
303
  const values = [];
304
- if (customElements.get("sd-3-23-4-option")) {
304
+ if (customElements.get("sd-3-24-0-option")) {
305
305
  allOptions.forEach((option) => {
306
306
  if (this.multiple) {
307
307
  option.checkbox = true;
@@ -310,7 +310,7 @@ let SdSelect = class extends SolidElement {
310
310
  });
311
311
  this.setSelectedOptions(allOptions.filter((el) => value.includes(el.value)));
312
312
  } else {
313
- customElements.whenDefined("sd-3-23-4-option").then(() => this.handleDefaultSlotChange());
313
+ customElements.whenDefined("sd-3-24-0-option").then(() => this.handleDefaultSlotChange());
314
314
  }
315
315
  }
316
316
  handleTagRemove(event, option) {
@@ -327,13 +327,13 @@ let SdSelect = class extends SolidElement {
327
327
  });
328
328
  }
329
329
  }
330
- // Gets an array of all <sd-3-23-4-option> elements
330
+ // Gets an array of all <sd-3-24-0-option> elements
331
331
  getAllOptions() {
332
- return [...this.querySelectorAll("sd-3-23-4-option")];
332
+ return [...this.querySelectorAll("sd-3-24-0-option")];
333
333
  }
334
- // Gets the first <sd-3-23-4-option> element
334
+ // Gets the first <sd-3-24-0-option> element
335
335
  getFirstOption() {
336
- return this.querySelector("sd-3-23-4-option");
336
+ return this.querySelector("sd-3-24-0-option");
337
337
  }
338
338
  // Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
339
339
  // option may be "current" at a time.
@@ -416,11 +416,11 @@ let SdSelect = class extends SolidElement {
416
416
  });
417
417
  } else {
418
418
  return [
419
- html`<sd-3-23-4-tag ?disabled="${this.disabled}" part="tag" exportparts="
419
+ html`<sd-3-24-0-tag ?disabled="${this.disabled}" part="tag" exportparts="
420
420
  base:tag__base,
421
421
  content:tag__content,
422
422
  removable-indicator:tag__removable-indicator,
423
- " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.localize.term("tagsSelected")}</sd-3-23-4-tag>`
423
+ " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.localize.term("tagsSelected")}</sd-3-24-0-tag>`
424
424
  ];
425
425
  }
426
426
  }
@@ -435,7 +435,7 @@ let SdSelect = class extends SolidElement {
435
435
  handleMouseLeave() {
436
436
  this.hasHover = false;
437
437
  }
438
- /** Receives incoming event detail from sd-3-23-4-popup and updates local state for conditional styling. */
438
+ /** Receives incoming event detail from sd-3-24-0-popup and updates local state for conditional styling. */
439
439
  handleCurrentPlacement(e) {
440
440
  const incomingPlacement = e.detail;
441
441
  if (incomingPlacement) {
@@ -444,7 +444,7 @@ let SdSelect = class extends SolidElement {
444
444
  }
445
445
  handleUseTagsChange() {
446
446
  const allOptions = this.getAllOptions();
447
- if (customElements.get("sd-3-23-4-option")) {
447
+ if (customElements.get("sd-3-24-0-option")) {
448
448
  allOptions.forEach((option) => {
449
449
  option.checkbox = this.multiple;
450
450
  });
@@ -578,7 +578,7 @@ let SdSelect = class extends SolidElement {
578
578
  default: "border-neutral-800"
579
579
  }[selectState],
580
580
  this.open && (this.currentPlacement === "bottom" ? "rounded-bl-none rounded-br-none" : "rounded-tl-none rounded-tr-none")
581
- )}"></div><sd-3-23-4-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
581
+ )}"></div><sd-3-24-0-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
582
582
  "inline-flex relative w-full",
583
583
  this.currentPlacement === "bottom" ? "origin-top" : "origin-bottom"
584
584
  )}" placement="${this.placement}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift sync="width" auto-size="vertical" auto-size-padding="10" exportparts="
@@ -595,33 +595,33 @@ let SdSelect = class extends SolidElement {
595
595
  "appearance-none outline-none flex-grow bg-transparent w-full placeholder-neutral-700",
596
596
  cursorStyles,
597
597
  this.multiple && this.useTags && this.value.length > 0 ? "hidden" : ""
598
- )}" type="text" placeholder="${this.placeholder}" .disabled="${this.disabled}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" aria-describedby="help-text invalid-message" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${this.multiple && this.useTags ? html`<div part="tags" class="flex-grow flex flex-wrap items-center gap-1">${this.tags}</div>` : ""}<div aria-live="polite" id="control-value" class="absolute top-0 left-0 opacity-0 -z-10">${this.selectedOptions.map((option) => option == null ? void 0 : option.getTextLabel()).join(", ")}</div><input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-controls="control-value" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("select__clear flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-3-23-4-icon class="${cx("text-icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-3-23-4-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-3-23-4-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="system" name="risk"></sd-3-23-4-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-3-23-4-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-3-23-4-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
598
+ )}" type="text" placeholder="${this.placeholder}" .disabled="${this.disabled}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" aria-describedby="help-text invalid-message" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${this.multiple && this.useTags ? html`<div part="tags" class="flex-grow flex flex-wrap items-center gap-1">${this.tags}</div>` : ""}<div aria-live="polite" id="control-value" class="absolute top-0 left-0 opacity-0 -z-10">${this.selectedOptions.map((option) => option == null ? void 0 : option.getTextLabel()).join(", ")}</div><input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-controls="control-value" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("select__clear flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-3-24-0-icon class="${cx("text-icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-3-24-0-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-3-24-0-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="system" name="risk"></sd-3-24-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-3-24-0-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-3-24-0-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
599
599
  "inline-flex ml-2 transition-all",
600
600
  this.open ? "rotate-180" : "rotate-0",
601
601
  this.disabled ? "text-neutral-500" : "text-primary",
602
602
  iconSize
603
- )}"><sd-3-23-4-icon name="chevron-down" part="chevron" library="system" color="currentColor"></sd-3-23-4-icon></slot></div><div id="listbox" role="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-multiselectable="${this.multiple ? "true" : "false"}" aria-labelledby="label" part="listbox" class="${cx(
603
+ )}"><sd-3-24-0-icon name="chevron-down" part="chevron" library="system" color="currentColor"></sd-3-24-0-icon></slot></div><div id="listbox" role="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-multiselectable="${this.multiple ? "true" : "false"}" aria-labelledby="label" part="listbox" class="${cx(
604
604
  "bg-white px-2 py-3 relative border-primary overflow-y-scroll",
605
605
  this.open && "shadow",
606
606
  this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default" : "border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default"
607
- )}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-3-23-4-popup></div><div class="text-sm text-neutral-700" part="form-control-help-text" id="help-text" aria-hidden="${hasHelpText ? "false" : "true"}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
607
+ )}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-3-24-0-popup></div><div class="text-sm text-neutral-700" part="form-control-help-text" id="help-text" aria-hidden="${hasHelpText ? "false" : "true"}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
608
608
  }
609
609
  };
610
610
  SdSelect.dependencies = {
611
- "sd-3-23-4-icon": SdIcon,
612
- "sd-3-23-4-popup": SdPopup,
613
- "sd-3-23-4-tag": SdTag
611
+ "sd-3-24-0-icon": SdIcon,
612
+ "sd-3-24-0-popup": SdPopup,
613
+ "sd-3-24-0-tag": SdTag
614
614
  };
615
615
  SdSelect.styles = [
616
616
  componentStyles,
617
617
  SolidElement.styles,
618
- css`:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-3-23-4-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-3-23-4-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-3-23-4-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-3-23-4-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249) / var(--tw-bg-opacity))}`
618
+ css`:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-3-24-0-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-3-24-0-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-3-24-0-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-3-24-0-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249) / var(--tw-bg-opacity))}`
619
619
  ];
620
620
  __decorateClass([
621
- queryAssignedElements({ selector: "sd-3-23-4-option" })
621
+ queryAssignedElements({ selector: "sd-3-24-0-option" })
622
622
  ], SdSelect.prototype, "_optionsInDefaultSlot", 2);
623
623
  __decorateClass([
624
- query("sd-3-23-4-popup")
624
+ query("sd-3-24-0-popup")
625
625
  ], SdSelect.prototype, "popup", 2);
626
626
  __decorateClass([
627
627
  query('[part="combobox"]')
@@ -743,7 +743,7 @@ __decorateClass([
743
743
  watch("value", { waitUntilFirstUpdate: true })
744
744
  ], SdSelect.prototype, "handleValueChange", 1);
745
745
  SdSelect = __decorateClass([
746
- customElement("sd-3-23-4-select")
746
+ customElement("sd-3-24-0-select")
747
747
  ], SdSelect);
748
748
  setDefaultAnimation("select.show", {
749
749
  keyframes: [
@@ -8,6 +8,6 @@ export default class SdSpinner extends SolidElement {
8
8
  }
9
9
  declare global {
10
10
  interface HTMLElementTagNameMap {
11
- 'sd-3-23-4-spinner': SdSpinner;
11
+ 'sd-3-24-0-spinner': SdSpinner;
12
12
  }
13
13
  }
@@ -39,7 +39,7 @@ __decorateClass([
39
39
  property({ reflect: true })
40
40
  ], SdSpinner.prototype, "color", 2);
41
41
  SdSpinner = __decorateClass([
42
- customElement("sd-3-23-4-spinner")
42
+ customElement("sd-3-24-0-spinner")
43
43
  ], SdSpinner);
44
44
  export {
45
45
  SdSpinner as default
@@ -22,6 +22,6 @@ export default class SdStep extends SolidElement {
22
22
  }
23
23
  declare global {
24
24
  interface HTMLElementTagNameMap {
25
- 'sd-3-23-4-step': SdStep;
25
+ 'sd-3-24-0-step': SdStep;
26
26
  }
27
27
  }
@@ -84,7 +84,7 @@ let SdStep = class extends SolidElement {
84
84
  !this.disabled && !this.current && !this.notInteractive && "text-primary group-hover:text-primary-500 group-hover:fill-primary-500",
85
85
  this.notInteractive && "text-primary",
86
86
  this.size === "lg" ? "text-lg" : "text-sm"
87
- )}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-3-23-4-icon name="status-check" library="system"></sd-3-23-4-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
87
+ )}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-3-24-0-icon name="status-check" library="system"></sd-3-24-0-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
88
88
  this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",
89
89
  !this.disabled && !this.current && !this.notInteractive ? " border-primary group-hover:border-primary-500" : "border-neutral-400"
90
90
  )}"></div>`}</div><div part="text-container" class="${cx("mt-4 break-words flex flex-col gap-2", this.orientation === "horizontal" ? "text-center w-40" : "w-max text-left", this.disabled && "!text-neutral-700", this.notInteractive ? "ml-3" : "mr-4")}"><div part="label" id="label" class="${cx("!font-bold sd-paragraph", this.disabled && "!text-neutral-700", !this.disabled && !this.current && !this.notInteractive ? "!text-primary group-hover:!text-primary-500 group-hover:cursor-pointer" : "text-black")}"><slot name="label">${this.label}</slot></div><div part="description" id="description" class="${cx("sd-paragraph sd-paragraph--size-sm", this.disabled && "!text-neutral-700")}">${this.description || html`<slot></slot>`}</div></div></div>`;
@@ -136,7 +136,7 @@ __decorateClass([
136
136
  watch("notInteractive")
137
137
  ], SdStep.prototype, "handleInteractivityChange", 1);
138
138
  SdStep = __decorateClass([
139
- customElement("sd-3-23-4-step")
139
+ customElement("sd-3-24-0-step")
140
140
  ], SdStep);
141
141
  export {
142
142
  SdStep as default
@@ -17,6 +17,6 @@ export default class SdStepGroup extends SolidElement {
17
17
  }
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'sd-3-23-4-step-group': SdStepGroup;
20
+ 'sd-3-24-0-step-group': SdStepGroup;
21
21
  }
22
22
  }
@@ -56,7 +56,7 @@ let SdStepGroup = class extends SolidElement {
56
56
  });
57
57
  }
58
58
  getAllSteps() {
59
- return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-3-23-4-step");
59
+ return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-3-24-0-step");
60
60
  }
61
61
  /**
62
62
  * Sets the active step.
@@ -119,7 +119,7 @@ __decorateClass([
119
119
  watch("notInteractive")
120
120
  ], SdStepGroup.prototype, "handleInteractivityChange", 1);
121
121
  SdStepGroup = __decorateClass([
122
- customElement("sd-3-23-4-step-group")
122
+ customElement("sd-3-24-0-step-group")
123
123
  ], SdStepGroup);
124
124
  export {
125
125
  SdStepGroup as default
@@ -34,6 +34,6 @@ export default class SdSwitch extends SolidElement implements SolidFormControl {
34
34
  }
35
35
  declare global {
36
36
  interface HTMLElementTagNameMap {
37
- 'sd-3-23-4-switch': SdSwitch;
37
+ 'sd-3-24-0-switch': SdSwitch;
38
38
  }
39
39
  }
@@ -162,7 +162,7 @@ __decorateClass([
162
162
  watch(["checked"], { waitUntilFirstUpdate: true })
163
163
  ], SdSwitch.prototype, "handleStateChange", 1);
164
164
  SdSwitch = __decorateClass([
165
- customElement("sd-3-23-4-switch")
165
+ customElement("sd-3-24-0-switch")
166
166
  ], SdSwitch);
167
167
  export {
168
168
  SdSwitch as default
@@ -17,6 +17,6 @@ export default class SdTab extends SolidElement {
17
17
  }
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
20
- 'sd-3-23-4-tab': SdTab;
20
+ 'sd-3-24-0-tab': SdTab;
21
21
  }
22
22
  }
@@ -20,7 +20,7 @@ let SdTab = class extends SolidElement {
20
20
  constructor() {
21
21
  super(...arguments);
22
22
  this.attrId = ++id;
23
- this.componentId = `sd-3-23-4-tab-${this.attrId}`;
23
+ this.componentId = `sd-3-24-0-tab-${this.attrId}`;
24
24
  this.variant = "default";
25
25
  this.active = false;
26
26
  this.disabled = false;
@@ -87,7 +87,7 @@ __decorateClass([
87
87
  watch("disabled")
88
88
  ], SdTab.prototype, "handleDisabledChange", 1);
89
89
  SdTab = __decorateClass([
90
- customElement("sd-3-23-4-tab")
90
+ customElement("sd-3-24-0-tab")
91
91
  ], SdTab);
92
92
  export {
93
93
  SdTab as default
@@ -32,6 +32,6 @@ export default class SdTabGroup extends SolidElement {
32
32
  }
33
33
  declare global {
34
34
  interface HTMLElementTagNameMap {
35
- 'sd-3-23-4-tab-group': SdTabGroup;
35
+ 'sd-3-24-0-tab-group': SdTabGroup;
36
36
  }
37
37
  }
@@ -29,8 +29,8 @@ let SdTabGroup = class extends SolidElement {
29
29
  }
30
30
  connectedCallback() {
31
31
  const whenAllDefined = Promise.all([
32
- customElements.whenDefined("sd-3-23-4-tab"),
33
- customElements.whenDefined("sd-3-23-4-tab-panel")
32
+ customElements.whenDefined("sd-3-24-0-tab"),
33
+ customElements.whenDefined("sd-3-24-0-tab-panel")
34
34
  ]);
35
35
  super.connectedCallback();
36
36
  this.resizeObserver = new ResizeObserver(() => {
@@ -67,19 +67,19 @@ let SdTabGroup = class extends SolidElement {
67
67
  getAllTabs(options = { includeDisabled: true }) {
68
68
  const slot = this.shadowRoot.querySelector('slot[name="nav"]');
69
69
  return [...slot.assignedElements()].filter((el) => {
70
- return options.includeDisabled ? el.tagName.toLowerCase() === "sd-3-23-4-tab" : el.tagName.toLowerCase() === "sd-3-23-4-tab" && !el.disabled;
70
+ return options.includeDisabled ? el.tagName.toLowerCase() === "sd-3-24-0-tab" : el.tagName.toLowerCase() === "sd-3-24-0-tab" && !el.disabled;
71
71
  });
72
72
  }
73
73
  getAllPanels() {
74
- return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-3-23-4-tab-panel");
74
+ return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-3-24-0-tab-panel");
75
75
  }
76
76
  getActiveTab() {
77
77
  return this.tabs.find((t) => t.matches(":focus"));
78
78
  }
79
79
  handleClick(event) {
80
80
  const target = event.target;
81
- const tab = target.closest("sd-3-23-4-tab");
82
- const tabGroup = tab == null ? void 0 : tab.closest("sd-3-23-4-tab-group");
81
+ const tab = target.closest("sd-3-24-0-tab");
82
+ const tabGroup = tab == null ? void 0 : tab.closest("sd-3-24-0-tab-group");
83
83
  if (tabGroup !== this) {
84
84
  return;
85
85
  }
@@ -89,8 +89,8 @@ let SdTabGroup = class extends SolidElement {
89
89
  }
90
90
  handleKeyDown(event) {
91
91
  const target = event.target;
92
- const tab = target.closest("sd-3-23-4-tab");
93
- const tabGroup = tab == null ? void 0 : tab.closest("sd-3-23-4-tab-group");
92
+ const tab = target.closest("sd-3-24-0-tab");
93
+ const tabGroup = tab == null ? void 0 : tab.closest("sd-3-24-0-tab-group");
94
94
  if (tabGroup !== this) {
95
95
  return;
96
96
  }
@@ -115,7 +115,7 @@ let SdTabGroup = class extends SolidElement {
115
115
  if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
116
116
  const activeEl = this.tabs.find((t) => t.matches(":focus"));
117
117
  const isRtl = this.localize.dir() === "rtl";
118
- if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-3-23-4-tab") {
118
+ if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-3-24-0-tab") {
119
119
  let index = this.tabs.indexOf(activeEl);
120
120
  if (event.key === "Home") {
121
121
  index = 0;
@@ -212,17 +212,17 @@ let SdTabGroup = class extends SolidElement {
212
212
  return html`<div part="base" class="${cx("flex flex-col rounded-none")}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}"><div part="nav" class="${cx(this.hasScrollControls && "relative py-0 px-12")}">${this.hasScrollControls ? html`<button part="scroll-button--start" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
213
213
  "sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",
214
214
  this.localize.dir() === "rtl" && "left-auto right-0"
215
- )}" @click="${this.handleScrollToStart}"><sd-3-23-4-icon library="system" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-3-23-4-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist"><div part="separation" class="w-full border-[0.25px] border-neutral-400 absolute bottom-0"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
215
+ )}" @click="${this.handleScrollToStart}"><sd-3-24-0-icon library="system" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-3-24-0-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist"><div part="separation" class="w-full border-[0.25px] border-neutral-400 absolute bottom-0"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
216
216
  "sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",
217
217
  this.localize.dir() === "rtl" && "right-auto left-0"
218
- )}" @click="${this.handleScrollToEnd}"><sd-3-23-4-icon library="system" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-3-23-4-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
218
+ )}" @click="${this.handleScrollToEnd}"><sd-3-24-0-icon library="system" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-3-24-0-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
219
219
  }
220
220
  };
221
221
  SdTabGroup.styles = [
222
222
  SolidElement.styles,
223
223
  unsafeCSS(InteractiveStyles),
224
224
  componentStyles,
225
- css`:host{@apply block box-border;}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{@apply w-0 h-0;}::slotted(sd-3-23-4-tab-panel){--padding:1rem 0}`
225
+ css`:host{@apply block box-border;}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{@apply w-0 h-0;}::slotted(sd-3-24-0-tab-panel){--padding:1rem 0}`
226
226
  ];
227
227
  __decorateClass([
228
228
  query("[part=base]")
@@ -243,7 +243,7 @@ __decorateClass([
243
243
  property()
244
244
  ], SdTabGroup.prototype, "activation", 2);
245
245
  SdTabGroup = __decorateClass([
246
- customElement("sd-3-23-4-tab-group")
246
+ customElement("sd-3-24-0-tab-group")
247
247
  ], SdTabGroup);
248
248
  export {
249
249
  SdTabGroup as default
@@ -11,6 +11,6 @@ export default class SdTabPanel extends SolidElement {
11
11
  }
12
12
  declare global {
13
13
  interface HTMLElementTagNameMap {
14
- 'sd-3-23-4-tab-panel': SdTabPanel;
14
+ 'sd-3-24-0-tab-panel': SdTabPanel;
15
15
  }
16
16
  }
@@ -20,7 +20,7 @@ let SdTabPanel = class extends SolidElement {
20
20
  constructor() {
21
21
  super(...arguments);
22
22
  this.attrId = ++id;
23
- this.componentId = `sd-3-23-4-tab-panel-${this.attrId}`;
23
+ this.componentId = `sd-3-24-0-tab-panel-${this.attrId}`;
24
24
  this.name = "";
25
25
  this.active = false;
26
26
  }
@@ -51,7 +51,7 @@ __decorateClass([
51
51
  watch("active")
52
52
  ], SdTabPanel.prototype, "handleActiveChange", 1);
53
53
  SdTabPanel = __decorateClass([
54
- customElement("sd-3-23-4-tab-panel")
54
+ customElement("sd-3-24-0-tab-panel")
55
55
  ], SdTabPanel);
56
56
  export {
57
57
  SdTabPanel as default
@@ -21,6 +21,6 @@ export default class SdTag extends SolidElement {
21
21
  }
22
22
  declare global {
23
23
  interface HTMLElementTagNameMap {
24
- 'sd-3-23-4-tag': SdTag;
24
+ 'sd-3-24-0-tag': SdTag;
25
25
  }
26
26
  }
@@ -74,7 +74,7 @@ let SdTag = class extends SolidElement {
74
74
  lg: "text-base",
75
75
  sm: "text-[12px]"
76
76
  }[this.size]
77
- )}"><sd-3-23-4-icon library="system" name="close" label="remove"></sd-3-23-4-icon></slot>` : ""}</${tag}>`;
77
+ )}"><sd-3-24-0-icon library="system" name="close" label="remove"></sd-3-24-0-icon></slot>` : ""}</${tag}>`;
78
78
  }
79
79
  };
80
80
  SdTag.styles = [
@@ -109,7 +109,7 @@ __decorateClass([
109
109
  property()
110
110
  ], SdTag.prototype, "download", 2);
111
111
  SdTag = __decorateClass([
112
- customElement("sd-3-23-4-tag")
112
+ customElement("sd-3-24-0-tag")
113
113
  ], SdTag);
114
114
  export {
115
115
  SdTag as default
@@ -99,7 +99,7 @@ __decorateClass([
99
99
  state()
100
100
  ], SdTeaser.prototype, "_orientation", 2);
101
101
  SdTeaser = __decorateClass([
102
- customElement("sd-3-23-4-teaser")
102
+ customElement("sd-3-24-0-teaser")
103
103
  ], SdTeaser);
104
104
  export {
105
105
  SdTeaser as default
@@ -65,7 +65,7 @@ __decorateClass([
65
65
  query('[part="base"]')
66
66
  ], SdTeaserMedia.prototype, "teaserMedia", 2);
67
67
  SdTeaserMedia = __decorateClass([
68
- customElement("sd-3-23-4-teaser-media")
68
+ customElement("sd-3-24-0-teaser-media")
69
69
  ], SdTeaserMedia);
70
70
  export {
71
71
  SdTeaserMedia as default
@@ -66,6 +66,6 @@ export default class SdTextarea extends SolidElement implements SolidFormControl
66
66
  }
67
67
  declare global {
68
68
  interface HTMLElementTagNameMap {
69
- 'sd-3-23-4-textarea': SdTextarea;
69
+ 'sd-3-24-0-textarea': SdTextarea;
70
70
  }
71
71
  }
@@ -199,7 +199,7 @@ let SdTextarea = class extends SolidElement {
199
199
  "flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",
200
200
  this.disabled && "cursor-not-allowed",
201
201
  textSize
202
- )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-3-23-4-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-3-23-4-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-3-23-4-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-3-23-4-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
202
+ )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-3-24-0-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-3-24-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-3-24-0-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-3-24-0-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
203
203
  }
204
204
  };
205
205
  SdTextarea.styles = [
@@ -308,7 +308,7 @@ __decorateClass([
308
308
  watch("value", { waitUntilFirstUpdate: true })
309
309
  ], SdTextarea.prototype, "handleValueChange", 1);
310
310
  SdTextarea = __decorateClass([
311
- customElement("sd-3-23-4-textarea")
311
+ customElement("sd-3-24-0-textarea")
312
312
  ], SdTextarea);
313
313
  export {
314
314
  SdTextarea as default
@@ -36,6 +36,6 @@ export default class SdTooltip extends SolidElement {
36
36
  }
37
37
  declare global {
38
38
  interface HTMLElementTagNameMap {
39
- 'sd-3-23-4-tooltip': SdTooltip;
39
+ 'sd-3-24-0-tooltip': SdTooltip;
40
40
  }
41
41
  }