@dso-toolkit/core 97.1.1 → 99.0.0

package/dist/types/components/responsive-element/responsive-element.d.ts

@@ -3,6 +3,8 @@ import { ResponsiveElementSize } from "./responsive-element.interfaces";
 export declare class ResponsiveElement implements ComponentInterface {
     sizeAlias: ResponsiveElementSize;
     sizeWidth: number;
+    private resizeFrameId?;
+    private pendingSizeAlias?;
     /**
      * Emitted when size has changed
      */
@@ -11,6 +13,7 @@ export declare class ResponsiveElement implements ComponentInterface {
      * The current size
      */
     getSize(): Promise<ResponsiveElementSize>;
+    private flushSizeChange;
     private observer;
     host: HTMLDsoResponsiveElementElement;
     componentWillLoad(): void;

package/dist/types/components/table/table.d.ts

@@ -1,6 +1,8 @@
 import { ComponentInterface } from "../../stencil-public-runtime";
 export declare class Table implements ComponentInterface {
     private resizeObserver?;
+    private resizeFrameId?;
+    private pendingResizeEntry?;
     host: HTMLDsoTableElement;
     /**
      * Prevents the table being opened in a modal.
@@ -10,6 +12,7 @@ export declare class Table implements ComponentInterface {
     modalActive: boolean;
     placeholderHeight?: number;
     private startResponsiveBehavior;
+    private scheduleResponsiveTable;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;

package/dist/types/components.d.ts

@@ -24,6 +24,7 @@ import { DatePickerBlurEvent, DatePickerChangeEvent, DatePickerFocusEvent, DateP
 import { DocumentCardClickEvent } from "./components/document-card/document-card.interfaces";
 import { DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentMode, DocumentComponentOpenToggleEvent, DocumentComponentOzonContentClickEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState, DocumentComponentTableOfContentsClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentType, DocumentComponentWijzigactie } from "./components/document-component/document-component.interfaces";
 import { OzonContentBegripResolver, OzonContentClickEvent, OzonContentInputType, OzonContentMarkItemHighlightEvent, OzonContentUrlResolver } from "./components/ozon-content/ozon-content.interfaces";
+import { DropdownMenuInternalState, DropdownMenuItemClickEvent, DropdownMenuItemType } from "./components/dropdown-menu/dropdown-menu.interfaces";
 import { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable.interfaces";
 import { HeaderAuthStatus, HeaderCompactMode, HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 import { HistoryItemClickEvent, HistoryItemType } from "./components/history-item/history-item.interfaces";
@@ -77,6 +78,7 @@ export { DatePickerBlurEvent, DatePickerChangeEvent, DatePickerFocusEvent, DateP
 export { DocumentCardClickEvent } from "./components/document-card/document-card.interfaces";
 export { DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentMode, DocumentComponentOpenToggleEvent, DocumentComponentOzonContentClickEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState, DocumentComponentTableOfContentsClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentType, DocumentComponentWijzigactie } from "./components/document-component/document-component.interfaces";
 export { OzonContentBegripResolver, OzonContentClickEvent, OzonContentInputType, OzonContentMarkItemHighlightEvent, OzonContentUrlResolver } from "./components/ozon-content/ozon-content.interfaces";
+export { DropdownMenuInternalState, DropdownMenuItemClickEvent, DropdownMenuItemType } from "./components/dropdown-menu/dropdown-menu.interfaces";
 export { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable.interfaces";
 export { HeaderAuthStatus, HeaderCompactMode, HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 export { HistoryItemClickEvent, HistoryItemType } from "./components/history-item/history-item.interfaces";
@@ -633,26 +635,41 @@ export namespace Components {
         "wijzigactie"?: DocumentComponentWijzigactie;
     }
     interface DsoDropdownMenu {
+        "_getState": () => Promise<DropdownMenuInternalState>;
         /**
-          * Whether the menu is checkable.
-          * @default false
+          * Whether the menu items are checkable.
          */
         "checkable": boolean;
         /**
-          * Alignment of the dropdown
-          * @default "left"
+          * The label of the Dropdown Menu Button
          */
-        "dropdownAlign": "left" | "right";
+        "label": string | undefined;
         /**
-          * Space between button and dropdown options
-          * @default 2
+          * The variant of the Button to toggle the menu
+          * @default "secondary"
          */
-        "dropdownOptionsOffset": number;
+        "variant": "primary" | "secondary" | "tertiary";
+    }
+    interface DsoDropdownMenuGroup {
         /**
-          * Whether the menu is open or closed. This attribute is reflected and mutable.
-          * @default false
+          * The label of the dropdown menu group.
          */
-        "open": boolean;
+        "label"?: string;
+    }
+    interface DsoDropdownMenuItem {
+        "_dsoFocus": () => Promise<void>;
+        /**
+          * Whether the Dropdown Menu Item is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * The href of the link when the type is `link`.
+         */
+        "href"?: string;
+        /**
+          * The type of the dropdown menu item. Can be one of `button` or `link`.
+         */
+        "type": DropdownMenuItemType | undefined;
     }
     interface DsoExpandable {
         /**
@@ -1561,6 +1578,10 @@ export interface DsoDocumentComponentCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoDocumentComponentElement;
 }
+export interface DsoDropdownMenuItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoDropdownMenuItemElement;
+}
 export interface DsoExpandableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoExpandableElement;
@@ -2015,6 +2036,29 @@ declare global {
         prototype: HTMLDsoDropdownMenuElement;
         new (): HTMLDsoDropdownMenuElement;
     };
+    interface HTMLDsoDropdownMenuGroupElement extends Components.DsoDropdownMenuGroup, HTMLStencilElement {
+    }
+    var HTMLDsoDropdownMenuGroupElement: {
+        prototype: HTMLDsoDropdownMenuGroupElement;
+        new (): HTMLDsoDropdownMenuGroupElement;
+    };
+    interface HTMLDsoDropdownMenuItemElementEventMap {
+        "dsoClick": DropdownMenuItemClickEvent;
+    }
+    interface HTMLDsoDropdownMenuItemElement extends Components.DsoDropdownMenuItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsoDropdownMenuItemElementEventMap>(type: K, listener: (this: HTMLDsoDropdownMenuItemElement, ev: DsoDropdownMenuItemCustomEvent<HTMLDsoDropdownMenuItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsoDropdownMenuItemElementEventMap>(type: K, listener: (this: HTMLDsoDropdownMenuItemElement, ev: DsoDropdownMenuItemCustomEvent<HTMLDsoDropdownMenuItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsoDropdownMenuItemElement: {
+        prototype: HTMLDsoDropdownMenuItemElement;
+        new (): HTMLDsoDropdownMenuItemElement;
+    };
     interface HTMLDsoExpandableElementEventMap {
         "dsoExpandableAnimationStart": ExpandableAnimationStartEvent;
         "dsoExpandableAnimationEnd": ExpandableAnimationEndEvent;
@@ -2763,6 +2807,8 @@ declare global {
         "dso-document-card": HTMLDsoDocumentCardElement;
         "dso-document-component": HTMLDsoDocumentComponentElement;
         "dso-dropdown-menu": HTMLDsoDropdownMenuElement;
+        "dso-dropdown-menu-group": HTMLDsoDropdownMenuGroupElement;
+        "dso-dropdown-menu-item": HTMLDsoDropdownMenuItemElement;
         "dso-expandable": HTMLDsoExpandableElement;
         "dso-header": HTMLDsoHeaderElement;
         "dso-highlight-box": HTMLDsoHighlightBoxElement;
@@ -3445,25 +3491,42 @@ declare namespace LocalJSX {
     }
     interface DsoDropdownMenu {
         /**
-          * Whether the menu is checkable.
-          * @default false
+          * Whether the menu items are checkable.
          */
         "checkable"?: boolean;
         /**
-          * Alignment of the dropdown
-          * @default "left"
+          * The label of the Dropdown Menu Button
          */
-        "dropdownAlign"?: "left" | "right";
+        "label"?: string | undefined;
         /**
-          * Space between button and dropdown options
-          * @default 2
+          * The variant of the Button to toggle the menu
+          * @default "secondary"
          */
-        "dropdownOptionsOffset"?: number;
+        "variant"?: "primary" | "secondary" | "tertiary";
+    }
+    interface DsoDropdownMenuGroup {
         /**
-          * Whether the menu is open or closed. This attribute is reflected and mutable.
-          * @default false
+          * The label of the dropdown menu group.
          */
-        "open"?: boolean;
+        "label"?: string;
+    }
+    interface DsoDropdownMenuItem {
+        /**
+          * Whether the Dropdown Menu Item is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * The href of the link when the type is `link`.
+         */
+        "href"?: string;
+        /**
+          * Emitted when the user clicks the Dropdown Menu Item.
+         */
+        "onDsoClick"?: (event: DsoDropdownMenuItemCustomEvent<DropdownMenuItemClickEvent>) => void;
+        /**
+          * The type of the dropdown menu item. Can be one of `button` or `link`.
+         */
+        "type": DropdownMenuItemType | undefined;
     }
     interface DsoExpandable {
         /**
@@ -4663,10 +4726,17 @@ declare namespace LocalJSX {
         "href": string;
     }
     interface DsoDropdownMenuAttributes {
-        "open": boolean;
-        "dropdownAlign": "left" | "right";
-        "dropdownOptionsOffset": number;
         "checkable": boolean;
+        "label": string | undefined;
+        "variant": "primary" | "secondary" | "tertiary";
+    }
+    interface DsoDropdownMenuGroupAttributes {
+        "label": string;
+    }
+    interface DsoDropdownMenuItemAttributes {
+        "type": DropdownMenuItemType | undefined;
+        "href": string;
+        "checked": boolean;
     }
     interface DsoExpandableAttributes {
         "open": boolean;
@@ -4925,6 +4995,8 @@ declare namespace LocalJSX {
         "dso-document-card": Omit<DsoDocumentCard, keyof DsoDocumentCardAttributes> & { [K in keyof DsoDocumentCard & keyof DsoDocumentCardAttributes]?: DsoDocumentCard[K] } & { [K in keyof DsoDocumentCard & keyof DsoDocumentCardAttributes as `attr:${K}`]?: DsoDocumentCardAttributes[K] } & { [K in keyof DsoDocumentCard & keyof DsoDocumentCardAttributes as `prop:${K}`]?: DsoDocumentCard[K] } & OneOf<"href", DsoDocumentCard["href"], DsoDocumentCardAttributes["href"]>;
         "dso-document-component": Omit<DsoDocumentComponent, keyof DsoDocumentComponentAttributes> & { [K in keyof DsoDocumentComponent & keyof DsoDocumentComponentAttributes]?: DsoDocumentComponent[K] } & { [K in keyof DsoDocumentComponent & keyof DsoDocumentComponentAttributes as `attr:${K}`]?: DsoDocumentComponentAttributes[K] } & { [K in keyof DsoDocumentComponent & keyof DsoDocumentComponentAttributes as `prop:${K}`]?: DsoDocumentComponent[K] } & OneOf<"type", DsoDocumentComponent["type"], DsoDocumentComponentAttributes["type"]>;
         "dso-dropdown-menu": Omit<DsoDropdownMenu, keyof DsoDropdownMenuAttributes> & { [K in keyof DsoDropdownMenu & keyof DsoDropdownMenuAttributes]?: DsoDropdownMenu[K] } & { [K in keyof DsoDropdownMenu & keyof DsoDropdownMenuAttributes as `attr:${K}`]?: DsoDropdownMenuAttributes[K] } & { [K in keyof DsoDropdownMenu & keyof DsoDropdownMenuAttributes as `prop:${K}`]?: DsoDropdownMenu[K] };
+        "dso-dropdown-menu-group": Omit<DsoDropdownMenuGroup, keyof DsoDropdownMenuGroupAttributes> & { [K in keyof DsoDropdownMenuGroup & keyof DsoDropdownMenuGroupAttributes]?: DsoDropdownMenuGroup[K] } & { [K in keyof DsoDropdownMenuGroup & keyof DsoDropdownMenuGroupAttributes as `attr:${K}`]?: DsoDropdownMenuGroupAttributes[K] } & { [K in keyof DsoDropdownMenuGroup & keyof DsoDropdownMenuGroupAttributes as `prop:${K}`]?: DsoDropdownMenuGroup[K] };
+        "dso-dropdown-menu-item": Omit<DsoDropdownMenuItem, keyof DsoDropdownMenuItemAttributes> & { [K in keyof DsoDropdownMenuItem & keyof DsoDropdownMenuItemAttributes]?: DsoDropdownMenuItem[K] } & { [K in keyof DsoDropdownMenuItem & keyof DsoDropdownMenuItemAttributes as `attr:${K}`]?: DsoDropdownMenuItemAttributes[K] } & { [K in keyof DsoDropdownMenuItem & keyof DsoDropdownMenuItemAttributes as `prop:${K}`]?: DsoDropdownMenuItem[K] } & OneOf<"type", DsoDropdownMenuItem["type"], DsoDropdownMenuItemAttributes["type"]>;
         "dso-expandable": Omit<DsoExpandable, keyof DsoExpandableAttributes> & { [K in keyof DsoExpandable & keyof DsoExpandableAttributes]?: DsoExpandable[K] } & { [K in keyof DsoExpandable & keyof DsoExpandableAttributes as `attr:${K}`]?: DsoExpandableAttributes[K] } & { [K in keyof DsoExpandable & keyof DsoExpandableAttributes as `prop:${K}`]?: DsoExpandable[K] };
         "dso-header": Omit<DsoHeader, keyof DsoHeaderAttributes> & { [K in keyof DsoHeader & keyof DsoHeaderAttributes]?: DsoHeader[K] } & { [K in keyof DsoHeader & keyof DsoHeaderAttributes as `attr:${K}`]?: DsoHeaderAttributes[K] } & { [K in keyof DsoHeader & keyof DsoHeaderAttributes as `prop:${K}`]?: DsoHeader[K] };
         "dso-highlight-box": Omit<DsoHighlightBox, keyof DsoHighlightBoxAttributes> & { [K in keyof DsoHighlightBox & keyof DsoHighlightBoxAttributes]?: DsoHighlightBox[K] } & { [K in keyof DsoHighlightBox & keyof DsoHighlightBoxAttributes as `attr:${K}`]?: DsoHighlightBoxAttributes[K] } & { [K in keyof DsoHighlightBox & keyof DsoHighlightBoxAttributes as `prop:${K}`]?: DsoHighlightBox[K] };
@@ -5006,6 +5078,8 @@ declare module "@stencil/core" {
             "dso-document-card": LocalJSX.IntrinsicElements["dso-document-card"] & JSXBase.HTMLAttributes<HTMLDsoDocumentCardElement>;
             "dso-document-component": LocalJSX.IntrinsicElements["dso-document-component"] & JSXBase.HTMLAttributes<HTMLDsoDocumentComponentElement>;
             "dso-dropdown-menu": LocalJSX.IntrinsicElements["dso-dropdown-menu"] & JSXBase.HTMLAttributes<HTMLDsoDropdownMenuElement>;
+            "dso-dropdown-menu-group": LocalJSX.IntrinsicElements["dso-dropdown-menu-group"] & JSXBase.HTMLAttributes<HTMLDsoDropdownMenuGroupElement>;
+            "dso-dropdown-menu-item": LocalJSX.IntrinsicElements["dso-dropdown-menu-item"] & JSXBase.HTMLAttributes<HTMLDsoDropdownMenuItemElement>;
             "dso-expandable": LocalJSX.IntrinsicElements["dso-expandable"] & JSXBase.HTMLAttributes<HTMLDsoExpandableElement>;
             "dso-header": LocalJSX.IntrinsicElements["dso-header"] & JSXBase.HTMLAttributes<HTMLDsoHeaderElement>;
             "dso-highlight-box": LocalJSX.IntrinsicElements["dso-highlight-box"] & JSXBase.HTMLAttributes<HTMLDsoHighlightBoxElement>;

package/dist/types/stencil-public-runtime.d.ts

@@ -1070,6 +1070,7 @@ export declare namespace JSXBase {
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
         loading?: 'lazy' | 'auto' | 'eager';
+        referrerPolicy?: ReferrerPolicy;
         sizes?: string;
         src?: string;
         srcSet?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "97.1.1",
+  "version": "99.0.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -17,43 +17,43 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
     "@popperjs/core": "^2.11.8",
-    "@stencil/core": "4.43.4",
+    "@stencil/core": "4.43.5",
     "@stencil/store": "^2.2.2",
     "clsx": "^2.1.1",
     "escape-string-regexp": "^5.0.0",
-    "focus-trap": "^8.1.0",
-    "i18next": "^26.0.8",
+    "focus-trap": "^8.2.2",
+    "i18next": "^26.3.3",
     "popper-max-size-modifier": "^0.2.0",
-    "tabbable": "^6.4.0",
-    "uuid": "^14.0.0",
-    "dso-toolkit": "97.1.1"
+    "tabbable": "^6.5.0",
+    "uuid": "^14.0.1",
+    "dso-toolkit": "99.0.0"
   },
   "devDependencies": {
-    "@stencil/angular-output-target": "^1.3.0",
-    "@stencil/react-output-target": "^1.5.1",
+    "@stencil/angular-output-target": "^1.4.0",
+    "@stencil/react-output-target": "^1.6.0",
     "@stencil/sass": "^3.2.3",
     "@types/debounce": "^1.2.4",
     "@types/lodash.kebabcase": "^4.1.9",
     "@types/lodash.random": "^3.2.9",
     "@types/lodash.samplesize": "^4.2.9",
-    "@types/node": "^24.12.2",
-    "@types/react": "^19.2.14",
+    "@types/node": "^26.1.0",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "concurrently": "^9.2.1",
+    "concurrently": "^10.0.3",
     "debounce": "^3.0.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.random": "^3.2.0",
     "lodash.samplesize": "^4.2.0",
-    "prettier": "^3.8.3",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "prettier": "^3.9.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "rimraf": "^6.1.3",
     "stencil-inline-svg": "^1.1.0",
-    "tsx": "^4.21.0",
+    "tsx": "^4.22.4",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {
-    "dso-toolkit": "97.1.1"
+    "dso-toolkit": "99.0.0"
   },
   "nx": {
     "includedScripts": []

package/dist/bundle/p-0h9cOnX9.js

@@ -1,148 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, F as Fragment, t as transformTag } from './p-BIShp3sw.js';
-import { d as defineCustomElement$5 } from './p-D1ciWwSo.js';
-import { d as defineCustomElement$4 } from './p-zYhsKlIm.js';
-import { d as defineCustomElement$3 } from './p-CFPWVcsY.js';
-import { d as defineCustomElement$2 } from './p-Bh_AjQ7z.js';
-import { d as defineCustomElement$1 } from './p-CcFEBE0l.js';
-
-/**
- * Form random hash
- */
-function chr4() {
-    return Math.random().toString(16).slice(-4);
-}
-/**
- * Create random identifier with a prefix
- * @param prefix
- */
-function createIdentifier(prefix) {
-    return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
-}
-
-const selectableCss = () => `.sc-dso-selectable-h{padding-inline-start:var(--_dt-selectable-padding-inline-start, 32px);position:relative;display:var(--dso-selectable-display, block)}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{block-size:100%;inset-inline-start:0;margin:0;appearance:none;position:absolute;inset-block-start:0;inline-size:100%;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-inline-start:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--_dso-selectable-color, #275937);content:"";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--_dso-selectable-color, #39870c);border-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--_dso-selectable-color, #39870c);block-size:12px;inline-size:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--_dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--_dso-selectable-color:#ce3f51}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-block-start:8px}.sc-dso-selectable-h:not(:last-child){margin-block-end:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-block-size:24px;position:relative;margin-inline-start:var(--_dt-selectable-input-wrapper-margin-inline-start, -32px);padding-inline-start:var(--_dt-selectable-input-wrapper-padding-inline-start, 32px)}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--_dso-selectable-color, #275937);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-s>[slot=info]{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-s>[slot=options]{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-s>[slot=options] li+li{margin-block-start:8px}`;
-
-const Selectable = /*@__PURE__*/ proxyCustomElement(class Selectable extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dsoChange = createEvent(this, "dsoChange", 7);
-        this.infoActive = false;
-        this.fallbackIdentifier = createIdentifier("DsoSelectable");
-        this.handleOnChange = (e) => {
-            const inputTarget = e.target instanceof HTMLInputElement ? e.target : undefined;
-            this.dsoChange.emit({
-                originalEvent: e,
-                checked: !!inputTarget?.checked,
-                name: this.name,
-                value: this.value,
-            });
-            forceUpdate(this.host);
-        };
-    }
-    /**
-     * Method to toggle the Info. Is set to `active` when passed.
-     *
-     * If `active` is not passed, Info is toggled to opposite value.
-     * @param active
-     */
-    async toggleInfo(active) {
-        this.infoActive = active ?? !this.infoActive;
-    }
-    componentDidLoad() {
-        this.mutationObserver?.disconnect();
-        this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
-        this.mutationObserver.observe(this.host, {
-            childList: true,
-        });
-        this.setIndeterminate();
-    }
-    disconnectedCallback() {
-        this.mutationObserver?.disconnect();
-    }
-    setIndeterminate() {
-        if (!(this.input instanceof HTMLInputElement) || this.type !== "checkbox") {
-            return;
-        }
-        this.input.indeterminate = !!this.indeterminate;
-    }
-    render() {
-        const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: 'f8cd51d0562d5718bfb2846a1a1f001d067d88c2' }, h("div", { key: '0334a8b7aa939eac065292c34ad37bf4e757be56', class: "dso-selectable-container" }, h("div", { key: 'a7fb59205e16eb3797ed1acaaa7acb3934583507', class: "dso-selectable-input-wrapper" }, h("input", { key: 'bb7f49b38b56e5ba6bb690292646343bbfe0f2eb', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '45a00a047487be4f1426d83a3366ffce52dc941e', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'ab533add5946fe56c6362ae99a6bc89aebe82b6c', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '832279eb9a49a7b16374f00218ea5e8c3841aeed' }, h("slot", { key: '9d93816bcc8c6d9a91da08001d889feec5fc5d64', name: "info" })))), h("slot", { key: '8aee73d7bc3fb2a634b8c9a445cd20318f436765', name: "options" })));
-    }
-    componentDidRender() {
-        if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {
-            this.input.checked = this.checked;
-        }
-    }
-    getIdentifier() {
-        return this.identifier ?? this.fallbackIdentifier;
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "indeterminate": [{
-                "setIndeterminate": 0
-            }]
-    }; }
-    static get style() { return selectableCss(); }
-}, [262, "dso-selectable", {
-        "type": [1],
-        "identifier": [1],
-        "name": [1],
-        "value": [1],
-        "invalid": [4],
-        "describedById": [1, "described-by-id"],
-        "labelledById": [1, "labelled-by-id"],
-        "disabled": [4],
-        "required": [4],
-        "checked": [516],
-        "indeterminate": [4],
-        "infoFixed": [4, "info-fixed"],
-        "infoActive": [32],
-        "toggleInfo": [64]
-    }, undefined, {
-        "indeterminate": [{
-                "setIndeterminate": 0
-            }]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-selectable", "dso-icon", "dso-icon-button", "dso-info", "dso-info-button", "dso-scrollable"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-selectable":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), Selectable);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "dso-icon-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "dso-info":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "dso-info-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "dso-scrollable":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { Selectable as S, defineCustomElement as d };