@solid-design-system/components 4.6.6 → 4.6.7

package/dist-versioned/chunks/chunk.3PS24RCT.js

@@ -0,0 +1,224 @@
+import {
+  LocalizeController
+} from "./chunk.YKM42GKF.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.TXYWAHFM.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/scrollable/scrollable.ts
+import { css, html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+import cx from "classix";
+var SdScrollable = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.orientation = "horizontal";
+    this.scrollbars = false;
+    this.buttons = false;
+    this.shadows = false;
+    this.inset = false;
+    this.step = 150;
+    this.canScroll = {
+      left: false,
+      right: false,
+      up: false,
+      down: false
+    };
+    this.isScrollHorizontalEnabled = false;
+    this.isScrollVerticalEnabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateScrollEnabledFlags();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.handleContainerScroll();
+    });
+    this.updateComplete.then(() => {
+      if (this.container) {
+        this.resizeObserver.observe(this.container);
+      }
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.container) {
+      this.resizeObserver.unobserve(this.container);
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("orientation") || changedProperties.has("buttons") || changedProperties.has("shadows")) {
+      this.updateScrollEnabledFlags();
+      this.handleContainerScroll();
+    }
+  }
+  updateScrollEnabledFlags() {
+    const dir = this.orientation;
+    this.isScrollHorizontalEnabled = dir === "horizontal" || dir === "auto";
+    this.isScrollVerticalEnabled = dir === "vertical" || dir === "auto";
+  }
+  get scrollButtons() {
+    return {
+      left: this.leftButton,
+      right: this.rightButton,
+      up: this.upButton,
+      down: this.downButton
+    };
+  }
+  handleContainerScroll() {
+    if (!this.container) {
+      return;
+    }
+    const canScrollLeft = this.isScrollHorizontalEnabled && this.container.scrollLeft > 0;
+    const canScrollRight = this.isScrollHorizontalEnabled && this.container.scrollLeft + this.container.clientWidth < this.container.scrollWidth - 1;
+    const canScrollUp = this.isScrollVerticalEnabled && this.container.scrollTop > 0;
+    const canScrollDown = this.isScrollVerticalEnabled && this.container.scrollTop + this.container.clientHeight < this.container.scrollHeight - 1;
+    this.canScroll = {
+      left: this.isScrollHorizontalEnabled && canScrollLeft,
+      right: this.isScrollHorizontalEnabled && canScrollRight,
+      up: this.isScrollVerticalEnabled && canScrollUp,
+      down: this.isScrollVerticalEnabled && canScrollDown
+    };
+    const startEventTriggered = canScrollLeft || canScrollUp;
+    const endEventTriggered = canScrollRight || canScrollDown;
+    if (startEventTriggered) {
+      this.dispatchEvent(new CustomEvent("start"));
+    }
+    if (endEventTriggered) {
+      this.dispatchEvent(new CustomEvent("end"));
+    }
+  }
+  handleScroll(direction, e) {
+    var _a, _b, _c;
+    const amount = ["left", "up"].includes(direction) ? -this.step : this.step;
+    const axis = ["left", "right"].includes(direction) ? "horizontal" : "vertical";
+    const towards = ["left", "up"].includes(direction) ? "start" : "end";
+    const isKeyboardTriggered = !["mouse", "touch"].includes((_a = e == null ? void 0 : e.pointerType) != null ? _a : "");
+    const scrollKey = axis === "horizontal" ? "left" : "top";
+    (_b = this.container) == null ? void 0 : _b.scrollBy({
+      behavior: "smooth",
+      [scrollKey]: amount
+    });
+    const eventName = `button-${direction}`;
+    this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true }));
+    const currentPosition = axis === "horizontal" ? this.container.scrollLeft : this.container.scrollTop;
+    const updatedPosition = currentPosition + amount;
+    const limit = axis === "horizontal" ? this.container.scrollWidth - this.container.clientWidth : this.container.scrollHeight - this.container.clientHeight;
+    const reachedStart = towards === "start" && updatedPosition <= 0;
+    const reachedEnd = towards === "end" && updatedPosition >= limit - 1;
+    if (!(reachedStart || reachedEnd)) {
+      const announcement = this.localize.term("scrolled");
+      this.announcementContainer.textContent = this.announcementContainer.textContent === announcement ? `${announcement}\u200B` : announcement;
+      return;
+    }
+    const clickedButton = this.scrollButtons[direction];
+    const oppositeButton = {
+      left: this.rightButton,
+      right: this.leftButton,
+      up: this.downButton,
+      down: this.upButton
+    }[direction];
+    const label = reachedStart ? `${this.localize.term("scrolled")}. ${this.localize.term("scrollToEnd")}` : `${this.localize.term("scrolled")}. ${this.localize.term("scrollToStart")}`;
+    (_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-4-6-7-icon")) == null ? void 0 : _c.setAttribute("label", label);
+    if (isKeyboardTriggered) {
+      oppositeButton == null ? void 0 : oppositeButton.focus();
+    } else {
+      clickedButton == null ? void 0 : clickedButton.blur();
+    }
+  }
+  handleButtonBlur(direction, e) {
+    var _a;
+    const scrollTo = ["left", "up"].includes(direction) ? "start" : "end";
+    const label = scrollTo === "start" ? this.localize.term("scrollToStart") : this.localize.term("scrollToEnd");
+    const button = e.target;
+    (_a = button.querySelector("sd-4-6-7-icon")) == null ? void 0 : _a.setAttribute("label", label);
+  }
+  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.scrollbars ? "show-scrollbars" : "hide-scrollbars",
+      this.inset && "p-4",
+      {
+        horizontal: "scroll-horizontal flex-row whitespace-nowrap items-center overflow-x-scroll overflow-y-hidden",
+        vertical: "scroll-vertical justify-items-center overflow-y-scroll overflow-x-hidden",
+        auto: "scroll-auto overflow-auto"
+      }[this.orientation]
+    )}" @scroll="${this.handleContainerScroll}" tabindex="0"><div id="announcement-container" role="status" class="sr-only"></div><div part="scroll-content" class="flex-1"><slot></slot></div></div>${this.buttons ? html`${this.isScrollHorizontalEnabled ? html`<div part="button-left" class="${cx(
+      "absolute z-10 flex items-center justify-center top-0 left-0 h-full w-8",
+      !this.canScroll.left && "opacity-0 pointer-events-none"
+    )}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.left || void 0)}" tabindex="${ifDefined(!this.canScroll.left ? -1 : void 0)}" @click="${(e) => this.handleScroll("left", e)}" @blur="${(e) => this.handleButtonBlur("left", e)}"><slot name="icon-start"><sd-4-6-7-icon library="system" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-4-6-7-icon></slot></button></div><div part="button-right" class="${cx(
+      "absolute z-10 flex items-center justify-center top-0 right-0 h-full w-8",
+      !this.canScroll.right && "opacity-0 pointer-events-none"
+    )}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.right || void 0)}" tabindex="${ifDefined(!this.canScroll.right ? -1 : void 0)}" @click="${(e) => this.handleScroll("right", e)}" @blur="${(e) => this.handleButtonBlur("right", e)}"><slot name="icon-end"><sd-4-6-7-icon library="system" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-4-6-7-icon></slot></button></div>` : null} ${this.isScrollVerticalEnabled ? html`<div part="button-top" class="${cx(
+      "absolute z-10 flex items-center justify-center top-0 left-0 w-full h-8",
+      !this.canScroll.up && "opacity-0 pointer-events-none"
+    )}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.up || void 0)}" tabindex="${ifDefined(!this.canScroll.up ? -1 : void 0)}" @click="${(e) => this.handleScroll("up", e)}" @blur="${(e) => this.handleButtonBlur("up", e)}"><slot name="icon-start"><sd-4-6-7-icon library="system" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-4-6-7-icon></slot></button></div><div part="button-bottom" class="${cx(
+      "absolute z-10 flex items-center justify-center bottom-0 left-0 w-full h-8",
+      !this.canScroll.down && "opacity-0 pointer-events-none"
+    )}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.down || void 0)}" tabindex="${ifDefined(!this.canScroll.down ? -1 : void 0)}" @click="${(e) => this.handleScroll("down", e)}" @blur="${(e) => this.handleButtonBlur("down", e)}"><slot name="icon-end"><sd-4-6-7-icon library="system" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-4-6-7-icon></slot></button></div>` : 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,
+  css`:host{--gradient-color:hsla(0,0%,100%,0);--gradient:var(--gradient-color) 0%,#fff 80%,#fff 100%;display:flex;overflow:hidden;position:relative}.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,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-right]{background:linear-gradient(90deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-top]{background:linear-gradient(0deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-bottom]{background:linear-gradient(180deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}.sd-4-6-7-icon--top{align-self:flex-start}.sd-4-6-7-icon--down{align-self:flex-end}`
+];
+__decorateClass([
+  query('[part="button-right"] button')
+], SdScrollable.prototype, "rightButton", 2);
+__decorateClass([
+  query('[part="button-left"] button')
+], SdScrollable.prototype, "leftButton", 2);
+__decorateClass([
+  query('[part="button-bottom"] button')
+], SdScrollable.prototype, "downButton", 2);
+__decorateClass([
+  query('[part="button-top"] button')
+], SdScrollable.prototype, "upButton", 2);
+__decorateClass([
+  query(".scroll-container")
+], SdScrollable.prototype, "container", 2);
+__decorateClass([
+  query("#announcement-container")
+], SdScrollable.prototype, "announcementContainer", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdScrollable.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdScrollable.prototype, "scrollbars", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdScrollable.prototype, "buttons", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdScrollable.prototype, "shadows", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdScrollable.prototype, "inset", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], SdScrollable.prototype, "step", 2);
+__decorateClass([
+  state()
+], SdScrollable.prototype, "canScroll", 2);
+__decorateClass([
+  state()
+], SdScrollable.prototype, "isScrollHorizontalEnabled", 2);
+__decorateClass([
+  state()
+], SdScrollable.prototype, "isScrollVerticalEnabled", 2);
+SdScrollable = __decorateClass([
+  customElement("sd-4-6-7-scrollable")
+], SdScrollable);
+
+export {
+  SdScrollable
+};

package/dist-versioned/chunks/chunk.6DKXZWRN.js

@@ -10,7 +10,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
     var _a, _b;
     const ul = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("ul");
     ul == null ? void 0 : ul.setAttribute("part", "listbox");
-    const popup = document.createElement("sd-4-6-6-popup");
+    const popup = document.createElement("sd-4-6-7-popup");
     popup.appendChild(ul);
     (_b = sdInput.shadowRoot) == null ? void 0 : _b.appendChild(popup);
     popup == null ? void 0 : popup.setAttribute("exportparts", "popup__content");
@@ -22,7 +22,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
       popup.anchor = sdInput;
       popup.sync = "width";
     }
-    const styles = css`sd-4-6-6-popup::part(popup){border-bottom-left-radius:var(--sd-border-radius-default,.25rem);border-bottom-right-radius:var(--sd-border-radius-default,.25rem);border-width:0 2px 2px;overflow-y:scroll;z-index:var(--sd-z-index-dropdown,900);--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-6-6-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-4-6-6-popup li:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--tw-bg-opacity,1))}sd-4-6-6-popup li{list-style-type:""}sd-4-6-6-popup li mark{background-color:transparent;font-weight:700}sd-4-6-6-popup li:not(:has(sd-4-6-6-option)){cursor:pointer;font-size:var(--sd-font-size-base,1rem);padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-4,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity,1))}sd-4-6-6-popup li:not(:has(sd-4-6-6-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-4-6-6-popup li[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}`;
+    const styles = css`sd-4-6-7-popup::part(popup){border-bottom-left-radius:var(--sd-border-radius-default,.25rem);border-bottom-right-radius:var(--sd-border-radius-default,.25rem);border-width:0 2px 2px;overflow-y:scroll;z-index:var(--sd-z-index-dropdown,900);--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-6-7-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-4-6-7-popup li:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--tw-bg-opacity,1))}sd-4-6-7-popup li{list-style-type:""}sd-4-6-7-popup li mark{background-color:transparent;font-weight:700}sd-4-6-7-popup li:not(:has(sd-4-6-7-option)){cursor:pointer;font-size:var(--sd-font-size-base,1rem);padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-4,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity,1))}sd-4-6-7-popup li:not(:has(sd-4-6-7-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-4-6-7-popup li[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}`;
     const styleSheet = new CSSStyleSheet();
     styleSheet.replaceSync(styles);
     sdInput.shadowRoot.adoptedStyleSheets = [...sdInput.shadowRoot.adoptedStyleSheets, styleSheet];
@@ -35,13 +35,13 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
   }
   input.addEventListener("open", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-6-6-popup")) == null ? void 0 : _b.setAttribute("active", "true");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-6-7-popup")) == null ? void 0 : _b.setAttribute("active", "true");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.add("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.add("z-50");
   });
   input.addEventListener("close", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-6-6-popup")) == null ? void 0 : _b.removeAttribute("active");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-6-7-popup")) == null ? void 0 : _b.removeAttribute("active");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.remove("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.remove("z-50");
   });

package/dist-versioned/chunks/{chunk.BZQIZT43.js → chunk.6VCNAVH4.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -118,7 +118,7 @@ var SdCheckbox = class extends SolidElement {
   render() {
     const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
     return html`<label part="base" class="${cx(
-      "sd-4-6-6-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-4-6-7-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -144,7 +144,7 @@ var 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-4-6-6-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-6-6-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-4-6-6-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-4-6-6-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}">${this.checked ? html`<sd-4-6-7-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-6-7-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-4-6-7-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-4-6-7-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
     )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
@@ -206,7 +206,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-4-6-6-checkbox")
+  customElement("sd-4-6-7-checkbox")
 ], SdCheckbox);
 
 export {

package/dist-versioned/chunks/{chunk.EBZNAZNX.js → chunk.6WU4LF5Z.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -182,7 +182,7 @@ var SdNotification = class extends SolidElement {
         () => {
           toastStack.removeChild(this);
           resolve();
-          if (toastStack.querySelector("sd-4-6-6-notification") === null) {
+          if (toastStack.querySelector("sd-4-6-7-notification") === null) {
             toastStack.remove();
           }
         },
@@ -199,15 +199,15 @@ var SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-4-6-6-icon name="${{
+    )}"><sd-4-6-7-icon name="${{
       info: "info-circle",
       success: "confirm-circle",
       warning: "exclamation-circle",
       error: "warning"
-    }[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-4-6-6-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-4-6-7-icon></slot><div part="content" class="${cx(
       "h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
       "border-solid border-[1px] border-l-0 border-neutral-400"
-    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-4-6-6-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-4-6-6-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-6-6-icon></sd-4-6-6-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div>`;
+    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-4-6-7-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-4-6-7-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-6-7-icon></sd-4-6-7-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div>`;
   }
 };
 /**
@@ -248,7 +248,7 @@ __decorateClass([
   watch("duration")
 ], SdNotification.prototype, "handleDurationChange", 1);
 SdNotification = __decorateClass([
-  customElement("sd-4-6-6-notification")
+  customElement("sd-4-6-7-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.CSBLXELN.js → chunk.AOWIHO7B.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -137,7 +137,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-4-6-6-brandshape")
+  customElement("sd-4-6-7-brandshape")
 ], SdBrandshape);
 
 export {

package/dist-versioned/chunks/{chunk.CAJZPZNE.js → chunk.CKKINYND.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -64,7 +64,7 @@ __decorateClass([
   query('[part="base"]')
 ], SdTeaserMedia.prototype, "teaserMedia", 2);
 SdTeaserMedia = __decorateClass([
-  customElement("sd-4-6-6-teaser-media")
+  customElement("sd-4-6-7-teaser-media")
 ], SdTeaserMedia);
 
 export {

package/dist-versioned/chunks/{chunk.VFCTC43F.js → chunk.CTZX4JSW.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -323,7 +323,7 @@ __decorateClass([
   property({ attribute: "auto-size-padding", type: Number })
 ], SdPopup.prototype, "autoSizePadding", 2);
 SdPopup = __decorateClass([
-  customElement("sd-4-6-6-popup")
+  customElement("sd-4-6-7-popup")
 ], SdPopup);
 
 export {

package/dist-versioned/chunks/{chunk.WQNN2PQR.js → chunk.DIVJNSSG.js}

@@ -1,6 +1,6 @@
 import {
   SdDivider
-} from "./chunk.I7E7S32P.js";
+} from "./chunk.EZKDJFKX.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -28,11 +28,11 @@ var SdOptgroup = class extends SolidElement {
     this.label = "";
   }
   /**
-   * Syncs the disabled prop for all slotted sd-4-6-6-options when it is triggered
+   * Syncs the disabled prop for all slotted sd-4-6-7-options when it is triggered
    */
   handleDisableOptions() {
     const { disabled } = this;
-    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-4-6-6-option").forEach((opt) => {
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-4-6-7-option").forEach((opt) => {
       opt.disabled = disabled;
     });
   }
@@ -41,11 +41,11 @@ var SdOptgroup = class extends SolidElement {
   }
   render() {
     const { disabled } = this;
-    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-4-6-6-divider id="divider" class="pt-2 pb-4" part="divider"></sd-4-6-6-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
+    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-4-6-7-divider id="divider" class="pt-2 pb-4" part="divider"></sd-4-6-7-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
   }
 };
 SdOptgroup.dependencies = {
-  "sd-4-6-6-divider": SdDivider
+  "sd-4-6-7-divider": SdDivider
 };
 SdOptgroup.styles = [
   ...SolidElement.styles,
@@ -64,7 +64,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdOptgroup.prototype, "handleDisabledChange", 1);
 SdOptgroup = __decorateClass([
-  customElement("sd-4-6-6-optgroup")
+  customElement("sd-4-6-7-optgroup")
 ], SdOptgroup);
 
 export {

package/dist-versioned/chunks/{chunk.IZ4Z4LUM.js → chunk.EATARJOL.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -21,7 +21,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-4-6-6-tab-${this.attrId}`;
+    this.componentId = `sd-4-6-7-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.variant = "default";
     this.active = false;
@@ -91,7 +91,7 @@ __decorateClass([
   watch("disabled")
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-4-6-6-tab")
+  customElement("sd-4-6-7-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.4XX7HM5J.js → chunk.EJMQUF44.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ var SdTag = class extends SolidElement {
         lg: "text-base",
         sm: "text-[12px]"
       }[this.size]
-    )}"><sd-4-6-6-icon library="system" name="close" label="remove"></sd-4-6-6-icon></slot>` : ""}</${tag}>`;
+    )}"><sd-4-6-7-icon library="system" name="close" label="remove"></sd-4-6-7-icon></slot>` : ""}</${tag}>`;
   }
 };
 SdTag.styles = [
@@ -106,7 +106,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdTag.prototype, "download", 2);
 SdTag = __decorateClass([
-  customElement("sd-4-6-6-tag")
+  customElement("sd-4-6-7-tag")
 ], SdTag);
 
 export {

package/dist-versioned/chunks/{chunk.I7E7S32P.js → chunk.EZKDJFKX.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -32,7 +32,7 @@ var SdDivider = class extends SolidElement {
  */
 SdDivider.styles = [
   ...SolidElement.styles,
-  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-6-6-divider[orientation=horizontal]){display:block}:host(sd-4-6-6-divider[orientation=vertical]){display:inline-block}`
+  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-6-7-divider[orientation=horizontal]){display:block}:host(sd-4-6-7-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -41,7 +41,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDivider.prototype, "inverted", 2);
 SdDivider = __decorateClass([
-  customElement("sd-4-6-6-divider")
+  customElement("sd-4-6-7-divider")
 ], SdDivider);
 
 export {

package/dist-versioned/chunks/{chunk.CX3GTFZI.js → chunk.G4WRYNRZ.js}

@@ -37,6 +37,7 @@ var translation = {
   remove: "Remove",
   removed: (name) => `${name} removed`,
   resize: "Resize",
+  scrolled: "Scrolled",
   scrollToEnd: "Scroll to end",
   scrollToStart: "Scroll to start",
   search: "Search",

package/dist-versioned/chunks/{chunk.VFXEX6KC.js → chunk.HP5TMUCE.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -17,19 +17,19 @@ var SdButtonGroup = class extends SolidElement {
   }
   handleFocus(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-4-6-6-button-group__button--focus");
+    button == null ? void 0 : button.classList.add("sd-4-6-7-button-group__button--focus");
   }
   handleBlur(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-4-6-6-button-group__button--focus");
+    button == null ? void 0 : button.classList.remove("sd-4-6-7-button-group__button--focus");
   }
   handleMouseOver(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-4-6-6-button-group__button--hover");
+    button == null ? void 0 : button.classList.add("sd-4-6-7-button-group__button--hover");
   }
   handleMouseOut(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-4-6-6-button-group__button--hover");
+    button == null ? void 0 : button.classList.remove("sd-4-6-7-button-group__button--hover");
   }
   handleSlotChange() {
     const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
@@ -37,11 +37,11 @@ var SdButtonGroup = class extends SolidElement {
       const index = slottedElements.indexOf(el);
       const button = findButton(el);
       if (button !== null) {
-        button.classList.add("sd-4-6-6-button-group__button");
-        button.classList.toggle("sd-4-6-6-button-group__button--first", index === 0);
-        button.classList.toggle("sd-4-6-6-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle("sd-4-6-6-button-group__button--last", index === slottedElements.length - 1);
-        button.classList.toggle("sd-4-6-6-button-group__button--radio", button.tagName.toLowerCase() === "sd-4-6-6-radio-button");
+        button.classList.add("sd-4-6-7-button-group__button");
+        button.classList.toggle("sd-4-6-7-button-group__button--first", index === 0);
+        button.classList.toggle("sd-4-6-7-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle("sd-4-6-7-button-group__button--last", index === slottedElements.length - 1);
+        button.classList.toggle("sd-4-6-7-button-group__button--radio", button.tagName.toLowerCase() === "sd-4-6-7-radio-button");
       }
     });
   }
@@ -63,11 +63,11 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdButtonGroup.prototype, "label", 2);
 SdButtonGroup = __decorateClass([
-  customElement("sd-4-6-6-button-group")
+  customElement("sd-4-6-7-button-group")
 ], SdButtonGroup);
 function findButton(el) {
   var _a;
-  const selector = "sd-4-6-6-button, sd-4-6-6-radio-button";
+  const selector = "sd-4-6-7-button, sd-4-6-7-radio-button";
   return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
 }