@solid-design-system/components 7.0.0-next.1 → 7.0.0-next.11

package/dist-versioned/chunks/chunk.6OYBQ6CO.js

@@ -0,0 +1,373 @@
+import {
+  defaultValue
+} from "./chunk.GI7VDIWX.js";
+import {
+  FormControlController
+} from "./chunk.C3WIBDGG.js";
+import {
+  HasSlotController
+} from "./chunk.IVMQWO2L.js";
+import {
+  LocalizeController
+} from "./chunk.X3FE7OHE.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.DJJN4MJ4.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/file-selector/file-selector.ts
+import { css, html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+import cx from "classix";
+var SdFileSelector = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["sd-change"],
+      value: (el) => el.files
+    });
+    this.hasSlotController = new HasSlotController(this, "help-text", "label");
+    this.localize = new LocalizeController(this);
+    this.userIsDragging = false;
+    this.showInvalidStyle = false;
+    this.name = "";
+    this.title = "";
+    this.defaultValue = "";
+    this.size = "lg";
+    this.label = "";
+    this.showLabel = false;
+    this.helpText = "";
+    this.disabled = false;
+    this.visuallyDisabled = false;
+    this.droparea = false;
+    this.accept = "";
+    this.styleOnValid = false;
+    this.multiple = false;
+    this.webkitdirectory = false;
+    this.form = "";
+    this.required = false;
+    this.hideValue = false;
+  }
+  set files(v) {
+    if (this.input) {
+      this.input.files = v;
+    }
+  }
+  get files() {
+    var _a, _b;
+    return (_b = (_a = this.input) == null ? void 0 : _a.files) != null ? _b : null;
+  }
+  set value(v) {
+    if (this.input) {
+      this.input.value = v;
+    }
+  }
+  get value() {
+    var _a, _b;
+    return (_b = (_a = this.input) == null ? void 0 : _a.value) != null ? _b : "";
+  }
+  /** Gets the validity state object. */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message. */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    this.formControlController.fakeUserInteraction();
+    return this.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  async handleValueChange() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  focus(options) {
+    var _a, _b;
+    if (this.droparea) {
+      (_a = this.dropareaWrapper) == null ? void 0 : _a.focus(options);
+      return;
+    }
+    (_b = this.button) == null ? void 0 : _b.focus(options);
+  }
+  blur() {
+    var _a, _b;
+    if (this.droparea) {
+      (_a = this.dropareaWrapper) == null ? void 0 : _a.blur();
+      return;
+    }
+    (_b = this.button) == null ? void 0 : _b.blur();
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+    this.invalidMessage.textContent = event.target.validationMessage;
+  }
+  handleFiles(files) {
+    if (!files) {
+      this.value = "";
+      return;
+    }
+    this.files = files;
+  }
+  async handleTransferItems(items) {
+    if (!items) {
+      this.value = "";
+      throw new Error("No proper items found");
+    }
+    const entries = Array.from(items).map((item) => item.webkitGetAsEntry());
+    const filesPromises = entries.map((entry) => this.getFilesFromEntry(entry));
+    const filesArray = await Promise.all(filesPromises);
+    const files = filesArray.flat();
+    const dataTransfer = new DataTransfer();
+    files.forEach((f) => dataTransfer.items.add(f));
+    return dataTransfer.files;
+  }
+  async getFilesFromEntry(entry) {
+    if (!entry) {
+      return [];
+    }
+    if (entry.isFile) {
+      return new Promise((resolve, reject) => {
+        entry.file((file) => resolve([file]), reject);
+      });
+    }
+    if (entry.isDirectory) {
+      return new Promise((resolve, reject) => {
+        const dirReader = entry.createReader();
+        dirReader.readEntries((nestedEntries) => {
+          Promise.all(nestedEntries.map((e) => this.getFilesFromEntry(e))).then((nested) => resolve(nested.flat())).catch(reject);
+        });
+      });
+    }
+    return [];
+  }
+  handleClick(e) {
+    e.preventDefault();
+    if (this.disabled || this.visuallyDisabled) {
+      e.stopPropagation();
+      return;
+    }
+    this.input.click();
+  }
+  handleDropareaKeyDown(e) {
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    this.handleClick(e);
+  }
+  handleChange(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.emit("sd-input");
+    this.emit("sd-change");
+  }
+  handleDragOver(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.disabled || this.visuallyDisabled) return;
+    this.userIsDragging = true;
+  }
+  handleDragLeave(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.disabled || this.visuallyDisabled) return;
+    this.userIsDragging = false;
+  }
+  async handleDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.disabled || this.visuallyDisabled) return;
+    if (!e.dataTransfer) return;
+    const files = await this.handleTransferItems(e.dataTransfer.items);
+    this.userIsDragging = false;
+    if (!files) return;
+    if (!this.multiple && !this.webkitdirectory && files.length > 1) {
+      this.emit("sd-error");
+      return;
+    }
+    this.handleFiles(files);
+    this.input.dispatchEvent(new Event("change"));
+  }
+  handleFocus() {
+    this.emit("sd-focus");
+  }
+  handleBlur() {
+    this.emit("sd-blur");
+  }
+  renderValue() {
+    let hasFiles = false;
+    let fileChosenLabel = this.localize.term("numFilesSelected", 0, this.webkitdirectory, this.multiple);
+    if (this.files && this.files.length > 0) {
+      hasFiles = true;
+      fileChosenLabel = this.files.length === 1 ? this.files[0].name : this.localize.term("numFilesSelected", this.files.length, this.webkitdirectory, this.multiple);
+    }
+    return html`<span id="file-status" role="status" aria-live="polite" aria-atomic="true" class="${cx(
+      "input__value truncate text-sm",
+      this.hideValue && "sr-only",
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : !hasFiles ? "text-neutral-700" : "text-black"
+    )}" part="value">${fileChosenLabel}</span>`;
+  }
+  renderDroparea() {
+    return html`<div class="${cx("droparea", this.disabled || this.visuallyDisabled ? "cursor-not-allowed" : "cursor-pointer")}" @click="${this.handleClick}" @keydown="${this.handleDropareaKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" tabindex="${this.disabled ? -1 : 0}" role="button" aria-labelledby="form-control-label" aria-describedby="file-status help-text invalid-message" part="droparea"><div part="droparea-background" class="${cx(
+      "droparea__background relative w-full flex flex-row items-center gap-4 p-6 form-control-border-radius transition-colors ease-in-out duration-medium",
+      this.disabled || this.visuallyDisabled ? "droparea__background--disabled bg-neutral-100" : this.showInvalidStyle ? "droparea__background--invalid" : this.userIsDragging ? "bg-primary-100" : "hover:bg-neutral-200"
+    )}"><svg class="droparea__border" aria-hidden="true" preserveAspectRatio="none"><rect class="droparea__border-rect" x="0.5" y="0.5" width="calc(100% - 1px)" height="calc(100% - 1px)"/></svg><div part="droparea-icon" class="${cx(
+      "droparea__icon inline-flex h-18",
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary"
+    )}"><sd-7-0-0-next-11-icon class="w-full h-full" library="_internal" name="upload"></sd-7-0-0-next-11-icon></div><p part="droparea-value"><span class="${cx(
+      "block text-lg font-semibold",
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary"
+    )}">${this.localize.term(
+      this.webkitdirectory ? "folderDragDrop" : this.multiple ? "fileDragDropMultiple" : "fileDragDrop"
+    )} </span>${this.renderValue()}</p></div></div>`;
+  }
+  renderButton() {
+    let buttonText = this.localize.term("fileButtonText");
+    if (this.multiple) buttonText = this.localize.term("fileButtonTextMultiple");
+    if (this.webkitdirectory) buttonText = this.localize.term("folderButtonText");
+    return html`<div part="button-wrapper" class="${cx(
+      "button__wrapper flex flex-row items-center gap-4",
+      this.disabled || this.visuallyDisabled ? "cursor-not-allowed" : "cursor-default"
+    )}"><sd-7-0-0-next-11-button class="button" @click="${this.handleClick}" ?disabled="${this.disabled}" ?visually-disabled="${this.visuallyDisabled}" part="button" size="${this.size}" variant="secondary" aria-labelledby="form-control-label" aria-describedby="file-status help-text invalid-message" aria-invalid="${this.showInvalidStyle ? "true" : "false"}">${buttonText}</sd-7-0-0-next-11-button>${this.renderValue()}</div>`;
+  }
+  render() {
+    const slots = {
+      label: this.hasSlotController.test("label"),
+      helpText: this.hasSlotController.test("help-text")
+    };
+    const hasLabel = this.label ? true : !!slots["label"];
+    const hasHelpText = this.helpText ? true : !!slots["helpText"];
+    const showLabel = this.showLabel && hasLabel;
+    return html`<div @dragenter="${this.handleDragOver}" @dragleave="${this.handleDragLeave}" @dragover="${this.handleDragOver}" @drop="${this.handleDrop}" part="form-control">${hasLabel ? html`<label id="form-control-label" class="${cx(
+      "form-control__label text-base",
+      showLabel ? "inline-block mb-2" : "sr-only",
+      this.disabled ? "text-neutral-500" : "form-control-color-text"
+    )}" for="input" part="form-control-label"><slot name="label">${this.label}</slot></label>` : null}<div class="form-control-input" part="form-control-input">${this.droparea ? this.renderDroparea() : this.renderButton()}</div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
+      "text-sm mt-2",
+      hasHelpText ? "block" : "hidden",
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-neutral-700"
+    )}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot><input accept="${this.accept}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" @change="${this.handleChange}" class="input__control sr-only" capture="${ifDefined(this.capture)}" ?disabled="${this.disabled}" id="input" @invalid="${this.handleInvalid}" ?multiple="${this.multiple}" name="${ifDefined(this.name)}" ?required="${this.required}" title="${this.title}" type="file" tabindex="-1" ?webkitdirectory="${this.webkitdirectory}"></div><div part="invalid-icon-message" class="flex items-center gap-2 mt-2">${this.showInvalidStyle ? html`<sd-7-0-0-next-11-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-7-0-0-next-11-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div>`;
+  }
+};
+/**
+ * Inherits global stylesheet including TailwindCSS.
+ */
+SdFileSelector.styles = [
+  ...SolidElement.styles,
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:block;width:100%;text-align:left}:host([required]) .form-control__label::after{content:' *'}.input__control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.droparea__background{--sd-droparea-border-color:rgba(var(--sd-form-control-color-border, rgba(var(--sd-color-neutral-800))))}.droparea__background--disabled{--sd-droparea-border-color:rgba(var(--sd-color-neutral-500))}.droparea__background--invalid{--sd-droparea-border-color:rgba(var(--sd-color-error))}.droparea__border{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.droparea__border-rect{fill:none;stroke:var(--sd-droparea-border-color);stroke-width:2px;stroke-dasharray:0 8px;stroke-linecap:square;vector-effect:non-scaling-stroke}`
+];
+__decorateClass([
+  state()
+], SdFileSelector.prototype, "userIsDragging", 2);
+__decorateClass([
+  state()
+], SdFileSelector.prototype, "showInvalidStyle", 2);
+__decorateClass([
+  property({ type: Object })
+], SdFileSelector.prototype, "files", 1);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdFileSelector.prototype, "name", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdFileSelector.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], SdFileSelector.prototype, "value", 1);
+__decorateClass([
+  defaultValue()
+], SdFileSelector.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdFileSelector.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdFileSelector.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "show-label" })
+], SdFileSelector.prototype, "showLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "help-text", reflect: true })
+], SdFileSelector.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdFileSelector.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
+], SdFileSelector.prototype, "visuallyDisabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "drop-area" })
+], SdFileSelector.prototype, "droparea", 2);
+__decorateClass([
+  property({ type: String })
+], SdFileSelector.prototype, "accept", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "style-on-valid" })
+], SdFileSelector.prototype, "styleOnValid", 2);
+__decorateClass([
+  property({ type: String })
+], SdFileSelector.prototype, "capture", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdFileSelector.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdFileSelector.prototype, "webkitdirectory", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdFileSelector.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdFileSelector.prototype, "required", 2);
+__decorateClass([
+  property({ attribute: "hide-value", type: Boolean, reflect: true })
+], SdFileSelector.prototype, "hideValue", 2);
+__decorateClass([
+  query(".input__control")
+], SdFileSelector.prototype, "input", 2);
+__decorateClass([
+  query(".button")
+], SdFileSelector.prototype, "button", 2);
+__decorateClass([
+  query(".droparea")
+], SdFileSelector.prototype, "dropareaWrapper", 2);
+__decorateClass([
+  query("#invalid-message")
+], SdFileSelector.prototype, "invalidMessage", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SdFileSelector.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], SdFileSelector.prototype, "handleValueChange", 1);
+SdFileSelector = __decorateClass([
+  customElement("sd-7-0-0-next-11-file-selector")
+], SdFileSelector);
+
+export {
+  SdFileSelector
+};

package/dist-versioned/chunks/{chunk.LVPWOXKT.js → chunk.77CINHAJ.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -53,7 +53,7 @@ var SdInclude = class extends SolidElement {
 };
 SdInclude.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
 :host{display:block}`
 ];
 __decorateClass([
@@ -69,7 +69,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-7-0-0-next-1-include")
+  customElement("sd-7-0-0-next-11-include")
 ], SdInclude);
 
 export {

package/{dist/chunks/chunk.X4IYFUX6.js → dist-versioned/chunks/chunk.7D23CZ3Y.js}

@@ -21,6 +21,12 @@ var translation = {
   dateRangePlaceholder: "Datumsbereich ausw\xE4hlen",
   endDateSelected: "Enddatum ausgew\xE4hlt",
   expandNavigationItem: "Navigationspunkt erweitern",
+  fileButtonText: "Datei ausw\xE4hlen",
+  fileButtonTextMultiple: "Dateien ausw\xE4hlen",
+  fileDragDrop: "Datei ablegen oder ausw\xE4hlen",
+  fileDragDropMultiple: "Dateien ablegen oder ausw\xE4hlen",
+  folderButtonText: "Ordner ausw\xE4hlen",
+  folderDragDrop: "Ordner hierher ziehen oder klicken, um zu suchen",
   goToSlide: (slide, count) => `Zu Folie ${slide} von ${count} gehen`,
   hidePassword: "Passwort verbergen",
   invalidDate: "Ung\xFCltiges Datum",
@@ -33,6 +39,9 @@ var translation = {
   nextYear: "N\xE4chstes Jahr",
   noResults: "Keine Ergebnisse gefunden",
   notifications: "Benachrichtigungen",
+  numFilesSelected: (num, isDirectory, isMultiple) => {
+    return num === 0 ? isDirectory ? isMultiple ? "Keine Ordner ausgew\xE4hlt" : "Kein Ordner ausgew\xE4hlt" : isMultiple ? "Keine Dateien ausgew\xE4hlt" : "Keine Datei ausgew\xE4hlt" : isDirectory ? `${num} Ordner ausgew\xE4hlt` : `${num} Datei${num === 1 ? "" : "en"} ausgew\xE4hlt`;
+  },
   numOptionsSelected: (num) => {
     if (num === 0) return "";
     return `Optionen ausgew\xE4hlt (${num})`;

package/dist-versioned/chunks/{chunk.UCQEVTLR.js → chunk.AJVSDITF.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -41,17 +41,17 @@ var SdAccordionGroup = class extends SolidElement {
 };
 SdAccordionGroup.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}::slotted(sd-7-0-0-next-1-accordion:not(:first-of-type)){margin-top:calc(-1 * var(--sd-accordion-border-width))!important}`
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:block}::slotted(sd-7-0-0-next-11-accordion:not(:first-of-type)){margin-top:calc(-1 * var(--sd-accordion-border-width))!important}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-7-0-0-next-1-accordion" })
+  queryAssignedElements({ selector: "sd-7-0-0-next-11-accordion" })
 ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
 __decorateClass([
   property({ attribute: "close-others", type: Boolean, reflect: true })
 ], SdAccordionGroup.prototype, "closeOthers", 2);
 SdAccordionGroup = __decorateClass([
-  customElement("sd-7-0-0-next-1-accordion-group")
+  customElement("sd-7-0-0-next-11-accordion-group")
 ], SdAccordionGroup);
 
 export {

package/dist-versioned/chunks/{chunk.QELO6X62.js → chunk.ANUBVNLR.js}

@@ -1,16 +1,16 @@
+import {
+  scrollIntoView
+} from "./chunk.LTZVVIB2.js";
 import {
   debounce
 } from "./chunk.UVI5HHLF.js";
-import {
-  scrollIntoView
-} from "./chunk.WDWV53JP.js";
 import {
   LocalizeController
 } from "./chunk.X3FE7OHE.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass,
   __spreadValues
@@ -37,8 +37,8 @@ var SdTabGroup = class extends SolidElement {
   }
   connectedCallback() {
     const whenAllDefined = Promise.all([
-      customElements.whenDefined("sd-7-0-0-next-1-tab"),
-      customElements.whenDefined("sd-7-0-0-next-1-tab-panel")
+      customElements.whenDefined("sd-7-0-0-next-11-tab"),
+      customElements.whenDefined("sd-7-0-0-next-11-tab-panel")
     ]);
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => {
@@ -86,20 +86,20 @@ var SdTabGroup = class extends SolidElement {
   }
   getAllTabs(options = { includeDisabled: true }) {
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
-    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-7-0-0-next-1-tab" ? el : el.querySelector("sd-7-0-0-next-1-tab")).filter((el) => {
-      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-7-0-0-next-1-tab" : el.tagName.toLowerCase() === "sd-7-0-0-next-1-tab" && !el.disabled;
+    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-7-0-0-next-11-tab" ? el : el.querySelector("sd-7-0-0-next-11-tab")).filter((el) => {
+      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-7-0-0-next-11-tab" : el.tagName.toLowerCase() === "sd-7-0-0-next-11-tab" && !el.disabled;
     });
   }
   getAllPanels() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-7-0-0-next-1-tab-panel");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-7-0-0-next-11-tab-panel");
   }
   getActiveTab() {
     return this.tabs.find((t) => t.matches(":focus"));
   }
   handleClick(event) {
     const target = event.target;
-    const tab = target.closest("sd-7-0-0-next-1-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-7-0-0-next-1-tab-group");
+    const tab = target.closest("sd-7-0-0-next-11-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-7-0-0-next-11-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -109,8 +109,8 @@ var SdTabGroup = class extends SolidElement {
   }
   handleKeyDown(event) {
     const target = event.target;
-    const tab = target.closest("sd-7-0-0-next-1-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-7-0-0-next-1-tab-group");
+    const tab = target.closest("sd-7-0-0-next-11-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-7-0-0-next-11-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -137,7 +137,7 @@ var SdTabGroup = class extends SolidElement {
     if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
       const activeEl = this.tabs.find((t) => t.matches(":focus"));
       const isRtl = this.localize.dir() === "rtl";
-      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-7-0-0-next-1-tab") {
+      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-7-0-0-next-11-tab") {
         let index = this.tabs.indexOf(activeEl);
         if (event.key === "Home") {
           index = 0;
@@ -258,16 +258,16 @@ var SdTabGroup = class extends SolidElement {
     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" disabled="${ifDefined(!this.canScroll.left || void 0)}" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "left-auto right-0"
-    )}" @click="${this.handleScrollToStart}"><sd-7-0-0-next-1-icon library="_internal" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-7-0-0-next-1-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">${((_a = this.activeTab) == null ? void 0 : _a.variant) !== "container" ? html`<div part="active-tab-indicator" id="indicator" class="absolute h-1 bg-accent bottom-0 transition-[transform,width] duration-medium ease-in-out z-30 navigable__current-indicator-height navigable__current-indicator-border-radius"></div>` : ""}<div part="separation" class="border-neutral-400 absolute w-full h-0.25 bottom-0 border-b z-10"></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" disabled="${ifDefined(!this.canScroll.right || void 0)}" class="${cx(
+    )}" @click="${this.handleScrollToStart}"><sd-7-0-0-next-11-icon library="_internal" name="${isRtl ? "chevron-top" : "chevron-bottom"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-7-0-0-next-11-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">${((_a = this.activeTab) == null ? void 0 : _a.variant) !== "container" ? html`<div part="active-tab-indicator" id="indicator" class="absolute h-1 bg-accent bottom-0 transition-[transform,width] duration-medium ease-in-out z-30 navigable__current-indicator-height navigable__current-indicator-border-radius"></div>` : ""}<div part="separation" class="border-neutral-400 absolute w-full h-0.25 bottom-0 border-b z-10"></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" disabled="${ifDefined(!this.canScroll.right || void 0)}" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "right-auto left-0"
-    )}" @click="${this.handleScrollToEnd}"><sd-7-0-0-next-1-icon library="_internal" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-7-0-0-next-1-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>`;
+    )}" @click="${this.handleScrollToEnd}"><sd-7-0-0-next-11-icon library="_internal" name="${isRtl ? "chevron-bottom" : "chevron-top"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-7-0-0-next-11-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>`;
   }
 };
 SdTabGroup.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:calc(var(--sd-spacing-1) * 0);width:calc(var(--sd-spacing-1) * 0)}::slotted(sd-7-0-0-next-1-tab-panel){--padding:1rem 0}::slotted(sd-7-0-0-next-1-tab-panel:focus-visible){outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary)}`
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:0;width:0}::slotted(sd-7-0-0-next-11-tab-panel){--padding:1rem 0}::slotted(sd-7-0-0-next-11-tab-panel:focus-visible){outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary)}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -300,7 +300,7 @@ __decorateClass([
   debounce(20)
 ], SdTabGroup.prototype, "handleScroll", 1);
 SdTabGroup = __decorateClass([
-  customElement("sd-7-0-0-next-1-tab-group")
+  customElement("sd-7-0-0-next-11-tab-group")
 ], SdTabGroup);
 
 export {

package/dist-versioned/chunks/{chunk.WEGQKE7P.js → chunk.B72XZRDP.js}

@@ -1,13 +1,13 @@
 import {
   SdAccordion
-} from "./chunk.7MA7NTM5.js";
+} from "./chunk.LW2NFCFY.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -31,24 +31,24 @@ var SdQuickfact = class extends SdAccordion {
       this.expandable && "cursor-pointer select-none"
     )}" role="${ifDefined(this.expandable ? "button" : void 0)}" aria-expanded="${ifDefined(this.expandable ? this.open ? "true" : "false" : void 0)}" aria-controls="${ifDefined(this.expandable ? "content" : void 0)}" tabindex="${this.expandable ? "0" : "-1"}" @click="${this.expandable ? this.handleSummaryClick : null}" @keydown="${this.expandable ? this.handleSummaryKeyDown : null}"><div part="icon" class="${cx("flex flex-grow-0 flex-shrink-0 flex-auto items-center", !this.expandable && "cursor-default")}"><slot name="icon"></slot></div><slot name="summary" part="summary" class="${cx(
       "flex flex-auto items-start text-left text-base leading-normal font-normal sm:leading-tight sm:text-3xl sm:text-center",
-      this.expandable ? "sd-7-0-0-next-1-quickfact--expandable-color-text" : "text-black cursor-default"
+      this.expandable ? "sd-7-0-0-next-11-quickfact--expandable-color-text" : "text-black cursor-default"
     )}">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto self-start sm:self-center transition-transform ease-in-out duration-medium text-xl sm:mt-2",
       this.open && "rotate-180",
       !this.expandable && "hidden"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-7-0-0-next-1-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-7-0-0-next-1-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-7-0-0-next-1-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-7-0-0-next-1-icon></slot></span></${header}><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></${base}>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-7-0-0-next-11-icon library="_internal" name="chevron-bottom" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-7-0-0-next-11-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-7-0-0-next-11-icon library="_internal" name="chevron-bottom" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-7-0-0-next-11-icon></slot></span></${header}><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></${base}>`;
   }
 };
 SdQuickfact.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
 :host{display:block}[part=header]::-webkit-details-marker{display:none}[part=summary-icon]{color:rgba(var(--sd-color-icon-fill-primary,rgba(var(--sd-color-primary))))}[part=icon]{font-size:var(--sd-spacing-12,3rem);color:rgba(var(--sd-color-icon-fill-primary,rgba(var(--sd-color-primary))))}@media (min-width:640px){[part=icon]{font-size:var(--sd-spacing-24,6rem)}}`
 ];
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdQuickfact.prototype, "expandable", 2);
 SdQuickfact = __decorateClass([
-  customElement("sd-7-0-0-next-1-quickfact")
+  customElement("sd-7-0-0-next-11-quickfact")
 ], SdQuickfact);
 setDefaultAnimation("quickfact.show", {
   keyframes: [{ height: "0" }, { height: "auto" }],