@swisspost/design-system-styles 9.0.0-next.2 → 9.0.0-next.21

package/components/globals/post-footer.scss

@@ -0,0 +1,113 @@
+@use '../../variables/color';
+@use '../../mixins/media';
+@use '../../mixins/list';
+@use '../../mixins/utilities';
+
+post-footer {
+  // mobile
+  --post-footer-grid-list-title-display: none;
+  --post-footer-grid-list-title-gap: 0;
+  --post-footer-grid-list-item-gap: 8px;
+
+  --post-footer-socialmedia-list-item-gap: 8px;
+  --post-footer-app-list-item-gap: 8px;
+  --post-footer-businesssector-list-item-gap: 8px;
+  --post-footer-meta-list-item-gap: 8px;
+
+  // tablet sm
+  @include media.min(sm) {
+    --post-footer-grid-list-title-display: block;
+    --post-footer-grid-list-title-gap: 8px;
+
+    --post-footer-socialmedia-list-item-gap: 16px;
+    --post-footer-businesssector-list-item-gap: 24px;
+    --post-footer-meta-list-item-gap: 16px;
+  }
+
+  // desktop lg
+  @include media.min(lg) {
+    --post-footer-meta-list-item-gap: 24px;
+  }
+
+  :is(h3, .h3) {
+    margin: 0;
+    font-size: inherit;
+  }
+
+  a {
+    &:not(.btn-icon, .app-store-badge) {
+      display: block;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+
+        @include utilities.high-contrast-mode() {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    &.btn-icon {
+      @include utilities.high-contrast-mode() {
+        color: CanvasText !important;
+      }
+
+      &:hover {
+        @include utilities.high-contrast-mode() {
+          color: LinkText !important;
+        }
+      }
+    }
+  }
+
+  post-list {
+    &[slot|='grid'] {
+      :is(h3, .h3) {
+        display: var(--post-footer-grid-list-title-display);
+        margin-block-end: var(--post-footer-grid-list-title-gap);
+      }
+
+      > [role='list'] {
+        @include list.list-bullet($child-selector: 'post-list-item');
+        margin-block: 0;
+        padding-inline-start: 0;
+        list-style: none;
+
+        > post-list-item {
+          &::before {
+            display: none;
+          }
+
+          ~ post-list-item {
+            margin-block-start: var(--post-footer-grid-list-item-gap);
+          }
+        }
+      }
+    }
+
+    &:is([slot='socialmedia'], [slot='app'], [slot='businesssectors'], [slot='meta']) {
+      > [role='list'] {
+        @include list.list-inline($child-selector: 'post-list-item');
+        margin: 0;
+      }
+    }
+
+    &[slot='socialmedia'] > [role='list'] {
+      gap: var(--post-footer-socialmedia-list-item-gap);
+    }
+
+    &[slot='app'] > [role='list'] {
+      gap: var(--post-footer-app-list-item-gap);
+    }
+
+    &[slot='businesssectors'] > [role='list'] {
+      gap: var(--post-footer-businesssector-list-item-gap);
+    }
+
+    &[slot='meta'] > [role='list'] {
+      row-gap: 0;
+      column-gap: var(--post-footer-meta-list-item-gap);
+    }
+  }
+}

package/components/header/_mixins.scss

@@ -0,0 +1,48 @@
+@use '../../mixins/icons';
+
+@mixin subsidiary-header-interactive() {
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 24px;
+  font-size: 16px;
+  padding: 3px 10px;
+}
+
+@mixin mobile-header-interactive() {
+  width: 100%;
+  min-width: 100%;
+  height: 48px;
+  padding-inline: 8px 12px;
+  gap: 16px;
+  font-weight: 400;
+  position: relative;
+
+  @content;
+
+  &::before {
+    content: '';
+    background-color: #050400;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    position: absolute;
+    left: 0;
+  }
+
+  &.selected,
+  &[aria-expanded='true'] {
+    background-color: #050400;
+    color: #fff;
+  }
+
+  &:hover {
+    background-color: #504f4b;
+    color: #fff;
+
+    &::before {
+      background-color: #504f4b;
+    }
+  }
+}

package/components/header/index.css

@@ -0,0 +1 @@
+body:has(post-header){overflow-x:hidden}post-header{--header-expanded-height: calc( var(--global-header-height) + var(--local-header-height) + 1px /* bottom border */ );--header-reduced-height: calc( var(--global-header-reduced-height) + var(--main-navigation-height) + 1px /* bottom border */ );--header-height: calc( var(--header-expanded-height) - min( var(--header-scroll-top, 0px), calc(var(--header-expanded-height) - var(--header-reduced-height)) ) )}@media screen and (min-width: 1024px){post-header{--global-header-height: 72px;--global-header-reduced-height: 24px;--main-navigation-height: 56px;--local-header-height: 112px}}@media screen and (max-width: 1023.98px){post-header{--header-reduced-height: var(--header-expanded-height);--global-header-height: 64px;--global-header-reduced-height: var(--global-header-height);--local-header-height: 48px;--main-navigation-height: 0px}}@media screen and (min-width: 780px){post-header{--local-header-min-height: 56px}}@media screen and (max-width: 779.98px){post-header{--local-header-min-height: 48px}}post-header:not(:has([slot=title])){--local-header-height: var(--main-navigation-height) !important}post-header:not(:defined){height:var(--header-height)}@media screen and (min-width: 1024px){post-header ul[slot=meta-navigation]{gap:4px}}@media screen and (max-width: 1023.98px){post-header ul[slot=meta-navigation]{flex-direction:column;gap:0}post-header ul[slot=meta-navigation] a,post-header ul[slot=meta-navigation] button{justify-content:space-between;border-radius:0;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-header ul[slot=meta-navigation] a::before,post-header ul[slot=meta-navigation] button::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-header ul[slot=meta-navigation] a.selected,post-header ul[slot=meta-navigation] a[aria-expanded=true],post-header ul[slot=meta-navigation] button.selected,post-header ul[slot=meta-navigation] button[aria-expanded=true]{background-color:#050400;color:#fff}post-header ul[slot=meta-navigation] a:hover,post-header ul[slot=meta-navigation] button:hover{background-color:#504f4b;color:#fff}post-header ul[slot=meta-navigation] a:hover::before,post-header ul[slot=meta-navigation] button:hover::before{background-color:#504f4b}post-header ul[slot=meta-navigation] a:is(:focus-visible,:has(:focus-visible),.pretend-focus),post-header ul[slot=meta-navigation] button:is(:focus-visible,:has(:focus-visible),.pretend-focus){border-radius:4px}@supports not selector(:has(:focus-visible)){post-header ul[slot=meta-navigation] a:is(:focus-visible,:focus-within,.pretend-focus),post-header ul[slot=meta-navigation] button:is(:focus-visible,:focus-within,.pretend-focus){border-radius:4px}}}@media screen and (max-width: 599.98px){post-header ul[slot=meta-navigation] a,post-header ul[slot=meta-navigation] button{font-size:14px}}post-header a:not(post-mainnavigation *),post-header post-togglebutton:not(post-mainnavigation *){text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 10px}@media screen and (min-width: 600px){post-header a:not(post-mainnavigation *) post-icon,post-header post-togglebutton:not(post-mainnavigation *) post-icon{height:22px;width:22px}}@media screen and (max-width: 599.98px){post-header a:not(post-mainnavigation *),post-header post-togglebutton:not(post-mainnavigation *){padding:8px}post-header a:not(post-mainnavigation *) post-icon,post-header post-togglebutton:not(post-mainnavigation *) post-icon{height:24px;width:24px}post-header a:not(post-mainnavigation *) .visually-hidden-sm,post-header post-togglebutton:not(post-mainnavigation *) .visually-hidden-sm{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}}post-header a.selected:not(post-mainnavigation *),post-header post-togglebutton[aria-pressed=true]:not(post-mainnavigation *){color:#fff;background:#050400}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-header post-togglebutton{background-color:ButtonFace !important;border-color:ButtonBorder !important;color:ButtonText !important}post-header post-togglebutton:hover{background-color:Highlight !important}}

package/components/header/index.scss

@@ -0,0 +1,131 @@
+@use '../../mixins/media';
+@use '../../mixins/utilities';
+@use '../../variables/color';
+
+@use 'mixins' as *;
+
+body:has(post-header) {
+  overflow-x: hidden;
+}
+
+post-header {
+  --header-expanded-height: calc(
+    var(--global-header-height) + var(--local-header-height) + 1px /* bottom border */
+  );
+  --header-reduced-height: calc(
+    var(--global-header-reduced-height) + var(--main-navigation-height) + 1px /* bottom border */
+  );
+  --header-height: calc(
+    var(--header-expanded-height) - min(
+        var(--header-scroll-top, 0px),
+        calc(var(--header-expanded-height) - var(--header-reduced-height))
+      )
+  );
+
+  @include media.min(lg) {
+    --global-header-height: 72px;
+    --global-header-reduced-height: 24px;
+    --main-navigation-height: 56px;
+    --local-header-height: 112px;
+  }
+
+  @include media.max(lg) {
+    --header-reduced-height: var(--header-expanded-height);
+    --global-header-height: 64px;
+    --global-header-reduced-height: var(--global-header-height);
+    --local-header-height: 48px;
+    --main-navigation-height: 0px; /* stylelint-disable-line length-zero-no-unit */ /* needed for calculation */
+  }
+
+  @include media.min(md) {
+    --local-header-min-height: 56px;
+  }
+
+  @include media.max(md) {
+    --local-header-min-height: 48px;
+  }
+
+  &:not(:has([slot='title'])) {
+    --local-header-height: var(--main-navigation-height) !important;
+  }
+
+  &:not(:defined) {
+    height: var(--header-height);
+  }
+
+  ul[slot='meta-navigation'] {
+    @include media.min(lg) {
+      gap: 4px;
+    }
+
+    @include media.max(lg) {
+      flex-direction: column;
+      gap: 0;
+
+      a,
+      button {
+        justify-content: space-between;
+        border-radius: 0;
+        @include mobile-header-interactive;
+
+        @include utilities.focus-style-custom {
+          border-radius: 4px;
+        }
+      }
+    }
+
+    @include media.max(sm) {
+      a,
+      button {
+        font-size: 14px;
+      }
+    }
+  }
+
+  a,
+  post-togglebutton {
+    &:not(post-mainnavigation *) {
+      @include subsidiary-header-interactive;
+
+      @include media.min(sm) {
+        post-icon {
+          height: 22px;
+          width: 22px;
+        }
+      }
+
+      @include media.max(sm) {
+        padding: 8px;
+
+        post-icon {
+          height: 24px;
+          width: 24px;
+        }
+
+        .visually-hidden-sm {
+          @include utilities.visuallyhidden;
+        }
+      }
+    }
+  }
+
+  a.selected,
+  post-togglebutton[aria-pressed='true'] {
+    &:not(post-mainnavigation *) {
+      color: color.$white;
+      background: #050400;
+    }
+  }
+
+  post-togglebutton {
+    @include utilities.high-contrast-mode() {
+      background-color: ButtonFace !important;
+      border-color: ButtonBorder !important;
+      color: ButtonText !important;
+
+      &:hover {
+        background-color: Highlight !important;
+      }
+    }
+  }
+}

package/components/icon-button.css

@@ -0,0 +1 @@
+.btn-icon{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}.btn-icon>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon.btn-sm{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}.btn-icon.btn-sm>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-lg{padding:0;width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);min-height:0;vertical-align:text-bottom}.btn-icon.btn-lg>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}

package/components/icon-button.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use './../variables/components/button';
+@use './../mixins/icon-button' as icon-button-mx;
+@use '../functions/tokens';
+@use '../tokens/components';
+
+tokens.$default-map: components.$post-icon-button;
+
+.btn-icon {
+  @include icon-button-mx.icon-button();
+
+  @each $size in button.$btn-non-default-sizes {
+    &.btn-#{$size} {
+      @include icon-button-mx.icon-button($size);
+    }
+  }
+}

package/components/icon-close-button.css

@@ -0,0 +1 @@
+.btn-icon-close{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-icon-close>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}

package/components/icon-close-button.scss

@@ -0,0 +1,29 @@
+@use '../functions/tokens';
+@use '../tokens/components';
+@use './../mixins/utilities';
+
+tokens.$default-map: components.$post-close;
+
+.btn-icon-close {
+  padding: 0;
+  border: unset;
+  min-height: unset;
+  min-width: unset;
+  width: tokens.get('close-size');
+  height: tokens.get('close-size');
+  border-radius: tokens.get('close-border-radius');
+  background-color: tokens.get('close-enabled-bg');
+  color: tokens.get('close-enabled-fg');
+
+  > post-icon {
+    min-width: tokens.get('close-icon-size');
+    width: tokens.get('close-icon-size');
+    height: tokens.get('close-icon-size');
+  }
+
+  @include utilities.not-disabled-hover() {
+    cursor: pointer;
+    background-color: tokens.get('close-hover-bg');
+    color: tokens.get('close-hover-fg');
+  }
+}

package/components/intranet-header/_icon.scss

@@ -2,5 +2,5 @@
 
 .navbar-toggler .pi-menu,
 #sidebar .pi-menu {
-  @include icon-mixin.pi(2070);
+  @include icon-mixin.icon(2070);
 }

package/components/intranet-header/_index.scss

@@ -1,5 +1,3 @@
-@forward './../../variables/options';
-
 @use './../../themes/bootstrap/nav';
 @use './../../themes/bootstrap/navbar';
 

package/components/intranet-header/_language-chooser.scss

@@ -2,7 +2,8 @@
 @use './../../variables/spacing';
 @use './../../variables/commons';
 
-@use './../../mixins/icons' as icon-mixin;
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
 
 #languageParent {
   min-width: 18rem;
@@ -14,7 +15,7 @@
 
     .dropdown-item {
       flex: auto 1 1;
-      padding: spacing.$size-small-regular 0;
+      padding: tokens.get('utility-gap-12', utilities.$post-spacing) 0;
       border: commons.$border-width solid color.$gray-20;
       border-top: 0;
       border-left: 0;

package/components/intranet-header/_nav-overflow.scss

@@ -7,7 +7,7 @@
 
 .top-navigation {
   .nav-item#more {
-    @include media-breakpoint-down(rg) {
+    @include media-breakpoint-down(sm) {
       > span {
         display: none !important;
       }
@@ -52,7 +52,7 @@
       }
     }
 
-    @include media-breakpoint-down(rg) {
+    @include media-breakpoint-down(sm) {
       display: list-item !important;
       width: auto !important;
       transform: none !important;

package/components/intranet-header/_scaffolding.scss

@@ -63,7 +63,7 @@
     flex-direction: column;
   }
 
-  @include media-breakpoint-down(rg) {
+  @include media-breakpoint-down(sm) {
     &.header-big {
       .header-margin {
         margin-top: intranet-header.$header-size;

package/components/intranet-header/_searchbox.scss

@@ -8,7 +8,7 @@
 
 header.navbar {
   .search-textbox {
-    @include media-breakpoint-down(rg) {
+    @include media-breakpoint-down(sm) {
       border-top: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
     }
     @include media-breakpoint-up(md) {

package/components/intranet-header/_sidebar.scss

@@ -1,10 +1,14 @@
-@use './../../mixins/utilities';
+@use './../../mixins/utilities' as utilities-mx;
 @use './../../variables/color';
 @use './../../variables/commons';
 @use './../../variables/spacing';
 @use './../../variables/components/intranet-header';
 
 @use './../../themes/bootstrap/core' as *;
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Sidebar
 #sidebar {
@@ -14,6 +18,7 @@
   top: 0;
   bottom: 0;
   left: 0;
+  background-color: color.$light;
 
   flex: 1 0 auto;
   flex-direction: column;
@@ -27,7 +32,7 @@
       background: none;
       border: 0;
 
-      @include utilities.focus-style() {
+      @include utilities-mx.focus-style {
         border-radius: commons.$border-radius;
       }
     }
@@ -49,25 +54,19 @@
 
       margin: spacing.$spacer * -1;
       margin-bottom: 0;
-      padding: spacing.$size-mini;
-      padding-left: spacing.$size-regular;
+      padding: tokens.get('utility-gap-8');
+      padding-left: tokens.get('utility-gap-16');
       border-bottom: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
       background-color: color.$white;
 
       button {
-        padding: spacing.$size-mini;
+        padding: tokens.get('utility-gap-8');
       }
 
       &:hover,
       &:focus {
         background-color: color.$light;
       }
-
-      i.pi {
-        height: spacing.$spacer;
-        line-height: spacing.$spacer;
-        vertical-align: text-top;
-      }
     }
 
     &:not(.closed) > div > ul > li:first-child {
@@ -98,6 +97,7 @@
     padding: spacing.$spacer 0;
     overflow-x: hidden;
     overflow-y: auto; // Scrollable contents if viewport is shorter than content.
+    background-color: color.$light;
 
     @include media-breakpoint-down(md) {
       bottom: auto;

package/components/intranet-header/_top-navigation.scss

@@ -72,7 +72,7 @@
   }
 }
 
-@include media-breakpoint-down(rg) {
+@include media-breakpoint-down(sm) {
   .top-navigation #navbarsDefault {
     border-top: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
   }

package/components/list-check.css

@@ -0,0 +1 @@
+ul.list-check{margin-block:0;padding-inline-start:0;list-style:none;display:flex;flex-direction:column;align-items:flex-start;list-style:none;padding-block:var(--post-device-spacing-padding-block-8) var(--post-device-spacing-padding-block-8);padding-inline-start:calc(var(--post-device-sizing-icon-1) + 2*var(--post-device-spacing-padding-16) + var(--post-device-spacing-gap-inline-2) + 2*var(--post-device-spacing-padding-4));gap:var(--post-device-spacing-gap-block-3)}ul.list-check>li{position:relative;color:var(--post-scheme-color-interactive-primary-enabled-fg1);padding-block:var(--post-device-spacing-padding-block-6)}ul.list-check>li::before{display:block;position:absolute;top:0;left:0;margin-inline-start:calc(-1*(var(--post-device-sizing-icon-1) + 2*var(--post-device-spacing-padding-16) + var(--post-device-spacing-gap-inline-2) + var(--post-device-spacing-padding-4)));margin-block:calc(-1*var(--post-device-spacing-padding-block-6));background:var(--post-scheme-color-surface-accent-bg);width:calc(var(--post-device-sizing-icon-1) + 2*var(--post-device-spacing-padding-16));height:calc(var(--post-device-sizing-icon-1) + 2*var(--post-device-spacing-padding-16));content:"";border-radius:50%}@media screen and (max-width: 599.98px){ul.list-check>li::before{margin-block:var(--post-device-spacing-padding-18);padding-inline:var(--post-device-spacing-padding-4)}}ul.list-check>li::after{display:block;position:absolute;margin-inline-start:calc(-1*(var(--post-device-sizing-icon-1) + 2*var(--post-device-spacing-padding-16) + var(--post-device-spacing-gap-inline-2) + var(--post-device-spacing-padding-4)));margin-block:calc(-1*var(--post-device-spacing-padding-block-6));top:var(--post-device-spacing-padding-16);left:var(--post-device-spacing-padding-16);width:var(--post-device-sizing-icon-1);height:var(--post-device-sizing-icon-1);content:"";mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 23.6-7.2-7.067 1.067-1.067 6.133 6.267L25.467 8.8l1.067 1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-surface-accent-fg)}@media screen and (max-width: 599.98px){ul.list-check>li::after{margin-block:var(--post-device-spacing-padding-18);padding-inline:var(--post-device-spacing-padding-4)}}

package/components/list-check.scss

@@ -0,0 +1,79 @@
+@use '../functions/tokens';
+@use '../mixins/icons' as icon-mixin;
+@use '../tokens/components';
+@use '../mixins/media';
+@use '../mixins/utilities';
+
+tokens.$default-map: components.$post-listcheck;
+
+ul.list-check {
+  @include utilities.reset-list;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  list-style: none;
+  padding-block: tokens.get('list-check-margin-block') tokens.get('list-check-margin-block');
+  padding-inline-start: calc(
+    #{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')} + #{tokens.get(
+        'list-check-icon-gap-inline'
+      )} + 2 * #{tokens.get('list-check-icon-container-inline')}
+  );
+  gap: tokens.get('list-check-item-gap-block-text');
+
+  > li {
+    position: relative;
+    color: tokens.get('list-check-color-text-fg');
+    padding-block: tokens.get('list-check-text-padding');
+
+    &::before {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin-inline-start: calc(
+        -1 * (#{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')} +
+              #{tokens.get('list-check-icon-gap-inline')} + #{tokens.get(
+                'list-check-icon-container-inline'
+              )})
+      );
+      margin-block: calc(-1 * tokens.get('list-check-text-padding'));
+
+      background: tokens.get('list-check-color-icon-bg');
+      width: calc(
+        #{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')}
+      );
+      height: calc(
+        #{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')}
+      );
+      content: '';
+      border-radius: 50%;
+      @include media.max(sm) {
+        margin-block: tokens.get('list-check-icon-container-block');
+        padding-inline: tokens.get('list-check-icon-container-inline');
+      }
+    }
+
+    &::after {
+      display: block;
+      position: absolute;
+      margin-inline-start: calc(
+        -1 * (#{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')} +
+              #{tokens.get('list-check-icon-gap-inline')} + #{tokens.get(
+                'list-check-icon-container-inline'
+              )})
+      );
+      margin-block: calc(-1 * tokens.get('list-check-text-padding'));
+      top: tokens.get('list-check-padding-icon');
+      left: tokens.get('list-check-padding-icon');
+      width: tokens.get('list-check-sizing-icon');
+      height: tokens.get('list-check-sizing-icon');
+      content: '';
+      @include icon-mixin.icon('3035');
+      color: tokens.get('list-check-color-icon-fg');
+      @include media.max(sm) {
+        margin-block: tokens.get('list-check-icon-container-block');
+        padding-inline: tokens.get('list-check-icon-container-inline');
+      }
+    }
+  }
+}

package/components/list-group.css

@@ -1 +1 @@
-.list-group{--bs-list-group-color: var(--bs-body-color);--bs-list-group-bg: #fff;--bs-list-group-border-color: hsl(0, 0%, 90%);--bs-list-group-border-width: 1px;--bs-list-group-border-radius: 0;--bs-list-group-item-padding-x: 1.5rem;--bs-list-group-item-padding-y: 0.75rem;--bs-list-group-action-color: hsl(0, 0%, 40%);--bs-list-group-action-hover-color: #000;--bs-list-group-action-hover-bg: #faf9f8;--bs-list-group-action-active-color: #000;--bs-list-group-action-active-bg: hsl(0, 0%, 80%);--bs-list-group-disabled-color: hsl(0, 0%, 80%);--bs-list-group-disabled-bg: #fff;--bs-list-group-active-color: #fff;--bs-list-group-active-bg: hsl(0, 0%, 20%);--bs-list-group-active-border-color: hsl(0, 0%, 20%);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:var(--bs-list-group-border-radius)}.list-group-numbered{list-style-type:none;counter-reset:section}.list-group-numbered>.list-group-item::before{content:counters(section, ".") ". ";counter-increment:section}.list-group-item-action{width:100%;color:var(--bs-list-group-action-color);text-align:inherit}.list-group-item-action:hover,.list-group-item-action:focus{z-index:1;color:var(--bs-list-group-action-hover-color);text-decoration:none;background-color:var(--bs-list-group-action-hover-bg)}.list-group-item-action:active{color:var(--bs-list-group-action-active-color);background-color:var(--bs-list-group-action-active-bg)}.list-group-item{position:relative;display:block;padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);color:var(--bs-list-group-color);text-decoration:none;background-color:var(--bs-list-group-bg);border:var(--bs-list-group-border-width) solid var(--bs-list-group-border-color)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:var(--bs-list-group-disabled-color);pointer-events:none;background-color:var(--bs-list-group-disabled-bg)}.list-group-item.active{z-index:2;color:var(--bs-list-group-active-color);background-color:var(--bs-list-group-active-bg);border-color:var(--bs-list-group-active-border-color)}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:calc(-1*var(--bs-list-group-border-width));border-top-width:var(--bs-list-group-border-width)}.list-group-horizontal{flex-direction:row}.list-group-horizontal>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal>.list-group-item.active{margin-top:0}.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:calc(-1*var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}@media(min-width: 400px){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-sm>.list-group-item.active{margin-top:0}.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:calc(-1*var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media(min-width: 600px){.list-group-horizontal-rg{flex-direction:row}.list-group-horizontal-rg>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-rg>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-rg>.list-group-item.active{margin-top:0}.list-group-horizontal-rg>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-rg>.list-group-item+.list-group-item.active{margin-left:calc(-1*var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media(min-width: 780px){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-md>.list-group-item.active{margin-top:0}.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:calc(-1*var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media(min-width: 1024px){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-lg>.list-group-item.active{margin-top:0}.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:calc(-1*var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media(min-width: 1280px){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xl>.list-group-item.active{margin-top:0}.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:calc(-1*var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media(min-width: 1440px){.list-group-horizontal-xxl{flex-direction:row}.list-group-horizontal-xxl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xxl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xxl>.list-group-item.active{margin-top:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item.active{margin-left:calc(-1*var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 var(--bs-list-group-border-width)}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{--bs-list-group-color: var(--bs-primary-text-emphasis);--bs-list-group-bg: var(--bs-primary-bg-subtle);--bs-list-group-border-color: var(--bs-primary-border-subtle);--bs-list-group-action-hover-color: var(--bs-emphasis-color);--bs-list-group-action-hover-bg: var(--bs-primary-border-subtle);--bs-list-group-action-active-color: var(--bs-emphasis-color);--bs-list-group-action-active-bg: var(--bs-primary-border-subtle);--bs-list-group-active-color: var(--bs-primary-bg-subtle);--bs-list-group-active-bg: var(--bs-primary-text-emphasis);--bs-list-group-active-border-color: var(--bs-primary-text-emphasis)}.list-group-item-secondary{--bs-list-group-color: var(--bs-secondary-text-emphasis);--bs-list-group-bg: var(--bs-secondary-bg-subtle);--bs-list-group-border-color: var(--bs-secondary-border-subtle);--bs-list-group-action-hover-color: var(--bs-emphasis-color);--bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle);--bs-list-group-action-active-color: var(--bs-emphasis-color);--bs-list-group-action-active-bg: var(--bs-secondary-border-subtle);--bs-list-group-active-color: var(--bs-secondary-bg-subtle);--bs-list-group-active-bg: var(--bs-secondary-text-emphasis);--bs-list-group-active-border-color: var(--bs-secondary-text-emphasis)}.list-group-item-light{--bs-list-group-color: var(--bs-light-text-emphasis);--bs-list-group-bg: var(--bs-light-bg-subtle);--bs-list-group-border-color: var(--bs-light-border-subtle);--bs-list-group-action-hover-color: var(--bs-emphasis-color);--bs-list-group-action-hover-bg: var(--bs-light-border-subtle);--bs-list-group-action-active-color: var(--bs-emphasis-color);--bs-list-group-action-active-bg: var(--bs-light-border-subtle);--bs-list-group-active-color: var(--bs-light-bg-subtle);--bs-list-group-active-bg: var(--bs-light-text-emphasis);--bs-list-group-active-border-color: var(--bs-light-text-emphasis)}.list-group-item-dark{--bs-list-group-color: var(--bs-dark-text-emphasis);--bs-list-group-bg: var(--bs-dark-bg-subtle);--bs-list-group-border-color: var(--bs-dark-border-subtle);--bs-list-group-action-hover-color: var(--bs-emphasis-color);--bs-list-group-action-hover-bg: var(--bs-dark-border-subtle);--bs-list-group-action-active-color: var(--bs-emphasis-color);--bs-list-group-action-active-bg: var(--bs-dark-border-subtle);--bs-list-group-active-color: var(--bs-dark-bg-subtle);--bs-list-group-active-bg: var(--bs-dark-text-emphasis);--bs-list-group-active-border-color: var(--bs-dark-text-emphasis)}.list-group-item-success{--bs-list-group-color: var(--bs-success-text-emphasis);--bs-list-group-bg: var(--bs-success-bg-subtle);--bs-list-group-border-color: var(--bs-success-border-subtle);--bs-list-group-action-hover-color: var(--bs-emphasis-color);--bs-list-group-action-hover-bg: var(--bs-success-border-subtle);--bs-list-group-action-active-color: var(--bs-emphasis-color);--bs-list-group-action-active-bg: var(--bs-success-border-subtle);--bs-list-group-active-color: var(--bs-success-bg-subtle);--bs-list-group-active-bg: var(--bs-success-text-emphasis);--bs-list-group-active-border-color: var(--bs-success-text-emphasis)}.list-group-item-warning{--bs-list-group-color: var(--bs-warning-text-emphasis);--bs-list-group-bg: var(--bs-warning-bg-subtle);--bs-list-group-border-color: var(--bs-warning-border-subtle);--bs-list-group-action-hover-color: var(--bs-emphasis-color);--bs-list-group-action-hover-bg: var(--bs-warning-border-subtle);--bs-list-group-action-active-color: var(--bs-emphasis-color);--bs-list-group-action-active-bg: var(--bs-warning-border-subtle);--bs-list-group-active-color: var(--bs-warning-bg-subtle);--bs-list-group-active-bg: var(--bs-warning-text-emphasis);--bs-list-group-active-border-color: var(--bs-warning-text-emphasis)}.list-group-item-error{--bs-list-group-color: var(--bs-error-text-emphasis);--bs-list-group-bg: var(--bs-error-bg-subtle);--bs-list-group-border-color: var(--bs-error-border-subtle);--bs-list-group-action-hover-color: var(--bs-emphasis-color);--bs-list-group-action-hover-bg: var(--bs-error-border-subtle);--bs-list-group-action-active-color: var(--bs-emphasis-color);--bs-list-group-action-active-bg: var(--bs-error-border-subtle);--bs-list-group-active-color: var(--bs-error-bg-subtle);--bs-list-group-active-bg: var(--bs-error-text-emphasis);--bs-list-group-active-border-color: var(--bs-error-text-emphasis)}.list-group-item-info{--bs-list-group-color: var(--bs-info-text-emphasis);--bs-list-group-bg: var(--bs-info-bg-subtle);--bs-list-group-border-color: var(--bs-info-border-subtle);--bs-list-group-action-hover-color: var(--bs-emphasis-color);--bs-list-group-action-hover-bg: var(--bs-info-border-subtle);--bs-list-group-action-active-color: var(--bs-emphasis-color);--bs-list-group-action-active-bg: var(--bs-info-border-subtle);--bs-list-group-active-color: var(--bs-info-bg-subtle);--bs-list-group-active-bg: var(--bs-info-text-emphasis);--bs-list-group-active-border-color: var(--bs-info-text-emphasis)}.list-group{background-color:rgba(0,0,0,0)}.list-group-box{padding-top:.5rem;padding-bottom:.5rem;box-shadow:0 0 5px 0 rgba(0,0,0,.3)}.list-group-item-action{transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1),background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){.list-group-item-action{transition:none}}.list-group-item-action:hover .list-group-item-right-svg,.list-group-item-action:focus .list-group-item-right-svg{transform:translateX(0.25rem)}.list-group-item-action .list-group-item-right-svg{transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){.list-group-item-action .list-group-item-right-svg{transition:none}}.list-group-item-action-minimal:hover,.list-group-item-action-minimal:focus,.list-group-item-action-transparent:hover,.list-group-item-action-transparent:focus{background-color:rgba(0,0,0,0)}.list-group-item-action-inverted{background-color:rgba(0,0,0,0)}.list-group-item-action-inverted:hover,.list-group-item-action-inverted:focus{background-color:#fff}.list-group-item{display:flex;align-content:center;align-items:center;justify-content:space-between;padding-right:.75rem;padding-left:.75rem;background-color:rgba(0,0,0,0);font-weight:normal;text-decoration:none;border-collapse:collapse;border-right:0;border-left:0}@media(min-width: 600px){.list-group-item{padding-left:1.5rem}.list-group-item-minimal{padding-left:0}.list-group-item-transparent{padding-right:.5rem;padding-left:1rem}}@media(min-width: 1024px){.list-group-item-big{padding:1.25rem .5rem 1.25rem 1rem}}.list-group-item-svg{flex:0 0 auto}.list-group-item-left-icon{justify-content:flex-start;padding-left:.5rem}@media(min-width: 600px){.list-group-item-left-icon{padding-left:.75rem}}.list-group-item-left-icon .list-group-item-svg{margin-right:.5rem}@media(min-width: 600px){.list-group-item-left-icon .list-group-item-svg{margin-right:.75rem}}.list-group-item-no-border{border:0}.list-group-item-minimal{padding-right:0;padding-left:0;font-size:1.0625rem}@media(min-width: 600px){.list-group-item-minimal{font-size:1.25rem}}@media(min-width: 1024px){.list-group-item-minimal{font-size:1.5rem}}.list-group-item-transparent{background-color:rgba(0,0,0,0)}@media(min-width: 600px){.list-group-item-transparent{padding-left:1rem}}.list-group-item-transparent:hover{background-color:rgba(0,0,0,0)}.list-group-item-white{background-color:rgba(0,0,0,0);color:#fff}.list-group-item-white:hover{background-color:rgba(0,0,0,0);color:rgba(var(--post-contrast-color-inverted-rgb), 0.8)}.list-group .list-group-item:last-child{border-bottom:0}.list-group-white .list-group-item{border:0;border-top:1px solid rgba(var(--post-contrast-color-inverted-rgb), 0.2)}
+.list-group{background-color:var(--post-scheme-color-surface-default-bg);list-style:none;padding:0}.list-group>li{border:unset;padding:0}.list-group-link,.list-group-document,.list-group-switch{display:flex;position:relative;align-items:flex-start;padding-block-start:var(--post-device-spacing-padding-block-22);padding-block-end:var(--post-device-spacing-padding-block-23);padding-inline-start:var(--post-device-spacing-padding-5);padding-inline-end:var(--post-device-spacing-padding-inline-4);border-radius:var(--post-device-border-radius-focus);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.list-group-link::after,.list-group-document::after,.list-group-switch::after{display:block;content:"";position:absolute;inset:auto 0 0;border-block-end:var(--post-device-border-width-alternative1) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}.list-group-link:hover,.list-group-document:hover,.list-group-switch:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.list-group-link:hover::after,.list-group-document:hover::after,.list-group-switch:hover::after{border-block-end-color:var(--post-scheme-color-interactive-primary-hover-stroke)}.list-group-link,.list-group-document,.list-group-switch{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}.list-group-link:is(:focus-visible,:has(:focus-visible),.pretend-focus),.list-group-document:is(:focus-visible,:has(:focus-visible),.pretend-focus),.list-group-switch: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){.list-group-link:is(:focus-visible,:has(:focus-visible),.pretend-focus),.list-group-document:is(:focus-visible,:has(:focus-visible),.pretend-focus),.list-group-switch:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.list-group-link:is(:focus-visible,:focus-within,.pretend-focus),.list-group-document:is(:focus-visible,:focus-within,.pretend-focus),.list-group-switch: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){.list-group-link:is(:focus-visible,:focus-within,.pretend-focus),.list-group-document:is(:focus-visible,:focus-within,.pretend-focus),.list-group-switch:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.list-group-link,.list-group-document{text-decoration:none;gap:var(--post-device-spacing-gap-4)}.list-group-link>post-icon,.list-group-document>post-icon{flex:0 0 auto;padding-block:var(--post-device-spacing-padding-block-24);padding-inline:var(--post-device-spacing-padding-4);width:calc(var(--post-device-sizing-interactive-icon-size2) + 2*var(--post-device-spacing-padding-4));height:calc(var(--post-device-sizing-interactive-icon-size2) + 2*var(--post-device-spacing-padding-block-24))}.list-group-link>post-icon:last-child,.list-group-document>post-icon:last-child{margin-left:auto}.list-group-switch{justify-content:space-between;margin-bottom:0;flex-wrap:nowrap}.list-group-switch:hover .form-check-label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.list-group-switch .form-check-label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.list-group-switch .form-check-input{flex-shrink:0;margin-block:var(--post-device-spacing-padding-block-18)}.list-group-link:hover post-icon,.list-group-link:focus post-icon{transform:translateX(var(--post-core-dimension-4))}.list-group-link post-icon{transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){.list-group-link post-icon{transition:none}}