@solid-design-system/components 1.25.0 → 1.27.0

package/dist/versioned-package/components/checkbox/checkbox.js

@@ -54,7 +54,7 @@ let SdCheckbox = class extends SolidElement {
     this.emit("sd-blur");
   }
   handleInput() {
-    this.emit("sd-1-25-0-input");
+    this.emit("sd-1-27-0-input");
   }
   handleInvalid(event) {
     this.formControlController.setValidity(false);
@@ -106,7 +106,7 @@ let SdCheckbox = class extends SolidElement {
   }
   render() {
     return html`<label part="base" class="${cx(
-      "sd-1-25-0-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-1-27-0-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       this.disabled && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -122,7 +122,7 @@ let SdCheckbox = class extends SolidElement {
         lg: "mt-[3px]"
       }[this.size],
       this.disabled && this.indeterminate && "border-neutral-500 bg-neutral-500" || this.disabled && this.checked && "border-neutral-500 bg-neutral-500" || this.disabled && "border-neutral-500" || (this.checked || this.indeterminate) && "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550" || "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
-    )}">${this.checked ? html`<sd-1-25-0-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-hook"></sd-1-25-0-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-1-25-0-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-1-25-0-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}">${this.checked ? html`<sd-1-27-0-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-hook"></sd-1-27-0-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-1-27-0-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-1-27-0-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2 text-black",
       this.disabled && "text-neutral-500" || "text-neutral-800"
     )}"><slot></slot></span></label>`;
@@ -172,7 +172,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-1-25-0-checkbox")
+  customElement("sd-1-27-0-checkbox")
 ], SdCheckbox);
 export {
   SdCheckbox as default

package/dist/versioned-package/components/checkbox-group/checkbox-group.d.ts

@@ -15,6 +15,6 @@ export default class SdCheckboxGroup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-25-0-checkbox-group': SdCheckboxGroup;
+        'sd-1-27-0-checkbox-group': SdCheckboxGroup;
     }
 }

package/dist/versioned-package/components/checkbox-group/checkbox-group.js

@@ -27,7 +27,7 @@ let SdCheckboxGroup = class extends SolidElement {
     this.orientation = "vertical";
   }
   getAllCheckboxes() {
-    return [...this.querySelectorAll("sd-1-25-0-checkbox")];
+    return [...this.querySelectorAll("sd-1-27-0-checkbox")];
   }
   async syncCheckboxElements() {
     const checkboxes = this.getAllCheckboxes();
@@ -43,10 +43,10 @@ let SdCheckboxGroup = class extends SolidElement {
     }
   }
   syncCheckboxes() {
-    if (customElements.get("sd-1-25-0-checkbox")) {
+    if (customElements.get("sd-1-27-0-checkbox")) {
       this.syncCheckboxElements();
     } else {
-      customElements.whenDefined("sd-1-25-0-checkbox").then(() => this.syncCheckboxes());
+      customElements.whenDefined("sd-1-27-0-checkbox").then(() => this.syncCheckboxes());
     }
   }
   handleSizeChange() {
@@ -77,7 +77,7 @@ let SdCheckboxGroup = class extends SolidElement {
 SdCheckboxGroup.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-1-25-0-checkbox){margin-bottom:8px;display:flex}:host([orientation=vertical]) ::slotted(sd-1-25-0-checkbox:last-of-type){margin-bottom:0}:host([orientation=horizontal]) ::slotted(sd-1-25-0-checkbox){margin-right:24px}:host([size=sm]):host([orientation=horizontal]) ::slotted(sd-1-25-0-checkbox){margin-right:16px}:host([orientation=horizontal]) ::slotted(sd-1-25-0-checkbox:last-of-type){margin-right:0}`
+  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-1-27-0-checkbox){margin-bottom:8px;display:flex}:host([orientation=vertical]) ::slotted(sd-1-27-0-checkbox:last-of-type){margin-bottom:0}:host([orientation=horizontal]) ::slotted(sd-1-27-0-checkbox){margin-right:24px}:host([size=sm]):host([orientation=horizontal]) ::slotted(sd-1-27-0-checkbox){margin-right:16px}:host([orientation=horizontal]) ::slotted(sd-1-27-0-checkbox:last-of-type){margin-right:0}`
 ];
 __decorateClass([
   property()
@@ -95,7 +95,7 @@ __decorateClass([
   watch("invalid", { waitUntilFirstUpdate: true })
 ], SdCheckboxGroup.prototype, "handleInvalid", 1);
 SdCheckboxGroup = __decorateClass([
-  customElement("sd-1-25-0-checkbox-group")
+  customElement("sd-1-27-0-checkbox-group")
 ], SdCheckboxGroup);
 export {
   SdCheckboxGroup as default

package/dist/versioned-package/components/divider/divider.d.ts

@@ -8,6 +8,6 @@ export default class SdDivider extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-25-0-divider': SdDivider;
+        'sd-1-27-0-divider': SdDivider;
     }
 }

package/dist/versioned-package/components/divider/divider.js

@@ -35,7 +35,7 @@ let SdDivider = class extends SolidElement {
 SdDivider.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{margin:0}:host(sd-1-25-0-divider[orientation=horizontal]){display:block}:host(sd-1-25-0-divider[orientation=vertical]){display:inline-block}`
+  css`:host{margin:0}:host(sd-1-27-0-divider[orientation=horizontal]){display:block}:host(sd-1-27-0-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ reflect: true })
@@ -44,7 +44,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDivider.prototype, "inverted", 2);
 SdDivider = __decorateClass([
-  customElement("sd-1-25-0-divider")
+  customElement("sd-1-27-0-divider")
 ], SdDivider);
 export {
   SdDivider as default

package/dist/versioned-package/components/drawer/drawer.d.ts

@@ -29,6 +29,6 @@ export default class SdDrawer extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-25-0-drawer': SdDrawer;
+        'sd-1-27-0-drawer': SdDrawer;
     }
 }

package/dist/versioned-package/components/drawer/drawer.js

@@ -183,7 +183,7 @@ let SdDrawer = class extends SolidElement {
         end: "top-0 end-0 bottom-auto start-auto w-[--width] h-full",
         start: "top-0 end-auto bottom-auto start-0 w-[--width] h-full"
       }[this.placement]
-    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.label}" aria-labelledby="${ifDefined(!this.noHeader ? "title" : void 0)}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-1-25-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-1-25-0-icon name="close" library="system"></sd-1-25-0-icon></sd-1-25-0-button></div></header>` : ""}<div part="body" class="flex-auto block px-4"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></div>`;
+    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.label}" aria-labelledby="${ifDefined(!this.noHeader ? "title" : void 0)}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-1-27-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-1-27-0-icon name="close" library="system"></sd-1-27-0-icon></sd-1-27-0-button></div></header>` : ""}<div part="body" class="flex-auto block px-4"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDrawer.styles = [
@@ -221,7 +221,7 @@ __decorateClass([
   watch("contained", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleNoModalChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-1-25-0-drawer")
+  customElement("sd-1-27-0-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

package/dist/versioned-package/components/dropdown/dropdown.d.ts

@@ -44,6 +44,6 @@ export default class SdDropdown extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-25-0-dropdown': SdDropdown;
+        'sd-1-27-0-dropdown': SdDropdown;
     }
 }

package/dist/versioned-package/components/dropdown/dropdown.js

@@ -170,7 +170,7 @@ let SdDropdown = class extends SolidElement {
   // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
   // a child of the slotted element, or an element in the slotted element's shadow root.
   //
-  // For example, the accessible trigger of an <sd-1-25-0-button> is a <button> located inside its shadow root.
+  // For example, the accessible trigger of an <sd-1-27-0-button> is a <button> located inside its shadow root.
   //
   // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
   //
@@ -180,8 +180,8 @@ let SdDropdown = class extends SolidElement {
     let target;
     if (accessibleTrigger) {
       switch (accessibleTrigger.tagName.toLowerCase()) {
-        case "sd-1-25-0-button":
-        case "sd-1-25-0-icon-button":
+        case "sd-1-27-0-button":
+        case "sd-1-27-0-icon-button":
           target = accessibleTrigger.button;
           break;
         default:
@@ -257,11 +257,11 @@ let SdDropdown = class extends SolidElement {
     }
   }
   render() {
-    return html`<sd-1-25-0-popup part="base" id="dropdown" placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10" ?active="${this.open}"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
+    return html`<sd-1-27-0-popup part="base" id="dropdown" placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10" ?active="${this.open}"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
       "shadow bg-white",
       this.open ? "block pointer-events-auto" : "pointer-events-none",
       this.rounded && "rounded-md"
-    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-1-25-0-popup>`;
+    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-1-27-0-popup>`;
   }
 };
 SdDropdown.styles = [
@@ -315,7 +315,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDropdown.prototype, "handleOpenChange", 1);
 SdDropdown = __decorateClass([
-  customElement("sd-1-25-0-dropdown")
+  customElement("sd-1-27-0-dropdown")
 ], SdDropdown);
 setDefaultAnimation("dropdown.show", {
   keyframes: [

package/dist/versioned-package/components/header/header.d.ts

@@ -18,6 +18,6 @@ export default class SdHeader extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-25-0-header': SdHeader;
+        'sd-1-27-0-header': SdHeader;
     }
 }

package/dist/versioned-package/components/header/header.js

@@ -64,11 +64,11 @@ let SdHeader = class extends SolidElement {
   setCalculatedHeightProperty() {
     if (this.fixed && this.refHeaderElement) {
       document.documentElement.style.setProperty(
-        "--sd-1-25-0-header-calculated-height",
+        "--sd-1-27-0-header-calculated-height",
         `${this.refHeaderElement.clientHeight}px`
       );
     } else {
-      document.documentElement.style.removeProperty("--sd-1-25-0-header-calculated-height");
+      document.documentElement.style.removeProperty("--sd-1-27-0-header-calculated-height");
     }
   }
   render() {
@@ -85,7 +85,7 @@ let SdHeader = class extends SolidElement {
 SdHeader.styles = [
   SolidElement.styles,
   componentStyles,
-  css`:host{display:block}:host([fixed]){position:fixed;top:0;left:0;width:100%}:host([fixed]) header::after{content:'';position:absolute;left:0;right:0;top:100%;height:8px;background:var(--gradient-vertical-black-40-transparent,linear-gradient(0deg,#18181800 50%,#18181866 100%))}[part=main]{width:var(--sd-1-25-0-header-inner-width);max-width:var(--sd-1-25-0-header-inner-max-width);padding:var(--sd-1-25-0-header-padding,12px 16px)}`
+  css`:host{display:block}:host([fixed]){position:fixed;top:0;left:0;width:100%}:host([fixed]) header::after{content:'';position:absolute;left:0;right:0;top:100%;height:8px;background:var(--gradient-vertical-black-40-transparent,linear-gradient(0deg,#18181800 50%,#18181866 100%))}[part=main]{width:var(--sd-1-27-0-header-inner-width);max-width:var(--sd-1-27-0-header-inner-max-width);padding:var(--sd-1-27-0-header-padding,12px 16px)}`
 ];
 __decorateClass([
   property({ reflect: true, type: Boolean })
@@ -94,7 +94,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "onResize", 1);
 SdHeader = __decorateClass([
-  customElement("sd-1-25-0-header")
+  customElement("sd-1-27-0-header")
 ], SdHeader);
 export {
   SdHeader as default

package/dist/versioned-package/components/icon/icon.d.ts

@@ -17,6 +17,6 @@ export default class SdIcon extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-25-0-icon': SdIcon;
+        'sd-1-27-0-icon': SdIcon;
     }
 }

package/dist/versioned-package/components/icon/icon.js

@@ -123,7 +123,7 @@ __decorateClass([
   watch(["name", "src", "library"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-1-25-0-icon")
+  customElement("sd-1-27-0-icon")
 ], SdIcon);
 export {
   SdIcon as default

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

@@ -15,6 +15,9 @@ export declare const icons: {
     pause: string;
     risk: string;
     start: string;
+    'confirm-circle': string;
+    warning: string;
+    'exclamation-circle': string;
 };
 declare const systemLibrary: IconLibrary;
 export default systemLibrary;

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

@@ -75,7 +75,13 @@ const icons = {
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
       <path d="m57.44 29.76-37.333-24A2.667 2.667 0 0 0 16 8v48a2.668 2.668 0 0 0 2.667 2.666 2.672 2.672 0 0 0 1.45-.431l-.01.005 37.333-24a2.67 2.67 0 0 0 1.192-2.221c0-.923-.47-1.74-1.184-2.216l-.01-.006.002-.037ZM21.333 51.112V12.89l29.734 19.112-29.734 19.11Z"/>
     </svg>
-  `
+  `,
+  "confirm-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="M15.843 7.473a.999.999 0 0 0-1.367.329l-.002.004-3.667 6.223-1.757-1.753a1 1 0 0 0-1.413 1.414l-.001-.001 2.667 2.667a.997.997 0 0 0 .695.31h.128c.314-.042.578-.223.731-.479l.003-.005 4.333-7.333a1 1 0 0 0-.345-1.374l-.005-.003v.001Z"/></svg>`,
+  warning: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.893 2.55295C12.725 2.22395 12.388 2.00195 12 2.00195C11.612 2.00195 11.275 2.22295 11.109 2.54695L2.10598 20.553C2.03998 20.683 2.00098 20.837 2.00098 21C2.00098 21.552 2.44798 21.999 2.99998 22H21C21.552 21.999 21.999 21.552 21.999 21C21.999 20.837 21.96 20.683 21.891 20.548L21.894 20.554L12.893 2.55295ZM4.61698 20L12 5.23695L19.383 20H4.61698Z"/><path d="M11 10.667V15C11 15.552 11.448 16 12 16C12.552 16 13 15.552 13 15V10.667C13 10.115 12.552 9.66695 12 9.66695C11.448 9.66695 11 10.115 11 10.667Z"/><path d="M13 18C13 18.552 12.552 19 12 19C11.448 19 11 18.552 11 18C11 17.448 11.448 17 12 17C12.552 17 13 17.448 13 18Z"/></svg>`,
+  "exclamation-circle": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 17C13 17.552 12.552 18 12 18C11.448 18 11 17.552 11 17C11 16.448 11.448 16 12 16C12.552 16 13 16.448 13 17Z"/><path d="M12 6C11.448 6 11 6.448 11 7V13C11 13.552 11.448 14 12 14C12.552 14 13 13.552 13 13V7C13 6.448 12.552 6 12 6Z"/><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12 20C7.582 20 4 16.418 4 12C4 7.582 7.582 4 12 4C16.418 4 20 7.582 20 12C20 16.418 16.418 20 12 20Z"/></svg>`
 };
 const systemLibrary = {
   name: "system",

package/dist/versioned-package/components/include/include.d.ts

@@ -11,6 +11,6 @@ export default class SdInclude extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-25-0-include': SdInclude;
+        'sd-1-27-0-include': SdInclude;
     }
 }

package/dist/versioned-package/components/include/include.js

@@ -66,7 +66,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-1-25-0-include")
+  customElement("sd-1-27-0-include")
 ], SdInclude);
 export {
   SdInclude as default

package/dist/versioned-package/components/input/input.d.ts

@@ -71,6 +71,6 @@ export default class SdInput extends SolidElement implements SolidFormControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-25-0-input': SdInput;
+        'sd-1-27-0-input': SdInput;
     }
 }

package/dist/versioned-package/components/input/input.js

@@ -101,7 +101,7 @@ let SdInput = class extends SolidElement {
   handleClearClick(event) {
     this.value = "";
     this.emit("sd-clear");
-    this.emit("sd-1-25-0-input");
+    this.emit("sd-1-27-0-input");
     this.emit("sd-change");
     this.input.focus();
     event.stopPropagation();
@@ -113,7 +113,7 @@ let SdInput = class extends SolidElement {
   handleInput() {
     this.value = this.input.value;
     this.formControlController.updateValidity();
-    this.emit("sd-1-25-0-input");
+    this.emit("sd-1-27-0-input");
   }
   handleInvalid() {
     this.formControlController.setValidity(false);
@@ -261,7 +261,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-1-25-0-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-1-25-0-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-1-25-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-1-25-0-icon></slot>` : html`<slot name="hide-password-icon"><sd-1-25-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-1-25-0-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-1-25-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-1-25-0-icon>` : ""} ${this.type === "time" ? html`<sd-1-25-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-1-25-0-icon>` : ""} ${isInvalid ? html`<sd-1-25-0-icon class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-1-25-0-icon>` : ""} ${isValid ? html`<sd-1-25-0-icon class="${cx("text-success", iconMarginLeft, iconSize)}" library="system" name="confirm"></sd-1-25-0-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 ? "false" : "true"}">${this.helpText}</slot></div>`;
+    )}" 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-1-27-0-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-1-27-0-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-1-27-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-1-27-0-icon></slot>` : html`<slot name="hide-password-icon"><sd-1-27-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-1-27-0-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-1-27-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-1-27-0-icon>` : ""} ${this.type === "time" ? html`<sd-1-27-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-1-27-0-icon>` : ""} ${isInvalid ? html`<sd-1-27-0-icon class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-1-27-0-icon>` : ""} ${isValid ? html`<sd-1-27-0-icon class="${cx("text-success", iconMarginLeft, iconSize)}" library="system" name="confirm"></sd-1-27-0-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 ? "false" : "true"}">${this.helpText}</slot></div>`;
   }
 };
 SdInput.styles = [
@@ -383,7 +383,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdInput.prototype, "handleValueChange", 1);
 SdInput = __decorateClass([
-  customElement("sd-1-25-0-input")
+  customElement("sd-1-27-0-input")
 ], SdInput);
 export {
   SdInput as default

package/dist/versioned-package/components/link/link.d.ts

@@ -17,6 +17,6 @@ export default class SdLink extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-25-0-link': SdLink;
+        'sd-1-27-0-link': SdLink;
     }
 }

package/dist/versioned-package/components/link/link.js

@@ -77,7 +77,7 @@ let SdLink = class extends SolidElement {
 };
 SdLink.styles = [
   SolidElement.styles,
-  css`::slotted(sd-1-25-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-25-0-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-25-0-icon){font-size:1.5rem}`
+  css`::slotted(sd-1-27-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-27-0-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-27-0-icon){font-size:1.5rem}`
 ];
 __decorateClass([
   query("a")
@@ -101,7 +101,7 @@ __decorateClass([
   property()
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-1-25-0-link")
+  customElement("sd-1-27-0-link")
 ], SdLink);
 export {
   SdLink as default

package/dist/versioned-package/components/navigation-item/navigation-item.d.ts

@@ -26,6 +26,6 @@ export default class SdNavigationItem extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-25-0-navigation-item': SdNavigationItem;
+        'sd-1-27-0-navigation-item': SdNavigationItem;
     }
 }

package/dist/versioned-package/components/navigation-item/navigation-item.js

@@ -105,10 +105,10 @@ let SdNavigationItem = class extends SolidElement {
       isAccordion ? "grow" : "w-full",
       slots["description"] ? "pb-1" : horizontalPaddingBottom,
       this.calculatePaddingX()
-    )}">${this.divider && this.vertical ? html`<sd-1-25-0-divider part="divider" class="${cx("w-full transition-all absolute -top-[1px] left-0", this.calculatePaddingX())}"></sd-1-25-0-divider>` : ""} <span class="inline-flex items-center flex-auto"><slot part="content" class="inline"></slot></span>${(this.chevron || slots["children"]) && this.vertical ? html`<sd-1-25-0-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
+    )}">${this.divider && this.vertical ? html`<sd-1-27-0-divider part="divider" class="${cx("w-full transition-all absolute -top-[1px] left-0", this.calculatePaddingX())}"></sd-1-27-0-divider>` : ""} <span class="inline-flex items-center flex-auto"><slot part="content" class="inline"></slot></span>${(this.chevron || slots["children"]) && this.vertical ? html`<sd-1-27-0-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
       "h-6 w-6 ml-2 transition-all",
       isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-1-25-0-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(
+    )}"></sd-1-27-0-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(
       "inline-block text-sm text-left text-black",
       isAccordion ? "grow" : "w-full",
       horizontalPaddingBottom,
@@ -159,7 +159,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdNavigationItem.prototype, "open", 2);
 SdNavigationItem = __decorateClass([
-  customElement("sd-1-25-0-navigation-item")
+  customElement("sd-1-27-0-navigation-item")
 ], SdNavigationItem);
 export {
   SdNavigationItem as default

package/dist/versioned-package/components/notification/notification.d.ts

@@ -0,0 +1,31 @@
+import SolidElement from '../../internal/solid-element.js';
+export default class SdNotification extends SolidElement {
+    private autoHideTimeout;
+    private readonly localize;
+    base: HTMLElement;
+    open: boolean;
+    closable: boolean;
+    variant: 'info' | 'success' | 'error' | 'warning';
+    toastStack: 'top-right' | 'bottom-center';
+    duration: number;
+    durationIndicator: boolean;
+    private remainingDuration;
+    private startTime;
+    firstUpdated(): void;
+    private startAutoHide;
+    private onHover;
+    private onHoverEnd;
+    private handleCloseClick;
+    handleOpenChange(): Promise<void>;
+    handleDurationChange(): void;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    toast(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-1-27-0-notification': SdNotification;
+    }
+}