@solid-design-system/components 5.10.0 → 5.11.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "5.10.0",
+  "version": "5.11.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -4994,6 +4994,271 @@
             ]
           }
         },
+        {
+          "name": "sd-range",
+          "description": "Used to allow users to select a single or multiple values within a defined range using a slider.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-move** - Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot.\n- **help-text** - Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.\n- **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **scale-ticks** - Used to display tick marks at specific intervals along the range.\n\n### **CSS Properties:**\n - **--track-active-offset** - The point of origin of the active track, starting at the left side of the range. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the input track and ticks.\n- **track-wrapper** - The wrapper for the track.\n- **track** - The inactive track.\n- **active-track** - The active track.\n- **track-click-helper** - The element that increases the track clickable area.\n- **thumb** - The thumb(s) that the user can drag to change the range.\n- **scale-ticks** - The container that wraps the tick marks.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "min",
+              "description": "The minimum acceptable value of the range.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "max",
+              "description": "The maximum acceptable value of the range.",
+              "value": { "type": "number", "default": "100" }
+            },
+            {
+              "name": "step",
+              "description": "The interval at which the range will increase and decrease.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the range.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "visually-disabled",
+              "description": "Disables the range visually.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-track-bar",
+              "description": "Disables the active track bar.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-tooltip",
+              "description": "Disables the thumbs tooltip.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "The current values of the input (in ascending order) as a string of space separated values",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the range. Alternatively, you can use the `help-text` attribute."
+            },
+            {
+              "name": "label",
+              "description": "The range's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "scale-ticks",
+              "description": "Used to display tick marks at specific intervals along the range."
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "sd-change",
+              "description": "Emitted when an alteration to the control's value is committed by the user."
+            },
+            {
+              "name": "sd-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "sd-input",
+              "description": "Emitted when the control receives input."
+            },
+            {
+              "name": "sd-move",
+              "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              { "name": "thumbs", "type": "NodeListOf<HTMLDivElement>" },
+              {
+                "name": "tooltipFormatter",
+                "description": "A function used to format the tooltip's value.\nThe value of the thumb is passed as the only argument.\nThe function should return a string to display in the tooltip.",
+                "type": "(value: number) => string"
+              },
+              {
+                "name": "name",
+                "description": "The name of the range, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "min",
+                "description": "The minimum acceptable value of the range.",
+                "type": "number"
+              },
+              {
+                "name": "max",
+                "description": "The maximum acceptable value of the range.",
+                "type": "number"
+              },
+              {
+                "name": "step",
+                "description": "The interval at which the range will increase and decrease.",
+                "type": "number"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the range.",
+                "type": "boolean"
+              },
+              {
+                "name": "visuallyDisabled",
+                "description": "Disables the range visually.",
+                "type": "boolean"
+              },
+              {
+                "name": "noTrackBar",
+                "description": "Disables the active track bar.",
+                "type": "boolean"
+              },
+              {
+                "name": "noTooltip",
+                "description": "Disables the thumbs tooltip.",
+                "type": "boolean"
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current values of the input (in ascending order) as a string of space separated values"
+              },
+              {
+                "name": "valueAsArray",
+                "description": "Gets or sets the current values of the range as an array of numbers"
+              },
+              { "name": "rtl" },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "sd-change",
+                "description": "Emitted when an alteration to the control's value is committed by the user."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "sd-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "sd-move",
+                "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement."
+              }
+            ]
+          }
+        },
+        {
+          "name": "sd-range-tick",
+          "description": "Ticks visually improve positioning on range sliders.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The tick's label\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label.\n- **line** - The component's tick line.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "subtick",
+              "description": "Whether the tick should be shown as a subtick.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tick's label" }],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              {
+                "name": "subtick",
+                "description": "Whether the tick should be shown as a subtick.",
+                "type": "boolean"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sd-scrollable",
           "description": "Scrollable is used to indicate there is hidden content to be scrolled.\n---\n\n\n### **Events:**\n - **start** - Emitted when the start of the scrollable is reached.\n- **end** - Emitted when the end of the scrollable is reached.\n- **eventName**\n- **button-left** - Emitted when the left button is clicked.\n- **button-right** - Emitted when the right button is clicked.\n- **button-up** - Emitted when the top button is clicked.\n- **button-down** - Emitted when the bottom button is clicked.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The scrollable's content.\n- **icon-start** - The scrollable's start icon.\n- **icon-end** - The scrollable's end icon.\n\n### **CSS Properties:**\n - **--gradient-color** - Defines a custom color for the gradient. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The scrollable's base wrapper.\n- **scroll-content** - The scrollable's content.\n- **button-start** - The scrollable's start scroll button.\n- **button-end** - The scrollable's end scroll button.\n- **button-left** - The scrollable's left scroll button.\n- **button-right** - The scrollable's right scroll button.\n- **button-top** - The scrollable's top scroll button.\n- **button-bottom** - The scrollable's bottom scroll button.\n- **shadow-left** - The scrollable's left shadow.\n- **shadow-right** - The scrollable's right shadow.\n- **shadow-top** - The scrollable's top shadow.\n- **shadow-bottom** - The scrollable's bottom shadow.",

package/dist-versioned/chunks/{chunk.SGJGJL45.js → chunk.2O2BKZXQ.js}

@@ -1,3 +1,6 @@
+import {
+  HasSlotController
+} from "./chunk.IVMQWO2L.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -14,7 +17,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PP5IDYES.js";
+} from "./chunk.JSBUECND.js";
 import {
   animateTo,
   parseDuration,
@@ -32,6 +35,7 @@ var SdTooltip = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(this, "[default]", "content");
     this.size = "lg";
     this.content = "";
     this.placement = "top";
@@ -85,7 +89,7 @@ var SdTooltip = class extends SolidElement {
     document.removeEventListener("keydown", this.handleKeyboardInteraction);
   }
   get hasCustomTrigger() {
-    return !!this.querySelector("*:not([slot])");
+    return this.hasSlotController.test("[default]");
   }
   // removes empty text nodes from the default slot
   formatDefaultSlot(slot) {
@@ -202,15 +206,15 @@ var SdTooltip = class extends SolidElement {
   render() {
     const isStart = this.placement.endsWith("-start");
     const isEnd = this.placement.endsWith("-end");
-    return html`<sd-5-10-0-popup part="base" exportparts="
+    return html`<sd-5-11-0-popup part="base" exportparts="
           popup:base__popup,
           arrow:base__arrow
-        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0">${this.hasCustomTrigger ? html`<slot slot="anchor"></slot>` : html`<button slot="anchor" aria-describedby="tooltip" class="${cx("flex sd-interactive rounded-full", this.size === "lg" ? "text-xl" : "text-base")}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="tooltip"><sd-5-10-0-icon library="_internal" name="info-circle" label="Tooltip" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-5-10-0-icon></button>`}<slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="${this.content}" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-5-10-0-popup>`;
+        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0">${this.hasCustomTrigger ? html`<slot slot="anchor"></slot>` : html`<button slot="anchor" aria-describedby="tooltip" class="${cx("flex sd-interactive rounded-full", this.size === "lg" ? "text-xl" : "text-base")}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="tooltip"><sd-5-11-0-icon library="_internal" name="info-circle" label="Tooltip" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-5-11-0-icon></button>`}<slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="${this.content}" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-5-11-0-popup>`;
   }
 };
 SdTooltip.styles = [
   ...SolidElement.styles,
-  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-5-10-0-popup{--arrow-color:rgb(var(--sd-color-primary,0 53 142)/1);--arrow-size:10px}sd-5-10-0-popup::part(popup){pointer-events:none;z-index:10;--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-5-10-0-popup::part(arrow){--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-5-10-0-popup[placement^=top]::part(popup){transform-origin:bottom}sd-5-10-0-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`
+  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-5-11-0-popup{--arrow-color:rgb(var(--sd-color-primary,0 53 142)/1);--arrow-size:10px}sd-5-11-0-popup::part(popup){pointer-events:none;z-index:10;--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-5-11-0-popup::part(arrow){--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-5-11-0-popup[placement^=top]::part(popup){transform-origin:bottom}sd-5-11-0-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -219,7 +223,7 @@ __decorateClass([
   query("#tooltip")
 ], SdTooltip.prototype, "body", 2);
 __decorateClass([
-  query("sd-5-10-0-popup")
+  query("sd-5-11-0-popup")
 ], SdTooltip.prototype, "popup", 2);
 __decorateClass([
   property({ type: String, reflect: true })
@@ -252,7 +256,7 @@ __decorateClass([
   watch("disabled")
 ], SdTooltip.prototype, "handleDisabledChange", 1);
 SdTooltip = __decorateClass([
-  customElement("sd-5-10-0-tooltip")
+  customElement("sd-5-11-0-tooltip")
 ], SdTooltip);
 setDefaultAnimation("tooltip.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],

package/dist-versioned/chunks/{chunk.TQMYNSM4.js → chunk.2TLG272N.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PP5IDYES.js";
+} from "./chunk.JSBUECND.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -208,7 +208,7 @@ __decorateClass([
   watch("playbackRate")
 ], SdAnimation.prototype, "handlePlaybackRateChange", 1);
 SdAnimation = __decorateClass([
-  customElement("sd-5-10-0-animation")
+  customElement("sd-5-11-0-animation")
 ], SdAnimation);
 
 export {

package/dist-versioned/chunks/{chunk.ZSZ2IB2L.js → chunk.5BWE5SSW.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PP5IDYES.js";
+} from "./chunk.JSBUECND.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-5-10-0-tab-${this.attrId}`;
+    this.componentId = `sd-5-11-0-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.variant = "default";
     this.active = false;
@@ -102,7 +102,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-5-10-0-tab")
+  customElement("sd-5-11-0-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.7ZISZOWN.js → chunk.5IQOUH7I.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PP5IDYES.js";
+} from "./chunk.JSBUECND.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -80,7 +80,7 @@ var SdTag = class extends SolidElement {
         !this.removable ? "hover:border-primary-500 hover:bg-neutral-100 hover:text-primary-500" : "has-[button:hover]:border-primary-500 has-[button:hover]:bg-neutral-100 has-[button:hover]:text-primary-500"
       ) : "bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500 disabled:bg-neutral-500 disabled:border-neutral-500",
       this.disabled && !isLink && "cursor-not-allowed"
-    )}"><slot id="content" part="content"></slot>${this.removable ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemove}"><slot part="removable-indicator" name="removable-indicator"><sd-5-10-0-icon library="_internal" name="close" label="${this.localize.term("remove")}"></sd-5-10-0-icon></slot></button>` : ""}</${tag}>`;
+    )}"><slot id="content" part="content"></slot>${this.removable ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemove}"><slot part="removable-indicator" name="removable-indicator"><sd-5-11-0-icon library="_internal" name="close" label="${this.localize.term("remove")}"></sd-5-11-0-icon></slot></button>` : ""}</${tag}>`;
   }
 };
 SdTag.styles = [
@@ -115,7 +115,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdTag.prototype, "download", 2);
 SdTag = __decorateClass([
-  customElement("sd-5-10-0-tag")
+  customElement("sd-5-11-0-tag")
 ], SdTag);
 
 export {

package/dist-versioned/chunks/{chunk.3JIBD4DC.js → chunk.5MI5RZGQ.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PP5IDYES.js";
+} from "./chunk.JSBUECND.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -25,11 +25,11 @@ var SdOptgroup = class extends SolidElement {
     this.label = "";
   }
   /**
-   * Syncs the disabled prop for all slotted sd-5-10-0-options when it is triggered
+   * Syncs the disabled prop for all slotted sd-5-11-0-options when it is triggered
    */
   handleDisableOptions() {
     const { disabled } = this;
-    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-5-10-0-option").forEach((opt) => {
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-5-11-0-option").forEach((opt) => {
       opt.disabled = disabled;
     });
   }
@@ -38,7 +38,7 @@ 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-5-10-0-divider id="divider" class="pt-2 pb-4" part="divider"></sd-5-10-0-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-5-11-0-divider id="divider" class="pt-2 pb-4" part="divider"></sd-5-11-0-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.styles = [
@@ -58,7 +58,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdOptgroup.prototype, "handleDisabledChange", 1);
 SdOptgroup = __decorateClass([
-  customElement("sd-5-10-0-optgroup")
+  customElement("sd-5-11-0-optgroup")
 ], SdOptgroup);
 
 export {

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-5-10-0-popup");
+    const popup = document.createElement("sd-5-11-0-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-5-10-0-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-5-10-0-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-5-10-0-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-5-10-0-popup li{list-style-type:""}sd-5-10-0-popup li mark{background-color:transparent;font-weight:700}sd-5-10-0-popup li:not(:has(sd-5-10-0-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-5-10-0-popup li:not(:has(sd-5-10-0-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-5-10-0-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-5-11-0-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-5-11-0-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-5-11-0-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-5-11-0-popup li{list-style-type:""}sd-5-11-0-popup li mark{background-color:transparent;font-weight:700}sd-5-11-0-popup li:not(:has(sd-5-11-0-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-5-11-0-popup li:not(:has(sd-5-11-0-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-5-11-0-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-5-10-0-popup")) == null ? void 0 : _b.setAttribute("active", "true");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-5-11-0-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-5-10-0-popup")) == null ? void 0 : _b.removeAttribute("active");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-5-11-0-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.JUUDZ47Q.js → chunk.7RZYBI43.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.PP5IDYES.js";
+} from "./chunk.JSBUECND.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -137,7 +137,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-5-10-0-brandshape")
+  customElement("sd-5-11-0-brandshape")
 ], SdBrandshape);
 
 export {

package/dist-versioned/chunks/{chunk.N3MU3643.js → chunk.AUTIW45W.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PP5IDYES.js";
+} from "./chunk.JSBUECND.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "updateCalculatedHeight", 1);
 SdHeader = __decorateClass([
-  customElement("sd-5-10-0-header")
+  customElement("sd-5-11-0-header")
 ], SdHeader);
 
 export {

package/dist-versioned/chunks/{chunk.XKFVXICF.js → chunk.BFXIXYM2.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.WL7EGHGP.js";
+} from "./chunk.FPSNJQLB.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.PP5IDYES.js";
+} from "./chunk.JSBUECND.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -64,10 +64,10 @@ var SdQuickfact = class extends SdAccordion {
       !this.expandable && "hidden"
     )}
             ><slot name="expand-icon" class=${cx(this.open && "hidden")}>
-              <sd-5-10-0-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-5-10-0-icon>
+              <sd-5-11-0-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-5-11-0-icon>
             </slot>
             <slot name="collapse-icon" class=${cx(!this.open && "hidden")}>
-              <sd-5-10-0-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-5-10-0-icon> </slot
+              <sd-5-11-0-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-5-11-0-icon> </slot
           ></span>
         </${header}>
         <div part="content" id="content" class=${cx("overflow-hidden", !this.expandable && "hidden")}>
@@ -85,7 +85,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdQuickfact.prototype, "expandable", 2);
 SdQuickfact = __decorateClass([
-  customElement("sd-5-10-0-quickfact")
+  customElement("sd-5-11-0-quickfact")
 ], SdQuickfact);
 setDefaultAnimation("quickfact.show", {
   keyframes: [{ height: "0" }, { height: "auto" }],