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

package/components/_index.scss

@@ -1,50 +1,58 @@
-@forward './../variables/options';
-
-@use 'accordion';
-@use 'alert';
+@use 'breakpoints';
+@use 'globals';
+@use 'appstore-badge';
+@use 'avatar';
 @use 'badge';
+@use 'banner';
 @use 'breadcrumb';
+@use 'blockquote';
 @use 'button';
 @use 'button-group';
 @use 'card';
 @use 'card-control';
-@use 'carousel';
 @use 'chip';
 @use 'close';
-@use 'elevation';
 @use 'error-container';
+@use 'form-footer';
 @use 'form-range';
+@use 'form-search-input';
 @use 'form-select';
 @use 'form-textarea';
 @use 'datatable';
 @use 'dialog';
 @use 'form-check';
-@use 'forms';
-@use 'grid';
-@use 'icons';
+@use 'radio-button';
+@use 'checkbox';
+@use 'switch';
+@use 'form-hint';
+@use 'form-input';
+@use 'header';
+@use 'icon-button';
+@use 'icon-close-button';
 @use 'lead';
 @use 'list-group';
+@use 'list-check';
 @use 'modal';
 @use 'pagination';
 @use 'popover';
 @use 'product-card';
 @use 'progress';
-@use 'sizing';
+@use 'segmented-button';
+@use 'skiplinks';
 @use 'spinner';
 @use 'stepper';
 @use 'subnavigation';
 @use 'tables';
 @use 'tabs';
+@use 'teaser';
 @use 'text-highlight';
 @use 'timepicker';
 @use 'toast';
 @use 'tooltip';
-@use 'topic-teaser';
 @use 'transitions';
 @use 'tag';
+@use 'validation';
 
 // Imports depending on source order to override bootstrap styles
 @use 'datepicker';
 @use 'dropdown';
-@use 'floating-label';
-@use 'form-validation';

package/components/appstore-badge.css

@@ -0,0 +1 @@
+.app-store-badge{display:inline-flex;border-radius:var(--post-device-border-radius-1);height:var(--post-device-sizing-interactive-button-height-5);vertical-align:text-bottom}.app-store-badge img{display:block;width:auto;height:100%}

package/components/appstore-badge.scss

@@ -0,0 +1,18 @@
+@use '../functions/tokens';
+@use '../tokens/components';
+@use '../mixins/utilities';
+
+tokens.$default-map: components.$post-app-store-badge;
+
+.app-store-badge {
+  display: inline-flex;
+  border-radius: tokens.get('app-store-border-radius');
+  height: tokens.get('app-store-height');
+  vertical-align: text-bottom;
+
+  img {
+    display: block;
+    width: auto;
+    height: 100%;
+  }
+}

package/components/avatar.css

@@ -0,0 +1 @@
+a:where(:has(post-avatar:only-child)),button:where(:has(post-avatar:only-child)){display:inline-flex;padding:0;background-color:rgba(0,0,0,0);border:0 none;border-radius:var(--post-device-border-radius-round);text-decoration:none}a:hover post-avatar,button:hover post-avatar{--post-avatar-bg: var(--post-scheme-color-interactive-primary-hover-bg2);--post-avatar-fg: var(--post-scheme-color-interactive-primary-hover-fg3);border-color:var(--post-scheme-color-interactive-primary-hover-bg2)}a:hover post-avatar::after,button:hover post-avatar::after{background-color:var(--post-core-color-sandgrey-alpha-lightsand-50)}a,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}a:is(:focus-visible,:has(:focus-visible),.pretend-focus),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){a:is(:focus-visible,:has(:focus-visible),.pretend-focus),button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){a:is(:focus-visible,:focus-within,.pretend-focus),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){a:is(:focus-visible,:focus-within,.pretend-focus),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){button:where(:has(post-avatar:only-child)):hover post-avatar{--post-avatar-bg: Highlight !important}}

package/components/avatar.scss

@@ -0,0 +1,41 @@
+@use '../tokens/components';
+@use '../functions/tokens';
+@use './../mixins/utilities';
+
+tokens.$default-map: components.$post-avatar;
+
+a,
+button {
+  &:where(:has(post-avatar:only-child)) {
+    display: inline-flex;
+    padding: 0;
+    background-color: transparent;
+    border: 0 none;
+    border-radius: tokens.get('avatar-border-radius');
+    text-decoration: none;
+  }
+
+  &:hover {
+    post-avatar {
+      --post-avatar-bg: #{tokens.get('avatar-hover-bg')};
+      --post-avatar-fg: #{tokens.get('avatar-hover-fg')};
+      border-color: tokens.get('avatar-hover-bg');
+
+      &::after {
+        background-color: tokens.get('avatar-image-hover-opacity');
+      }
+    }
+  }
+
+  @include utilities.focus-style;
+}
+
+button {
+  &:where(:has(post-avatar:only-child)):hover {
+    @include utilities.high-contrast-mode() {
+      post-avatar {
+        --post-avatar-bg: Highlight !important;
+      }
+    }
+  }
+}

package/components/badge.css

@@ -1 +1 @@
-.badge.badge-sm{--post-badge-height: 1rem;--post-badge-padding-x: 0.25rem;font-size:10px}.badge{--post-badge-height: 1.5rem;--post-badge-padding-x: 0.5rem;display:inline-flex;align-items:center;justify-content:center;box-sizing:content-box;height:var(--post-badge-height);min-width:calc(var(--post-badge-height) - 2*var(--post-badge-padding-x));padding-inline:var(--post-badge-padding-x);border:#fff solid 2px;border-radius:50rem;font-size:.75rem;background-color:#a51728;color:#fff}.badge:empty{--post-badge-height: 0.5rem;--post-badge-padding-x: 0%}
+.badge.bg-yellow,.badge.bg-white,.badge.bg-light,.badge.bg-gray,.badge.bg-dark,.badge.bg-black,.badge.bg-primary,.badge.bg-secondary,.badge.bg-success,.badge.bg-warning,.badge.bg-error,.badge.bg-info,.badge.bg-success-background,.badge.bg-warning-background,.badge.bg-error-background{--post-bg-opacity: 1;background-color:rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;color:var(--post-contrast-color) !important}.badge.bg-yellow,.badge.bg-white,.badge.bg-light,.badge.bg-gray,.badge.bg-warning,.badge.bg-info,.badge.bg-success-background,.badge.bg-warning-background,.badge.bg-error-background{--post-contrast-color: #000;--post-focus-color: #1976c8;--post-contrast-color-inverted: #fff;--post-gray-10: hsl(0, 0%, 90%);--post-gray-20: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-60: hsl(0, 0%, 40%);--post-gray-80: hsl(0, 0%, 20%);--post-yellow: #fc0;--post-white: #fff;--post-light: #faf9f8;--post-gray: #f4f3f1;--post-dark: hsl(0, 0%, 20%);--post-black: #000;--post-primary: hsl(0, 0%, 20%);--post-secondary: hsl(0, 0%, 40%);--post-success: #2c871d;--post-warning: #f49e00;--post-error: #a51728;--post-info: #cce4ee;--post-success-background: #c0debb;--post-warning-background: #fce2b2;--post-error-background: #ffdade;--post-contrast-color-rgb: 0, 0, 0;--post-contrast-color-inverted-rgb: 255, 255, 255;--post-gray-10-rgb: 230, 230, 230;--post-gray-20-rgb: 204, 204, 204;--post-gray-40-rgb: 153, 153, 153;--post-gray-60-rgb: 102, 102, 102;--post-gray-80-rgb: 51, 51, 51;--post-black-alpha-10-rgba: rgba(0, 0, 0, 0.1);--post-black-alpha-20-rgba: rgba(0, 0, 0, 0.2);--post-black-alpha-40-rgba: rgba(0, 0, 0, 0.4);--post-black-alpha-60-rgba: rgba(0, 0, 0, 0.6);--post-black-alpha-80-rgba: rgba(0, 0, 0, 0.8);--post-white-alpha-10-rgba: rgba(255, 255, 255, 0.1);--post-white-alpha-20-rgba: rgba(255, 255, 255, 0.2);--post-white-alpha-40-rgba: rgba(255, 255, 255, 0.4);--post-white-alpha-60-rgba: rgba(255, 255, 255, 0.6);--post-white-alpha-80-rgba: rgba(255, 255, 255, 0.8);--post-yellow-rgb: 255, 204, 0;--post-white-rgb: 255, 255, 255;--post-light-rgb: 250, 249, 248;--post-gray-rgb: 244, 243, 241;--post-dark-rgb: 51, 51, 51;--post-black-rgb: 0, 0, 0;--post-primary-rgb: 51, 51, 51;--post-secondary-rgb: 102, 102, 102;--post-success-rgb: 44, 135, 29;--post-warning-rgb: 244, 158, 0;--post-error-rgb: 165, 23, 40;--post-info-rgb: 204, 228, 238;--post-success-background-rgb: 192, 222, 187;--post-warning-background-rgb: 252, 226, 178;--post-error-background-rgb: 255, 218, 222}.badge.bg-dark,.badge.bg-black,.badge.bg-primary,.badge.bg-secondary,.badge.bg-success,.badge.bg-error{--post-contrast-color: #fff;--post-focus-color: #fff;--post-contrast-color-inverted: #000;--post-dark: #faf9f8;--post-light: hsl(0, 0%, 20%);--post-gray-80: hsl(0, 0%, 90%);--post-gray-60: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-20: hsl(0, 0%, 40%);--post-gray-10: hsl(0, 0%, 20%);--post-contrast-color-rgb: 255, 255, 255;--post-contrast-color-inverted-rgb: 0, 0, 0;--post-dark-rgb: 250, 249, 248;--post-light-rgb: 51, 51, 51;--post-gray-80-rgb: 230, 230, 230;--post-gray-60-rgb: 204, 204, 204;--post-gray-40-rgb: 153, 153, 153;--post-gray-20-rgb: 102, 102, 102;--post-gray-10-rgb: 51, 51, 51}.badge.badge-sm{--post-badge-height: var(--post-core-dimension-16);--post-badge-padding-x: var(--post-core-dimension-4);font-size:10px}.badge{--post-badge-height: var(--post-core-dimension-24);--post-badge-padding-x: var(--post-core-dimension-8);display:inline-flex;align-items:center;justify-content:center;box-sizing:content-box;height:var(--post-badge-height);min-width:calc(var(--post-badge-height) - 2*var(--post-badge-padding-x));padding-inline:var(--post-badge-padding-x);border:#fff solid 2px;border-radius:50rem;font-size:.75rem;background-color:#a51728;color:#fff}.badge:empty{--post-badge-height: var(--post-core-dimension-8);--post-badge-padding-x: 0%}.badge.bg-yellow{--post-bg-rgb: 255, 204, 0}.badge.bg-white{--post-bg-rgb: 255, 255, 255}.badge.bg-light{--post-bg-rgb: 250, 249, 248}.badge.bg-gray{--post-bg-rgb: 244, 243, 241}.badge.bg-dark{--post-bg-rgb: 51, 51, 51}.badge.bg-black{--post-bg-rgb: 0, 0, 0}.badge.bg-primary{--post-bg-rgb: 51, 51, 51}.badge.bg-secondary{--post-bg-rgb: 102, 102, 102}.badge.bg-success{--post-bg-rgb: 44, 135, 29}.badge.bg-warning{--post-bg-rgb: 244, 158, 0}.badge.bg-error{--post-bg-rgb: 165, 23, 40}.badge.bg-info{--post-bg-rgb: 204, 228, 238}.badge.bg-success-background{--post-bg-rgb: 192, 222, 187}.badge.bg-warning-background{--post-bg-rgb: 252, 226, 178}.badge.bg-error-background{--post-bg-rgb: 255, 218, 222}

package/components/badge.scss

@@ -1,8 +1,7 @@
-@forward './../variables/options';
-
 @use './../mixins/color' as color-mx;
 @use './../placeholders/badge' as badge-ph;
 @use './../variables/components/badge';
+@use './../variables/color';
 
 .badge {
   --post-badge-height: #{badge.$badge-height};
@@ -29,4 +28,11 @@
   &.badge-sm {
     @extend %badge-sm;
   }
+
+  // Add background options to the badge element only
+  @each $name, $color in color.$background-colors {
+    &.bg-#{$name} {
+      @include color-mx.colored-background($color);
+    }
+  }
 }

package/components/banner.css

@@ -0,0 +1 @@
+.banner,.alert{min-height:calc(var(--post-device-sizing-notification-icon-2) + 2*var(--post-device-spacing-padding-10));box-sizing:border-box;box-shadow:var(--post-device-elevation-100);border-radius:var(--post-device-border-radius-2);padding:var(--post-device-spacing-padding-10) var(--post-device-spacing-padding-10);padding-inline-start:calc(var(--post-device-spacing-padding-10) + var(--post-device-sizing-notification-icon-2) + var(--post-device-spacing-gap-inline-6));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-scheme-color-surface-default-fg);background-color:var(--post-scheme-color-signal-neutral);border-color:var(--post-scheme-color-signal-neutral-dark);color-scheme:var(--post-core-bg-scheme-light)}.banner:not(.no-icon)::before,.alert:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-signal-neutral-dark)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner:not(.no-icon)::before,.alert:not(.no-icon)::before{color:CanvasText}}.banner:has(>post-icon)::before,.alert:has(>post-icon)::before{content:none}.banner>post-icon,.alert>post-icon{background-color:var(--post-scheme-color-signal-neutral);color:var(--post-scheme-color-signal-neutral-dark)}.banner::before,.alert::before{content:"";display:block}.banner::before,.banner>post-icon,.alert::before,.alert>post-icon{position:absolute;height:var(--post-device-sizing-notification-icon-2);width:var(--post-device-sizing-notification-icon-2);left:var(--post-device-spacing-padding-10);top:var(--post-device-spacing-padding-10)}.banner.no-icon,.alert.no-icon{min-height:calc(2*var(--post-device-spacing-padding-10) + var(--post-core-dimension-24));padding-inline-start:var(--post-device-spacing-padding-10)}.banner.no-icon::before,.alert.no-icon::before{content:unset}.banner.no-icon>post-icon,.alert.no-icon>post-icon{display:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner,.alert{filter:none !important;border:2px solid CanvasText}}.banner:not(.banner-action):not(.alert-action),.alert:not(.banner-action):not(.alert-action){display:flex;flex-direction:column;justify-content:center;gap:var(--post-core-dimension-4)}.banner:not(.banner-action):not(.alert-action) a,.alert:not(.banner-action):not(.alert-action) a{font-weight:var(--post-core-font-weight-400)}.banner:not(.banner-action):not(.alert-action) hr,.alert:not(.banner-action):not(.alert-action) hr{margin-block:var(--post-core-dimension-8) var(--post-core-dimension-12) !important}.banner:not(.banner-action):not(.alert-action)>*,.alert:not(.banner-action):not(.alert-action)>*{margin:0}.banner-container{border:unset;background-color:rgba(0,0,0,0)}.banner-dismissible,.alert-dismissible{pointer-events:auto;position:relative}.banner-dismissible:not(.banner-action):not(.alert-action),.alert-dismissible:not(.banner-action):not(.alert-action){padding-inline-end:calc(var(--post-device-spacing-padding-10) + var(--post-device-spacing-gap-inline-6) + var(--post-core-dimension-24))}.banner-dismissible>.btn-close,.alert-dismissible>.btn-close{position:absolute;inset-block-start:1rem;inset-inline-end:var(--post-device-spacing-padding-10)}.banner-buttons,.alert-buttons{display:flex;align-items:center;justify-content:flex-start;flex-direction:row-reverse;margin-block-start:var(--post-device-spacing-padding-block-10);gap:var(--post-device-spacing-gap-1)}@media(max-width: 779.98px){.banner-buttons,.alert-buttons{flex-direction:column}}.banner-action>.banner-content,.banner-action>.alert-content,.alert-action>.banner-content,.alert-action>.alert-content{display:flex;flex-direction:column;justify-content:center;gap:var(--post-core-dimension-4)}.banner-action>.banner-content a,.banner-action>.alert-content a,.alert-action>.banner-content a,.alert-action>.alert-content a{font-weight:var(--post-core-font-weight-400)}.banner-action>.banner-content hr,.banner-action>.alert-content hr,.alert-action>.banner-content hr,.alert-action>.alert-content hr{margin-block:var(--post-core-dimension-8) var(--post-core-dimension-12) !important}.banner-action>.banner-content>*,.banner-action>.alert-content>*,.alert-action>.banner-content>*,.alert-action>.alert-content>*{margin:0}@media(max-width: 779.98px){.banner-action,.alert-action{flex-direction:column;align-items:stretch}.banner-action>.banner-content,.banner-action>.alert-content,.alert-action>.banner-content,.alert-action>.alert-content{padding-inline-start:var(--post-device-spacing-gap-inline-6)var(--post-device-sizing-notification-icon-2);padding-inline-end:var(--post-device-spacing-gap-inline-6)var(--post-core-dimension-24)}.banner-action.no-icon>.banner-content,.banner-action.no-icon>.alert-content,.alert-action.no-icon>.banner-content,.alert-action.no-icon>.alert-content{padding-inline-start:0}.banner-action>.banner-buttons,.banner-action>.alert-buttons,.alert-action>.banner-buttons,.alert-action>.alert-buttons{display:flex}.banner-action>.banner-buttons>.btn,.banner-action>.banner-buttons>::slotted(.btn),.banner-action>.alert-buttons>.btn,.banner-action>.alert-buttons>::slotted(.btn),.alert-action>.banner-buttons>.btn,.alert-action>.banner-buttons>::slotted(.btn),.alert-action>.alert-buttons>.btn,.alert-action>.alert-buttons>::slotted(.btn){flex:1 0 0;width:100%}.banner-action>.banner-buttons>.btn:first-child,.banner-action>.banner-buttons>::slotted(.btn:first-child),.banner-action>.alert-buttons>.btn:first-child,.banner-action>.alert-buttons>::slotted(.btn:first-child),.alert-action>.banner-buttons>.btn:first-child,.alert-action>.banner-buttons>::slotted(.btn:first-child),.alert-action>.alert-buttons>.btn:first-child,.alert-action>.alert-buttons>::slotted(.btn:first-child){margin-inline-start:0}}.banner-neutral,.alert-neutral{background-color:var(--post-scheme-color-signal-neutral);border-color:var(--post-scheme-color-signal-neutral-dark);color-scheme:var(--post-core-bg-scheme-light)}.banner-neutral:not(.no-icon)::before,.alert-neutral:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-signal-neutral-dark)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner-neutral:not(.no-icon)::before,.alert-neutral:not(.no-icon)::before{color:CanvasText}}.banner-neutral:has(>post-icon)::before,.alert-neutral:has(>post-icon)::before{content:none}.banner-neutral>post-icon,.alert-neutral>post-icon{background-color:var(--post-scheme-color-signal-neutral);color:var(--post-scheme-color-signal-neutral-dark)}.banner-success,.alert-success{background-color:var(--post-scheme-color-interactive-notification-success-bg);border-color:var(--post-scheme-color-interactive-notification-success-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-success:not(.no-icon)::before,.alert-success:not(.no-icon)::before{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 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-success-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner-success:not(.no-icon)::before,.alert-success:not(.no-icon)::before{color:CanvasText}}.banner-success:has(>post-icon)::before,.alert-success:has(>post-icon)::before{content:none}.banner-success>post-icon,.alert-success>post-icon{background-color:var(--post-scheme-color-interactive-notification-success-bg);color:var(--post-scheme-color-interactive-notification-success-icon)}.banner-warning,.alert-warning{background-color:var(--post-scheme-color-interactive-notification-warning-bg);border-color:var(--post-scheme-color-interactive-notification-warning-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-warning:not(.no-icon)::before,.alert-warning:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-warning-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner-warning:not(.no-icon)::before,.alert-warning:not(.no-icon)::before{color:CanvasText}}.banner-warning:has(>post-icon)::before,.alert-warning:has(>post-icon)::before{content:none}.banner-warning>post-icon,.alert-warning>post-icon{background-color:var(--post-scheme-color-interactive-notification-warning-bg);color:var(--post-scheme-color-interactive-notification-warning-icon)}.banner-error,.alert-error{background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-error:not(.no-icon)::before,.alert-error:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-error-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner-error:not(.no-icon)::before,.alert-error:not(.no-icon)::before{color:CanvasText}}.banner-error:has(>post-icon)::before,.alert-error:has(>post-icon)::before{content:none}.banner-error>post-icon,.alert-error>post-icon{background-color:var(--post-scheme-color-interactive-notification-error-bg);color:var(--post-scheme-color-interactive-notification-error-icon)}.banner-info,.alert-info{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)}.banner-info:not(.no-icon)::before,.alert-info:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.33 25.33v-16h-4.67V12h2v13.33h-2V28h6.67v-2.67zM14.67 4h2.67v2.67h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-info-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner-info:not(.no-icon)::before,.alert-info:not(.no-icon)::before{color:CanvasText}}.banner-info:has(>post-icon)::before,.alert-info:has(>post-icon)::before{content:none}.banner-info>post-icon,.alert-info>post-icon{background-color:var(--post-scheme-color-interactive-notification-info-bg);color:var(--post-scheme-color-interactive-notification-info-icon)}.banner-danger,.alert-danger{background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-danger:not(.no-icon)::before,.alert-danger:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-error-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner-danger:not(.no-icon)::before,.alert-danger:not(.no-icon)::before{color:CanvasText}}.banner-danger:has(>post-icon)::before,.alert-danger:has(>post-icon)::before{content:none}.banner-danger>post-icon,.alert-danger>post-icon{background-color:var(--post-scheme-color-interactive-notification-error-bg);color:var(--post-scheme-color-interactive-notification-error-icon)}

package/components/banner.scss

@@ -0,0 +1,105 @@
+@use 'sass:map';
+@use 'sass:list';
+
+@use './../themes/bootstrap/core' as *;
+
+@use './../mixins/notification' as notification-mx;
+
+@use './../variables/breakpoints';
+@use './../variables/commons';
+@use './../variables/grid';
+@use './../variables/components/close';
+@use './../variables/components/notification';
+@use '../tokens/components';
+@use '../functions/tokens';
+
+tokens.$default-map: components.$post-banner;
+
+.banner,
+.alert {
+  @include notification-mx.notification-size(banner);
+
+  &:not(.banner-action):not(.alert-action) {
+    @include notification-mx.notification-body(banner);
+  }
+}
+
+// Dialog container
+.banner-container {
+  border: unset;
+  background-color: transparent;
+}
+
+.banner-dismissible,
+.alert-dismissible {
+  @include notification-mx.notification-dismissible(banner);
+}
+
+.banner-buttons,
+.alert-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: row-reverse;
+  margin-block-start: tokens.get('banner-actions-margin-top');
+  gap: tokens.get('banner-actions-gap');
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+  }
+}
+
+.banner-action,
+.alert-action {
+  > .banner-content,
+  > .alert-content {
+    @include notification-mx.notification-body(banner);
+  }
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+    align-items: stretch;
+
+    > .banner-content,
+    > .alert-content {
+      padding-inline-start: tokens.get('banner-gap') + tokens.get('banner-icon-size');
+      padding-inline-end: tokens.get('banner-gap') + close.$close-size;
+    }
+
+    &.no-icon > .banner-content,
+    &.no-icon > .alert-content {
+      padding-inline-start: 0;
+    }
+
+    > .banner-buttons,
+    > .alert-buttons {
+      display: flex;
+
+      > .btn,
+      > ::slotted(.btn) {
+        flex: 1 0 0;
+        width: 100%;
+      }
+
+      > .btn:first-child,
+      > ::slotted(.btn:first-child) {
+        margin-inline-start: 0;
+      }
+    }
+  }
+}
+
+@each $name, $color, $icon, $border-color, $icon-color,
+  $scheme in notification.$notification-variants
+{
+  .banner-#{$name},
+  .alert-#{$name} {
+    @include notification-mx.notification-variant(
+      $color,
+      $icon,
+      $border-color,
+      $icon-color,
+      $scheme
+    );
+  }
+}

package/components/blockquote.css

@@ -0,0 +1 @@
+.blockquote{font-size:var(--post-device-font-size-5);font-weight:var(--post-device-font-weight-bold);margin:var(--post-device-spacing-margin-5) var(--post-device-spacing-margin-6);padding:0 var(--post-core-dimension-24) 0 var(--post-core-dimension-20);border-inline-start:var(--post-device-border-width-quote) var(--post-core-border-style-solid) var(--post-scheme-color-surface-default-stroke)}figure:has(.blockquote){margin:var(--post-device-spacing-margin-5) var(--post-device-spacing-margin-6);padding:0 var(--post-core-dimension-24) 0 var(--post-core-dimension-20);border-inline-start:var(--post-device-border-width-quote) var(--post-core-border-style-solid) var(--post-scheme-color-surface-default-stroke)}figure:has(.blockquote) .blockquote{margin:0;padding:0;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}figure:has(.blockquote) .blockquote q{quotes:"«" "»" "‹" "›"}figure:has(.blockquote) .blockquote q:lang(en){quotes:'"' '"' "'" "'"}figcaption.blockquote-footer{margin-top:var(--post-core-dimension-16)}figcaption.blockquote-footer cite{font-style:inherit}

package/components/blockquote.scss

@@ -0,0 +1,46 @@
+@use '../tokens/components';
+@use '../functions/tokens';
+
+tokens.$default-map: components.$post-blockquote;
+
+.blockquote {
+  font-size: tokens.get('post-blockquote-font-size');
+  font-weight: tokens.get('post-blockquote-font-weight');
+  margin: tokens.get('post-blockquote-margin-block') tokens.get('post-blockquote-margin-inline');
+  padding: 0 tokens.get('post-blockquote-padding-inline-end') 0
+    tokens.get('post-blockquote-padding-inline-start');
+  border-inline-start: tokens.get('post-blockquote-border-width-left')
+    tokens.get('post-blockquote-border-left-style') tokens.get('post-blockquote-border-left-color');
+}
+
+figure:has(.blockquote) {
+  margin: tokens.get('post-blockquote-margin-block') tokens.get('post-blockquote-margin-inline');
+  padding: 0 tokens.get('post-blockquote-padding-inline-end') 0
+    tokens.get('post-blockquote-padding-inline-start');
+  border-inline-start: tokens.get('post-blockquote-border-width-left')
+    tokens.get('post-blockquote-border-left-style') tokens.get('post-blockquote-border-left-color');
+
+  .blockquote {
+    margin: 0;
+    padding: 0;
+    border-width: 0;
+    border-style: none;
+    border-color: transparent;
+
+    q {
+      quotes: '\00ab' '\00bb' '\2039' '\203A';
+
+      &:lang(en) {
+        quotes: '\0022' '\0022' '\0027' '\0027';
+      }
+    }
+  }
+}
+
+figcaption.blockquote-footer {
+  margin-top: tokens.get('post-blockquote-gap-inline');
+
+  cite {
+    font-style: inherit;
+  }
+}

package/components/breadcrumb.css

@@ -1 +1 @@
-.breadcrumb{--bs-breadcrumb-padding-x: 1rem;--bs-breadcrumb-padding-y: 0.75rem;--bs-breadcrumb-margin-bottom: 1rem;--bs-breadcrumb-bg: hsl(0, 0%, 80%);--bs-breadcrumb-border-radius: 4px;--bs-breadcrumb-divider-color: hsl(0, 0%, 40%);--bs-breadcrumb-item-padding-x: 0.5rem;--bs-breadcrumb-item-active-color: hsl(0, 0%, 40%);display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}.breadcrumb-item+.breadcrumb-item{padding-left:var(--bs-breadcrumb-item-padding-x)}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color);content:var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */}.breadcrumb-item.active{color:var(--bs-breadcrumb-item-active-color)}.breadcrumb{font-size:.9375rem}@media(min-width: 600px){.breadcrumb{font-size:1rem}}@media(min-width: 1024px){.breadcrumb{font-size:1.0625rem}}.breadcrumb{flex-wrap:nowrap;height:2.5rem;overflow:hidden;font-weight:400;white-space:nowrap}.breadcrumb-item{display:flex;align-items:center}.breadcrumb-item .ppm-breadcrumb-divider{fill:#666}.breadcrumb-item a{display:flex;align-content:center;align-items:center;color:#666;text-decoration:none}.breadcrumb-item a:hover{color:#000}
+.breadcrumb{--bs-breadcrumb-padding-x: 1rem;--bs-breadcrumb-padding-y: 0.75rem;--bs-breadcrumb-margin-bottom: 1rem;--bs-breadcrumb-bg: hsl(0, 0%, 80%);--bs-breadcrumb-border-radius: 4px;--bs-breadcrumb-divider-color: hsl(0, 0%, 40%);--bs-breadcrumb-item-padding-x: 0.5rem;--bs-breadcrumb-item-active-color: hsl(0, 0%, 40%);display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}.breadcrumb-item+.breadcrumb-item{padding-left:var(--bs-breadcrumb-item-padding-x)}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color);content:var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */}.breadcrumb-item.active{color:var(--bs-breadcrumb-item-active-color)}.breadcrumb{font-size:.9375rem;font-size:1rem}@media(min-width: 1024px){.breadcrumb{font-size:1.0625rem}}.breadcrumb{flex-wrap:nowrap;height:var(--post-core-dimension-40);overflow:hidden;font-weight:var(--post-core-font-weight-400);white-space:nowrap}

package/components/breadcrumb.scss

@@ -1,5 +1,3 @@
-@forward './../variables/options';
-
 @use 'sass:map';
 
 @use './../themes/bootstrap/core' as *;
@@ -10,32 +8,14 @@
 @use './../variables/components/breadcrumbs';
 @use './../placeholders/text';
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
 .breadcrumb {
   @extend %font-curve-small;
   flex-wrap: nowrap;
-  height: map.get(spacing.$post-sizes, 'bigger-big');
+  height: tokens.get('utility-gap-40', utilities.$post-spacing);
   overflow: hidden;
   font-weight: type.$font-weight-normal;
   white-space: nowrap;
 }
-
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-
-  .ppm-breadcrumb-divider {
-    fill: breadcrumbs.$breadcrumb-divider-color;
-  }
-
-  a {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    color: breadcrumbs.$breadcrumb-link-color;
-    text-decoration: none;
-
-    &:hover {
-      color: breadcrumbs.$breadcrumb-hover-color;
-    }
-  }
-}

package/components/breakpoints.css

@@ -0,0 +1 @@
+:root{--post-breakpoint-widths: 0, 600, 780, 1024, 1280, comma;--post-breakpoint-keys: xs, sm, md, lg, xl;--post-breakpoint-names: mobile, tablet, tablet, desktop, desktop}

package/components/breakpoints.scss

@@ -0,0 +1,17 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use '../variables/breakpoints';
+
+:root {
+  $breakpoint-list: ();
+
+  @each $key, $value in breakpoints.$grid-breakpoints {
+    $unitless-value: math.div($value, $value * 0 + 1);
+    $breakpoint-list: list.append($breakpoint-list, $unitless-value, comma);
+  }
+
+  --post-breakpoint-widths: #{list.join($breakpoint-list, comma)};
+  --post-breakpoint-keys: #{map.keys(breakpoints.$grid-breakpoints)};
+  --post-breakpoint-names: #{map.values(breakpoints.$grid-breakpoints-key-name-map)};
+}

package/components/button-group.css

@@ -1 +1 @@
-.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;flex:1 1 auto}.btn-group>.btn-check:checked+.btn,.btn-group>.btn-check:focus+.btn,.btn-group>.btn:hover,.btn-group>.btn:focus,.btn-group>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn-check:checked+.btn,.btn-group-vertical>.btn-check:focus+.btn,.btn-group-vertical>.btn:hover,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn.active{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group{border-radius:4px}.btn-group>:not(.btn-check:first-child)+.btn,.btn-group>.btn-group:not(:first-child){margin-left:calc(2px*-1)}.btn-group>.btn:not(:last-child):not(.dropdown-toggle),.btn-group>.btn.dropdown-toggle-split:first-child,.btn-group>.btn-group:not(:last-child)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:nth-child(n+3),.btn-group>:not(.btn-check)+.btn,.btn-group>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.84375rem;padding-left:.84375rem}.dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-sm+.dropdown-toggle-split,.btn-group-sm>.btn+.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.84375rem;padding-left:.84375rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn:not(:first-child),.btn-group-vertical>.btn-group:not(:first-child){margin-top:calc(2px*-1)}.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle),.btn-group-vertical>.btn-group:not(:last-child)>.btn{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn~.btn,.btn-group-vertical>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-top-right-radius:0}.btn-group{max-width:100%;flex-wrap:wrap;row-gap:.25rem;padding-inline-start:2px}.btn-group>.btn{white-space:normal;cursor:pointer;flex:0 1 auto;margin-inline-start:-2px}.btn-group>.btn-secondary{border-color:#ccc}.btn-group>.btn-secondary.active,.btn-group>.btn-check:checked+.btn-secondary{background-color:#fc0;color:#000}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-group>.btn-secondary.active,.btn-group>.btn-check:checked+.btn-secondary{background-color:Highlight}}.btn-check{position:absolute;clip:rect(0, 0, 0, 0);pointer-events:none}.btn-check+.btn{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.btn-check:is(:focus-visible,:has(:focus-visible),.pretend-focus)+.btn{outline-style:solid !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-check:is(:focus-visible,:has(:focus-visible),.pretend-focus)+.btn{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-check:is(:focus-visible,:focus-within,.pretend-focus)+.btn{outline-style:solid !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-check:is(:focus-visible,:focus-within,.pretend-focus)+.btn{outline-color:Highlight !important}}}
+.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;flex:1 1 auto}.btn-group>.btn-check:checked+.btn,.btn-group>.btn-check:focus+.btn,.btn-group>.btn:hover,.btn-group>.btn:focus,.btn-group>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn-check:checked+.btn,.btn-group-vertical>.btn-check:focus+.btn,.btn-group-vertical>.btn:hover,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn.active{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group{border-radius:var(--post-device-border-radius-round)}.btn-group>:not(.btn-check:first-child)+.btn,.btn-group>.btn-group:not(:first-child){margin-left:calc(2px*-1)}.btn-group>.btn:not(:last-child):not(.dropdown-toggle),.btn-group>.btn.dropdown-toggle-split:first-child,.btn-group>.btn-group:not(:last-child)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:nth-child(n+3),.btn-group>:not(.btn-check)+.btn,.btn-group>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.84375rem;padding-left:.84375rem}.dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-sm+.dropdown-toggle-split,.btn-group-sm>.btn+.dropdown-toggle-split{padding-right:12px;padding-left:12px}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:12px;padding-left:12px}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn:not(:first-child),.btn-group-vertical>.btn-group:not(:first-child){margin-top:calc(2px*-1)}.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle),.btn-group-vertical>.btn-group:not(:last-child)>.btn{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn~.btn,.btn-group-vertical>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-top-right-radius:0}.btn-group{max-width:100%;flex-wrap:wrap;row-gap:var(--post-core-dimension-4);padding-inline-start:2px}.btn-group>.btn{white-space:normal;cursor:pointer;flex:0 1 auto;margin-inline-start:-2px}.btn-group>.btn-secondary{border-color:#ccc}.btn-group>.btn-secondary.active,.btn-group>.btn-check:checked+.btn-secondary{background-color:#fc0;color:#000}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-group>.btn-secondary.active,.btn-group>.btn-check:checked+.btn-secondary{background-color:Highlight}}.btn-check{position:absolute;clip:rect(0, 0, 0, 0);pointer-events:none}.btn-check+.btn{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}.btn-check:is(:focus-visible,:has(:focus-visible),.pretend-focus)+.btn{outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-check:is(:focus-visible,:has(:focus-visible),.pretend-focus)+.btn{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-check:is(:focus-visible,:focus-within,.pretend-focus)+.btn{outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-check:is(:focus-visible,:focus-within,.pretend-focus)+.btn{outline-color:Highlight !important}}}

package/components/button-group.scss

@@ -1,18 +1,19 @@
-@forward './../variables/options';
-
 @use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/button-group' as bg;
 
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
 @use './../variables/color';
 @use './../variables/spacing';
 @use './../variables/components/button';
 @use './../variables/components/forms';
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
 .btn-group {
   max-width: 100%;
   flex-wrap: wrap;
-  row-gap: spacing.$size-micro;
+  row-gap: tokens.get('utility-gap-4', utilities.$post-spacing);
   padding-inline-start: button.$btn-border-width;
 
   > .btn {
@@ -31,7 +32,7 @@
     background-color: color.$yellow;
     color: color.$black;
 
-    @include utilities.high-contrast-mode() {
+    @include utilities-mx.high-contrast-mode() {
       background-color: Highlight;
     }
   }
@@ -41,5 +42,5 @@
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none;
-  @include utilities.focus-style('+ .btn');
+  @include utilities-mx.focus-style('+ .btn');
 }

package/components/button.css

@@ -1 +1 @@
-.btn-default:focus,.btn-secondary:focus,.btn-link:focus,.btn-tertiary:focus,.btn-default:not(:disabled):hover,.btn-secondary:not(:disabled):hover,.btn-link:not(:disabled):hover,.btn-tertiary:not(:disabled):hover,.pretend-hover.btn-default,.pretend-hover.btn-secondary,.pretend-hover.btn-link,.pretend-hover.btn-tertiary{color:var(--post-contrast-color)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-default,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-secondary,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-link,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-tertiary{color:var(--post-contrast-color)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-default .pi,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-secondary .pi,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-link .pi,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-tertiary .pi{filter:invert(1)}.btn{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:2px;border-style:solid;border-radius:4px;background-color:rgba(0,0,0,0);box-shadow:none;color:var(--post-gray-80);font-family:inherit;font-weight:400;text-decoration:none !important;white-space:nowrap;min-height:3rem;font-size:1rem;gap:.625rem}.btn:where(:not(.btn-link,.btn-tertiary)){padding:0 1rem}.btn>.pi,.btn>post-icon{width:1.25rem;height:1.25rem}.btn:disabled{pointer-events:none;color:var(--post-gray-60);border-color:var(--post-gray-40);border-style:dashed;background-clip:padding-box;text-decoration:line-through;text-decoration:line-through !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:disabled{color:GrayText;border-color:GrayText}}.btn:not(:disabled):hover,.btn.pretend-hover{color:var(--post-contrast-color-inverted);background-color:#666}.btn{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px;color:var(--post-contrast-color-inverted);background-color:#666}.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus):where(.btn-primary){background-color:var(--post-contrast-color)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px;color:var(--post-contrast-color-inverted);background-color:#666}.btn:is(:focus-visible,:focus-within,.pretend-focus):where(.btn-primary){background-color:var(--post-contrast-color)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn:disabled{color:rgba(255,255,255,.8)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn:not(:disabled):hover,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn.pretend-hover{background-color:#fc0;border-color:rgba(0,0,0,0)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;background-color:#fc0;border-color:rgba(0,0,0,0)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;background-color:#fc0;border-color:rgba(0,0,0,0)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn: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){.btn{border-color:ButtonBorder;background-color:ButtonFace}.btn:not(:disabled,.disabled):hover{border-color:highlight}.btn:disabled{border-color:GrayText !important}.btn .pi{filter:invert(1) !important}}.btn-primary{border-color:rgba(0,0,0,0);background-color:var(--post-gray-80);color:var(--post-contrast-color-inverted)}.btn-primary:disabled{background-color:#e6e6e6;border-color:#666}.btn-primary .pi{filter:invert(1);forced-color-adjust:none}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-primary{background-color:var(--post-contrast-color);color:var(--post-gray-10)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-primary:disabled{color:var(--post-contrast-color);background-color:rgba(255,255,255,.2);border-color:var(--post-contrast-color)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-primary .pi{filter:invert(0)}.btn-default,.btn-secondary{border-color:#666}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-default,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-secondary{border-color:var(--post-contrast-color);color:var(--post-contrast-color)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-default:disabled,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-secondary:disabled{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.6)}.btn-link,.btn-tertiary{border:0;padding-inline:.25rem}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link,.btn-tertiary{color:linktext;text-decoration:underline !important}}.btn-icon{min-width:3rem;padding-right:.75rem;padding-left:.75rem}.btn-icon.btn-sm{min-width:2rem;padding-right:.375rem;padding-left:.375rem}.btn-icon.btn-rg{min-width:2.5rem;padding-right:.5625rem;padding-left:.5625rem}.btn-icon.btn-lg{min-width:3.5rem;padding-right:.9375rem;padding-left:.9375rem}.btn-animated:not(.btn-link,.btn-tertiary)::after,.btn-animated-start:not(.btn-link,.btn-tertiary)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.1 23.6-.9-.9 6.6-6.6-6.6-6.6.9-.9 7.6 7.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.1 23.6-.9-.9 6.6-6.6-6.6-6.6.9-.9 7.6 7.5z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:2em;width:2em;position:absolute;transition:opacity 250ms,transform 250ms;opacity:0}.btn-animated:not(.btn-link,.btn-tertiary)>span,.btn-animated-start:not(.btn-link,.btn-tertiary)>span{transition:transform 250ms}@media(prefers-reduced-motion: no-preference){.btn-animated:not(.btn-link,.btn-tertiary):focus::after,.btn-animated:not(.btn-link,.btn-tertiary):not(:disabled):hover::after,.btn-animated:not(.btn-link,.btn-tertiary).pretend-hover::after,.btn-animated-start:not(.btn-link,.btn-tertiary):focus::after,.btn-animated-start:not(.btn-link,.btn-tertiary):not(:disabled):hover::after,.btn-animated-start:not(.btn-link,.btn-tertiary).pretend-hover::after{transform:translateX(0);opacity:1}.btn-animated:not(.btn-link,.btn-tertiary)>span,.btn-animated-start:not(.btn-link,.btn-tertiary)>span{transform:translateX(0)}}.btn-animated:not(.btn-link,.btn-tertiary)::after{right:-.1666666667rem;transform:translateX(-2px)}.btn-animated:not(.btn-link,.btn-tertiary).btn-sm::after{right:-0.25rem}.btn-animated:not(.btn-link,.btn-tertiary).btn-rg::after{right:-.2083333333rem}.btn-animated:not(.btn-link,.btn-tertiary).btn-lg::after{right:-0.125rem}@media(prefers-reduced-motion: no-preference){.btn-animated:not(.btn-link,.btn-tertiary):focus>span,.btn-animated:not(.btn-link,.btn-tertiary):not(:disabled):hover>span,.btn-animated:not(.btn-link,.btn-tertiary).pretend-hover>span{transform:translateX(-0.5rem)}.btn-animated:not(.btn-link,.btn-tertiary):focus.btn-sm>span,.btn-animated:not(.btn-link,.btn-tertiary):not(:disabled):hover.btn-sm>span,.btn-animated:not(.btn-link,.btn-tertiary).pretend-hover.btn-sm>span{transform:translateX(-0.5rem)}.btn-animated:not(.btn-link,.btn-tertiary):focus.btn-rg>span,.btn-animated:not(.btn-link,.btn-tertiary):not(:disabled):hover.btn-rg>span,.btn-animated:not(.btn-link,.btn-tertiary).pretend-hover.btn-rg>span{transform:translateX(-0.5rem)}.btn-animated:not(.btn-link,.btn-tertiary):focus.btn-lg>span,.btn-animated:not(.btn-link,.btn-tertiary):not(:disabled):hover.btn-lg>span,.btn-animated:not(.btn-link,.btn-tertiary).pretend-hover.btn-lg>span{transform:translateX(-0.5rem)}}.btn-animated-start:not(.btn-link,.btn-tertiary)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M18.9 23.5 11.3 16l7.6-7.6.9.9-6.6 6.7 6.6 6.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M18.9 23.5 11.3 16l7.6-7.6.9.9-6.6 6.7 6.6 6.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;left:-.1666666667rem;transform:translateX(2px)}.btn-animated-start:not(.btn-link,.btn-tertiary).btn-sm::after{left:-0.25rem}.btn-animated-start:not(.btn-link,.btn-tertiary).btn-rg::after{left:-.2083333333rem}.btn-animated-start:not(.btn-link,.btn-tertiary).btn-lg::after{left:-0.125rem}@media(prefers-reduced-motion: no-preference){.btn-animated-start:not(.btn-link,.btn-tertiary):focus>span,.btn-animated-start:not(.btn-link,.btn-tertiary):not(:disabled):hover>span,.btn-animated-start:not(.btn-link,.btn-tertiary).pretend-hover>span{transform:translateX(0.5rem)}.btn-animated-start:not(.btn-link,.btn-tertiary):focus.btn-sm>span,.btn-animated-start:not(.btn-link,.btn-tertiary):not(:disabled):hover.btn-sm>span,.btn-animated-start:not(.btn-link,.btn-tertiary).pretend-hover.btn-sm>span{transform:translateX(0.5rem)}.btn-animated-start:not(.btn-link,.btn-tertiary):focus.btn-rg>span,.btn-animated-start:not(.btn-link,.btn-tertiary):not(:disabled):hover.btn-rg>span,.btn-animated-start:not(.btn-link,.btn-tertiary).pretend-hover.btn-rg>span{transform:translateX(0.5rem)}.btn-animated-start:not(.btn-link,.btn-tertiary):focus.btn-lg>span,.btn-animated-start:not(.btn-link,.btn-tertiary):not(:disabled):hover.btn-lg>span,.btn-animated-start:not(.btn-link,.btn-tertiary).pretend-hover.btn-lg>span{transform:translateX(0.5rem)}}.btn-sm{min-height:2rem;font-size:.75rem;gap:.375rem}.btn-sm:where(:not(.btn-link,.btn-tertiary)){padding:0 .75rem}.btn-sm>.pi,.btn-sm>post-icon{width:1rem;height:1rem}.btn-rg{min-height:2.5rem;font-size:.875rem;gap:.5rem}.btn-rg:where(:not(.btn-link,.btn-tertiary)){padding:0 .875rem}.btn-rg>.pi,.btn-rg>post-icon{width:1.125rem;height:1.125rem}.btn-lg{min-height:3.5rem;font-size:1.125rem;gap:.75rem}.btn-lg:where(:not(.btn-link,.btn-tertiary)){padding:0 1.125rem}.btn-lg>.pi,.btn-lg>post-icon{width:1.375rem;height:1.375rem}.btn-nightblue{border-color:rgba(0,0,0,0);background-color:#004976;color:#fff}.btn-nightblue:focus,.btn-nightblue:not(:disabled):hover,.btn-nightblue.pretend-hover{background-color:#002943;color:#fff}.btn-nightblue-bright{border-color:rgba(0,0,0,0);background-color:#0076a8;color:#fff}.btn-nightblue-bright:focus,.btn-nightblue-bright:not(:disabled):hover,.btn-nightblue-bright.pretend-hover{background-color:#005275;color:#fff}.btn-petrol{border-color:rgba(0,0,0,0);background-color:#006d68;color:#fff}.btn-petrol:focus,.btn-petrol:not(:disabled):hover,.btn-petrol.pretend-hover{background-color:#003a37;color:#fff}.btn-petrol-bright{border-color:rgba(0,0,0,0);background-color:#00968f;color:#000}.btn-petrol-bright:focus,.btn-petrol-bright:not(:disabled):hover,.btn-petrol-bright.pretend-hover{background-color:#00635e;color:#fff}.btn-coral{border-color:rgba(0,0,0,0);background-color:#9e2a2f;color:#fff}.btn-coral:focus,.btn-coral:not(:disabled):hover,.btn-coral.pretend-hover{background-color:#761f23;color:#fff}.btn-coral-bright{border-color:rgba(0,0,0,0);background-color:#e03c31;color:#000}.btn-coral-bright:focus,.btn-coral-bright:not(:disabled):hover,.btn-coral-bright.pretend-hover{background-color:#c1271d;color:#fff}.btn-olive{border-color:rgba(0,0,0,0);background-color:#716135;color:#fff}.btn-olive:focus,.btn-olive:not(:disabled):hover,.btn-olive.pretend-hover{background-color:#4e4325;color:#fff}.btn-olive-bright{border-color:rgba(0,0,0,0);background-color:#aa9d2e;color:#000}.btn-olive-bright:focus,.btn-olive-bright:not(:disabled):hover,.btn-olive-bright.pretend-hover{background-color:#827823;color:#000}.btn-purple{border-color:rgba(0,0,0,0);background-color:#80276c;color:#fff}.btn-purple:focus,.btn-purple:not(:disabled):hover,.btn-purple.pretend-hover{background-color:#591b4b;color:#fff}.btn-purple-bright{border-color:rgba(0,0,0,0);background-color:#c5299b;color:#fff}.btn-purple-bright:focus,.btn-purple-bright:not(:disabled):hover,.btn-purple-bright.pretend-hover{background-color:#9b207a;color:#fff}.btn-aubergine{border-color:rgba(0,0,0,0);background-color:#523178;color:#fff}.btn-aubergine:focus,.btn-aubergine:not(:disabled):hover,.btn-aubergine.pretend-hover{background-color:#392254;color:#fff}.btn-aubergine-bright{border-color:rgba(0,0,0,0);background-color:#7566a0;color:#fff}.btn-aubergine-bright:focus,.btn-aubergine-bright:not(:disabled):hover,.btn-aubergine-bright.pretend-hover{background-color:#5e5182;color:#fff}.btn-success{border-color:rgba(0,0,0,0);background-color:#2c871d;color:#fff}.btn-success:focus,.btn-success:not(:disabled):hover,.btn-success.pretend-hover{background-color:#1e5d14;color:#fff}.btn-warning{border-color:rgba(0,0,0,0);background-color:#f49e00;color:#000}.btn-warning:focus,.btn-warning:not(:disabled):hover,.btn-warning.pretend-hover{background-color:#c17d00;color:#000}.btn-error{border-color:rgba(0,0,0,0);background-color:#a51728;color:#fff}.btn-error:focus,.btn-error:not(:disabled):hover,.btn-error.pretend-hover{background-color:#78111d;color:#fff}.btn-info{border-color:rgba(0,0,0,0);background-color:#cce4ee;color:#000}.btn-info:focus,.btn-info:not(:disabled):hover,.btn-info.pretend-hover{background-color:#a6d0e1;color:#000}
+.btn{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-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;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)}.btn:hover{text-decoration:none}.btn>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn:disabled{border-style:var(--post-core-border-style-dash)}.btn{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}.btn: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){.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn: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){.btn: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){.btn{background-color:ButtonFace !important}.btn:not(:disabled,.disabled):hover{background-color:Highlight !important}}.btn-primary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg);color:var(--post-scheme-color-interactive-button-primary-enabled-fg)}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg);color:var(--post-scheme-color-interactive-button-primary-disabled-fg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-link:not(:disabled):hover,.btn-link.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-sm{min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7)}.btn-sm>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-lg{min-height:var(--post-device-sizing-interactive-button-height-2);gap:var(--post-device-spacing-gap-inline-1);padding:0 var(--post-device-spacing-padding-inline-5)}.btn-lg>post-icon{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-link{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border:0 none;border-radius:var(--post-device-border-radius-focus);min-height:0;font-size:inherit;font-weight:inherit;padding:0}.btn-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}