@dso-toolkit/core 97.1.0 → 98.0.0

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 { c as createStore } from './p-DVuh3xxM.js';
+import { d as defineCustomElement$2 } from './p-BFzVw-DT.js';
 import { v as v4 } from './p-CK3_k8jD.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,78 @@ 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 && 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: '73eb6230081dd28bb473514f6b0aa26171c975d1', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '2723bd3be70034df5380907ae417c53cd6485da1', 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: '0ee3b32c6e5b630ed0f2b073ef8032be71643a41', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: '7ba3817d9bb1e1af868f59d3e9c1401ba5653544', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("slot", { key: 'af7124507118b89d0915992daa24c66952364d15' }))));
     }
     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-BCqaYIQt.js';
 
 const DsoExpandable = Expandable;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-header.js

@@ -1,11 +1,11 @@
-import { h, p as proxyCustomElement, H, d as createEvent, f as forceUpdate, c as Host, F as Fragment, t as transformTag } from './p-BIShp3sw.js';
+import { h, p as proxyCustomElement, H, d as createEvent, f as forceUpdate, c as Host, F as Fragment, 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 { c as clsx } from './p-ChV9xqsO.js';
-import { t as tabbable } from './p-PsHl6ZhV.js';
+import { t as tabbable } from './p-BZ0vuOVx.js';
 import { g as getActiveElement } from './p-BWkWD1Z2.js';
-import { i as i18n } from './p-DwBHVuoZ.js';
+import { i as i18n } from './p-CRgylkO_.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-BFzVw-DT.js';
 import { v as v4 } from './p-CK3_k8jD.js';
 
 const translations = {
@@ -120,11 +120,24 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
         };
         this.menuItemElementRefs = [];
         this.text = i18n(() => this.host, translations);
-        this.resizeObserver = new ResizeObserver(() => {
+        this.flushResize = () => {
+            this.resizeFrameId = undefined;
+            if (!this.host.isConnected) {
+                return;
+            }
             this.resetVisibleMenuItems();
             this.toggleOptions(false);
             this.dropdownOptionsOffset = 0;
             forceUpdate(this.host);
+        };
+        this.scheduleResize = () => {
+            if (this.resizeFrameId !== undefined) {
+                return;
+            }
+            this.resizeFrameId = requestAnimationFrame(this.flushResize);
+        };
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleResize();
         });
         this.focusOutListener = (event) => {
             if (this.open &&
@@ -204,6 +217,10 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
     }
     disconnectedCallback() {
         this.resizeObserver.disconnect();
+        if (this.resizeFrameId !== undefined) {
+            cancelAnimationFrame(this.resizeFrameId);
+            this.resizeFrameId = undefined;
+        }
         this.toggleOptions(false);
     }
     componentDidRender() {
@@ -240,7 +257,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
         }
     }
     render() {
-        return (h(Host, { key: '049a7cd2e6c5beccbe9a1b23bcd505ce2cfbc1e4', "is-compact": this.isCompact }, h("div", { key: '69626521734262e4cb40369667b084bee23cec42', class: "dso-header" }, h("div", { key: '7e0106defaff8c5f6c0c8942c987d3416acb39bc', class: "logo-container" }, h("slot", { key: '7355a1f157c81f785bb101f7c5490aa6ae0330c4', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '7616366268bd638278a5c8de35edad2caf574b41', "is-compact": this.isCompact }, h("div", { key: '94d457313e7fae53ce4d680c1f046f04c6bf4eb5', class: "dso-header" }, h("div", { key: '5f28b536b1cf02cae5a8f49ff9a0013c4ac44734', class: "logo-container" }, h("slot", { key: 'c806a6d6443faab890b185b7f78b561f0b5bc133', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];

package/dist/bundle/dso-highlight-box.js

@@ -1,4 +1,4 @@
-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 highlightBoxCss = () => `*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;inset-inline-start:16px;position:absolute;inset-block-start:-1.5rem;block-size:2rem;inline-size:2rem;color:#fff;font-size:1.25rem;font-weight:500;line-height:2rem;text-align:center}:host{margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--highlight-box-block-size, unset);min-block-size:var(--highlight-box-min-block-size, unset)}:host[has-counter]{block-size:var(--highlight-box-counter-block-size, unset)}:host:not([has-counter]){block-size:var(--highlight-box-nocounter-block-size, unset)}:host{display:block;container-type:inline-size;position:relative;z-index:1}`;
 
@@ -12,7 +12,7 @@ const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends
     }
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '11fabaa968d990291c856c89f08c7d9cf73c47e8', "has-counter": hasCounter }, hasCounter && h("div", { key: 'f5bdf7d62ebf65996f6cf8c151ef4a4bab65654d', class: "dso-step-counter" }, this.step ?? h("slot", { key: '7a5a4f56968c88710cdb095bb9f2768efb9972f3', name: "icon" })), h("slot", { key: 'a2f640620379148fb881f993e17cf42d9e02bb4c' })));
+        return (h(Host, { key: '1e902cf67675123014ad9e2c1bfcc35284c2828b', "has-counter": hasCounter }, hasCounter && h("div", { key: '59a5633cf405c58276188f21f0627a00ad3d6a11', class: "dso-step-counter" }, this.step ?? h("slot", { key: 'edb70c650e0c9a63421b4c88b8f8ed3c79011d5c', name: "icon" })), h("slot", { key: '255d6709a5a8eb50e8a7aec26671505cbddab89a' })));
     }
     get element() { return this; }
     static get style() { return highlightBoxCss(); }

package/dist/bundle/dso-history-item.js

@@ -1,6 +1,6 @@
-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-BFzVw-DT.js';
 
 const historyItemCss = () => `:host{display:block}*,*::after,*::before{box-sizing:border-box}.history-item{border-block-end:1px solid #e5e5e5;display:flex;gap:8px;inline-size:100%;padding-block:16px;padding-inline:8px}:host(:not([type=waarschuwing])) .history-item:has(.history-item-title a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([current]:not([type=waarschuwing])) .history-item{background-color:#e5e5e5}:host([type=tijdelijk-regelingdeel]) .history-item-status-message{color:#8b4a6a}:host([type=tijdelijk-regelingdeel-besluit]) .history-item-status-message{color:#8b4a6a}:host([type=waarschuwing]) .history-item-status-message{color:#b62f41}.history-item-date,.history-item-content{display:flex;flex-direction:column}.history-item-date{flex:0 0 90px}.history-item-status-message,.history-item-warning{display:flex}.history-item-status-message dso-icon,.history-item-warning dso-icon{flex-shrink:0;margin-inline-end:8px}.history-item-warning{color:#b62f41}.history-item-title,.history-item-explanation,.history-item-warning{margin-block-start:8px;margin-inline-start:32px}.history-item-title{white-space:nowrap}.history-item-title .title-anchor{color:#275937;font-weight:600;text-decoration:none}.history-item-title .title-anchor:hover{text-decoration:underline}.history-item-title .title-anchor:visited{color:#275937}.history-item-title .history-item-title-content{white-space:normal}.history-item-title dso-icon{margin-inline-start:4px}`;
 
@@ -45,7 +45,7 @@ const HistoryItem = /*@__PURE__*/ proxyCustomElement(class HistoryItem extends H
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h("div", { key: '46b086a93f12ddfa53c1fbabd36a96c7b2905bf9', class: "history-item" }, h("div", { key: 'e6e36dbbeea19b949f39e08d1447e159f3e9dec3', class: "history-item-date" }, h("slot", { key: '2abff00e5b46822d29f0ba132ec7bc611a743a77', name: "date" })), h("div", { key: '29015f198acaefe304926b6190cef2360468b171', class: "history-item-content" }, h("div", { key: '979f988d463139993a2ce50fe6c7aa5f67376055', class: "history-item-status-message" }, h("dso-icon", { key: '54fed97c8f7cda66a062a45135b4de5f8ae2e99d', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'a4e0f448ef5e2b8814894ec7ec363a9d1ca49054', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: 'c7552d220c1c6975eddee04a05ef47fc901ed101', class: "history-item-title" }, h("a", { key: 'afb73216739f1e773e8af90ebd0fb3f9883389a1', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: 'b7ef7db153f9ab537f57c42ebe0b8cfeb05290c8', class: "history-item-title-content" }, h("slot", { key: '8102f8a64cea0c4a91403db71fe4238b8ab45657', name: "title" })), "\u2060", h("dso-icon", { key: '0db7fec66135bb97e504d69ec496dbe07f649080', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '04668c9a02458071fa95ef7ab07ab684c59209e2', class: "history-item-explanation" }, h("slot", { key: 'c8dce4885752b53bd86569793b0d479e136e020c', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '4e70edd351fa28d880395da0d39635b80b89e5c6', class: "history-item-warning" }, h("dso-icon", { key: 'd57c337527ab3e37388f1ddcb27f127267dcd59c', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '306f3b2e834b1f707f0422f7a928758787955189', name: "warning" }))))));
+        return (h("div", { key: '286c3a153bcfe21c6a1061ec684f034dce5b5dd0', class: "history-item" }, h("div", { key: '06e056e57255b7fbaa76e953851f9b7866daa11c', class: "history-item-date" }, h("slot", { key: '8e78082b36fb909bc733ca04edc75c00e811052d', name: "date" })), h("div", { key: '17e209c98bbf9af6882973d3fb7ff96b7728ccda', class: "history-item-content" }, h("div", { key: 'bd575db077061c0d47f52d3ef20a0bc9f105dc19', class: "history-item-status-message" }, h("dso-icon", { key: '35d6e6822cd74dd891820cf9cd105c06d258fc86', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '569d3fb874ec165b98a2c9adeb3cb486e37e04fc', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: 'ed60f29a6b6210938c330fdd96eddc11304f124e', class: "history-item-title" }, h("a", { key: 'beeacf730a1b5f2982904a5a8d33fd77d895b516', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: 'e91ff8f57b28c5ac65551a7de78062a280c3db11', class: "history-item-title-content" }, h("slot", { key: '683603e86b5e949f2ec8fa97a30644264733768b', name: "title" })), "\u2060", h("dso-icon", { key: '9646a46c7637c2c31aad5966cf26b44bf5a5ddd2', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '94c3a4affe2dbff1db032ea96b9eb6cc400c25d3', class: "history-item-explanation" }, h("slot", { key: 'b2f1927d4429e9a051bc8bd2b107ba8d8a8fbd14', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '0578320d731fc2b982ced2f19b577878ba73d0c0', class: "history-item-warning" }, h("dso-icon", { key: '2e6589b370b700117c4761a81be83b46db4bcdef', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '739c49fd64725c068f781ca6369465d0c67479ce', name: "warning" }))))));
     }
     get host() { return this; }
     static get style() { return historyItemCss(); }

package/dist/bundle/dso-icon-button.js

@@ -1,4 +1,4 @@
-import { I as IconButton, d as defineCustomElement$1 } from './p-zYhsKlIm.js';
+import { I as IconButton, d as defineCustomElement$1 } from './p-D1Oc-tJz.js';
 
 const DsoIconButton = IconButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-icon.js

@@ -1,4 +1,4 @@
-import { I as Icon, d as defineCustomElement$1 } from './p-D1ciWwSo.js';
+import { I as Icon, d as defineCustomElement$1 } from './p-BFzVw-DT.js';
 
 const DsoIcon = Icon;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-image-overlay.js

@@ -1,4 +1,4 @@
-import { I as ImageOverlay, d as defineCustomElement$1 } from './p-CKnJRPZn.js';
+import { I as ImageOverlay, d as defineCustomElement$1 } from './p-_WFAb7kl.js';
 
 const DsoImageOverlay = ImageOverlay;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-info-button.js

@@ -1,4 +1,4 @@
-import { I as InfoButton, d as defineCustomElement$1 } from './p-Bh_AjQ7z.js';
+import { I as InfoButton, d as defineCustomElement$1 } from './p-D9ik-TAM.js';
 
 const DsoInfoButton = InfoButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-info.js

@@ -1,4 +1,4 @@
-import { I as Info, d as defineCustomElement$1 } from './p-CFPWVcsY.js';
+import { I as Info, d as defineCustomElement$1 } from './p-BfWc_aEb.js';
 
 const DsoInfo = Info;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-input-range.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-BIShp3sw.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-Di7uBIhp.js';
 
 const inputRangeCss = () => `:host{display:flex;align-items:center;gap:0.625rem;padding-block:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:20px}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-radius:50%;border-color:transparent}.input::-moz-range-thumb:hover{background-color:#275937}`;
 
@@ -19,13 +19,13 @@ const InputRange = /*@__PURE__*/ proxyCustomElement(class InputRange extends H {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: '817a31fe6d65fcdcf80ba2ab8c6782a6caaa5e6a', id: "description", hidden: true }, this.description)), h("span", { key: '26e3a9848dc7d5b017f0347f46ed6a401b52a85d', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '901fd461f8022de4f07e76f9d26c939e69f91d49', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '6b70e1c36144d691a071d6b217f47532d693c76c', id: "description", hidden: true }, this.description)), h("span", { key: '9ac5420d075b5fa80656d6e467c18a8c9d6bb058', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '9e4c0f90ccccc29729bc6f55db28406508fc8bb9', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: 'aaf24f2564c9a896e2d192efaacda91132056729', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '8dea25bb5786bf804c7a48d8008f7f4f8999358a', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return this; }
     static get style() { return inputRangeCss(); }

package/dist/bundle/dso-label.js

@@ -1,4 +1,4 @@
-import { L as Label, d as defineCustomElement$1 } from './p-6-0kKG2F.js';
+import { L as Label, d as defineCustomElement$1 } from './p-BXiN5sX-.js';
 
 const DsoLabel = Label;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-legend-group.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-BIShp3sw.js';
-import { i as i18n } from './p-DwBHVuoZ.js';
-import { d as defineCustomElement$3 } from './p-D1ciWwSo.js';
-import { d as defineCustomElement$2 } from './p-zYhsKlIm.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-Di7uBIhp.js';
+import { i as i18n } from './p-CRgylkO_.js';
+import { d as defineCustomElement$3 } from './p-BFzVw-DT.js';
+import { d as defineCustomElement$2 } from './p-D1Oc-tJz.js';
 
 const translations = {
     en: {
@@ -61,7 +61,7 @@ const LegendGroup = /*@__PURE__*/ proxyCustomElement(class LegendGroup extends H
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '23e81a9f5313e6e720793fd355e16280cc72b44e' }, h("div", { key: '6dabd746bd5f6c6ef03920d78165ba4c7c589974', class: "legend-group-header" }, h("slot", { key: '9abf4a7d64c8b8a900f0247bd9b7f82a3e198908', name: "heading" }), this.mode && (h("dso-icon-button", { key: '1ed8e7db427b78de927ba276aea586b200c07647', label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: 'ef76fb21909e746af4eb97614e4a4528e4b677ac', name: "options" }), h("slot", { key: 'bb61c854a2f3e146d07596c42b6e9511b6c7da28' })));
+        return (h(Host, { key: 'c1f469d931abab7333004f3ec3de7eb868cca788' }, h("div", { key: '67a062ee39760c13e08659b749e3d1da4c89e1d6', class: "legend-group-header" }, h("slot", { key: '05dbf1bc3430762829aa10ed3301cc57856d4fd6', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'c7e2db27866996a06ba9cebf1307ae5e2697358d', label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: '10bdc248f21459031d5f2a23cfeccc2311d013d3', name: "options" }), h("slot", { key: 'dc134c5fad2a7b7c133620a6757520a0c5c81245' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/bundle/dso-legend-item.js

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, c as Host, t as transformTag } from './p-BIShp3sw.js';
+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 i18n } from './p-DwBHVuoZ.js';
-import { d as defineCustomElement$6 } from './p-D1ciWwSo.js';
-import { d as defineCustomElement$5 } from './p-zYhsKlIm.js';
-import { d as defineCustomElement$4 } from './p-Bh_AjQ7z.js';
-import { d as defineCustomElement$3 } from './p-CcFEBE0l.js';
-import { d as defineCustomElement$2 } from './p-DYFOhFhk.js';
+import { i as i18n } from './p-CRgylkO_.js';
+import { d as defineCustomElement$6 } from './p-BFzVw-DT.js';
+import { d as defineCustomElement$5 } from './p-D1Oc-tJz.js';
+import { d as defineCustomElement$4 } from './p-D9ik-TAM.js';
+import { d as defineCustomElement$3 } from './p-DFS4M3wz.js';
+import { d as defineCustomElement$2 } from './p-D-E3DKqU.js';
 
 const translations = {
     en: {
@@ -89,7 +89,7 @@ const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends H {
         const accessibleLabel = label?.textContent
             ? this.text("makeActive", { label: label.textContent.toLowerCase() })
             : this.text("makeActiveDefault");
-        return (h(Host, { key: '06555aea03a3f68f81bcdae689f819057a5cab31', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '4b9a671ca33f26bc7e0f0da6fa87b2b53f8c6863', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '5fb2c1ddc915f67408ed756155bc9b3a3c9f3291' }, h("slot", { key: '612953f0f771a1b1515861f51de5fc0dc29a640c', name: "symbol" }))), h("div", { key: 'f71d2fc0108ba41bf01d9edc5705d94f1b51217a' }, h("slot", { key: 'c33af92708989078932c3b08015f15a79985c411', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '79cfb323e182a3ac343ae93efd6c1523e5048c0d', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '7b6883d6671682e42c400e30519109e389c5d681', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '2b0bb453545e26e6d8f50006809335ff7a7aa129', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: 'f78bee16dd7ef6d933efa11beef7b8ec0c9e9e8d', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '13f453ecdfe586ea3cd1884736da6e1941feb1b7', name: "options" })))));
+        return (h(Host, { key: '035e5b513dca156d54fe39b3c63fc598db9409f1', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '32683243fb21d57391c83f9266e3fc9b178250d4', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '264a4eef1a509100be9c1d82f5dd62ce53ec789c' }, h("slot", { key: '1d4999df9320810f1b3c245cd0e3e7cff4958afb', name: "symbol" }))), h("div", { key: '37823bbe38e9c802f6ed1a49c0d32a53ed05bb30' }, h("slot", { key: '81ac6eaafcf0933386960fb8eb34ae54560fecbe', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '825246e77a18d1c2f6643dbedf7513822eb8f74e', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '5a7e2c346be9c6d9b3da78ccfbb98ffbf7450df2', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '700315164076fc30dae126caa2c02f7633dda0b7', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: '606409f7a3dda050fed20eb000bf86532d3dc7ad', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: 'a4aee2d66d6fce4f00817cc117235709ec0c2b8a', name: "options" })))));
     }
     get host() { return this; }
     static get style() { return legendItemCss(); }