@swisspost/design-system-styles 9.0.0-next.5 → 9.0.0-next.6

package/components/_form-check.scss

@@ -0,0 +1,170 @@
+@forward './../variables/options';
+
+@use '../variables/color';
+@use '../variables/commons';
+@use '../variables/type';
+@use '../variables/spacing';
+@use '../variables/animation';
+@use '../variables/components/form-check';
+@use '../mixins/color' as color-mx;
+@use '../mixins/icons' as icons-mx;
+@use '../mixins/utilities' as utility-mx;
+@use '../tokens/components';
+@use '../tokens/helpers';
+@use '../functions/tokens';
+
+.form-check {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-radius: tokens.get('focus-border-radius', helpers.$post-focus);
+
+  &-inline {
+    display: inline-flex;
+    vertical-align: top;
+
+    fieldset > & {
+      &:not(:last-of-type) {
+        margin-right: form-check.$form-check-inline-margin-right;
+      }
+    }
+  }
+
+  &:has(> input:not(:only-child)) {
+    @include utility-mx.focus-style();
+
+    > input {
+      @include utility-mx.focus-style-none();
+    }
+  }
+
+  &:has(input[type='checkbox']):not(.form-switch) {
+    padding-block: tokens.get('checkbox-padding-block-single', components.$post-checkbox);
+
+    fieldset > & {
+      &:not(:last-of-type) {
+        margin-bottom: tokens.get('checkbox-gap-block-group', components.$post-checkbox);
+      }
+    }
+
+    > input[type='checkbox'] {
+      ~ label {
+        padding-block: tokens.get('checkbox-label-padding-block', components.$post-checkbox);
+        padding-inline-start: tokens.get(
+          'checkbox-gap-inline-text-start',
+          components.$post-checkbox
+        );
+        color: tokens.get('checkbox-enabled-fg', components.$post-checkbox);
+      }
+
+      &:not([disabled]) {
+        ~ label {
+          cursor: pointer;
+        }
+
+        &:hover ~ label {
+          color: tokens.get('checkbox-hover-fg', components.$post-checkbox);
+
+          @include utility-mx.high-contrast-mode() {
+            color: Highlight;
+          }
+        }
+      }
+
+      &[disabled] ~ label {
+        color: tokens.get('checkbox-disabled-fg', components.$post-checkbox);
+
+        @include utility-mx.high-contrast-mode() {
+          color: GrayText;
+        }
+      }
+    }
+  }
+
+  &.form-switch {
+    > input[type='checkbox'] {
+      ~ label {
+        color: tokens.get('switch-text-enabled-fg', components.$post-switch);
+      }
+
+      &:not([disabled]) {
+        ~ label {
+          cursor: pointer;
+        }
+
+        &:hover ~ label {
+          color: tokens.get('switch-element-hover-bg', components.$post-switch);
+
+          @include utility-mx.high-contrast-mode() {
+            color: Highlight;
+          }
+        }
+      }
+
+      &[disabled] ~ label {
+        color: tokens.get('switch-element-disabled-bg', components.$post-switch);
+
+        @include utility-mx.high-contrast-mode() {
+          color: GrayText;
+        }
+      }
+    }
+  }
+
+  &:has(input[type='radio']) {
+    padding-block: tokens.get('radio-button-padding-block-single', components.$post-radio-button);
+
+    fieldset > & {
+      &:not(:last-of-type) {
+        margin-bottom: tokens.get('radio-button-gap-block-group', components.$post-radio-button);
+      }
+    }
+
+    > input[type='radio'] {
+      ~ label {
+        padding-block: tokens.get(
+          'radio-button-label-padding-block',
+          components.$post-radio-button
+        );
+        padding-inline-start: tokens.get(
+          'radio-button-gap-inline-text-start',
+          components.$post-radio-button
+        );
+        color: tokens.get('radio-button-enabled-fg', components.$post-radio-button);
+      }
+
+      &:not([disabled]) {
+        ~ label {
+          cursor: pointer;
+        }
+
+        &:hover ~ label {
+          color: tokens.get('radio-button-hover-fg', components.$post-radio-button);
+
+          @include utility-mx.high-contrast-mode() {
+            color: Highlight;
+          }
+        }
+      }
+
+      &[disabled] ~ label {
+        color: tokens.get('radio-button-disabled-fg', components.$post-radio-button);
+
+        @include utility-mx.high-contrast-mode() {
+          color: GrayText;
+        }
+      }
+    }
+  }
+
+  > label {
+    transition: color #{animation.$transition-base-timing};
+    flex: 1;
+
+    @include utility-mx.high-contrast-mode {
+      transition: none;
+    }
+  }
+}

package/components/_index.scss

@@ -1,11 +1,12 @@
 @forward './../variables/options';
 
 @use 'accordion';
-@use 'alert';
 @use 'appstore-badge';
 @use 'avatar';
 @use 'badge';
+@use 'banner';
 @use 'breadcrumb';
+@use 'blockquote';
 @use 'button';
 @use 'button-group';
 @use 'card';
@@ -22,6 +23,10 @@
 @use 'datatable';
 @use 'dialog';
 @use 'form-check';
+@use 'radio-button';
+@use 'checkbox';
+@use 'switch';
+@use 'form-hint';
 @use 'forms';
 @use 'grid';
 @use 'icon-button';
@@ -44,7 +49,6 @@
 @use 'timepicker';
 @use 'toast';
 @use 'tooltip';
-@use 'topic-teaser';
 @use 'transitions';
 @use 'tag';
 

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: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{-webkit-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");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)}.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) + 1.5rem);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:.25rem}.banner:not(.banner-action):not(.alert-action) a,.alert:not(.banner-action):not(.alert-action) a{font-weight:400}.banner:not(.banner-action):not(.alert-action) hr,.alert:not(.banner-action):not(.alert-action) hr{margin-block:.5rem .75rem !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) + 1.5rem)}.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:.25rem}.banner-action>.banner-content a,.banner-action>.alert-content a,.alert-action>.banner-content a,.alert-action>.alert-content a{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:.5rem .75rem !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)1.5rem}.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{-webkit-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");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)}.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{-webkit-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");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)}.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{-webkit-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");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)}.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{-webkit-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");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)}.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{-webkit-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");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)}.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{-webkit-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");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)}.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,107 @@
+@forward './../variables/options';
+
+@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{--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:2.5rem;overflow:hidden;font-weight:400;white-space:nowrap}