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

package/dist/cjs/db-popover.cjs.entry.js

@@ -1,9 +1,11 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
-var documentScrollListener = require('./document-scroll-listener-CvAZ6uPr.js');
-var floatingComponents = require('./floating-components-DlstoCKH.js');
+var index$1 = require('./index-Df-6pBQf.js');
+var documentScrollListener = require('./document-scroll-listener-CgyYRmvZ.js');
+var floatingComponents = require('./floating-components-B3bpFI90.js');
+var intersectionObserverListener = require('./intersection-observer-listener-DlrHabJb.js');
+var resizeObserverListener = require('./resize-observer-listener-CmPDfoZs.js');
 
 const DBPopover = class {
     constructor(hostRef) {
@@ -11,7 +13,8 @@ const DBPopover = class {
         this.initialized = false;
         this.isExpanded = false;
         this._documentScrollListenerCallbackId = undefined;
-        this._observer = undefined;
+        this._intersectionObserverCallbackId = undefined;
+        this._resizeObserverCallbackId = undefined;
         this.observer = undefined;
     }
     handleEscape(event) {
@@ -29,8 +32,7 @@ const DBPopover = class {
         if (article) {
             // This is a workaround for angular
             void index$1.delay(() => {
-                var _a;
-                floatingComponents.handleFixedPopover(article, this._ref, (_a = this.placement) !== null && _a !== void 0 ? _a : "bottom");
+                floatingComponents.handleFixedPopover(article, this._ref);
             }, 1);
         }
     }
@@ -41,18 +43,35 @@ const DBPopover = class {
         }
     }
     handleEnter() {
-        var _a;
         this.isExpanded = true;
+        // Clean up any existing observers to prevent leaks from repeated enter
+        if (this._documentScrollListenerCallbackId) {
+            new documentScrollListener.DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId);
+            this._documentScrollListenerCallbackId = undefined;
+        }
+        if (this._resizeObserverCallbackId) {
+            new resizeObserverListener.ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+            this._resizeObserverCallbackId = undefined;
+        }
+        if (this._intersectionObserverCallbackId) {
+            new intersectionObserverListener.IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId);
+            this._intersectionObserverCallbackId = undefined;
+        }
         this._documentScrollListenerCallbackId =
             new documentScrollListener.DocumentScrollListener().addCallback((event) => this.handleDocumentScroll(event));
         this.handleAutoPlacement();
+        this._resizeObserverCallbackId = new resizeObserverListener.ResizeObserverListener().observe(document.documentElement, () => this.handleAutoPlacement());
         const child = this.getTrigger();
         if (child) {
-            (_a = this._observer) === null || _a === void 0 ? void 0 : _a.observe(child);
+            this._intersectionObserverCallbackId =
+                new intersectionObserverListener.IntersectionObserverListener().observe(child, (entry) => {
+                    if (!entry.isIntersecting) {
+                        this.handleEscape(false);
+                    }
+                });
         }
     }
     handleLeave(event) {
-        var _a;
         const element = event === null || event === void 0 ? void 0 : event.target;
         const parent = element === null || element === void 0 ? void 0 : element.parentNode;
         if (!parent ||
@@ -62,10 +81,15 @@ const DBPopover = class {
             this.isExpanded = false;
             if (this._documentScrollListenerCallbackId) {
                 new documentScrollListener.DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId);
+                this._documentScrollListenerCallbackId = undefined;
             }
-            const child = this.getTrigger();
-            if (child) {
-                (_a = this._observer) === null || _a === void 0 ? void 0 : _a.unobserve(child);
+            if (this._resizeObserverCallbackId) {
+                new resizeObserverListener.ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+                this._resizeObserverCallbackId = undefined;
+            }
+            if (this._intersectionObserverCallbackId) {
+                new intersectionObserverListener.IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId);
+                this._intersectionObserverCallbackId = undefined;
             }
         }
     }
@@ -164,14 +188,6 @@ const DBPopover = class {
             ["mouseleave", "focusout"].forEach((event) => {
                 this._ref.addEventListener(event, () => this.handleLeave());
             });
-            if (typeof window !== "undefined" && "IntersectionObserver" in window) {
-                this._observer = new IntersectionObserver((payload) => {
-                    const entry = payload.find(({ target }) => target === this.getTrigger());
-                    if (entry && !entry.isIntersecting) {
-                        this.handleEscape(false);
-                    }
-                });
-            }
         }
     }
     watch0() {
@@ -209,13 +225,25 @@ const DBPopover = class {
     }
     disconnectedCallback() {
         var _a;
+        if (this._documentScrollListenerCallbackId) {
+            new documentScrollListener.DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId);
+            this._documentScrollListenerCallbackId = undefined;
+        }
+        if (this._resizeObserverCallbackId) {
+            new resizeObserverListener.ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+            this._resizeObserverCallbackId = undefined;
+        }
+        if (this._intersectionObserverCallbackId) {
+            new intersectionObserverListener.IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId);
+            this._intersectionObserverCallbackId = undefined;
+        }
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b, _c;
-        return (index.h("div", { key: '6c495cb9c8f329dd2cf07bfc55b56eb9aa524fb9', class: index$1.cls("db-popover", this.className), ref: (el) => {
+        return (index.h("div", { key: '05f2e24b5649f68be8480fabf05bdc79fd4a454e', class: index$1.cls("db-popover", 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 }, index.h("slot", { key: 'f74be440cae4d35f76ff2899bae864fc9e3e5c8a', name: "trigger" }), index.h("article", { key: 'efec32b56bf7267aed0f0723306398f9e5f66c75', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": index$1.getBooleanAsString(this.gap, "gap"), "data-animation": index$1.getBooleanAsString((_c = this.animation) !== null && _c !== void 0 ? _c : true, "animation"), "data-open": index$1.getBooleanAsString(this.open, "open"), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, index.h("slot", { key: '2a1957f512ad0c9eca6e9e5f50721dda1ce56cf3' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("slot", { key: '4fe2e58f6e2ccf3a18747f2810e6e62fdaa18576', name: "trigger" }), index.h("article", { key: '3fde13e830ddcd944854bf0123610fd5c04c8396', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": index$1.getBooleanAsString(this.gap, "gap"), "data-animation": index$1.getBooleanAsString((_c = this.animation) !== null && _c !== void 0 ? _c : true, "animation"), "data-open": index$1.getBooleanAsString(this.open, "open"), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, index.h("slot", { key: 'c147317adc5fdc5c2aa313396360f76fb39f59ec' }))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/db-radio.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
-var formComponents = require('./form-components-CmQlkARp.js');
+var index$1 = require('./index-Df-6pBQf.js');
+var formComponents = require('./form-components-XNiwIGq8.js');
 
 const DBRadio = class {
     constructor(hostRef) {
@@ -167,9 +167,9 @@ const DBRadio = class {
         (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     render() {
-        return (index.h("label", { key: '130a6743dc68574baad658d474299d9808f7505f', class: index$1.cls("db-radio", this.className), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), htmlFor: this._id }, index.h("input", { key: 'ebd2443b32fb32cf21735ea00607ee32f3da01d2', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("label", { key: 'fedde19abfa095e6215c68bdfc2602ae1b53c811', class: index$1.cls("db-radio", this.className), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), htmlFor: this._id }, index.h("input", { key: '75e0f430e4f2a268d48f856c382d17a25506e7d0', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, checked: index$1.getBoolean(this.checked, "checked"), disabled: index$1.getBoolean(this.disabled, "disabled"), value: this.value, required: index$1.getBoolean(this.required, "required"), onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event) }), this.label ? this.label : null, index.h("slot", { key: '2f4ccd96173b5780348cdddf914aa6ba424314bb' })));
+            }, id: this._id, name: this.name, checked: index$1.getBoolean(this.checked, "checked"), disabled: index$1.getBoolean(this.disabled, "disabled"), value: this.value, required: index$1.getBoolean(this.required, "required"), onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event) }), this.label ? this.label : null, index.h("slot", { key: '51a2938014418d325d73f60c5d6b30461c2832a8' })));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/db-section.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
+var index$1 = require('./index-Df-6pBQf.js');
 
 const DBSection = class {
     constructor(hostRef) {
@@ -85,9 +85,9 @@ const DBSection = class {
     }
     render() {
         var _a, _b;
-        return (index.h("section", { key: '1dc0a8e37a04cd3a4caba5a50b94ea876e80d462', class: index$1.cls("db-section", this.className), ref: (el) => {
+        return (index.h("section", { key: '818b03641b56d6ee3324de6840216c36ad88cb5f', class: index$1.cls("db-section", 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-spacing": this.spacing || "medium", "data-width": this.width }, index.h("slot", { key: '74e62afdc9b8922d1cbd57e801fff67969831ac9' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-spacing": this.spacing || "medium", "data-width": this.width }, index.h("slot", { key: '60006ff0140b76c482ed93b65f0f56ae0eb54e07' })));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-select.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-spuu3sXz.js');
-var formComponents = require('./form-components-CmQlkARp.js');
+var constants = require('./constants-BM1EltPT.js');
+var index$1 = require('./index-Df-6pBQf.js');
+var formComponents = require('./form-components-XNiwIGq8.js');
 
 const DBSelect = class {
     constructor(hostRef) {
@@ -278,14 +278,14 @@ const DBSelect = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h("div", { key: '5273757e8379f6601c23f4b343812c233ddf86eb', class: index$1.cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon") }, index.h("label", { key: '9c75ec7cd982b4b8d283ce9365f6642c363dae16', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: '8b2e0dc14717704e45524cf7803163c6c640de32', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("div", { key: 'f8378bfa46ef070277bd139d22dca6e14144d043', class: index$1.cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon") }, index.h("label", { key: '3214b7203a712bb24e9ad68d5a0c172d4936f4da', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: '1dc0396696e7ae35f1379516e13746c7296c05d9', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
             }, required: index$1.getBoolean(this.required, "required"), disabled: index$1.getBoolean(this.disabled, "disabled"), id: this._id, name: this.name, size: this.size,
             /* @ts-ignore */
             value: (_c = (_b = this.value) !== null && _b !== void 0 ? _b : this._value) !== null && _c !== void 0 ? _c : undefined, autocomplete: this.autocomplete, multiple: this.multiple, onInput: (event) => this.handleInput(event), onClick: (event) => this.handleClick(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds }, this.variant === "floating" || !!this.placeholder ? (index.h("option", { class: "placeholder", value: "", "data-show-empty-option": index$1.getBooleanAsString(this.shouldShowEmptyOption(), "showEmptyOption") })) : null, ((_e = this.options) === null || _e === void 0 ? void 0 : _e.length) ? ((_f = this.options) === null || _f === void 0 ? void 0 : _f.map((option) => {
             var _a;
             return (index.h(index.Fragment, null, option.options ? (index.h("optgroup", { label: this.getOptionLabel(option), key: undefined }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (index.h("option", { value: optgroupOption.value, selected: optgroupOption.selected, disabled: optgroupOption.disabled, key: undefined }, this.getOptionLabel(optgroupOption)))))) : (index.h("option", { value: option.value, disabled: option.disabled, selected: option.selected, key: undefined }, this.getOptionLabel(option)))));
-        })) : (index.h("slot", null))), this.placeholder ? (index.h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '5c7dbe0b5e75b5f4b704cf469f0806451e3d0c4a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '932f5a52716c95629ed4eb12e3b2eee3ce1c559f', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+        })) : (index.h("slot", null))), this.placeholder ? (index.h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '0f0bbbc2306021f8ec85dd4aadb679a17a469ac2', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '8d554728c58e2693a197b0136f3ebcf19dbcb061', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/db-shell-content.cjs.entry.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var constants = require('./constants-BM1EltPT.js');
+var index$1 = require('./index-Df-6pBQf.js');
+
+const DBShellContent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.variant = "auto";
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-shell-content");
+        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-shell-content");
+            }
+        });
+        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-shell-content");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b, _c;
+        return (index.h("div", { key: '731bf736a256dbb756c28c6ec1e2ff4013ca4ed7', class: index$1.cls("db-shell-content", 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 }, index.h("slot", { key: '10529094c104300eb4135fb6aadb4b368ddf9e66', name: "startSlot" }), index.h("main", { key: '7b28388d870b5351eaca6ce6d3988ed70052e69c', class: index$1.cls("db-main", this.mainClass), id: (_c = this.mainId) !== null && _c !== void 0 ? _c : constants.MAIN_CONTENT_ID, "aria-label": this.mainLabel }, index.h("slot", { key: '182adf6e0563762abf939a3d9625ab56ec81a6d9' })), index.h("slot", { key: 'e6701313eb0aabfab1a40c4bcc44e5dd406748c2', name: "endSlot" })));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+exports.db_shell_content = DBShellContent;

package/dist/cjs/db-shell-sub-navigation.cjs.entry.js

@@ -0,0 +1,110 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var constants = require('./constants-BM1EltPT.js');
+var index$1 = require('./index-Df-6pBQf.js');
+
+const DBShellSubNavigation = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this._id = `db-shell-sub-navigation-${index$1.uuid()}`;
+        this._open = true;
+        this.observer = undefined;
+    }
+    handleToggle(event) {
+        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 ? constants.DEFAULT_COLLAPSE : constants.DEFAULT_EXPAND);
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-shell-sub-navigation");
+        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-shell-sub-navigation");
+            }
+        });
+        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-shell-sub-navigation");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        return (index.h("aside", { key: 'b7d0f24dad986142ff9dd1934ba26cf69aa8afa7', class: index$1.cls("db-shell-sub-navigation", this.className), ref: (el) => {
+                this._ref = el;
+            }, 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 : this._id, "data-open": index$1.getBooleanAsString(this._open) }, index.h("slot", { key: 'a81ef3f89b5fd04b9a37b82104a104daa8b0a3fd' }), index.h("div", { key: '2b7f4c8a505e7eb2051e1cc00056fe4a128a7b7f', class: "db-shell-sub-navigation-button" }, index.h("button", { key: '9f58b47acff481c63e63480e8eac60c2b267c67d', class: "db-button", "data-variant": "ghost", "data-no-text": "true", "data-icon": "double_chevron_left", onClick: (event) => this.handleToggle(event), "aria-controls": (_f = (_d = this.id) !== null && _d !== void 0 ? _d : (_e = this.propOverrides) === null || _e === void 0 ? void 0 : _e.id) !== null && _f !== void 0 ? _f : this._id, "aria-expanded": index$1.getBooleanAsString(this._open) }, index.h("db-tooltip", { key: 'febfc5670fbce950bc756292543ab3b1de3651de', variant: "label", placement: "right" }, this.getToggleButtonText())))));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+exports.db_shell_sub_navigation = DBShellSubNavigation;

package/dist/cjs/{db-page.cjs.entry.js → db-shell.cjs.entry.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
+var index$1 = require('./index-Df-6pBQf.js');
 
-const DBPage = class {
+const DBShell = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.fontsLoaded = false;
@@ -12,7 +12,7 @@ const DBPage = class {
     setupObserver(element) {
         if (!element)
             return;
-        const parent = element.closest("db-page");
+        const parent = element.closest("db-shell");
         if (!parent || this.observer)
             return;
         this.observer = new MutationObserver((mutations) => {
@@ -21,7 +21,7 @@ const DBPage = 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-page");
+                this.enableAttributePassing(element, "db-shell");
             }
         });
         this.observer.observe(parent, {
@@ -77,11 +77,15 @@ const DBPage = class {
                 connectedElement.remove();
             }
         }
-        this.enableAttributePassing(this._ref, "db-page");
+        this.enableAttributePassing(this._ref, "db-shell");
         const onMountHook_0 = () => {
-            this.fontsLoaded = !this.fadeIn;
-            if (document && this.fadeIn) {
-                document.fonts.ready.then(() => {
+            var _a, _b;
+            const fadeIn = index$1.getBoolean(this.fadeIn, "fadeIn");
+            this.fontsLoaded = !fadeIn;
+            if (document && fadeIn) {
+                (_b = (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready) === null || _b === void 0 ? void 0 : _b.then(() => {
+                    this.fontsLoaded = true;
+                }).catch(() => {
                     this.fontsLoaded = true;
                 });
             }
@@ -97,20 +101,15 @@ const DBPage = class {
     }
     disconnectedCallback() {
         var _a;
-        if (typeof window !== "undefined" &&
-            document.documentElement.classList.contains("db-page-document")) {
-            // remove document styles set by this
-            document.documentElement.classList.remove("db-page-document");
-        }
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        var _a, _b;
-        return (index.h("div", { key: 'd8c086f8eb07ec85955f140adabfa43f78286635', class: index$1.cls("db-page", this.className), ref: (el) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (index.h("div", { key: '3dbac9ffe368787517b775903e88ac086614066f', class: index$1.cls("db-shell", 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, "data-fade-in": index$1.getBooleanAsString(this.fadeIn, "fadeIn"), "data-fonts-loaded": index$1.getBooleanAsString(this.fontsLoaded, "fontsLoaded") }, index.h("slot", { key: '9122b1310ce8e47ad01576dcd124da4c37f6c702', name: "header" }), index.h("main", { key: '27318129c99bdf85882dfe1e28265ebf7abe0437', class: index$1.cls("db-main", this.mainClass) }, index.h("slot", { key: 'cc1e59ff392c38010ffb61fc7dcfffc30bb75990' })), index.h("slot", { key: 'd0335d70f621f133e68f3a79a90a62ecf1b65be5', name: "footer" })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-control-panel-desktop-position": (_c = this.controlPanelDesktopPosition) !== null && _c !== void 0 ? _c : "top", "data-control-panel-mobile-position": (_d = this.controlPanelMobilePosition) !== null && _d !== void 0 ? _d : "top", "data-sub-navigation-desktop-position": (_e = this.subNavigationDesktopPosition) !== null && _e !== void 0 ? _e : "top", "data-sub-navigation-mobile-position": (_f = this.subNavigationMobilePosition) !== null && _f !== void 0 ? _f : "top", "data-show-sub-navigation": index$1.getBooleanAsString(this.showSubNavigation, "showSubNavigation"), "data-fade-in": index$1.getBooleanAsString(this.fadeIn, "fadeIn"), "data-fonts-loaded": index$1.getBooleanAsString(this.fontsLoaded) }, index.h("slot", { key: '97b4ae8f0a3e718d02c1d79f41c4d0989fd543e4' })));
     }
     get rootElement() { return index.getElement(this); }
 };
 
-exports.db_page = DBPage;
+exports.db_shell = DBShell;

package/dist/cjs/db-stack.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
+var index$1 = require('./index-Df-6pBQf.js');
 
 const DBStack = class {
     constructor(hostRef) {
@@ -85,9 +85,9 @@ const DBStack = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '643002e053cb9d039f2e212c526586503c322ccc', class: index$1.cls("db-stack", this.className), ref: (el) => {
+        return (index.h("div", { key: 'd5710ec1389c92d561eeafa0854415eb458100df', class: index$1.cls("db-stack", 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-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap") }, index.h("slot", { key: 'd38d30e92d276b6c31328ede2a68db8eb62fe05e' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap") }, index.h("slot", { key: '8f82797854c793e312d21c327fc90fd81d7ebed5' })));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-switch.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-spuu3sXz.js');
-var formComponents = require('./form-components-CmQlkARp.js');
+var constants = require('./constants-BM1EltPT.js');
+var index$1 = require('./index-Df-6pBQf.js');
+var formComponents = require('./form-components-XNiwIGq8.js');
 
 const DBSwitch = class {
     constructor(hostRef) {
@@ -228,9 +228,9 @@ const DBSwitch = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: 'f9182aa08b0ac9a58767d5de15bada3b31850b1b', class: index$1.cls("db-switch", this.className), "data-visual-aid": index$1.getBooleanAsString(this.visualAid, "visualAid"), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, index.h("label", { key: '4f27226dbe245461f2fd9bd6913db00a5b207732', htmlFor: this._id }, index.h("input", { key: 'b0995a9fb3246105d0769c32b16342f76e74f40c', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
+        return (index.h("div", { key: '8a2f8bfcc0fa422aa9ac10494134f8e6836b0c71', class: index$1.cls("db-switch", this.className), "data-visual-aid": index$1.getBooleanAsString(this.visualAid, "visualAid"), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, index.h("label", { key: 'cba1ba915a9641372c71d8b6a0988e5b4d76590a', htmlFor: this._id }, index.h("input", { key: '246a9a0b3e0fc8696cfe9c3113d875ff68abf7c6', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
                 this._ref = el;
-            }, checked: index$1.getBoolean(this.checked, "checked"), value: this.value, disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: index$1.getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : null, index.h("slot", { key: 'd03438513412079f745be2671d54e4ddb87c042c' })), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '5f2f82215ffd9119b3f27f5d37c2349cecc28325', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '27278f4285a7aa297d4e985c2710eec5e4bb45ce', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, checked: index$1.getBoolean(this.checked, "checked"), value: this.value, disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: index$1.getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : null, index.h("slot", { key: '9e127dffefe790a2b210d4ce1819ca9fca2ab5b1' })), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '6963789651730d6ccf8fc9788bf5e0f99db51bea', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'a96a877b37a40ece9c320e4668cb7becd60489ef', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/db-tab-item_3.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
+var index$1 = require('./index-Df-6pBQf.js');
 
 const DBTabItem = class {
     constructor(hostRef) {
@@ -154,10 +154,10 @@ const DBTabItem = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index.h("li", { key: '0fdd67479f1a261fc13487237c5707c902aecdd4', class: index$1.cls("db-tab-item", this.className), role: "none" }, index.h("label", { key: 'a6f1a772c57e69b23302aa6eeac4c77ded476805', htmlFor: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": index$1.getBooleanAsString(this.showIconLeading, "showIconLeading") ||
-                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-no-text": index$1.getBooleanAsString(this.noText, "noText") }, index.h("input", { key: 'd24031946a686d3d077900a438c7a12443794a46', type: "radio", role: "tab", disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: index$1.getBoolean(this.checked, "checked"), ref: (el) => {
+        return (index.h("li", { key: '16f878de74d4ae81df0f28dd8ed750cd4f6b652d', class: index$1.cls("db-tab-item", this.className), role: "none" }, index.h("label", { key: '318926defb17d604ae697949101e47a3c4b92c1d', htmlFor: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": index$1.getBooleanAsString(this.showIconLeading, "showIconLeading") ||
+                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-no-text": index$1.getBooleanAsString(this.noText, "noText") }, index.h("input", { key: 'cac5b09e0c5a8120ad9c7b4a35571db2d8b04594', type: "radio", role: "tab", disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: index$1.getBoolean(this.checked, "checked"), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, id: (_d = this.id) !== null && _d !== void 0 ? _d : (_e = this.propOverrides) === null || _e === void 0 ? void 0 : _e.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, index.h("slot", { key: 'bfa4aa307ea4b8ef410f367cfbe8a4578acc377d' }))));
+            }, name: this._name, id: (_d = this.id) !== null && _d !== void 0 ? _d : (_e = this.propOverrides) === null || _e === void 0 ? void 0 : _e.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, index.h("slot", { key: '131748f42adbaca7d3ca8ad5b5bdcaca4b03cefe' }))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -258,9 +258,9 @@ const DBTabList = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '29168c82cf6e0c5838d9afc3c3b475c7b5d513b1', class: index$1.cls("db-tab-list", this.className), ref: (el) => {
+        return (index.h("div", { key: '088b4d100e85699f16b21dce5e3e201293efb188', class: index$1.cls("db-tab-list", 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 }, index.h("ul", { key: 'fee5dc804f98c62e86d56d9c941b103448ad6908', role: "tablist" }, index.h("slot", { key: '694a0a4de4623152cf277138dd96f0558063115f' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("ul", { key: '1ba7bbfab61b97ece95ec84aeaf64a3e7a8f8b62', role: "tablist" }, index.h("slot", { key: '43e8ad342c97ba0f016bb799051dc7d6d0ccc682' }))));
     }
     get rootElement() { return index.getElement(this); }
 };
@@ -350,9 +350,9 @@ const DBTabPanel = class {
     }
     render() {
         var _a, _b;
-        return (index.h("section", { key: 'a49b39a27112785e03a663c4c0ee9571e46d76fa', class: index$1.cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        return (index.h("section", { key: '287373ceb888b5959d43221add298c3d99065471', class: index$1.cls("db-tab-panel", this.className), role: "tabpanel", 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 }, this.content ? this.content : null, index.h("slot", { key: '0c70d6a522b959af728df3fda8c16dd9a5bc6a8f' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, this.content ? this.content : null, index.h("slot", { key: 'a5faccaa006fbbd4d5fb10d6bb1d161a00738fdd' })));
     }
     get rootElement() { return index.getElement(this); }
 };