npm - @designsystem-se/af - Versions diffs - 39.2.1-beta.darkmode.2 → 39.2.2 - Mend

@designsystem-se/af 39.2.1-beta.darkmode.2 → 39.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1331) hide show

package/dist/collection/components/_navigation/navigation-context-menu/navigation-context-menu.css CHANGED Viewed

@@ -16,7 +16,7 @@ License: none (public domain)
   --digi--navigation-context-menu--item--background-color--active: var(--digi--color--background--interactive--selected--tertiary);
   --digi--navigation-context-menu--item--display: flex;
   --digi--navigation-context-menu--item--font-family: var(--digi--global--typography--font-family--default);
-  --digi--navigation-context-menu--item--font-color: var(--digi--color--text--interactive--tertiary);
+  --digi--navigation-context-menu--item--font-color: var(--digi--color--text--primary);
   display: block;
   box-sizing: border-box;
   width: fit-content;
@@ -82,7 +82,6 @@ License: none (public domain)
   font-size: var(--digi--navigation-context-menu--item--font-size);
   display: var(--digi--navigation-context-menu--item--display);
   font-family: var(--digi--navigation-context-menu--item--font-family);
-  color: var(--digi--navigation-context-menu--item--font-color);
   padding: 0.625rem 0;
   max-width: max-content;
   min-width: 100%;
@@ -109,7 +108,7 @@ License: none (public domain)
 }
 :host .digi-navigation-context-menu .digi-navigation-context-menu__item--link a {
   padding: 0.625rem 1rem;
-  color: var(--digi--navigation-context-menu--item--font-color);
+  color: var(--digi--navigation-context-menu--item--font-color, #333333);
   text-decoration: none;
   margin: 0;
   width: 100%;

package/dist/collection/components/_navigation/navigation-tablist/navigation-tablist.js CHANGED Viewed

@@ -98,14 +98,10 @@ export class NavigationTablist {
         }
     }
     syncPanels() {
-        // side-effect
-        if (this.panelsRef != null) {
-            const panels = this.panelsRef.querySelectorAll(':scope>digi-tablist-panel');
-            for (let i = 0; i < panels.length; i++) {
-                const panel = panels[i];
-                const showPanel = panel.tab === this.tabs[this.activeTab].id;
-                panel.isVisible = showPanel;
-            }
+        var _a;
+        const activeId = (_a = this.tabs[this.activeTab]) === null || _a === void 0 ? void 0 : _a.id;
+        for (const panel of this.getSlottedPanels()) {
+            panel.isVisible = panel.tab === activeId;
         }
     }
     handleTabPropChange(tabId) {
@@ -136,6 +132,11 @@ export class NavigationTablist {
         this.windowTab = tabIdx;
     }
     setupTabs(tabs) {
+        // Angular/React can connect the element before afTabs is set.
+        if (tabs == null || tabs === '') {
+            return;
+        }
+        const hadTabs = this.tabs.length > 0;
         if (typeof tabs === 'string') {
             this.tabs = JSON.parse(tabs);
         }
@@ -145,6 +146,13 @@ export class NavigationTablist {
         else {
             throw new Error('Invalid format or no tabs supplied');
         }
+        if (!hadTabs) {
+            this.setupInitialTab();
+        }
+        this.syncPanels();
+    }
+    getSlottedPanels() {
+        return Array.from(this.hostElement.querySelectorAll('digi-tablist-panel')).filter((panel) => panel.closest('digi-tablist') === this.hostElement);
     }
     setActiveTabById(id) {
         const tabIdx = this.tabs.findIndex((tab) => tab.id === id);
@@ -212,9 +220,23 @@ export class NavigationTablist {
     componentWillLoad() {
         this.setupTabs(this.afTabs);
         this.setupInitialTab();
+        // Angular attaches the host first and binds `[afTabs]` on the next frame
+        // (Stencil 4.36+). @Watch skips that first assignment, so if tabs are not
+        // here yet, wait one frame. React/vanilla that already set the prop skip
+        // the delay.
+        if (this.tabs.length === 0) {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.setupTabs(this.afTabs);
+                    this.setupInitialTab();
+                    resolve();
+                });
+            });
+        }
     }
     componentDidLoad() {
         var _a, _b, _c;
+        this.setupTabs(this.afTabs);
         // Also listen to window resize for viewport zoom changes
         if (window) {
             window.addEventListener('resize', this.handleResize, { passive: true });
@@ -236,14 +258,14 @@ export class NavigationTablist {
             cancelAnimationFrame(this._requestAnimationFrame);
     }
     render() {
-        return (h(Host, { key: '8bdab05cd034b9940aefcb9f38b16d09b6f0b0c7' }, h("div", { key: '2d2266a9600dcc5817130ed4ece38868779e0b69', class: {
+        return (h(Host, { key: 'b2d71ff4b3f2c2fa22feffbc298360c1b3202b1d' }, h("div", { key: 'df48ffc9fdabfca380675c7232af5fef80c445b9', class: {
                 'digi-tablist': true,
                 'digi-tablist--overflow-scroll': this.afOverflowMode === OverflowMode.Scroll,
                 'digi-tablist--overflow-controls': this.afOverflowMode === OverflowMode.Controls
-            } }, h("div", { key: 'a96cd5d9a2eec5b2b52f0d1a00b2810c28e8d4bd', class: "control-wrapper", style: {
+            } }, h("div", { key: '797f70a00aa1e3dd8a3b54d43808b9515259723c', class: "control-wrapper", style: {
                 left: '0',
                 visibility: this.showPrev ? 'visible' : 'hidden'
-            } }, h("button", { key: '7a9810781c300bd44aa7ce3f3f76f651b1799023', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, h("digi-icon-chevron-left", { key: '8f65c019aa2a60f8d10025c147ad2448d30cdf1d' }))), h("div", { key: '7be08fe744f17f71fab7358d63d010f17e5c977d', role: "tablist", ref: (ref) => (this.tablistRef = ref), "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel }, this.tabs.map((tab) => {
+            } }, h("button", { key: '415237740bc65dd5cfdb0e57eb44307c9d838670', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, h("digi-icon-chevron-left", { key: '59f2d43ba38c7d4ebdd85a575b2e89c0fec62381' }))), h("div", { key: '01602338cbd7a63f48cdcf541629e76bac46dd4c', role: "tablist", ref: (ref) => (this.tablistRef = ref), "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel }, this.tabs.map((tab) => {
             const focusable = tab.id === this.tabs[this.selectedTab].id;
             const isActive = tab.id === this.tabs[this.activeTab].id;
             const Icon = `digi-icon-${tab.icon}`;
@@ -252,10 +274,10 @@ export class NavigationTablist {
                     'digi-tab': true,
                     'is-active': isActive
                 }, id: `tab-${tab.id}`, role: "tab", type: "button", tabindex: focusable ? '0' : '-1', "aria-label": tab.ariaLabel, "aria-selected": isActive.toString(), "aria-controls": `tabpanel-${tab.id}`, onClick: () => this.handleTabChange(tab) }, h("div", { class: "content-wrapper" }, h("span", { class: "tablist-content" }, tab.icon && h(Icon, { "aria-hidden": "true" }), h("span", { class: "title", "data-text": tab.title }, tab.title), tab.badgeValue && (h("digi-badge-notification", { afValue: badgeValue, "aria-hidden": "true" }))), h("div", { class: "indicator" }))));
-        })), h("div", { key: 'b79ea56eb945fe5c4b2e34529d8b1985018ac46c', class: "control-wrapper", style: {
+        })), h("div", { key: 'db28ea61c349d7aaf057e84b607c4f851b3f6712', class: "control-wrapper", style: {
                 right: '0',
                 visibility: this.showNext ? 'visible' : 'hidden'
-            } }, h("button", { key: '3d581fe07f9591f21fef85e700259d3b44332631', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, h("digi-icon-chevron-right", { key: '1f3a564d4eff7851ad13901c492e663c5c43d384' })))), h("div", { key: '2cd9aa7d409b36395febee9dfd26eb6e82b02f35', ref: (ref) => (this.panelsRef = ref), role: "presentation" }, h("slot", { key: 'b9f82031b00032dfb1df2358546a8a35934033a0' }))));
+            } }, h("button", { key: '83513f2d64cc0578155d305f21dfb1ca4a412cc6', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, h("digi-icon-chevron-right", { key: '9263e864c21ea5358f301214fbadda6ed7d3c74a' })))), h("div", { key: '205efbbb3aab40f51f9f85f8d74a4026970c7144', role: "presentation" }, h("slot", { key: 'e753d718f852072745f5c2a49f6189fb62f3645b', onSlotchange: () => this.syncPanels() }))));
     }
     static get is() { return "digi-tablist"; }
     static get encapsulation() { return "scoped"; }
@@ -485,6 +507,7 @@ export class NavigationTablist {
                 }
             }];
     }
+    static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
                 "propName": "activeTab",

package/dist/collection/components/_navigation/navigation-vertical-menu/navigation-vertical-menu.js CHANGED Viewed

@@ -81,16 +81,28 @@ export class NavigationVerticalMenu {
         }
     }
     componentWillLoad() {
-        this.getListItems();
-        this.initNav();
-        this.setLevelClass();
+        this.syncNav();
+        // Angular attaches the host first and slots children on the next frame
+        // (Stencil 4.36+). React/vanilla that already have slotted nodes skip
+        // the delay. Do not warn here — Angular/React may still be projecting.
+        if (!this.hostElement.children.length) {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.syncNav();
+                    resolve();
+                });
+            });
+        }
     }
     componentDidLoad() {
         this.initCurrentActiveLevel();
         this.afOnReady.emit();
     }
     componentWillUpdate() {
-        this.getListItems();
+        this.syncNav();
+    }
+    syncNav(options) {
+        this.getListItems(options);
         this.initNav();
         this.setLevelClass();
     }
@@ -140,12 +152,12 @@ export class NavigationVerticalMenu {
         }
     }
     setLevelClass() {
-        this.hostElement
-            .querySelector('ul')
-            .classList.remove('primary', 'secondary');
-        this.hostElement
-            .querySelector('ul')
-            .classList.add('digi-navigation-vertical-menu__list--root', this.afVariation);
+        const rootList = this.hostElement.querySelector('ul');
+        if (!rootList) {
+            return;
+        }
+        rootList.classList.remove('primary', 'secondary');
+        rootList.classList.add('digi-navigation-vertical-menu__list--root', this.afVariation);
     }
     initNav() {
         const $ul = this.hostElement.querySelectorAll('ul');
@@ -158,10 +170,12 @@ export class NavigationVerticalMenu {
         this.initNav();
         this.setClasses(e);
     }
-    getListItems() {
+    getListItems(options) {
         const menuItems = this.hostElement.children;
         if (!menuItems || menuItems.length <= 0) {
-            logger.warn(`The slot contains no children elements.`, this.hostElement);
+            if (options === null || options === void 0 ? void 0 : options.warnIfEmpty) {
+                logger.warn(`The slot contains no children elements.`, this.hostElement);
+            }
             return;
         }
         this.listItems = [...Array.from(menuItems)].map((filter) => {
@@ -180,7 +194,7 @@ export class NavigationVerticalMenu {
         };
     }
     render() {
-        return (h("nav", { key: '0c7b96501a70d813b8d8f5b8014dc420d472f4a9', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: '2b5d92cada1cde5bb5155257be77a584c2e708ec' })));
+        return (h("nav", { key: 'df2239de80363247c33eadf6995331a74a40966f', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: 'dc2e22c2cfd00786964855ea3bc2b7271879510c', onSlotchange: () => this.syncNav() })));
     }
     static get is() { return "digi-navigation-vertical-menu"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-vertical-menu-item/navigation-vertical-menu-item.css CHANGED Viewed

@@ -5,9 +5,9 @@ License: none (public domain)
 :host {
   --digi--navigation-vertical-menu-item--toggle-icon--character: "+";
   --digi--navigation-vertical-menu-item--toggle-icon--character--active: "-";
-  --digi--navigation-vertical-menu-item--toggle-icon--color: var(--digi--color--icon--cta);
-  --digi--navigation-vertical-menu-item--toggle-icon--color--hover: var(--digi--color--icon--secondary);
-  --digi--navigation-vertical-menu-item--toggle-icon--color--active: var(--digi--color--icon--cta);
+  --digi--navigation-vertical-menu-item--toggle-icon--color: var(--digi--color--text--interactive--primary);
+  --digi--navigation-vertical-menu-item--toggle-icon--color--hover: var(--digi--color--text--interactive--secondary);
+  --digi--navigation-vertical-menu-item--toggle-icon--color--active: var(--digi--color--text--interactive--primary);
   --digi--navigation-vertical-menu-item--toggle-icon--background: var(--digi--color--background--interactive--default--tertiary);
   --digi--navigation-vertical-menu-item--toggle-icon--background--hover: var(--digi--color--background--interactive--hover--tertiary);
   --digi--navigation-vertical-menu-item--toggle-icon--background--active: var(--digi--color--background--interactive--selected--on-menu-minus-button);

package/dist/collection/components/_notification/notification-alert/notification-alert.css CHANGED Viewed

@@ -22,7 +22,7 @@ License: none (public domain)
   --digi--notification-alert--icon--color--success: var(--digi--color--icon--secondary);
   --digi--notification-alert--icon--background--success: var(--digi--color--background--sentiment--success--primary);
   --digi--notification-alert--border--warning: var(--digi--border-width--secondary) solid var(--digi--color--border--sentiment--warning);
-  --digi--notification-alert--icon--color--warning: var(--digi--color--icon--primary-anti-reverse);
+  --digi--notification-alert--icon--color--warning: var(--digi--color--icon--primary);
   --digi--notification-alert--icon--background--warning: var(--digi--color--background--sentiment--warning--primary);
   --digi--notification-alert--border--danger: var(--digi--border-width--secondary) solid var(--digi--color--border--sentiment--error);
   --digi--notification-alert--icon--color--danger: var(--digi--color--icon--secondary);

package/dist/collection/components/_progress/progress-indicator/progress-indicator.css CHANGED Viewed

@@ -24,7 +24,7 @@ License: none (public domain)
   --digi--progress-indicator--step--line--style: dashed;
   --digi--progress-indicator--icon--width: 1rem;
   --digi--progress-indicator--icon--height: 1rem;
-  --digi--progress-indicator--icon--color: var(--digi--color--marking--indication--marker);
+  --digi--progress-indicator--icon--color: var(--digi--color--icon--secondary);
   --digi--progress-indicator--icon-status--width: 1.75rem;
   --digi--progress-indicator--icon-status--height: 1.75rem;
   --digi--progress-indicator--icon--warning--color: var(--digi--color--icon--validation--warning);
@@ -43,7 +43,6 @@ License: none (public domain)
 }
 :host .digi-progress-indicator__heading {
   font-size: var(--digi--typography--heading-2--font-size--desktop);
-  color: var(--digi--color--text--primary);
   font-weight: var(--digi--progress-indicator--heading--font-weight);
   margin: 0;
   margin-bottom: 0.5rem;
@@ -57,7 +56,7 @@ License: none (public domain)
 :host .digi-progress-indicator__next {
   font-size: var(--digi--typography--body--font-size--desktop);
   font-style: italic;
-  color: var(--digi--color--text--description);
+  color: var(--digi--color--text--primary);
   margin: 0;
 }
 :host .digi-progress-indicator__icon {
@@ -100,10 +99,10 @@ License: none (public domain)
   margin-left: 8px;
 }
 :host .digi-progress-indicator__validation-label--warning {
-  background-color: var(--digi--color--background--sentiment--warning--quarternary);
+  background-color: var(--digi--color--background--interactive--validation--warning);
 }
 :host .digi-progress-indicator__validation-label--error {
-  background-color: var(--digi--color--background--sentiment--error--tertiary-discreet);
+  background-color: var(--digi--color--background--interactive--validation--error);
 }
 :host .digi-progress-indicator__list {
   position: relative;

package/dist/collection/components/_progress/progress-list-item/progress-list-item.css CHANGED Viewed

@@ -61,7 +61,7 @@ License: none (public domain)
 }
 :host .digi-progress-list-item--current:host .digi-progress-list-item__indicator--circle {
   background-color: var(--INDICATOR--CIRCLE--COLOR);
-  box-shadow: inset 0 0 0 4px var(--INDICATOR--CIRCLE--COLOR), inset 0 0 0 7px var(--digi--color--marking--indication--marker);
+  box-shadow: inset 0 0 0 4px var(--INDICATOR--CIRCLE--COLOR), inset 0 0 0 7px #fff;
   height: 32px;
   width: 100%;
 }
@@ -97,7 +97,7 @@ License: none (public domain)
 }
 :host .digi-progress-list-item__indicator--icon--digi {
   color: var(--digi--color--text--secondary);
-  --digi--icon--color: var(--digi--color--marking--indication--marker);
+  --digi--icon--color: var(--digi--color--icon--secondary);
   margin: auto;
   max-height: 18px;
   max-width: 18px;

package/dist/collection/components/_tools/tools-theme-provider/tools-theme-provider.css CHANGED Viewed

@@ -1,15 +1,13 @@
-.digi-tools-theme-provider--af25.digi-tools-theme-provider--light {
+:host .digi-tools-theme-provider--af25 {
   --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--light);
-  --digi--color--background--dropdown: var(--digi--color--background--dropdown--light);
   --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--light);
   --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--light);
   --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--light);
   --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--light);
   --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--light);
   --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--light);
+  --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--light);
   --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--light);
-  --digi--color--background--interactive--default--transparent: var(--digi--color--background--interactive--default--transparent--light);
-  --digi--color--background--interactive--hover--ghost-rider: var(--digi--color--background--interactive--hover--ghost-rider--light);
   --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--light);
   --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--light);
   --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--light);
@@ -17,7 +15,6 @@
   --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--light);
   --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--light);
   --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--light);
-  --digi--color--background--interactive--selected--primary-stay: var(--digi--color--background--interactive--selected--primary-stay--light);
   --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--light);
   --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--light);
   --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--light);
@@ -25,7 +22,6 @@
   --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--light);
   --digi--color--background--notification: var(--digi--color--background--notification--light);
   --digi--color--background--pop-out: var(--digi--color--background--pop-out--light);
-  --digi--color--background--pop-out-2-hypotes: var(--digi--color--background--pop-out-2-hypotes--light);
   --digi--color--background--primary: var(--digi--color--background--primary--light);
   --digi--color--background--secondary: var(--digi--color--background--secondary--light);
   --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--light);
@@ -35,7 +31,6 @@
   --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--light);
   --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--light);
   --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--light);
-  --digi--color--background--sentiment--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--light);
   --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--light);
   --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--light);
   --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--light);
@@ -49,7 +44,6 @@
   --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--light);
   --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--light);
   --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--light);
-  --digi--color--background--surface: var(--digi--color--background--surface--light);
   --digi--color--background--transparent: var(--digi--color--background--transparent--light);
   --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--light);
   --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--light);
@@ -57,7 +51,6 @@
   --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--light);
   --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--light);
   --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--light);
-  --digi--color--border--interactive--default--secondary: var(--digi--color--border--interactive--default--secondary--light);
   --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--light);
   --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--light);
   --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--light);
@@ -76,15 +69,11 @@
   --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--light);
   --digi--color--divider--primary: var(--digi--color--divider--primary--light);
   --digi--color--divider--secondary: var(--digi--color--divider--secondary--light);
-  --digi--color--divider--tertiary-hypotes: var(--digi--color--divider--tertiary-hypotes--light);
   --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--light);
-  --digi--color--icon--brand-primary-secondary-hypotes: var(--digi--color--icon--brand-primary-secondary-hypotes--light);
   --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--light);
   --digi--color--icon--cta: var(--digi--color--icon--cta--light);
   --digi--color--icon--primary: var(--digi--color--icon--primary--light);
-  --digi--color--icon--primary-anti-reverse: var(--digi--color--icon--primary-anti-reverse--light);
   --digi--color--icon--secondary: var(--digi--color--icon--secondary--light);
-  --digi--color--icon--secondary-reverse: var(--digi--color--icon--secondary-reverse--light);
   --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--light);
   --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--light);
   --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--light);
@@ -98,7 +87,6 @@
   --digi--color--logotype--primary--text: var(--digi--color--logotype--primary--text--light);
   --digi--color--logotype--secondary--symbol: var(--digi--color--logotype--secondary--symbol--light);
   --digi--color--logotype--secondary--text: var(--digi--color--logotype--secondary--text--light);
-  --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--light);
   --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--light);
   --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--light);
   --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--light);
@@ -109,155 +97,24 @@
   --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--light);
   --digi--color--text--description: var(--digi--color--text--description--light);
   --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--light);
-  --digi--color--text--interactive--brand-primary-secondary-hypotes: var(--digi--color--text--interactive--brand-primary-secondary-hypotes--light);
   --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--light);
   --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--light);
-  --digi--color--text--interactive--primary-discreet: var(--digi--color--text--interactive--primary-discreet--light);
   --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--light);
-  --digi--color--text--interactive--secondary-discreet: var(--digi--color--text--interactive--secondary-discreet--light);
   --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--light);
   --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--light);
   --digi--color--text--primary: var(--digi--color--text--primary--light);
-  --digi--color--text--primary-stay: var(--digi--color--text--primary-stay--light);
   --digi--color--text--secondary: var(--digi--color--text--secondary--light);
-  --digi--color--text--secondary-stay: var(--digi--color--text--secondary-stay--light);
 }
-.digi-tools-theme-provider--af25.digi-tools-theme-provider--dark {
-  --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--dark);
-  --digi--color--background--dropdown: var(--digi--color--background--dropdown--dark);
-  --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--dark);
-  --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--dark);
-  --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--dark);
-  --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--dark);
-  --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--dark);
-  --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--dark);
-  --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--dark);
-  --digi--color--background--interactive--default--transparent: var(--digi--color--background--interactive--default--transparent--dark);
-  --digi--color--background--interactive--hover--ghost-rider: var(--digi--color--background--interactive--hover--ghost-rider--dark);
-  --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--dark);
-  --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--dark);
-  --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--dark);
-  --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--dark);
-  --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--dark);
-  --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--dark);
-  --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--dark);
-  --digi--color--background--interactive--selected--primary-stay: var(--digi--color--background--interactive--selected--primary-stay--dark);
-  --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--dark);
-  --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--dark);
-  --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--dark);
-  --digi--color--background--interactive--validation--success: var(--digi--color--background--interactive--validation--success--dark);
-  --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--dark);
-  --digi--color--background--notification: var(--digi--color--background--notification--dark);
-  --digi--color--background--pop-out: var(--digi--color--background--pop-out--dark);
-  --digi--color--background--pop-out-2-hypotes: var(--digi--color--background--pop-out-2-hypotes--dark);
-  --digi--color--background--primary: var(--digi--color--background--primary--dark);
-  --digi--color--background--secondary: var(--digi--color--background--secondary--dark);
-  --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--dark);
-  --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--dark);
-  --digi--color--background--sentiment--beta--primary: var(--digi--color--background--sentiment--beta--primary--dark);
-  --digi--color--background--sentiment--beta--secondary: var(--digi--color--background--sentiment--beta--secondary--dark);
-  --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--dark);
-  --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--dark);
-  --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--dark);
-  --digi--color--background--sentiment--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--dark);
-  --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--dark);
-  --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--dark);
-  --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--dark);
-  --digi--color--background--sentiment--neutral--primary: var(--digi--color--background--sentiment--neutral--primary--dark);
-  --digi--color--background--sentiment--neutral--secondary: var(--digi--color--background--sentiment--neutral--secondary--dark);
-  --digi--color--background--sentiment--neutral--tertiary: var(--digi--color--background--sentiment--neutral--tertiary--dark);
-  --digi--color--background--sentiment--success--primary: var(--digi--color--background--sentiment--success--primary--dark);
-  --digi--color--background--sentiment--success--secondary: var(--digi--color--background--sentiment--success--secondary--dark);
-  --digi--color--background--sentiment--success--tertiary: var(--digi--color--background--sentiment--success--tertiary--dark);
-  --digi--color--background--sentiment--warning--primary: var(--digi--color--background--sentiment--warning--primary--dark);
-  --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--dark);
-  --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--dark);
-  --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--dark);
-  --digi--color--background--surface: var(--digi--color--background--surface--dark);
-  --digi--color--background--transparent: var(--digi--color--background--transparent--dark);
-  --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--dark);
-  --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--dark);
-  --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--dark);
-  --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--dark);
-  --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--dark);
-  --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--dark);
-  --digi--color--border--interactive--default--secondary: var(--digi--color--border--interactive--default--secondary--dark);
-  --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--dark);
-  --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--dark);
-  --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--dark);
-  --digi--color--border--interactive--selected--primary: var(--digi--color--border--interactive--selected--primary--dark);
-  --digi--color--border--interactive--selected--secondary: var(--digi--color--border--interactive--selected--secondary--dark);
-  --digi--color--border--interactive--validation--error: var(--digi--color--border--interactive--validation--error--dark);
-  --digi--color--border--interactive--validation--success: var(--digi--color--border--interactive--validation--success--dark);
-  --digi--color--border--interactive--validation--warning: var(--digi--color--border--interactive--validation--warning--dark);
-  --digi--color--border--notification: var(--digi--color--border--notification--dark);
-  --digi--color--border--sentiment--error: var(--digi--color--border--sentiment--error--dark);
-  --digi--color--border--sentiment--info: var(--digi--color--border--sentiment--info--dark);
-  --digi--color--border--sentiment--success: var(--digi--color--border--sentiment--success--dark);
-  --digi--color--border--sentiment--warning: var(--digi--color--border--sentiment--warning--dark);
-  --digi--color--border--transparent: var(--digi--color--border--transparent--dark);
-  --digi--color--divider--cta: var(--digi--color--divider--cta--dark);
-  --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--dark);
-  --digi--color--divider--primary: var(--digi--color--divider--primary--dark);
-  --digi--color--divider--secondary: var(--digi--color--divider--secondary--dark);
-  --digi--color--divider--tertiary-hypotes: var(--digi--color--divider--tertiary-hypotes--dark);
-  --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--dark);
-  --digi--color--icon--brand-primary-secondary-hypotes: var(--digi--color--icon--brand-primary-secondary-hypotes--dark);
-  --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--dark);
-  --digi--color--icon--cta: var(--digi--color--icon--cta--dark);
-  --digi--color--icon--primary: var(--digi--color--icon--primary--dark);
-  --digi--color--icon--primary-anti-reverse: var(--digi--color--icon--primary-anti-reverse--dark);
-  --digi--color--icon--secondary: var(--digi--color--icon--secondary--dark);
-  --digi--color--icon--secondary-reverse: var(--digi--color--icon--secondary-reverse--dark);
-  --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--dark);
-  --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--dark);
-  --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--dark);
-  --digi--color--infographic--background: var(--digi--color--infographic--background--dark);
-  --digi--color--infographic--brand--primary: var(--digi--color--infographic--brand--primary--dark);
-  --digi--color--infographic--brand--primary-alt: var(--digi--color--infographic--brand--primary-alt--dark);
-  --digi--color--infographic--brand--secondary: var(--digi--color--infographic--brand--secondary--dark);
-  --digi--color--infographic--brand--secondary-alt: var(--digi--color--infographic--brand--secondary-alt--dark);
-  --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--dark);
-  --digi--color--logotype--primary--symbol: var(--digi--color--logotype--primary--symbol--dark);
-  --digi--color--logotype--primary--text: var(--digi--color--logotype--primary--text--dark);
-  --digi--color--logotype--secondary--symbol: var(--digi--color--logotype--secondary--symbol--dark);
-  --digi--color--logotype--secondary--text: var(--digi--color--logotype--secondary--text--dark);
-  --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--dark);
-  --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--dark);
-  --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--dark);
-  --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--dark);
-  --digi--color--marking--navigation--level-active: var(--digi--color--marking--navigation--level-active--dark);
-  --digi--color--marking--navigation--level-inactive: var(--digi--color--marking--navigation--level-inactive--dark);
-  --digi--color--marking--navigation--selected: var(--digi--color--marking--navigation--selected--dark);
-  --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--dark);
-  --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--dark);
-  --digi--color--text--description: var(--digi--color--text--description--dark);
-  --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--dark);
-  --digi--color--text--interactive--brand-primary-secondary-hypotes: var(--digi--color--text--interactive--brand-primary-secondary-hypotes--dark);
-  --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--dark);
-  --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--dark);
-  --digi--color--text--interactive--primary-discreet: var(--digi--color--text--interactive--primary-discreet--dark);
-  --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--dark);
-  --digi--color--text--interactive--secondary-discreet: var(--digi--color--text--interactive--secondary-discreet--dark);
-  --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--dark);
-  --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--dark);
-  --digi--color--text--primary: var(--digi--color--text--primary--dark);
-  --digi--color--text--primary-stay: var(--digi--color--text--primary-stay--dark);
-  --digi--color--text--secondary: var(--digi--color--text--secondary--dark);
-  --digi--color--text--secondary-stay: var(--digi--color--text--secondary-stay--dark);
-}
-.digi-tools-theme-provider--af18 {
+:host .digi-tools-theme-provider--af18 {
   --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--light--af18);
-  --digi--color--background--dropdown: var(--digi--color--background--dropdown--light--af18);
   --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--light--af18);
   --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--light--af18);
   --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--light--af18);
   --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--light--af18);
   --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--light--af18);
   --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--light--af18);
+  --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--light--af18);
   --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--light--af18);
-  --digi--color--background--interactive--default--transparent: var(--digi--color--background--interactive--default--transparent--light--af18);
-  --digi--color--background--interactive--hover--ghost-rider: var(--digi--color--background--interactive--hover--ghost-rider--light--af18);
   --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--light--af18);
   --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--light--af18);
   --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--light--af18);
@@ -265,7 +122,6 @@
   --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--light--af18);
   --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--light--af18);
   --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--light--af18);
-  --digi--color--background--interactive--selected--primary-stay: var(--digi--color--background--interactive--selected--primary-stay--light--af18);
   --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--light--af18);
   --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--light--af18);
   --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--light--af18);
@@ -273,7 +129,6 @@
   --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--light--af18);
   --digi--color--background--notification: var(--digi--color--background--notification--light--af18);
   --digi--color--background--pop-out: var(--digi--color--background--pop-out--light--af18);
-  --digi--color--background--pop-out-2-hypotes: var(--digi--color--background--pop-out-2-hypotes--light--af18);
   --digi--color--background--primary: var(--digi--color--background--primary--light--af18);
   --digi--color--background--secondary: var(--digi--color--background--secondary--light--af18);
   --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--light--af18);
@@ -283,7 +138,6 @@
   --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--light--af18);
   --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--light--af18);
   --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--light--af18);
-  --digi--color--background--sentiment--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--light--af18);
   --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--light--af18);
   --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--light--af18);
   --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--light--af18);
@@ -297,7 +151,6 @@
   --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--light--af18);
   --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--light--af18);
   --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--light--af18);
-  --digi--color--background--surface: var(--digi--color--background--surface--light--af18);
   --digi--color--background--transparent: var(--digi--color--background--transparent--light--af18);
   --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--light--af18);
   --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--light--af18);
@@ -305,7 +158,6 @@
   --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--light--af18);
   --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--light--af18);
   --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--light--af18);
-  --digi--color--border--interactive--default--secondary: var(--digi--color--border--interactive--default--secondary--light--af18);
   --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--light--af18);
   --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--light--af18);
   --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--light--af18);
@@ -324,15 +176,11 @@
   --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--light--af18);
   --digi--color--divider--primary: var(--digi--color--divider--primary--light--af18);
   --digi--color--divider--secondary: var(--digi--color--divider--secondary--light--af18);
-  --digi--color--divider--tertiary-hypotes: var(--digi--color--divider--tertiary-hypotes--light--af18);
   --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--light--af18);
-  --digi--color--icon--brand-primary-secondary-hypotes: var(--digi--color--icon--brand-primary-secondary-hypotes--light--af18);
   --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--light--af18);
   --digi--color--icon--cta: var(--digi--color--icon--cta--light--af18);
   --digi--color--icon--primary: var(--digi--color--icon--primary--light--af18);
-  --digi--color--icon--primary-anti-reverse: var(--digi--color--icon--primary-anti-reverse--light--af18);
   --digi--color--icon--secondary: var(--digi--color--icon--secondary--light--af18);
-  --digi--color--icon--secondary-reverse: var(--digi--color--icon--secondary-reverse--light--af18);
   --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--light--af18);
   --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--light--af18);
   --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--light--af18);
@@ -346,7 +194,6 @@
   --digi--color--logotype--primary--text: var(--digi--color--logotype--primary--text--light--af18);
   --digi--color--logotype--secondary--symbol: var(--digi--color--logotype--secondary--symbol--light--af18);
   --digi--color--logotype--secondary--text: var(--digi--color--logotype--secondary--text--light--af18);
-  --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--light--af18);
   --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--light--af18);
   --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--light--af18);
   --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--light--af18);
@@ -357,16 +204,11 @@
   --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--light--af18);
   --digi--color--text--description: var(--digi--color--text--description--light--af18);
   --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--light--af18);
-  --digi--color--text--interactive--brand-primary-secondary-hypotes: var(--digi--color--text--interactive--brand-primary-secondary-hypotes--light--af18);
   --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--light--af18);
   --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--light--af18);
-  --digi--color--text--interactive--primary-discreet: var(--digi--color--text--interactive--primary-discreet--light--af18);
   --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--light--af18);
-  --digi--color--text--interactive--secondary-discreet: var(--digi--color--text--interactive--secondary-discreet--light--af18);
   --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--light--af18);
   --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--light--af18);
   --digi--color--text--primary: var(--digi--color--text--primary--light--af18);
-  --digi--color--text--primary-stay: var(--digi--color--text--primary-stay--light--af18);
   --digi--color--text--secondary: var(--digi--color--text--secondary--light--af18);
-  --digi--color--text--secondary-stay: var(--digi--color--text--secondary-stay--light--af18);
 }