@getflip/swirl-components 0.441.0 → 0.442.0
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.
- package/components.json +32 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-modal.cjs.entry.js +23 -8
- package/dist/collection/components/swirl-modal/swirl-modal.js +47 -8
- package/dist/collection/components/swirl-modal/swirl-modal.stories.js +6 -0
- package/dist/components/swirl-modal.js +24 -8
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-modal.entry.js +23 -8
- package/dist/swirl-components/p-f6e7c45b.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-modal/swirl-modal.d.ts +2 -0
- package/dist/types/components/swirl-modal/swirl-modal.stories.d.ts +6 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- package/vscode-data.json +4 -0
- package/dist/swirl-components/p-4bd7d553.entry.js +0 -1
|
@@ -164,6 +164,9 @@ export class SwirlModal {
|
|
|
164
164
|
setTimeout(() => {
|
|
165
165
|
this.mutationObserver?.disconnect();
|
|
166
166
|
this.modalEl.close();
|
|
167
|
+
if (this.returnFocusTo) {
|
|
168
|
+
this.customFocusReturn();
|
|
169
|
+
}
|
|
167
170
|
}, 150);
|
|
168
171
|
}
|
|
169
172
|
async setFullscreen(isFullscreen) {
|
|
@@ -230,6 +233,18 @@ export class SwirlModal {
|
|
|
230
233
|
setDialogCustomProps() {
|
|
231
234
|
this.modalEl.setAttribute("closedby", "none");
|
|
232
235
|
}
|
|
236
|
+
customFocusReturn() {
|
|
237
|
+
const element = typeof this.returnFocusTo === "string"
|
|
238
|
+
? document.querySelector(this.returnFocusTo)
|
|
239
|
+
: this.returnFocusTo;
|
|
240
|
+
const focusableElements = tabbable(element, {
|
|
241
|
+
includeContainer: true,
|
|
242
|
+
getShadowRoot: true,
|
|
243
|
+
});
|
|
244
|
+
if (focusableElements.length > 0) {
|
|
245
|
+
focusableElements[0].focus();
|
|
246
|
+
}
|
|
247
|
+
}
|
|
233
248
|
render() {
|
|
234
249
|
const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
|
|
235
250
|
const className = classnames("modal", `modal--variant-${this.variant}`, {
|
|
@@ -257,29 +272,29 @@ export class SwirlModal {
|
|
|
257
272
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
258
273
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
259
274
|
});
|
|
260
|
-
return (h(Host, { key: '
|
|
275
|
+
return (h(Host, { key: 'c53283aad7f87ad05cc74bf68d39e33e57665cea' }, h("dialog", { key: 'f3e9a0b61a94b0b1d574265536a39d8bbe3aeaa1', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: '75bf8d418a4d77ffc37e42fb891047b39f99b6ab', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'f5bcf112f23d9fb77bb2cba66a6203d5b9951a33', class: "modal__body", part: "modal__body", style: !this.isFullscreen
|
|
261
276
|
? {
|
|
262
277
|
"--swirl-modal-max-height": this.maxHeight,
|
|
263
278
|
"--swirl-modal-height": this.height,
|
|
264
279
|
minHeight: this.minHeight,
|
|
265
280
|
maxWidth: this.maxWidth,
|
|
266
281
|
}
|
|
267
|
-
: {} }, h("aside", { key: '
|
|
282
|
+
: {} }, h("aside", { key: '382e8b1e9592b3a9752bb1ef2fc0f1b556cd2d7c', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '41cf73ab5aaca279a88eb6532f2144242f78ea47', class: classnames("modal__sidebar-header", {
|
|
268
283
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
269
|
-
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '
|
|
284
|
+
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '9ead40c49960b2d69feca469bbc91ea91b4ab3d1', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '487f65c82081100e09be212f2e400900ac6c8bfc', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '147a03cbb62653955ad302b782774812cc9f9068', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: 'ecde4d85fc8ab0ae0b9e0559ba8a779ab41a5d3a', name: "sidebar-content" })), h("div", { key: '5c0aeac2179557eea8953cc8809fa3cdeec58f7a', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '0149eae26b53fdc7727e8fe355d39ef1aa6d2313', name: "sidebar-footer" }))), h("div", { key: '9c5b37271a1e158f8a45fe79705034a48fb565ed', class: "modal__main-content" }, h("header", { key: '9ac62c6974e74c144c3c8ca80b530d73912b0137', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '55c475bfa35b12376efac0b67f26a0c3b31a20af', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '54b61a7b591f367d8a3c916021e7159e0eeed068', class: "modal__header" }, h("div", { key: '159e1b20bd85579ed7fdfe1e1459edca776bf6b6', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '473b559c8b3629a1071ca687a0f1ee52dc7d15d3', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
270
285
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
271
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '
|
|
286
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'fd40a806fceca676a41b2253f82e18e960da806f', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
272
287
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
273
288
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
274
289
|
? this.fullscreenDisableButtonLabel
|
|
275
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
290
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '3d54e1b6df57be9faafc96e0aba51e1f7cc5493f', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '460cff9a5b1d6c5775a39534678af201909b3388', class: "modal__content-container", style: {
|
|
276
291
|
gap: this.contentGap
|
|
277
292
|
? `var(--s-space-${this.contentGap})`
|
|
278
293
|
: undefined,
|
|
279
|
-
} }, h("div", { key: '
|
|
294
|
+
} }, h("div", { key: '2c314687bf9553212f41be41d7ba40092cf4adbf', class: "modal__primary-content", style: {
|
|
280
295
|
maxWidth: this.primaryContentMaxWidth,
|
|
281
296
|
flex: this.primaryContentFlex,
|
|
282
|
-
} }, h("div", { key: '
|
|
297
|
+
} }, h("div", { key: 'd791af57ae248b9ad5e0872bcb193fefd1fef44b', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '8e5b801755e617dbae380c86d9b9a6c72203f915', name: "header-tools" })), h("div", { key: '460a2c618a871d1fed8927a676c0cef86607939f', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '91b8d1223e10c107392c4a6913d3483ccbe3c689' }))), h("div", { key: '8d7757d3ad4921e649e47e4052dc30c069bbb082', class: "modal__secondary-content", style: {
|
|
283
298
|
maxWidth: this.secondaryContentMaxWidth,
|
|
284
299
|
flex: this.secondaryContentFlex,
|
|
285
300
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -297,7 +312,7 @@ export class SwirlModal {
|
|
|
297
312
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
298
313
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
299
314
|
: undefined,
|
|
300
|
-
} }, h("slot", { key: '
|
|
315
|
+
} }, h("slot", { key: '0fee540e1ffcd87a4efd66394b9506073720d4f9', name: "secondary-content" }))), h("div", { key: 'e3d7e34eeb3a852801494b01590605736359ff93', class: "modal__custom-footer" }, h("slot", { key: 'f9152641cfe89640ded1ca29eecb6672b0c1db5a', name: "custom-footer" })), showControls && (h("footer", { key: '794fdc1f5f62174bb7e8dd22ebd2cf66263e78e4', class: "modal__controls" }, h("swirl-button-group", { key: 'eb5b75263ab691ea70dca2608ee4e3bae836dbe4', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'bd4f677b1b4fc4cd26a2d1bf4bdb3e2f54c43159', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '6228911c5e114668d9a4dce63aff4c3931cfdb8a', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
301
316
|
}
|
|
302
317
|
static get is() { return "swirl-modal"; }
|
|
303
318
|
static get encapsulation() { return "shadow"; }
|
|
@@ -749,6 +764,30 @@ export class SwirlModal {
|
|
|
749
764
|
"setter": false,
|
|
750
765
|
"reflect": false
|
|
751
766
|
},
|
|
767
|
+
"returnFocusTo": {
|
|
768
|
+
"type": "string",
|
|
769
|
+
"attribute": "return-focus-to",
|
|
770
|
+
"mutable": false,
|
|
771
|
+
"complexType": {
|
|
772
|
+
"original": "HTMLElement | string",
|
|
773
|
+
"resolved": "HTMLElement | string",
|
|
774
|
+
"references": {
|
|
775
|
+
"HTMLElement": {
|
|
776
|
+
"location": "global",
|
|
777
|
+
"id": "global::HTMLElement"
|
|
778
|
+
}
|
|
779
|
+
}
|
|
780
|
+
},
|
|
781
|
+
"required": false,
|
|
782
|
+
"optional": true,
|
|
783
|
+
"docs": {
|
|
784
|
+
"tags": [],
|
|
785
|
+
"text": ""
|
|
786
|
+
},
|
|
787
|
+
"getter": false,
|
|
788
|
+
"setter": false,
|
|
789
|
+
"reflect": false
|
|
790
|
+
},
|
|
752
791
|
"secondaryContentPadding": {
|
|
753
792
|
"type": "string",
|
|
754
793
|
"attribute": "secondary-content-padding",
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { generateStoryElement } from "../../utils";
|
|
2
2
|
import Docs from "./swirl-modal.mdx";
|
|
3
3
|
export default {
|
|
4
|
+
argTypes: {
|
|
5
|
+
returnFocusTo: {
|
|
6
|
+
control: "text",
|
|
7
|
+
description: "Use when modal trigger element is unmounted before the modal is closed.",
|
|
8
|
+
},
|
|
9
|
+
},
|
|
4
10
|
component: "swirl-modal",
|
|
5
11
|
tags: ["autodocs"],
|
|
6
12
|
parameters: {
|
|
@@ -173,6 +173,9 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
|
|
|
173
173
|
setTimeout(() => {
|
|
174
174
|
this.mutationObserver?.disconnect();
|
|
175
175
|
this.modalEl.close();
|
|
176
|
+
if (this.returnFocusTo) {
|
|
177
|
+
this.customFocusReturn();
|
|
178
|
+
}
|
|
176
179
|
}, 150);
|
|
177
180
|
}
|
|
178
181
|
async setFullscreen(isFullscreen) {
|
|
@@ -239,6 +242,18 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
|
|
|
239
242
|
setDialogCustomProps() {
|
|
240
243
|
this.modalEl.setAttribute("closedby", "none");
|
|
241
244
|
}
|
|
245
|
+
customFocusReturn() {
|
|
246
|
+
const element = typeof this.returnFocusTo === "string"
|
|
247
|
+
? document.querySelector(this.returnFocusTo)
|
|
248
|
+
: this.returnFocusTo;
|
|
249
|
+
const focusableElements = tabbable(element, {
|
|
250
|
+
includeContainer: true,
|
|
251
|
+
getShadowRoot: true,
|
|
252
|
+
});
|
|
253
|
+
if (focusableElements.length > 0) {
|
|
254
|
+
focusableElements[0].focus();
|
|
255
|
+
}
|
|
256
|
+
}
|
|
242
257
|
render() {
|
|
243
258
|
const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
|
|
244
259
|
const className = classNames("modal", `modal--variant-${this.variant}`, {
|
|
@@ -266,29 +281,29 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
|
|
|
266
281
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
267
282
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
268
283
|
});
|
|
269
|
-
return (h(Host, { key: '
|
|
284
|
+
return (h(Host, { key: 'c53283aad7f87ad05cc74bf68d39e33e57665cea' }, h("dialog", { key: 'f3e9a0b61a94b0b1d574265536a39d8bbe3aeaa1', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: '75bf8d418a4d77ffc37e42fb891047b39f99b6ab', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'f5bcf112f23d9fb77bb2cba66a6203d5b9951a33', class: "modal__body", part: "modal__body", style: !this.isFullscreen
|
|
270
285
|
? {
|
|
271
286
|
"--swirl-modal-max-height": this.maxHeight,
|
|
272
287
|
"--swirl-modal-height": this.height,
|
|
273
288
|
minHeight: this.minHeight,
|
|
274
289
|
maxWidth: this.maxWidth,
|
|
275
290
|
}
|
|
276
|
-
: {} }, h("aside", { key: '
|
|
291
|
+
: {} }, h("aside", { key: '382e8b1e9592b3a9752bb1ef2fc0f1b556cd2d7c', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '41cf73ab5aaca279a88eb6532f2144242f78ea47', class: classNames("modal__sidebar-header", {
|
|
277
292
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
278
|
-
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '
|
|
293
|
+
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '9ead40c49960b2d69feca469bbc91ea91b4ab3d1', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '487f65c82081100e09be212f2e400900ac6c8bfc', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '147a03cbb62653955ad302b782774812cc9f9068', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: 'ecde4d85fc8ab0ae0b9e0559ba8a779ab41a5d3a', name: "sidebar-content" })), h("div", { key: '5c0aeac2179557eea8953cc8809fa3cdeec58f7a', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '0149eae26b53fdc7727e8fe355d39ef1aa6d2313', name: "sidebar-footer" }))), h("div", { key: '9c5b37271a1e158f8a45fe79705034a48fb565ed', class: "modal__main-content" }, h("header", { key: '9ac62c6974e74c144c3c8ca80b530d73912b0137', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '55c475bfa35b12376efac0b67f26a0c3b31a20af', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '54b61a7b591f367d8a3c916021e7159e0eeed068', class: "modal__header" }, h("div", { key: '159e1b20bd85579ed7fdfe1e1459edca776bf6b6', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '473b559c8b3629a1071ca687a0f1ee52dc7d15d3', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
279
294
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
280
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '
|
|
295
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'fd40a806fceca676a41b2253f82e18e960da806f', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
281
296
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
282
297
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
283
298
|
? this.fullscreenDisableButtonLabel
|
|
284
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
299
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '3d54e1b6df57be9faafc96e0aba51e1f7cc5493f', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '460cff9a5b1d6c5775a39534678af201909b3388', class: "modal__content-container", style: {
|
|
285
300
|
gap: this.contentGap
|
|
286
301
|
? `var(--s-space-${this.contentGap})`
|
|
287
302
|
: undefined,
|
|
288
|
-
} }, h("div", { key: '
|
|
303
|
+
} }, h("div", { key: '2c314687bf9553212f41be41d7ba40092cf4adbf', class: "modal__primary-content", style: {
|
|
289
304
|
maxWidth: this.primaryContentMaxWidth,
|
|
290
305
|
flex: this.primaryContentFlex,
|
|
291
|
-
} }, h("div", { key: '
|
|
306
|
+
} }, h("div", { key: 'd791af57ae248b9ad5e0872bcb193fefd1fef44b', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '8e5b801755e617dbae380c86d9b9a6c72203f915', name: "header-tools" })), h("div", { key: '460a2c618a871d1fed8927a676c0cef86607939f', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '91b8d1223e10c107392c4a6913d3483ccbe3c689' }))), h("div", { key: '8d7757d3ad4921e649e47e4052dc30c069bbb082', class: "modal__secondary-content", style: {
|
|
292
307
|
maxWidth: this.secondaryContentMaxWidth,
|
|
293
308
|
flex: this.secondaryContentFlex,
|
|
294
309
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -306,7 +321,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
|
|
|
306
321
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
307
322
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
308
323
|
: undefined,
|
|
309
|
-
} }, h("slot", { key: '
|
|
324
|
+
} }, h("slot", { key: '0fee540e1ffcd87a4efd66394b9506073720d4f9', name: "secondary-content" }))), h("div", { key: 'e3d7e34eeb3a852801494b01590605736359ff93', class: "modal__custom-footer" }, h("slot", { key: 'f9152641cfe89640ded1ca29eecb6672b0c1db5a', name: "custom-footer" })), showControls && (h("footer", { key: '794fdc1f5f62174bb7e8dd22ebd2cf66263e78e4', class: "modal__controls" }, h("swirl-button-group", { key: 'eb5b75263ab691ea70dca2608ee4e3bae836dbe4', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'bd4f677b1b4fc4cd26a2d1bf4bdb3e2f54c43159', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '6228911c5e114668d9a4dce63aff4c3931cfdb8a', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
310
325
|
}
|
|
311
326
|
get el() { return this; }
|
|
312
327
|
static get style() { return swirlModalCss; }
|
|
@@ -333,6 +348,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
|
|
|
333
348
|
"primaryContentFlex": [1, "primary-content-flex"],
|
|
334
349
|
"secondaryContentFlex": [1, "secondary-content-flex"],
|
|
335
350
|
"hideSecondaryContentBorders": [4, "hide-secondary-content-borders"],
|
|
351
|
+
"returnFocusTo": [1, "return-focus-to"],
|
|
336
352
|
"secondaryContentPadding": [1, "secondary-content-padding"],
|
|
337
353
|
"secondaryContentPaddingBlockEnd": [1, "secondary-content-padding-block-end"],
|
|
338
354
|
"secondaryContentPaddingBlockStart": [1, "secondary-content-padding-block-start"],
|