npm - udp-stencil-component-library - Versions diffs - 26.3.0-beta.2 → 26.3.0-beta.21 - Mend

udp-stencil-component-library 26.3.0-beta.2 → 26.3.0-beta.21

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 (701) hide show

package/dist/collection/components/new-form/form/udp-form-component.js CHANGED Viewed

@@ -93,10 +93,10 @@ export class UdpFormComponent {
         }
     }
     render() {
-        return (h("form", { key: '69ffca913ec791d27500380f261f3bda5d77b467', id: this.formId, noValidate: true, onSubmit: e => {
+        return (h("form", { key: '7aa36000dfbc6b70f9e47a7d5767c134364995db', id: this.formId, noValidate: true, onSubmit: e => {
                 e.preventDefault();
                 void this.form.submit();
-            } }, h("slot", { key: 'f51833b55f933842152e2d33508f1f61dedacc50' })));
+            } }, h("slot", { key: '3a84c27a4b9b0b277cb722c509010d2c886ca52c' })));
     }
     static get is() { return "udp-form-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stepper/udp-stepper-demo.js CHANGED Viewed

@@ -90,7 +90,7 @@ export class UdpStepperDemo {
         };
     }
     render() {
-        return (h("div", { key: '4bc77b122e4215d73e3a88f82f5f148b45178cd6', style: { padding: '2rem' } }, h("unity-typography", { key: '2fc1325a5cb0d51a970a2cda87a0bce8e3bdf3ea', variant: "h2" }, "Horizontal Stepper with Labels bottom"), h("udp-stepper", { key: 'fcdcba572922f45152e94cee068585e82601a65f', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "bottom" }), h("unity-typography", { key: '19b8afb62f2a19eec19311098fd13dbbae7154d7', variant: "h2" }, "Horizontal Stepper without Labels"), h("udp-stepper", { key: '0d718b1af2f56f565277d1c58a8bfe7a4d994de8', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "none", labelPosition: "bottom" }), h("unity-typography", { key: '17d9d73916291e1adce5f1989277d990c621cb35', variant: "h2" }, "Horizontal Stepper with Labels to Right"), h("udp-stepper", { key: '5ab5ced2c38af167c88a38b39e9697dea5a5b587', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "right" }), h("unity-typography", { key: 'd69936b12413a203188f2487edd163994c15d8f0', variant: "h2" }, "Vertical Stepper"), h("udp-stepper", { key: '638eca4367f24612ae0ab2af1bf978d080f2230a', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "vertical", labelDisplay: "all", labelPosition: "right" })));
+        return (h("div", { key: 'eceed53125c8933fa8523208dcfcae23869f5f6c', style: { padding: '2rem' } }, h("unity-typography", { key: '136e04780a9964e136e6334fbcb815ab43491b64', variant: "h2" }, "Horizontal Stepper with Labels bottom"), h("udp-stepper", { key: 'cec70e5ff7db935d01db1e22db141ab3ea08159e', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "bottom" }), h("unity-typography", { key: 'c2912a81981d1c53b9d4de59c2ee26f2b21ed833', variant: "h2" }, "Horizontal Stepper without Labels"), h("udp-stepper", { key: '1258d7f1c617e2805a63521d00a9b752dfb5bf79', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "none", labelPosition: "bottom" }), h("unity-typography", { key: 'a564bc605c7a74981b64e2938da24c7ba65762d2', variant: "h2" }, "Horizontal Stepper with Labels to Right"), h("udp-stepper", { key: '4689fbba1de58f5b3c565483c37ebf05fbb09a95', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "right" }), h("unity-typography", { key: 'b9cf04b44a489ec5ecee1503c560bc7781b8c044', variant: "h2" }, "Vertical Stepper"), h("udp-stepper", { key: '719b1d19d3c2759701b065f7ef97ed323620ff7e', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "vertical", labelDisplay: "all", labelPosition: "right" })));
     }
     static get is() { return "udp-stepper-demo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tab/tabs/udp-tabs.js CHANGED Viewed

@@ -204,7 +204,7 @@ export class UdpTabs {
     }
     render() {
         const currentActiveTab = this.activeTab; // Use getter
-        return (h("div", { key: 'df21c243de60c14f45558ccae50480eaa4cd8bb7', class: "tab-container" }, h("div", { key: 'ea937d700c5c60026bb7782e718c717f5d64bed6', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: '3e6df1c7ad7f9e56506793d2f1677fdb3f16f3cf', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: 'b42700d6add6b079417b254ab18e75c51a09d00f', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: 'cfdb8c9639dca0a6d5453097900758cd0d2fffe0', class: "scroll-fade left" }), h("div", { key: 'ad6a860db4b74383cdf5e2eec2fbd2dbd73eda51', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index) => {
+        return (h("div", { key: '29b0423ac240ba56f7f9942ba9f1341e19084b59', class: "tab-container" }, h("div", { key: '593122dad4d70a2b89963419f653aa022d256602', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: '814e5f8e29491e2e0c18ab48766c7366d949d507', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: '83c59c7d10f5b986ec7451b7341c289fccb99ff6', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: 'a3f1636b808842a4f8d2cf5af85bb9c617558868', class: "scroll-fade left" }), h("div", { key: '6c7ec90c21402fdb4ad0e5878a813e1255de34f8', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index) => {
             if (tab.hidden) {
                 return null;
             }
@@ -218,7 +218,7 @@ export class UdpTabs {
                     [`icon-${tab.iconPlacement}`]: !!tab.icon,
                     'disabled': tab.disabled,
                 }, disabled: tab.disabled, onClick: () => this.tabClicked(index), role: "tab", "aria-selected": index === currentActiveTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index] = el) }, iconEl, labelEl));
-        }), h("div", { key: 'da7a7d703e4d727c809a094f0be21861682295e8', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: '72306b3afe78506147ffd8d34d62ce97ce6640eb', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '931a3ed42216f077cef73866abdf59eb7bb54b01', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: '952b579182dfae443a06d6bc8cc14c73ec039e4d', iconName: "chevronRight16", color: "inherit" })))), !this.isControlled && !this.useTabsProp && (h("div", { key: 'd90c6893772a451666dd7962b77b18e1a5b36296' }, h("slot", { key: '2f7b4c59a97796a40c898fdcffc93d185777369e' })))));
+        }), h("div", { key: '3269205055ead814dbff78d2a18eb7e1fad6fabf', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: '6c560b17fa23f771324a17dd459e53aec82f71fa', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '9aa89b9a9358452928d2dbca5dc4d084e21f3d8e', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: '4980fb079c41a56a873afc88cc7fd9f4f411f64c', iconName: "chevronRight16", color: "inherit" })))), !this.isControlled && !this.useTabsProp && (h("div", { key: '1e72007ccc47ac1c06765cabe9eb8e47d82087fa' }, h("slot", { key: '9dafd14a5bff09c982f56f51f623d616f8ae300b' })))));
     }
     static get is() { return "udp-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tab/udp-tab.js CHANGED Viewed

@@ -23,7 +23,7 @@ export class UdpTab {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: 'eac6b3b89030eb70bcd9f9b1716edecebe53818a', class: { 'tab-panel': true, 'active': this.active }, role: "tabpanel" }, h("slot", { key: 'b39be7b7f52a015d88a108cf0bd6fa3ee0b3e9df' })));
+        return (h("div", { key: '29fc3f55112bd9c12a148f99bb17ac9e2a8f5c9d', class: { 'tab-panel': true, 'active': this.active }, role: "tabpanel" }, h("slot", { key: '79a4524128508ebf0ce027d66d44af3ae5812c75' })));
     }
     static get is() { return "udp-tab"; }
     static get originalStyleUrls() {

package/dist/collection/components/tabs/udp-tab-panel/udp-tab-panel.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 export class UdpTabPanel {
     render() {
         const isActive = this.activeTabId === this.id;
-        return (h(Host, { key: 'cf56739c139547adc2177ba689af14576b83f288', role: "tabpanel", "aria-labelledby": this.id, "aria-hidden": !isActive ? 'true' : 'false', hidden: !isActive }, h("slot", { key: '3d9370e3a2083a987212519284a8c57240c39986' })));
+        return (h(Host, { key: '067b209fb2c85ef835fb236e1964f019e0c1266d', role: "tabpanel", "aria-labelledby": this.id, "aria-hidden": !isActive ? 'true' : 'false', hidden: !isActive }, h("slot", { key: 'a3c13914b547903978700e6304f68fa406190e3d' })));
     }
     static get is() { return "udp-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/timeline/udp-timeline-connector.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class UdpTimelineConnector {
     render() {
-        return h("div", { key: 'd78821058bd430314a3b63c420e95c41d2241bd4', class: "connector" });
+        return h("div", { key: '2f60f4aa711fe5bad47dcc74e067f67a42a027d2', class: "connector" });
     }
     static get is() { return "udp-timeline-connector"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/timeline/udp-timeline-dot.js CHANGED Viewed

@@ -32,7 +32,7 @@ export class UdpTimelineDot {
             '--udp-timeline-dot-bg': this.color,
             '--udp-timeline-dot-outline-color': this.color,
         } : {};
-        return (h("div", { key: '7790388cc7563b29c84c007b8b1efc578fa27e70', class: classes, style: styles }, h("slot", { key: '91a9e2d6f7503261b60d8a5c9ceba35ae9617d2d' })));
+        return (h("div", { key: '2e363445c59d5d60eee4ed25cbd5e0fa320e252e', class: classes, style: styles }, h("slot", { key: 'ae65d63769b6ffb1f447d613e499421b899041f4' })));
     }
     static get is() { return "udp-timeline-dot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/timeline/udp-timeline-item.js CHANGED Viewed

@@ -58,12 +58,12 @@ export class UdpTimelineItem {
         var _a;
         const visibleActions = this.actions.slice(0, 4);
         const menuActions = this.actions.slice(4);
-        return (h(Host, { key: '836ba5542410ce314a6250f2cff8140aab4c62da', class: {
+        return (h(Host, { key: 'f38eeb9176359f5980133a1cdf923261c5fd92b5', class: {
                 'has-title': this.hasTitle,
                 'has-caption': this.hasCaption,
                 [`dot-shape-${this.dotShape}`]: true,
                 'clickable': this.clickable,
-            }, onClick: this.handleClick }, h("div", { key: 'b77a43d716355fc41040d057ee4a0936e9126914', class: "udp-timeline-item" }, h("div", { key: '705feed17af0354815eb1ef0a7fa55c50e5bbf7e', class: "separator-column" }, h("slot", { key: '010dd1de981373f449b9e18322465b36e48beec6', name: "separator" })), h("div", { key: '43bb689ac814efd76d8cffc7e64554b7d77b6192', class: "content-column" }, h("div", { key: '58177b734a663da280d65f41eccf305f05d1e4e8', class: "first-row" }, h("div", { key: 'b0c7ce178d3728e782e5b0517dae53cdfcbcaf8c', class: "title-slot" }, h("slot", { key: '7d2fba46f291a8b8fc127042382f080e299817ee', name: "title" })), ((_a = this.statusLabel) === null || _a === void 0 ? void 0 : _a.trim()) != '' && (h("udp-chip", { key: 'd2fa90ee1d2c8a0c7c6ef59268b3c179a7cfcb0a', label: this.statusLabel, color: this.statusColor, size: "small" }))), h("div", { key: '21df08c69df307dde8c16e042743ca9a947c81f9', class: "content-slot" }, h("slot", { key: '66107bb3130b93f28b5911a34287e5767a343f62', name: "content" })), h("div", { key: 'fbf58d68051e0dae87d91f57da8b588a73fce5ee', class: "caption-slot" }, h("slot", { key: 'd56d18c8679b6440c74eaea01f1d59102a55a845', name: "caption" })), this.actions.length > 0 && (h("div", { key: '1df6f4019e13651ef4ac118bd34ec1ab3a0331df', class: "actions-container" }, visibleActions.map(action => (h("button", { onClick: action.onClick }, action.label))), menuActions.length > 0 && h("button", { key: '93565beb06344f3b9c459db84cc5984c7ccef466' }, "...")))))));
+            }, onClick: this.handleClick }, h("div", { key: 'd55ea4582bad05f305ad029a7f783ccd4b2bdbbf', class: "udp-timeline-item" }, h("div", { key: '76ed8d242953effab5167d0b3713bc35f25bd938', class: "separator-column" }, h("slot", { key: 'e6fa4fd3e874e56b49de07dfa8df7e9dc4784ba4', name: "separator" })), h("div", { key: '7cc95965c334c0f4ed8caac1160df8ae35680761', class: "content-column" }, h("div", { key: '828d4d5f70792d24ca3d7ac7c0ed880419d76a57', class: "first-row" }, h("div", { key: 'ff82d6e08ccba60e8d304de0d6c203924a8ac3ed', class: "title-slot" }, h("slot", { key: '295bec923360837de4c15cdd80d4ad9ba880eb63', name: "title" })), ((_a = this.statusLabel) === null || _a === void 0 ? void 0 : _a.trim()) != '' && (h("udp-chip", { key: '98becb62444dc2a78d42f20050e7b37cb7ea9f73', label: this.statusLabel, color: this.statusColor, size: "small" }))), h("div", { key: 'f912adda86a8e5593a73377d692cc3dd0925ec45', class: "content-slot" }, h("slot", { key: 'cdef4e4a7e7e8727d3b18fab5398c7a9bde1874d', name: "content" })), h("div", { key: '7de7bd160542df24add6183e26a8f5aa35e2af71', class: "caption-slot" }, h("slot", { key: 'ccdc54b3b6fcd42bf60a5760bd0a9777422d2721', name: "caption" })), this.actions.length > 0 && (h("div", { key: '2325e9ce67c02368fc399493e64995d9892ef909', class: "actions-container" }, visibleActions.map(action => (h("button", { onClick: action.onClick }, action.label))), menuActions.length > 0 && h("button", { key: 'b83aa3705ab5d137a5cd43203029135321059962' }, "...")))))));
     }
     static get is() { return "udp-timeline-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/timeline/udp-timeline-separator.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class UdpTimelineSeparator {
     render() {
-        return (h("div", { key: 'd847678843bd481693ef2e53d68f20507156a75b', class: "udp-timeline-separator" }, h("slot", { key: 'd93d96690af195fabfc92958f7ad5e142b7ee6f9' })));
+        return (h("div", { key: 'a5ec398477306459a2dd8e9a7903da7983fe15cb', class: "udp-timeline-separator" }, h("slot", { key: '3b696599cf5db98ddaa1bbaa3606a5f4af82a915' })));
     }
     static get is() { return "udp-timeline-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/timeline/udp-timeline.js CHANGED Viewed

@@ -5,7 +5,7 @@ export class UdpTimeline {
         this.align = 'left';
     }
     render() {
-        return (h(Host, { key: '86a7bc8219b75e4053f4fab1fe7fa96a1eb69706', class: { [`align-${this.align}`]: true } }, h("div", { key: '014e30b71a3081bf4d714d64cf4c1f9189f3fe22', class: "udp-timeline-root" }, h("slot", { key: '82baf333fadb66915848b8ce5de3734698185132' }))));
+        return (h(Host, { key: '0b4398e93df39822b64f330622a1d9a7c67c45ab', class: { [`align-${this.align}`]: true } }, h("div", { key: '1b435ab808a109d0c9560ff1c2471586bd96682a', class: "udp-timeline-root" }, h("slot", { key: 'f4e17f94bb3e4ca097ca180a3618fda8a07b7dfd' }))));
     }
     static get is() { return "udp-timeline"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbars/app-bar/app-bar.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import Menu24 from "@carbon/icons/es/menu/24";
 export class AppBar {
     render() {
-        return (h("div", { key: '9bcc2c7a5a7cb8be3eea5d95050ad386b1b35ca5', class: "header" }, h("stencil-icon-button", { key: 'aaeb7a200179d17184f5b32d52b4f868979b5a51', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: 'e5401a155f5fbc0d29e76c86cc4a6c18ccfcd3e0', variant: 'data-display-one' }, " ", h("slot", { key: '92cb58bf864da4f744450162a3e5268f9d729e32' }), "   "), h("a", { key: 'b257f74cc94ef64ac5f234b38725e64ab3fc61d4', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: '09a5fece35f9ef80f19a900d302ab3d798e3426a', class: "header__logo" }), h("div", { key: '7264a7768329641ee1b7c0455d665e2b4bba95c9', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: 'be87500c4abbf1a30b05332f8257cd7f82c776d9', class: "header__global" }, h("udp-avatar", { key: 'fb84be04941a7889650158f025482d496f8aa2f0', username: this.username }))));
+        return (h("div", { key: '9140883a286a1ed933d5f6e1b25bc51c6bbb75dd', class: "header" }, h("stencil-icon-button", { key: 'f878f0b14401cc91316798a1dffdccc79fa7371a', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: '3741c5755ac3d1b9545e52a1040f2e3a73307fa3', variant: 'data-display-one' }, " ", h("slot", { key: '7c3304b3a6c0b5b1c87afbacf43dc139125c3e26' }), "   "), h("a", { key: 'c4068f92ddfc72e3d05a782c04bd663304a21834', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: '2efe80f6ff2cbceb1c34b48f5d96a042da04d94c', class: "header__logo" }), h("div", { key: '555e9c50365d972eab6cc95c1c5891e4090e7af6', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: 'e754a4c11b9892560058bb7d0477bcba306dd220', class: "header__global" }, h("udp-avatar", { key: '7b5211ecd648129215568d6203597907b5ca9d30', username: this.username }))));
     }
     static get is() { return "app-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/util/ghost-render/ghost-render.js CHANGED Viewed

@@ -70,7 +70,7 @@ export class GhostRender {
         // The <slot /> is necessary to prevent the Stencil compiler from
         // overly optimizing this component's output and aliasing the
         // defineCustomElement export, which breaks downstream wrappers.
-        return (h(Host, { key: 'c72866559dd6aad32d4f453634b047364bc49e91' }, h("slot", { key: '9549af952adb5fb4539901f8a9be68f59618b4ec' })));
+        return (h(Host, { key: 'bec0fa4741a39ce0d804f3f98ce8c211138028d3' }, h("slot", { key: 'f6934523537cde4b6ebc2fe0f8af1a83c3cab2d8' })));
     }
     static get is() { return "ghost-render"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/util/lazy-loader/udp-lazy-loader.js CHANGED Viewed

@@ -37,7 +37,7 @@ export class UdpLazyLoader {
         }
     }
     render() {
-        return h(Host, { key: '51c2ecd5c4207d5a4943fb9d8384bcdbe6236e3f' }, this.shouldRender && this.content ? this.content() : null);
+        return h(Host, { key: 'd93d224698a89a86e2ab1778bdabe82925428f2b' }, this.shouldRender && this.content ? this.content() : null);
     }
     static get is() { return "udp-lazy-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/deprecated/components/side-sheet/side-sheet-container.js CHANGED Viewed

@@ -5,7 +5,7 @@ export class SideSheetContainer {
     }
     render() {
         const style = this.padding ? { 'padding': '16px' } : {};
-        return (h("div", { key: '8fa266713099318622dca4fb50c2bf80e3835ffa', class: "container", style: style }, h("slot", { key: '65d410950513e577e8264c68ebec1ff905c26035' })));
+        return (h("div", { key: '0fd652935bed287b128cf31e97472dccb7e969f1', class: "container", style: style }, h("slot", { key: 'cdf8b0f52fc827de12638da760b8afc01bcdb53e' })));
     }
     static get is() { return "side-sheet-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/deprecated/components/side-sheet/side-sheet.js CHANGED Viewed

@@ -15,7 +15,7 @@ export class SideSheet {
     render() {
         const widthClass = typeof this.widthOption === 'number' ? 'custom-width' : this.widthOption;
         const sideSheetStyle = typeof this.widthOption === 'number' ? { width: `${this.widthOption}px` } : {};
-        return (h("div", { key: 'b13cfa6681c6b42af5b2995dd78aef8487b0d6cb' }, h("div", { key: '91131216a2648317a9a54da753cfd47799d90ad1', class: { 'backdrop': true, 'open': this.open }, onClick: this.toggleDrawer }), h("div", { key: '0dead72aba605cfbdeacc27482fbedb1546b8301', class: { 'side-sheet': true, 'open': this.open, 'close': !this.open, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: '33cbcbf754bb04cede54766c3828df554522aec9', class: "title" }, h("div", { key: 'cc9237b36d9641f8192493a1dc374d816735abf9', class: 'close-button' }, h("stencil-icon-button", { key: '77d81a62ac42c6920005d3e8c387a816467da831', icon: Close24, onClick: this.toggleDrawer })), h("div", { key: '4871c4ea7db59336b50b4b1463d125cd5392820a', class: 'title' }, h("unity-typography", { key: '4ba8f30144651e7bdf1bb50ae4ab2d41bf827769', variant: "data-display-four" }, this.title)), this.sideSheetButtonLabel && h("custom-button", { key: '812917af309cf9235ec9ffc7f9776842c8f601c5', style: { transform: this.buttonTransform, }, size: 'tall', disabled: this.disabled, onCustomClick: () => this.handleSideSheetButton() }, this.sideSheetButtonLabel)), h("side-sheet-container", { key: '9e02ddad5f427c42282311683bd5b19bae0c7704', padding: this.padding }, h("slot", { key: '04c5e62a981e903b23d0f907a550d70c62faca9c' })))));
+        return (h("div", { key: '646cc424321b1d68fbe6a2f7ce8f8173480aa327' }, h("div", { key: 'cdf8f21c73bf0958399811980e1990d45bd865f4', class: { 'backdrop': true, 'open': this.open }, onClick: this.toggleDrawer }), h("div", { key: 'bdf7060b5dbbad6b4dd60dd66d0b66070f041273', class: { 'side-sheet': true, 'open': this.open, 'close': !this.open, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: 'd945866e0f4a0e21874c847b911a604b005e83d6', class: "title" }, h("div", { key: '6e570430d9142d08a1d7e45dbdb7452d5c497470', class: 'close-button' }, h("stencil-icon-button", { key: '9cdcb173805d5bd017d40c1bccc093c8991e7e8d', icon: Close24, onClick: this.toggleDrawer })), h("div", { key: '8a10792c8579567f8cdb84f94a1397aae1cfd593', class: 'title' }, h("unity-typography", { key: '581519cc576e97d9ec39d0053059413e94aec664', variant: "data-display-four" }, this.title)), this.sideSheetButtonLabel && h("custom-button", { key: '027c96b0066b18e3a84cc10b1b81b5073547b4fd', style: { transform: this.buttonTransform, }, size: 'tall', disabled: this.disabled, onCustomClick: () => this.handleSideSheetButton() }, this.sideSheetButtonLabel)), h("side-sheet-container", { key: '728e798d19f72af9bb2ea772906912613ace9675', padding: this.padding }, h("slot", { key: '5151a016be627713513f1b5361512c1f9f14149f' })))));
     }
     static get is() { return "side-sheet"; }
     static get originalStyleUrls() {