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

package/variables/components/_index.scss

@@ -11,7 +11,6 @@
 @forward 'figures';
 @forward 'form-check';
 @forward 'form-validation';
-@forward 'form-select';
 @forward 'forms';
 @forward 'modal';
 @forward 'nav';

package/variables/components/_notification.scss

@@ -4,23 +4,29 @@
 @use './../commons';
 @use './../spacing';
 @use './../type';
+@use '../../tokens/components';
+@use '../../functions/tokens';
 
-$notification-margin-bottom: spacing.$spacer !default;
-$notification-box-shadow: 0 2px 4px 0 rgba(color.$black, 0.2) !default;
-$notification-border-radius: commons.$border-radius !default;
-$notification-gap: spacing.$size-small-large !default;
+tokens.$default-map: components.$post-banner;
 $notification-body-gap: spacing.$size-micro !default;
 $notification-font-weight: type.$font-weight-normal !default;
 $notification-link-font-weight: type.$font-weight-normal !default;
-$notification-heading-font-weight: type.$headings-font-weight !default;
-$notification-buttons-gap: spacing.$size-mini !default;
+
+$notification-gap-map: () !default;
+$notification-gap-map: map.merge(
+  $notification-gap-map,
+  (
+    'banner': tokens.get('banner-gap'),
+    'toast': tokens.get('toast-spacing-gap-outer', components.$post-toast),
+  )
+);
 
 $notification-padding-x-map: () !default;
 $notification-padding-x-map: map.merge(
   $notification-padding-x-map,
   (
-    'alert': spacing.$size-small-large,
-    'toast': spacing.$size-regular,
+    'banner': tokens.get('banner-padding'),
+    'toast': tokens.get('toast-spacing-padding-inline', components.$post-toast),
   )
 );
 
@@ -28,8 +34,8 @@ $notification-padding-y-map: () !default;
 $notification-padding-y-map: map.merge(
   $notification-padding-y-map,
   (
-    'alert': spacing.$size-regular,
-    'toast': spacing.$size-small-regular,
+    'banner': tokens.get('banner-padding'),
+    'toast': tokens.get('toast-spacing-padding-block', components.$post-toast),
   )
 );
 
@@ -37,54 +43,55 @@ $notification-font-size-map: () !default;
 $notification-font-size-map: map.merge(
   $notification-font-size-map,
   (
-    'alert': type.$font-size-base,
+    'banner': type.$font-size-base,
     'toast': type.$font-size-tiny,
   )
 );
 
-$notification-heading-font-size-map: () !default;
-$notification-heading-font-size-map: map.merge(
-  $notification-heading-font-size-map,
-  (
-    'alert': type.$font-size-bigger-regular,
-    'toast': type.$font-size-small,
-  )
-);
-
 $notification-hr-margin-block-map: () !default;
 $notification-hr-margin-block-map: map.merge(
   $notification-hr-margin-block-map,
   (
-    'alert': spacing.$size-mini spacing.$size-small-regular,
+    'banner': spacing.$size-mini spacing.$size-small-regular,
     'toast': spacing.$size-micro spacing.$size-small-regular,
   )
 );
 
+$notification-elevation-map: () !default;
+$notification-elevation-map: map.merge(
+  $notification-elevation-map,
+  (
+    'banner': tokens.get('banner-elevation'),
+    'toast': tokens.get('notification-toast-elevation', components.$post-notifications),
+  )
+);
+
 $notification-icon-size-map: () !default;
 $notification-icon-size-map: map.merge(
   $notification-icon-size-map,
   (
-    'alert': spacing.$size-small-huge,
-    'toast': spacing.$size-big,
+    'banner': tokens.get('banner-icon-size'),
+    'toast': tokens.get('toast-sizing-icon', components.$post-toast),
   )
 );
 
+//TODO: Note that primary, and gray have been deleted (.banner by default is now neutral) and that danger is back to error
 $notification-variants: () !default;
 $notification-variants: list.join(
   $notification-variants,
   (
-    // When changed, check $notification-variants as well in packages/styles/src/variables/_color.scss
-    'primary' color.$primary 3134,
-    'success' color.$success 2105,
-    'warning' color.$warning 2104,
-    'danger' color.$error 2104,
-    'info' color.$info 2106,
-    'gray' color.$gray 2201,
-    // deprecated
-    'notification' color.$gray-80 3134,
-    'error' color.$error 2104
+    'neutral' tokens.get('banner-neutral-bg') 2201 tokens.get('banner-neutral-border-color')
+      tokens.get('banner-neutral-icon-color') tokens.get('post-banner-neutral-bg-scheme'),
+    'success' tokens.get('banner-success-bg') 2105 tokens.get('banner-success-border-color')
+      tokens.get('banner-success-icon-color') tokens.get('post-banner-success-bg-scheme'),
+    'warning' tokens.get('banner-warning-bg') 2104 tokens.get('banner-warning-border-color')
+      tokens.get('banner-warning-icon-color') tokens.get('post-banner-warning-bg-scheme'),
+    'error' tokens.get('banner-error-bg') 2104 tokens.get('banner-error-border-color')
+      tokens.get('banner-error-icon-color') tokens.get('post-banner-error-bg-scheme'),
+    'info' tokens.get('banner-info-bg') 2106 tokens.get('banner-info-border-color')
+      tokens.get('banner-info-icon-color') tokens.get('post-banner-info-bg-scheme'),
+    // duplicate
+    'danger' tokens.get('banner-error-bg') 2104 tokens.get('banner-error-border-color')
+      tokens.get('banner-error-icon-color') tokens.get('post-banner-error-bg-scheme')
   )
 );
-
-// deprecated
-$notification-buttons-margin-start: $notification-buttons-gap !default;

package/components/alert.css

@@ -1 +0,0 @@
-.alert-primary,.alert-success,.alert-warning,.alert-danger,.alert-info,.alert-gray,.alert-notification,.alert-error{background-color:rgb(var(--post-bg-rgb)) !important;color:var(--post-contrast-color) !important}.alert-warning,.alert-info,.alert-gray{--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}.alert-primary,.alert-success,.alert-danger,.alert-notification,.alert-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}.alert{position:relative;box-sizing:border-box;min-height:5rem;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);border-radius:4px;padding:1rem 1.25rem;padding-inline-start:5.5rem;margin-block-end:1rem;font-size:1rem;font-weight:400}.alert::before{content:"";display:block}.alert::before,.alert>post-icon{position:absolute;height:3rem;width:3rem;left:1.25rem;top:1rem}.alert.no-icon{min-height:3.5rem;padding-inline-start:1.25rem}.alert.no-icon::before{content:unset}.alert.no-icon>post-icon{display:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.alert{filter:none !important;border:2px solid CanvasText}}.alert:not(.alert-action){display:flex;flex-direction:column;justify-content:center;gap:.25rem}.alert:not(.alert-action) a{font-weight:400}.alert:not(.alert-action) hr{margin-block:.5rem .75rem !important}.alert:not(.alert-action)>:only-child,.alert:not(.alert-action)>post-icon:first-child+:last-child{font-size:1.0625rem;font-weight:700}.alert:not(.alert-action)>*{margin:0}.alert-heading{font-size:1.0625rem;font-weight:700}.alert-dismissible{pointer-events:auto;position:relative;padding-inline-end:4rem}.alert-dismissible>.btn-close{position:absolute;inset-block-start:1rem;inset-inline-end:1.25rem}.alert-dismissible>.btn-close:first-child+:last-child{font-size:1.0625rem;font-weight:700}.alert-action{display:flex;flex-direction:row;align-items:center;gap:1.25rem}.alert-action>.alert-content{flex:1 1 auto}.alert-action>.alert-content{display:flex;flex-direction:column;justify-content:center;gap:.25rem}.alert-action>.alert-content a{font-weight:400}.alert-action>.alert-content hr{margin-block:.5rem .75rem !important}.alert-action>.alert-content>:only-child,.alert-action>.alert-content>post-icon:first-child+:last-child{font-size:1.0625rem;font-weight:700}.alert-action>.alert-content>*{margin:0}.alert-action>.alert-buttons{flex:0 0 auto;display:flex;align-items:center;gap:.5rem}@media(min-width: 780px){.alert-action.alert-dismissible>.btn-close{inset-block-start:calc(50% - 0.75rem)}}@media(max-width: 779.98px){.alert-action{flex-direction:column;align-items:stretch;padding-inline:1.25rem}.alert-action>.alert-content{padding-inline-start:4.25rem;padding-inline-end:2.75rem}.alert-action.no-icon>.alert-content{padding-inline-start:0}.alert-action>.alert-buttons{display:flex}.alert-action>.alert-buttons>.btn,.alert-action>.alert-buttons>::slotted(.btn){flex:1 0 0;width:100%}.alert-action>.alert-buttons>.btn:first-child,.alert-action>.alert-buttons>::slotted(.btn:first-child){margin-inline-start:0}}.alert-fixed-bottom{position:fixed;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;margin-bottom:0;border-radius:0;z-index:1030}@media(min-width: 1440px){.alert-fixed-bottom{padding-inline-end:calc((100% - 1439px) / 2 + 120px + 1.25rem);padding-inline-start:calc((100% - 1439px) / 2 + 120px + 1.25rem + 3rem + 1.25rem)}.alert-fixed-bottom::before{left:calc((100% - 1439px) / 2 + 120px + 1.25rem)}.alert-fixed-bottom.no-icon{padding-inline-start:calc((100% - 1439px) / 2 + 120px + 1.25rem)}.alert-fixed-bottom.alert-dismissible{padding-inline-end:calc((100% - 1439px) / 2 + 120px + 1.25rem + 1.25rem + 1.5rem)}.alert-fixed-bottom.alert-dismissible>.btn-close{inset-inline-end:calc((100% - 1439px) / 2 + 120px + 1.25rem)}}.alert-primary{--post-bg-rgb: 51, 51, 51}.alert-primary: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='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18z'/%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='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.alert-primary:has(>post-icon)::before{content:none}.alert-primary>post-icon{background-color:#333}.alert-success{--post-bg-rgb: 44, 135, 29}.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}.alert-success:has(>post-icon)::before{content:none}.alert-success>post-icon{background-color:#2c871d}.alert-warning{--post-bg-rgb: 244, 158, 0}.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}.alert-warning:has(>post-icon)::before{content:none}.alert-warning>post-icon{background-color:#f49e00}.alert-danger{--post-bg-rgb: 165, 23, 40}.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}.alert-danger:has(>post-icon)::before{content:none}.alert-danger>post-icon{background-color:#a51728}.alert-info{--post-bg-rgb: 204, 228, 238}.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}.alert-info:has(>post-icon)::before{content:none}.alert-info>post-icon{background-color:#cce4ee}.alert-gray{--post-bg-rgb: 244, 243, 241}.alert-gray: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}.alert-gray:has(>post-icon)::before{content:none}.alert-gray>post-icon{background-color:#f4f3f1}.alert-notification{--post-bg-rgb: 51, 51, 51}.alert-notification: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='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18z'/%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='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.alert-notification:has(>post-icon)::before{content:none}.alert-notification>post-icon{background-color:#333}.alert-error{--post-bg-rgb: 165, 23, 40}.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}.alert-error:has(>post-icon)::before{content:none}.alert-error>post-icon{background-color:#a51728}

package/components/alert.scss

@@ -1,133 +0,0 @@
-@forward './../variables/options';
-
-@use 'sass:map';
-
-@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';
-
-.alert {
-  @include notification-mx.notification-size(alert);
-
-  &:not(.alert-action) {
-    @include notification-mx.notification-body(alert);
-  }
-}
-
-.alert-heading {
-  @include notification-mx.notification-heading(alert);
-}
-
-.alert-dismissible {
-  @include notification-mx.notification-dismissible(alert);
-}
-
-.alert-action {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: notification.$notification-gap;
-
-  > .alert-content {
-    flex: 1 1 auto;
-    @include notification-mx.notification-body(alert);
-  }
-
-  > .alert-buttons {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    gap: notification.$notification-buttons-gap;
-  }
-
-  @include media-breakpoint-up(md) {
-    &.alert-dismissible > .btn-close {
-      inset-block-start: calc(50% - #{0.5 * close.$close-size});
-    }
-  }
-
-  @include media-breakpoint-down(md) {
-    flex-direction: column;
-    align-items: stretch;
-    padding-inline: map.get(notification.$notification-padding-x-map, alert);
-
-    > .alert-content {
-      $icon-size: map.get(notification.$notification-icon-size-map, alert);
-
-      padding-inline-start: notification.$notification-gap + $icon-size;
-      padding-inline-end: notification.$notification-gap + close.$close-size;
-    }
-
-    &.no-icon > .alert-content {
-      padding-inline-start: 0;
-    }
-
-    > .alert-buttons {
-      display: flex;
-
-      > .btn,
-      > ::slotted(.btn) {
-        flex: 1 0 0;
-        width: 100%;
-      }
-
-      > .btn:first-child,
-      > ::slotted(.btn:first-child) {
-        margin-inline-start: 0;
-      }
-    }
-  }
-}
-
-.alert-fixed-bottom {
-  position: fixed;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  margin-bottom: 0;
-  border-radius: 0;
-  z-index: commons.$zindex-fixed;
-
-  @include media-breakpoint-up(xxl) {
-    $container-max-width: map.get(breakpoints.$grid-breakpoints, 'xxl') - 1;
-    $container-padding-x: map.get(grid.$grid-container-padding, 'xxl');
-    $alert-padding-x: map.get(notification.$notification-padding-x-map, alert);
-    $alert-icon-size: map.get(notification.$notification-icon-size-map, alert);
-    $fixed-alert-padding-x: '(100% - #{$container-max-width}) / 2 + #{$container-padding-x} + #{$alert-padding-x}';
-
-    padding-inline-end: calc(#{$fixed-alert-padding-x});
-    padding-inline-start: calc(
-      #{$fixed-alert-padding-x} + #{$alert-icon-size} + #{notification.$notification-gap}
-    );
-
-    &::before {
-      left: calc(#{$fixed-alert-padding-x});
-    }
-
-    &.no-icon {
-      padding-inline-start: calc(#{$fixed-alert-padding-x});
-    }
-
-    &.alert-dismissible {
-      padding-inline-end: calc(
-        #{$fixed-alert-padding-x} + #{notification.$notification-gap} + #{close.$close-size}
-      );
-
-      > .btn-close {
-        inset-inline-end: calc(#{$fixed-alert-padding-x});
-      }
-    }
-  }
-}
-
-@each $name, $color, $icon in notification.$notification-variants {
-  .alert-#{$name} {
-    @include notification-mx.notification-variant($color, $icon);
-  }
-}

package/components/form-check.css

@@ -1 +0,0 @@
-.form-check{display:flex;flex-wrap:wrap;row-gap:.75rem;margin-bottom:1rem}.form-check{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}.form-check:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-check:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check-inline{display:inline-flex}.form-check-inline:not(:last-of-type){margin-right:1.5rem}.form-check-input,.form-check-label{color:rgba(var(--post-contrast-color-rgb), 0.8);transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input,.form-check-label{transition:none}}.form-check-input:hover:not([disabled]),.form-check-input:hover:not([disabled])~.form-check-input-label,.form-check-label:hover:not([disabled]),.form-check-input:hover:not([disabled])~.form-check-label-label,.form-check-label:hover:not([disabled])~.form-check-input-label,.form-check-label:hover:not([disabled])~.form-check-label-label{color:var(--post-contrast-color)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input:hover:not([disabled]),.form-check-input:hover:not([disabled])~.form-check-input-label,.form-check-label:hover:not([disabled]),.form-check-input:hover:not([disabled])~.form-check-label-label,.form-check-label:hover:not([disabled])~.form-check-input-label,.form-check-label:hover:not([disabled])~.form-check-label-label{border-color:Highlight}}.form-check-input{display:inline-flex;flex:0 auto;appearance:none;background:rgba(0,0,0,0);height:1.375rem;width:1.375rem;border:2px solid currentColor;margin-top:1px;outline:none}.form-check-input:not([disabled]),.form-check-input:not([disabled])~.form-check-label{cursor:pointer}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input{border-color:FieldText}}.form-check-input::after{content:"";display:block;flex:1}.form-check-input[type=checkbox]:checked::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='m12.667 23.6-7.2-7.067 1.067-1.067 6.133 6.267L25.467 8.8l1.067 1.067z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 23.6-7.2-7.067 1.067-1.067 6.133 6.267L25.467 8.8l1.067 1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.form-check-input[type=checkbox]:indeterminate::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='m5.333 16.01 20-.021.001 1.333-20 .021z'/%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='m5.333 16.01 20-.021.001 1.333-20 .021z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input[type=checkbox]:checked,.form-check-input[type=checkbox]:indeterminate{background-color:SelectedItem !important;color:SelectedItemText !important}}.form-check-input[type=radio]{border-radius:50%}.form-check-input[type=radio]:checked::after{border:.25rem solid rgba(0,0,0,0);background-color:currentColor;border-radius:inherit;background-clip:padding-box}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input[type=radio]:checked::after{background-color:SelectedItem;border-color:Canvas}}.form-check-input[type=radio][disabled]{padding:2px;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' rx='100' ry='100' fill='none' stroke='hsl(0, 0%, 40%)' stroke-width='4px ' stroke-dasharray='4 2' /%3e%3c/svg%3e")}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.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]) .form-check-input[type=radio][disabled]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' rx='100' ry='100' fill='none' stroke='rgba(255, 255, 255, 0.8)' stroke-width='4px ' stroke-dasharray='4 2' /%3e%3c/svg%3e")}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input[type=radio][disabled]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' rx='100' ry='100' fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='4 2' /%3e%3c/svg%3e") !important}}.form-check-input[disabled]{border:0;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%'  fill='none' stroke='hsl(0, 0%, 40%)' stroke-width='4px ' stroke-dasharray='2 1.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4' pathLength='88' /%3e%3c/svg%3e")}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input[disabled][type=checkbox],.form-check-input[disabled][type=radio]{border-color:GrayText !important}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input[disabled][type=checkbox]:checked,.form-check-input[disabled][type=checkbox]:indeterminate{background-color:Field !important;color:GrayText !important}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input[disabled][type=radio]:checked::after{background-color:GrayText}}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.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]) .form-check-input[disabled]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%'  fill='none' stroke='rgba(255, 255, 255, 0.8)' stroke-width='4px ' stroke-dasharray='2 1.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4' pathLength='88' /%3e%3c/svg%3e")}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input[disabled]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%'  fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='2 1.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4' pathLength='88' /%3e%3c/svg%3e") !important}}.form-check-sm .form-check-input[disabled][type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%'  fill='none' stroke='hsl(0, 0%, 40%)' stroke-width='4px ' stroke-dasharray='2 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4' pathLength='66' /%3e%3c/svg%3e")}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.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]) .form-check-sm .form-check-input[disabled][type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%'  fill='none' stroke='rgba(255, 255, 255, 0.8)' stroke-width='4px ' stroke-dasharray='2 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4' pathLength='66' /%3e%3c/svg%3e")}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-sm .form-check-input[disabled][type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%'  fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='2 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4' pathLength='66' /%3e%3c/svg%3e") !important}}.form-check-input[disabled],.form-check-input[disabled]~.form-check-label{text-decoration:line-through;color:rgba(0,0,0,.6)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.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]) .form-check-input[disabled],:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.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]) .form-check-input[disabled]~.form-check-label{color:rgba(255,255,255,.8)}.form-check-sm .form-check-input{height:1rem;width:1rem}.form-check-sm .form-check-input[type=radio]:checked::after{border-width:2px}.form-check-label{flex:1}:not(.form-switch,.radio-button-card,.checkbox-button-card)>.form-check-label{padding-inline-start:.5rem}.form-check-sm .form-check-label{font-size:.75rem}.form-switch .form-check-input{height:2rem;width:4rem;border:0;border-radius:4rem;background-image:linear-gradient(to right, rgba(var(--post-contrast-color-rgb), 0.3) 50%, var(--post-success) 50%);background-size:8rem;background-position-x:0;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-position 250ms cubic-bezier(0.4, 0, 0.2, 1)}.form-switch .form-check-input::after{max-width:2rem;background-color:#fff;border:2px solid #666;border-radius:50%;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.form-switch .form-check-input:checked{background-position-x:4rem}.form-switch .form-check-input:checked::after{-webkit-mask-image:none;mask-image:none;background-color:#fff;border-color:#000;transform:translateX(2rem)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-switch .form-check-input{transition:none;border:2px solid CanvasText}.form-switch .form-check-input:checked{background-color:SelectedItem !important}.form-switch .form-check-input::after,.form-switch .form-check-input:checked::after{max-width:calc(2rem - 4px);border-color:Canvas;background-color:CanvasText}}.form-switch .form-check-input[disabled]{background:#ccc}.form-switch .form-check-input[disabled]::after{border-color:#999}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-switch .form-check-input[disabled]::after{border-color:Field}.form-switch .form-check-input[disabled]:checked{background-color:GrayText !important}}.form-switch:hover>.form-check-input:not([disabled]){background-color:rgba(var(--post-contrast-color-rgb), 0.1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-switch:hover>.form-check-input:not([disabled]){border-color:Highlight}}.form-switch .form-check-label{padding-top:.25rem}.form-switch .form-check-label.order-first{flex:0 auto;padding-inline-end:1rem}.form-switch .form-check-label:not(.order-first){padding-inline-start:1rem}

package/components/form-check.scss

@@ -1,297 +0,0 @@
-@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;
-
-.form-check {
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: form-check.$form-check-row-gap;
-  margin-bottom: form-check.$form-check-margin-bottom;
-
-  @include utility-mx.focus-style {
-    border-radius: commons.$border-radius;
-  }
-
-  &-inline {
-    display: inline-flex;
-  }
-
-  &-inline:not(:last-of-type) {
-    margin-right: form-check.$form-check-inline-margin-right;
-  }
-
-  &-input,
-  &-label {
-    color: rgba(var(--post-contrast-color-rgb), 0.8);
-    transition: color animation.$transition-base-timing;
-
-    @include utility-mx.high-contrast-mode {
-      transition: none;
-    }
-
-    &:hover:not([disabled]),
-    &:hover:not([disabled]) ~ &-label {
-      color: var(--post-contrast-color);
-
-      @include utility-mx.high-contrast-mode() {
-        border-color: Highlight;
-      }
-    }
-  }
-
-  &-input {
-    display: inline-flex;
-    flex: 0 auto;
-    appearance: none;
-    background: transparent;
-    height: form-check.$form-check-input-size;
-    width: form-check.$form-check-input-size;
-    border: form-check.$form-check-input-border-width solid currentColor;
-    margin-top: 1px;
-    @include utility-mx.focus-style-none();
-
-    &:not([disabled]),
-    &:not([disabled]) ~ .form-check-label {
-      cursor: pointer;
-    }
-
-    @include utility-mx.high-contrast-mode {
-      border-color: FieldText; // For blink-browser as otherwise the default color (which is not a full color) will be converted to Highlight
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      flex: 1;
-    }
-
-    &[type='checkbox'] {
-      &:checked::after {
-        @include icons-mx.icon(3035);
-      }
-
-      &:indeterminate::after {
-        @include icons-mx.icon(2039);
-      }
-
-      &:checked,
-      &:indeterminate {
-        @include utility-mx.high-contrast-mode {
-          background-color: SelectedItem !important;
-          color: SelectedItemText !important; // Important is needed for card-control
-        }
-      }
-    }
-
-    &[type='radio'] {
-      border-radius: 50%;
-
-      &:checked::after {
-        border: spacing.$size-micro solid transparent;
-        background-color: currentColor;
-        border-radius: inherit;
-        background-clip: padding-box;
-
-        @include utility-mx.high-contrast-mode {
-          background-color: SelectedItem;
-          border-color: Canvas;
-        }
-      }
-
-      &[disabled] {
-        padding: spacing.$size-line; // Used to mimic border width because it is used in combination with background-clip: padding-box; to size the selected shape
-        background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-light}');
-
-        @include color-mx.on-dark-background {
-          background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-dark}');
-        }
-
-        @include utility-mx.high-contrast-mode {
-          background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-hcm}') !important;
-        }
-      }
-    }
-
-    &[disabled] {
-      border: 0;
-      background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}');
-
-      &[type='checkbox'],
-      &[type='radio'] {
-        @include utility-mx.high-contrast-mode {
-          border-color: GrayText !important;
-        }
-      }
-
-      &[type='checkbox'] {
-        &:checked,
-        &:indeterminate {
-          @include utility-mx.high-contrast-mode {
-            background-color: Field !important;
-            color: GrayText !important;
-          }
-        }
-      }
-
-      &[type='radio'] {
-        &:checked::after {
-          @include utility-mx.high-contrast-mode {
-            background-color: GrayText;
-          }
-        }
-      }
-
-      @include color-mx.on-dark-background {
-        background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-lg}');
-      }
-
-      @include utility-mx.high-contrast-mode {
-        background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-lg}') !important;
-      }
-
-      .form-check-sm &[type='checkbox'] {
-        background-image: url('#{form-check.$form-check-input-disabled-background-url-light-sm}');
-
-        @include color-mx.on-dark-background {
-          background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-sm}');
-        }
-
-        @include utility-mx.high-contrast-mode {
-          background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-sm}') !important;
-        }
-      }
-    }
-
-    &[disabled],
-    &[disabled] ~ .form-check-label {
-      text-decoration: line-through;
-      color: color.$black-alpha-60;
-
-      @include color-mx.on-dark-background() {
-        color: color.$white-alpha-80;
-      }
-    }
-
-    .form-check-sm & {
-      height: form-check.$form-check-input-size-sm;
-      width: form-check.$form-check-input-size-sm;
-
-      &[type='radio'] {
-        &:checked::after {
-          border-width: spacing.$size-line;
-        }
-      }
-    }
-  }
-
-  &-label {
-    flex: 1;
-
-    :not(.form-switch, .radio-button-card, .checkbox-button-card) > & {
-      padding-inline-start: form-check.$form-check-column-gap;
-    }
-
-    .form-check-sm & {
-      font-size: type.$font-size-12;
-    }
-  }
-}
-
-.form-switch {
-  .form-check-input {
-    height: form-check.$form-switch-height;
-    width: form-check.$form-switch-width;
-    border: 0;
-    border-radius: form-check.$form-switch-width;
-    background-image: form-check.$form-switch-background-image;
-    background-size: 2 * form-check.$form-switch-width;
-    background-position-x: 0;
-    transition:
-      background-color animation.$transition-base-timing,
-      background-position animation.$transition-base-timing;
-
-    &::after {
-      max-width: form-check.$form-switch-height;
-      background-color: form-check.$form-switch-color;
-      border: form-check.$form-check-input-border-width solid form-check.$form-switch-border-color;
-      border-radius: 50%;
-      transition: transform animation.$transition-base-timing;
-    }
-
-    &:checked {
-      background-position-x: form-check.$form-switch-width;
-
-      &::after {
-        @include icons-mx.remove-icon;
-        background-color: form-check.$form-switch-color;
-        border-color: form-check.$form-switch-checked-border-color;
-        transform: translateX(2rem);
-      }
-    }
-
-    @include utility-mx.high-contrast-mode {
-      transition: none;
-      border: form-check.$form-check-input-border-width solid CanvasText;
-
-      &:checked {
-        background-color: SelectedItem !important;
-      }
-
-      &::after,
-      &:checked::after {
-        max-width: calc(
-          form-check.$form-switch-height - (form-check.$form-check-input-border-width * 2)
-        );
-        border-color: Canvas;
-        background-color: CanvasText;
-      }
-    }
-
-    &[disabled] {
-      background: form-check.$form-switch-disabled-bg;
-
-      &::after {
-        border-color: form-check.$form-switch-disabled-border-color;
-      }
-
-      @include utility-mx.high-contrast-mode {
-        &::after {
-          border-color: Field;
-        }
-
-        &:checked {
-          background-color: GrayText !important;
-        }
-      }
-    }
-  }
-
-  &:hover > .form-check-input:not([disabled]) {
-    background-color: rgba(var(--post-contrast-color-rgb), 0.1);
-
-    @include utility-mx.high-contrast-mode {
-      border-color: Highlight;
-    }
-  }
-
-  .form-check-label {
-    padding-top: form-check.$form-switch-label-padding-top;
-
-    &.order-first {
-      flex: 0 auto;
-      padding-inline-end: form-check.$form-switch-column-gap;
-    }
-
-    &:not(.order-first) {
-      padding-inline-start: form-check.$form-switch-column-gap;
-    }
-  }
-}

package/components/topic-teaser.css

@@ -1 +0,0 @@
-@media(min-width: 1440px){.topic-teaser[class*=bg-]{background-color:rgba(0,0,0,0) !important}}@media(min-width: 1440px){.topic-teaser .topic-teaser-container{padding-left:60px;padding-right:60px}}@media(min-width: 1024px)and (max-width: 1279.98px){.topic-teaser:not(.topic-teaser-reverse) .container{padding-right:0}}@media(min-width: 1280px)and (max-width: 1439.98px){.topic-teaser:not(.topic-teaser-reverse) .container{padding-right:0}}@media(min-width: 1440px){.topic-teaser:not(.topic-teaser-reverse) .container{padding-right:0}}@media(min-width: 1440px){.topic-teaser:not(.topic-teaser-reverse) .topic-teaser-container{padding-right:0;margin-right:-1px;clip-path:inset(0 1px -3.5rem 0)}}.topic-teaser:not(.topic-teaser-reverse) .topic-teaser-container>.row{justify-content:flex-end}@media(max-width: 399.98px){.topic-teaser:not(.topic-teaser-reverse) .topic-teaser-image-container{margin-right:-12px}}@media(min-width: 400px)and (max-width: 599.98px){.topic-teaser:not(.topic-teaser-reverse) .topic-teaser-image-container{margin-right:-16px}}@media(min-width: 600px)and (max-width: 779.98px){.topic-teaser:not(.topic-teaser-reverse) .topic-teaser-image-container{margin-right:-16px}}@media(min-width: 780px)and (max-width: 1023.98px){.topic-teaser:not(.topic-teaser-reverse) .topic-teaser-image-container{margin-right:-32px}}@media(min-width: 1024px)and (max-width: 1279.98px){.topic-teaser-reverse .container{padding-left:0}}@media(min-width: 1280px)and (max-width: 1439.98px){.topic-teaser-reverse .container{padding-left:0}}@media(min-width: 1440px){.topic-teaser-reverse .container{padding-left:0}}@media(min-width: 1440px){.topic-teaser-reverse .topic-teaser-container{padding-left:0}}@media(max-width: 1023.98px){.topic-teaser-reverse .topic-teaser-container>.row{flex-direction:column-reverse}}@media(max-width: 399.98px){.topic-teaser-reverse .topic-teaser-image-container{margin-left:-12px}}@media(min-width: 400px)and (max-width: 599.98px){.topic-teaser-reverse .topic-teaser-image-container{margin-left:-16px}}@media(min-width: 600px)and (max-width: 779.98px){.topic-teaser-reverse .topic-teaser-image-container{margin-left:-16px}}@media(min-width: 780px)and (max-width: 1023.98px){.topic-teaser-reverse .topic-teaser-image-container{margin-left:-32px}}.topic-teaser-image-container{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x)*.5);padding-left:calc(var(--bs-gutter-x)*.5);margin-top:var(--bs-gutter-y);margin-bottom:-2rem;flex:0 0 auto;width:83.33333333%}@media(min-width: 780px){.topic-teaser-image-container{margin-bottom:-2.5rem}}@media(min-width: 1280px){.topic-teaser-image-container{margin-bottom:-3.5rem}}@media(min-width: 600px){.topic-teaser-image-container{flex:0 0 auto;width:66.66666667%}}@media(min-width: 1024px){.topic-teaser-image-container{flex:0 0 auto;width:33.33333333%}}@media(min-width: 1280px){.topic-teaser-image-container{flex:0 0 auto;width:41.66666667%}}.topic-teaser-image{object-fit:cover;aspect-ratio:1/.7}@media(min-width: 400px){.topic-teaser-image{aspect-ratio:1/.7}}@media(min-width: 600px){.topic-teaser-image{aspect-ratio:1/.7}}@media(min-width: 780px){.topic-teaser-image{aspect-ratio:1/.7}}@media(min-width: 1024px){.topic-teaser-image{aspect-ratio:.66/1}}@media(min-width: 1280px){.topic-teaser-image{aspect-ratio:.9/1}}@media(min-width: 1440px){.topic-teaser-image{aspect-ratio:.9/1}}.topic-teaser-content{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x)*.5);padding-left:calc(var(--bs-gutter-x)*.5);margin-top:var(--bs-gutter-y);display:flex;flex-direction:column;flex:0 0 auto;width:100%}@media(min-width: 1024px){.topic-teaser-content{flex:0 0 auto;width:66.66666667%}}@media(min-width: 1280px){.topic-teaser-content{flex:0 0 auto;width:58.33333333%}}@media(min-width: 600px){.topic-teaser-content{gap:32px}}@media(min-width: 1280px){.topic-teaser-content{gap:40px}}@media(min-width: 600px){.topic-teaser-content{flex-direction:row}}.topic-teaser-content>.link-list{width:50%}@media(max-width: 599.98px){.topic-teaser-content>.link-list{width:100%}}.topic-teaser-title{width:50%}@media(max-width: 599.98px){.topic-teaser-title{width:auto}}.topic-teaser-title>span{display:block}.link-list{padding:0;list-style-type:none;font-size:.9375rem}@media(min-width: 1024px){.link-list{font-size:1.25rem}}.link-list-item>a{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;transition:opacity 200ms;border:0;border-top:1px solid rgba(var(--post-contrast-color-rgb), 0.2);text-decoration:none}.link-list-item>a::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='M10.533 3.467 9.466 4.4l11.6 11.6-11.6 11.6 1.067.933L22.933 16z'/%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='M10.533 3.467 9.466 4.4l11.6 11.6-11.6 11.6 1.067.933L22.933 16z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:inline-block;height:1rem;width:1rem;flex:0 0 auto;transform:translateX(0.25rem);transition:transform 200ms}.link-list-item>a[href]:hover::after{transform:translateX(0.5rem)}@media(min-width: 1024px){.link-list-item>a{padding-top:1.25rem;padding-bottom:1.25rem}}.topic-teaser.bg-light .link-list-item>a{border-top-color:#e6e6e6}