@solid-design-system/components 3.3.1 → 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/scrollable/scrollable.d.ts

@@ -0,0 +1,28 @@
+import SolidElement from '../../internal/solid-element';
+export default class SdScrollable extends SolidElement {
+    orientation: 'horizontal' | 'vertical' | 'auto';
+    buttons: boolean;
+    step: number;
+    scrollbars: boolean;
+    shadows: boolean;
+    inset: boolean;
+    private canScroll;
+    private isScrollHorizontalEnabled;
+    private isScrollVerticalEnabled;
+    private resizeObserver;
+    private scrollContainer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private updateScrollEnabledFlags;
+    private get container();
+    updateScrollIndicatorVisibility(): void;
+    handleScroll(direction: 'left' | 'right' | 'up' | 'down'): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-scrollable': SdScrollable;
+    }
+}

package/dist/package/components/scrollable/scrollable.js

@@ -0,0 +1,156 @@
+import { unsafeCSS, css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { property, state } from "lit/decorators.js";
+import componentStyles from "../../styles/component.styles.js";
+import cx from "classix";
+import InteractiveStyles from "../../styles/interactive/interactive.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 SdScrollable = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.buttons = false;
+    this.step = 150;
+    this.scrollbars = false;
+    this.shadows = false;
+    this.inset = false;
+    this.canScroll = {
+      left: false,
+      right: false,
+      up: false,
+      down: false
+    };
+    this.isScrollHorizontalEnabled = false;
+    this.isScrollVerticalEnabled = false;
+    this.scrollContainer = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateScrollEnabledFlags();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateScrollIndicatorVisibility();
+    });
+    this.updateComplete.then(() => {
+      this.scrollContainer = this.renderRoot.querySelector(".scroll-container");
+      if (this.scrollContainer) {
+        this.resizeObserver.observe(this.scrollContainer);
+      }
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.scrollContainer) {
+      this.resizeObserver.unobserve(this.scrollContainer);
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("orientation") || changedProperties.has("buttons") || changedProperties.has("shadows")) {
+      this.updateScrollEnabledFlags();
+      this.updateScrollIndicatorVisibility();
+    }
+  }
+  updateScrollEnabledFlags() {
+    const dir = this.orientation;
+    this.isScrollHorizontalEnabled = dir === "horizontal" || dir === "auto";
+    this.isScrollVerticalEnabled = dir === "vertical" || dir === "auto";
+  }
+  get container() {
+    return this.renderRoot.querySelector(".scroll-container");
+  }
+  updateScrollIndicatorVisibility() {
+    const container = this.container;
+    if (container) {
+      const canScrollLeft = this.isScrollHorizontalEnabled && container.scrollLeft > 0;
+      const canScrollRight = this.isScrollHorizontalEnabled && container.scrollLeft + container.clientWidth < container.scrollWidth - 1;
+      const canScrollUp = this.isScrollVerticalEnabled && container.scrollTop > 0;
+      const canScrollDown = this.isScrollVerticalEnabled && container.scrollTop + container.clientHeight < container.scrollHeight - 1;
+      this.canScroll = {
+        left: canScrollLeft,
+        right: canScrollRight,
+        up: canScrollUp,
+        down: canScrollDown
+      };
+      if (canScrollLeft || canScrollUp) {
+        this.dispatchEvent(new CustomEvent("start"));
+      }
+      if (canScrollRight || canScrollDown) {
+        this.dispatchEvent(new CustomEvent("end"));
+      }
+    }
+  }
+  handleScroll(direction) {
+    var _a;
+    const scrollAmount = direction === "left" || direction === "up" ? -this.step : this.step;
+    const scrollDirection = direction === "left" || direction === "right" ? "left" : "top";
+    const scrollOptions = {
+      behavior: "smooth"
+    };
+    scrollOptions[scrollDirection] = scrollAmount;
+    (_a = this.scrollContainer) == null ? void 0 : _a.scrollBy(scrollOptions);
+    const eventName = `button-${direction}`;
+    this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true }));
+  }
+  render() {
+    const scrollButtonClasses = "relative p-0 border-0 bg-transparent cursor-pointer w-5 h-5 flex items-center justify-center sd-interactive rounded-md flex text-lg";
+    const scrollShadowClasses = "scroll-shadow absolute z-10 pointer-events-none";
+    return html`<div part="base" class="${cx(
+      "scroll-container flex overflow-hidden flex-1",
+      this.orientation === "horizontal" && "scroll-horizontal flex-row whitespace-nowrap items-center overflow-x-scroll overflow-y-hidden",
+      this.orientation === "vertical" && "scroll-vertical justify-items-center overflow-y-scroll overflow-x-hidden",
+      this.orientation === "auto" && "scroll-auto overflow-auto",
+      this.scrollbars ? "show-scrollbars" : "hide-scrollbars",
+      this.inset ? "p-4" : ""
+    )}" @scroll="${this.updateScrollIndicatorVisibility}"><div part="scroll-content" class="flex-1"><slot></slot></div></div>${this.buttons ? html`${this.isScrollHorizontalEnabled ? html`${this.canScroll.left ? html`<div part="button-left" class="absolute z-10 flex items-center justify-center top-0 left-0 h-full w-8"><button part="button-start" class="${cx(scrollButtonClasses)}" @click="${() => this.handleScroll("left")}"><slot name="icon-start"><sd-icon library="system" name="chevron-up" class="rotate-[-90deg]"></sd-icon></slot></button></div>` : null} ${this.canScroll.right ? html`<div part="button-right" class="absolute z-10 flex items-center justify-center top-0 right-0 h-full w-8"><button part="button-end" class="${cx(scrollButtonClasses)}" @click="${() => this.handleScroll("right")}"><slot name="icon-end"><sd-icon library="system" name="chevron-down" class="rotate-[-90deg]"></sd-icon></slot></button></div>` : null}` : null} ${this.isScrollVerticalEnabled ? html`${this.canScroll.up ? html`<div part="button-top" class="absolute z-10 flex items-center justify-center top-0 left-0 w-full h-8"><button part="button-start" class="${cx(scrollButtonClasses)}" @click="${() => this.handleScroll("up")}"><slot name="icon-start"><sd-icon library="system" name="chevron-up"></sd-icon></slot></button></div>` : null} ${this.canScroll.down ? html`<div part="button-bottom" class="absolute z-10 flex items-center justify-center bottom-0 left-0 w-full h-8"><button part="button-end" class="${cx(scrollButtonClasses)}" @click="${() => this.handleScroll("down")}"><slot name="icon-end"><sd-icon library="system" name="chevron-down"></sd-icon></slot></button></div>` : null}` : null}` : null} ${this.shadows ? html`${this.isScrollHorizontalEnabled ? html`${this.canScroll.left ? html`<div part="shadow-left" class="${scrollShadowClasses} left top-0 left-0 w-[6px] h-full"></div>` : null} ${this.canScroll.right ? html`<div part="shadow-right" class="${scrollShadowClasses} right top-0 right-0 w-[6px] h-full"></div>` : null}` : null} ${this.isScrollVerticalEnabled ? html`${this.canScroll.up ? html`<div part="shadow-top" class="${scrollShadowClasses} top top-0 left-0 w-full h-[6px]"></div>` : null} ${this.canScroll.down ? html`<div part="shadow-bottom" class="${scrollShadowClasses} bottom bottom-0 left-0 w-full h-[6px]"></div>` : null}` : null}` : null}`;
+  }
+};
+SdScrollable.styles = [
+  SolidElement.styles,
+  unsafeCSS(InteractiveStyles),
+  componentStyles,
+  css`:host{--gradient-color:rgba(255, 255, 255, 0);--gradient:var(--gradient-color) 0%,#fff 80%,#fff 100%;position:relative;display:flex;overflow:hidden}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-border-radius-sm,.125rem)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1,.25rem);width:var(--sd-spacing-1,.25rem)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,rgba(24,24,24,0) 50%,rgba(24,24,24,.4) 100%)}[part=shadow-right]{background:linear-gradient(90deg,rgba(24,24,24,0) 50%,rgba(24,24,24,.4) 100%)}[part=shadow-top]{background:linear-gradient(0deg,rgba(24,24,24,0) 50%,rgba(24,24,24,.4) 100%)}[part=shadow-bottom]{background:linear-gradient(180deg,rgba(24,24,24,0) 50%,rgba(24,24,24,.4) 100%)}.sd-icon--top{align-self:flex-start}.sd-icon--down{align-self:flex-end}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdScrollable.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdScrollable.prototype, "buttons", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], SdScrollable.prototype, "step", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdScrollable.prototype, "scrollbars", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdScrollable.prototype, "shadows", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdScrollable.prototype, "inset", 2);
+__decorateClass([
+  state()
+], SdScrollable.prototype, "canScroll", 2);
+__decorateClass([
+  state()
+], SdScrollable.prototype, "isScrollHorizontalEnabled", 2);
+__decorateClass([
+  state()
+], SdScrollable.prototype, "isScrollVerticalEnabled", 2);
+SdScrollable = __decorateClass([
+  customElement("sd-scrollable")
+], SdScrollable);
+export {
+  SdScrollable as default
+};

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 = [