@solid-design-system/components 7.0.0-next.7 → 7.0.0-next.9

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": "7.0.0-next.7",
+  "version": "7.0.0-next.9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2984,6 +2984,294 @@
             ]
           }
         },
+        {
+          "name": "sd-file-selector",
+          "description": "Used to select a file by clicking or dragging a file into a drop-area.\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-error** - Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\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 - **label** - The file selector's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the file selector. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--sd-form-control-border-radius** - The border radius of the file selector. _(default: undefined)_\n- **--sd-form-control-color-border** - The border color of the file selector. _(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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-wrapper** - The wrapper around the button and text value.\n- **button** - The sd-button acting as a file input trigger.\n- **value** - The chosen files or placeholder text for the file input.\n- **droparea** - The element wrapping the drop zone.\n- **droparea-background** - The background of the drop zone.\n- **droparea-icon** - The container that wraps the icon for the drop zone.\n- **droparea-value** - The text for the drop zone.\n- **invalid-icon-message** - The container that wraps the invalid icon and message.\n- **invalid-icon** - The invalid icon.\n- **invalid-message** - The invalid message.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "files",
+              "description": "The selected files as a `FileList` object. The `FileList` behaves like an array, so you can get the number of\nselected files via its `length` property.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "name",
+              "description": "The name of the file selector, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "title",
+              "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The value of the file selector contains a string that represents the path of the selected file. If multiple\nfiles are selected, the value represents the first file in the list. The only valid value when setting a file\ninput is an empty string.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "size",
+              "description": "The file selector's size.",
+              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'lg'" }
+            },
+            {
+              "name": "label",
+              "description": "The file selector's label, this field is required to ensure accessibility. It is visually hidden by default, use the `showLabel` property to display it.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "show-label",
+              "description": "Visually displays the file selector's label.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "help-text",
+              "description": "The file selector's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the file selector.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the input as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "drop-area",
+              "description": "Draw the file selector as a drop area.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "accept",
+              "description": "Comma-separated list of supported file types (e.g. `.jpg,.png,image/*`).",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "style-on-valid",
+              "description": "Shows success styles if the validity of the input is valid.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "capture",
+              "description": "Specifies which camera to use for capture of image or video data. Works only when not using a droparea.",
+              "value": { "type": "'user' | 'environment'" }
+            },
+            {
+              "name": "multiple",
+              "description": "Indicates whether the user can select more than one file. Has no effect if `webkitdirectory` is set.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "webkitdirectory",
+              "description": "Indicates that the file selector should let the user select directories instead of files. Non-standard, but\nsupported by all major browsers.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the input a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hide-value",
+              "description": "Suppresses the value from being displayed in the file selector.",
+              "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": "label",
+              "description": "The file selector's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the file selector. Alternatively, you can use the `help-text` attribute."
+            }
+          ],
+          "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-error",
+              "description": "Emitted when multiple files are selected via drag and drop, without the `multiple` property being set."
+            },
+            {
+              "name": "sd-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "sd-input",
+              "description": "Emitted when the control receives input."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              {
+                "name": "files",
+                "description": "The selected files as a `FileList` object. The `FileList` behaves like an array, so you can get the number of\nselected files via its `length` property."
+              },
+              {
+                "name": "name",
+                "description": "The name of the file selector, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "title",
+                "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The value of the file selector contains a string that represents the path of the selected file. If multiple\nfiles are selected, the value represents the first file in the list. The only valid value when setting a file\ninput is an empty string."
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The file selector's size.",
+                "type": "'sm' | 'md' | 'lg'"
+              },
+              {
+                "name": "label",
+                "description": "The file selector's label, this field is required to ensure accessibility. It is visually hidden by default, use the `showLabel` property to display it.",
+                "type": "string"
+              },
+              {
+                "name": "showLabel",
+                "description": "Visually displays the file selector's label.",
+                "type": "boolean"
+              },
+              {
+                "name": "helpText",
+                "description": "The file selector's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the file selector.",
+                "type": "boolean"
+              },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the input as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
+              {
+                "name": "droparea",
+                "description": "Draw the file selector as a drop area.",
+                "type": "boolean"
+              },
+              {
+                "name": "accept",
+                "description": "Comma-separated list of supported file types (e.g. `.jpg,.png,image/*`).",
+                "type": "string"
+              },
+              {
+                "name": "styleOnValid",
+                "description": "Shows success styles if the validity of the input is valid.",
+                "type": "boolean"
+              },
+              {
+                "name": "capture",
+                "description": "Specifies which camera to use for capture of image or video data. Works only when not using a droparea.",
+                "type": "'user' | 'environment'"
+              },
+              {
+                "name": "multiple",
+                "description": "Indicates whether the user can select more than one file. Has no effect if `webkitdirectory` is set.",
+                "type": "boolean"
+              },
+              {
+                "name": "webkitdirectory",
+                "description": "Indicates that the file selector should let the user select directories instead of files. Non-standard, but\nsupported by all major browsers.",
+                "type": "boolean"
+              },
+              {
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "Makes the input a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "hideValue",
+                "description": "Suppresses the value from being displayed in the file selector.",
+                "type": "boolean"
+              },
+              { "name": "button", "type": "SdButton" },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object."
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message."
+              },
+              {
+                "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-error",
+                "description": "Emitted when multiple files are selected via drag and drop, without the `multiple` property being set."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "sd-input",
+                "description": "Emitted when the control receives input."
+              }
+            ]
+          }
+        },
         {
           "name": "sd-flipcard",
           "description": "Used to display content on both sides of a card by presenting information on one side and revealing additional information when flipped.\n---\n\n\n### **Events:**\n - **sd-flip-front** - Emmited when the front face of the flipcard is clicked.\n- **sd-flip-back** - Emmited when the back face of the flipcard 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 - **front** - The front face of the flipcard.\n- **back** - The back face of the flipcard.\n- **media-front** - An optional media slot which can be as a background. Dependent from gradient variant.\n- **media-back** - An optional media slot which can be as a background. Dependent from gradient variant.\n\n### **CSS Properties:**\n - **--name** - Description of the flipcard. _(default: undefined)_\n- **--height** - Use this property to set the height of the flipcard. _(default: undefined)_\n- **--sd-informational-gradient--primary-800-color-background** - The color used in the gradient of the flipcard when the `gradient-dark` variant is used. By default, it uses the `--sd-color-primary-800` color. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **front** - The container that wraps the front-side of the flipcard.\n- **back** - The container that wraps the back-side of the flipcard.\n- **front-button** - The button that flips the flipcard to the back.\n- **back-button** - The button that flips the flipcard to the front.\n- **front-interactive-container** - The container that wraps the front side and the flip button.\n- **back-interactive-container** - The container that wraps the back side and the flip button.\n- **front-slot-container** - The container that wraps the front slot.\n- **back-slot-container** - The container that wraps the back slot.\n- **media-front** - The container that wraps the media-front slot.\n- **media-back** - The container that wraps the media-back slot.\n- **front-secondary-gradient** - The container that wraps the secondary gradient of the front side.\n- **back-secondary-gradient** - The container that wraps the secondary gradient of the back side.",

package/dist-versioned/chunks/{chunk.DZ77XUG2.js → chunk.266V4W27.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.7WPBGXB4.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -58,16 +58,16 @@ var SdMapMarker = class extends SolidElement {
       this.variant === "cluster" && this.state === "hover" && "scale-110",
       this.variant === "cluster" && !this.notInteractive && "transition-transform duration-fast ease-in-out hover:scale-110",
       {
-        cluster: "sd-7-0-0-next-7-map-marker--cluster-color-text",
+        cluster: "sd-7-0-0-next-9-map-marker--cluster-color-text",
         main: "sd-color-fill-accent",
-        place: "sd-7-0-0-next-7-map-marker--pin-color-text"
+        place: "sd-7-0-0-next-9-map-marker--pin-color-text"
       }[this.variant]
     )}"><div id="motion-wrapper" part="motion-wrapper" class="${cx(
       "absolute inset-0 overflow-hidden pointer-events-none",
       {
-        cluster: "sd-7-0-0-next-7-map-marker--cluster--default-color-background group-hover:sd-7-0-0-next-7-map-marker--cluster--hover-color-background",
-        main: "sd-7-0-0-next-7-map-marker--main-color-background",
-        place: "sd-7-0-0-next-7-map-marker--pin--default-color-background"
+        cluster: "sd-7-0-0-next-9-map-marker--cluster--default-color-background group-hover:sd-7-0-0-next-9-map-marker--cluster--hover-color-background",
+        main: "sd-7-0-0-next-9-map-marker--main-color-background",
+        place: "sd-7-0-0-next-9-map-marker--pin--default-color-background"
       }[this.variant]
     )}" style="mask-image:${mask};-webkit-mask-image:${mask}"><div class="${cx(
       "absolute inset-0 transition-transform ease-in-out duration-fast translate-y-full group-hover:translate-y-0 group-active:translate-y-0",
@@ -77,15 +77,15 @@ var SdMapMarker = class extends SolidElement {
       {
         cluster: "",
         main: this.state === "active" ? "bg-accent-700" : this.state === "hover" ? "bg-accent-550" : "group-hover:bg-accent-550 group-active:bg-accent-700",
-        place: this.state === "active" || this.state === "hover" ? "sd-7-0-0-next-7-map-marker--pin--hover-color-background" : "group-active:bg-primary-200"
+        place: this.state === "active" || this.state === "hover" ? "sd-7-0-0-next-9-map-marker--pin--hover-color-background" : "group-active:bg-primary-200"
       }[this.variant]
     )}"></div></div>${this.variant === "main" ? html`<div id="marker-circle" class="absolute rounded-full"></div>` : ""}</div>${marker} ${this.variant === "cluster" ? html`<div id="cluster-border" class="${cx(
-      "absolute inset-0 sd-7-0-0-next-7-map-marker--cluster--default-color-background rounded-full opacity-30 hover:sd-7-0-0-next-7-map-marker--cluster--hover-color-background",
-      this.state === "hover" && "sd-7-0-0-next-7-map-marker--cluster--hover-color-background"
+      "absolute inset-0 sd-7-0-0-next-9-map-marker--cluster--default-color-background rounded-full opacity-30 hover:sd-7-0-0-next-9-map-marker--cluster--hover-color-background",
+      this.state === "hover" && "sd-7-0-0-next-9-map-marker--cluster--hover-color-background"
     )}"></div>` : ""}</div><div id="content" part="content" class="${cx(
       "absolute self-center pointer-events-none",
-      this.variant === "cluster" && "font-bold sd-7-0-0-next-7-map-marker--cluster-color-text",
-      this.variant === "place" && "font-bold sd-7-0-0-next-7-map-marker--pin-color-text"
+      this.variant === "cluster" && "font-bold sd-7-0-0-next-9-map-marker--cluster-color-text",
+      this.variant === "place" && "font-bold sd-7-0-0-next-9-map-marker--pin-color-text"
     )}"><slot></slot></div></${tag}>`;
   }
 };
@@ -119,7 +119,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdMapMarker.prototype, "label", 2);
 SdMapMarker = __decorateClass([
-  customElement("sd-7-0-0-next-7-map-marker")
+  customElement("sd-7-0-0-next-9-map-marker")
 ], SdMapMarker);
 
 export {

package/dist-versioned/chunks/{chunk.S3DD4YSN.js → chunk.2ZO5TQLM.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.7WPBGXB4.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -102,18 +102,18 @@ var SdMenuItem = class extends SolidElement {
     };
     return html`<div id="anchor" part="base" class="${cx(
       "relative flex items-stretch whitespace-nowrap py-3 px-4 no-wrap !navigable-border-radius",
-      this.disabled ? "outline-none cursor-not-allowed sd-7-0-0-next-7-menu--disabled-color-text hover:bg-transparent" : "cursor-pointer sd-7-0-0-next-7-menu-color-text hover:bg-neutral-200",
+      this.disabled ? "outline-none cursor-not-allowed sd-7-0-0-next-9-menu--disabled-color-text hover:bg-transparent" : "cursor-pointer sd-7-0-0-next-9-menu-color-text hover:bg-neutral-200",
       this.isSubmenu() && isSubmenuExpanded && "submenu-expanded"
     )}" .disabled="${this.disabled}" ?aria-haspopup="${this.isSubmenu()}" ?aria-expanded="${isSubmenuExpanded ? true : false}">${this.type === "checkbox" ? html`<span part="checked-icon" class="${cx(
       "flex items-center justify-center grow-0 shrink-0 basis-auto",
       this.checked ? "visible" : "invisible"
-    )}"><sd-7-0-0-next-7-icon name="status-check" library="sd-status-assets" aria-hidden="true"></sd-7-0-0-next-7-icon></span>` : ""} ${slots.iconIndent ? html`<slot name="icon-indent" part="icon-indent" class="flex items-center grow-0 shrink-0 basis-auto mr-2"></slot>` : ""}<slot part="label" class="inline-flex grow shrink basis-auto text-ellipsis overflow-hidden" @slotchange="${this.handleDefaultSlotChange}"></slot>${this.chevron || this.isSubmenu() ? html`<span part="submenu-icon" class="flex items-center justify-center grow-0 shrink-0 basis-auto ml-3"><sd-7-0-0-next-7-icon name="chevron-right" library="_internal" aria-hidden="true" class="h-6 w-6"></sd-7-0-0-next-7-icon></span>` : ""} ${this.submenuController.renderSubmenu()}</div>`;
+    )}"><sd-7-0-0-next-9-icon name="status-check" library="sd-status-assets" aria-hidden="true"></sd-7-0-0-next-9-icon></span>` : ""} ${slots.iconIndent ? html`<slot name="icon-indent" part="icon-indent" class="flex items-center grow-0 shrink-0 basis-auto mr-2"></slot>` : ""}<slot part="label" class="inline-flex grow shrink basis-auto text-ellipsis overflow-hidden" @slotchange="${this.handleDefaultSlotChange}"></slot>${this.chevron || this.isSubmenu() ? html`<span part="submenu-icon" class="flex items-center justify-center grow-0 shrink-0 basis-auto ml-3"><sd-7-0-0-next-9-icon name="chevron-right" library="_internal" aria-hidden="true" class="h-6 w-6"></sd-7-0-0-next-9-icon></span>` : ""} ${this.submenuController.renderSubmenu()}</div>`;
   }
 };
 SdMenuItem.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{--submenu-offset:-6px;display:block}:host(:focus-visible){--tw-outline-style:none;outline-style:none}::slotted(sd-7-0-0-next-7-icon){height:var(--sd-spacing-6);width:var(--sd-spacing-6)}[part=checked-icon]{margin-right:var(--sd-spacing-3)}.submenu-expanded::after{position:fixed;top:0;right:0;bottom:0;left:0;z-index:calc(var(z-dropdown) - 1);--tw-content:'';content:var(--tw-content);clip-path:polygon(var(--safe-triangle-cursor-x,0) var(--safe-triangle-cursor-y,0),var(--safe-triangle-submenu-start-x,0) var(--safe-triangle-submenu-start-y,0),var(--safe-triangle-submenu-end-x,0) var(--safe-triangle-submenu-end-y,0))}:host(:hover:not([aria-disabled=true],:focus-visible)) [part=base]{background-color:rgba(var(--sd-color-background-neutral-200));--tw-outline-style:none;outline-style:none}:host(:focus-visible:not([aria-disabled=true])) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary);outline-offset:-2px}:host(.menu-item-focus) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary);outline-offset:-2px}:host(:hover) [part=base]{--tw-outline-style:none;outline-style:none}//TODO clean up sd-7-0-0-next-7-menu-color-icon variable replacing with sd-7-0-0-next-7-menu-item-color-icon-fill (breakingchange) :host [part=icon-indent],:host [part=checked-icon],:host [part=submenu-icon]{color:rgba(var(--sd-menu-color-icon,var(--sd-menu-item-color-icon-fill)))}//TODO clean up sd-7-0-0-next-7-menu--disabled-color-icon variable replacing with sd-7-0-0-next-7-menu-item--disabled-color-icon-fill (breakingchange) :host([aria-disabled=true]) [part=icon-indent]{color:rgba(var(--sd-menu--disabled-color-icon,var(--sd-menu-item--disabled-color-icon-fill)))}sd-7-0-0-next-7-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);background-color:rgba(var(--sd-color-background-white));margin-left:var(--submenu-offset)}::slotted(sd-7-0-0-next-7-menu){max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}.sd-7-0-0-next-7-menu-color-text{color:rgba(var(--sd-menu-color-text,var(--sd-menu-item-color-text)))}.sd-7-0-0-next-7-menu--disabled-color-text{color:rgba(var(--sd-menu--disabled-color-text,var(--sd-menu-item--disabled-color-text)))}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
+:host{--submenu-offset:-6px;display:block}:host(:focus-visible){--tw-outline-style:none;outline-style:none}::slotted(sd-7-0-0-next-9-icon){height:var(--sd-spacing-6);width:var(--sd-spacing-6)}[part=checked-icon]{margin-right:var(--sd-spacing-3)}.submenu-expanded::after{position:fixed;top:0;right:0;bottom:0;left:0;z-index:calc(var(z-dropdown) - 1);--tw-content:'';content:var(--tw-content);clip-path:polygon(var(--safe-triangle-cursor-x,0) var(--safe-triangle-cursor-y,0),var(--safe-triangle-submenu-start-x,0) var(--safe-triangle-submenu-start-y,0),var(--safe-triangle-submenu-end-x,0) var(--safe-triangle-submenu-end-y,0))}:host(:hover:not([aria-disabled=true],:focus-visible)) [part=base]{background-color:rgba(var(--sd-color-background-neutral-200));--tw-outline-style:none;outline-style:none}:host(:focus-visible:not([aria-disabled=true])) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary);outline-offset:-2px}:host(.menu-item-focus) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary);outline-offset:-2px}:host(:hover) [part=base]{--tw-outline-style:none;outline-style:none}//TODO clean up sd-7-0-0-next-9-menu-color-icon variable replacing with sd-7-0-0-next-9-menu-item-color-icon-fill (breakingchange) :host [part=icon-indent],:host [part=checked-icon],:host [part=submenu-icon]{color:rgba(var(--sd-menu-color-icon,var(--sd-menu-item-color-icon-fill)))}//TODO clean up sd-7-0-0-next-9-menu--disabled-color-icon variable replacing with sd-7-0-0-next-9-menu-item--disabled-color-icon-fill (breakingchange) :host([aria-disabled=true]) [part=icon-indent]{color:rgba(var(--sd-menu--disabled-color-icon,var(--sd-menu-item--disabled-color-icon-fill)))}sd-7-0-0-next-9-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);background-color:rgba(var(--sd-color-background-white));margin-left:var(--submenu-offset)}::slotted(sd-7-0-0-next-9-menu){max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}.sd-7-0-0-next-9-menu-color-text{color:rgba(var(--sd-menu-color-text,var(--sd-menu-item-color-text)))}.sd-7-0-0-next-9-menu--disabled-color-text{color:rgba(var(--sd-menu--disabled-color-text,var(--sd-menu-item--disabled-color-text)))}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -146,7 +146,7 @@ __decorateClass([
   watch("type")
 ], SdMenuItem.prototype, "handleTypeChange", 1);
 SdMenuItem = __decorateClass([
-  customElement("sd-7-0-0-next-7-menu-item")
+  customElement("sd-7-0-0-next-9-menu-item")
 ], SdMenuItem);
 
 export {

package/dist-versioned/chunks/{chunk.V54VIV3V.js → chunk.33KST4RJ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.7WPBGXB4.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -53,7 +53,7 @@ SdThemeListener.styles = [
 :host{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}`
 ];
 SdThemeListener = __decorateClass([
-  customElement("sd-7-0-0-next-7-theme-listener")
+  customElement("sd-7-0-0-next-9-theme-listener")
 ], SdThemeListener);
 
 export {

package/dist-versioned/chunks/{chunk.K22CCY63.js → chunk.3JGMLVGL.js}

@@ -1,13 +1,13 @@
 import {
   SdAccordion
-} from "./chunk.742523X2.js";
+} from "./chunk.KAWDESCC.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.7WPBGXB4.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -31,12 +31,12 @@ var SdQuickfact = class extends SdAccordion {
       this.expandable && "cursor-pointer select-none"
     )}" role="${ifDefined(this.expandable ? "button" : void 0)}" aria-expanded="${ifDefined(this.expandable ? this.open ? "true" : "false" : void 0)}" aria-controls="${ifDefined(this.expandable ? "content" : void 0)}" tabindex="${this.expandable ? "0" : "-1"}" @click="${this.expandable ? this.handleSummaryClick : null}" @keydown="${this.expandable ? this.handleSummaryKeyDown : null}"><div part="icon" class="${cx("flex flex-grow-0 flex-shrink-0 flex-auto items-center", !this.expandable && "cursor-default")}"><slot name="icon"></slot></div><slot name="summary" part="summary" class="${cx(
       "flex flex-auto items-start text-left text-base leading-normal font-normal sm:leading-tight sm:text-3xl sm:text-center",
-      this.expandable ? "sd-7-0-0-next-7-quickfact--expandable-color-text" : "text-black cursor-default"
+      this.expandable ? "sd-7-0-0-next-9-quickfact--expandable-color-text" : "text-black cursor-default"
     )}">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto self-start sm:self-center transition-transform ease-in-out duration-medium text-xl sm:mt-2",
       this.open && "rotate-180",
       !this.expandable && "hidden"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-7-0-0-next-7-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-7-0-0-next-7-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-7-0-0-next-7-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-7-0-0-next-7-icon></slot></span></${header}><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></${base}>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-7-0-0-next-9-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-7-0-0-next-9-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-7-0-0-next-9-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-7-0-0-next-9-icon></slot></span></${header}><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></${base}>`;
   }
 };
 SdQuickfact.styles = [
@@ -48,7 +48,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdQuickfact.prototype, "expandable", 2);
 SdQuickfact = __decorateClass([
-  customElement("sd-7-0-0-next-7-quickfact")
+  customElement("sd-7-0-0-next-9-quickfact")
 ], SdQuickfact);
 setDefaultAnimation("quickfact.show", {
   keyframes: [{ height: "0" }, { height: "auto" }],

package/dist-versioned/chunks/{chunk.PUT4P7PK.js → chunk.3MGF33VU.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.7WPBGXB4.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -98,7 +98,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/75 rounded-full play-pause-transition group-focus-visible:outline-2 group-focus-visible:outline-offset-2"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-7-0-0-next-7-icon id="default-play-icon" library="_internal" name="start"></sd-7-0-0-next-7-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-7-0-0-next-9-icon id="default-play-icon" library="_internal" name="start"></sd-7-0-0-next-9-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
   }
 };
 SdVideo.styles = [
@@ -116,7 +116,7 @@ __decorateClass([
   property({ type: Boolean })
 ], SdVideo.prototype, "isBelowBreakpoint", 2);
 SdVideo = __decorateClass([
-  customElement("sd-7-0-0-next-7-video")
+  customElement("sd-7-0-0-next-9-video")
 ], SdVideo);
 
 export {

package/dist-versioned/chunks/{chunk.MJ6KXGSO.js → chunk.3Y3V2LY4.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.7WPBGXB4.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -26,7 +26,7 @@ var SdCheckboxGroup = class extends SolidElement {
     this.helpText = "";
   }
   getAllCheckboxes() {
-    return [...this.querySelectorAll("sd-7-0-0-next-7-checkbox")];
+    return [...this.querySelectorAll("sd-7-0-0-next-9-checkbox")];
   }
   async syncCheckboxElements() {
     const checkboxes = this.getAllCheckboxes();
@@ -39,10 +39,10 @@ var SdCheckboxGroup = class extends SolidElement {
     );
   }
   syncCheckboxes() {
-    if (customElements.get("sd-7-0-0-next-7-checkbox")) {
+    if (customElements.get("sd-7-0-0-next-9-checkbox")) {
       this.syncCheckboxElements();
     } else {
-      customElements.whenDefined("sd-7-0-0-next-7-checkbox").then(() => this.syncCheckboxes());
+      customElements.whenDefined("sd-7-0-0-next-9-checkbox").then(() => this.syncCheckboxes());
     }
   }
   handleSizeChange() {
@@ -80,7 +80,7 @@ var SdCheckboxGroup = class extends SolidElement {
 SdCheckboxGroup.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}:host([orientation=vertical]) ::slotted(sd-7-0-0-next-7-checkbox){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-7-0-0-next-7-checkbox:last-of-type){margin-bottom:0}:host([orientation=horizontal]) ::slotted(sd-7-0-0-next-7-checkbox){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-7-0-0-next-7-checkbox:last-of-type){margin-right:0}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-7-0-0-next-7-checkbox){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-7-0-0-next-7-checkbox:last-of-type){margin-right:0}`
+:host{display:block}:host([orientation=vertical]) ::slotted(sd-7-0-0-next-9-checkbox){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-7-0-0-next-9-checkbox:last-of-type){margin-bottom:0}:host([orientation=horizontal]) ::slotted(sd-7-0-0-next-9-checkbox){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-7-0-0-next-9-checkbox:last-of-type){margin-right:0}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-7-0-0-next-9-checkbox){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-7-0-0-next-9-checkbox:last-of-type){margin-right:0}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -101,7 +101,7 @@ __decorateClass([
   watch("invalid", { waitUntilFirstUpdate: true })
 ], SdCheckboxGroup.prototype, "handleInvalid", 1);
 SdCheckboxGroup = __decorateClass([
-  customElement("sd-7-0-0-next-7-checkbox-group")
+  customElement("sd-7-0-0-next-9-checkbox-group")
 ], SdCheckboxGroup);
 
 export {