@solid-design-system/components 4.0.0-next.1 → 4.0.0-next.11

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": "4.0.0-next.1",
+  "version": "4.0.0-next.11",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -68,6 +68,7 @@
           "js": {
             "properties": [
               { "name": "localize" },
+              { "name": "accordionObserver", "type": "MutationObserver" },
               {
                 "name": "open",
                 "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
@@ -512,8 +513,8 @@
               "name": "variant",
               "description": "The badge's variant.",
               "value": {
-                "type": "'default' | 'success' | 'error'",
-                "default": "'default'"
+                "type": "'blue' | 'green' | 'red'",
+                "default": "'blue'"
               }
             },
             {
@@ -544,7 +545,7 @@
               {
                 "name": "variant",
                 "description": "The badge's variant.",
-                "type": "'default' | 'success' | 'error'"
+                "type": "'blue' | 'green' | 'red'"
               },
               {
                 "name": "inverted",
@@ -1365,6 +1366,11 @@
             {
               "name": "placeholder",
               "description": "Placeholder text to show as a hint when the combobox is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "max-options-tag-label",
+              "description": "Label text shown on tag if max-options-visible is reached.",
               "value": { "type": "string" }
             },
             {
@@ -1578,7 +1584,12 @@
               },
               {
                 "name": "placeholder",
-                "description": "Placeholder text to show as a hint when the combobox is empty."
+                "description": "Placeholder text to show as a hint when the combobox is empty.",
+                "type": "string"
+              },
+              {
+                "name": "maxOptionsTagLabel",
+                "description": "Label text shown on tag if max-options-visible is reached."
               },
               {
                 "name": "disabled",
@@ -2426,6 +2437,7 @@
                 "description": "Determines the variant of the back face of the flipcard.",
                 "type": "'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'"
               },
+              { "name": "activeSide", "type": "'front' | 'back'" },
               {
                 "name": "dir",
                 "description": "The element's directionality.",
@@ -4194,6 +4206,7 @@
                 "type": "boolean"
               },
               { "name": "localize" },
+              { "name": "accordionObserver", "type": "MutationObserver" },
               {
                 "name": "open",
                 "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
@@ -4739,7 +4752,7 @@
         },
         {
           "name": "sd-select",
-          "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the select's menu opens.\n- **sd-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the select's menu closes.\n- **sd-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\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- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\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-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the combobox, clear icon, and expand button.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__removable-indicator** - The tag's remove button.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+          "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the select's menu opens.\n- **sd-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the select's menu closes.\n- **sd-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\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- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(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-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the combobox, clear icon, and expand button.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__removable-indicator** - The tag's remove button.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
           "doc-url": "",
           "attributes": [
             {
@@ -4765,6 +4778,11 @@
             {
               "name": "placeholder",
               "description": "Placeholder text to show as a hint when the select is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "max-options-tag-label",
+              "description": "Label text shown on tag if max-options-visible is reached.",
               "value": { "type": "string" }
             },
             {
@@ -4945,7 +4963,12 @@
               },
               {
                 "name": "placeholder",
-                "description": "Placeholder text to show as a hint when the select is empty."
+                "description": "Placeholder text to show as a hint when the select is empty.",
+                "type": "string"
+              },
+              {
+                "name": "maxOptionsTagLabel",
+                "description": "Label text shown on tag if max-options-visible is reached."
               },
               {
                 "name": "disabled",
@@ -6480,17 +6503,12 @@
         },
         {
           "name": "sd-video",
-          "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.\n- **overlay** - The `<div>` element styled as an absolutely positioned transparent overlay.",
+          "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.",
           "doc-url": "",
           "attributes": [
             {
               "name": "playing",
-              "description": "Set to `true` to hide the play icon and the overlay.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "overlay",
-              "description": "Set to `true` to show a dark overlay. Only used when `playing` is `false`.",
+              "description": "Set to `true` to hide the play icon.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -6530,12 +6548,7 @@
             "properties": [
               {
                 "name": "playing",
-                "description": "Set to `true` to hide the play icon and the overlay.",
-                "type": "boolean"
-              },
-              {
-                "name": "overlay",
-                "description": "Set to `true` to show a dark overlay. Only used when `playing` is `false`.",
+                "description": "Set to `true` to hide the play icon.",
                 "type": "boolean"
               },
               {

package/dist-versioned/_components/menu/menu.js

@@ -32,7 +32,7 @@ let SdMenu = class SdMenu extends SolidElement {
         if (item.type === 'checkbox') {
             item.checked = !item.checked;
         }
-        this.emit('sd-4-0-0-next-1-select', { detail: { item } });
+        this.emit('sd-4-0-0-next-11-select', { detail: { item } });
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {

package/dist-versioned/_components/menu/menu.styles.js

@@ -11,7 +11,7 @@ export default css `
     overscroll-behavior: none;
   }
 
-  ::slotted(sd-4-0-0-next-1-divider) {
+  ::slotted(sd-4-0-0-next-11-divider) {
     --spacing: var(--sd-spacing-x-small);
   }
 `;

package/dist-versioned/_components/menu-item/menu-item.js

@@ -74,7 +74,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <sd-4-0-0-next-1-icon name="check" library="system" aria-hidden="true"></sd-4-0-0-next-1-icon>
+          <sd-4-0-0-next-11-icon name="check" library="system" aria-hidden="true"></sd-4-0-0-next-11-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -84,7 +84,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span class="menu-item__chevron">
-          <sd-4-0-0-next-1-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-0-0-next-1-icon>
+          <sd-4-0-0-next-11-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-0-0-next-11-icon>
         </span>
       </div>
     `;

package/dist-versioned/chunks/{chunk.J2XBUIBC.js → chunk.27SQRFDZ.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ var SdExpandable = class extends SolidElement {
       "sd-interactive sd-interactive--reset !h-full !justify-center !w-full !text-base !flex !items-center !underline !underline-offset-2 !toggle",
       this.inverted && "sd-interactive--inverted",
       !this.inverted ? "!focus-visible:focus-outline" : "!focus-visible:focus-outline-inverted"
-    )}" @click="${this.onToggleClick}">${this.open ? html`<slot name="toggle-open"><sd-4-0-0-next-1-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-0-0-next-1-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-0-0-next-1-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-0-0-next-1-icon>${this.localize.term("showMore")}</slot>`}</button>`;
+    )}" @click="${this.onToggleClick}">${this.open ? html`<slot name="toggle-open"><sd-4-0-0-next-11-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-0-0-next-11-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-0-0-next-11-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-0-0-next-11-icon>${this.localize.term("showMore")}</slot>`}</button>`;
   }
   firstUpdated() {
     this.cloneContentToLightDOM();
@@ -108,7 +108,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdExpandable.prototype, "onOpenChange", 1);
 SdExpandable = __decorateClass([
-  customElement("sd-4-0-0-next-1-expandable")
+  customElement("sd-4-0-0-next-11-expandable")
 ], SdExpandable);
 
 export {

package/dist-versioned/chunks/{chunk.SPBPHTSS.js → chunk.37664KT7.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -17,7 +17,6 @@ var SdVideo = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.playing = false;
-    this.overlay = false;
     this.isBelowBreakpoint = false;
     this.hasSlotController = new HasSlotController(this, "[default]", "play-icon", "poster");
   }
@@ -100,10 +99,7 @@ var SdVideo = class extends SolidElement {
       this.playing ? "opacity-0" : "opacity-100",
       this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
       "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-4-0-0-next-1-icon id="default-play-icon" library="system" name="start"></sd-4-0-0-next-1-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<div part="overlay" id="overlay" role="presentation" class="${cx(
-      this.overlay && !this.playing ? "opacity-100" : "opacity-0",
-      "bg-[black] bg-opacity-60 w-full h-full absolute top-0 left-0 pointer-events-none z-20 play-pause-transition"
-    )}"></div><slot></slot></div>`;
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-4-0-0-next-11-icon id="default-play-icon" library="system" name="start"></sd-4-0-0-next-11-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<slot></slot></div>`;
   }
 };
 SdVideo.styles = [
@@ -116,14 +112,11 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdVideo.prototype, "playing", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdVideo.prototype, "overlay", 2);
 __decorateClass([
   property({ type: Boolean })
 ], SdVideo.prototype, "isBelowBreakpoint", 2);
 SdVideo = __decorateClass([
-  customElement("sd-4-0-0-next-1-video")
+  customElement("sd-4-0-0-next-11-video")
 ], SdVideo);
 
 export {

package/dist-versioned/chunks/{chunk.VHGHICFG.js → chunk.3ZXUWSEL.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -203,7 +203,7 @@ var SdTextarea = class extends SolidElement {
       "flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-4-0-0-next-1-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-4-0-0-next-1-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-0-0-next-1-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-4-0-0-next-1-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-4-0-0-next-11-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-4-0-0-next-11-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-0-0-next-11-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-4-0-0-next-11-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -314,7 +314,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdTextarea.prototype, "handleValueChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-4-0-0-next-1-textarea")
+  customElement("sd-4-0-0-next-11-textarea")
 ], SdTextarea);
 
 export {

package/dist-versioned/chunks/{chunk.SSH6ATRK.js → chunk.4OXUMYNO.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -91,7 +91,7 @@ var SdOption = class extends SolidElement {
     )}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
       "relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4 mr-2",
       this.disabled ? "border-neutral-500" : this.selected ? "bg-accent border-accent" : "border-neutral-800"
-    )}">${this.selected ? html`<sd-4-0-0-next-1-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-0-0-next-1-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
+    )}">${this.selected ? html`<sd-4-0-0-next-11-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-0-0-next-11-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
   }
 };
 /**
@@ -135,7 +135,7 @@ __decorateClass([
   watch("value")
 ], SdOption.prototype, "handleValueChange", 1);
 SdOption = __decorateClass([
-  customElement("sd-4-0-0-next-1-option")
+  customElement("sd-4-0-0-next-11-option")
 ], SdOption);
 
 export {

package/dist-versioned/chunks/{chunk.IN3GJ5QL.js → chunk.5XUZOO7Z.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -41,16 +41,16 @@ var SdAccordionGroup = class extends SolidElement {
 };
 SdAccordionGroup.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}::slotted(sd-4-0-0-next-1-accordion:not(:first-of-type)){margin-top:-1px}`
+  css`:host{display:block}::slotted(sd-4-0-0-next-11-accordion:not(:first-of-type)){margin-top:-1px}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-4-0-0-next-1-accordion" })
+  queryAssignedElements({ selector: "sd-4-0-0-next-11-accordion" })
 ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
 __decorateClass([
   property({ attribute: "close-others", type: Boolean })
 ], SdAccordionGroup.prototype, "closeOthers", 2);
 SdAccordionGroup = __decorateClass([
-  customElement("sd-4-0-0-next-1-accordion-group")
+  customElement("sd-4-0-0-next-11-accordion-group")
 ], SdAccordionGroup);
 
 export {

package/dist-versioned/chunks/{chunk.WWS3CQ2Z.js → chunk.6674RGIJ.js}

@@ -1,14 +1,15 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
 
 // src/components/flipcard/flipcard.ts
 import { css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
 import cx from "classix";
 var SdFlipcard = class extends SolidElement {
   constructor() {
@@ -17,21 +18,28 @@ var SdFlipcard = class extends SolidElement {
     this.placement = "top";
     this.frontVariant = "primary";
     this.backVariant = "primary";
+    this.activeSide = "front";
   }
   connectedCallback() {
     super.connectedCallback();
   }
   flipFront() {
+    this.activeSide = "back";
     this.front.classList.add("clicked--front");
     this.back.classList.add("clicked--back");
     this.emit("sd-flip-front");
-    this.back.focus();
+    setTimeout(() => {
+      this.back.focus();
+    });
   }
   flipBack() {
+    this.activeSide = "front";
     this.front.classList.remove("clicked--front");
     this.back.classList.remove("clicked--back");
     this.emit("sd-flip-back");
-    this.front.focus();
+    setTimeout(() => {
+      this.front.focus();
+    });
   }
   handleFrontKeydown(event) {
     if (event.code === "Enter" && this.front === event.target) {
@@ -44,7 +52,7 @@ var SdFlipcard = class extends SolidElement {
     }
   }
   render() {
-    return html`<div part="base" class="${cx("flip-card relative h-full w-full")}"><div part="front" tabindex="0" class="${cx(
+    return html`<div part="base" class="${cx("flip-card relative h-full w-full")}"><div part="front" tabindex="0" aria-hidden="${this.activeSide === "back"}" inert="${ifDefined(this.activeSide === "back" || void 0)}" class="${cx(
       "flip-card__side flip-card__side--front overflow-hidden transition-transform duration-1000 ease-in-out",
       "flex focus-visible:focus-outline",
       "absolute top-0 left-0 w-full h-full justify-end text-left",
@@ -67,17 +75,17 @@ var SdFlipcard = class extends SolidElement {
         primary: "",
         "primary-100": "",
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/75 to-white/60" : "bg-gradient-to-t  from-white/75 to-white/60",
-        "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-b from-primary-800/75 to-primary-800/60" : "bg-gradient-to-t  from-primary-800/75 to-primary-800/60"
+        "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/75 to-primary-800/60" : "bg-gradient-to-b  from-primary-800/75 to-primary-800/60"
       }[this.frontVariant]
     )}"><slot name="front"></slot></div><div part="front-secondary-gradient" class="${cx(
       "flip-card__gradient",
       {
         primary: "mb-auto",
         "primary-100": "mb-auto",
-        "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-40% mb-auto" : "bg-gradient-to-t from-white/60 to-40% mt-auto",
-        "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-40% mt-auto" : "bg-gradient-to-b from-primary-800/60 to-40% mb-auto"
+        "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
+        "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.frontVariant]
-    )}"></div><sd-4-0-0-next-1-button part="front-button" size="md" variant="${{
+    )}"></div><sd-4-0-0-next-11-button part="front-button" size="md" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -87,7 +95,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-4-0-0-next-1-icon library="system" name="reload" label="Flip to Back"></sd-4-0-0-next-1-icon></sd-4-0-0-next-1-button></div><div part="back" tabindex="0" class="${cx(
+    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-4-0-0-next-11-icon library="system" name="reload" label="Flip to Back"></sd-4-0-0-next-11-icon></sd-4-0-0-next-11-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
       "flip-card__side flip-card__side--back overflow-hidden transition-transform duration-1000 ease-in-out",
       "flex focus-visible:focus-outline",
       "absolute top-0 left-0 w-full h-full justify-end text-left",
@@ -110,17 +118,17 @@ var SdFlipcard = class extends SolidElement {
         primary: "",
         "primary-100": "",
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/75 to-white/60" : "bg-gradient-to-t  from-white/75 to-white/60",
-        "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-b from-primary-800/75 to-primary-800/60" : "bg-gradient-to-t  from-primary-800/75 to-primary-800/60"
+        "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/75 to-primary-800/60" : "bg-gradient-to-b  from-primary-800/75 to-primary-800/60"
       }[this.backVariant]
     )}"><slot name="back"></slot></div><div part="back-secondary-gradient" class="${cx(
       "flip-card__gradient",
       {
         primary: "mb-auto",
         "primary-100": "mb-auto",
-        "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-40% mb-auto" : "bg-gradient-to-t from-white/60 to-40% mt-auto",
-        "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-40% mt-auto" : "bg-gradient-to-b from-primary-800/60 to-40% mb-auto"
+        "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
+        "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.backVariant]
-    )}"></div><sd-4-0-0-next-1-button size="md" part="back-button" variant="${{
+    )}"></div><sd-4-0-0-next-11-button size="md" part="back-button" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -130,7 +138,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-4-0-0-next-1-icon library="system" name="reload" label="Flip to Front"></sd-4-0-0-next-1-icon></sd-4-0-0-next-1-button></div></div>`;
+    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-4-0-0-next-11-icon library="system" name="reload" label="Flip to Front"></sd-4-0-0-next-11-icon></sd-4-0-0-next-11-button></div></div>`;
   }
 };
 /**
@@ -158,8 +166,11 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true, attribute: "back-variant" })
 ], SdFlipcard.prototype, "backVariant", 2);
+__decorateClass([
+  state()
+], SdFlipcard.prototype, "activeSide", 2);
 SdFlipcard = __decorateClass([
-  customElement("sd-4-0-0-next-1-flipcard")
+  customElement("sd-4-0-0-next-11-flipcard")
 ], SdFlipcard);
 
 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-4-0-0-next-1-popup");
+    const popup = document.createElement("sd-4-0-0-next-11-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-0-0-next-1-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-0-0-next-1-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-4-0-0-next-1-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-0-0-next-1-popup li{list-style-type:""}sd-4-0-0-next-1-popup li mark{background-color:transparent;font-weight:700}sd-4-0-0-next-1-popup li:not(:has(sd-4-0-0-next-1-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-0-0-next-1-popup li:not(:has(sd-4-0-0-next-1-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-4-0-0-next-1-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-0-0-next-11-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-0-0-next-11-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-4-0-0-next-11-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-0-0-next-11-popup li{list-style-type:""}sd-4-0-0-next-11-popup li mark{background-color:transparent;font-weight:700}sd-4-0-0-next-11-popup li:not(:has(sd-4-0-0-next-11-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-0-0-next-11-popup li:not(:has(sd-4-0-0-next-11-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-4-0-0-next-11-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-0-0-next-1-popup")) == null ? void 0 : _b.setAttribute("active", "true");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-0-0-next-11-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-0-0-next-1-popup")) == null ? void 0 : _b.removeAttribute("active");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-0-0-next-11-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.JIKTGTDS.js → chunk.6TF5WSJN.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -21,7 +21,7 @@ var SdDivider = class extends SolidElement {
     this.setAttribute("role", "separator");
   }
   render() {
-    return html`<hr part="main" class="${cx(
+    return html`<hr part="main" aria-orientation="${this.orientation}" class="${cx(
       this.inverted ? "border-primary-400" : "border-neutral-400",
       this.orientation === "horizontal" ? "border-t w-full" : " border-l h-full"
     )}">`;
@@ -32,7 +32,7 @@ var SdDivider = class extends SolidElement {
  */
 SdDivider.styles = [
   ...SolidElement.styles,
-  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-0-0-next-1-divider[orientation=horizontal]){display:block}:host(sd-4-0-0-next-1-divider[orientation=vertical]){display:inline-block}`
+  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-0-0-next-11-divider[orientation=horizontal]){display:block}:host(sd-4-0-0-next-11-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ reflect: true })
@@ -41,7 +41,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDivider.prototype, "inverted", 2);
 SdDivider = __decorateClass([
-  customElement("sd-4-0-0-next-1-divider")
+  customElement("sd-4-0-0-next-11-divider")
 ], SdDivider);
 
 export {