@solid-design-system/components 5.16.1 → 5.16.2-next.1

package/dist/chunks/{chunk.GTISTGG6.js → chunk.NKPJM2WV.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -74,7 +74,6 @@ var SdDatepicker = class extends SolidElement {
     /** Bump counter ensuring live region text updates are recognized. */
     this.statusBumpCounter = 0;
     this.onFocusIn = (ev) => {
-      if (this.disabled || this.visuallyDisabled) return;
       const path = ev.composedPath();
       const fromHeader = path.some(
         (n) => {
@@ -87,20 +86,20 @@ var SdDatepicker = class extends SolidElement {
       }
     };
     this.handleInput = (ev) => {
-      var _a, _b, _c, _d, _e;
-      if (this.disabled || this.visuallyDisabled) {
-        (_a = ev.preventDefault) == null ? void 0 : _a.call(ev);
-        (_b = ev.stopPropagation) == null ? void 0 : _b.call(ev);
-        return;
-      }
+      var _a, _b, _c;
       const input = ev.target;
       const raw = input.value;
-      const oldPos = (_c = input.selectionStart) != null ? _c : raw.length;
-      const isDeleting = (_d = ev.inputType) == null ? void 0 : _d.startsWith("delete");
+      const oldPos = (_a = input.selectionStart) != null ? _a : raw.length;
+      const isDeleting = (_b = ev.inputType) == null ? void 0 : _b.startsWith("delete");
+      if (this.visuallyDisabled || this.disabled) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        return;
+      }
       if (!this.range) {
         const inputEl = input;
         const rawText = inputEl.value;
-        const oldCaret = (_e = inputEl.selectionStart) != null ? _e : rawText.length;
+        const oldCaret = (_c = inputEl.selectionStart) != null ? _c : rawText.length;
         const digits = rawText.replace(/\D/g, "").slice(0, 8);
         const d = digits.slice(0, 2);
         const m = digits.slice(2, 4);
@@ -273,10 +272,6 @@ var SdDatepicker = class extends SolidElement {
       }
     };
     this.handleInputBlur = () => {
-      if (this.disabled || this.visuallyDisabled) {
-        this.handleBlur();
-        return;
-      }
       const parsed = this.parseInputText(this.inputValue);
       if (!parsed.valid) {
         this.inputValue = this.formatInputValue();
@@ -307,11 +302,6 @@ var SdDatepicker = class extends SolidElement {
       }
     };
     this.onKeyDown = (ev) => {
-      if (this.disabled || this.visuallyDisabled) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        return;
-      }
       const key = ev.key;
       let handled = true;
       const next = new Date(this.focusedDate);
@@ -378,11 +368,6 @@ var SdDatepicker = class extends SolidElement {
       }
     };
     this.handleInputKeyDown = (ev) => {
-      if ((this.disabled || this.visuallyDisabled) && ev.key !== "Tab") {
-        ev.preventDefault();
-        ev.stopPropagation();
-        return;
-      }
       if (ev.key === "ArrowLeft" || ev.key === "ArrowRight" || ev.key === "ArrowUp" || ev.key === "ArrowDown" || ev.key === "Home" || ev.key === "End" || ev.key === "PageUp" || ev.key === "PageDown") {
         return;
       }
@@ -415,6 +400,7 @@ var SdDatepicker = class extends SolidElement {
       this.firstDayOfWeek = 1;
     }
     this.inputValue = this.formatInputValue();
+    this.tabIndex = 0;
     this.setAttribute("role", "group");
     this.setAttribute(
       "aria-label",
@@ -817,9 +803,10 @@ var SdDatepicker = class extends SolidElement {
   show() {
     if (this.open || this.disabled || this.visuallyDisabled) {
       this.open = false;
-      return;
+      return void 0;
     }
     this.open = true;
+    return void 0;
   }
   hide() {
     if (!this.open || this.disabled) {
@@ -842,6 +829,9 @@ var SdDatepicker = class extends SolidElement {
     this.emit("sd-blur");
   }
   handleFocus() {
+    if (this.visuallyDisabled || this.disabled) {
+      return;
+    }
     this.hasFocus = true;
     if (!this.open && !this.disabled && !this.visuallyDisabled) {
       this.show();
@@ -1217,11 +1207,7 @@ var SdDatepicker = class extends SolidElement {
       default: "border-neutral-800"
     }[inputState];
     const textSize = this.size === "sm" ? "text-sm" : "text-base";
-    return html`<div part="form-control" class="${cx(
-      "min-w-[284px]",
-      this.open && "z-50",
-      (this.disabled || this.visuallyDisabled) && "cursor-not-allowed"
-    )}">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx(
+    return html`<div part="form-control" class="${cx("w-[370px]", this.open && "z-50", (this.disabled || this.visuallyDisabled) && "cursor-not-allowed")}">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx(
       "relative w-full",
       this.disabled && "pointer-events-none",
       this.visuallyDisabled && "cursor-not-allowed"
@@ -1237,15 +1223,16 @@ var SdDatepicker = class extends SolidElement {
       inputState === "disabled" || inputState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}" slot="anchor"><input id="input" type="text" role="combobox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="dialog" aria-controls="calendar-grid" aria-describedby="${hasHelpText ? "help-text" : void 0}" aria-invalid="${this.showInvalidStyle ? "true" : "false"}" aria-label="${this.range ? "Select date range" : "Select a date"}" class="${cx(
       "min-w-0 flex-grow focus:outline-none bg-transparent",
-      this.visuallyDisabled || this.disabled ? "placeholder:text-neutral-500 cursor-not-allowed" : "placeholder:text-neutral-700",
+      this.visuallyDisabled || this.disabled ? "placeholder-neutral-500 cursor-not-allowed" : "placeholder-neutral-700",
       { sm: "h-8", md: "h-10", lg: "h-12" }[this.size],
       textSize
-    )}" autocomplete="off" spellcheck="false" placeholder="${this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder")}" ?disabled="${this.disabled}" ?readonly="${this.readonly || this.visuallyDisabled}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-icon>` : ""}<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-icon>${this.renderCalendar()}</div></sd-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" placeholder="${this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder")}" ?disabled="${this.disabled || this.disabled}" ?readonly="${this.readonly}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-icon>` : ""}<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-icon>${this.renderCalendar()}</div></sd-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdDatepicker.styles = [
   ...SolidElement.styles,
-  css`:host{display:inline-block;outline:2px solid transparent;outline-offset:2px;position:relative;width:100%}:host([required]) #label:after{content:" *"}:host([visually-disabled]) input{caret-color:transparent}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{position:relative;display:inline-block;--tw-outline-style:none;outline-style:none}:host([required]) #label::after{content:' *'}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })

package/dist/chunks/chunk.O6MXNSO7.js

@@ -0,0 +1,185 @@
+// src/components/icon/library.internal.ts
+var icons = {
+  calendar: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M21 2H3a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1M6 4v1.7a1 1 0 0 0 2 0V4h8v1.7a1 1 0 0 0 2 0V4h2v4H4V4zM4 20V10h16v10z"/>
+      <path d="m7.6 13.3.6.8.3-.3.7-.6V18h1.3v-6H9.4zm7-1.4q-2.2 0-2.2 3.1 0 3 2.2 3c2.2 0 2.2-1 2.2-3q0-3.1-2.1-3.1m0 5.3q-1 0-1-2.3t1-2.2c1 0 1 .8 1 2.3q0 2.2-1 2.2"/>
+    </svg>
+  `,
+  "chevron-down": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M20.3 6.3 12 15.5 3.7 6.3 3 6a1 1 0 0 0-.7 1.7l9 10a1 1 0 0 0 1.4 0l9-10q.3-.3.3-.7a1 1 0 0 0-1.7-.7"/>
+    </svg>
+  `,
+  "chevron-up": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M12.7 6.3a1 1 0 0 0-1.4 0l-9 10-.3.7a1 1 0 0 0 1.7.7L12 8.5l8.3 9.2q.2.2.7.3a1 1 0 0 0 .7-1.7z"/>
+    </svg>
+  `,
+  "chevron-right": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M7.667 2.257a1 1 0 1 0-1.336 1.485l.002.001L15.506 12l-9.173 8.257a1 1 0 0 0 1.336 1.485l-.002.001 10-9a.997.997 0 0 0 .001-1.486l-.001-.001-10-8.999Z"/>
+    </svg>
+  `,
+  "chevron-left": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M17.7 2.3a1 1 0 0 0-1.4 0l-10 9a1 1 0 0 0 0 1.4l10 9a1 1 0 0 0 1.4-1.4L8.5 12l9.2-8.3a1 1 0 0 0 0-1.4"/>
+    </svg>
+  `,
+  "chevron-sm-right": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M10.688 6.257a1 1 0 1 0-1.336 1.485h.002L14.528 12l-5.174 4.257a1 1 0 0 0 1.336 1.485h-.002l6-5a.997.997 0 0 0 .002-1.485l-.002-.001-6-5Z"/>
+  </svg>`,
+  "chevron-sm-left": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M14.742 6.333a.997.997 0 0 0-1.41-.076l.001-.001-6 5a.997.997 0 0 0 0 1.486v.001l6 5a1 1 0 0 0 1.333-1.487l-5.173-4.257 5.173-4.257a.997.997 0 0 0 .076-1.409Z"/>
+  </svg>`,
+  "chevrons-sm-left": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M11.74 6.333a.997.997 0 0 0-1.41-.076l.001-.001-6 5a.997.997 0 0 0-.001 1.486l.001.001 6 5a1 1 0 0 0 1.333-1.487l-5.173-4.257 5.173-4.257a.997.997 0 0 0 .076-1.409Z"/>
+    <path fill="currentColor" d="M18.74 6.333a.997.997 0 0 0-1.41-.076l.001-.001-6 5a.997.997 0 0 0-.001 1.486l.001.001 6 5a1 1 0 0 0 1.333-1.487l-5.173-4.257 5.173-4.257a.997.997 0 0 0 .076-1.409Z"/>
+  </svg>`,
+  "chevrons-sm-right": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M13.718 6.257a1 1 0 1 0-1.336 1.485h.002L17.557 12l-5.173 4.257a1 1 0 0 0 1.336 1.485h-.002l6-5a.997.997 0 0 0 .001-1.485l-.001-.001-6-5Z"/>
+  <path fill="currentColor" d="M6.718 6.257a1 1 0 1 0-1.336 1.485h.002L10.557 12l-5.173 4.257a1 1 0 0 0 1.336 1.485h-.002l6-5a.997.997 0 0 0 .001-1.485l-.001-.001-6-5Z"/>
+</svg>`,
+  clock: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M13 11.6V8a1 1 0 0 0-2 0v4.4h.1v.2l.2.1 2.8 2.8a1 1 0 0 0 1.4-1.4z"/>
+      <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16"/>
+    </svg>
+  `,
+  close: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M21.7 2.3a1 1 0 0 0-1.4 0L12 10.6 3.7 2.3a1 1 0 0 0-1.4 1.4l8.3 8.3-8.3 8.3a1 1 0 0 0 0 1.4 1 1 0 0 0 1.4 0l8.3-8.3 8.3 8.3a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4L13.4 12l8.3-8.3a1 1 0 0 0 0-1.4"/>
+    </svg>
+  `,
+  "closing-round": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16"/>
+      <path d="M16.4 7.6a1 1 0 0 0-1.4 0l-3 3-3-3A1 1 0 0 0 7.6 9l3 3-3 3A1 1 0 0 0 9 16.4l3-3 3 3a1 1 0 0 0 1.4-1.4l-3-3 3-3a1 1 0 0 0 0-1.4"/>
+    </svg>
+  `,
+  eye: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M12 19c-5.3 0-10-5.7-10-7s4.7-7 10-7 10 5.7 10 7-4.7 7-10 7m-7.9-7c.8 1.2 4 5 7.9 5s7.1-3.8 7.9-5c-.8-1.2-4-5-7.9-5s-7.1 3.8-7.9 5"/>
+      <path d="M12 16.1A4 4 0 0 1 7.9 12 4 4 0 0 1 12 7.9a4 4 0 0 1 4.1 4.1 4 4 0 0 1-4.1 4.1m0-6.2a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2"/>
+    </svg>
+  `,
+  "eye-crossed-out": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M12 16.1A4 4 0 0 1 7.9 12 4 4 0 0 1 12 7.9a4 4 0 0 1 4.1 4.1 4 4 0 0 1-4.1 4.1m0-6.2a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2"/>
+      <path d="M12 19c-5.3 0-10-5.7-10-7s4.7-7 10-7 10 5.7 10 7-4.7 7-10 7m-7.9-7c.8 1.2 4 5 7.9 5s7.1-3.8 7.9-5c-.8-1.2-4-5-7.9-5s-7.1 3.8-7.9 5"/>
+      <path d="M3 22a1 1 0 0 1-.7-1.7l18-18a1 1 0 0 1 1.4 1.4l-18 18z"/>
+    </svg>
+  `,
+  "info-circle": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16"/>
+      <path d="M13.3 7.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-.3 3.9a1 1 0 0 0-1-1h-1a1 1 0 0 0 0 2v2.6h2zM11 16.3v-1h-1a1 1 0 0 0 0 2h2a1 1 0 0 1-1-1m3-1h-1v1a1 1 0 0 1-1 1h2a1 1 0 0 0 0-2"/>
+      <path d="M13 16.3v-1h-2v1a1 1 0 0 0 2 0"/>
+    </svg>
+  `,
+  "status-check": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 13">
+      <path d="M10 1.1 4.3 9.5 1.9 7a.6.6 0 0 0-1 .5L1 8l3 3 .5.1q.4 0 .5-.2l6-9a1 1 0 0 0-.2-1 1 1 0 0 0-.9.2"/>
+    </svg>
+  `,
+  "status-minus": `
+    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+      <path d="M10 5.4H2a.6.6 0 0 0 0 1.2h8a.6.6 0 0 0 0-1.2"/>
+    </svg>
+  `,
+  "minus-circle": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
+      <path d="M49.5 33h-27a3 3 0 0 0 0 6h27a3 3 0 0 0 0-6Z"/>
+      <path d="M36 6a30 30 0 1 0 30 30A30 30 0 0 0 36 6Zm0 54a24 24 0 1 1 24-24 24 24 0 0 1-24 24Z"/>
+    </svg>
+  `,
+  pause: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M9 22a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1zM6 4h2v16H6zm13 18q.4 0 .7-.3l.3-.7V3a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1zM16 4h2v16h-2z"/>
+    </svg>
+  `,
+  "plus-circle": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
+      <path d="M49.5 33H39V22.5a3 3 0 0 0-6 0V33H22.5a3 3 0 0 0 0 6H33v10.5a3 3 0 0 0 6 0V39h10.5a3 3 0 0 0 0-6Z"/>
+      <path d="M36 6a30 30 0 1 0 30 30A30 30 0 0 0 36 6Zm0 54a24 24 0 1 1 24-24 24 24 0 0 1-24 24Z"/>
+    </svg>
+  `,
+  risk: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M12.9 2.6a1 1 0 0 0-1.8 0l-9 18A1 1 0 0 0 3 22h18a1 1 0 0 0 .9-1.5zM4.6 20 12 5.2 19.4 20z"/>
+      <path d="M11 10.7V15a1 1 0 0 0 2 0v-4.3a1 1 0 0 0-2 0m2 7.3a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+    </svg>
+  `,
+  start: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+      <path d="m57.4 29.8-37.3-24A2.7 2.7 0 0 0 16 8v48a2.7 2.7 0 0 0 2.7 2.7 3 3 0 0 0 1.4-.5l37.3-24a3 3 0 0 0 1.2-2.2q0-1.4-1.2-2.2M21.4 51V13L51 32z"/>
+    </svg>
+  `,
+  "confirm-circle": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16"/>
+      <path d="M15.8 7.5a1 1 0 0 0-1.4.3L10.9 14 9 12.3a1 1 0 0 0-1.6.7q0 .4.2.7l2.7 2.7q.3.2.7.3h.1q.5-.1.8-.5l4.3-7.4.1-.5a1 1 0 0 0-.5-.8"/>
+    </svg>
+  `,
+  warning: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M12.9 2.6a1 1 0 0 0-1.8 0l-9 18-.1.4q0 1 1 1h18a1 1 0 0 0 .9-1.5zM4.6 20 12 5.2 19.4 20z"/>
+      <path d="M11 10.7V15a1 1 0 0 0 2 0v-4.3a1 1 0 0 0-2 0m2 7.3a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+    </svg>
+  `,
+  "exclamation-circle": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M13 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0M12 6a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V7q0-1-1-1"/>
+      <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16"/>
+    </svg>
+  `,
+  "magnifying-glass": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="m21.7 20.3-7-7h-.1a7 7 0 1 0-1.4 1.4v-.1l.1.1 7 7a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4M9 14a5 5 0 1 1 5-5 5 5 0 0 1-5 5"/>
+    </svg>
+  `,
+  transcript: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M19 22H5a1 1 0 0 1-1-1V3q0-1 1-1h9q.4 0 .7.3l5 5q.3.3.3.7v13q0 1-1 1M6 20h12V8.4L13.6 4H6z"/>
+      <path d="M19 10h-6a1 1 0 0 1-1-1V3a1 1 0 1 1 2 0v5h5a1 1 0 1 1 0 2m-3 4H8a1 1 0 1 1 0-2h8a1 1 0 1 1 0 2m-2 4H8a1 1 0 1 1 0-2h6a1 1 0 1 1 0 2"/>
+    </svg>
+  `,
+  mute: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M8.7 0a1 1 0 0 0-1 .3L3.8 4H1a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h3l3.6 3.7.7.3h.4q.6-.3.6-1V1a1 1 0 0 0-.6-1M2 6h1.3v4H2zm5.3 6.6-2-2V5.4l2-2zm12.4-9a1 1 0 0 0-1.4 0l-3 3-3-3A1 1 0 0 0 11 5l3 3-3 3a1 1 0 0 0 1.4 1.4l3-3 2.9 3a1 1 0 0 0 1.4-1.4l-3-3 3-3a1 1 0 0 0 0-1.4"/>
+    </svg>
+  `,
+  volume: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M10.7 4a1 1 0 0 0-1 .3L5.8 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h3l3.6 3.7.7.3h.4q.6-.4.6-1V5a1 1 0 0 0-.6-1M4 10h1.3v4H4zm5.3 6.6-2-2V9.4l2-2zM18.6 3a1 1 0 0 0-.5 1.3Q20 7.8 20 12t-2 7.6h.1a1 1 0 0 0 .4 1.3 1 1 0 0 0 1.4-.4q2-3.8 2.1-8.5 0-4.6-2.2-8.5a1 1 0 0 0-1.3-.4"/>
+      <path d="M14.4 5.2a1 1 0 0 0-.2 1.4Q16 9.3 16 12t-1.8 5.4a1 1 0 0 0 1.6 1.2Q18 15.2 18 12t-2.2-6.6a1 1 0 0 0-1.4-.2"/>
+    </svg>
+  `,
+  reload: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="m1.7 7.11 1.33 1.34C3.13 3.69 6.75 0 11.33 0a8.67 8.67 0 1 1 0 17.33 1 1 0 0 1 0-2 6.67 6.67 0 1 0 0-13.33C7.8 2 5.14 4.74 5 8.42l1.34-1.3a1 1 0 1 1 1.41 1.41l-3.02 3.02a1 1 0 0 1-1.42 0L.3 8.53A1 1 0 0 1 1.7 7.11z"/>
+    </svg>
+  `
+};
+var internalLibrary = {
+  name: "_internal",
+  resolver: (name, element) => {
+    if (element) {
+      const svg = window.getComputedStyle(element).getPropertyValue(`--sd-icon--${name}`);
+      if (svg) {
+        return `data:image/svg+xml,${encodeURIComponent(svg.replaceAll(`\\`, "").replaceAll('"', "'"))}`;
+      }
+    }
+    if (name in icons) {
+      return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;
+    }
+    return "";
+  },
+  mutator: (svg) => svg.setAttribute("fill", "currentColor")
+};
+var library_internal_default = internalLibrary;
+
+export {
+  icons,
+  library_internal_default
+};

package/dist/chunks/{chunk.O7O2LFXK.js → chunk.O6OCXI2L.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass,
   __spreadValues
@@ -349,13 +349,13 @@ var SdInput = class extends SolidElement {
     const borderColor = {
       disabled: "border-neutral-500",
       visuallyDisabled: "border-neutral-500",
-      readonly: "border-neutral-800",
+      readonly: "form-control-color-border",
       activeInvalid: "border-error border-2",
       activeValid: "border-success border-2",
       active: "border-primary border-2",
       invalid: "border-error",
       valid: "border-success",
-      default: "border-neutral-800"
+      default: "form-control-color-border"
     }[inputState];
     const iconColor = this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary";
     const iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
@@ -381,11 +381,11 @@ var SdInput = class extends SolidElement {
       inputState === "disabled" || inputState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}">${slots["left"] ? html`<slot name="left" part="left" class="${cx("inline-flex", this.size === "sm" ? "mr-1" : "mr-2", iconColor, iconSize)}"></slot>` : ""} <input part="input" id="input" class="${cx(
       "min-w-0 flex-grow focus:outline-none bg-transparent",
-      this.visuallyDisabled || this.disabled ? "placeholder-neutral-500 cursor-not-allowed" : "placeholder-neutral-700",
+      this.visuallyDisabled || this.disabled ? "placeholder:text-neutral-500 cursor-not-allowed" : "placeholder:text-neutral-700",
       this.size === "sm" ? "h-6" : "h-8",
       textSize
     )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${// eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-700", iconSize)}" library="_internal" name="closing-round"></sd-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-700", iconSize)}" library="_internal" name="closing-round"></sd-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -393,7 +393,8 @@ var SdInput = class extends SolidElement {
  */
 SdInput.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #label:after{content:" *"}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) #label::after{content:' *'}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-icon{color:var(--sd-color-text-neutral-500)}`
 ];
 __decorateClass([
   query("#input")

package/dist/chunks/{chunk.RRDLKLEV.js → chunk.OBQTYYBW.js}

@@ -27,7 +27,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   animateTo,
   stopAnimations
@@ -180,15 +180,16 @@ var SdDialog = class extends SolidElement {
     return html`<div part="base" class="${cx(
       "flex items-center justify-center fixed inset-0 z-dialog",
       this.hasSlotController.test("footer") && "dialog--has-footer"
-    )}"><div part="overlay" class="fixed inset-0 bg-primary-800 opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
-      "flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
+    )}"><div part="overlay" class="fixed inset-0 overlay-color-background opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
+      "panel-color-border border flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
       this.open && "flex opacity-100"
     )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-icon></sd-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDialog.styles = [
   ...SolidElement.styles,
-  css`:host{--width:662px}[part=panel]{max-height:80vh;width:var(--width)}[part=body]{-webkit-overflow-scrolling:touch}@media (max-width:414px){:host{--width:335px}[part=body]{min-height:50px}[part=footer]{width:100%}}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{--width:662px}[part=panel]{width:var(--width);max-height:80vh}[part=body]{-webkit-overflow-scrolling:touch}@media (max-width:414px){:host{--width:335px}[part=body]{min-height:50px}[part=footer]{width:100%}}`
 ];
 __decorateClass([
   query('[part="base"]')

package/dist/chunks/{chunk.QL6JHFGU.js → chunk.OK3VBJRJ.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -143,7 +143,7 @@ var SdCheckbox = class extends SolidElement {
         invalidIndeterminate: "border-error bg-error group-hover:bg-error-400",
         invalid: "border-error group-hover:bg-neutral-200",
         filled: "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550",
-        default: "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
+        default: "form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
     )}"><div class="${cx(
       "absolute h-3 transition-[width] right-0.25 duration-medium",
@@ -171,7 +171,8 @@ var SdCheckbox = class extends SolidElement {
  */
 SdCheckbox.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){outline-width:0}:host([required]) #label:after{content:" *"}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){outline-style:var(--tw-outline-style);outline-width:0}:host([required]) #label::after{content:' *'}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
 ];
 __decorateClass([
   query('input[type="checkbox"]')

package/dist/chunks/{chunk.YN47LYT7.js → chunk.PF4UKMOY.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -39,7 +39,7 @@ var SdVideo = class extends SolidElement {
   async hidePoster() {
     if (!(this.poster instanceof HTMLImageElement)) return;
     this.poster.style.opacity = "0";
-    await new Promise((resolve) => setTimeout(resolve, this.token("sd-duration-medium", 300)));
+    await new Promise((resolve) => setTimeout(resolve, this.token("--sd-duration-medium", 300)));
     this.poster.style.display = "none";
   }
   setVideoInert(inert) {
@@ -93,17 +93,18 @@ var SdVideo = class extends SolidElement {
   render() {
     return html`<div part="base" class="cursor-pointer"><button part="play-button" aria-label="${this.localize.term("playVideo")}" tabindex="0" @click="${this.play}" @keydown="${this.handleKeydown}" class="${cx(
       this.playing && "pointer-events-none",
-      "group w-full h-full absolute top-0 left-0 z-30 text-primary hover:text-primary-500 sd-interactive sd-interactive--reset focus-visible:focus-outline"
+      "group w-full h-full absolute top-0 left-0 z-30 text-primary hover:text-primary-500 sd-interactive outline-hidden focus-visible:focus-outline"
     )}"><div part="play-button-bg" class="${cx(
       this.playing ? "opacity-0" : "opacity-100",
       this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
-      "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline"
+      "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white/75 rounded-full play-pause-transition group-focus-visible:outline-2 group-focus-visible:outline-offset-2"
     )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-icon id="default-play-icon" library="_internal" name="start"></sd-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
   }
 };
 SdVideo.styles = [
   ...SolidElement.styles,
-  css`:host{display:inline-block;overflow:hidden;position:relative}.play-pause-transition,::slotted([slot=poster]){--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-duration:var(--sd-duration-medium,.3s);transition-property:opacity,transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}#default-play-icon,::slotted([slot=play-icon]){left:50%;position:absolute;top:50%;--tw-translate-x:-50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:has([part=play-button]:hover) ::slotted([slot=poster]){--tw-scale-x:1.1!important;--tw-scale-y:1.1!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{position:relative;display:inline-block;overflow:hidden}.play-pause-transition,::slotted([slot=poster]){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);transition-property:opacity,scale;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms));--tw-duration:var(--sd-duration-medium, 300ms);transition-duration:var(--sd-duration-medium,300ms);--tw-ease:var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}#default-play-icon,::slotted([slot=play-icon]){position:absolute;top:calc(1/2 * 100%);left:calc(1/2 * 100%);--tw-translate-x:calc(calc(1/2 * 100%) * -1)!important;--tw-translate-y:calc(calc(1/2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important;transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}:has([part=play-button]:hover) ::slotted([slot=poster]){--tw-scale-x:110%!important;--tw-scale-y:110%!important;--tw-scale-z:110%!important;scale:var(--tw-scale-x) var(--tw-scale-y)!important}@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}@property --tw-ease{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   query("[part=base]")

package/dist/chunks/{chunk.V257WRGF.js → chunk.PJOYWTXL.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -83,7 +83,8 @@ var SdTeaser = class extends SolidElement {
 };
 SdTeaser.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}::slotted(*){margin:var(--sd-spacing-0,0)}::slotted([slot=headline]){font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700;margin:var(--sd-spacing-0,0)!important}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{display:block}::slotted(*){margin:calc(var(--sd-spacing-1) * 0)}::slotted([slot=headline]){margin:calc(var(--sd-spacing-1) * 0)!important;font-size:var(--sd-text-lg)!important;line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))!important;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold)}@property --tw-font-weight{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })

package/dist/chunks/{chunk.3YQ55DEG.js → chunk.QHUH3UZT.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -113,7 +113,12 @@ var SdExpandable = class extends SolidElement {
 };
 SdExpandable.styles = [
   ...SolidElement.styles,
-  css`:host{--component-expandable-max-block-size:90px;--gradient-height:24px;--gradient:var(--gradient-color-start,hsla(0,0%,100%,0)) 0%,var(--gradient-color-end,#fff) 80%,var(--gradient-color-end,#fff) 100%;display:inline-block;position:relative;width:100%}.toggle::-moz-focus-inner{border-style:none;padding:var(--sd-spacing-0,0)}details>summary::-webkit-details-marker,details[open] summary{display:none}summary{max-block-size:var(--component-expandable-max-block-size)}:host([open]) summary{max-block-size:var(--max-height-pixel,1000vh)}.content{max-block-size:var(--component-expandable-max-block-size)}:host([open]) .content,:host:has(.transitioning) .content{max-block-size:var(--max-height-pixel,1000vh)}.content:after{background:linear-gradient(180deg,var(--gradient));bottom:var(--sd-spacing-0,0);content:" ";display:block;height:var(--gradient-height);left:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);position:absolute;transition-duration:.15s;transition-duration:var(--sd-duration-medium,.3s);transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}:host([inverted]){--color-primary-rgb:0,53,142;--gradient-color-start:rgba(var(--color-primary-rgb),0);--gradient-color-end:rgba(var(--color-primary-rgb),1)}:host([inverted]) .content:after{background:var(--gradient-vertical-transparent-primary,linear-gradient(180deg,var(--gradient)))}:host(:not([open])) .content:after{opacity:var(--sd-opacity-100,1)}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{--component-expandable-max-block-size:90px;--gradient-height:24px;--gradient:var(
+              --gradient-color-start,
+              transparent,
+              var(--gradient-color-end, var(--sd-color-background-white, var(--sd-color-white)))
+            ) 80%,var(--gradient-color-end, var(--sd-color-background-white, var(--sd-color-white))) 100%;position:relative;display:inline-block;width:100%}.toggle::-moz-focus-inner{--tw-border-style:none;border-style:none;padding:calc(var(--sd-spacing-1) * 0)}details>summary::-webkit-details-marker,details[open] summary{display:none}summary{max-block-size:var(--component-expandable-max-block-size)}:host([open]) summary{max-block-size:var(--max-height-pixel,1000vh)}.content{max-block-size:var(--component-expandable-max-block-size)}:host([open]) .content,:host:has(.transitioning) .content{max-block-size:var(--max-height-pixel,1000vh)}.content::after{position:absolute;bottom:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);display:block;width:100%;opacity:var(--sd-opacity-0);transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms));--tw-duration:var(--sd-duration-medium, 300ms);transition-duration:var(--sd-duration-medium,300ms);--tw-ease:var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));content:' ';height:var(--gradient-height);background:linear-gradient(180deg,var(--gradient))}:host([inverted]){--color-primary-rgb:0,53,142;--gradient-color-start:rgba(var(--color-primary-rgb), 0);--gradient-color-end:rgba(var(--color-primary-rgb), 1)}:host([inverted]) .content::after{background:var(--gradient-vertical-transparent-primary,linear-gradient(180deg,var(--gradient)))}:host(:not([open])) .content::after{opacity:var(--sd-opacity-100)}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   query(".content-preview")

package/dist/chunks/{chunk.TED3AFLN.js → chunk.QJ2PELD5.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -90,7 +90,8 @@ var SdStepGroup = class extends SolidElement {
 };
 SdStepGroup.styles = [
   ...SolidElement.styles,
-  css`:host{width:-moz-max-content;width:max-content}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{width:-moz-max-content;width:max-content}`
 ];
 __decorateClass([
   query("[part=body]")

package/dist/chunks/{chunk.G4FXGRRH.js → chunk.RIWKWSAL.js}

@@ -30,7 +30,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   animateTo,
   stopAnimations
@@ -200,20 +200,21 @@ var SdDrawer = class extends SolidElement {
       "top-0 start-0 w-full h-full pointer-events-none overflow-hidden",
       this.contained ? "absolute" : "fixed"
     )}" aria-label="${this.label}"><div part="overlay" class="${cx(
-      "block top-0 left-0 right-0 bottom-0 bg-neutral-800/75 pointer-events-auto",
+      "block top-0 left-0 right-0 bottom-0 overlay-color-background pointer-events-auto",
       this.contained ? "absolute" : "fixed"
     )}" @click="${() => this.requestClose("overlay")}"></div><div part="panel" class="${cx(
       "absolute flex flex-col gap-4 z-10 max-w-full max-h-full bg-white shadow-lg overflow-auto pointer-events-auto focus:outline-none",
       {
-        end: "top-0 end-0 bottom-auto start-auto w-[--width] h-full",
-        start: "top-0 end-auto bottom-auto start-0 w-[--width] h-full"
+        end: "top-0 end-0 bottom-auto start-auto w-[var(--width)] h-full",
+        start: "top-0 end-auto bottom-auto start-0 w-[var(--width)] h-full"
       }[this.placement]
     )}" role="dialog" aria-modal="true" aria-label="${this.label}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:64px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ms-4 absolute top-2 end-2"><sd-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-icon></sd-button></div></header>` : html`<sd-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-icon></sd-button>`}<div part="body" class="flex-auto block px-4 focus-visible:focus-outline !-outline-offset-2" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></section>`;
   }
 };
 SdDrawer.styles = [
   ...SolidElement.styles,
-  css`:host{--width:25rem;display:contents}:host([contained]){z-index:auto}:host(:not([contained])){z-index:var(--sd-z-index-drawer,700)}[part=body]{-webkit-overflow-scrolling:touch;overflow-y:scroll;scrollbar-width:none}[part=body]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{--width:25rem;display:contents}:host([contained]){z-index:initial}:host(:not([contained])){z-index:var(--sd-z-index-drawer,700)}[part=body]{-webkit-overflow-scrolling:touch;overflow-y:scroll;scrollbar-width:none}[part=body]::-webkit-scrollbar{height:calc(var(--sd-spacing-1) * 0);width:calc(var(--sd-spacing-1) * 0)}:host [part=panel]{outline:1px solid var(--sd-panel-color-border,transparent)}`
 ];
 __decorateClass([
   query("[part=base]")