@getflip/swirl-components 0.257.1 → 0.259.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.
Files changed (35) hide show
  1. package/components.json +432 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/swirl-components.cjs.js +1 -1
  4. package/dist/cjs/swirl-image-grid.cjs.entry.js +4 -1
  5. package/dist/cjs/swirl-modal.cjs.entry.js +38 -5
  6. package/dist/cjs/swirl-shell-layout.cjs.entry.js +1 -1
  7. package/dist/cjs/swirl-toggle-group.cjs.entry.js +1 -1
  8. package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
  9. package/dist/collection/components/swirl-image-grid/swirl-image-grid.js +4 -1
  10. package/dist/collection/components/swirl-modal/swirl-modal.css +10 -6
  11. package/dist/collection/components/swirl-modal/swirl-modal.js +254 -4
  12. package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css +2 -2
  13. package/dist/collection/components/swirl-toggle-group/swirl-toggle-group.css +1 -0
  14. package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
  15. package/dist/components/swirl-image-grid.js +4 -1
  16. package/dist/components/swirl-modal.js +49 -5
  17. package/dist/components/swirl-shell-layout.js +1 -1
  18. package/dist/components/swirl-toggle-group.js +1 -1
  19. package/dist/esm/loader.js +1 -1
  20. package/dist/esm/swirl-components.js +1 -1
  21. package/dist/esm/swirl-image-grid.entry.js +4 -1
  22. package/dist/esm/swirl-modal.entry.js +38 -5
  23. package/dist/esm/swirl-shell-layout.entry.js +1 -1
  24. package/dist/esm/swirl-toggle-group.entry.js +1 -1
  25. package/dist/swirl-components/p-16c5dc02.entry.js +1 -0
  26. package/dist/swirl-components/p-2a67a199.entry.js +1 -0
  27. package/dist/swirl-components/{p-f55f9ae0.entry.js → p-43974e11.entry.js} +1 -1
  28. package/dist/swirl-components/{p-994f4d3a.entry.js → p-fd247fa8.entry.js} +1 -1
  29. package/dist/swirl-components/swirl-components.esm.js +1 -1
  30. package/dist/types/components/swirl-modal/swirl-modal.d.ts +12 -0
  31. package/dist/types/components.d.ts +24 -2
  32. package/package.json +1 -1
  33. package/vscode-data.json +189 -0
  34. package/dist/swirl-components/p-633a3cd8.entry.js +0 -1
  35. package/dist/swirl-components/p-67dc9313.entry.js +0 -1
@@ -4,6 +4,9 @@ export class SwirlImageGrid {
4
4
  constructor() {
5
5
  this.updateItems = () => {
6
6
  this.items = Array.from(this.el.children);
7
+ this.items.forEach((item) => {
8
+ item.overlay = undefined;
9
+ });
7
10
  if (this.items.length > 4) {
8
11
  this.items[3].overlay = `+${this.items.length - 4}`;
9
12
  }
@@ -32,7 +35,7 @@ export class SwirlImageGrid {
32
35
  render() {
33
36
  const className = classnames("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`);
34
37
  const aspectRatio = this.caculateAspectRatio();
35
- return (h(Host, { key: '2b31f44c3d8492d31129b2acc10f016392775cf0' }, h("div", { key: '7a6d0ff49da92740014e80c3711d02d85e70adcf', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: aspectRatio } }, h("slot", { key: '7ab014168e7ae26d1968d1103650138b2c267df4', onSlotchange: this.updateItems }))));
38
+ return (h(Host, { key: 'e4b325cefef1b963252e4cc59e581f472db1ac71' }, h("div", { key: '3372ba282050bde4cfcea3968b363dd903aa4c83', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: aspectRatio } }, h("slot", { key: 'cec9b1e8460d92757e51b8123fe7f41d58f65501', onSlotchange: this.updateItems }))));
36
39
  }
37
40
  static get is() { return "swirl-image-grid"; }
38
41
  static get encapsulation() { return "shadow"; }
@@ -23,8 +23,10 @@
23
23
  --swirl-modal-max-height: 90vh;
24
24
  --swirl-modal-view-height: 100vh;
25
25
  --swirl-modal-max-width: 40rem;
26
- --swirl-modal-footer-padding-small: var(--s-space-12) var(--s-space-16) var(--s-space-12) var(--s-space-16);
27
- --swirl-modal-footer-padding-large: var(--s-space-16) var(--s-space-24) var(--s-space-16) var(--s-space-24);
26
+ --swirl-modal-footer-padding-small: var(--s-space-12) var(--s-space-16)
27
+ var(--s-space-12) var(--s-space-16);
28
+ --swirl-modal-footer-padding-large: var(--s-space-16) var(--s-space-24)
29
+ var(--s-space-16) var(--s-space-24);
28
30
  }
29
31
 
30
32
  @supports (height: 100dvh) {
@@ -215,19 +217,21 @@
215
217
  max-width: 64rem;
216
218
  }
217
219
 
218
- .modal--has-secondary-content:not(.modal--has-header-tools) .modal__header {
220
+ .modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders)
221
+ .modal__header {
219
222
  border-bottom-color: var(--s-border-default);
220
223
  }
221
224
 
222
- .modal--has-secondary-content.modal--has-header-tools .modal__header-tools {
225
+ .modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders)
226
+ .modal__header-tools {
223
227
  border-bottom-color: var(--s-border-default);
224
228
  }
225
229
 
226
- .modal--has-secondary-content.modal--has-custom-footer .modal__custom-footer {
230
+ .modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer {
227
231
  border-top: var(--s-border-width-default) solid var(--s-border-default);
228
232
  }
229
233
 
230
- .modal--has-secondary-content:not(.modal--has-custom-footer) .modal__controls {
234
+ .modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls {
231
235
  border-top: var(--s-border-width-default) solid var(--s-border-default);
232
236
  }
233
237
 
@@ -55,6 +55,17 @@ export class SwirlModal {
55
55
  this.primaryActionLabel = undefined;
56
56
  this.secondaryActionLabel = undefined;
57
57
  this.variant = "default";
58
+ this.hideSecondaryContent = undefined;
59
+ this.primaryContentMaxWidth = undefined;
60
+ this.secondaryContentMaxWidth = undefined;
61
+ this.primaryContentFlex = undefined;
62
+ this.secondaryContentFlex = undefined;
63
+ this.hideSecondaryContentBorders = undefined;
64
+ this.secondaryContentPadding = undefined;
65
+ this.secondaryContentPaddingBlockEnd = undefined;
66
+ this.secondaryContentPaddingBlockStart = undefined;
67
+ this.secondaryContentPaddingInlineEnd = undefined;
68
+ this.secondaryContentPaddingInlineStart = undefined;
58
69
  this.isOpen = false;
59
70
  this.closing = false;
60
71
  this.hasCustomHeader = undefined;
@@ -155,20 +166,42 @@ export class SwirlModal {
155
166
  "modal--has-custom-footer": this.hasCustomFooter,
156
167
  "modal--has-custom-header": this.hasCustomHeader,
157
168
  "modal--has-header-tools": this.hasHeaderTools,
158
- "modal--has-secondary-content": this.hasSecondaryContent,
169
+ "modal--has-secondary-content": this.hasSecondaryContent && !this.hideSecondaryContent,
159
170
  "modal--hide-label": this.hideLabel,
160
171
  "modal--padded": this.padded,
161
172
  "modal--scrollable": this.scrollable,
162
173
  "modal--scrolled": this.scrolled,
163
174
  "modal--scrolled-down": this.scrolledDown,
175
+ "modal--hide-secondary-content-borders": this.hideSecondaryContentBorders,
164
176
  });
165
- return (h(Host, { key: '80830475953f8fef218dab13b912c06020759747' }, h("section", { key: 'fbc3012a761007f53e72b7fc4eabc98549940750', "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: '2ea890b7199a213255df3fbfeba6197486aaf66e', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '56bae9212a07b4c13e60b963b727295102dd58d6', class: "modal__body", style: {
177
+ return (h(Host, { key: '5abfbc05dba0cd84090b1018fff056fa5bb7fb3a' }, h("section", { key: '39a23d9714817b31437a88ff723bfd502b59212b', "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: 'cb06424ef93df9be045b1ad8941d3e8c59f91549', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '49123cd13d3f6d6649a6bbad186bc090a224a0f1', class: "modal__body", style: {
166
178
  "--swirl-modal-max-height": this.maxHeight,
167
179
  "--swirl-modal-height": this.height,
168
180
  maxWidth: this.maxWidth,
169
- } }, h("header", { key: '220a643d1e7c944f7012c6722617be5645f3233a', class: "modal__custom-header" }, h("slot", { key: '01eaff1abd5aa8002463bc9d3e81a09b2c20045b', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: 'e804136cc94d11b68424c37b8035b0afaad05d5e', class: "modal__header" }, h("div", { key: 'fa5d318bb813fce6a3ce070365973c9fa1fbeb34', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '9f5ab5de46d9e3654b5c61c926b516a9d6ab1ab7', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
181
+ } }, h("header", { key: '6a0faf4bc1fef1b04d146e299da37f2d8ef10e67', class: "modal__custom-header" }, h("slot", { key: '73879b5b817c4dcca56083a83082df714d5b7370', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '5a7e87152f53f21dfcd907dfda172987dc4bb4db', class: "modal__header" }, h("div", { key: '1d53ffaaf702d9a0e8bd6512d20ee11cda140f57', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '93149217a8066603702676d77004708a10f2ff77', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
170
182
  ? "<swirl-icon-close></swirl-icon-close>"
171
- : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'c0a0a4b3b6f0995dc7196ae43d35faed024ddf03', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '043edf4e5474e02099b4ea3c7e9278a987355030', class: "modal__content-container" }, h("div", { key: '2fec2822a619628681a01606bc3eb47abf51c0a0', class: "modal__primary-content" }, h("div", { key: '777e35a204900e5f43f68fbbaaee5e1862818474', class: "modal__header-tools" }, h("slot", { key: 'f23f34983053cd0d233f69b75122c27d45c025c2', name: "header-tools" })), h("div", { key: '49f3b4ecb95eb7fb18d32df3811c4a17741f4b5e', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'f35360a5a332d61ccc2996e9a875f16ad256cdc0' }))), h("div", { key: '0d52e88c2eba0b744498b95d86a0d332ea7093d3', class: "modal__secondary-content" }, h("slot", { key: '5df06b16d2f7b8058fcec78dd997a2b4fbf5e52e', name: "secondary-content" }))), h("div", { key: '3ac418d5637c8a269715c928c97f171b776f9aca', class: "modal__custom-footer" }, h("slot", { key: 'bfb6f79383b9cd56bf2c7a41636fb8af91de27ea', name: "custom-footer" })), showControls && (h("footer", { key: '218fa6e62c106eda8ffc4781738334be7ee813ed', class: "modal__controls" }, h("swirl-button-group", { key: '86b3f6aa7cd1f37c979933be4ad22a80ba119211', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '9f091b284d756a6c7fd9f6deb97654b5f2b593e1', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'cc4475407ed68c107643aa0902f3250a5db1ba1c', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
183
+ : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '372847e9327f0d855bd8bf752db0dc75f063e234', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'f22d5c6e1c04572de753133eb7087044de6af7e4', class: "modal__content-container" }, h("div", { key: '55838fc55afc04a4bbfafd62f2a4fd3c67204ad7', class: "modal__primary-content", style: {
184
+ maxWidth: this.primaryContentMaxWidth,
185
+ flex: this.primaryContentFlex,
186
+ } }, h("div", { key: '28cb0ac5a03e89df61ed1ba7774ca7f7d49ab1c2', class: "modal__header-tools" }, h("slot", { key: 'b6947a6bfc9cf59d54237fe90cf349c506b2f6cb', name: "header-tools" })), h("div", { key: '1ff25f922f06049ffae22224f008bc3a0ee54895', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'a4d9c3a66cc48d7d5d840e6aa094d1b2c1fff995' }))), h("div", { key: 'ca3b551d46e676754443ea15eb7ff63474edc216', class: "modal__secondary-content", style: {
187
+ maxWidth: this.secondaryContentMaxWidth,
188
+ flex: this.secondaryContentFlex,
189
+ padding: Boolean(this.secondaryContentPadding)
190
+ ? `var(--s-space-${this.secondaryContentPadding})`
191
+ : undefined,
192
+ paddingBlockEnd: Boolean(this.secondaryContentPaddingBlockEnd)
193
+ ? `var(--s-space-${this.secondaryContentPaddingBlockEnd})`
194
+ : undefined,
195
+ paddingBlockStart: Boolean(this.secondaryContentPaddingBlockStart)
196
+ ? `var(--s-space-${this.secondaryContentPaddingBlockStart})`
197
+ : undefined,
198
+ paddingInlineEnd: Boolean(this.secondaryContentPaddingInlineEnd)
199
+ ? `var(--s-space-${this.secondaryContentPaddingInlineEnd})`
200
+ : undefined,
201
+ paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
202
+ ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
203
+ : undefined,
204
+ } }, h("slot", { key: '334f6be57d482adff00e53b9943032824d2d34a0', name: "secondary-content" }))), h("div", { key: 'b1100c302ecb67ae464e7dc8fb58d9292add44d7', class: "modal__custom-footer" }, h("slot", { key: '1eb4b3463a49108125c4bcd1bbb130c8a8ac5426', name: "custom-footer" })), showControls && (h("footer", { key: '39f2f51373bfadf31e8ea73f8217fc00e4e3ade0', class: "modal__controls" }, h("swirl-button-group", { key: '1046779ae99c3f9b3af57ec3580874130f729690', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '88e90618f2c7ee581f6e54e878a78a895db97eb6', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '6b4687c64c914c1f4942cd99827fb0efb8251c41', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
172
205
  }
173
206
  static get is() { return "swirl-modal"; }
174
207
  static get originalStyleUrls() {
@@ -396,6 +429,223 @@ export class SwirlModal {
396
429
  "attribute": "variant",
397
430
  "reflect": false,
398
431
  "defaultValue": "\"default\""
432
+ },
433
+ "hideSecondaryContent": {
434
+ "type": "boolean",
435
+ "mutable": false,
436
+ "complexType": {
437
+ "original": "boolean",
438
+ "resolved": "boolean",
439
+ "references": {}
440
+ },
441
+ "required": false,
442
+ "optional": true,
443
+ "docs": {
444
+ "tags": [],
445
+ "text": ""
446
+ },
447
+ "attribute": "hide-secondary-content",
448
+ "reflect": false
449
+ },
450
+ "primaryContentMaxWidth": {
451
+ "type": "string",
452
+ "mutable": false,
453
+ "complexType": {
454
+ "original": "string",
455
+ "resolved": "string",
456
+ "references": {}
457
+ },
458
+ "required": false,
459
+ "optional": true,
460
+ "docs": {
461
+ "tags": [],
462
+ "text": ""
463
+ },
464
+ "attribute": "primary-content-max-width",
465
+ "reflect": false
466
+ },
467
+ "secondaryContentMaxWidth": {
468
+ "type": "string",
469
+ "mutable": false,
470
+ "complexType": {
471
+ "original": "string",
472
+ "resolved": "string",
473
+ "references": {}
474
+ },
475
+ "required": false,
476
+ "optional": true,
477
+ "docs": {
478
+ "tags": [],
479
+ "text": ""
480
+ },
481
+ "attribute": "secondary-content-max-width",
482
+ "reflect": false
483
+ },
484
+ "primaryContentFlex": {
485
+ "type": "string",
486
+ "mutable": false,
487
+ "complexType": {
488
+ "original": "string",
489
+ "resolved": "string",
490
+ "references": {}
491
+ },
492
+ "required": false,
493
+ "optional": true,
494
+ "docs": {
495
+ "tags": [],
496
+ "text": ""
497
+ },
498
+ "attribute": "primary-content-flex",
499
+ "reflect": false
500
+ },
501
+ "secondaryContentFlex": {
502
+ "type": "string",
503
+ "mutable": false,
504
+ "complexType": {
505
+ "original": "string",
506
+ "resolved": "string",
507
+ "references": {}
508
+ },
509
+ "required": false,
510
+ "optional": true,
511
+ "docs": {
512
+ "tags": [],
513
+ "text": ""
514
+ },
515
+ "attribute": "secondary-content-flex",
516
+ "reflect": false
517
+ },
518
+ "hideSecondaryContentBorders": {
519
+ "type": "boolean",
520
+ "mutable": false,
521
+ "complexType": {
522
+ "original": "boolean",
523
+ "resolved": "boolean",
524
+ "references": {}
525
+ },
526
+ "required": false,
527
+ "optional": true,
528
+ "docs": {
529
+ "tags": [],
530
+ "text": ""
531
+ },
532
+ "attribute": "hide-secondary-content-borders",
533
+ "reflect": false
534
+ },
535
+ "secondaryContentPadding": {
536
+ "type": "string",
537
+ "mutable": false,
538
+ "complexType": {
539
+ "original": "SwirlModalPadding",
540
+ "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
541
+ "references": {
542
+ "SwirlModalPadding": {
543
+ "location": "local",
544
+ "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-modal/swirl-modal.tsx",
545
+ "id": "src/components/swirl-modal/swirl-modal.tsx::SwirlModalPadding"
546
+ }
547
+ }
548
+ },
549
+ "required": false,
550
+ "optional": true,
551
+ "docs": {
552
+ "tags": [],
553
+ "text": ""
554
+ },
555
+ "attribute": "secondary-content-padding",
556
+ "reflect": false
557
+ },
558
+ "secondaryContentPaddingBlockEnd": {
559
+ "type": "string",
560
+ "mutable": false,
561
+ "complexType": {
562
+ "original": "SwirlModalPadding",
563
+ "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
564
+ "references": {
565
+ "SwirlModalPadding": {
566
+ "location": "local",
567
+ "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-modal/swirl-modal.tsx",
568
+ "id": "src/components/swirl-modal/swirl-modal.tsx::SwirlModalPadding"
569
+ }
570
+ }
571
+ },
572
+ "required": false,
573
+ "optional": true,
574
+ "docs": {
575
+ "tags": [],
576
+ "text": ""
577
+ },
578
+ "attribute": "secondary-content-padding-block-end",
579
+ "reflect": false
580
+ },
581
+ "secondaryContentPaddingBlockStart": {
582
+ "type": "string",
583
+ "mutable": false,
584
+ "complexType": {
585
+ "original": "SwirlModalPadding",
586
+ "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
587
+ "references": {
588
+ "SwirlModalPadding": {
589
+ "location": "local",
590
+ "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-modal/swirl-modal.tsx",
591
+ "id": "src/components/swirl-modal/swirl-modal.tsx::SwirlModalPadding"
592
+ }
593
+ }
594
+ },
595
+ "required": false,
596
+ "optional": true,
597
+ "docs": {
598
+ "tags": [],
599
+ "text": ""
600
+ },
601
+ "attribute": "secondary-content-padding-block-start",
602
+ "reflect": false
603
+ },
604
+ "secondaryContentPaddingInlineEnd": {
605
+ "type": "string",
606
+ "mutable": false,
607
+ "complexType": {
608
+ "original": "SwirlModalPadding",
609
+ "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
610
+ "references": {
611
+ "SwirlModalPadding": {
612
+ "location": "local",
613
+ "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-modal/swirl-modal.tsx",
614
+ "id": "src/components/swirl-modal/swirl-modal.tsx::SwirlModalPadding"
615
+ }
616
+ }
617
+ },
618
+ "required": false,
619
+ "optional": true,
620
+ "docs": {
621
+ "tags": [],
622
+ "text": ""
623
+ },
624
+ "attribute": "secondary-content-padding-inline-end",
625
+ "reflect": false
626
+ },
627
+ "secondaryContentPaddingInlineStart": {
628
+ "type": "string",
629
+ "mutable": false,
630
+ "complexType": {
631
+ "original": "SwirlModalPadding",
632
+ "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
633
+ "references": {
634
+ "SwirlModalPadding": {
635
+ "location": "local",
636
+ "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-modal/swirl-modal.tsx",
637
+ "id": "src/components/swirl-modal/swirl-modal.tsx::SwirlModalPadding"
638
+ }
639
+ }
640
+ },
641
+ "required": false,
642
+ "optional": true,
643
+ "docs": {
644
+ "tags": [],
645
+ "text": ""
646
+ },
647
+ "attribute": "secondary-content-padding-inline-start",
648
+ "reflect": false
399
649
  }
400
650
  };
401
651
  }
@@ -294,8 +294,8 @@
294
294
  --swirl-badge-border-color: var(--s-surface-sunken-default);
295
295
 
296
296
  position: absolute;
297
- top: var(--s-space-4);
298
- right: var(--s-space-4);
297
+ top: var(--s-space-2);
298
+ right: var(--s-space-2);
299
299
  padding-right: var(--s-space-2);
300
300
  transform: translate3d(0.1875rem, 0, 0);
301
301
  }
@@ -10,4 +10,5 @@
10
10
  padding: var(--s-space-4);
11
11
  background-color: var(--s-surface-default);
12
12
  border-radius: var(--s-border-radius-base);
13
+ box-shadow: var(--s-shadow-level-1);
13
14
  }