@db-ux/wc-core-components 4.12.0 → 4.13.0-shell-f221975

package/dist/esm/{constants-BdL-nI5y.js → constants-COv1iCFP.js}

@@ -14,10 +14,14 @@ const DEFAULT_INVALID_MESSAGE = 'TODO: Add an invalidMessage';
 const DEFAULT_REMOVE = 'Remove';
 const DEFAULT_BACK = 'Back';
 const DEFAULT_SELECTED = 'Selected';
-const DEFAULT_BURGER_MENU = 'BurgerMenu';
-const DEFAULT_ICON = 'brand';
+const DEFAULT_EXPAND = 'Expand';
+const DEFAULT_COLLAPSE = 'Collapse';
+const DEFAULT_SCROLL_LEFT = 'Scroll left';
+const DEFAULT_SCROLL_RIGHT = 'Scroll right';
+const DEFAULT_BURGER_MENU = 'Open navigation menu';
 const DEFAULT_ROWS = 4;
 const DEFAULT_CLOSE_BUTTON = 'Close';
+const MAIN_CONTENT_ID = 'main-content';
 const DENSITY_CONST = 'density';
 const COLOR_CONST = 'color';
 var DENSITY;
@@ -68,6 +72,7 @@ const COLORS = Object.entries(COLOR).map(([, value]) => value);
 const COLORS_SIMPLE = Object.entries(COLOR_SIMPLE).map(([, value]) => value);
 var SEMANTIC;
 (function (SEMANTIC) {
+    SEMANTIC["NEUTRAL"] = "neutral";
     SEMANTIC["CRITICAL"] = "critical";
     SEMANTIC["INFORMATIONAL"] = "informational";
     SEMANTIC["WARNING"] = "warning";
@@ -93,4 +98,4 @@ const TESTING_VIEWPORTS = [Object.assign({ name: 'desktop' }, DESKTOP_VIEWPORT),
 const DB_UX_LOCAL_STORAGE_FRAMEWORK = 'db-ux-framework';
 const DB_UX_LOCAL_STORAGE_MODE = 'db-ux-mode';
 
-export { SEMANTICS as A, DEFAULT_VIEWPORT as B, COLOR_CONST as C, DEFAULT_ID as D, DESKTOP_VIEWPORT as E, DB_UX_LOCAL_STORAGE_FRAMEWORK as F, DB_UX_LOCAL_STORAGE_MODE as G, SEMANTIC as S, TESTING_VIEWPORTS as T, DEFAULT_LABEL as a, DEFAULT_PLACEHOLDER as b, DEFAULT_MESSAGE as c, DEFAULT_LABEL_ID_SUFFIX as d, DEFAULT_SELECT_ID_SUFFIX as e, DEFAULT_MESSAGE_ID_SUFFIX as f, DEFAULT_VALID_MESSAGE_ID_SUFFIX as g, DEFAULT_INVALID_MESSAGE_ID_SUFFIX as h, DEFAULT_PLACEHOLDER_ID_SUFFIX as i, DEFAULT_DATALIST_ID_SUFFIX as j, DEFAULT_VALID_MESSAGE as k, DEFAULT_INVALID_MESSAGE as l, DEFAULT_REMOVE as m, DEFAULT_BACK as n, DEFAULT_SELECTED as o, DEFAULT_BURGER_MENU as p, DEFAULT_ICON as q, DEFAULT_ROWS as r, DEFAULT_CLOSE_BUTTON as s, DENSITY_CONST as t, DENSITY as u, DENSITIES as v, COLOR_SIMPLE as w, COLOR as x, COLORS as y, COLORS_SIMPLE as z };
+export { COLOR as A, COLORS as B, COLOR_CONST as C, DEFAULT_ID as D, COLORS_SIMPLE as E, SEMANTICS as F, DEFAULT_VIEWPORT as G, DESKTOP_VIEWPORT as H, DB_UX_LOCAL_STORAGE_FRAMEWORK as I, DB_UX_LOCAL_STORAGE_MODE as J, MAIN_CONTENT_ID as M, SEMANTIC as S, TESTING_VIEWPORTS as T, DEFAULT_LABEL as a, DEFAULT_PLACEHOLDER as b, DEFAULT_MESSAGE as c, DEFAULT_LABEL_ID_SUFFIX as d, DEFAULT_SELECT_ID_SUFFIX as e, DEFAULT_MESSAGE_ID_SUFFIX as f, DEFAULT_VALID_MESSAGE_ID_SUFFIX as g, DEFAULT_INVALID_MESSAGE_ID_SUFFIX as h, DEFAULT_PLACEHOLDER_ID_SUFFIX as i, DEFAULT_DATALIST_ID_SUFFIX as j, DEFAULT_VALID_MESSAGE as k, DEFAULT_INVALID_MESSAGE as l, DEFAULT_REMOVE as m, DEFAULT_BACK as n, DEFAULT_SELECTED as o, DEFAULT_EXPAND as p, DEFAULT_COLLAPSE as q, DEFAULT_SCROLL_LEFT as r, DEFAULT_SCROLL_RIGHT as s, DEFAULT_BURGER_MENU as t, DEFAULT_ROWS as u, DEFAULT_CLOSE_BUTTON as v, DENSITY_CONST as w, DENSITY as x, DENSITIES as y, COLOR_SIMPLE as z };

package/dist/esm/db-accordion-item.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BlbKvvUv.js';
-import { e as getBoolean, g as getBooleanAsString, c as cls } from './index-fumiz06Y.js';
+import { f as getBoolean, g as getBooleanAsString, c as cls } from './index-DB8jc8lh.js';
 
 const DBAccordionItem = class {
     constructor(hostRef) {
@@ -144,9 +144,9 @@ const DBAccordionItem = class {
     }
     render() {
         var _a, _b;
-        return (h("li", { key: 'c397db96c483e2aac2576fd78d76554906a734a7', class: cls("db-accordion-item", this.className), id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("details", { key: 'f62a207933a57adff2bdf3ab3f683dc1e319ef8b', "aria-disabled": getBooleanAsString(this.disabled, "disabled"), ref: (el) => {
+        return (h("li", { key: '8a160debf7704879907e1281f0f54d5893b33e79', class: cls("db-accordion-item", this.className), id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("details", { key: '24cf12c75d7a6af0f5e6063a14b34a9737f07724', "aria-disabled": getBooleanAsString(this.disabled, "disabled"), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, open: this._open }, h("summary", { key: '54467fab087e8ad5273729c3e9439b7e2d970930', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? h("slot", { name: "headline" }) : null), h("div", { key: '8e5fd3be29d7cbc56fa2e792f3dabe65424d9a40' }, this.text ? this.text : null, h("slot", { key: '8a0ff2a38a23ced4ca443623924e51a580219cc5' })))));
+            }, name: this._name, open: this._open }, h("summary", { key: '077c1911850cac3662496b58ff56718ec97f814b', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? h("slot", { name: "headline" }) : null), h("div", { key: 'b5b0a02c9f2cebed99bee7d3fc9b7c23f2e1d043' }, this.text ? this.text : null, h("slot", { key: '74c340a2f3c35ab0d00555554d7c30f8b80b8f9b' })))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/db-accordion.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
-import { u as uuid, c as cls } from './index-fumiz06Y.js';
+import { u as uuid, c as cls } from './index-DB8jc8lh.js';
 
 const DBAccordion = class {
     constructor(hostRef) {
@@ -171,7 +171,7 @@ const DBAccordion = class {
     }
     render() {
         var _a, _b, _c;
-        return (h("ul", { key: 'f98dfda4df392afc979727a1bbc859f9bd7aab97', class: cls("db-accordion", this.className), ref: (el) => {
+        return (h("ul", { key: 'd996789030a6c8929616381063586d57f4d08a01', class: cls("db-accordion", this.className), ref: (el) => {
                 this._ref = el;
             }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-variant": this.variant }, !this.items ? h("slot", null) : null, this.items
             ? (_c = this.convertItems()) === null || _c === void 0 ? void 0 : _c.map((item, index) => (h("db-accordion-item", { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text })))

package/dist/esm/db-badge.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
-import { a as DEFAULT_LABEL } from './constants-BdL-nI5y.js';
-import { g as getBooleanAsString, c as cls } from './index-fumiz06Y.js';
+import { a as DEFAULT_LABEL } from './constants-COv1iCFP.js';
+import { g as getBooleanAsString, c as cls } from './index-DB8jc8lh.js';
 
 const DBBadge = class {
     constructor(hostRef) {
@@ -111,9 +111,9 @@ const DBBadge = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("span", { key: '35ba74d807e8b24b8b657e2ab744ffdacc543ddb', class: cls("db-badge", this.className), ref: (el) => {
+        return (h("span", { key: 'd2f49451ff0969570ebf5bfdf0d38bd24fdb74f5', class: cls("db-badge", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-semantic": this.semantic, "data-size": this.size, "data-emphasis": this.emphasis, "data-placement": this.placement, "data-wrap": getBooleanAsString(this.wrap, "wrap"), "data-label": ((_c = this.placement) === null || _c === void 0 ? void 0 : _c.startsWith("corner")) && ((_d = this.label) !== null && _d !== void 0 ? _d : DEFAULT_LABEL) }, this.text ? this.text : null, h("slot", { key: 'e6941e0d7594f49fc7ab5e8e23ad85ed3dc15510' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-semantic": this.semantic, "data-size": this.size, "data-emphasis": this.emphasis, "data-placement": this.placement, "data-wrap": getBooleanAsString(this.wrap, "wrap"), "data-label": ((_c = this.placement) === null || _c === void 0 ? void 0 : _c.startsWith("corner")) && ((_d = this.label) !== null && _d !== void 0 ? _d : DEFAULT_LABEL) }, this.text ? this.text : null, h("slot", { key: 'f8fd8178b7655c825885c010d884c00056068572' })));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/db-button.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BlbKvvUv.js';
-import { g as getBooleanAsString, e as getBoolean, c as cls } from './index-fumiz06Y.js';
+import { g as getBooleanAsString, f as getBoolean, c as cls } from './index-DB8jc8lh.js';
 
 const DBButton = class {
     constructor(hostRef) {
@@ -14,6 +14,9 @@ const DBButton = class {
         else if (this.click) {
             return "button";
         }
+        else if (this.commandfor) {
+            return "button";
+        }
         return "submit";
     }
     setupObserver(element) {
@@ -93,10 +96,10 @@ const DBButton = class {
     }
     render() {
         var _a, _b, _c;
-        return (h("button", { key: '5eadddc7c23a90019ab373dfd11aedfc2000735f', class: cls("db-button", this.className), ref: (el) => {
+        return (h("button", { key: '267ba7e58126895a0ef9e5faaa5f01d969b904dc', class: cls("db-button", this.className), ref: (el) => {
                 this._ref = el;
             }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, type: this.getButtonType(), disabled: getBoolean(this.disabled, "disabled"), "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": getBooleanAsString(this.showIconLeading, "showIconLeading") ||
-                getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": getBooleanAsString(this.wrap, "wrap"), "data-no-text": getBooleanAsString(this.noText, "noText"), name: this.name, form: this.form, value: this.value }, this.text ? this.text : null, h("slot", { key: 'd42f84050c3eb885783ed3488293062cf9a00bcf' })));
+                getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": getBooleanAsString(this.wrap, "wrap"), "data-no-text": getBooleanAsString(this.noText, "noText"), name: this.name, form: this.form, value: this.value, command: this.command, commandfor: this.commandfor }, this.text ? this.text : null, h("slot", { key: '6336cd932f883bd4b042e1c2fd159ba7c30ee1ab' })));
     }
     get rootElement() { return getElement(this); }
 };

package/dist/esm/db-card.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BlbKvvUv.js';
-import { c as cls } from './index-fumiz06Y.js';
+import { c as cls } from './index-DB8jc8lh.js';
 
 const DBCard = class {
     constructor(hostRef) {
@@ -89,9 +89,9 @@ const DBCard = class {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '239a6339e8f5764403ced3424b1b8c1b0da0bf41', class: cls("db-card", this.className), ref: (el) => {
+        return (h("div", { key: 'c8b59aa078aea8911304df37d49ce773e037e580', class: cls("db-card", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, h("slot", { key: '8b9970f8e6300a4feddc2de934ddd3ba4cab11ad' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, h("slot", { key: 'fb9a79f1372c9fde1eb98d049a768db70be370b3' })));
     }
     get rootElement() { return getElement(this); }
 };

package/dist/esm/db-checkbox.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BlbKvvUv.js';
-import { l as DEFAULT_INVALID_MESSAGE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE } from './constants-BdL-nI5y.js';
-import { h as hasVoiceOver, d as delay, s as stringPropVisible, u as uuid, e as getBoolean, l as getHideProp, c as cls } from './index-fumiz06Y.js';
-import { a as addCheckedResetEventListener } from './form-components-ZV7IN0oG.js';
+import { l as DEFAULT_INVALID_MESSAGE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE } from './constants-COv1iCFP.js';
+import { h as hasVoiceOver, d as delay, s as stringPropVisible, u as uuid, f as getBoolean, m as getHideProp, c as cls } from './index-DB8jc8lh.js';
+import { a as addCheckedResetEventListener } from './form-components-zJeL8XMn.js';
 
 const DBCheckbox = class {
     constructor(hostRef) {
@@ -248,9 +248,9 @@ const DBCheckbox = class {
     }
     render() {
         var _a;
-        return (h("div", { key: 'b386e9507944ca665310bd874fdee124af12f071', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: 'd6963dfdb59a00f027231babd6d985681c331b99', htmlFor: this._id }, h("input", { key: '81848aef05a7288c4ae200f48be6f8614e68607f', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("div", { key: '130503bffd4d94f77a085f02d655dbbcb2fc7772', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: 'f38874a7e11630dd21abe1c8c1f4fa8b65116550', htmlFor: this._id }, h("input", { key: '49fa26610cfadcb064cb11e2b7fe97cae7cd93ae', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : this._descByIds }), this.label ? this.label : null, h("slot", { key: '433ec6a708da3f342f8fc745ddefbdc9c15d8b9a' })), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '4295a01b6f8f0a9d78f337dac875f53c45ddefa6', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '85e87a85df4ca25e535cf0c890ba943f5cfa978b', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : this._descByIds }), this.label ? this.label : null, h("slot", { key: '2119a959da0c591beb6ab2ed1909482943699e6e' })), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'aa579c03ce1cb3049c46bd454b671c74ec12f17a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '076ea23eb8d662c3ba254cea5c229831dab390bd', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/db-control-panel-brand.entry.js

@@ -0,0 +1,93 @@
+import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
+import { c as cls } from './index-DB8jc8lh.js';
+
+const DBControlPanelBrand = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-brand");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-control-panel-brand");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-control-panel-brand");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b;
+        return (h("div", { key: 'bcc1befdd6504c1067a3a34b91b3ffcccf4a45b7', class: cls("db-control-panel-brand", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: 'f02755f7e5008542816a537235aeb3c83d5e2da6' })));
+    }
+    get rootElement() { return getElement(this); }
+};
+
+export { DBControlPanelBrand as db_control_panel_brand };

package/dist/esm/db-control-panel-desktop.entry.js

@@ -0,0 +1,146 @@
+import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
+import { q as DEFAULT_COLLAPSE, p as DEFAULT_EXPAND } from './constants-COv1iCFP.js';
+import { u as uuid, f as getBoolean, g as getBooleanAsString, c as cls } from './index-DB8jc8lh.js';
+
+const DBControlPanelDesktop = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this._id = undefined;
+        this._open = true;
+        this.observer = undefined;
+    }
+    handleToggle(event) {
+        /* Guard: In WC/Stencil, custom events wrap payload in event.detail as object.
+        Native click has event.detail as number. Prevents double-toggle. */
+        if (typeof event.detail !== "object") {
+            event.stopPropagation();
+            this._open = !this._open;
+        }
+    }
+    getToggleButtonText() {
+        var _a;
+        if (this.expandButtonTooltip) {
+            return this.expandButtonTooltip;
+        }
+        const fnOutput = () => undefined;
+        return (_a = fnOutput()) !== null && _a !== void 0 ? _a : (this._open ? DEFAULT_COLLAPSE : DEFAULT_EXPAND);
+    }
+    resetIds() {
+        var _a, _b, _c;
+        this._id =
+            (_c = (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `db-control-panel-desktop-${uuid()}`;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-desktop");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-control-panel-desktop");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    watch0Fn() {
+        this.resetIds();
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        var _a;
+        if (this.expanded !== undefined) {
+            this._open = (_a = getBoolean(this.expanded, "expanded")) !== null && _a !== void 0 ? _a : true;
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-control-panel-desktop");
+        this.setupObserver(this._ref);
+        this.watch0Fn();
+        this.watch1Fn();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (h("header", { key: '1e69bc19a8df84edc32a6ccd90fcc4910ca5215b', class: cls("db-control-panel-desktop", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this._id, "data-width": this.width, "data-orientation": this.orientation, "data-open": getBooleanAsString(this._open) }, h("slot", { key: '1e3a183c4e3746eaacae1dc69d74a5c61b825e47', name: "skipNavigation" }), h("div", { key: 'f3bd252e6dea284952c692456d45541ae03f439a', class: "db-control-panel-desktop-brand-container" }, h("slot", { key: '6cd6d8aabea48f6c60d99e892dc1669eb13f04af', name: "brand" })), h("div", { key: '17427a9e8159e9dc56bae68c713995b7cef67ea6', class: "db-control-panel-desktop-scroll-container", ref: (el) => {
+                this._scrollContainerRef = el;
+            } }, h("slot", { key: 'f1d0d4d75002f9668957f2bc566a8380b0709cbe' }), h("slot", { key: '85acca3e6977e39527c83b3bbc47cf7801525b2c', name: "metaNavigation" })), h("slot", { key: 'e3e1cf00d281bead1888757e39b600e0caa455b2', name: "primaryActions" }), h("slot", { key: '793f8cb101822660216e84df98999d6523113003', name: "secondaryActions" }), h("div", { key: '0ee3e4d58514e2bd989b398a4e0bbd054a3e34a9', class: "db-control-panel-desktop-button" }, h("button", { key: '2222f3382646d813accad996e371f7adf0d36ddc', class: "db-button", "data-variant": "ghost", "data-no-text": "true", type: "button", "data-icon": "double_chevron_left", onClick: (event) => this.handleToggle(event), "aria-controls": this._id, "aria-expanded": getBooleanAsString(this._open) }, h("db-tooltip", { key: '81b66866bc0bbaec059a67a1d1479c4af7309805', variant: "label", placement: "right" }, this.getToggleButtonText())))));
+    }
+    get rootElement() { return getElement(this); }
+    static get watchers() { return {
+        "id": [{
+                "watch0": 0
+            }],
+        "propOverrides": [{
+                "watch0": 0
+            }],
+        "expanded": [{
+                "watch1": 0
+            }]
+    }; }
+};
+
+export { DBControlPanelDesktop as db_control_panel_desktop };

package/dist/esm/db-control-panel-flat-icon.entry.js

@@ -0,0 +1,132 @@
+import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
+import { e as hasCssFlag, g as getBooleanAsString, c as cls } from './index-DB8jc8lh.js';
+import { R as ResizeObserverListener } from './resize-observer-listener-z8XjzxC9.js';
+
+const DBControlPanelFlatIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this._resizeObserverCallbackId = undefined;
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-flat-icon");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-control-panel-flat-icon");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    watch0Fn() {
+        if (this._ref && !this._resizeObserverCallbackId) {
+            // Capture the initial density and persist it as a data attribute
+            const initialDensity = this._ref.getAttribute("data-density");
+            if (initialDensity) {
+                this._ref.setAttribute("data-initial-density", initialDensity);
+            }
+            this._resizeObserverCallbackId = new ResizeObserverListener().observe(this._ref, () => {
+                if (!this._ref)
+                    return;
+                const isMobile = hasCssFlag(this._ref, "--db-control-panel-flat-icon-mobile");
+                const savedDensity = this._ref.getAttribute("data-initial-density");
+                if (isMobile) {
+                    this._ref.setAttribute("data-density", "regular");
+                }
+                else if (savedDensity) {
+                    this._ref.setAttribute("data-density", savedDensity);
+                }
+                else {
+                    this._ref.removeAttribute("data-density");
+                }
+            });
+        }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-control-panel-flat-icon");
+        this.setupObserver(this._ref);
+        this.watch0Fn();
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this._resizeObserverCallbackId) {
+            new ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+            this._resizeObserverCallbackId = undefined;
+        }
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b;
+        return (h("header", { key: '6402a0d80b368fcead6440a8412489a934619619', class: cls("db-control-panel-flat-icon", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-no-text": getBooleanAsString(this.noText, "noText") }, h("slot", { key: '24ac665b0b511685e2ff88f45d99b9dc15630800', name: "skipNavigation" }), h("slot", { key: '354b01d6d250d6d9cc25a6236189bee042c1ce64' })));
+    }
+    get rootElement() { return getElement(this); }
+    static get watchers() { return {
+        "_ref": [{
+                "watch0": 0
+            }]
+    }; }
+};
+
+export { DBControlPanelFlatIcon as db_control_panel_flat_icon };

package/dist/esm/{db-navigation.entry.js → db-control-panel-meta.entry.js}

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
-import { c as cls } from './index-fumiz06Y.js';
+import { c as cls } from './index-DB8jc8lh.js';
 
-const DBNavigation = class {
+const DBControlPanelMeta = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.observer = undefined;
@@ -9,7 +9,7 @@ const DBNavigation = class {
     setupObserver(element) {
         if (!element)
             return;
-        const parent = element.closest("db-navigation");
+        const parent = element.closest("db-control-panel-meta");
         if (!parent || this.observer)
             return;
         this.observer = new MutationObserver((mutations) => {
@@ -18,7 +18,7 @@ const DBNavigation = class {
                 const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
                 return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
             })) {
-                this.enableAttributePassing(element, "db-navigation");
+                this.enableAttributePassing(element, "db-control-panel-meta");
             }
         });
         this.observer.observe(parent, {
@@ -74,7 +74,7 @@ const DBNavigation = class {
                 connectedElement.remove();
             }
         }
-        this.enableAttributePassing(this._ref, "db-navigation");
+        this.enableAttributePassing(this._ref, "db-control-panel-meta");
         this.setupObserver(this._ref);
     }
     disconnectedCallback() {
@@ -83,11 +83,11 @@ const DBNavigation = class {
     }
     render() {
         var _a, _b;
-        return (h("nav", { key: 'e9dbd8ab905cbb2dd887dfe21fc96afea70b9f70', class: cls("db-navigation", this.className), ref: (el) => {
+        return (h("div", { key: 'a4131ee9def6e33560b304d2f957ab6895dd0bd6', class: cls("db-control-panel-meta", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("menu", { key: '421231c4fabc97119732586bf221c07ebc914a19' }, h("slot", { key: 'f015b010c2d2e09570ead913a90d14160eed857c' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: '2c32541f883cdb301a3aee5811fedfde0d760a01' })));
     }
     get rootElement() { return getElement(this); }
 };
 
-export { DBNavigation as db_navigation };
+export { DBControlPanelMeta as db_control_panel_meta };