@solid-design-system/components 3.4.0 → 3.5.0

package/dist/package/components/checkbox/checkbox.js

@@ -134,7 +134,7 @@ let SdCheckbox = class extends SolidElement {
         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"
       }[checkboxState]
-    )}">${this.checked ? html`<sd-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-hook"></sd-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}">${this.checked ? html`<sd-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
       this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
     )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;

package/dist/package/components/icon/library.system.d.ts

@@ -6,11 +6,10 @@ export declare const icons: {
     clock: string;
     close: string;
     'closing-round': string;
-    confirm: string;
     eye: string;
     'eye-crossed-out': string;
     'info-circle': string;
-    'status-hook': string;
+    'status-check': string;
     'status-minus': string;
     pause: string;
     risk: string;

package/dist/package/components/icon/library.system.js

@@ -31,11 +31,6 @@ const icons = {
       <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"/>
       <path d="M16.373 7.627a1 1 0 0 0-1.414 0l-2.96 2.96-2.96-2.96a1 1 0 0 0-1.413 1.414l-.001-.001 2.96 2.96-2.96 2.96a1 1 0 0 0 1.414 1.414l2.96-2.96 2.96 2.96a1 1 0 0 0 1.414-1.414L13.413 12l2.96-2.96a1 1 0 0 0 0-1.414v.001Z"/>
     </svg>`,
-  confirm: `
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path d="M21.528 2.167a1 1 0 0 0-1.384.277l-.002.004-11.333 17-5.127-5.153a1 1 0 0 0-1.413 1.414l-.001-.001 6 6a.997.997 0 0 0 .707.293h.1c.307-.032.57-.199.731-.44l.002-.004 12-18a1 1 0 0 0-.276-1.388l-.004-.002Z"/>
-    </svg>
-  `,
   eye: `
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
       <path d="M12 18.96c-5.263 0-10-5.68-10-6.96 0-1.28 4.737-6.96 10-6.96S22 10.72 22 12c0 1.28-4.737 6.96-10 6.96ZM4.1 12c.76 1.197 4.07 4.96 7.9 4.96s7.14-3.767 7.9-4.96c-.76-1.197-4.07-4.96-7.9-4.96S4.86 10.807 4.1 12Z"/>
@@ -50,8 +45,8 @@ const icons = {
     </svg>
   `,
   "info-circle": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"/><path d="M13.333 7.833a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3.001.001ZM13 11.667a1 1 0 0 0-1-1h-1a1 1 0 0 0 0 2v2.667h2v-3.667Z"/><path d="M11 16.333v-1h-1a1 1 0 0 0 0 2h2a1 1 0 0 1-1-1Zm3-1h-1v1a1 1 0 0 1-1 1h2a1 1 0 0 0 0-2Z"/><path  d="M13 16.333v-1h-2v1a1 1 0 0 0 2 0Z"/></svg>`,
-  "status-hook": `
-    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none">
+  "status-check": `
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 13">
         <path fill="currentColor" d="m9.947 1.138-.005.008-.001.003-5.56 8.34-2.434-2.447-.004-.004a.648.648 0 0 0-1.093.475c0 .172.066.328.175.444l.003.004 3 2.999c.117.117.28.19.46.19h.065c.2-.021.37-.13.475-.286l.005-.008.001-.002 5.994-8.992a.65.65 0 0 0-.18-.902l-.007-.005-.002-.002a.65.65 0 0 0-.892.185Z"/>
     </svg>
   `,

package/dist/package/components/input/input.js

@@ -256,7 +256,7 @@ let SdInput = class extends SolidElement {
       "min-w-0 flex-grow focus:outline-none bg-transparent placeholder-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="${ifDefined(this.type === "password" ? "off" : 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" @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-500", iconSize)}" library="system" 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="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" 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="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="flex items-center" type="button" tabindex="-1"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="magnifying-glass"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="confirm" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" 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="${ifDefined(this.type === "password" ? "off" : 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" @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-500", iconSize)}" library="system" 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="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" 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="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="flex items-center" type="button" tabindex="-1"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="magnifying-glass"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdInput.styles = [

package/dist/package/components/option/option.js

@@ -94,7 +94,7 @@ let SdOption = class extends SolidElement {
     )}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
       "relative flex flex-initial items-center justify-center border rounded-sm h-4 w-4 mr-2",
       this.disabled ? "border-neutral-500" : this.selected ? "bg-accent border-accent" : "border-neutral-800"
-    )}">${this.selected ? html`<sd-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-hook"></sd-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
+    )}">${this.selected ? html`<sd-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
   }
 };
 SdOption.styles = [

package/dist/package/components/select/select.js

@@ -543,7 +543,7 @@ let SdSelect = class extends SolidElement {
       "appearance-none outline-none flex-grow bg-transparent w-full",
       cursorStyles,
       this.multiple && this.useTags && this.value.length > 0 ? "hidden" : ""
-    )}" type="text" placeholder="${this.placeholder}" .disabled="${this.disabled}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled ? "true" : "false"}" aria-describedby="help-text" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${this.multiple && this.useTags ? html`<div part="tags" class="flex-grow flex flex-wrap items-center gap-1">${this.tags}</div>` : ""} <input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("select__clear flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon part="valid-icon" class="${cx("flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="confirm"></sd-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
+    )}" type="text" placeholder="${this.placeholder}" .disabled="${this.disabled}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled ? "true" : "false"}" aria-describedby="help-text" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${this.multiple && this.useTags ? html`<div part="tags" class="flex-grow flex flex-wrap items-center gap-1">${this.tags}</div>` : ""} <input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("select__clear flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon part="valid-icon" class="${cx("flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
       "inline-flex ml-2 transition-all",
       this.open ? "rotate-180" : "rotate-0",
       this.disabled ? "text-neutral-500" : "text-primary",

package/dist/package/components/step/step.d.ts

@@ -0,0 +1,27 @@
+import SolidElement from '../../internal/solid-element';
+export default class SdStep extends SolidElement {
+    size: 'lg' | 'sm';
+    orientation: 'horizontal' | 'vertical';
+    disabled: boolean;
+    current: boolean;
+    noTail: boolean;
+    notInteractive: boolean;
+    label: string;
+    description: string;
+    index: number;
+    href: string;
+    connectedCallback(): void;
+    private isLink;
+    private handleBlur;
+    private handleFocus;
+    handleCurrentChange(): void;
+    handleDisabledChange(): void;
+    handleInteractivityChange(): void;
+    render(): import("lit-html").TemplateResult;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-step': SdStep;
+    }
+}

package/dist/package/components/step/step.js

@@ -0,0 +1,147 @@
+import { unsafeCSS, css } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { literal, html } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property } from "lit/decorators.js";
+import { watch } from "../../internal/watch.js";
+import componentStyles from "../../styles/component.styles.js";
+import cx from "classix";
+import ParagraphStyles from "../../styles/paragraph/paragraph.css.js";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdStep = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.size = "lg";
+    this.orientation = "horizontal";
+    this.disabled = false;
+    this.current = false;
+    this.noTail = false;
+    this.notInteractive = false;
+    this.label = "";
+    this.description = "";
+    this.index = 1;
+    this.href = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleBlur() {
+    this.emit("sd-blur");
+  }
+  handleFocus() {
+    this.emit("sd-focus");
+  }
+  handleCurrentChange() {
+    if (this.current) {
+      this.disabled = false;
+    }
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.current = false;
+    }
+  }
+  handleInteractivityChange() {
+    if (this.notInteractive) {
+      this.current = false;
+      this.disabled = false;
+    }
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = this.notInteractive ? literal`div` : isLink ? literal`a` : literal`button`;
+    return html`<div part="base" class="${cx(
+      "flex pt-1",
+      this.orientation === "horizontal" ? "flex-col w-full" : "flex-row gap-4 items-stretch h-full w-min overflow-hidden",
+      !this.disabled && !this.current && !this.notInteractive && "group"
+    )}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"><div part="circle-and-tail-container" class="${cx(
+      "flex shrink-0 gap-2",
+      this.noTail && "w-max",
+      this.orientation === "horizontal" ? "flex-row" : "flex-col items-stretch",
+      this.orientation === "horizontal" ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" ? "mt-1" : "mt-3"
+    )}"><${tag} part="circle" ?disabled="${this.disabled}" tabindex="${!this.disabled && !this.current ? "0" : "-1"}" href="${ifDefined(isLink ? this.href : void 0)}" aria-current="${this.current ? "step" : void 0}" aria-label="Step ${this.index}" class="${cx(
+      "border rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
+      !this.disabled && !this.current ? "focus-visible:focus-outline" : "focus-visible:outline-none",
+      this.notInteractive ? this.size === "lg" ? "w-[72px]" : "w-12" : this.size === "lg" ? "w-12" : "w-8",
+      this.disabled && "border-neutral-400 text-neutral-500",
+      !this.disabled && !this.current && !this.notInteractive && "border-primary group-hover:bg-primary-100 group-hover:border-primary-500",
+      this.notInteractive ? "border-neutral-400" : "group-hover:cursor-pointer",
+      this.current && "bg-accent border-none text-white"
+    )}"><slot name="circle-content" class="${cx(
+      !this.disabled && !this.current && !this.notInteractive && "text-primary group-hover:text-primary-500 group-hover:fill-primary-500",
+      this.notInteractive && "text-primary",
+      this.size === "lg" ? "text-lg" : "text-sm"
+    )}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-icon name="status-check" library="system"></sd-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : this.orientation === "horizontal" ? html`<sd-divider part="tail" orientation="horizontal" class="${cx(
+      "w-full my-auto mr-2",
+      !this.disabled && !this.current && !this.notInteractive && "tail-to-primary"
+    )}"></sd-divider>` : html`<sd-divider part="tail" orientation="vertical" class="${cx(
+      "flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",
+      !this.disabled && !this.current && !this.notInteractive && "tail-to-primary"
+    )}"></sd-divider>`}</div><div part="text-container" class="${cx("mt-4 mr-4 break-words flex flex-col gap-2", this.orientation === "horizontal" ? "text-center w-40" : "w-max text-left", this.disabled && "!text-neutral-500")}"><div part="label" class="${cx("!font-bold sd-paragraph", this.disabled && "!text-neutral-500", !this.disabled && !this.current && !this.notInteractive ? "!text-primary group-hover:!text-primary-500 group-hover:cursor-pointer" : "text-black")}"><slot name="label">${this.label}</slot></div><div part="description" class="${cx("sd-paragraph sd-paragraph--size-sm", this.disabled && "!text-neutral-500")}">${this.description || html`<slot></slot>`}</div></div></div>`;
+  }
+};
+SdStep.styles = [
+  SolidElement.styles,
+  componentStyles,
+  unsafeCSS(ParagraphStyles),
+  css`:host{flex:1 1 0%}[part=base]:not(:has(sd-divider)){height:-moz-max-content;height:max-content}:host([no-tail]){flex-grow:0}.translateLg{transform:translateX(55px)}.translateSm{transform:translateX(64px)}.tail-to-primary::part(main){--tw-border-opacity:1!important;border-color:rgb(var(--sd-color-primary,0 53 142) / var(--tw-border-opacity))!important}.group:hover .tail-to-primary::part(main){--tw-border-opacity:1!important;border-color:rgb(var(--sd-color-primary-500,70 109 175) / var(--tw-border-opacity))!important}sd-divider::part(main){--tw-border-opacity:1!important;border-color:rgb(var(--sd-color-neutral-400,195 195 195) / var(--tw-border-opacity))!important}`
+];
+__decorateClass([
+  property({ reflect: true })
+], SdStep.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdStep.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdStep.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdStep.prototype, "current", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean, attribute: "no-tail" })
+], SdStep.prototype, "noTail", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "not-interactive" })
+], SdStep.prototype, "notInteractive", 2);
+__decorateClass([
+  property()
+], SdStep.prototype, "label", 2);
+__decorateClass([
+  property()
+], SdStep.prototype, "description", 2);
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "index" })
+], SdStep.prototype, "index", 2);
+__decorateClass([
+  property()
+], SdStep.prototype, "href", 2);
+__decorateClass([
+  watch("current")
+], SdStep.prototype, "handleCurrentChange", 1);
+__decorateClass([
+  watch("disabled")
+], SdStep.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("notInteractive")
+], SdStep.prototype, "handleInteractivityChange", 1);
+SdStep = __decorateClass([
+  customElement("sd-step")
+], SdStep);
+export {
+  SdStep as default
+};

package/dist/package/components/step-group/step-group.d.ts

@@ -0,0 +1,22 @@
+import SolidElement from '../../internal/solid-element';
+export default class SdStepGroup extends SolidElement {
+    private steps;
+    body: HTMLSlotElement;
+    size: 'lg' | 'sm';
+    orientation: 'horizontal' | 'vertical';
+    activeStep: number;
+    notInteractive: boolean;
+    connectedCallback(): void;
+    updateSize(): void;
+    updateOrientation(): void;
+    private getAllSteps;
+    setActiveStep(index: number): void;
+    handleInteractivityChange(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-step-group': SdStepGroup;
+    }
+}

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

@@ -0,0 +1,127 @@
+import { css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { query, property } from "lit/decorators.js";
+import { watch } from "../../internal/watch.js";
+import componentStyles from "../../styles/component.styles.js";
+import cx from "classix";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdStepGroup = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.steps = [];
+    this.size = "lg";
+    this.orientation = "horizontal";
+    this.activeStep = 0;
+    this.notInteractive = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateComplete.then(() => {
+      this.steps = this.getAllSteps();
+      this.steps[this.steps.length - 1].noTail = true;
+      let activeStep;
+      this.steps.forEach((step, index) => {
+        step.index = index + 1;
+        step.size = this.size;
+        step.orientation = this.orientation;
+        if (this.notInteractive) {
+          step.current = false;
+          step.disabled = false;
+          step.notInteractive = true;
+        } else if (step.current) {
+          activeStep = index;
+        }
+      });
+      this.setActiveStep(activeStep || this.activeStep);
+    });
+  }
+  updateSize() {
+    this.steps.forEach((step) => {
+      step.size = this.size;
+    });
+  }
+  updateOrientation() {
+    this.steps.forEach((step) => {
+      step.orientation = this.orientation;
+    });
+  }
+  getAllSteps() {
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-step");
+  }
+  /**
+   * Sets the active step.
+   * @param index The index of the step to set as active.
+   */
+  setActiveStep(index) {
+    if (index >= 0 && index < this.steps.length && !this.notInteractive) {
+      this.activeStep = index;
+      this.steps.forEach((step, i) => {
+        if (i === index) {
+          step.current = true;
+        } else if (i > index) {
+          step.disabled = true;
+        } else {
+          step.current = false;
+        }
+      });
+    }
+  }
+  handleInteractivityChange() {
+    if (this.notInteractive) {
+      this.steps.forEach((step) => {
+        step.current = false;
+        step.disabled = false;
+        step.notInteractive = true;
+      });
+    }
+  }
+  render() {
+    return html`<div part="base" role="${!this.notInteractive ? "navigation" : "group"}" class="${cx("flex", this.orientation === "vertical" && "flex-col h-full")}"><slot part="body"></slot></div>`;
+  }
+};
+SdStepGroup.styles = [
+  SolidElement.styles,
+  componentStyles,
+  css`:host{width:-moz-max-content;width:max-content}`
+];
+__decorateClass([
+  query("[part=body]")
+], SdStepGroup.prototype, "body", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdStepGroup.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdStepGroup.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "active-step" })
+], SdStepGroup.prototype, "activeStep", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "not-interactive" })
+], SdStepGroup.prototype, "notInteractive", 2);
+__decorateClass([
+  watch("size", { waitUntilFirstUpdate: true })
+], SdStepGroup.prototype, "updateSize", 1);
+__decorateClass([
+  watch("orientation", { waitUntilFirstUpdate: true })
+], SdStepGroup.prototype, "updateOrientation", 1);
+__decorateClass([
+  watch("notInteractive")
+], SdStepGroup.prototype, "handleInteractivityChange", 1);
+SdStepGroup = __decorateClass([
+  customElement("sd-step-group")
+], SdStepGroup);
+export {
+  SdStepGroup as default
+};

package/dist/package/components/textarea/textarea.js

@@ -211,7 +211,7 @@ let SdTextarea = class extends SolidElement {
       "flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="confirm" part="valid-icon"></sd-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdTextarea.styles = [

package/dist/package/solid-components.d.ts

@@ -27,6 +27,8 @@ export { default as SdRadioGroup } from './components/radio-group/radio-group';
 export { default as SdScrollable } from './components/scrollable/scrollable';
 export { default as SdSelect } from './components/select/select';
 export { default as SdSpinner } from './components/spinner/spinner';
+export { default as SdStep } from './components/step/step';
+export { default as SdStepGroup } from './components/step-group/step-group';
 export { default as SdSwitch } from './components/switch/switch';
 export { default as SdTab } from './components/tab/tab';
 export { default as SdTabGroup } from './components/tab-group/tab-group';

package/dist/package/solid-components.js

@@ -27,16 +27,18 @@ import { default as default27 } from "./components/radio-group/radio-group.js";
 import { default as default28 } from "./components/scrollable/scrollable.js";
 import { default as default29 } from "./components/select/select.js";
 import { default as default30 } from "./components/spinner/spinner.js";
-import { default as default31 } from "./components/switch/switch.js";
-import { default as default32 } from "./components/tab/tab.js";
-import { default as default33 } from "./components/tab-group/tab-group.js";
-import { default as default34 } from "./components/tab-panel/tab-panel.js";
-import { default as default35 } from "./components/tag/tag.js";
-import { default as default36 } from "./components/teaser/teaser.js";
-import { default as default37 } from "./components/teaser-media/teaser-media.js";
-import { default as default38 } from "./components/textarea/textarea.js";
-import { default as default39 } from "./components/tooltip/tooltip.js";
-import { default as default40 } from "./components/video/video.js";
+import { default as default31 } from "./components/step/step.js";
+import { default as default32 } from "./components/step-group/step-group.js";
+import { default as default33 } from "./components/switch/switch.js";
+import { default as default34 } from "./components/tab/tab.js";
+import { default as default35 } from "./components/tab-group/tab-group.js";
+import { default as default36 } from "./components/tab-panel/tab-panel.js";
+import { default as default37 } from "./components/tag/tag.js";
+import { default as default38 } from "./components/teaser/teaser.js";
+import { default as default39 } from "./components/teaser-media/teaser-media.js";
+import { default as default40 } from "./components/textarea/textarea.js";
+import { default as default41 } from "./components/tooltip/tooltip.js";
+import { default as default42 } from "./components/video/video.js";
 import { registerIconLibrary, unregisterIconLibrary } from "./components/icon/library.js";
 import { LocalizeController } from "./utilities/localize.js";
 import { setupAutocomplete } from "./utilities/autocomplete-config.js";
@@ -71,16 +73,18 @@ export {
   default28 as SdScrollable,
   default29 as SdSelect,
   default30 as SdSpinner,
-  default31 as SdSwitch,
-  default32 as SdTab,
-  default33 as SdTabGroup,
-  default34 as SdTabPanel,
-  default35 as SdTag,
-  default36 as SdTeaser,
-  default37 as SdTeaserMedia,
-  default38 as SdTextarea,
-  default39 as SdTooltip,
-  default40 as SdVideo,
+  default31 as SdStep,
+  default32 as SdStepGroup,
+  default33 as SdSwitch,
+  default34 as SdTab,
+  default35 as SdTabGroup,
+  default36 as SdTabPanel,
+  default37 as SdTag,
+  default38 as SdTeaser,
+  default39 as SdTeaserMedia,
+  default40 as SdTextarea,
+  default41 as SdTooltip,
+  default42 as SdVideo,
   registerIconLibrary,
   setupAutocomplete,
   unregisterIconLibrary

package/dist/package/styles/paragraph/paragraph.css.js

@@ -0,0 +1,4 @@
+const ParagraphStyles = ".sd-paragraph{font-size:var(--sd-font-size-base,1rem)}.sd-paragraph,.sd-paragraph--size-sm{font-weight:400;line-height:var(--sd-line-height-normal,150%);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity))}.sd-paragraph--size-sm{font-size:var(--sd-font-size-sm,.875rem)}.sd-paragraph--inverted{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}";
+export {
+  ParagraphStyles as default
+};