@dso-toolkit/core 102.0.0 → 104.0.0

package/dist/collection/components/dropdown-menu/dropdown-menu.css

@@ -62,7 +62,7 @@ button.dso-primary {
   padding-block: 11px;
   padding-inline: 15px;
 }
-button.dso-primary:hover {
+button.dso-primary:hover, button.dso-primary:focus-visible {
   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);
@@ -74,7 +74,7 @@ button.dso-primary:active {
   color: var(--_dso-button-primary-active-color, #fff);
   float: var(--_dso-button-float-primary, none);
 }
-button.dso-primary[disabled], button.dso-primary[disabled]:hover {
+button.dso-primary[disabled], button.dso-primary[disabled]:hover, button.dso-primary[disabled]:focus-visible {
   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);
@@ -184,7 +184,7 @@ button.dso-secondary {
   padding-block: 11px;
   padding-inline: 15px;
 }
-button.dso-secondary:hover {
+button.dso-secondary:hover, button.dso-secondary:focus-visible {
   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);
@@ -196,7 +196,7 @@ button.dso-secondary:active {
   color: var(--_dso-button-secondary-active-color, #fff);
   float: var(--_dso-button-float-secondary, none);
 }
-button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {
+button.dso-secondary[disabled], button.dso-secondary[disabled]:hover, button.dso-secondary[disabled]:focus-visible {
   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);
@@ -260,7 +260,7 @@ button.dso-secondary.dso-spinner-left::before {
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-button.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
+button.dso-secondary.dso-spinner-left:not([disabled]):hover::before, button.dso-secondary.dso-spinner-left:not([disabled]):focus-visible::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: "";
@@ -270,7 +270,7 @@ button.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
+button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before, button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:focus-visible::before {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -284,7 +284,7 @@ button.dso-secondary.dso-spinner-right::after {
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-button.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
+button.dso-secondary.dso-spinner-right:not([disabled]):hover::after, button.dso-secondary.dso-spinner-right:not([disabled]):focus-visible::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: "";
@@ -294,7 +294,7 @@ button.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
+button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after, button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:focus-visible::after {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -356,7 +356,7 @@ button.dso-tertiary {
   padding-block: 11px;
   padding-inline: 15px;
 }
-button.dso-tertiary:hover {
+button.dso-tertiary:hover, button.dso-tertiary:focus-visible {
   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);
@@ -368,7 +368,7 @@ button.dso-tertiary:active {
   color: var(--_dso-button-tertiary-active-color, #173521);
   float: var(--_dso-button-float-tertiary, none);
 }
-button.dso-tertiary[disabled], button.dso-tertiary[disabled]:hover {
+button.dso-tertiary[disabled], button.dso-tertiary[disabled]:hover, button.dso-tertiary[disabled]:focus-visible {
   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);
@@ -417,7 +417,7 @@ button.dso-tertiary {
 button.dso-tertiary[disabled].dso-spinner-left, button.dso-tertiary[disabled].dso-spinner-right {
   color: #39870c;
 }
-button.dso-tertiary:not([disabled]):hover {
+button.dso-tertiary:not([disabled]):hover, button.dso-tertiary:not([disabled]):active {
   text-decoration: underline;
   text-underline-position: under;
 }

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -206,7 +206,7 @@ export class DropdownMenu {
     }
     render() {
         const buttonId = uuidv4();
-        return (h(Host, { key: '0e2e2c0226bec7638b3d60baab089708191dd6eb', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '4e11b83883f18b991eab4c219b4bebb2eb1317fb', 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: '7d2d0724c47777fc68d815cc5d92c0d5ac996ab6', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: 'ab88d386a9d8974162728f663bda7e279368f04b', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { key: '3e1dda4a8dcd2678cdf96a6125124384444051ab' }, h("slot", { key: '8954e92ac331853d1dd3d7a0089caf4754cdd3e8' })))));
+        return (h(Host, { key: 'a8c132a5eb46f573a3f8b5e5d63d66ab9bc6b19d', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '1b2972e319219197a11d1f0aa8332058e713dd67', 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: '0f750ace35248b6c4dbd769f3eaff7747931f2da', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: '2b656152a020fb097d2149ab7fe4dc27896fdf9f', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { key: '8757e3267f3e3eb7866d81c80b126cfd095a4e6d' }, h("slot", { key: 'b8e15464246f43f0d2eba2a5b9a73abf7ee2cdda' })))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/expandable/expandable.css

@@ -30,6 +30,10 @@
   display: block;
 }
 
+.slot-container {
+  min-inline-size: 0;
+}
+
 *,
 *::after,
 *::before {

package/dist/collection/components/expandable/expandable.js

@@ -39,10 +39,10 @@ export class Expandable {
         }
     }
     render() {
-        return (h(Host, { key: 'a0469ae8e68f3d121fcdab6fc08b8a92018d9ab0', "aria-hidden": this.open ? "false" : "true", class: clsx({
+        return (h(Host, { key: 'de84de7e2f7c6718d7ca60d992e996683d4c3870', "aria-hidden": this.open ? "false" : "true", class: clsx({
                 "dso-animate-ready": this.enableAnimation,
                 "dso-hide": this.isClosed,
-            }) }, h("div", { key: '1fbfd59136f816df3d8b44c6c7dd54c8201435aa', class: "slot-container" }, h("slot", { key: '6e7247668ff0ea70589c3b654a2b52b22379a717' }))));
+            }) }, h("div", { key: '66e7f431f9e5c6f29e935e350aef5aee3f4171fc', class: "slot-container" }, h("slot", { key: '95955a13fafd1d9bc70e8b4d5c6bbad6f0836999' }))));
     }
     static get is() { return "dso-expandable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid-column/grid-column.js

@@ -1,6 +1,8 @@
 import { Host, h, } from "@stencil/core";
 const overlayMediaQuery = "(min-width: 768px)";
 /**
+ * Een kolom in het grid. In overlay-modus valt de kolom over de andere kolommen van de row.
+ *
  * @slot - The default slot for the column content.
  */
 export class GridColumn {
@@ -87,7 +89,7 @@ export class GridColumn {
         this.resizeObserver = undefined;
     }
     render() {
-        return (h(Host, { key: '603befb14663a71590e342c590f3ebde4d08be42' }, this.overlayActive ? (h("dialog", { class: "grid-column-content", ref: (element) => (this.dialogElement = element), onClick: this.handleDialogClick, onCancel: this.handleDialogCancel, onClose: this.handleDialogClose }, h("slot", null))) : (h("div", { class: "grid-column-content" }, h("slot", null)))));
+        return (h(Host, { key: '24abd38b39dfa65a82720627b70c35cbf8cdcf45' }, this.overlayActive ? (h("dialog", { class: "grid-column-content", ref: (element) => (this.dialogElement = element), onClick: this.handleDialogClick, onCancel: this.handleDialogCancel, onClose: this.handleDialogClose }, h("slot", null))) : (h("div", { class: "grid-column-content" }, h("slot", null)))));
     }
     static get is() { return "dso-grid-column"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.css

@@ -205,7 +205,7 @@ div[popover] {
   line-height: 1.5;
   padding: 16px;
   text-decoration: none;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }
 .dropdown-menu .dropdown-menu-options ul li a:focus,
 .dropdown-menu .dropdown-menu-options ul li button:focus {

package/dist/collection/components/header/header.js

@@ -278,7 +278,7 @@ export class Header {
         }
     }
     render() {
-        return (h(Host, { key: 'cb1ed3299e9c55352cab476696bd2d6ad94cbd54', "is-compact": this.isCompact }, h("div", { key: '218cefd65ca18da0237e39fba0aba06259119254', class: "dso-header" }, h("div", { key: 'c7681803acf271892e46819e3d9568ebc3ed849a', class: "logo-container" }, h("slot", { key: 'cba4cf96314214ee2af03501ede754c879d31fec', name: "logo" })), this.renderHeaderSession(), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '6fb9bc42f5695371238cb2ddc0c9b2950e043e94', "is-compact": this.isCompact }, h("div", { key: '7d50059f45edbac145ec85a14a2ead09c00793a2', class: "dso-header" }, h("div", { key: 'f68975b5572e0dd783360e6d288af7d101b19fbe', class: "logo-container" }, h("slot", { key: 'a578a1341985819c2b4bec868ffa43d6090290ea', name: "logo" })), this.renderHeaderSession(), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];

package/dist/collection/components/hero-image/hero-image.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
  */
 export class HeroImage {
     render() {
-        return (h(Host, { key: '58986f7f8ff51ad08e4a6cecfc8b69b7f534ce59' }, h("slot", { key: '3de9aa7aeb53413ddc4bf442a8e20227a8f94710', name: "image" }), h("div", { key: '16a40d270ae8eebd3213222a20672c6213302d97', class: "hero-image-container" }, h("slot", { key: '8a6817e250897a98ad525a1ca5f5775e04814ef3' }))));
+        return (h(Host, { key: 'b8c10e49c8bc6855edb0f400130a48f027ea4415' }, h("slot", { key: '57ae247c1298f94bf090a4446e154cbcca2c0927', name: "image" }), h("div", { key: '79b3b7d18948570f7dc119b39f0551563acdd71c', class: "hero-image-container" }, h("slot", { key: '8ce6bcaf5a15fe60d872f544c40b1c01e1ddc3b5' }))));
     }
     static get is() { return "dso-hero-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/highlight-box/highlight-box.css

@@ -66,7 +66,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -100,7 +100,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -143,7 +143,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -177,7 +177,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;

package/dist/collection/components/highlight-box/highlight-box.js

@@ -6,7 +6,7 @@ import { Host, h } from "@stencil/core";
 export class HighlightBox {
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '91d00560a3617308d002684f4c67c940b16dc1c7', "has-counter": hasCounter }, hasCounter && (h("div", { key: 'ed7997c8e77b13b44e5a567ee31116ba937fc6c2', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: '4993d27042a6a7839da8fd679625dbe17a1cd3b2', name: "icon" }))), h("slot", { key: 'bfab78815718775c72114b51730d229c1d2b3615' })));
+        return (h(Host, { key: '4b0f57c318c4955ce158b47d8c358153247f8be0', "has-counter": hasCounter }, hasCounter && (h("div", { key: '60bf0e921a5200f528bd93b4a765b8321e70a199', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: '1657d802aaa17d882683486c65858033095388a5', name: "icon" }))), h("slot", { key: 'a8a26a6a3977e7d7ad7249f2fa6f3ce35d5a4818' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/history-item/history-item.js

@@ -42,7 +42,7 @@ export class HistoryItem {
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h("div", { key: '0ddccba216f32216a5ce222cc11b003bacdb28af', class: "history-item" }, h("div", { key: 'b8e3e1c7acc1dfdded03f8829d75362d82bf4920', class: "history-item-date" }, h("slot", { key: 'a02d02b411a8827bead6be05cbd4fd6ab22feeb4', name: "date" })), h("div", { key: 'e83882c2988f87d822126947f6b954682496d6bc', class: "history-item-content" }, h("div", { key: '4409043a85b9ef30d21a64c2119fd6dab0e320a7', class: "history-item-status-message" }, h("dso-icon", { key: 'e5096c926aec70dee1471f1cfa01d6a8bb050200', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'a7c923bd536c1b02676df779216186f4a49856d7', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '2db028e5addc28fbd82210129719f86363395c4b', class: "history-item-title" }, h("a", { key: '871157e769f9dc0a2af5809e60ca3292ad847f65', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: '90bac7607cbe8a838c8f9086c825591e34d7fd35', class: "history-item-title-content" }, h("slot", { key: '0c4e9921ace20c57e55d2fbc14019b173624209e', name: "title" })), "\u2060", h("dso-icon", { key: 'd3b03e7226a6b0e8dce037a0a390367028490a77', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: 'ce9f3ced38791d38fb8778cd548fa8d969c0f959', class: "history-item-explanation" }, h("slot", { key: '80156b40b6367688076c34684ac726e3904edae3', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '13f461a66e60fed780b3611289b70efe9bc21bc5', class: "history-item-warning" }, h("dso-icon", { key: '750ed3861b34c53fd0bdcf407da4bd8e566d9d92', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '50377ddabb3c9f22f70c182e44a520cac18397c6', name: "warning" }))))));
+        return (h("div", { key: 'd379c0d7c1e7ee6408dacf352b96db6095e364fb', class: "history-item" }, h("div", { key: 'c2f7da0d6fac2de1d48159e83186ad233d2fb5b3', class: "history-item-date" }, h("slot", { key: 'f4a8f70a314f4a79ab9293aeed4fbbecbe7e67d0', name: "date" })), h("div", { key: 'a3eb1f2d8c6cdae25863a93c3bab6e9a4fe8ad8a', class: "history-item-content" }, h("div", { key: 'afa986699dfa3ff2ecb45e88ec5badc319886a9d', class: "history-item-status-message" }, h("dso-icon", { key: '7f9fb3348e815a5373c1220233441b3fd0d28d10', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'e9ad0a6f2a492b7c115907a9d134c9b140bade5a', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '891fd46540c0fc4b742d3aa2bab1c9691be8cca2', class: "history-item-title" }, h("a", { key: '07f79622d1b84b350826353eb58cd2a6145eb0b3', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: '4a14f723069e8d1f3595cc32c49ee4dc5a916f05', class: "history-item-title-content" }, h("slot", { key: '0ec1727ca51f1f763d29021ff14c1068abacf86a', name: "title" })), "\u2060", h("dso-icon", { key: '8fa39e3809b584b6d9ecc4894f99da9cba3bb4a2', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '90b2d977df806078ef094eac5415016b5b40cd39', class: "history-item-explanation" }, h("slot", { key: '3340cd05e872bdbe0f2d01d89e950ace23c24392', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: 'e470ead9a3835a3c871d044d57a8227a4f1a9a82', class: "history-item-warning" }, h("dso-icon", { key: '016db354848fbe80954fbcbe848ff0abdcfb97c9', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'f2e94fe5f704f4341ebbac394606c762e842c8c9', name: "warning" }))))));
     }
     static get is() { return "dso-history-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon-button/icon-button.css

@@ -189,7 +189,7 @@
   padding-block: 11px;
   padding-inline: 15px;
 }
-.dso-secondary:hover {
+.dso-secondary:hover, .dso-secondary:focus-visible {
   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);
@@ -201,7 +201,7 @@
   color: var(--_dso-button-secondary-active-color, #fff);
   float: var(--_dso-button-float-secondary, none);
 }
-.dso-secondary[disabled], .dso-secondary[disabled]:hover {
+.dso-secondary[disabled], .dso-secondary[disabled]:hover, .dso-secondary[disabled]:focus-visible {
   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);
@@ -265,7 +265,7 @@
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
+.dso-secondary.dso-spinner-left:not([disabled]):hover::before, .dso-secondary.dso-spinner-left:not([disabled]):focus-visible::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: "";
@@ -275,7 +275,7 @@
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
+.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before, .dso-secondary.dso-spinner-left:not([disabled]).dso-small:focus-visible::before {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -289,7 +289,7 @@
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
+.dso-secondary.dso-spinner-right:not([disabled]):hover::after, .dso-secondary.dso-spinner-right:not([disabled]):focus-visible::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: "";
@@ -299,7 +299,7 @@
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
+.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after, .dso-secondary.dso-spinner-right:not([disabled]).dso-small:focus-visible::after {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -323,7 +323,7 @@
   border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);
   color: var(--_dso-icon-button-secondary-toggled-color, #fff);
 }
-.dso-secondary:not([disabled]).toggled:hover {
+.dso-secondary:not([disabled]).toggled:hover, .dso-secondary:not([disabled]).toggled:focus-visible {
   background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);
   border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);
 }
@@ -362,20 +362,20 @@
   background-color: transparent;
   border: 0;
 }
-.dso-tertiary:not([disabled]):hover {
+.dso-tertiary:not([disabled]):hover, .dso-tertiary:not([disabled]):focus-visible {
   color: var(--_dso-icon-button-tertiary-hover-color, var(--_dso-icon-button-tertiary-color, #275937));
 }
 .dso-tertiary:not([disabled]):active {
-  color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c));
+  color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #173521));
 }
 .dso-tertiary:not([disabled]).toggled {
   color: var(--_dso-icon-button-tertiary-toggled-color, var(--_dso-icon-button-tertiary-color, #275937));
 }
-.dso-tertiary:not([disabled]).toggled:hover {
+.dso-tertiary:not([disabled]).toggled:hover, .dso-tertiary:not([disabled]).toggled:focus-visible {
   color: var(--_dso-icon-button-tertiary-toggled-hover-color, var(--_dso-icon-button-tertiary-color, #1b3e27));
 }
 .dso-tertiary:not([disabled]).toggled:active {
-  color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c));
+  color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #173521));
 }
 .dso-tertiary[disabled] {
   color: var(--_dso-icon-button-tertiary-disabled-color, var(--_dso-icon-button-tertiary-color, #afcf9d));
@@ -399,6 +399,10 @@
 .dso-map:active {
   outline: 0;
 }
+.dso-map.extern::after, .dso-map.download::after {
+  content: "";
+  display: inline-block;
+}
 .dso-map {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
@@ -413,7 +417,7 @@
   padding-block: 11px;
   padding-inline: 15px;
 }
-.dso-map:hover {
+.dso-map:hover, .dso-map:focus-visible {
   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);
@@ -425,7 +429,7 @@
   color: var(--_dso-button-secondary-active-color, #fff);
   float: var(--_dso-button-float-secondary, none);
 }
-.dso-map[disabled], .dso-map[disabled]:hover {
+.dso-map[disabled], .dso-map[disabled]:hover, .dso-map[disabled]:focus-visible {
   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);
@@ -489,7 +493,7 @@
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-.dso-map.dso-spinner-left:not([disabled]):hover::before {
+.dso-map.dso-spinner-left:not([disabled]):hover::before, .dso-map.dso-spinner-left:not([disabled]):focus-visible::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: "";
@@ -499,7 +503,7 @@
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {
+.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before, .dso-map.dso-spinner-left:not([disabled]).dso-small:focus-visible::before {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -513,7 +517,7 @@
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-.dso-map.dso-spinner-right:not([disabled]):hover::after {
+.dso-map.dso-spinner-right:not([disabled]):hover::after, .dso-map.dso-spinner-right:not([disabled]):focus-visible::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: "";
@@ -523,7 +527,7 @@
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {
+.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after, .dso-map.dso-spinner-right:not([disabled]).dso-small:focus-visible::after {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -536,9 +540,6 @@
   padding-inline: 16px;
   white-space: nowrap;
 }
-.dso-map:focus, .dso-map:focus-visible {
-  outline-offset: -1px;
-}
 .dso-map:has(span.sr-only):has(dso-icon) {
   padding: 8px;
   min-inline-size: auto;
@@ -566,7 +567,7 @@
   border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);
   color: var(--_dso-icon-button-secondary-toggled-color, #fff);
 }
-.dso-map:not([disabled]).toggled:hover {
+.dso-map:not([disabled]).toggled:hover, .dso-map:not([disabled]).toggled:focus-visible {
   background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);
   border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);
 }

package/dist/collection/components/icon-button/icon-button.js

@@ -43,11 +43,31 @@ export class IconButton {
     async setFocus() {
         this.buttonElRef?.focus();
     }
+    tooltipWatcher() {
+        this.warnIfTooltipNotInLabel();
+    }
+    warnIfTooltipNotInLabel() {
+        if (this.tooltip && !` ${this.label ?? ""} `.includes(` ${this.tooltip} `)) {
+            console.warn(`Icon Button: tooltip "${this.tooltip}" does not appear in label "${this.label ?? ""}"`);
+        }
+    }
+    componentWillLoad() {
+        this.warnIfTooltipNotInLabel();
+    }
     disconnectedCallback() {
         this.tooltipController.dispose();
     }
+    componentDidRender() {
+        if (this.buttonElRef) {
+            // Stencil's DOM types do not yet include ARIA element reflection properties.
+            Object.assign(this.buttonElRef, {
+                ariaControlsElements: this.controlsElement ? [this.controlsElement] : null,
+                ariaDescribedByElements: this.describedByElement ? [this.describedByElement] : null,
+            });
+        }
+    }
     render() {
-        return (h("button", { key: '7d3bf4a79f897ec497bd7309b4f841bfa894a577', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: 'a3c3df83e533e83df10f5b8d7926f70a49422e30', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '8e2334a4b4ecaecf91394a4743f5757bf3e3044e', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
+        return (h("button", { key: '51f3663454ff5552d123a55d566d618a097880d4', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: 'b270947dd0ac8537699d4ab050fa359d62dfd9f9', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '54b98cd18f0f4054426f5e1f402f750c1c45b51d', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.tooltip || this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -101,13 +121,32 @@ export class IconButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The label of the Icon Button which is shown on hover in a tooltip."
+                    "text": "The accessible name of the Icon Button. Also shown as tooltip when `tooltip` is not set."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "label"
             },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional shorter text for the tooltip. Must occur as whole words in `label`, preferably at the start."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tooltip"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -201,6 +240,50 @@ export class IconButton {
                 "reflect": true,
                 "attribute": "expanded"
             },
+            "controlsElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The element controlled by the button. Sets `ariaControlsElements` on the native button when supported. Intended\r\nfor a wrapping component passing an element across a shadow boundary."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "describedByElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The element describing the button. Sets `ariaDescribedByElements` on the native button when supported. Intended\r\nfor a wrapping component passing an element across a shadow boundary."
+                },
+                "getter": false,
+                "setter": false
+            },
             "toggled": {
                 "type": "boolean",
                 "mutable": false,
@@ -268,4 +351,13 @@ export class IconButton {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "tooltipWatcher"
+            }, {
+                "propName": "tooltip",
+                "methodName": "tooltipWatcher"
+            }];
+    }
 }