@dso-toolkit/core 97.1.0 → 98.0.0

package/dist/collection/components/alert/alert.css

@@ -1,11 +1,3 @@
-:host {
-  display: block;
-}
-
-:host(:not(:first-child)) {
-  margin-block-start: 24px;
-}
-
 *,
 *::after,
 *::before {
@@ -23,6 +15,14 @@
   clip-path: rect(0 0 0 0);
 }
 
+:host {
+  display: block;
+}
+
+:host(:not(:first-child)) {
+  margin-block-start: 24px;
+}
+
 .alert {
   line-height: 1.5;
   margin-block-end: var(--_dso-alert-margin-block-end, 24px);
@@ -50,18 +50,16 @@
     padding-inline: 15px;
   }
 }
-.alert:not(:first-child) {
-  margin-block-start: 24px;
-}
-.alert .icon-status {
-  inset-block-start: 15px;
-  inset-inline-start: 15px;
+.alert dso-icon-button {
   position: absolute;
+  inset-block-start: 7px;
+  inset-inline-end: 7px;
 }
 .alert.dso-compact {
   border-end-end-radius: 8px;
   border-start-end-radius: 8px;
   margin-inline-start: 8px;
+  min-block-size: 16px;
 }
 .alert.dso-compact::before {
   content: "";
@@ -73,27 +71,24 @@
   border-end-start-radius: 8px;
   inline-size: 8px;
 }
-.alert.dso-compact {
-  min-block-size: 16px;
-}
-.alert.alert-success {
+.alert.alert-error {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
 }
-.alert.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+.alert.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
-.alert.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+.alert.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
-.alert.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+.alert.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
-.alert.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+.alert.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
-.alert.alert-success {
+.alert.alert-error {
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -109,31 +104,31 @@
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
   --_dso-button-tertiary-disabled-color: #999;
-  background-color: #e4f1d4;
+  background-color: #f5d8dc;
   color: #191919;
-  border-color: var(--_dso-alert-success-border-color, #e4f1d4);
+  border-color: var(--_dso-alert-error-border-color, #f5d8dc);
 }
-.alert.alert-success.dso-compact::before {
-  background-color: #39870c;
+.alert.alert-error.dso-compact::before {
+  background-color: #ce3f51;
 }
-.alert.alert-error {
+.alert.alert-info {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
 }
-.alert.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+.alert.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
-.alert.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+.alert.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
-.alert.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+.alert.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
-.alert.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+.alert.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
-.alert.alert-error {
+.alert.alert-info {
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -149,31 +144,31 @@
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
   --_dso-button-tertiary-disabled-color: #999;
-  background-color: #f5d8dc;
+  background-color: #e1ecf7;
   color: #191919;
-  border-color: var(--_dso-alert-error-border-color, #f5d8dc);
+  border-color: var(--_dso-alert-info-border-color, #e1ecf7);
 }
-.alert.alert-error.dso-compact::before {
-  background-color: #ce3f51;
+.alert.alert-info.dso-compact::before {
+  background-color: #6ca4d9;
 }
-.alert.alert-warning {
+.alert.alert-success {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
 }
-.alert.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+.alert.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
-.alert.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+.alert.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
-.alert.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+.alert.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
-.alert.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+.alert.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
-.alert.alert-warning {
+.alert.alert-success {
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -189,31 +184,31 @@
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
   --_dso-button-tertiary-disabled-color: #999;
-  background-color: #f8f6cc;
+  background-color: #e4f1d4;
   color: #191919;
-  border-color: var(--_dso-alert-warning-border-color, #f8f6cc);
+  border-color: var(--_dso-alert-success-border-color, #e4f1d4);
 }
-.alert.alert-warning.dso-compact::before {
-  background-color: #dcd400;
+.alert.alert-success.dso-compact::before {
+  background-color: #39870c;
 }
-.alert.alert-info {
+.alert.alert-warning {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
 }
-.alert.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+.alert.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
-.alert.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+.alert.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
-.alert.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+.alert.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
-.alert.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+.alert.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
-.alert.alert-info {
+.alert.alert-warning {
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -229,25 +224,23 @@
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
   --_dso-button-tertiary-disabled-color: #999;
-  background-color: #e1ecf7;
+  background-color: #f8f6cc;
   color: #191919;
-  border-color: var(--_dso-alert-info-border-color, #e1ecf7);
+  border-color: var(--_dso-alert-warning-border-color, #f8f6cc);
 }
-.alert.alert-info.dso-compact::before {
-  background-color: #6ca4d9;
+.alert.alert-warning.dso-compact::before {
+  background-color: #dcd400;
 }
-.alert dso-icon-button {
+
+.icon-status {
+  inset-block-start: 15px;
+  inset-inline-start: 15px;
   position: absolute;
-  inset-block-start: 7px;
-  inset-inline-end: 7px;
-}
-.alert.dso-compact {
-  min-block-size: 16px;
 }
 
 ::slotted(.dso-rich-content) {
-  --_dt-rich-content-margin-block-end: 0;
-  --_dt-rich-content-margin-block-start: 0;
+  --_dso-rich-content-margin-block-end: 0;
+  --_dso-rich-content-margin-block-start: 0;
   --_dso-button-primary-color: #000;
   --_dso-button-primary-background-color: rgba(25, 25, 25, 0.05);
   --_dso-button-primary-border-color: rgba(25, 25, 25, 0.05);
@@ -257,28 +250,28 @@
   --_dso-button-primary-active-color: #000;
   --_dso-button-primary-active-background-color: rgba(25, 25, 25, 0.2);
   --_dso-button-primary-active-border-color: rgba(25, 25, 25, 0.2);
-  --_dt-heading-base-color: #000;
-  --_dt-heading-h2-color: #000;
-  --_dt-heading-h3-color: #000;
-  --_dt-heading-h4-color: #000;
-  --_dt-heading-h5-color: #000;
-  --_dt-heading-h1-font-size-xs: 1em;
-  --_dt-heading-h1-font-size: 1em;
-  --_dt-heading-h2-font-size-xs: 1em;
-  --_dt-heading-h2-font-size: 1em;
-  --_dt-heading-h3-font-size-xs: 1em;
-  --_dt-heading-h3-font-size: 1em;
-  --_dt-heading-h4-font-size: 1em;
-  --_dt-heading-h5-font-size: 1em;
-  --_dt-heading-h6-font-size: 1em;
-  --_dt-heading-h1-line-height: 1.5;
-  --_dt-heading-h2-line-height: 1.5;
-  --_dt-heading-h3-line-height: 1.5;
-  --_dt-heading-h4-line-height: 1.5;
-  --_dt-heading-h5-line-height: 1.5;
-  --_dt-heading-h6-line-height: 1.5;
-  --_dt-heading-margin-large-margin-block-end: 8px;
-  --_dt-heading-margin-large-margin-block-start: 8px;
-  --_dt-heading-margin-small-margin-block-end: 8px;
-  --_dt-heading-margin-small-margin-block-start: 8px;
+  --_dso-heading-base-color: #000;
+  --_dso-heading-h2-color: #000;
+  --_dso-heading-h3-color: #000;
+  --_dso-heading-h4-color: #000;
+  --_dso-heading-h5-color: #000;
+  --_dso-heading-h1-font-size-xs: 1em;
+  --_dso-heading-h1-font-size: 1em;
+  --_dso-heading-h2-font-size-xs: 1em;
+  --_dso-heading-h2-font-size: 1em;
+  --_dso-heading-h3-font-size-xs: 1em;
+  --_dso-heading-h3-font-size: 1em;
+  --_dso-heading-h4-font-size: 1em;
+  --_dso-heading-h5-font-size: 1em;
+  --_dso-heading-h6-font-size: 1em;
+  --_dso-heading-h1-line-height: 1.5;
+  --_dso-heading-h2-line-height: 1.5;
+  --_dso-heading-h3-line-height: 1.5;
+  --_dso-heading-h4-line-height: 1.5;
+  --_dso-heading-h5-line-height: 1.5;
+  --_dso-heading-h6-line-height: 1.5;
+  --_dso-heading-margin-large-margin-block-end: 8px;
+  --_dso-heading-margin-large-margin-block-start: 8px;
+  --_dso-heading-margin-small-margin-block-end: 8px;
+  --_dso-heading-margin-small-margin-block-start: 8px;
 }

package/dist/collection/components/alert/alert.js

@@ -15,7 +15,7 @@ export class Alert {
         if (!status) {
             throw new Error(`Invalid status ${this.status}`);
         }
-        return (h("div", { key: '3523f656fb83ebc5c1b64b6a81796debcb180d5a', class: clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && (h("dso-icon", { key: 'cc5b49cc6711309d3beac250028aff76dc0d25c4', class: "icon-status", icon: `status-${this.status === "info" ? "info-solid" : this.status}` })), h("span", { key: 'facad507699a3b11049f516b189dae8f54ce42e4', class: "sr-only" }, status, ":"), h("slot", { key: '33b0fda4382a8cd1408b4b423ba4f29ef2c132a7' }), this.closable && (h("dso-icon-button", { key: 'ab8e6a15ea79dc19252fd7adcb68243d50e7a937', label: this.text("close"), variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }))));
+        return (h("div", { key: '3523f656fb83ebc5c1b64b6a81796debcb180d5a', class: clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && (h("dso-icon", { key: '4db9d7b3e49f3a9c5478b9c20ae2cc69eb5197a1', class: "icon-status", icon: `status-${this.status === "info" ? "info-solid" : this.status}`, "aria-hidden": "true" })), h("span", { key: '25f20d0a3e7190c834401ab58441428e628c1127', class: "sr-only" }, status, ":"), h("slot", { key: '287b6b55ed8328587633a9cee2d1046e35e7e0bd' }), this.closable && (h("dso-icon-button", { key: '49a76ccd03d0bdb28f06425fbe6841ba17effada', label: this.text("close"), variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }))));
     }
     static get is() { return "dso-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/annotation/annotation.css

@@ -104,7 +104,7 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 :host([wijzigactie=verwijder]) {
@@ -146,9 +146,9 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   :host([wijzigactie=verwijder]) {

package/dist/collection/components/autosuggest/autosuggest.js

@@ -56,7 +56,7 @@ export class Autosuggest {
         this.listboxId = v4();
         this.inputId = v4();
         this.labelId = v4();
-        this.resizeObserver = new ResizeObserver(debounce(() => this.setListboxContainerMaxBlockSize(), 150));
+        this.resizeObserver = new ResizeObserver(debounce(() => this.scheduleListboxContainerMaxBlockSizeUpdate(), 150));
         this.debouncedEmitValue = debounce((value) => {
             this.dsoChange.emit(value);
             this.debouncedShowLoading();
@@ -82,8 +82,8 @@ export class Autosuggest {
             }
         };
         this.text = i18n(() => this.host, translations);
-        this.onWindowResize = debounce(() => this.setListboxContainerMaxBlockSize(), 150);
-        this.onScrollend = () => this.setListboxContainerMaxBlockSize();
+        this.onWindowResize = debounce(() => this.scheduleListboxContainerMaxBlockSizeUpdate(), 150);
+        this.onScrollend = () => this.scheduleListboxContainerMaxBlockSizeUpdate();
         this.onOptionClick = (e) => {
             e.stopPropagation();
             this.pickSelectedValue();
@@ -143,7 +143,7 @@ export class Autosuggest {
         }
     }
     componentDidRender() {
-        this.setListboxContainerMaxBlockSize();
+        this.scheduleListboxContainerMaxBlockSizeUpdate();
     }
     connectedCallback() {
         const input = this.host.querySelector('input[type="text"]');
@@ -188,15 +188,27 @@ export class Autosuggest {
         this.input?.removeEventListener("focusin", this.onFocusIn);
         window.removeEventListener("resize", this.onWindowResize);
         document.removeEventListener("scrollend", this.onScrollend);
+        if (this.listboxContainerMaxBlockSizeFrameId !== undefined) {
+            cancelAnimationFrame(this.listboxContainerMaxBlockSizeFrameId);
+            this.listboxContainerMaxBlockSizeFrameId = undefined;
+        }
         this.resizeObserver.disconnect();
     }
+    scheduleListboxContainerMaxBlockSizeUpdate() {
+        if (this.listboxContainerMaxBlockSizeFrameId !== undefined) {
+            return;
+        }
+        this.listboxContainerMaxBlockSizeFrameId = requestAnimationFrame(() => {
+            this.listboxContainerMaxBlockSizeFrameId = undefined;
+            this.setListboxContainerMaxBlockSize();
+        });
+    }
     setListboxContainerMaxBlockSize() {
         if (!this.listboxContainer || !this.showSuggestions) {
             return;
         }
         if (this.showSuggestions) {
             let blockSizeViewableListItems = 0;
-            let listboxContainerMaxBlockSize = 0;
             // The total number of list items to reserve vertical space for.
             const total = this.listboxItems.length ? Math.min(this.listboxItems.length, maxSuggestionsViewable) : 0;
             for (let i = 0; i < total; i++) {
@@ -205,12 +217,9 @@ export class Autosuggest {
             }
             const availableBlockSize = window.innerHeight - this.host.getBoundingClientRect().bottom;
             const listboxMaxBlockSize = blockSizeViewableListItems + 2 * listboxPaddingBlock + 2 * listboxBorderWidth;
-            if (availableBlockSize < listboxMaxBlockSize || availableBlockSize <= blockSizeViewableListItems) {
-                listboxContainerMaxBlockSize = availableBlockSize - 2 * listboxPaddingBlock;
-            }
-            else {
-                listboxContainerMaxBlockSize = listboxMaxBlockSize;
-            }
+            const listboxContainerMaxBlockSize = availableBlockSize < listboxMaxBlockSize || availableBlockSize <= blockSizeViewableListItems
+                ? availableBlockSize - 2 * listboxPaddingBlock
+                : listboxMaxBlockSize;
             this.listboxContainer.style.setProperty("--_dso-autosuggest-max-block-size", `${listboxContainerMaxBlockSize}px`);
         }
     }
@@ -467,7 +476,7 @@ export class Autosuggest {
         else if (this.input) {
             this.input.removeAttribute("aria-controls");
         }
-        return (h(Fragment, null, h("slot", { key: '5e5ba4adce1ce293f7d15e14796900eb9bdcef08' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element) }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
+        return (h(Fragment, null, h("slot", { key: '136616e1785a97334a969ae77e9740b18cf247bd' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element) }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
             this.showSuggestions &&
             this.suggestions &&
             this.suggestions.map((suggestion) => (h(Option, { id: this.listboxItemId(suggestion), mouseEnter: () => this.selectSuggestion(suggestion), mouseLeave: () => this.resetSelectedSuggestion(), click: this.onOptionClick, selected: (suggestion === this.selectedSuggestion).toString(), suggestion: suggestion, ref: (element) => element && this.listboxItems.push(element), markedSuggestion: this.getMarkedSuggestions(suggestion) })))) ||

package/dist/collection/components/badge/badge.css

@@ -16,7 +16,7 @@
   max-inline-size: 640px;
 }
 .dso-tooltip .tooltip-inner {
-  --_dt-span-role-paragraph-margin-block: 8px;
+  --_dso-span-role-paragraph-margin-block: 8px;
   --_dso-alert-success-border-color: initial;
   --_dso-alert-error-border-color: initial;
   --_dso-alert-info-border-color: initial;
@@ -42,9 +42,9 @@
 }
 
 :host {
-  --_dt-scrollable-border-radius: 4px;
-  --_dt-scrollable-container-padding-inline: 16px;
-  --_dt-scrollable-container-padding-block: 8px;
+  --_dso-scrollable-border-radius: 4px;
+  --_dso-scrollable-container-padding-inline: 16px;
+  --_dso-scrollable-container-padding-block: 8px;
   display: inline-block;
 }
 
@@ -1530,7 +1530,7 @@
   max-inline-size: 320px;
 }
 .toggletip-button + .dso-tooltip .tooltip-inner {
-  --_dt-span-role-paragraph-margin-block: 8px;
+  --_dso-span-role-paragraph-margin-block: 8px;
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;

package/dist/collection/components/banner/banner.css

@@ -182,37 +182,37 @@
   border-color: #f8f6cc;
 }
 .dso-banner {
-  --_dt-rich-content-margin-block-end: 0;
-  --_dt-rich-content-margin-block-start: 0;
-  --_dt-rich-content-margin-inline-end: 8px;
-  --_dt-rich-content-padding-inline-end: 24px;
-  --_dt-heading-base-color: #000;
-  --_dt-heading-h2-color: #000;
-  --_dt-heading-h3-color: #000;
-  --_dt-heading-h4-color: #000;
-  --_dt-heading-h5-color: #000;
-  --_dt-heading-h1-font-size-xs: 1rem;
-  --_dt-heading-h1-font-size: 1rem;
-  --_dt-heading-h2-font-size-xs: 1rem;
-  --_dt-heading-h2-font-size: 1rem;
-  --_dt-heading-h3-font-size-xs: 1rem;
-  --_dt-heading-h3-font-size: 1rem;
-  --_dt-heading-h4-font-size: 1rem;
-  --_dt-heading-h5-font-size: 1rem;
-  --_dt-heading-h6-font-size: 1rem;
-  --_dt-heading-h2-first-child-float: inline-start;
-  --_dt-heading-h1-line-height: 1.5;
-  --_dt-heading-h2-line-height: 1.5;
-  --_dt-heading-h3-line-height: 1.5;
-  --_dt-heading-h4-line-height: 1.5;
-  --_dt-heading-h5-line-height: 1.5;
-  --_dt-heading-h6-line-height: 1.5;
-  --_dt-heading-margin-large-margin-block-end: 0;
-  --_dt-heading-margin-large-margin-block-start: 0;
-  --_dt-heading-margin-small-margin-block-end: 0;
-  --_dt-heading-margin-small-margin-block-start: 0;
-  --_dt-icon-button-position: absolute;
-  --_dt-icon-button-inset-inline-end: 16px;
+  --_dso-rich-content-margin-block-end: 0;
+  --_dso-rich-content-margin-block-start: 0;
+  --_dso-rich-content-margin-inline-end: 8px;
+  --_dso-rich-content-padding-inline-end: 24px;
+  --_dso-heading-base-color: #000;
+  --_dso-heading-h2-color: #000;
+  --_dso-heading-h3-color: #000;
+  --_dso-heading-h4-color: #000;
+  --_dso-heading-h5-color: #000;
+  --_dso-heading-h1-font-size-xs: 1rem;
+  --_dso-heading-h1-font-size: 1rem;
+  --_dso-heading-h2-font-size-xs: 1rem;
+  --_dso-heading-h2-font-size: 1rem;
+  --_dso-heading-h3-font-size-xs: 1rem;
+  --_dso-heading-h3-font-size: 1rem;
+  --_dso-heading-h4-font-size: 1rem;
+  --_dso-heading-h5-font-size: 1rem;
+  --_dso-heading-h6-font-size: 1rem;
+  --_dso-heading-h2-first-child-float: inline-start;
+  --_dso-heading-h1-line-height: 1.5;
+  --_dso-heading-h2-line-height: 1.5;
+  --_dso-heading-h3-line-height: 1.5;
+  --_dso-heading-h4-line-height: 1.5;
+  --_dso-heading-h5-line-height: 1.5;
+  --_dso-heading-h6-line-height: 1.5;
+  --_dso-heading-margin-large-margin-block-end: 0;
+  --_dso-heading-margin-large-margin-block-start: 0;
+  --_dso-heading-margin-small-margin-block-end: 0;
+  --_dso-heading-margin-small-margin-block-start: 0;
+  --_dso-icon-button-position: absolute;
+  --_dso-icon-button-inset-inline-end: 16px;
 }
 
 .banner-inner {

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

@@ -16,7 +16,7 @@
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   background-color: #ccc;
   gap: 1px;
-  --_dt-icon-button-map-box-shadow: 0;
+  --_dso-icon-button-map-box-shadow: 0;
 }
 
 ::slotted(*) {
@@ -26,15 +26,15 @@
 :host([direction=row]) ::slotted(:not(:first-child)) {
   border-start-start-radius: 0 !important;
   border-end-start-radius: 0 !important;
-  --_dt-icon-button-border-start-start-radius: 0;
-  --_dt-icon-button-border-end-start-radius: 0;
+  --_dso-icon-button-border-start-start-radius: 0;
+  --_dso-icon-button-border-end-start-radius: 0;
 }
 :host([direction=row]) ::slotted(:not(:last-child)) {
   border-start-end-radius: 0 !important;
   border-end-end-radius: 0 !important;
-  --_dt-icon-button-border-start-end-radius: 0;
-  --_dt-icon-button-border-end-end-radius: 0;
-  --_dt-icon-button-border-inline-end-width: 0;
+  --_dso-icon-button-border-start-end-radius: 0;
+  --_dso-icon-button-border-end-end-radius: 0;
+  --_dso-icon-button-border-inline-end-width: 0;
 }
 :host([direction=row]) ::slotted(.dso-secondary) {
   margin-inline-start: -1px !important;
@@ -49,15 +49,15 @@
 :host([direction=column]) ::slotted(:not(:first-child)) {
   border-start-start-radius: 0 !important;
   border-start-end-radius: 0 !important;
-  --_dt-icon-button-border-start-start-radius: 0;
-  --_dt-icon-button-border-start-end-radius: 0;
+  --_dso-icon-button-border-start-start-radius: 0;
+  --_dso-icon-button-border-start-end-radius: 0;
 }
 :host([direction=column]) ::slotted(:not(:last-child)) {
   border-end-start-radius: 0 !important;
   border-end-end-radius: 0 !important;
-  --_dt-icon-button-border-end-start-radius: 0;
-  --_dt-icon-button-border-end-end-radius: 0;
-  --_dt-icon-button-border-block-end-width: 0;
+  --_dso-icon-button-border-end-start-radius: 0;
+  --_dso-icon-button-border-end-end-radius: 0;
+  --_dso-icon-button-border-block-end-width: 0;
 }
 :host([direction=column]) ::slotted(.dso-secondary) {
   margin-block-start: -1px !important;

package/dist/collection/components/card/card.css

@@ -137,9 +137,9 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 
 ::slotted([slot=selectable]) {
   font-size: 0 !important;
-  --_dt-selectable-padding-inline-start: 24px;
-  --_dt-selectable-input-wrapper-margin-inline-start: -24px;
-  --_dt-selectable-input-wrapper-padding-inline-start: 24px;
+  --_dso-selectable-padding-inline-start: 24px;
+  --_dso-selectable-input-wrapper-margin-inline-start: -24px;
+  --_dso-selectable-input-wrapper-padding-inline-start: 24px;
 }
 
 ::slotted([slot=heading]) {
@@ -154,9 +154,9 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 }
 
 ::slotted([slot=content]) {
-  --_dt-rich-content-margin-block: 8px;
-  --_dt-rich-content-margin-block-end: 0;
-  --_dt-rich-content-margin-block-start: 0;
+  --_dso-rich-content-margin-block: 8px;
+  --_dso-rich-content-margin-block-end: 0;
+  --_dso-rich-content-margin-block-start: 0;
 }
 
 ::slotted([slot=interactions]) {

package/dist/collection/components/document-card/document-card.css

@@ -74,7 +74,7 @@
 }
 
 ::slotted([slot=type]) {
-  --_dt-info-button-margin-inline-start: 0;
+  --_dso-info-button-margin-inline-start: 0;
   display: flex !important;
   gap: 8px !important;
 }