@dso-toolkit/core 97.1.1 → 99.0.0

package/dist/bundle/dso-cursor-tooltip.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-BIShp3sw.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-Di7uBIhp.js';
 
-const cursorTooltipCss = () => `*,*::after,*::before{box-sizing:border-box}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"))}:host{--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:rgba(255, 255, 255, 0.2);--_dso-icon-button-secondary-toggled-hover-background-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-color:#f2f2f2;--_dso-icon-button-tertiary-hover-color:#fff;--_dso-icon-button-tertiary-active-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-tertiary-toggled-color:#fff;--_dso-icon-button-tertiary-toggled-hover-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:rgba(0, 0, 0, 0.75);color:#fff;position:relative;display:inline-block;pointer-events:none;overflow:unset;max-inline-size:360px;margin-inline:8px;padding-inline:16px;padding-block:8px;border-radius:4px;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4))}:host::before{content:"";position:absolute;inset-inline-start:50%;inset-block-start:0;transform:translateX(-50%) translateY(-100%);border-inline-start:8px solid transparent;border-inline-end:8px solid transparent;border-block-end:8px solid rgba(0, 0, 0, 0.75);filter:none;pointer-events:none}`;
+const cursorTooltipCss = () => `*,*::after,*::before{box-sizing:border-box}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-wit);--_dso-link-extern-icon:var(--_dso-di-external-link-wit);--_dso-link-phone-icon:var(--_dso-di-call-wit);--_dso-link-mail-icon:var(--_dso-di-mail-outline-wit);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-wit);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:rgba(255, 255, 255, 0.2);--_dso-icon-button-secondary-toggled-hover-background-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-color:#f2f2f2;--_dso-icon-button-tertiary-hover-color:#fff;--_dso-icon-button-tertiary-active-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-tertiary-toggled-color:#fff;--_dso-icon-button-tertiary-toggled-hover-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-tertiary-download-icon:var(--_dso-di-download-wit);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-wit);--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:rgba(0, 0, 0, 0.75);color:#fff;position:relative;display:inline-block;pointer-events:none;overflow:unset;max-inline-size:360px;margin-inline:8px;padding-inline:16px;padding-block:8px;border-radius:4px;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4))}:host::before{content:"";position:absolute;inset-inline-start:50%;inset-block-start:0;transform:translateX(-50%) translateY(-100%);border-inline-start:8px solid transparent;border-inline-end:8px solid transparent;border-block-end:8px solid rgba(0, 0, 0, 0.75);filter:none;pointer-events:none}`;
 
 const CursorTooltip = /*@__PURE__*/ proxyCustomElement(class CursorTooltip extends H {
     constructor(registerHost) {
@@ -11,7 +11,7 @@ const CursorTooltip = /*@__PURE__*/ proxyCustomElement(class CursorTooltip exten
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'f38dc945dba407fd21e3528929c15d9432623db6', class: "dso-cursor-tooltip" }, h("slot", { key: 'aa208364be2cc2570cd4de7726dc2c441a4138af' })));
+        return (h(Host, { key: '88a9b55c3c2601323b98f921a1baf75d189837a5', class: "dso-cursor-tooltip" }, h("slot", { key: 'ad5cd40df43ccf4a9c6c543797de2e3360e1e868' })));
     }
     static get style() { return cursorTooltipCss(); }
 }, [257, "dso-cursor-tooltip"]);

package/dist/bundle/dso-date-picker.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-BIShp3sw.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-Di7uBIhp.js';
 
 /**
  * dd-mm-yyyy to yyyy-mm-dd
@@ -149,7 +149,7 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
         return undefined;
     }
     render() {
-        return (h("input", { key: '47631df93cddf10161ee2eabdaae4f976e86f00a', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": this.invalid?.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: '06fd80a7119e551733de7fe25c722c677a32a029', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": this.invalid?.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     get element() { return this; }
     static get style() { return datePickerCss(); }

package/dist/bundle/dso-document-card.js

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, t as transformTag } from './p-BIShp3sw.js';
+import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, t as transformTag } from './p-Di7uBIhp.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$2 } from './p-D1ciWwSo.js';
+import { d as defineCustomElement$2 } from './p-DMMY0U7e.js';
 
-const documentCardCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dt-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status{margin-block-start:8px}::slotted([slot=meta]){margin-inline-end:8px}::slotted([slot=status]){margin-inline-end:8px}`;
+const documentCardCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dso-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status{margin-block-start:8px}::slotted([slot=meta]){margin-inline-end:8px}::slotted([slot=status]){margin-inline-end:8px}`;
 
 const DocumentCard = /*@__PURE__*/ proxyCustomElement(class DocumentCard extends H {
     constructor(registerHost) {
@@ -34,7 +34,7 @@ const DocumentCard = /*@__PURE__*/ proxyCustomElement(class DocumentCard extends
         return this.host.querySelector("[slot='interactions']");
     }
     render() {
-        return (h("div", { key: 'cb3a601741335eca15dc6a29db65050617aed770', class: "dso-document-card-container" }, h("div", { key: '790d9f368acb655a4655aa2786d593338686ab3a', class: "dso-document-card-heading" }, h("a", { key: '8fefbc72ce0b86701402057b7944b0731c55b4e9', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'ee22429b624a6dbac97ec7c41f33fa37c8816a3a', class: "icon-container" }, h("dso-icon", { key: 'a3c1913d55a7807e9dac4c92ed9a20d9ff2a5a7b', icon: "chevron-right" }), h("slot", { key: '875d4f00306cd0b80a7842c986df64d544ccad35', name: "heading" })))), h("div", { key: 'b34b5c1ea5979dd35a40b31cbf892f0ace506995', class: "dso-document-card-type" }, h("slot", { key: '5155b74dd5200f4f6363d1e5f77f2efbc670dcb2', name: "type" })), h("div", { key: 'e50a354a5f49057aa47ea8b260a66de72b102513', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: '11e497caa499af37a41c0c80be26a4a82a733e6a', name: "meta" }), h("slot", { key: 'fe67a0d252ce28f3c967766596b41946f3ffb732', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: '6d0f12d4d5ae72a5e4a98a638381d38b458c6b7d', name: "interactions" }))));
+        return (h("div", { key: '59a7c2ec0c367377a0a911a616e9b471aee3f18e', class: "dso-document-card-container" }, h("div", { key: 'f9460aa5474229fd57ef523774625abae1d8613a', class: "dso-document-card-heading" }, h("a", { key: 'c136a481b9e66f7627990a2ff0c4d4a6f3371b07', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '09baafee94bff0ac826a6c043810a8c12c50c2be', class: "icon-container" }, h("dso-icon", { key: 'f9991a4251419aca4bfb81a722ced5266136a4ec', icon: "chevron-right" }), h("slot", { key: '1c866a79db49df62346fb248cfb71cd9c5ddc5f0', name: "heading" })))), h("div", { key: '5174e5f7b9f64889e9742ed0602cb7a4d9fa8ce8', class: "dso-document-card-type" }, h("slot", { key: 'a21c5b87a0ac5afac1655d766d57135070529f27', name: "type" })), h("div", { key: 'e4ccb71cd28481e3166b01a41e0c53f7ee3f2af2', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: '1b99a31821df09b01cb2bccf0b28d35d22c9828a', name: "meta" }), h("slot", { key: '64f110eb7a80f77bffc41907e30b10a1d99f718a', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: '1d444b997906441098b49b904e69e1a557f59d9a', name: "interactions" }))));
     }
     get host() { return this; }
     static get style() { return documentCardCss(); }

package/dist/bundle/dso-document-component.js

@@ -1,4 +1,4 @@
-import { D as DocumentComponent, d as defineCustomElement$1 } from './p-C2l5d-V9.js';
+import { D as DocumentComponent, d as defineCustomElement$1 } from './p-BLJDfYn6.js';
 
 const DsoDocumentComponent = DocumentComponent;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-dropdown-menu-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoDropdownMenuGroup extends Components.DsoDropdownMenuGroup, HTMLElement {}
+export const DsoDropdownMenuGroup: {
+    prototype: DsoDropdownMenuGroup;
+    new (): DsoDropdownMenuGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/bundle/dso-dropdown-menu-group.js

@@ -0,0 +1,51 @@
+import { p as proxyCustomElement, H, f as forceUpdate, h, c as Host, t as transformTag } from './p-Di7uBIhp.js';
+import { c as clsx } from './p-ChV9xqsO.js';
+import { v as v4 } from './p-BF0_OXTe.js';
+
+const dropdownMenuGroupCss = () => `:host{display:block}.group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding-block:4px 2px;padding-inline:20px;text-transform:uppercase}.group-label.checkable{padding-inline-start:40px}`;
+
+const DropdownMenuGroup = /*@__PURE__*/ proxyCustomElement(class DropdownMenuGroup extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get dropdownMenu() {
+        return this.host.closest("dso-dropdown-menu");
+    }
+    componentWillLoad() {
+        this.dropdownMenu?._getState().then((state) => {
+            this.dropdownMenuState = state;
+            forceUpdate(this.host);
+        });
+    }
+    render() {
+        const checkable = this.dropdownMenuState?.checkable;
+        const labelId = this.label ? v4() : undefined;
+        return (h(Host, { key: 'd0b9227e1449f5eb98fd4f664e3ca9f60bfa37b3' }, h("div", { key: '58478b26df4d850da5f49396e1a0b8cbd49fdf62', "aria-labelledby": labelId, role: "group" }, this.label && (h("div", { key: '78154e5c35356b63ee9b381e266743ae4a4eac55', id: labelId, class: clsx("group-label", { checkable }), role: "none" }, this.label)), h("slot", { key: '40cf594b9fedffc978e9215783b5af2cb7712a14' }))));
+    }
+    get host() { return this; }
+    static get style() { return dropdownMenuGroupCss(); }
+}, [257, "dso-dropdown-menu-group", {
+        "label": [513]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-dropdown-menu-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-dropdown-menu-group":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), DropdownMenuGroup);
+            }
+            break;
+    } });
+}
+
+const DsoDropdownMenuGroup = DropdownMenuGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoDropdownMenuGroup, defineCustomElement };

package/dist/bundle/dso-dropdown-menu-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoDropdownMenuItem extends Components.DsoDropdownMenuItem, HTMLElement {}
+export const DsoDropdownMenuItem: {
+    prototype: DsoDropdownMenuItem;
+    new (): DsoDropdownMenuItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/bundle/dso-dropdown-menu-item.js

@@ -0,0 +1,70 @@
+import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, c as Host, t as transformTag } from './p-Di7uBIhp.js';
+import { c as clsx } from './p-ChV9xqsO.js';
+import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
+import { d as defineCustomElement$2 } from './p-DMMY0U7e.js';
+
+const dropdownMenuItemCss = () => `:host{display:block}a:visited{color:#191919}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}button{background-color:transparent;border:0;border-radius:0;text-align:inherit;inline-size:100%}a,button{text-decoration:none}a:hover,a:focus-visible,a:active,button:hover,button:focus-visible,button:active{text-decoration:underline}a,button{clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding-block:3px;padding-inline:20px;text-decoration:none;white-space:nowrap}a:hover,a:focus,button:hover,button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}a dso-icon,button dso-icon{margin-inline:-12px 4px}.checkable:not(.checked) a,.checkable:not(.checked) button{padding-inline-start:40px}.checked a:not(:focus),.checked button:not(:focus){background-color:#39870c;color:#fff}`;
+
+const DropdownMenuItem = /*@__PURE__*/ proxyCustomElement(class DropdownMenuItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.dsoClick = createEvent(this, "dsoClick", 7);
+        this.handleClick = (event) => {
+            this.dsoClick.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event) });
+        };
+    }
+    /**
+     * @internal
+     */
+    async _dsoFocus() {
+        this.anchorOrButtonRef?.focus();
+    }
+    get dropdownMenu() {
+        return this.host.closest("dso-dropdown-menu");
+    }
+    componentWillLoad() {
+        this.dropdownMenu?._getState().then((state) => {
+            this.dropdownMenuState = state;
+            forceUpdate(this.host);
+        });
+    }
+    render() {
+        const checkable = this.dropdownMenuState?.checkable;
+        const checked = checkable ? Boolean(this.checked) : undefined;
+        return (h(Host, { key: '257dac25255988efe01d968337aa669459a3034b' }, h("div", { key: 'f4a1a13304f902665199a121e7c01c93b6cf4973', role: "none", class: clsx([{ checkable, checked }]) }, this.type === "button" && (h("button", { key: 'f950f23cf369a2e61801ffbe04653b7939dfe1cc', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: '3b3d10104e82dab4b26103c6356fc581f3eaf32f', icon: "check" }), h("slot", { key: '940cc740d3c0de6be7a506a069ec5c82cae5c16e' }))), this.type === "link" && this.href && (h("a", { key: 'c00d372b7748fbd6a9cbce80041ba05d5f5c5a66', href: this.href, role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: 'bd82e14286cd9290f92c382eced57e070c591172', icon: "check" }), h("slot", { key: '568ea2fbc9c423ec461588dbe1bade210f96bc6f' }))))));
+    }
+    get host() { return this; }
+    static get style() { return dropdownMenuItemCss(); }
+}, [257, "dso-dropdown-menu-item", {
+        "type": [513],
+        "href": [513],
+        "checked": [516],
+        "_dsoFocus": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-dropdown-menu-item", "dso-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-dropdown-menu-item":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), DropdownMenuItem);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsoDropdownMenuItem = DropdownMenuItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoDropdownMenuItem, defineCustomElement };

package/dist/bundle/dso-dropdown-menu.js

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-BIShp3sw.js';
+import { p as proxyCustomElement, H, f as forceUpdate, h, c as Host, t as transformTag } from './p-Di7uBIhp.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip } from './p-zRaH89Qj.js';
-import { t as tabbable } from './p-PsHl6ZhV.js';
-import { g as getActiveElement } from './p-BWkWD1Z2.js';
-import { v as v4 } from './p-CK3_k8jD.js';
+import { c as createStore } from './p-DVuh3xxM.js';
+import { d as defineCustomElement$2 } from './p-DMMY0U7e.js';
+import { v as v4 } from './p-BF0_OXTe.js';
 
-const dropdownMenuCss = () => `:host(:focus){outline:none}:host{display:inline-block}div[popover]{margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset;inline-size:max-content}`;
+const dropdownMenuCss = () => `:host(:focus) {   outline: none; }  :host {   display: inline-block; }  button {   -webkit-appearance: button;   color: inherit;   cursor: pointer;   font: inherit;   font-family: inherit;   font-size: inherit;   line-height: inherit;   margin: 0;   overflow: visible;   text-transform: none; } button[disabled] {   cursor: default; } button::-moz-focus-inner {   border: 0;   padding: 0; } button.dso-primary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } button.dso-primary:focus, button.dso-primary:focus-visible {   outline-offset: 2px; } button.dso-primary:active {   outline: 0; } button.dso-primary.extern::after, button.dso-primary.download::after {   content: "";   display: inline-block; } button.dso-primary {   background-color: var(--_dso-button-primary-background-color, #39870c);   border-color: var(--_dso-button-primary-border-color, #39870c);   color: var(--_dso-button-primary-color, #fff);   float: var(--_dso-button-float-primary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } button.dso-primary:hover {   background-color: var(--_dso-button-primary-hover-background-color, #275937);   border-color: var(--_dso-button-primary-hover-border-color, #275937);   color: var(--_dso-button-primary-hover-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary:active {   background-color: var(--_dso-button-primary-active-background-color, #173521);   border-color: var(--_dso-button-primary-active-border-color, #173521);   color: var(--_dso-button-primary-active-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary[disabled], button.dso-primary[disabled]:hover {   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);   color: var(--_dso-button-primary-disabled-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary.dso-small {   line-height: 1rem; } button.dso-primary.dso-small dso-icon, button.dso-primary.dso-small.extern::after, button.dso-primary.dso-small.download::after, button.dso-primary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-primary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small {   line-height: 1rem; } button.dso-primary.dso-extra-small dso-icon, button.dso-primary.dso-extra-small.extern::after, button.dso-primary.dso-extra-small.download::after, button.dso-primary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-primary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small {   padding-block: 9px; } button.dso-primary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } button.dso-primary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } button.dso-primary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } button.dso-primary.dso-spinner-left[disabled], button.dso-primary.dso-spinner-right[disabled] {   background-color: #39870c;   border-color: #39870c;   color: #fff; } button.dso-primary.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-primary.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } button.dso-secondary:focus, button.dso-secondary:focus-visible {   outline-offset: 2px; } button.dso-secondary:active {   outline: 0; } button.dso-secondary.extern::after, button.dso-secondary.download::after {   content: "";   display: inline-block; } button.dso-secondary {   background-color: var(--_dso-button-secondary-background-color, #fff);   border-color: var(--_dso-button-secondary-border-color, #39870c);   color: var(--_dso-button-secondary-color, #39870c);   float: var(--_dso-button-float-secondary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } button.dso-secondary:hover {   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);   border-color: var(--_dso-button-secondary-hover-border-color, #275937);   color: var(--_dso-button-secondary-hover-color, #275937);   float: var(--_dso-button-float-secondary, none); } button.dso-secondary:active {   background-color: var(--_dso-button-secondary-active-background-color, #275937);   border-color: var(--_dso-button-secondary-active-border-color, #275937);   color: var(--_dso-button-secondary-active-color, #fff);   float: var(--_dso-button-float-secondary, none); } button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);   color: var(--_dso-button-secondary-disabled-color, #afcf9d);   float: var(--_dso-button-float-secondary, none); } button.dso-secondary.dso-small {   line-height: 1rem; } button.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-secondary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small {   line-height: 1rem; } button.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-secondary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small {   padding-block: 9px; } button.dso-secondary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } button.dso-secondary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } button.dso-secondary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } button.dso-secondary.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]):hover::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]):hover::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } button.dso-tertiary:focus, button.dso-tertiary:focus-visible {   outline-offset: 2px; } button.dso-tertiary:active {   outline: 0; } button.dso-tertiary.extern::after, button.dso-tertiary.download::after {   content: "";   display: inline-block; } button.dso-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } button.dso-tertiary:focus, button.dso-tertiary:focus-visible {   outline-offset: 2px; } button.dso-tertiary:active {   outline: 0; } button.dso-tertiary.extern::after, button.dso-tertiary.download::after {   content: "";   display: inline-block; } button.dso-tertiary {   background-color: var(--_dso-button-tertiary-background-color, );   border-color: var(--_dso-button-tertiary-border-color, );   color: var(--_dso-button-tertiary-color, #39870c);   float: var(--_dso-button-float-tertiary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: auto;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } button.dso-tertiary:hover {   background-color: var(--_dso-button-tertiary-hover-background-color, );   border-color: var(--_dso-button-tertiary-hover-border-color, );   color: var(--_dso-button-tertiary-hover-color, #275937);   float: var(--_dso-button-float-tertiary, none); } button.dso-tertiary:active {   background-color: var(--_dso-button-tertiary-active-background-color, );   border-color: var(--_dso-button-tertiary-active-border-color, );   color: var(--_dso-button-tertiary-active-color, #173521);   float: var(--_dso-button-float-tertiary, none); } button.dso-tertiary[disabled], button.dso-tertiary[disabled]:hover {   background-color: var(--_dso-button-tertiary-disabled-background-color, );   border-color: var(--_dso-button-tertiary-disabled-border-color, );   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);   float: var(--_dso-button-float-tertiary, none); } button.dso-tertiary.dso-small {   line-height: 1rem; } button.dso-tertiary.dso-small dso-icon, button.dso-tertiary.dso-small.extern::after, button.dso-tertiary.dso-small.download::after, button.dso-tertiary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-tertiary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small {   line-height: 1rem; } button.dso-tertiary.dso-extra-small dso-icon, button.dso-tertiary.dso-extra-small.extern::after, button.dso-tertiary.dso-extra-small.download::after, button.dso-tertiary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-tertiary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small {   padding-block: 9px; } button.dso-tertiary {   border: 0;   line-height: 1;   padding-inline: 0;   padding-block: var(--_dso-button-padding-block-tertiary, 0);   background-color: transparent; } button.dso-tertiary[disabled].dso-spinner-left, button.dso-tertiary[disabled].dso-spinner-right {   color: #39870c; } button.dso-tertiary:not([disabled]):hover {   text-decoration: underline;   text-underline-position: under; } button.dso-tertiary.dso-align {   line-height: calc(1.5em - 1px);   padding-block: 11px;   padding-inline: 0;   position: relative; } button.dso-tertiary.dso-truncate {   max-inline-size: 100%;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } button.dso-tertiary.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: middle;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-tertiary.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: middle;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-tertiary dso-icon + span:not(.sr-only), button.dso-tertiary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px; } button.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), button.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {   margin-inline-start: 0; } button.dso-tertiary dso-icon, button.dso-tertiary span {   vertical-align: middle; } button dso-icon {   margin-inline-start: 8px; } button:not(.dso-tertiary) dso-icon {   margin-inline-end: 0; }  .dso-dropdown-options {   margin: 0 !important;   overflow: unset;   background-clip: padding-box;   background-color: #fff;   border-radius: 4px;   border: 1px solid rgba(0, 0, 0, 0.15);   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);   font-size: 1rem;   min-inline-size: 160px;   inline-size: max-content;   padding-block: 5px;   padding-inline: 0;   z-index: 220; }  ::slotted(dso-dropdown-menu-group:not(:last-child)) {   border-block-end: 1px solid #e5e5e5;   margin-block-end: 11px;   padding-block-end: 11px; }`;
 
 const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends H {
     constructor(registerHost) {
@@ -14,117 +14,96 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
         }
         this.__attachShadow();
         /**
-         * Whether the menu is open or closed.
-         * This attribute is reflected and mutable.
+         * The variant of the Button to toggle the menu
          */
+        this.variant = "secondary";
         this.open = false;
-        /**
-         * Alignment of the dropdown
-         */
-        this.dropdownAlign = "left";
-        /**
-         * Space between button and dropdown options
-         */
-        this.dropdownOptionsOffset = 2;
-        /**
-         * Whether the menu is checkable.
-         */
-        this.checkable = false;
         this.focusOutListener = (event) => {
-            if (this.open &&
-                (!(event.relatedTarget instanceof H) || !this.tabbables(true).includes(event.relatedTarget))) {
+            if (this.open && !(event.relatedTarget instanceof H)) {
                 this.toggleOptions(false);
             }
         };
-        this.keyDownListener = (event) => {
+        this.keyDownHandler = (event) => {
+            if (!(event.target instanceof H)) {
+                return;
+            }
             if (event.defaultPrevented || !this.open) {
                 return;
             }
             switch (event.key) {
                 case "Tab":
                     if (event.shiftKey) {
-                        this.tabInPopup(this.tabbables(true), -1);
+                        this.moveFocusToPrevious(event.target);
                     }
                     else {
-                        this.tabInPopup(this.tabbables(true), 1);
+                        this.moveFocusToNext(event.target);
                     }
                     break;
                 case "ArrowDown":
-                    this.tabInPopup(this.tabbables(false), 1);
+                    this.moveFocusToNext(event.target, false);
                     break;
                 case "ArrowUp":
-                    this.tabInPopup(this.tabbables(false), -1);
+                    this.moveFocusToPrevious(event.target, false);
                     break;
                 case "Escape":
                     this.escape();
                     break;
-                case " ":
-                    if (event.target instanceof H) {
-                        event.target.click();
-                    }
-                    break;
                 default:
                     return;
             }
             event.preventDefault();
         };
         this.escape = () => {
-            this.button.focus();
+            this.button?.focus();
             this.toggleOptions(false);
         };
+        const { state } = createStore({
+            checkable: false,
+        });
+        this.dropdownMenuState = state;
     }
-    get button() {
-        const button = this.host.querySelector('button[slot="toggle"]');
-        if (!(button instanceof HTMLButtonElement)) {
-            throw new ReferenceError("Mandatory toggle button not found");
-        }
-        return button;
+    /**
+     * Whether the menu items are checkable.
+     */
+    get checkable() {
+        return this.dropdownMenuState.checkable;
     }
-    tabbables(withButton) {
-        const tabbables = this.host.isConnected ? tabbable(this.host) : [];
-        return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
+    set checkable(value) {
+        this.dropdownMenuState.checkable = value || false;
+        forceUpdate(this.host);
     }
-    componentDidLoad() {
-        this.button.setAttribute("aria-haspopup", "menu");
-        this.button.setAttribute("aria-expanded", "false");
-        if (!this.button.id) {
-            this.button.id = v4();
-        }
-        const dropdownOptionsElement = this.host.querySelector(".dso-dropdown-options");
-        if (!(dropdownOptionsElement instanceof H)) {
-            throw new Error("dropdown options element is not instanceof HTMLElement");
-        }
-        dropdownOptionsElement.setAttribute("role", "menu");
-        dropdownOptionsElement.setAttribute("aria-labelledby", this.button.id);
-        for (const ul of Array.from(this.host.getElementsByTagName("ul"))) {
-            ul.setAttribute("role", "group");
-            for (const li of Array.from(ul.getElementsByTagName("li"))) {
-                li.setAttribute("role", "none");
-            }
+    dsoClickHandler(event) {
+        event.stopPropagation();
+        if (this.open && event.target instanceof H) {
+            this.toggleOptions(false);
         }
     }
+    /**
+     * @internal
+     */
+    async _getState() {
+        return this.dropdownMenuState;
+    }
+    dropdownMenuTabbables(withButton) {
+        const menuItems = this.host.isConnected
+            ? Array.from(this.host.querySelectorAll(":scope > dso-dropdown-menu-group > dso-dropdown-menu-item"))
+            : [];
+        return withButton ? [this.host, ...menuItems] : menuItems;
+    }
     componentDidRender() {
-        for (const li of Array.from(this.host.getElementsByTagName("li"))) {
-            for (const tab of this.host.isConnected ? tabbable(li) : []) {
-                tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
-                if (this.checkable) {
-                    tab.setAttribute("aria-checked", li.classList.contains("dso-checked").toString());
-                }
-            }
-        }
-        this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
-        if (this.popoverElement && !this.cleanUp) {
+        if (this.button && this.popoverElement && !this.cleanUp) {
             const element = this.popoverElement;
-            this.cleanUp = autoUpdate(this.button, element, () => {
-                computePosition(this.button, element, {
+            const referenceElement = this.button;
+            this.cleanUp = autoUpdate(referenceElement, element, () => {
+                computePosition(referenceElement, element, {
                     strategy: "fixed",
                     middleware: [
-                        offset(this.dropdownOptionsOffset),
+                        offset(2),
                         flip({
-                            padding: this.dropdownOptionsOffset,
+                            padding: 2,
                         }),
                     ],
-                    placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
+                    placement: "bottom-start",
                 }).then(({ x, y }) => {
                     Object.assign(element.style, {
                         left: `${x}px`,
@@ -134,71 +113,81 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
             });
         }
     }
-    onClick(event) {
-        const composedPath = event.composedPath();
-        if (this.isToggleButtonEvent(composedPath)) {
-            this.toggleOptions();
-        }
-        else if (this.open && this.isMenuItemEvent(composedPath)) {
-            this.toggleOptions(false);
-        }
-    }
-    isToggleButtonEvent(composedPath) {
-        return composedPath.includes(this.button);
-    }
-    isMenuItemEvent(composedPath) {
-        return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);
-    }
     toggleOptions(force) {
         this.open = force ?? !this.open;
         if (this.popoverElement?.isConnected) {
-            this.popoverElement?.togglePopover(this.open);
+            this.popoverElement.togglePopover(this.open);
+        }
+        if (this.open) {
+            requestAnimationFrame(() => this.moveFocusTo(this.firstItem(false)));
         }
         if (!this.open && this.cleanUp) {
             this.cleanUp();
             this.cleanUp = undefined;
         }
     }
-    connectedCallback() {
-        this.host.addEventListener("keydown", this.keyDownListener);
-    }
     disconnectedCallback() {
-        this.host.removeEventListener("keydown", this.keyDownListener);
         this.toggleOptions(false);
     }
-    tabInPopup(tabbables, direction) {
-        const currentIndex = tabbables.findIndex((e) => e === getActiveElement());
-        let nextIndex = currentIndex + direction;
-        if (nextIndex >= tabbables.length) {
-            nextIndex = 0;
+    get lastItem() {
+        return this.dropdownMenuTabbables(true).at(-1);
+    }
+    firstItem(withButton) {
+        return this.dropdownMenuTabbables(withButton)[0];
+    }
+    moveFocusToPrevious(focussedElement, withButton = true) {
+        const tabbables = this.dropdownMenuTabbables(withButton);
+        const index = tabbables.findIndex((element) => element === focussedElement);
+        const next = this.dropdownMenuTabbables(withButton)[index - 1] ?? this.lastItem;
+        this.moveFocusTo(next);
+    }
+    moveFocusToNext(focussedElement, withButton = true) {
+        const tabbables = this.dropdownMenuTabbables(withButton);
+        const index = tabbables.findIndex((element) => element === focussedElement);
+        const next = this.dropdownMenuTabbables(withButton)[index + 1] ?? this.firstItem(withButton);
+        this.moveFocusTo(next);
+    }
+    moveFocusTo(element) {
+        if (!element) {
+            return;
         }
-        else if (nextIndex < 0) {
-            nextIndex = tabbables.length - 1;
+        if (element === this.host && this.button) {
+            this.button.focus();
+            return;
+        }
+        if ("_dsoFocus" in element) {
+            element._dsoFocus();
         }
-        tabbables[nextIndex]?.focus();
     }
     render() {
-        return (h(Host, { key: '2b1a77a0d5ec49784f038af3540c6369d4c2cc2c', onFocusout: this.focusOutListener }, h("slot", { key: '32d8b7f6e23a5b11b5ab3bdeb78575fc6855322f', name: "toggle" }), h("div", { key: '262486ced58fb98375ccf8abc38959144fc9296d', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '2c76def3904869f1a6227430f6718d85eb9cfc30' }))));
+        const buttonId = v4();
+        return (h(Host, { key: '04b9d28b55a06ae6f13811c0dd905c05ad92de25', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: 'c096f5279d24ad7969f9cc18c24db374d314204f', id: buttonId, class: `dso-${this.variant}`, type: "button", onClick: () => this.toggleOptions(), "aria-expanded": this.open.toString(), "aria-haspopup": "menu", ref: (element) => (this.button = element) }, this.label, h("dso-icon", { key: '861e2eb587415cd092487e3de7438fc884ceffe4', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: '8470a79b40f303020eb698c4f6727f1143fe398f', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '0832da4107efa630d368c171348da1b9fb47cab6' }))));
     }
     get host() { return this; }
     static get style() { return dropdownMenuCss(); }
 }, [257, "dso-dropdown-menu", {
-        "open": [1540],
-        "dropdownAlign": [1, "dropdown-align"],
-        "dropdownOptionsOffset": [2, "dropdown-options-offset"],
-        "checkable": [4]
-    }, [[8, "click", "onClick"]]]);
+        "checkable": [6660],
+        "label": [513],
+        "variant": [513],
+        "open": [32],
+        "_getState": [64]
+    }, [[0, "dsoClick", "dsoClickHandler"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-dropdown-menu"];
+    const components = ["dso-dropdown-menu", "dso-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-dropdown-menu":
             if (!customElements.get(transformTag(tagName))) {
                 customElements.define(transformTag(tagName), DropdownMenu);
             }
             break;
+        case "dso-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

package/dist/bundle/dso-expandable.js

@@ -1,4 +1,4 @@
-import { E as Expandable, d as defineCustomElement$1 } from './p-CA57bAyP.js';
+import { E as Expandable, d as defineCustomElement$1 } from './p-1_UAZ1k8.js';
 
 const DsoExpandable = Expandable;
 const defineCustomElement = defineCustomElement$1;