@getflip/swirl-components 0.339.0 → 0.340.1

package/dist/collection/components/swirl-modal/swirl-modal.js

@@ -13,6 +13,25 @@ import * as focusTrap from "focus-trap";
  */
 export class SwirlModal {
     constructor() {
+        this.closable = true;
+        this.closeButtonLabel = "Close modal";
+        this.fullscreenEnableButtonLabel = "Full screen";
+        this.fullscreenDisableButtonLabel = "Exit full screen";
+        this.padded = true;
+        this.variant = "default";
+        this.sidebarPadded = true;
+        this.sidebarFooterPadded = true;
+        this.sidebarCloseButtonLabel = "Close sidebar";
+        this.isOpen = false;
+        this.isFullscreen = false;
+        this.isFullscreenTransitioning = false;
+        this.closing = false;
+        this.scrollable = false;
+        this.scrolled = false;
+        this.scrolledDown = false;
+        this.sidebarScrolled = false;
+        this.sidebarScrolledDown = false;
+        this.sidebarScrollable = false;
         this.onKeyDown = (event) => {
             if (event.code === "Escape") {
                 event.stopImmediatePropagation();
@@ -72,56 +91,6 @@ export class SwirlModal {
                 this.sidebarScrollable = scrollable;
             }
         };
-        this.closable = true;
-        this.closeButtonLabel = "Close modal";
-        this.fullscreenEnableButtonLabel = "Full screen";
-        this.fullscreenDisableButtonLabel = "Exit full screen";
-        this.height = undefined;
-        this.hideCloseButton = undefined;
-        this.hideLabel = undefined;
-        this.label = undefined;
-        this.maxHeight = undefined;
-        this.minHeight = undefined;
-        this.maxWidth = undefined;
-        this.padded = true;
-        this.primaryActionLabel = undefined;
-        this.secondaryActionLabel = undefined;
-        this.variant = "default";
-        this.contentGap = undefined;
-        this.hideSecondaryContent = undefined;
-        this.primaryContentMaxWidth = undefined;
-        this.secondaryContentMaxWidth = undefined;
-        this.primaryContentFlex = undefined;
-        this.secondaryContentFlex = undefined;
-        this.hideSecondaryContentBorders = undefined;
-        this.secondaryContentPadding = undefined;
-        this.secondaryContentPaddingBlockEnd = undefined;
-        this.secondaryContentPaddingBlockStart = undefined;
-        this.secondaryContentPaddingInlineEnd = undefined;
-        this.secondaryContentPaddingInlineStart = undefined;
-        this.showFullscreenButton = undefined;
-        this.sidebarLabel = undefined;
-        this.sidebarPadded = true;
-        this.sidebarFooterPadded = true;
-        this.hideSidebarContent = undefined;
-        this.hasSidebarCloseButton = undefined;
-        this.sidebarCloseButtonLabel = "Close sidebar";
-        this.isOpen = false;
-        this.isFullscreen = false;
-        this.isFullscreenTransitioning = false;
-        this.closing = false;
-        this.hasCustomHeader = undefined;
-        this.hasCustomFooter = undefined;
-        this.hasHeaderTools = undefined;
-        this.hasSecondaryContent = undefined;
-        this.scrollable = false;
-        this.scrolled = false;
-        this.scrolledDown = false;
-        this.hasSidebarContent = undefined;
-        this.hasSidebarFooter = undefined;
-        this.sidebarScrolled = false;
-        this.sidebarScrolledDown = false;
-        this.sidebarScrollable = false;
     }
     componentDidLoad() {
         this.focusTrap = focusTrap.createFocusTrap(this.modalEl, {
@@ -256,29 +225,29 @@ export class SwirlModal {
             "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
             "modal--sidebar-scrollable": this.sidebarScrollable,
         });
-        return (h(Host, { key: '0a59eba861d5f7af91bbe686ef1d2479692dcff0' }, h("section", { key: '83461ad5b19cccf7641bd09a8febe400ce77e9e4', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: '18704e2726f5d042ad323a840ec3573af0209b35', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'de27c3fca3869ac480bca16526d1df669345e133', class: "modal__body", style: !this.isFullscreen
+        return (h(Host, { key: 'c82bd24e5de6cb12dd85b207a2a4cb7b5976872b' }, h("section", { key: '8d380c32de1a1721c7343fa705416c846d415384', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: '74389c724c2fc3dbbf64e9acf266c311e98be466', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'cd1d3b82a0de6914dd11765901f891ffc6779688', class: "modal__body", style: !this.isFullscreen
                 ? {
                     "--swirl-modal-max-height": this.maxHeight,
                     "--swirl-modal-height": this.height,
                     minHeight: this.minHeight,
                     maxWidth: this.maxWidth,
                 }
-                : {} }, h("aside", { key: 'fe113c16dc3c9c84d33b01ff45a87d6c5d114aa8', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '8d8b23a54c408172f7869d4f785c1d5f7dd0b782', class: classnames("modal__sidebar-header", {
+                : {} }, h("aside", { key: '6ba43b9903fc20b97c384cbb339d6ccf88bb9544', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '0dc8eec524121375cc9c78c5866cf8642a0a5339', class: classnames("modal__sidebar-header", {
                 "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
-            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '9cbab3d64d3673d035776bc46a8d91bbbfdb2a0f', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '91019a6bbd5744afc3372eef4943aff3763a0389', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'c857ae76550b0f1308cbbb97efe8588613d699d4', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '1537bee461ebe073751160091af42b588f1667cd', name: "sidebar-content" })), h("div", { key: '1848ed2ac120d83e9b3786b8871fa3af98ef7534', class: "modal__sidebar-footer" }, h("slot", { key: '88924ec194e2045696865b1297115eebb7df5cac', name: "sidebar-footer" }))), h("div", { key: 'db23a81cac33f085f3b86306e058d7ca3136cd7f', class: "modal__main-content" }, h("header", { key: '3d6dcf58695a9021add933aa607dde6c2957e81a', class: "modal__custom-header" }, h("slot", { key: '0c17547f63f3e42719dfa346a7f12ecbd2d50beb', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '6cc9c6241938879b572b72ff1596a06bf600bd03', class: "modal__header" }, h("div", { key: '8d4f6e649a0e7915fd2b946c0c5375146687548b', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '574e5ca9b8c855b2987e1fed5eb417e8d6dfaf9c', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: 'ed06f016a6fbffaaa97a73a66bf8b81b70610413', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '66061ab0f8e8bf7bf44ffea221584f2bb30e090d', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'df228a3e86bddbeade95c73bad1fe523aa3c30e1', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: 'be16658b4ecbc40c97b8a1f1d7b6ec67c9c13828', name: "sidebar-content" })), h("div", { key: '5fdedc18e02db89897473843c7aa40e0719e128d', class: "modal__sidebar-footer" }, h("slot", { key: '116e70c57e40e8f20e9380af357830d31592fd74', name: "sidebar-footer" }))), h("div", { key: 'b219e652242ebd7e9b782e1282079a1d08674573', class: "modal__main-content" }, h("header", { key: 'e5e07dce0daead5e23f2a719a5f41f373b559008', class: "modal__custom-header" }, h("slot", { key: '93f56acb67aebd593806a8f67d2d184bb243f2ec', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '6c940113e4e1535ac2b479f509f4552b8ccd288a', class: "modal__header" }, h("div", { key: 'e4d0b9584cffab4aa97726a5a0ce6a52e8749024', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '19dcddfcbd1488a4255bc36d5e48d7aa87b37810', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
                 ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'a55cf49196ac11b0b9b074b2ff4efffc46c689bf', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
+                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'f4193147bda2699e854b19016a81f46be67af807', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
                 ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
                 : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
                 ? this.fullscreenDisableButtonLabel
-                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '5a90dcf113b810a7a78876f8da6b752aeddf0834', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '81ddff0b1a512c7b8a7f57b52fab4d12ba2d6fa8', class: "modal__content-container", style: {
+                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '3456ba73064e116782fc2d379a07fcb7e548b559', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '930969de9c366d5c3b7a6ad41207c5e8b156a512', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, h("div", { key: 'e7958595ea46433b2ed54308ec4bee28100fc941', class: "modal__primary-content", style: {
+            } }, h("div", { key: '709500b83b513e4668921e7187a34aed059d67cb', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, h("div", { key: 'ed03bb2611cdc596e2fbcab1eebc550df25c6445', class: "modal__header-tools" }, h("slot", { key: '10364a544af98434e359fb01771b0e813282f755', name: "header-tools" })), h("div", { key: 'a654394e1e3b3bd9fcec28e099119ae33c93b9fd', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '1391bb9a51311df273221eff2f0b057f338130bb' }))), h("div", { key: 'ed03ff6ce971f504e7b179e90fdfc71aabd62a45', class: "modal__secondary-content", style: {
+            } }, h("div", { key: 'c8c62935631f3ac6f6cdefc4fbff82737b535caf', class: "modal__header-tools" }, h("slot", { key: 'df88048fb9956987d3950616dcad6c4a8df81e27', name: "header-tools" })), h("div", { key: 'fb44494135b40274f22bf5a13cbc6981c5c5d08c', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'b9668bd1510b36ec0323d320db94e3d574c3d487' }))), h("div", { key: 'b8061c98f1093c9ea51e12e7aa90969c89827d3f', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -296,7 +265,7 @@ export class SwirlModal {
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, h("slot", { key: '73be1d825e7395254ae68068c15e06e6e59794bd', name: "secondary-content" }))), h("div", { key: 'f29bb84ba3f488e43595b587f1c24296ca808069', class: "modal__custom-footer" }, h("slot", { key: '77453da2b7d5918fcade82c0dcad30280310a009', name: "custom-footer" })), showControls && (h("footer", { key: '6732f3c5ebc6e11ad49ca80af2702ec025989391', class: "modal__controls" }, h("swirl-button-group", { key: 'b0778f3a461cdc85e30859e27a90baf836c9e2d7', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '02f1a653685dc4e026ab8f73ba07ea556d2b3061', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '79e87b3661c02df3fe1008deed737af6e7b39e58', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
+            } }, h("slot", { key: 'fd8b40685e996b00612861fdfd685aac799234e6', name: "secondary-content" }))), h("div", { key: 'd3e7fdaa221558abe30ab7dbdec90f3ebfe32103', class: "modal__custom-footer" }, h("slot", { key: '9e691351090de8e834973565e01382750e9f48c2', name: "custom-footer" })), showControls && (h("footer", { key: '79ec849bd85830c012ba1762e7fc8d18bf15b2c0', class: "modal__controls" }, h("swirl-button-group", { key: '1ffa600e094bb0647619ba1f4204f2059ced15de', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '5c4c0634686922d4adc96242808bb685ae35da7d', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'b6310f56ca29ba9c2bf94957d676fddffaeeb65d', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
     }
     static get is() { return "swirl-modal"; }
     static get originalStyleUrls() {
@@ -313,6 +282,7 @@ export class SwirlModal {
         return {
             "closable": {
                 "type": "boolean",
+                "attribute": "closable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -325,12 +295,14 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "closable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "closeButtonLabel": {
                 "type": "string",
+                "attribute": "close-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -343,12 +315,14 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "close-button-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Close modal\""
             },
             "fullscreenEnableButtonLabel": {
                 "type": "string",
+                "attribute": "fullscreen-enable-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -361,12 +335,14 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "fullscreen-enable-button-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Full screen\""
             },
             "fullscreenDisableButtonLabel": {
                 "type": "string",
+                "attribute": "fullscreen-disable-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -379,12 +355,14 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "fullscreen-disable-button-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Exit full screen\""
             },
             "height": {
                 "type": "string",
+                "attribute": "height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -397,11 +375,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "height",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "hideCloseButton": {
                 "type": "boolean",
+                "attribute": "hide-close-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -414,11 +394,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "hide-close-button",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "hideLabel": {
                 "type": "boolean",
+                "attribute": "hide-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -431,11 +413,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "hide-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -448,11 +432,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "maxHeight": {
                 "type": "string",
+                "attribute": "max-height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -465,11 +451,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-height",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "minHeight": {
                 "type": "string",
+                "attribute": "min-height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -482,11 +470,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "min-height",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "maxWidth": {
                 "type": "string",
+                "attribute": "max-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -499,11 +489,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "padded": {
                 "type": "boolean",
+                "attribute": "padded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -516,12 +508,14 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "padded",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "primaryActionLabel": {
                 "type": "string",
+                "attribute": "primary-action-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -534,11 +528,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "primary-action-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "secondaryActionLabel": {
                 "type": "string",
+                "attribute": "secondary-action-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -551,11 +547,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-action-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlModalVariant",
@@ -574,12 +572,14 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "contentGap": {
                 "type": "string",
+                "attribute": "content-gap",
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlModalSpacing",
@@ -598,11 +598,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "content-gap",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "hideSecondaryContent": {
                 "type": "boolean",
+                "attribute": "hide-secondary-content",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -615,11 +617,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "hide-secondary-content",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "primaryContentMaxWidth": {
                 "type": "string",
+                "attribute": "primary-content-max-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -632,11 +636,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "primary-content-max-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "secondaryContentMaxWidth": {
                 "type": "string",
+                "attribute": "secondary-content-max-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -649,11 +655,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-content-max-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "primaryContentFlex": {
                 "type": "string",
+                "attribute": "primary-content-flex",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -666,11 +674,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "primary-content-flex",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "secondaryContentFlex": {
                 "type": "string",
+                "attribute": "secondary-content-flex",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -683,11 +693,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-content-flex",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "hideSecondaryContentBorders": {
                 "type": "boolean",
+                "attribute": "hide-secondary-content-borders",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -700,11 +712,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "hide-secondary-content-borders",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "secondaryContentPadding": {
                 "type": "string",
+                "attribute": "secondary-content-padding",
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlModalSpacing",
@@ -723,11 +737,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-content-padding",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "secondaryContentPaddingBlockEnd": {
                 "type": "string",
+                "attribute": "secondary-content-padding-block-end",
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlModalSpacing",
@@ -746,11 +762,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-content-padding-block-end",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "secondaryContentPaddingBlockStart": {
                 "type": "string",
+                "attribute": "secondary-content-padding-block-start",
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlModalSpacing",
@@ -769,11 +787,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-content-padding-block-start",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "secondaryContentPaddingInlineEnd": {
                 "type": "string",
+                "attribute": "secondary-content-padding-inline-end",
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlModalSpacing",
@@ -792,11 +812,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-content-padding-inline-end",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "secondaryContentPaddingInlineStart": {
                 "type": "string",
+                "attribute": "secondary-content-padding-inline-start",
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlModalSpacing",
@@ -815,11 +837,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-content-padding-inline-start",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "showFullscreenButton": {
                 "type": "boolean",
+                "attribute": "show-fullscreen-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -832,11 +856,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "show-fullscreen-button",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "sidebarLabel": {
                 "type": "string",
+                "attribute": "sidebar-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -849,11 +875,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "sidebar-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "sidebarPadded": {
                 "type": "boolean",
+                "attribute": "sidebar-padded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -866,12 +894,14 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "sidebar-padded",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "sidebarFooterPadded": {
                 "type": "boolean",
+                "attribute": "sidebar-footer-padded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -884,13 +914,15 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "sidebar-footer-padded",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "hideSidebarContent": {
                 "type": "boolean",
-                "mutable": false,
+                "attribute": "hide-sidebar-content",
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -902,11 +934,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "hide-sidebar-content",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "hasSidebarCloseButton": {
                 "type": "boolean",
+                "attribute": "has-sidebar-close-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -919,11 +953,13 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "has-sidebar-close-button",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "sidebarCloseButtonLabel": {
                 "type": "string",
+                "attribute": "sidebar-close-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -936,7 +972,8 @@ export class SwirlModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "sidebar-close-button-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Close sidebar\""
             }