@swisspost/design-system-styles 10.4.0 → 10.5.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 (48) hide show
  1. package/cargo-compact.css +1 -1
  2. package/cargo-default.css +1 -1
  3. package/cargo-tokens-compact.css +1 -1
  4. package/cargo-tokens-default.css +1 -1
  5. package/components/_index.scss +1 -0
  6. package/components/chip.scss +1 -1
  7. package/components/dialog.css +1 -1
  8. package/components/dialog.scss +3 -3
  9. package/components/fonts.css +1 -1
  10. package/components/fonts.scss +33 -1
  11. package/components/footer/_post-footer.scss +6 -6
  12. package/components/form-input.scss +14 -14
  13. package/components/form-search-input.scss +1 -1
  14. package/components/form-select.scss +10 -16
  15. package/components/form-textarea.scss +2 -2
  16. package/components/header/_custom-properties.scss +6 -6
  17. package/components/inline-notification.css +1 -0
  18. package/components/inline-notification.scss +63 -0
  19. package/components/list-check.scss +12 -12
  20. package/components/switch.scss +4 -4
  21. package/components/tabs/_tab-title.scss +16 -10
  22. package/components/toast.css +1 -1
  23. package/components/toast.scss +1 -1
  24. package/layout/_containers.scss +1 -1
  25. package/layout/_section.scss +1 -1
  26. package/mixins/_forms.scss +3 -3
  27. package/mixins/_list.scss +5 -5
  28. package/package.json +6 -6
  29. package/post-compact.css +1 -1
  30. package/post-default.css +1 -1
  31. package/post-tokens-compact.css +1 -1
  32. package/post-tokens-default.css +1 -1
  33. package/tokens/temp/_appearance.scss +1 -1
  34. package/tokens/temp/_components.scss +3 -3
  35. package/tokens/temp/_core.scss +1 -1
  36. package/tokens/temp/_device.scss +2 -2
  37. package/tokens/temp/_elements.scss +1 -1
  38. package/tokens/temp/_helpers.scss +1 -1
  39. package/tokens/temp/_index.scss +1 -1
  40. package/tokens/temp/_palette.scss +1 -1
  41. package/tokens/temp/_scheme.scss +1 -1
  42. package/tokens/temp/_schemestatic.scss +1 -1
  43. package/tokens/temp/_theme.scss +1 -1
  44. package/tokens/temp/_utilities-formatted.scss +1 -1
  45. package/tokens/temp/_utilities.scss +1 -1
  46. package/utilities/_env-variables.scss +1 -1
  47. package/utilities/_variables.scss +36 -36
  48. package/variables/components/_notification.scss +10 -10
package/components/inline-notification.css ADDED
@@ -0,0 +1 @@
1
+ .inline-notification{display:inline-grid;align-items:flex-start;grid-template-columns:auto minmax(0, 1fr);column-gap:var(--post-device-spacing-gap-16);row-gap:var(--post-device-spacing-gap-2);padding-block:var(--post-device-spacing-padding-block-12);padding-inline:var(--post-device-spacing-padding-inline-1);border-style:var(--post-core-border-style-solid);border-width:var(--post-device-border-width-default);border-radius:var(--post-device-border-radius-1)}.inline-notification::before{content:"";display:block;grid-column:1;grid-row:1;width:var(--post-device-sizing-notification-icon-3);height:var(--post-device-sizing-notification-icon-3);margin-block-start:2px}.inline-notification.inline-notification-info{border-color:var(--post-scheme-color-interactive-notification-info-stroke);background-color:var(--post-scheme-color-interactive-notification-info-bg);color:var(--post-scheme-color-interactive-notification-info-fg)}.inline-notification.inline-notification-info::before{background-image:var(--post-signal-icon-info)}.inline-notification.inline-notification-success{border-color:var(--post-scheme-color-interactive-notification-success-stroke);background-color:var(--post-scheme-color-interactive-notification-success-bg);color:var(--post-scheme-color-interactive-notification-success-fg)}.inline-notification.inline-notification-success::before{background-image:var(--post-signal-icon-success)}.inline-notification.inline-notification-warning{border-color:var(--post-scheme-color-interactive-notification-warning-stroke);background-color:var(--post-scheme-color-interactive-notification-warning-bg);color:var(--post-scheme-color-interactive-notification-warning-fg)}.inline-notification.inline-notification-warning::before{background-image:var(--post-signal-icon-warning)}.inline-notification.inline-notification-error{border-color:var(--post-scheme-color-interactive-notification-error-stroke);background-color:var(--post-scheme-color-interactive-notification-error-bg);color:var(--post-scheme-color-interactive-notification-error-fg)}.inline-notification.inline-notification-error::before{background-image:var(--post-signal-icon-error)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.inline-notification{border:2px solid CanvasText}}.inline-notification h1,.inline-notification h2,.inline-notification h3,.inline-notification h4,.inline-notification h5,.inline-notification h6{margin:0;padding:0;grid-row:1;font-size:var(--post-device-font-size-4);font-weight:var(--post-device-font-weight-bold)}.inline-notification>*{margin:0;grid-column:2}
package/components/inline-notification.scss ADDED
@@ -0,0 +1,63 @@
1
+ @use '../functions/tokens';
2
+ @use '../tokens/elements';
3
+ @use '../tokens/components';
4
+ @use './../mixins/utilities';
5
+
6
+ tokens.$default-map: components.$post-inline-notification;
7
+
8
+ .inline-notification {
9
+ display: inline-grid;
10
+ align-items: flex-start;
11
+ grid-template-columns: auto minmax(0, 1fr);
12
+ column-gap: tokens.get('notification-inline-gap-inline');
13
+ row-gap: tokens.get('notification-inline-labels-gap-block');
14
+ padding-block: tokens.get('notification-inline-padding-block');
15
+ padding-inline: tokens.get('notification-inline-padding-inline');
16
+ border-style: tokens.get('notification-inline-border-style');
17
+ border-width: tokens.get('notification-inline-border-width');
18
+ border-radius: tokens.get('notification-inline-border-radius');
19
+
20
+ &::before {
21
+ content: '';
22
+ display: block;
23
+ grid-column: 1;
24
+ grid-row: 1;
25
+ width: tokens.get('notification-inline-icon-size');
26
+ height: tokens.get('notification-inline-icon-size');
27
+ margin-block-start: 2px;
28
+ }
29
+
30
+ @each $name in 'info', 'success', 'warning', 'error' {
31
+ &.inline-notification-#{$name} {
32
+ border-color: tokens.get('notification-inline-color-#{$name}-stroke');
33
+ background-color: tokens.get('notification-inline-color-#{$name}-bg');
34
+ color: tokens.get('notification-inline-color-#{$name}-fg');
35
+
36
+ &::before {
37
+ background-image: var(--post-signal-icon-#{$name});
38
+ }
39
+ }
40
+ }
41
+
42
+ @include utilities.high-contrast-mode {
43
+ border: 2px solid CanvasText;
44
+ }
45
+
46
+ h1,
47
+ h2,
48
+ h3,
49
+ h4,
50
+ h5,
51
+ h6 {
52
+ margin: 0;
53
+ padding: 0;
54
+ grid-row: 1;
55
+ font-size: tokens.get('h4-font-size', elements.$post-heading);
56
+ font-weight: tokens.get('notification-inline-title-font-weight');
57
+ }
58
+
59
+ > * {
60
+ margin: 0;
61
+ grid-column: 2;
62
+ }
63
+ }
package/components/list-check.scss CHANGED
@@ -15,8 +15,8 @@ ul.list-check {
15
15
  padding-block: tokens.get('list-check-margin-block') tokens.get('list-check-margin-block');
16
16
  padding-inline-start: calc(
17
17
  #{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')} +
18
- #{tokens.get('list-check-icon-gap-inline')} + 2 *
19
- #{tokens.get('list-check-icon-container-inline')}
18
+ #{tokens.get('list-check-icon-gap-inline')} + 2 *
19
+ #{tokens.get('list-check-icon-container-inline')}
20
20
  );
21
21
  gap: tokens.get('list-check-item-gap-block-text');
22
22
 
@@ -32,11 +32,11 @@ ul.list-check {
32
32
  left: 0;
33
33
  margin-inline-start: calc(
34
34
  -1 *
35
- (
36
- #{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')} +
37
- #{tokens.get('list-check-icon-gap-inline')} +
38
- #{tokens.get('list-check-icon-container-inline')}
39
- )
35
+ (
36
+ #{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')} +
37
+ #{tokens.get('list-check-icon-gap-inline')} +
38
+ #{tokens.get('list-check-icon-container-inline')}
39
+ )
40
40
  );
41
41
  margin-block: calc(-1 * tokens.get('list-check-text-padding'));
42
42
 
@@ -60,11 +60,11 @@ ul.list-check {
60
60
  position: absolute;
61
61
  margin-inline-start: calc(
62
62
  -1 *
63
- (
64
- #{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')} +
65
- #{tokens.get('list-check-icon-gap-inline')} +
66
- #{tokens.get('list-check-icon-container-inline')}
67
- )
63
+ (
64
+ #{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')} +
65
+ #{tokens.get('list-check-icon-gap-inline')} +
66
+ #{tokens.get('list-check-icon-container-inline')}
67
+ )
68
68
  );
69
69
  margin-block: calc(-1 * tokens.get('list-check-text-padding'));
70
70
  top: tokens.get('list-check-padding-icon');
package/components/switch.scss CHANGED
@@ -75,7 +75,7 @@ $switch-handle-icon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='htt
75
75
  transform: translateX(
76
76
  calc(
77
77
  tokens.get('switch-element-width') - tokens.get('switch-element-handle') - 2 *
78
- tokens.get('switch-padding-inline-handle')
78
+ tokens.get('switch-padding-inline-handle')
79
79
  )
80
80
  );
81
81
  }
@@ -114,9 +114,9 @@ $switch-handle-icon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='htt
114
114
  transform: translateX(
115
115
  calc(
116
116
  tokens.get('switch-element-width') - tokens.get('switch-element-handle') - tokens.get(
117
- 'switch-padding-inline-handle'
118
- ) *
119
- 2 - tokens.get('switch-border-width') * 2
117
+ 'switch-padding-inline-handle'
118
+ ) *
119
+ 2 - tokens.get('switch-border-width') * 2
120
120
  )
121
121
  );
122
122
  }
package/components/tabs/_tab-title.scss CHANGED
@@ -121,7 +121,10 @@ post-tab-item.nav-item {
121
121
 
122
122
  // Dark background needs the inverted focus ring color
123
123
  &:not([aria-current='page']) {
124
- @include utilities-mx.focus-style-custom($outline-offset: $tabs-outline-offset, $outline-color: tokens.get('focus-outline-color-inverted', helpers.$post-focus));
124
+ @include utilities-mx.focus-style-custom(
125
+ $outline-offset: $tabs-outline-offset,
126
+ $outline-color: tokens.get('focus-outline-color-inverted', helpers.$post-focus)
127
+ );
125
128
  }
126
129
 
127
130
  // hovered
@@ -137,7 +140,10 @@ post-tab-item.nav-item {
137
140
  color: tokens.get('post-tabs-page-tab-selected-fg');
138
141
  border-color: tokens.get('post-tabs-page-tab-selected-border');
139
142
 
140
- @include utilities-mx.focus-style-custom($outline-offset: $tabs-outline-offset, $outline-color: tokens.get('post-tabs-page-tab-selected-fg'));
143
+ @include utilities-mx.focus-style-custom(
144
+ $outline-offset: $tabs-outline-offset,
145
+ $outline-color: tokens.get('post-tabs-page-tab-selected-fg')
146
+ );
141
147
 
142
148
  // selected — hovered
143
149
  &:hover {
@@ -360,11 +366,11 @@ post-tabs[active-tab] {
360
366
  );
361
367
  padding-block: calc(
362
368
  tokens.get('post-tabs-page-large-tab-selected-padding-block') + var(--active, 0) *
363
- (
364
- tokens.get('post-tabs-page-large-tab-enabled-padding-block') - tokens.get(
365
- 'post-tabs-page-large-tab-selected-padding-block'
366
- )
369
+ (
370
+ tokens.get('post-tabs-page-large-tab-enabled-padding-block') - tokens.get(
371
+ 'post-tabs-page-large-tab-selected-padding-block'
367
372
  )
373
+ )
368
374
  );
369
375
  z-index: calc(var(--active, 0) * 1);
370
376
 
@@ -380,11 +386,11 @@ post-tabs[active-tab] {
380
386
  &[size='small'] post-tab-item.nav-item.ssr a {
381
387
  padding-block: calc(
382
388
  tokens.get('post-tabs-page-small-tab-selected-padding-block') + var(--active, 0) *
383
- (
384
- tokens.get('post-tabs-page-small-tab-enabled-padding-block') - tokens.get(
385
- 'post-tabs-page-small-tab-selected-padding-block'
386
- )
389
+ (
390
+ tokens.get('post-tabs-page-small-tab-enabled-padding-block') - tokens.get(
391
+ 'post-tabs-page-small-tab-selected-padding-block'
387
392
  )
393
+ )
388
394
  );
389
395
  }
390
396
  }
package/components/toast.css CHANGED
@@ -1 +1 @@
1
- .toast-container .toast button.toast-close-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}.toast-container .toast button.toast-close-button:not(:disabled):hover{text-decoration:none}.toast-container .toast button.toast-close-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.toast-container .toast button.toast-close-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.toast-container .toast button.toast-close-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-container .toast button.toast-close-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.toast-container .toast button.toast-close-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-container .toast button.toast-close-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-container .toast button.toast-close-button{border-width:1px !important;transition:none}.toast-container .toast button.toast-close-button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.toast-container .toast button.toast-close-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.toast{min-height:calc(var(--post-device-sizing-notification-icon-3) + 2*var(--post-device-spacing-padding-3));box-sizing:border-box;box-shadow:var(--post-device-elevation-300);border-radius:var(--post-device-border-radius-2);padding:var(--post-device-spacing-padding-3) var(--post-device-spacing-padding-11);padding-inline-start:calc(var(--post-device-spacing-padding-11) + var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-2));font-weight:var(--post-core-font-weight-400);border-style:var(--post-core-border-style-solid);border-width:var(--post-device-border-width-default);position:relative;color:var(--post-current-fg);background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast::before{background-image:var(--post-signal-icon-info);background-size:contain;background-repeat:no-repeat;background-position:center}.toast::before{content:"";display:block;position:absolute;height:var(--post-device-sizing-notification-icon-3);width:var(--post-device-sizing-notification-icon-3);left:var(--post-device-spacing-padding-11);top:var(--post-device-spacing-padding-3)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast{filter:none !important;border:2px solid CanvasText}}.toast{display:flex;flex-direction:column;justify-content:center;gap:var(--post-core-dimension-4)}.toast a{font-weight:var(--post-core-font-weight-400)}.toast hr{margin-block:var(--post-core-dimension-4) var(--post-core-dimension-12) !important}.toast>*{margin:0}.toast .toast-title{font-weight:var(--post-core-font-weight-700)}.toast-dismissible{pointer-events:auto;position:relative}.toast-dismissible:not(.alert-action){padding-inline-end:calc(var(--post-device-spacing-padding-11) + var(--post-device-spacing-gap-inline-2) + var(--post-core-dimension-24))}.toast-info{background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke);--post-current-fg: var(--post-scheme-color-interactive-notification-info-fg)}.toast-info::before{background-image:var(--post-signal-icon-info)}.toast-success{background-color:var(--post-scheme-color-interactive-notification-success-bg);border-color:var(--post-scheme-color-interactive-notification-success-stroke);--post-current-fg: var(--post-scheme-color-interactive-notification-success-fg)}.toast-success::before{background-image:var(--post-signal-icon-success)}.toast-warning{background-color:var(--post-scheme-color-interactive-notification-warning-bg);border-color:var(--post-scheme-color-interactive-notification-warning-stroke);--post-current-fg: var(--post-scheme-color-interactive-notification-warning-fg)}.toast-warning::before{background-image:var(--post-signal-icon-warning)}.toast-error{background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke);--post-current-fg: var(--post-scheme-color-interactive-notification-error-fg)}.toast-error::before{background-image:var(--post-signal-icon-error)}.toast-container{position:fixed;z-index:1080;display:flex;flex-direction:column;gap:1.5rem}.toast-container .toast{width:25rem;background-image:unset}.toast-container .toast button.toast-close-button{position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%);background-color:var(--post-scheme-color-interactive-primary-enabled-bg1);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom;padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.toast-container .toast button.toast-close-button.btn-link{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.toast-container .toast button.toast-close-button>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.toast-container .toast button.toast-close-button.btn-link{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.toast-container .toast button.toast-close-button>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.toast-container .toast button.toast-close-button:hover,.toast-container .toast button.toast-close-button:focus{opacity:1}.toast-container .toast button.toast-close-button:not(:disabled):hover,.toast-container .toast button.toast-close-button.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg);border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.toast-container .toast button.toast-close-button span{display:none}.toast-container .toast button.toast-close-button::before{content:"";display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5);mask-image:var(--post-icon-closex);background-color:currentColor}:root,:host{--post-icon-closex: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2xvc2V4Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLjY2IDIuMzVjLjI5LjI5LjI5Ljc3IDAgMS4wNkw5LjA3IDhsNC41OSA0LjU5Yy4yOS4yOS4yOS43NyAwIDEuMDZzLS43Ny4yOS0xLjA2IDBMOC4wMSA5LjA2bC00LjU5IDQuNTljLS4yOS4yOS0uNzcuMjktMS4wNiAwcy0uMjktLjc3IDAtMS4wNkw2Ljk1IDhsLTQuNi00LjU5Yy0uMjktLjI5LS4yOS0uNzcgMC0xLjA2cy43Ny0uMjkgMS4wNiAwTDggNi45NGw0LjU5LTQuNTljLjI5LS4yOS43Ny0uMjkgMS4wNiAwWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InMyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAuNDcgMy41MmMuMzQuMzQuMzQuOSAwIDEuMjRsLTcuMjUgNy4yNSA3LjI1IDcuMjVjLjM0LjM0LjM0LjkgMCAxLjI0cy0uOS4zNC0xLjI0IDBsLTcuMjUtNy4yNS03LjI1IDcuMjVjLS4zNC4zNC0uOS4zNC0xLjI0IDBzLS4zNC0uOSAwLTEuMjRsNy4yNS03LjI1LTcuMjMtNy4yNmMtLjM0LS4zNC0uMzQtLjkgMC0xLjI0cy45LS4zNCAxLjI0IDBMMTIgMTAuNzZsNy4yNS03LjI1Yy4zNC0uMzQuOS0uMzQgMS4yNCAwWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InMzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNMjcuMjggNC42OGMuMzkuMzkuMzkgMS4wMiAwIDEuNDFsLTkuOSA5LjkgOS45IDkuOWEuOTk2Ljk5NiAwIDEgMS0xLjQxIDEuNDFsLTkuOS05LjktOS45IDkuOWEuOTk2Ljk5NiAwIDEgMS0xLjQxLTEuNDFsOS45LTkuOS05LjktOS44OWEuOTk2Ljk5NiAwIDEgMSAxLjQxLTEuNDFsOS45IDkuOSA5LjktOS45YS45OTYuOTk2IDAgMCAxIDEuNDEgMFoiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHBhdGggZD0iTTM0LjE0IDUuODZjLjQ0LjQ0LjQ0IDEuMTUgMCAxLjU5TDIxLjU5IDIwbDEyLjU1IDEyLjU1Yy40NC40NC40NCAxLjE1IDAgMS41OXMtMS4xNS40NC0xLjU5IDBMMjAgMjEuNTkgNy40NSAzNC4xNGMtLjQ0LjQ0LTEuMTUuNDQtMS41OSAwcy0uNDQtMS4xNSAwLTEuNTlMMTguNDEgMjAgNS44NiA3LjQ1Yy0uNDQtLjQ0LS40NC0xLjE1IDAtMS41OXMxLjE1LS40NCAxLjU5IDBMMjAgMTguNDEgMzIuNTUgNS44NmMuNDQtLjQ0IDEuMTUtLjQ0IDEuNTkgMCIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNNDAuODkgNy4xYy40OS40OS40OSAxLjI4IDAgMS43N0wyNS43NiAyNGwxNS4xMyAxNS4xM2MuNDkuNDkuNDkgMS4yOCAwIDEuNzdzLTEuMjguNDktMS43NyAwTDIzLjk5IDI1Ljc3IDguODYgNDAuOWMtLjQ5LjQ5LTEuMjguNDktMS43NyAwcy0uNDktMS4yOCAwLTEuNzdMMjIuMjIgMjQgNy4wOSA4Ljg2Yy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTUuMTMgMTUuMTNMMzkuMTIgNy4wOWExLjI1IDEuMjUgMCAwIDEgMS43NyAwWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNNTQuNjMgOS4zN2MuOTguOTguOTggMi41NiAwIDMuNTRMMzUuNTQgMzJsMTkuMDkgMTkuMDljLjk4Ljk4Ljk4IDIuNTYgMCAzLjU0cy0yLjU2Ljk4LTMuNTQgMEwzMiAzNS41NCAxMi45MSA1NC42M2MtLjk4Ljk4LTIuNTYuOTgtMy41NCAwcy0uOTgtMi41NiAwLTMuNTRMMjguNDYgMzIgOS4zNyAxMi45MWMtLjk4LS45OC0uOTgtMi41NiAwLTMuNTRzMi41Ni0uOTggMy41NCAwTDMyIDI4LjQ2IDUxLjA5IDkuMzdjLjk4LS45OCAyLjU2LS45OCAzLjU0IDAiLz48L3N5bWJvbD48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMTYsIG5vbmUpIiBocmVmPSIjczE2Ii8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczI0LCBub25lKSIgaHJlZj0iI3MyNCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMzMiwgbm9uZSkiIGhyZWY9IiNzMzIiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNDAsIG5vbmUpIiBocmVmPSIjczQwIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQ4LCBub25lKSIgaHJlZj0iI3M0OCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM2NCwgbm9uZSkiIGhyZWY9IiNzNjQiLz48L3N5bWJvbD48L2RlZnM+PHN0eWxlPkBtZWRpYSAobWF4LXdpZHRoOiAyMy45OHB4KSB7Z3stLXMxNjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiAyNHB4KSBhbmQgKG1heC13aWR0aDogMzEuOThweCkge2d7LS1zMjQ6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMzJweCkgYW5kIChtYXgtd2lkdGg6IDM5Ljk4cHgpIHtney0tczMyOmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDQwcHgpIGFuZCAobWF4LXdpZHRoOiA0Ny45OHB4KSB7Z3stLXM0MDpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0OHB4KSBhbmQgKG1heC13aWR0aDogNjMuOThweCkge2d7LS1zNDg6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNjRweCkge2d7LS1zNjQ6YmxvY2s7fX08L3N0eWxlPjxnPjx1c2UgaHJlZj0iI2ktY2xvc2V4Ii8+PC9nPjwvc3ZnPg==")}@media screen and (max-width: 779.98px){.toast-container .toast{max-width:25rem}}@media screen and (max-width: 779.98px){.toast-container{right:1.5rem;left:1.5rem}.toast-container .toast{width:100%}}.toast-top-center,.toast-top-full-width,.toast-top-left,.toast-top-right{top:1.5rem}.toast-bottom-center,.toast-bottom-full-width,.toast-bottom-right,.toast-bottom-left{bottom:1.5rem}.toast-top-left,.toast-bottom-left,.toast-top-full-width,.toast-bottom-full-width,.toast-center-left{left:1.5rem}.toast-top-right,.toast-bottom-right,.toast-top-full-width,.toast-bottom-full-width,.toast-center-right{right:1.5rem}.toast-top-center,.toast-bottom-center{left:50%;transform:translateX(-50%)}.toast-center-left,.toast-center-right{top:50%;transform:translateY(-50%)}.toast-center-center{top:50%;left:50%;transform:translate(-50%, -50%)}.toast-top-full-width .toast,.toast-bottom-full-width .toast{width:100% !important}
1
+ .toast-container .toast button.toast-close-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}.toast-container .toast button.toast-close-button:not(:disabled):hover{text-decoration:none}.toast-container .toast button.toast-close-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.toast-container .toast button.toast-close-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.toast-container .toast button.toast-close-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-container .toast button.toast-close-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.toast-container .toast button.toast-close-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-container .toast button.toast-close-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-container .toast button.toast-close-button{border-width:1px !important;transition:none}.toast-container .toast button.toast-close-button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.toast-container .toast button.toast-close-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.toast{min-height:calc(var(--post-device-sizing-notification-icon-3) + 2*var(--post-device-spacing-padding-3));box-sizing:border-box;box-shadow:var(--post-device-elevation-300);border-radius:var(--post-device-border-radius-2);padding:var(--post-device-spacing-padding-3) var(--post-device-spacing-padding-11);padding-inline-start:calc(var(--post-device-spacing-padding-11) + var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-2));font-weight:var(--post-core-font-weight-400);border-style:var(--post-core-border-style-solid);border-width:var(--post-device-border-width-default);position:relative;color:var(--post-current-fg);background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast::before{background-image:var(--post-signal-icon-info);background-size:contain;background-repeat:no-repeat;background-position:center}.toast::before{content:"";display:block;position:absolute;height:var(--post-device-sizing-notification-icon-3);width:var(--post-device-sizing-notification-icon-3);left:var(--post-device-spacing-padding-11);top:var(--post-device-spacing-padding-3)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast{filter:none !important;border:2px solid CanvasText}}.toast{display:flex;flex-direction:column;justify-content:center;gap:var(--post-core-dimension-4)}.toast a{font-weight:var(--post-core-font-weight-400)}.toast hr{margin-block:var(--post-core-dimension-4) var(--post-core-dimension-12) !important}.toast>*{margin:0}.toast .toast-title{font-weight:var(--post-core-font-weight-700)}.toast-dismissible{pointer-events:auto;position:relative}.toast-dismissible:not(.alert-action){padding-inline-end:calc(var(--post-device-spacing-padding-11) + var(--post-device-spacing-gap-inline-2) + var(--post-core-dimension-24))}.toast-info{background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke);--post-current-fg: var(--post-scheme-color-interactive-notification-info-fg)}.toast-info::before{background-image:var(--post-signal-icon-info)}.toast-success{background-color:var(--post-scheme-color-interactive-notification-success-bg);border-color:var(--post-scheme-color-interactive-notification-success-stroke);--post-current-fg: var(--post-scheme-color-interactive-notification-success-fg)}.toast-success::before{background-image:var(--post-signal-icon-success)}.toast-warning{background-color:var(--post-scheme-color-interactive-notification-warning-bg);border-color:var(--post-scheme-color-interactive-notification-warning-stroke);--post-current-fg: var(--post-scheme-color-interactive-notification-warning-fg)}.toast-warning::before{background-image:var(--post-signal-icon-warning)}.toast-error{background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke);--post-current-fg: var(--post-scheme-color-interactive-notification-error-fg)}.toast-error::before{background-image:var(--post-signal-icon-error)}.toast-container{position:fixed;z-index:1080;display:flex;flex-direction:column-reverse;gap:1.5rem}.toast-container .toast{width:25rem;background-image:unset}.toast-container .toast button.toast-close-button{position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%);background-color:var(--post-scheme-color-interactive-primary-enabled-bg1);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom;padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.toast-container .toast button.toast-close-button.btn-link{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.toast-container .toast button.toast-close-button>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.toast-container .toast button.toast-close-button.btn-link{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.toast-container .toast button.toast-close-button>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.toast-container .toast button.toast-close-button:hover,.toast-container .toast button.toast-close-button:focus{opacity:1}.toast-container .toast button.toast-close-button:not(:disabled):hover,.toast-container .toast button.toast-close-button.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg);border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.toast-container .toast button.toast-close-button span{display:none}.toast-container .toast button.toast-close-button::before{content:"";display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5);mask-image:var(--post-icon-closex);background-color:currentColor}:root,:host{--post-icon-closex: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2xvc2V4Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLjY2IDIuMzVjLjI5LjI5LjI5Ljc3IDAgMS4wNkw5LjA3IDhsNC41OSA0LjU5Yy4yOS4yOS4yOS43NyAwIDEuMDZzLS43Ny4yOS0xLjA2IDBMOC4wMSA5LjA2bC00LjU5IDQuNTljLS4yOS4yOS0uNzcuMjktMS4wNiAwcy0uMjktLjc3IDAtMS4wNkw2Ljk1IDhsLTQuNi00LjU5Yy0uMjktLjI5LS4yOS0uNzcgMC0xLjA2cy43Ny0uMjkgMS4wNiAwTDggNi45NGw0LjU5LTQuNTljLjI5LS4yOS43Ny0uMjkgMS4wNiAwWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InMyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAuNDcgMy41MmMuMzQuMzQuMzQuOSAwIDEuMjRsLTcuMjUgNy4yNSA3LjI1IDcuMjVjLjM0LjM0LjM0LjkgMCAxLjI0cy0uOS4zNC0xLjI0IDBsLTcuMjUtNy4yNS03LjI1IDcuMjVjLS4zNC4zNC0uOS4zNC0xLjI0IDBzLS4zNC0uOSAwLTEuMjRsNy4yNS03LjI1LTcuMjMtNy4yNmMtLjM0LS4zNC0uMzQtLjkgMC0xLjI0cy45LS4zNCAxLjI0IDBMMTIgMTAuNzZsNy4yNS03LjI1Yy4zNC0uMzQuOS0uMzQgMS4yNCAwWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InMzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNMjcuMjggNC42OGMuMzkuMzkuMzkgMS4wMiAwIDEuNDFsLTkuOSA5LjkgOS45IDkuOWEuOTk2Ljk5NiAwIDEgMS0xLjQxIDEuNDFsLTkuOS05LjktOS45IDkuOWEuOTk2Ljk5NiAwIDEgMS0xLjQxLTEuNDFsOS45LTkuOS05LjktOS44OWEuOTk2Ljk5NiAwIDEgMSAxLjQxLTEuNDFsOS45IDkuOSA5LjktOS45YS45OTYuOTk2IDAgMCAxIDEuNDEgMFoiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHBhdGggZD0iTTM0LjE0IDUuODZjLjQ0LjQ0LjQ0IDEuMTUgMCAxLjU5TDIxLjU5IDIwbDEyLjU1IDEyLjU1Yy40NC40NC40NCAxLjE1IDAgMS41OXMtMS4xNS40NC0xLjU5IDBMMjAgMjEuNTkgNy40NSAzNC4xNGMtLjQ0LjQ0LTEuMTUuNDQtMS41OSAwcy0uNDQtMS4xNSAwLTEuNTlMMTguNDEgMjAgNS44NiA3LjQ1Yy0uNDQtLjQ0LS40NC0xLjE1IDAtMS41OXMxLjE1LS40NCAxLjU5IDBMMjAgMTguNDEgMzIuNTUgNS44NmMuNDQtLjQ0IDEuMTUtLjQ0IDEuNTkgMCIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNNDAuODkgNy4xYy40OS40OS40OSAxLjI4IDAgMS43N0wyNS43NiAyNGwxNS4xMyAxNS4xM2MuNDkuNDkuNDkgMS4yOCAwIDEuNzdzLTEuMjguNDktMS43NyAwTDIzLjk5IDI1Ljc3IDguODYgNDAuOWMtLjQ5LjQ5LTEuMjguNDktMS43NyAwcy0uNDktMS4yOCAwLTEuNzdMMjIuMjIgMjQgNy4wOSA4Ljg2Yy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTUuMTMgMTUuMTNMMzkuMTIgNy4wOWExLjI1IDEuMjUgMCAwIDEgMS43NyAwWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNNTQuNjMgOS4zN2MuOTguOTguOTggMi41NiAwIDMuNTRMMzUuNTQgMzJsMTkuMDkgMTkuMDljLjk4Ljk4Ljk4IDIuNTYgMCAzLjU0cy0yLjU2Ljk4LTMuNTQgMEwzMiAzNS41NCAxMi45MSA1NC42M2MtLjk4Ljk4LTIuNTYuOTgtMy41NCAwcy0uOTgtMi41NiAwLTMuNTRMMjguNDYgMzIgOS4zNyAxMi45MWMtLjk4LS45OC0uOTgtMi41NiAwLTMuNTRzMi41Ni0uOTggMy41NCAwTDMyIDI4LjQ2IDUxLjA5IDkuMzdjLjk4LS45OCAyLjU2LS45OCAzLjU0IDAiLz48L3N5bWJvbD48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMTYsIG5vbmUpIiBocmVmPSIjczE2Ii8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczI0LCBub25lKSIgaHJlZj0iI3MyNCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMzMiwgbm9uZSkiIGhyZWY9IiNzMzIiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNDAsIG5vbmUpIiBocmVmPSIjczQwIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQ4LCBub25lKSIgaHJlZj0iI3M0OCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM2NCwgbm9uZSkiIGhyZWY9IiNzNjQiLz48L3N5bWJvbD48L2RlZnM+PHN0eWxlPkBtZWRpYSAobWF4LXdpZHRoOiAyMy45OHB4KSB7Z3stLXMxNjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiAyNHB4KSBhbmQgKG1heC13aWR0aDogMzEuOThweCkge2d7LS1zMjQ6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMzJweCkgYW5kIChtYXgtd2lkdGg6IDM5Ljk4cHgpIHtney0tczMyOmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDQwcHgpIGFuZCAobWF4LXdpZHRoOiA0Ny45OHB4KSB7Z3stLXM0MDpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0OHB4KSBhbmQgKG1heC13aWR0aDogNjMuOThweCkge2d7LS1zNDg6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNjRweCkge2d7LS1zNjQ6YmxvY2s7fX08L3N0eWxlPjxnPjx1c2UgaHJlZj0iI2ktY2xvc2V4Ii8+PC9nPjwvc3ZnPg==")}@media screen and (max-width: 779.98px){.toast-container .toast{max-width:25rem}}@media screen and (max-width: 779.98px){.toast-container{right:1.5rem;left:1.5rem}.toast-container .toast{width:100%}}.toast-top-center,.toast-top-full-width,.toast-top-left,.toast-top-right{top:1.5rem}.toast-bottom-center,.toast-bottom-full-width,.toast-bottom-right,.toast-bottom-left{bottom:1.5rem}.toast-top-left,.toast-bottom-left,.toast-top-full-width,.toast-bottom-full-width,.toast-center-left{left:1.5rem}.toast-top-right,.toast-bottom-right,.toast-top-full-width,.toast-bottom-full-width,.toast-center-right{right:1.5rem}.toast-top-center,.toast-bottom-center{left:50%;transform:translateX(-50%)}.toast-center-left,.toast-center-right{top:50%;transform:translateY(-50%)}.toast-center-center{top:50%;left:50%;transform:translate(-50%, -50%)}.toast-top-full-width .toast,.toast-bottom-full-width .toast{width:100% !important}
package/components/toast.scss CHANGED
@@ -60,7 +60,7 @@ $spacer: 1.5rem;
60
60
  position: fixed;
61
61
  z-index: commons.$zindex-toast;
62
62
  display: flex;
63
- flex-direction: column;
63
+ flex-direction: column-reverse;
64
64
  gap: $spacer;
65
65
 
66
66
  .toast {
package/layout/_containers.scss CHANGED
@@ -35,7 +35,7 @@ tokens.$default-map: components.$post-container;
35
35
  // Offset for `.container` is: padding-inline + max(0px, (100vw - container-max-width) / 2)
36
36
  --post-container-offset: calc(
37
37
  var(--post-container-padding-inline) +
38
- max(0px, calc((100vw - var(--post-container-max-width)) / 2))
38
+ max(0px, calc((100vw - var(--post-container-max-width)) / 2))
39
39
  );
40
40
  }
41
41
 
package/layout/_section.scss CHANGED
@@ -17,7 +17,7 @@ tokens.$default-map: components.$post-container;
17
17
  --post-section-container-width: min(#{tokens.get('grid-max-width')}, var(--post-section-width));
18
18
  --post-section-container-content-offset: calc(
19
19
  (var(--post-section-width) - var(--post-section-container-width)) * 0.5 +
20
- var(--post-section-container-padding)
20
+ var(--post-section-container-padding)
21
21
  );
22
22
 
23
23
  @each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
package/mixins/_forms.scss CHANGED
@@ -69,7 +69,7 @@
69
69
  margin: tokens.get('checkbox-icon-padding-inner', components.$post-checkbox);
70
70
  margin-block: calc(
71
71
  tokens.get('checkbox-icon-padding-inner', components.$post-checkbox) +
72
- tokens.get('checkbox-icon-padding-container', components.$post-checkbox)
72
+ tokens.get('checkbox-icon-padding-container', components.$post-checkbox)
73
73
  );
74
74
  width: tokens.get('checkbox-icon-size', components.$post-checkbox);
75
75
  height: tokens.get('checkbox-icon-size', components.$post-checkbox);
@@ -193,7 +193,7 @@
193
193
  align-items: center;
194
194
  margin-block: calc(
195
195
  tokens.get('radio-button-icon-padding-block-inner', components.$post-radio-button) +
196
- tokens.get('radio-button-icon-padding-block-container', components.$post-radio-button)
196
+ tokens.get('radio-button-icon-padding-block-container', components.$post-radio-button)
197
197
  );
198
198
  margin-inline: tokens.get(
199
199
  'radio-button-icon-padding-inline-inner',
@@ -253,7 +253,7 @@
253
253
 
254
254
  @if $custom-hover-selector != null {
255
255
  @at-root #{$custom-hover-selector},
256
- &:not([disabled]):hover {
256
+ &:not([disabled]):hover {
257
257
  @include radio-button-hover();
258
258
  }
259
259
  } @else {
package/mixins/_list.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  margin-block: tokens.get('list-bullet-margin-block', elements.$post-listbullet);
7
7
  padding-inline-start: calc(
8
8
  #{tokens.get('list-bullet-item-icon-size', elements.$post-listbullet)} +
9
- #{tokens.get('list-bullet-item-icon-gap-inline', elements.$post-listbullet)}
9
+ #{tokens.get('list-bullet-item-icon-gap-inline', elements.$post-listbullet)}
10
10
  );
11
11
 
12
12
  > #{$child-selector} {
@@ -24,12 +24,12 @@
24
24
  box-sizing: content-box;
25
25
  margin-block-start: calc(
26
26
  (#{tokens.get('body-line-height', elements.$post-body)} * 0.5em) -
27
- (#{tokens.get('list-bullet-item-icon-bullet-size', elements.$post-listbullet)} * 0.5)
27
+ (#{tokens.get('list-bullet-item-icon-bullet-size', elements.$post-listbullet)} * 0.5)
28
28
  );
29
29
  margin-inline-start: calc(
30
30
  (#{tokens.get('list-bullet-item-icon-size', elements.$post-listbullet)} * -0.5) +
31
- (#{tokens.get('list-bullet-item-icon-bullet-size', elements.$post-listbullet)} * -0.5) +
32
- (#{tokens.get('post-list-bullet-item-icon-gap-inline', elements.$post-listbullet)} * -1)
31
+ (#{tokens.get('list-bullet-item-icon-bullet-size', elements.$post-listbullet)} * -0.5) +
32
+ (#{tokens.get('post-list-bullet-item-icon-gap-inline', elements.$post-listbullet)} * -1)
33
33
  );
34
34
  width: tokens.get('list-bullet-item-icon-bullet-size', elements.$post-listbullet);
35
35
  height: tokens.get('list-bullet-item-icon-bullet-size', elements.$post-listbullet);
@@ -50,7 +50,7 @@
50
50
  padding-inline-end: tokens.get('list-number-item-gap-block', elements.$post-listnumber);
51
51
  padding-inline-start: calc(
52
52
  tokens.get('list-number-item-icon-size', elements.$post-listnumber) +
53
- tokens.get('list-number-item-icon-gap-inline', elements.$post-listnumber)
53
+ tokens.get('list-number-item-icon-gap-inline', elements.$post-listnumber)
54
54
  );
55
55
 
56
56
  > #{$child-selector} {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swisspost/design-system-styles",
3
- "version": "10.4.0",
3
+ "version": "10.5.0",
4
4
  "description": "Design System Styles for the Swiss Post web platform.",
5
5
  "author": "Swiss Post <design-system@post.ch>",
6
6
  "license": "Apache-2.0",
@@ -19,11 +19,11 @@
19
19
  },
20
20
  "dependencies": {
21
21
  "@popperjs/core": "2.11.8",
22
- "@swisspost/design-system-icons": "10.4.0",
22
+ "@swisspost/design-system-icons": "10.5.0",
23
23
  "gulp-sourcemaps": "3.0.0"
24
24
  },
25
25
  "devDependencies": {
26
- "@swisspost/design-system-tokens": "10.4.0",
26
+ "@swisspost/design-system-tokens": "10.5.0",
27
27
  "@types/node": "24.0.0",
28
28
  "autoprefixer": "10.5.0",
29
29
  "copyfiles": "2.4.1",
@@ -32,12 +32,12 @@
32
32
  "gulp-newer": "1.4.0",
33
33
  "gulp-postcss": "10.0.0",
34
34
  "gulp-sass": "6.0.1",
35
- "postcss": "8.5.23",
35
+ "postcss": "8.5.26",
36
36
  "postcss-scss": "4.0.9",
37
37
  "prettier": "3.6.2",
38
- "rimraf": "6.0.1",
38
+ "rimraf": "6.1.3",
39
39
  "sass-embedded": "1.78.0",
40
- "stylelint-config-sass-guidelines": "11.1.0",
40
+ "stylelint-config-sass-guidelines": "13.0.0",
41
41
  "stylelint": "16.26.1",
42
42
  "stylelint-prettier": "5.0.3",
43
43
  "stylelint-scss": "6.12.1",