@solid-design-system/components 6.16.5 → 6.17.1

package/dist/chunks/{chunk.7LLWTMC3.js → chunk.FKPD6TIK.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass,
   __spreadValues
@@ -267,7 +267,7 @@ var SdTabGroup = class extends SolidElement {
 SdTabGroup.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.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:calc(var(--sd-spacing-1) * 0);width:calc(var(--sd-spacing-1) * 0)}::slotted(sd-tab-panel){--padding:1rem 0}::slotted(sd-tab-panel:focus-visible){outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:rgba(var(--outline-color-primary))}`
+: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-tab-panel){--padding:1rem 0}::slotted(sd-tab-panel:focus-visible){outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary)}`
 ];
 __decorateClass([
   query("[part=base]")

package/dist/chunks/{chunk.X7XDUKGF.js → chunk.GQEY7HYL.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.6SZCCE7T.js → chunk.GU6XT67W.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.MMI44BVI.js → chunk.GXX7ZVMH.js}

@@ -30,7 +30,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.4FQGHIRS.js → chunk.HPHV4VKP.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.AJJI7TJL.js → chunk.HPYZXPZN.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,

package/dist/chunks/{chunk.IRPULK4T.js → chunk.IOIU7TDJ.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.CDI4YMFV.js → chunk.IQMEFOSJ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.JYR67QON.js → chunk.JZSKAHSL.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.FXZL5TSR.js → chunk.KENPAY6Q.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.5DLSMYYF.js → chunk.KQYOSLIW.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.4WJBOMWG.js → chunk.KVQN5R3X.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.E2USZ7GU.js → chunk.MACL5DD6.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.js";
@@ -312,7 +312,7 @@ var SdAudio = class extends SolidElement {
 SdAudio.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-sd-button::part(base){display:flex;height:var(--sd-spacing-12);width:var(--sd-spacing-12);align-items:center;justify-content:center;border-radius:var(--sd-radius-full)}sd-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-button::part(label){display:flex;flex-grow:0;align-items:center}sd-range::part(form-control-label){display:none}:host([inverted]) sd-range::part(thumb){outline-color:var(--color-white,#fff);background-color:rgba(var(--sd-color-icon-fill-white,rgba(var(--sd-color-white))))}:host([animated]) sd-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-range::part(track){background-color:rgba(var(--sd-audio__slide-bar--inverted-color-background,rgba(var(--sd-color-primary-400))))}:host([inverted]:not([animated])) sd-range::part(active-track){background-color:rgba(var(--sd-audio__track-bar--inverted-color-background,rgba(var(--sd-color-white))))}.sd-audio__timestamp-color-text{color:rgb(var(--sd-audio__timestamp-color-text,var(--sd-color-text-neutral-700)))}`
+sd-button::part(base){display:flex;height:var(--sd-spacing-12);width:var(--sd-spacing-12);align-items:center;justify-content:center;border-radius:var(--sd-radius-full)}sd-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-button::part(label){display:flex;flex-grow:0;align-items:center}sd-range::part(form-control-label){display:none}:host([inverted]) sd-range::part(thumb){outline-color:rgba(var(--sd-color-border-white,var(--sd-color-white)));background-color:rgba(var(--sd-color-icon-fill-white,rgba(var(--sd-color-white))))}:host([animated]) sd-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-range::part(track){background-color:rgba(var(--sd-audio__slide-bar--inverted-color-background,rgba(var(--sd-color-primary-400))))}:host([inverted]:not([animated])) sd-range::part(active-track){background-color:rgba(var(--sd-audio__track-bar--inverted-color-background,rgba(var(--sd-color-white))))}.sd-audio__timestamp-color-text{color:rgb(var(--sd-audio__timestamp-color-text,var(--sd-color-text-neutral-700)))}`
 ];
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "reversed-layout" })

package/dist/chunks/{chunk.JT57FH4I.js → chunk.MFLCJDVY.js}

@@ -26,7 +26,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.P6YK6F7T.js → chunk.N4W5UD4U.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.FV63VR7F.js → chunk.NMS67TKX.js}

@@ -21,7 +21,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.NAD637BO.js → chunk.NO5K5NRM.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -129,7 +129,7 @@ var SdCheckbox = class extends SolidElement {
     )}"><input class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.indeterminate ? "mixed" : this.checked}" aria-describedby="invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"} ${this.indeterminate ? " control--indeterminate" : ""}" class="${cx(
       "relative flex flex-shrink-0 items-center justify-center border sd-checkbox-border-width rounded-sm h-4 w-4",
       "transition-colors ease-in-out duration-medium group-hover:duration-fast",
-      "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary",
+      "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary outline-transparent",
       {
         sm: "mt-[2px]",
         md: "mt-[3px]",

package/dist/chunks/{chunk.7YOG7JGW.js → chunk.RC4YZBAG.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -113,7 +113,7 @@ var SdMenuItem = class extends SolidElement {
 SdMenuItem.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{--submenu-offset:-6px;display:block}:host(:focus-visible){--tw-outline-style:none;outline-style:none}::slotted(sd-icon){height:var(--sd-spacing-6);width:var(--sd-spacing-6)}[part=checked-icon]{margin-right:var(--sd-spacing-3)}.submenu-expanded::after{position:fixed;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);bottom:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);z-index:calc(var(z-dropdown) - 1);--tw-content:'';content:var(--tw-content);clip-path:polygon(var(--safe-triangle-cursor-x,0) var(--safe-triangle-cursor-y,0),var(--safe-triangle-submenu-start-x,0) var(--safe-triangle-submenu-start-y,0),var(--safe-triangle-submenu-end-x,0) var(--safe-triangle-submenu-end-y,0))}:host(:hover:not([aria-disabled=true],:focus-visible)) [part=base]{background-color:rgba(var(--sd-color-background-neutral-200));--tw-outline-style:none;outline-style:none}:host(:focus-visible:not([aria-disabled=true])) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:rgba(var(--outline-color-primary));outline-offset:-2px}:host(.menu-item-focus) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:rgba(var(--outline-color-primary));outline-offset:-2px}:host(:hover) [part=base]{--tw-outline-style:none;outline-style:none}//TODO clean up sd-menu-color-icon variable replacing with sd-menu-item-color-icon-fill (breakingchange) :host [part=icon-indent],:host [part=checked-icon],:host [part=submenu-icon]{color:rgba(var(--sd-menu-color-icon,var(--sd-menu-item-color-icon-fill)))}//TODO clean up sd-menu--disabled-color-icon variable replacing with sd-menu-item--disabled-color-icon-fill (breakingchange) :host([aria-disabled=true]) [part=icon-indent]{color:rgba(var(--sd-menu--disabled-color-icon,var(--sd-menu-item--disabled-color-icon-fill)))}sd-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);background-color:rgba(var(--sd-color-background-white));margin-left:var(--submenu-offset)}::slotted(sd-menu){max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}.sd-menu-color-text{color:rgba(var(--sd-menu-color-text,var(--sd-menu-item-color-text)))}.sd-menu--disabled-color-text{color:rgba(var(--sd-menu--disabled-color-text,var(--sd-menu-item--disabled-color-text)))}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
+:host{--submenu-offset:-6px;display:block}:host(:focus-visible){--tw-outline-style:none;outline-style:none}::slotted(sd-icon){height:var(--sd-spacing-6);width:var(--sd-spacing-6)}[part=checked-icon]{margin-right:var(--sd-spacing-3)}.submenu-expanded::after{position:fixed;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);bottom:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);z-index:calc(var(z-dropdown) - 1);--tw-content:'';content:var(--tw-content);clip-path:polygon(var(--safe-triangle-cursor-x,0) var(--safe-triangle-cursor-y,0),var(--safe-triangle-submenu-start-x,0) var(--safe-triangle-submenu-start-y,0),var(--safe-triangle-submenu-end-x,0) var(--safe-triangle-submenu-end-y,0))}:host(:hover:not([aria-disabled=true],:focus-visible)) [part=base]{background-color:rgba(var(--sd-color-background-neutral-200));--tw-outline-style:none;outline-style:none}:host(:focus-visible:not([aria-disabled=true])) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary);outline-offset:-2px}:host(.menu-item-focus) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary);outline-offset:-2px}:host(:hover) [part=base]{--tw-outline-style:none;outline-style:none}//TODO clean up sd-menu-color-icon variable replacing with sd-menu-item-color-icon-fill (breakingchange) :host [part=icon-indent],:host [part=checked-icon],:host [part=submenu-icon]{color:rgba(var(--sd-menu-color-icon,var(--sd-menu-item-color-icon-fill)))}//TODO clean up sd-menu--disabled-color-icon variable replacing with sd-menu-item--disabled-color-icon-fill (breakingchange) :host([aria-disabled=true]) [part=icon-indent]{color:rgba(var(--sd-menu--disabled-color-icon,var(--sd-menu-item--disabled-color-icon-fill)))}sd-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);background-color:rgba(var(--sd-color-background-white));margin-left:var(--submenu-offset)}::slotted(sd-menu){max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}.sd-menu-color-text{color:rgba(var(--sd-menu-color-text,var(--sd-menu-item-color-text)))}.sd-menu--disabled-color-text{color:rgba(var(--sd-menu--disabled-color-text,var(--sd-menu-item--disabled-color-text)))}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
 ];
 __decorateClass([
   query("slot:not([name])")

package/dist/chunks/{chunk.Y226ELYU.js → chunk.RJQAUVFZ.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.AQU3K3QW.js → chunk.S4SI3HWM.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.PO2OMSAQ.js → chunk.SBC2I6JO.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.FRVVZRCH.js → chunk.T27MZUKA.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.S3AIPHMB.js → chunk.UQIEZ6RZ.js}

@@ -35,7 +35,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.ANNKBF6X.js → chunk.USC7EHJV.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.2EDPY2A5.js → chunk.VDMPM2P2.js}

@@ -27,7 +27,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.XDGNL4X6.js → chunk.VLHNMJ5F.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.JCFYB72C.js → chunk.VSWXW4QR.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.FJM4XRBD.js → chunk.W76DK5Q3.js}

@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.RXD64SUC.js → chunk.WC2SM7KI.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -114,7 +114,7 @@ var SdSwitch = class extends SolidElement {
     )}"><input id="input" class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" role="switch" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.checked ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" aria-describedby="invalid-message" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"}" class="${cx(
       `relative flex flex-initial items-center justify-center border rounded-full h-4 w-8 transition-colors ease duration-100
             peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2
-            peer-focus-visible:outline-primary transition-colors ease-in-out duration-medium hover:duration-fast`,
+            peer-focus-visible:outline-primary outline-transparent transition-colors ease-in-out duration-medium hover:duration-fast`,
       this.disabled && this.checked ? "bg-neutral-500" : this.disabled ? "border-neutral-500" : this.showInvalidStyle ? this.checked ? "border-error bg-error hover:bg-error-400 hover:border-error-400 group-hover:border-error-400 group-hover:bg-error-400" : "border-error bg-white hover:border-error-400 hover:bg-white group-hover:border-error-400 group-hover:bg-white" : this.checked ? "border-accent hover:sd-switch--checked--hover-color-background bg-accent hover:border-accent-550 group-hover:sd-switch--checked--hover-color-background" : "sd-switch--unchecked-color-border bg-white hover:bg-neutral-200 group-hover:bg-neutral-200"
     )}"><span id="thumb" part="thumb" class="${cx(
       "w-2.5 h-2.5 rounded-full transition[transform,colors] ease-in-out duration-medium",

package/dist/chunks/{chunk.3PROMK3G.js → chunk.WG6PNLWA.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,

package/dist/chunks/{chunk.6GDF7RP6.js → chunk.WOZA4YTR.js}

@@ -7,13 +7,13 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
 
 // src/components/step/step.ts
-import { css } from "lit";
+import { css, nothing } from "lit";
 import { html, literal } from "lit/static-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { property } from "lit/decorators.js";
@@ -73,6 +73,10 @@ var SdStep = class extends SolidElement {
     }
   }
   render() {
+    if (this.size === "xs" && this.orientation !== "vertical") {
+      console.warn('Size "xs" is only supported when orientation is "vertical". The element will not be rendered.');
+      return nothing;
+    }
     const isLink = this.isLink();
     const tag = this.notInteractive || this.waiting ? literal`div` : isLink ? literal`a` : literal`button`;
     const hasLabelSlot = this.hasSlotController.test("label");
@@ -85,27 +89,29 @@ var SdStep = class extends SolidElement {
       this.noTail && !isHorizontalInline && "w-max",
       this.orientation === "horizontal" ? "flex-row" : "flex-col items-stretch",
       isHorizontalInline && "items-start",
-      this.orientation === "horizontal" && !this.horizontalInline ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" ? "mt-1" : "mt-3"
+      this.orientation === "horizontal" && !this.horizontalInline ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" || this.size === "xs" ? "mt-1" : "mt-3"
     );
     const circleButtonClasses = cx(
       "border sd-step__circle-border-width rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
       this.disabled ? "focus-visible:outline-none cursor-not-allowed" : !this.notInteractive && !this.waiting ? "focus-visible:focus-outline hover:cursor-pointer" : "",
-      this.notInteractive ? this.size === "lg" ? "not-interactive-lg" : "w-12" : this.size === "lg" ? "w-12" : "w-8",
+      this.notInteractive ? this.size === "lg" ? "not-interactive-lg" : this.size === "xs" ? "w-2" : "w-12" : this.size === "lg" ? "w-12" : this.size === "xs" ? "w-2" : "w-8",
       this.disabled && "border-neutral-500 text-neutral-500",
       this.waiting && "border-neutral-400 text-neutral-700",
+      this.waiting && this.size === "xs" && "border-neutral-700",
       !this.disabled && !this.current && !this.notInteractive && !this.waiting && "border-primary hover:bg-primary-100 hover:border-primary-500",
-      this.notInteractive && "border-neutral-400",
+      this.notInteractive && (this.size === "xs" ? "border-primary" : "border-neutral-400"),
       this.current && "bg-accent border-none text-white"
     );
+    const listItemClasses = "flex-row items-stretch h-full w-full overflow-hidden";
     return html`<div role="listitem" part="base" class="${cx(
       "flex pt-1",
-      this.orientation === "horizontal" ? "flex-col w-full" : "flex-row gap-4 items-stretch h-full w-full overflow-hidden",
+      this.orientation === "horizontal" ? "flex-col w-full" : this.size === "xs" ? `${listItemClasses} gap-2` : `${listItemClasses} gap-4`,
       !this.disabled && !this.current && !this.notInteractive && !this.waiting && "group"
     )}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"><div part="circle-and-tail-container" class="${circleAndTailContainerClasses}"><${tag} part="circle" href="${ifDefined(isLink ? this.href : void 0)}" aria-disabled="${ifDefined(this.disabled || this.waiting || void 0)}" aria-current="${this.current ? "step" : void 0}" aria-labelledby="${ifDefined(this.notInteractive || this.waiting || !hasLabel ? void 0 : "label")}" aria-describedby="${ifDefined(this.notInteractive || this.waiting || !hasDescription ? void 0 : "description")}" class="${circleButtonClasses}"><slot name="circle-content" class="${cx(
       "text-lg",
       !this.disabled && !this.current && !this.notInteractive && !this.waiting && "text-primary hover:text-primary-500 hover:fill-primary-500",
       this.notInteractive && "sd-step-color-text"
-    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting ? html`<sd-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-icon>` : html`${this.index}`}</slot></${tag}>${isHorizontalInline ? html`<div class="${cx(!this.noTail && "flex-1", "flex flex-col gap-1")}"><div class="${cx(
+    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting && this.size !== "xs" ? html`<sd-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-icon>` : this.size === "xs" ? "" : html`${this.index}`}</slot></${tag}>${isHorizontalInline ? html`<div class="${cx(!this.noTail && "flex-1", "flex flex-col gap-1")}"><div class="${cx(
       "flex w-full",
       hasLabel && "gap-2",
       this.size === "sm" && !hasDescription ? "mt-1" : "mt-3"
@@ -118,19 +124,20 @@ var SdStep = class extends SolidElement {
       "border-t flex-1 mr-2 mt-3",
       !this.disabled && !this.current && !this.notInteractive && !this.waiting ? "border-primary group-hover:border-primary-500" : "border-neutral-500"
     )}"></div>` : ""}</div>${hasDescription ? html`<div part="description" id="description" class="${cx(
-      "sd-paragraph sd-paragraph--size-sm break-words",
+      "sd-paragraph sd-paragraph--size-sm wrap-break-word",
       hasDescription ? "flex-1" : "w-0 h-0 overflow-hidden",
       hasDescription && !this.noTail && "pr-4",
       (this.disabled || this.waiting) && "!text-neutral-700"
     )}">${this.description || html`<slot></slot>`}</div>` : ""}</div>` : this.noTail ? "" : html`<div part="tail" class="${cx(
-      this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",
+      this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l grow shrink-0 basis-auto h-full w-[1px] mx-auto",
       !this.disabled && !this.current && !this.notInteractive && !this.waiting ? "border-primary group-hover:border-primary-500" : "border-neutral-400"
     )}"></div>`}</div>${!isHorizontalInline ? html`<div part="text-container" class="${cx(
-      "mt-4 break-words flex flex-col gap-2",
+      "wrap-break-word flex flex-col gap-2",
+      this.size === "xs" ? "-mt-1 mb-4" : "mt-4",
       this.orientation === "horizontal" ? "text-center w-40" : "text-left",
       this.disabled && "text-neutral-500",
       this.waiting && "text-neutral-700",
-      this.notInteractive ? "ml-2" : "mr-4"
+      this.notInteractive ? this.size === "xs" ? "ml-0" : "ml-2" : "mr-4"
     )}"><div part="label" id="label" class="${cx(
       "font-bold",
       this.disabled && "text-neutral-500",

package/dist/chunks/{chunk.27CORLGD.js → chunk.XF6FDNUR.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.K7OGNZLO.js → chunk.ZGCNF5LQ.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.WV4VZLSM.js → chunk.ZR5RDB6B.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XNTGIC2L.js";
+} from "./chunk.37VMM4OR.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/components/accordion/accordion.js

@@ -1,9 +1,9 @@
 import {
   SdAccordion
-} from "../../chunks/chunk.4YGFM4I2.js";
+} from "../../chunks/chunk.4VG6NHCU.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.FJM4XRBD.js";
+import "../../chunks/chunk.W76DK5Q3.js";
 import "../../chunks/chunk.GKH647YK.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.6SPABX2F.js";
@@ -14,7 +14,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.X4IYFUX6.js";
 import "../../chunks/chunk.BT6SAX2H.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.XNTGIC2L.js";
+import "../../chunks/chunk.37VMM4OR.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/accordion-group/accordion-group.js

@@ -1,10 +1,10 @@
 import {
   SdAccordionGroup
-} from "../../chunks/chunk.JCFYB72C.js";
-import "../../chunks/chunk.4YGFM4I2.js";
+} from "../../chunks/chunk.VSWXW4QR.js";
+import "../../chunks/chunk.4VG6NHCU.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.FJM4XRBD.js";
+import "../../chunks/chunk.W76DK5Q3.js";
 import "../../chunks/chunk.GKH647YK.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.6SPABX2F.js";
@@ -15,7 +15,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.X4IYFUX6.js";
 import "../../chunks/chunk.BT6SAX2H.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.XNTGIC2L.js";
+import "../../chunks/chunk.37VMM4OR.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/animation/animation.js

@@ -1,9 +1,9 @@
 import {
   SdAnimation
-} from "../../chunks/chunk.FRVVZRCH.js";
+} from "../../chunks/chunk.T27MZUKA.js";
 import "../../chunks/chunk.TJOP7HQP.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.XNTGIC2L.js";
+import "../../chunks/chunk.37VMM4OR.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/audio/audio.js

@@ -1,18 +1,18 @@
 import {
   SdAudio
-} from "../../chunks/chunk.E2USZ7GU.js";
-import "../../chunks/chunk.MMI44BVI.js";
+} from "../../chunks/chunk.MACL5DD6.js";
+import "../../chunks/chunk.GXX7ZVMH.js";
 import "../../chunks/chunk.SF6AUNJF.js";
 import "../../chunks/chunk.EDMG7C5H.js";
 import "../../chunks/chunk.UMIKFOMI.js";
 import "../../chunks/chunk.WDWV53JP.js";
-import "../../chunks/chunk.ANNKBF6X.js";
-import "../../chunks/chunk.36OESV3O.js";
+import "../../chunks/chunk.USC7EHJV.js";
+import "../../chunks/chunk.EQ3WBPH5.js";
 import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.FJM4XRBD.js";
+import "../../chunks/chunk.W76DK5Q3.js";
 import "../../chunks/chunk.GKH647YK.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.6SPABX2F.js";
@@ -23,7 +23,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.X4IYFUX6.js";
 import "../../chunks/chunk.BT6SAX2H.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.XNTGIC2L.js";
+import "../../chunks/chunk.37VMM4OR.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.S3NI7NKU.js";

package/dist/components/badge/badge.js

@@ -1,7 +1,7 @@
 import {
   SdBadge
-} from "../../chunks/chunk.CDI4YMFV.js";
-import "../../chunks/chunk.XNTGIC2L.js";
+} from "../../chunks/chunk.IQMEFOSJ.js";
+import "../../chunks/chunk.37VMM4OR.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/brandshape/brandshape.js

@@ -1,7 +1,7 @@
 import {
   SdBrandshape
-} from "../../chunks/chunk.KJN55623.js";
-import "../../chunks/chunk.XNTGIC2L.js";
+} from "../../chunks/chunk.DEYMV3AS.js";
+import "../../chunks/chunk.37VMM4OR.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,13 +1,13 @@
 import {
   SdBreadcrumb
-} from "../../chunks/chunk.IXAGOL3L.js";
-import "../../chunks/chunk.FV63VR7F.js";
-import "../../chunks/chunk.X7XDUKGF.js";
+} from "../../chunks/chunk.AXQ65JS3.js";
+import "../../chunks/chunk.NMS67TKX.js";
+import "../../chunks/chunk.GQEY7HYL.js";
 import "../../chunks/chunk.UMIKFOMI.js";
 import "../../chunks/chunk.WDWV53JP.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.FJM4XRBD.js";
+import "../../chunks/chunk.W76DK5Q3.js";
 import "../../chunks/chunk.GKH647YK.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.6SPABX2F.js";
@@ -18,7 +18,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.X4IYFUX6.js";
 import "../../chunks/chunk.BT6SAX2H.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.XNTGIC2L.js";
+import "../../chunks/chunk.37VMM4OR.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {