@solid-design-system/components 7.0.0-next.7 → 7.0.0-next.8

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-8-icon class="w-full h-full" library="_internal" name="upload"></sd-7-0-0-next-8-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-8-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-8-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-8-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-7-0-0-next-8-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-8-file-selector")
+], SdFileSelector);
+
+export {
+  SdFileSelector
+};

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

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.7WPBGXB4.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -69,7 +69,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-7-0-0-next-7-include")
+  customElement("sd-7-0-0-next-8-include")
 ], SdInclude);
 
 export {

package/dist-versioned/chunks/{chunk.X4IYFUX6.js → 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.VLMSLPLL.js → chunk.7ZKBKOS5.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.6RE6UZ72.js";
 import {
   SdCarouselItem
-} from "./chunk.Y6MMHW4A.js";
+} from "./chunk.UOMFY7RY.js";
 import {
   AutoplayController
 } from "./chunk.F4VGSDIW.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.7WPBGXB4.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   prefersReducedMotion
 } from "./chunk.HQWAKJBV.js";
@@ -64,7 +64,7 @@ var SdCarousel = class extends SolidElement {
       if (!this.isFocused) this.next();
     });
     this.scrollController = new ScrollController(this);
-    this.slides = this.getElementsByTagName("sd-7-0-0-next-7-carousel-item");
+    this.slides = this.getElementsByTagName("sd-7-0-0-next-8-carousel-item");
     // determines which slide is displayed
     // A map containing the state of all the slides
     this.intersectionObserverEntries = /* @__PURE__ */ new Map();
@@ -476,7 +476,7 @@ var SdCarousel = class extends SolidElement {
       if (e.detail) {
         this.autoplayControls.blur();
       }
-    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-7-0-0-next-7-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-7-0-0-next-7-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-7-0-0-next-7-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-7-0-0-next-7-icon></slot></button><div class="carousel__announcement sr-only" aria-live="${!this.autoplay || this.pausedAutoplay || this.isFocused ? "polite" : "off"}" aria-atomic="true"></div><div id="scroll-container" part="scroll-container" class="${cx(
+    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-7-0-0-next-8-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-7-0-0-next-8-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-7-0-0-next-8-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-7-0-0-next-8-icon></slot></button><div class="carousel__announcement sr-only" aria-live="${!this.autoplay || this.pausedAutoplay || this.isFocused ? "polite" : "off"}" aria-atomic="true"></div><div id="scroll-container" part="scroll-container" class="${cx(
       `carousel__slides mb-6 max-h-full w-full items-center justify-items-center`,
       this.inverted ? "focus-visible:focus-outline-inverted" : "focus-visible:focus-outline",
       this.fade ? "relative overflow-hidden" : `grid overflow-auto overscroll-x-contain grid-flow-col auto-rows-[100%] snap-x snap-mandatory overflow-y-hidden`
@@ -490,7 +490,7 @@ var SdCarousel = class extends SolidElement {
     )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? (e) => {
       this.previous();
       this.unblockAutoplay(e, this.previousButton);
-    } : null}"><slot name="previous-icon"><sd-7-0-0-next-7-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-7-0-0-next-7-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) => {
+    } : null}"><slot name="previous-icon"><sd-7-0-0-next-8-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-7-0-0-next-8-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) => {
       const isActive = index + 1 === currentPage;
       return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
         "carousel__pagination-item",
@@ -501,14 +501,14 @@ var SdCarousel = class extends SolidElement {
         this.goToSlide(index * slidesPerMove);
         this.unblockAutoplay(e, this.paginationItems[index]);
       }}"><span class="${cx(
-        "h-4 w-4 block border sd-7-0-0-next-7-carousel__pager-dot-border-width rounded-full transition-colors duration-slow hover:duration-fast ease-in-out",
-        this.inverted ? "sd-7-0-0-next-7-carousel__pager-dot--inverted-border hover:border-primary-200" : "border-primary hover:border-primary-500",
+        "h-4 w-4 block border sd-7-0-0-next-8-carousel__pager-dot-border-width rounded-full transition-colors duration-slow hover:duration-fast ease-in-out",
+        this.inverted ? "sd-7-0-0-next-8-carousel__pager-dot--inverted-border hover:border-primary-200" : "border-primary hover:border-primary-500",
         isActive && "border-none",
-        isActive ? this.inverted ? "sd-7-0-0-next-7-carousel__pager-dot--inverted-background hover:sd-7-0-0-next-7-carousel__pager-dot--inverted--hovered-background" : "sd-7-0-0-next-7-carousel__pager-dot-background hover:bg-accent-550" : ""
+        isActive ? this.inverted ? "sd-7-0-0-next-8-carousel__pager-dot--inverted-background hover:sd-7-0-0-next-8-carousel__pager-dot--inverted--hovered-background" : "sd-7-0-0-next-8-carousel__pager-dot-background hover:bg-accent-550" : ""
       )}"></span></button>`;
     })}</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",
-      this.inverted ? "text-white sd-7-0-0-next-7-carousel--active--inverted-color-border" : "text-black sd-7-0-0-next-7-carousel--active-color-border"
+      this.inverted ? "text-white sd-7-0-0-next-8-carousel--active--inverted-color-border" : "text-black sd-7-0-0-next-8-carousel--active-color-border"
     )}">${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(
       "!ml-6 !rounded-sm sd-interactive transition-colors duration-fast ease-in-out",
       !nextEnabled && "sd-interactive--disabled",
@@ -516,13 +516,13 @@ var SdCarousel = class extends SolidElement {
     )}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @click="${nextEnabled ? (e) => {
       this.next();
       this.unblockAutoplay(e, this.nextButton);
-    } : null}"><slot name="next-icon"><sd-7-0-0-next-7-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-7-0-0-next-7-icon></slot></button></div></div></div>`;
+    } : null}"><slot name="next-icon"><sd-7-0-0-next-8-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-7-0-0-next-8-icon></slot></button></div></div></div>`;
   }
 };
 SdCarousel.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-: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}[part=autoplay-controls]{z-index:1}:host([fade]){--carousel-height:auto}:host([fade]) .carousel__slides{position:relative;display:block;overflow:hidden;height:var(--carousel-height)}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-7-0-0-next-7-button::part(label){pointer-events:none;display:flex;flex:auto;align-items:center}`
+: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}[part=autoplay-controls]{z-index:1}:host([fade]){--carousel-height:auto}:host([fade]) .carousel__slides{position:relative;display:block;overflow:hidden;height:var(--carousel-height)}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-7-0-0-next-8-button::part(label){pointer-events:none;display:flex;flex:auto;align-items:center}`
 ];
 __decorateClass([
   query('[part~="autoplay-controls"]')
@@ -607,7 +607,7 @@ __decorateClass([
   watch("autoplayInterval")
 ], SdCarousel.prototype, "handleautoplayIntervalChange", 1);
 SdCarousel = __decorateClass([
-  customElement("sd-7-0-0-next-7-carousel")
+  customElement("sd-7-0-0-next-8-carousel")
 ], SdCarousel);
 
 export {

package/dist-versioned/chunks/{chunk.NPYCKWWW.js → chunk.AFD4FHYM.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.7WPBGXB4.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -54,7 +54,7 @@ var SdNavigationItem = class extends SolidElement {
       }
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = node;
-        return element.tagName.toLowerCase() === "sd-7-0-0-next-7-icon";
+        return element.tagName.toLowerCase() === "sd-7-0-0-next-8-icon";
       }
       return false;
     });
@@ -130,8 +130,8 @@ var SdNavigationItem = class extends SolidElement {
     const root = html`<${tag} part="base" class="${cx(
       "flex items-center cursor-pointer relative focus-visible:focus-outline group hover:bg-neutral-200 transition-colors duration-fast ease-in-out min-h-[48px] navigable-border-radius",
       this.isStackedHorizontal ? "text-xs leading-4.5" : { md: "navigable-font-size", lg: "text-lg", sm: "text-[14px]" }[this.size],
-      this.disabled ? "text-neutral-500 pointer-events-none" : "sd-7-0-0-next-7-navigation-item--default-color-text",
-      this.current && !this.disabled && "sd-7-0-0-next-7-navigation-item--current-color-text",
+      this.disabled ? "text-neutral-500 pointer-events-none" : "sd-7-0-0-next-8-navigation-item--default-color-text",
+      this.current && !this.disabled && "sd-7-0-0-next-8-navigation-item--current-color-text",
       this.current && !this.isStackedHorizontal && "font-bold",
       !this.current && !this.isStackedHorizontal && "choice-control-font-weight",
       !isAccordion && "w-full",
@@ -154,7 +154,7 @@ var SdNavigationItem = class extends SolidElement {
       slots["description"] && "pt-3",
       !slots["description"] && !this.separated && horizontalPadding,
       this.calculatePaddingX
-    )}">${this.divider && this.vertical ? html`<sd-7-0-0-next-7-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-7-0-0-next-7-divider>` : ""} <span id="content" part="content-container" class="${cx(
+    )}">${this.divider && this.vertical ? html`<sd-7-0-0-next-8-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-7-0-0-next-8-divider>` : ""} <span id="content" part="content-container" class="${cx(
       "inline-flex items-center",
       this.vertical ? "flex-auto gap-2" : this.isStackedHorizontal ? "relative text-center pb-1" : "flex-auto flex-col justify-center gap-1 text-center"
     )}"><slot part="content" class="${cx(
@@ -163,19 +163,19 @@ var SdNavigationItem = class extends SolidElement {
     )}"></slot>${this.isStackedHorizontal ? html`<span part="current-indicator" aria-hidden="true" class="${cx(
       "absolute left-0 right-0 bottom-0 h-[2px] pointer-events-none bg-accent navigable__current-indicator-border-radius",
       this.disabled && "bg-neutral-500"
-    )}"></span>` : ""} </span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-7-0-0-next-7-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+    )}"></span>` : ""} </span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-7-0-0-next-8-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
       "h-6 w-6 ml-2 transition-all",
       isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-7-0-0-next-7-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot id="description" name="description" part="description" class="${cx(
+    )}"></sd-7-0-0-next-8-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot id="description" name="description" part="description" class="${cx(
       "inline-block text-sm text-left font-normal text-black pb-3",
       isAccordion || this.separated ? "grow" : "w-full",
       this.calculatePaddingX
     )}"></slot>` : ""}</div></${tag}>`;
     if (this.separated) {
-      return html`<div part="details" id="navigation-item-details" class="relative flex flex-col"><div class="flex items-start">${root} ${slots["children"] && this.vertical ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset -mt-1" @click="${this.handleClickSummary}"><sd-7-0-0-next-7-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+      return html`<div part="details" id="navigation-item-details" class="relative flex flex-col"><div class="flex items-start">${root} ${slots["children"] && this.vertical ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset -mt-1" @click="${this.handleClickSummary}"><sd-7-0-0-next-8-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
         "m-4 h-6 w-6 transition-all",
         isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-      )}"></sd-7-0-0-next-7-icon></button>` : ""}</div>${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
+      )}"></sd-7-0-0-next-8-icon></button>` : ""}</div>${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
     }
     if (isAccordion) {
       return html`<details aria-expanded="${this.open}" part="details" id="navigation-item-details" ?open="${this.open}" class="relative">${root}<slot name="children"></slot></details>`;
@@ -189,7 +189,7 @@ var SdNavigationItem = class extends SolidElement {
 SdNavigationItem.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}:host([stacked]:not([vertical])) ::slotted(sd-7-0-0-next-7-icon){height:var(--sd-spacing-6);width:var(--sd-spacing-6)}.sd-7-0-0-next-7-navigation-item--current-color-text{color:rgb(var(--sd-navigation-item--current-color-text,var(--sd-navigation-item-color-text)))}details summary::-webkit-details-marker{display:none}[part=current-indicator]{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-0);--tw-duration:var(--sd-duration-fast, 150ms);transition-duration:var(--sd-duration-fast,150ms);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,opacity var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out var(--sd-duration-fast)}:host([current]) [part=current-indicator]{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-100);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-duration{syntax:"*";inherits:false}`
+:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}:host([stacked]:not([vertical])) ::slotted(sd-7-0-0-next-8-icon){height:var(--sd-spacing-6);width:var(--sd-spacing-6)}.sd-7-0-0-next-8-navigation-item--current-color-text{color:rgb(var(--sd-navigation-item--current-color-text,var(--sd-navigation-item-color-text)))}details summary::-webkit-details-marker{display:none}[part=current-indicator]{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-0);--tw-duration:var(--sd-duration-fast, 150ms);transition-duration:var(--sd-duration-fast,150ms);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,opacity var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out var(--sd-duration-fast)}:host([current]) [part=current-indicator]{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-100);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-duration{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -240,7 +240,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdNavigationItem.prototype, "separated", 2);
 SdNavigationItem = __decorateClass([
-  customElement("sd-7-0-0-next-7-navigation-item")
+  customElement("sd-7-0-0-next-8-navigation-item")
 ], SdNavigationItem);
 
 export {

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

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.7WPBGXB4.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -42,16 +42,16 @@ var SdAccordionGroup = class extends SolidElement {
 SdAccordionGroup.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}::slotted(sd-7-0-0-next-7-accordion:not(:first-of-type)){margin-top:calc(-1 * var(--sd-accordion-border-width))!important}`
+:host{display:block}::slotted(sd-7-0-0-next-8-accordion:not(:first-of-type)){margin-top:calc(-1 * var(--sd-accordion-border-width))!important}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-7-0-0-next-7-accordion" })
+  queryAssignedElements({ selector: "sd-7-0-0-next-8-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-7-accordion-group")
+  customElement("sd-7-0-0-next-8-accordion-group")
 ], SdAccordionGroup);
 
 export {