fokus-styles 2.3.0 → 2.5.0

package/dist/css/fokus.css

@@ -68,6 +68,8 @@
     --fs-component-overlay-backdrop: rgb(0 0 0 / 55%);
     --fs-component-panel-radius: var(--fs-radius-md);
     --fs-component-panel-shadow: var(--fs-shadow-lg);
+    --fs-contrast-border-width: var(--fs-border-width);
+    --fs-contrast-focus-width: var(--fs-focus-width);
     --fs-cq-sm: 320px;
     --fs-cq-md: 480px;
     --fs-cq-lg: 640px;
@@ -146,6 +148,14 @@
       --fs-feedback-info-bg: oklch(96.4918490239% 0.0173174767 286.0707018324deg);
     }
   }
+  @media (prefers-contrast: more) {
+    :root {
+      --fs-contrast-border-width: 2px;
+      --fs-contrast-focus-width: 3px;
+      --fs-focus-width: var(--fs-contrast-focus-width);
+      --fs-border-width: var(--fs-contrast-border-width);
+    }
+  }
 }
 @layer tokens {
   :root {
@@ -268,6 +278,18 @@
       outline: 2px solid CanvasText;
       outline-offset: 2px;
     }
+    button,
+    [role=button],
+    input,
+    select,
+    textarea,
+    .fs-btn {
+      border-color: ButtonText;
+      forced-color-adjust: auto;
+    }
+    .fs-u-focus-ring:focus-visible {
+      outline: 3px solid Highlight;
+    }
   }
 }
 @layer utilities {
@@ -1341,6 +1363,20 @@
   }
 }
 @layer components {
+  .fs-form-fieldset {
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--fs-space-3);
+    border: var(--fs-border-width) solid var(--fs-color-border);
+    border-radius: var(--fs-radius-md);
+  }
+  .fs-form-fieldset > legend {
+    max-inline-size: 100%;
+    padding-inline: var(--fs-space-1);
+    color: var(--fs-color-text);
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
   .fs-form-row {
     display: flex;
     flex-direction: row;
@@ -1684,9 +1720,53 @@
   .fs-switch {
     display: inline-flex;
     align-items: center;
+    min-inline-size: 0;
   }
   .fs-check {
-    --fs-check-mark: var(--fs-color-on-primary);
+    --fs-check-size: 18px;
+    --fs-check-border-width: 2px;
+    --fs-check-radius: var(--fs-radius-sm);
+    --fs-check-gap: var(--fs-space-2);
+    --fs-check-mark-color: var(--fs-color-on-primary);
+    --fs-control-hover-bg: var(--fs-color-subtle);
+    --fs-control-active-bg: var(--fs-alert-primary-bg);
+    --fs-control-error-color: var(--fs-color-danger);
+    --fs-control-success-color: var(--fs-color-success);
+  }
+  .fs-radio {
+    --fs-radio-size: 18px;
+    --fs-radio-dot-size: 8px;
+    --fs-radio-radius: 50%;
+    --fs-radio-gap: var(--fs-space-2);
+    --fs-control-hover-bg: var(--fs-color-subtle);
+    --fs-control-active-bg: var(--fs-alert-primary-bg);
+    --fs-control-error-color: var(--fs-color-danger);
+    --fs-control-success-color: var(--fs-color-success);
+  }
+  .fs-switch {
+    --fs-switch-track-width: 40px;
+    --fs-switch-track-height: 24px;
+    --fs-switch-thumb-width: 18px;
+    --fs-switch-thumb-height: 18px;
+    --fs-switch-thumb-offset: 3px;
+    --fs-switch-on-offset: 19px;
+    --fs-switch-radius: var(--fs-radius-md);
+    --fs-switch-thumb-radius: var(--fs-radius-sm);
+    --fs-switch-gap: var(--fs-space-2);
+    --fs-switch-track-bg: var(--fs-color-subtle);
+    --fs-switch-track-border: var(--fs-color-border-default);
+    --fs-switch-track-checked-bg: var(--fs-color-primary);
+    --fs-switch-thumb-bg: var(--fs-color-surface);
+    --fs-switch-thumb-border: var(--fs-color-border-default);
+    --fs-switch-thumb-shadow: var(--fs-shadow-sm);
+    --fs-switch-track-shadow: inset 0 1px 1px rgb(15 23 42 / 12%);
+    --fs-switch-hover-ring: color-mix(in srgb, var(--fs-color-primary) 18%, transparent);
+    --fs-switch-hover-shadow: 0 0 0 4px var(--fs-switch-hover-ring);
+    --fs-switch-active-scale: 0.92;
+    --fs-control-hover-bg: var(--fs-color-subtle);
+    --fs-control-active-bg: var(--fs-alert-primary-bg);
+    --fs-control-error-color: var(--fs-color-danger);
+    --fs-control-success-color: var(--fs-color-success);
   }
   .fs-check-input,
   .fs-radio-input,
@@ -1707,105 +1787,140 @@
     position: relative;
     display: inline-flex;
     align-items: center;
-    min-height: 20px;
-    padding-left: 28px;
+    min-block-size: 24px;
+    min-inline-size: 24px;
     color: var(--fs-color-text);
     font-size: 0.8125rem;
+    line-height: 1.35;
     cursor: pointer;
     -webkit-user-select: none;
             user-select: none;
   }
+  .fs-check-label {
+    padding-inline-start: calc(var(--fs-check-size) + var(--fs-check-gap));
+  }
+  .fs-radio-label {
+    padding-inline-start: calc(var(--fs-radio-size) + var(--fs-radio-gap));
+  }
+  .fs-switch-label {
+    padding-inline-start: calc(var(--fs-switch-track-width) + var(--fs-switch-gap));
+  }
   .fs-check-label::before,
   .fs-radio-label::before,
   .fs-switch-label::before {
     position: absolute;
-    left: 0;
+    inset-block-start: 50%;
     box-sizing: border-box;
-    border: 1px solid var(--fs-color-border);
+    border: var(--fs-border-width) solid var(--fs-color-border);
     background-color: var(--fs-color-surface);
     content: "";
-    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
-  }
-  .fs-check-label::before,
-  .fs-radio-label::before {
-    width: 18px;
-    height: 18px;
+    transform: translateY(-50%);
+    transition: background-color var(--fs-transition-fast) var(--fs-ease-standard), border-color var(--fs-transition-fast) var(--fs-ease-standard), box-shadow var(--fs-transition-fast) var(--fs-ease-standard);
   }
   .fs-check-label::before {
-    border: 2px solid var(--fs-color-primary);
-    border-radius: 0;
+    inset-inline-start: 0;
+    width: var(--fs-check-size);
+    height: var(--fs-check-size);
+    border-width: var(--fs-check-border-width);
+    border-radius: var(--fs-check-radius);
   }
   .fs-radio-label::before {
-    border-radius: 50%;
+    inset-inline-start: 0;
+    width: var(--fs-radio-size);
+    height: var(--fs-radio-size);
+    border-radius: var(--fs-radio-radius);
   }
-  .fs-check-label::after {
+  .fs-check-label::after,
+  .fs-radio-label::after,
+  .fs-switch-label::after {
     position: absolute;
-    left: 4px;
-    width: 9px;
-    height: 5px;
     content: "";
     opacity: 0;
-    border-bottom: 2px solid var(--fs-check-mark);
-    border-left: 2px solid var(--fs-check-mark);
-    transform: translateY(-1px) rotate(-45deg);
-    transition: opacity 0.1s ease-in-out;
+    transition: opacity var(--fs-transition-fast) var(--fs-ease-standard), background-color var(--fs-transition-fast) var(--fs-ease-standard), inset-inline-start var(--fs-transition-fast) var(--fs-ease-standard), transform var(--fs-transition-fast) var(--fs-ease-standard);
+  }
+  .fs-check-label::after {
+    inset-inline-start: calc((var(--fs-check-size) - 9px) / 2);
+    inset-block-start: 50%;
+    width: 9px;
+    height: 5px;
+    border-block-end: 2px solid var(--fs-check-mark-color);
+    border-inline-start: 2px solid var(--fs-check-mark-color);
+    transform: translateY(-65%) rotate(-45deg);
   }
   .fs-radio-label::after {
-    position: absolute;
-    left: 5px;
-    width: 8px;
-    height: 8px;
+    inset-inline-start: calc((var(--fs-radio-size) - var(--fs-radio-dot-size)) / 2);
+    inset-block-start: 50%;
+    width: var(--fs-radio-dot-size);
+    height: var(--fs-radio-dot-size);
     border-radius: 50%;
-    content: "";
-    opacity: 0;
     background-color: var(--fs-color-on-primary);
-    transition: opacity 0.1s ease-in-out;
+    transform: translateY(-50%);
   }
   .fs-check-input:checked + .fs-check-label::before,
   .fs-radio-input:checked + .fs-radio-label::before {
-    background-color: var(--fs-color-primary);
     border-color: var(--fs-color-primary);
+    background-color: var(--fs-color-primary);
   }
   .fs-check-input:checked + .fs-check-label::after,
   .fs-radio-input:checked + .fs-radio-label::after {
     opacity: 1;
   }
-  .fs-check-input:not(:checked, :indeterminate, :disabled, .is-invalid) + .fs-check-label:hover::before {
-    background-color: color-mix(in srgb, var(--fs-color-primary) 10%, transparent);
-  }
-  .fs-check-input:not(:disabled, :indeterminate, .is-invalid) + .fs-check-label:active::before {
-    background-color: color-mix(in srgb, var(--fs-color-primary) 86%, var(--fs-color-black));
-    border-color: var(--fs-color-primary);
+  .fs-check-input:not(:disabled, :indeterminate, .is-invalid) + .fs-check-label:hover::before,
+  .fs-radio-input:not(:disabled, .is-invalid) + .fs-radio-label:hover::before,
+  .fs-switch-input:not(:disabled, .is-invalid) + .fs-switch-label:hover::before {
+    background-color: var(--fs-control-hover-bg);
   }
-  .fs-check-input:checked:not(:disabled, .is-invalid) + .fs-check-label:active::after {
-    transform: translateY(-1px) rotate(-45deg) scale(0.9);
+  .fs-check-input:checked:not(:disabled, .is-invalid) + .fs-check-label:hover::before,
+  .fs-radio-input:checked:not(:disabled, .is-invalid) + .fs-radio-label:hover::before,
+  .fs-switch-input:checked:not(:disabled, .is-invalid) + .fs-switch-label:hover::before {
+    background-color: color-mix(in srgb, var(--fs-color-primary) 88%, var(--fs-color-black));
   }
-  .fs-switch-label {
-    padding-left: 44px;
+  .fs-check-input:not(:disabled, .is-invalid) + .fs-check-label:active::before,
+  .fs-radio-input:not(:disabled, .is-invalid) + .fs-radio-label:active::before,
+  .fs-switch-input:not(:disabled, .is-invalid) + .fs-switch-label:active::before {
+    background-color: var(--fs-control-active-bg);
+    border-color: var(--fs-color-primary);
   }
   .fs-switch-label::before {
-    width: 36px;
-    height: 20px;
-    border-radius: var(--fs-radius-md);
+    inset-inline-start: 0;
+    width: var(--fs-switch-track-width);
+    height: var(--fs-switch-track-height);
+    border-color: var(--fs-switch-track-border);
+    border-radius: var(--fs-switch-radius);
+    background-color: var(--fs-switch-track-bg);
+    box-shadow: var(--fs-switch-track-shadow);
   }
   .fs-switch-label::after {
-    position: absolute;
-    left: 2px;
-    width: 16px;
-    height: 14px;
-    border-radius: var(--fs-radius-sm);
-    content: "";
-    background-color: var(--fs-color-border);
-    transition: left 0.15s ease-in-out, background-color 0.15s ease-in-out;
+    inset-inline-start: var(--fs-switch-thumb-offset);
+    inset-block-start: 50%;
+    width: var(--fs-switch-thumb-width);
+    height: var(--fs-switch-thumb-height);
+    border-radius: var(--fs-switch-thumb-radius);
+    border: var(--fs-border-width) solid var(--fs-switch-thumb-border);
+    background-color: var(--fs-switch-thumb-bg);
+    opacity: 1;
+    transform: translateY(-50%);
+    box-shadow: var(--fs-switch-thumb-shadow);
   }
   .fs-switch-input:checked + .fs-switch-label::before {
-    background-color: var(--fs-color-primary);
-    border-color: var(--fs-color-primary);
+    border-color: var(--fs-switch-track-checked-bg);
+    background-color: var(--fs-switch-track-checked-bg);
+    box-shadow: none;
   }
   .fs-switch-input:checked + .fs-switch-label::after {
-    left: 18px;
+    inset-inline-start: var(--fs-switch-on-offset);
+    border-color: var(--fs-color-on-primary);
     background-color: var(--fs-color-on-primary);
   }
+  .fs-switch-input:not(:disabled, .is-invalid) + .fs-switch-label:hover::before {
+    box-shadow: var(--fs-switch-hover-shadow), var(--fs-switch-track-shadow);
+  }
+  .fs-switch-input:checked:not(:disabled, .is-invalid) + .fs-switch-label:hover::before {
+    box-shadow: var(--fs-switch-hover-shadow);
+  }
+  .fs-switch-input:not(:disabled) + .fs-switch-label:active::after {
+    transform: translateY(-50%) scale(var(--fs-switch-active-scale));
+  }
   .fs-check-input:focus-visible + .fs-check-label::before,
   .fs-radio-input:focus-visible + .fs-radio-label::before,
   .fs-switch-input:focus-visible + .fs-switch-label::before {
@@ -1814,153 +1929,184 @@
     border-color: var(--fs-color-primary);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
   }
+  .fs-check-input:disabled + .fs-check-label,
   .fs-radio-input:disabled + .fs-radio-label,
   .fs-switch-input:disabled + .fs-switch-label {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-  .fs-check-input:disabled + .fs-check-label {
     color: var(--fs-color-muted);
-    opacity: 1;
+    cursor: default;
+    opacity: var(--fs-disabled-opacity);
     pointer-events: none;
   }
-  .fs-check-input:disabled:not(:checked, :indeterminate) + .fs-check-label::before {
-    border-color: var(--fs-color-border);
+  .fs-check-input:disabled + .fs-check-label::before,
+  .fs-radio-input:disabled + .fs-radio-label::before,
+  .fs-switch-input:disabled + .fs-switch-label::before {
+    border-color: var(--fs-switch-track-border);
+    background-color: var(--fs-switch-track-bg);
+    box-shadow: none;
+  }
+  .fs-switch-input:disabled + .fs-switch-label::after {
     background-color: var(--fs-color-subtle);
+    box-shadow: none;
   }
-  .fs-check-input:disabled:checked + .fs-check-label::before {
-    border-color: color-mix(in srgb, var(--fs-color-primary) 55%, var(--fs-color-border));
-    background-color: color-mix(in srgb, var(--fs-color-primary) 45%, var(--fs-color-subtle));
+  .fs-check-input:disabled:checked + .fs-check-label::before,
+  .fs-radio-input:disabled:checked + .fs-radio-label::before,
+  .fs-switch-input:disabled:checked + .fs-switch-label::before {
+    border-color: color-mix(in srgb, var(--fs-switch-track-checked-bg) 55%, var(--fs-color-border));
+    background-color: color-mix(in srgb, var(--fs-switch-track-checked-bg) 45%, var(--fs-switch-track-bg));
   }
-  .fs-check-input:disabled:checked + .fs-check-label::after {
-    opacity: 0.72;
+  .fs-switch-input:disabled:checked + .fs-switch-label::after {
+    background-color: var(--fs-color-on-primary);
   }
-  .fs-radio-input.is-valid + .fs-radio-label::before {
-    border-color: var(--fs-color-success);
+  .fs-check-input.is-valid + .fs-check-label::before,
+  .fs-radio-input.is-valid + .fs-radio-label::before,
+  .fs-switch-input.is-valid + .fs-switch-label::before,
+  .fs-check-input[aria-invalid=false] + .fs-check-label::before,
+  .fs-radio-input[aria-invalid=false] + .fs-radio-label::before,
+  .fs-switch-input[aria-invalid=false] + .fs-switch-label::before {
+    border-color: var(--fs-control-success-color);
   }
   .fs-check-input.is-invalid + .fs-check-label::before,
-  .fs-radio-input.is-invalid + .fs-radio-label::before {
-    border-color: var(--fs-color-danger);
-  }
-  .fs-check-sm .fs-check-label,
-  .fs-radio-sm .fs-radio-label {
-    min-height: 16px;
-    padding-left: 24px;
-    font-size: 0.75rem;
-  }
-  .fs-check-sm .fs-check-label::before,
-  .fs-radio-sm .fs-radio-label::before {
-    width: 15px;
-    height: 15px;
-  }
-  .fs-check-sm .fs-check-label::after {
-    left: 3px;
-    width: 8px;
-    height: 4px;
-  }
-  .fs-radio-sm .fs-radio-label::after {
-    left: 4px;
-    width: 7px;
-    height: 7px;
-  }
-  .fs-check-lg .fs-check-label,
-  .fs-radio-lg .fs-radio-label {
-    min-height: 24px;
-    padding-left: 34px;
-    font-size: 1rem;
-  }
-  .fs-check-lg .fs-check-label::before,
-  .fs-radio-lg .fs-radio-label::before {
-    width: 22px;
-    height: 22px;
-  }
-  .fs-check-lg .fs-check-label::after {
-    left: 5px;
-    width: 11px;
-    height: 6px;
-  }
-  .fs-radio-lg .fs-radio-label::after {
-    left: 6px;
-    width: 10px;
-    height: 10px;
+  .fs-radio-input.is-invalid + .fs-radio-label::before,
+  .fs-switch-input.is-invalid + .fs-switch-label::before,
+  .fs-check-input[aria-invalid=true] + .fs-check-label::before,
+  .fs-radio-input[aria-invalid=true] + .fs-radio-label::before,
+  .fs-switch-input[aria-invalid=true] + .fs-switch-label::before {
+    border-color: var(--fs-control-error-color);
+  }
+  .fs-switch-input.is-invalid:checked + .fs-switch-label::before,
+  .fs-switch-input[aria-invalid=true]:checked + .fs-switch-label::before {
+    background-color: var(--fs-control-error-color);
+    box-shadow: none;
+  }
+  .fs-switch-input.is-valid:checked + .fs-switch-label::before,
+  .fs-switch-input[aria-invalid=false]:checked + .fs-switch-label::before {
+    background-color: var(--fs-control-success-color);
+    border-color: var(--fs-control-success-color);
+    box-shadow: none;
   }
-  .fs-switch-sm .fs-switch-label {
-    min-height: 16px;
-    padding-left: 38px;
-    font-size: 0.75rem;
-  }
-  .fs-switch-sm .fs-switch-label::before {
-    width: 30px;
-    height: 16px;
-  }
-  .fs-switch-sm .fs-switch-label::after {
-    width: 12px;
-    height: 10px;
-  }
-  .fs-switch-sm .fs-switch-input:checked + .fs-switch-label::after {
-    left: 16px;
-  }
-  .fs-switch-lg .fs-switch-label {
-    min-height: 26px;
-    padding-left: 52px;
-    font-size: 1rem;
-  }
-  .fs-switch-lg .fs-switch-label::before {
-    width: 44px;
-    height: 24px;
-  }
-  .fs-switch-lg .fs-switch-label::after {
-    width: 20px;
-    height: 18px;
+  .fs-check-input.is-invalid + .fs-check-label::before,
+  .fs-check-input[aria-invalid=true] + .fs-check-label::before {
+    background-color: var(--fs-control-error-color);
   }
-  .fs-switch-lg .fs-switch-input:checked + .fs-switch-label::after {
-    left: 22px;
+  .fs-check-input.is-invalid + .fs-check-label::after,
+  .fs-check-input[aria-invalid=true] + .fs-check-label::after {
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    width: 9px;
+    height: 9px;
+    border: 0;
+    background-image: linear-gradient(45deg, transparent 42%, var(--fs-color-on-danger, var(--fs-color-white)) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--fs-color-on-danger, var(--fs-color-white)) 42% 58%, transparent 58%);
+    opacity: 1;
+    transform: translate(-50%, -50%);
   }
   .fs-check-input:indeterminate + .fs-check-label::before {
-    border: 2px dashed var(--fs-color-primary);
+    border-color: var(--fs-color-primary);
     background-color: var(--fs-color-surface);
   }
   .fs-check-input:indeterminate + .fs-check-label::after {
-    left: 4px;
+    inset-inline-start: calc((var(--fs-check-size) - 10px) / 2);
+    inset-block-start: 50%;
     width: 10px;
-    height: 0;
+    height: 2px;
+    border: 0;
+    border-radius: 1px;
+    background-color: var(--fs-color-primary);
     opacity: 1;
-    border-bottom: 2px solid var(--fs-color-primary);
-    border-left: 0;
-    transform: translateY(3px) rotate(0deg);
+    transform: translateY(-50%);
   }
-  .fs-check-sm .fs-check-input:indeterminate + .fs-check-label::after {
-    left: 3px;
-    width: 8px;
+  .fs-check-sm,
+  .fs-radio-sm,
+  .fs-switch-sm {
+    font-size: 0.75rem;
   }
-  .fs-check-lg .fs-check-input:indeterminate + .fs-check-label::after {
-    left: 5px;
-    width: 12px;
+  .fs-check-sm {
+    --fs-check-size: 15px;
+    --fs-check-gap: 9px;
+  }
+  .fs-radio-sm {
+    --fs-radio-size: 15px;
+    --fs-radio-dot-size: 7px;
+    --fs-radio-gap: 9px;
+  }
+  .fs-switch-sm {
+    --fs-switch-track-width: 32px;
+    --fs-switch-track-height: 18px;
+    --fs-switch-thumb-width: 14px;
+    --fs-switch-thumb-height: 14px;
+    --fs-switch-thumb-offset: 2px;
+    --fs-switch-on-offset: 16px;
+    --fs-switch-hover-shadow: 0 0 0 3px var(--fs-switch-hover-ring);
+  }
+  .fs-check-lg,
+  .fs-radio-lg,
+  .fs-switch-lg {
+    font-size: 1rem;
   }
-  .fs-check-input.is-invalid + .fs-check-label::before {
-    background-color: var(--fs-color-danger);
+  .fs-check-lg {
+    --fs-check-size: 22px;
+    --fs-check-gap: 12px;
   }
-  .fs-check-input.is-invalid + .fs-check-label::after {
-    top: 6px;
-    left: 5px;
-    width: 8px;
-    height: 8px;
-    opacity: 1;
-    border: 0;
-    background-image: linear-gradient(45deg, transparent 42%, #ffffff 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #ffffff 42% 58%, transparent 58%);
-    transform: none;
+  .fs-radio-lg {
+    --fs-radio-size: 22px;
+    --fs-radio-dot-size: 10px;
+    --fs-radio-gap: 12px;
   }
-  .fs-check-sm .fs-check-input.is-invalid + .fs-check-label::after {
-    top: 5px;
-    left: 4px;
-    width: 7px;
-    height: 7px;
+  .fs-switch-lg {
+    --fs-switch-track-width: 48px;
+    --fs-switch-track-height: 28px;
+    --fs-switch-thumb-width: 22px;
+    --fs-switch-thumb-height: 22px;
+    --fs-switch-thumb-offset: 3px;
+    --fs-switch-on-offset: 23px;
+    --fs-switch-hover-shadow: 0 0 0 5px var(--fs-switch-hover-ring);
   }
-  .fs-check-lg .fs-check-input.is-invalid + .fs-check-label::after {
-    top: 6px;
-    left: 6px;
-    width: 10px;
-    height: 10px;
+  @media (prefers-reduced-motion: reduce) {
+    .fs-check-label::before,
+    .fs-check-label::after,
+    .fs-radio-label::before,
+    .fs-radio-label::after,
+    .fs-switch-label::before,
+    .fs-switch-label::after {
+      transition-duration: 0ms;
+    }
+  }
+  @media (prefers-contrast: more) {
+    .fs-check,
+    .fs-radio,
+    .fs-switch {
+      --fs-border-width: 2px;
+      --fs-focus-width: 3px;
+    }
+  }
+  @media (forced-colors: active) {
+    .fs-check-label::before,
+    .fs-radio-label::before,
+    .fs-switch-label::before,
+    .fs-switch-label::after {
+      border-color: ButtonText;
+      forced-color-adjust: auto;
+    }
+    .fs-check-input:checked + .fs-check-label::before,
+    .fs-radio-input:checked + .fs-radio-label::before,
+    .fs-switch-input:checked + .fs-switch-label::before {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+    .fs-switch-label::after {
+      background-color: ButtonFace;
+      border-color: ButtonText;
+      box-shadow: none;
+    }
+    .fs-switch-input:checked + .fs-switch-label::after {
+      background-color: HighlightText;
+      border-color: HighlightText;
+    }
+    .fs-check-input:focus-visible + .fs-check-label::before,
+    .fs-radio-input:focus-visible + .fs-radio-label::before,
+    .fs-switch-input:focus-visible + .fs-switch-label::before {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
   }
 }
 @layer components {
@@ -2386,46 +2532,155 @@
 }
 @layer components {
   .fs-alert {
+    --fs-alert-padding-block: 12px;
+    --fs-alert-padding-inline: 16px;
+    --fs-alert-gap: 12px;
+    --fs-alert-radius: var(--fs-radius-md, 6px);
+    --fs-alert-border-width: 1px;
+    --fs-alert-accent-width: 4px;
+    --fs-alert-icon-size: 20px;
+    --fs-alert-heading-gap: 4px;
+    --fs-alert-actions-gap: 8px;
     display: flex;
     align-items: flex-start;
-    gap: 8px;
-    padding: 12px 16px;
-    border: 1px solid var(--fs-color-border);
-    border-left: 5px solid var(--fs-color-border);
-    border-radius: 0;
+    gap: var(--fs-alert-gap);
+    min-inline-size: 0;
+    padding-block: var(--fs-alert-padding-block);
+    padding-inline: var(--fs-alert-padding-inline);
+    border: var(--fs-alert-border-width) solid var(--fs-color-border);
+    border-inline-start: var(--fs-alert-accent-width) solid var(--fs-color-border);
+    border-radius: var(--fs-alert-radius);
     color: var(--fs-color-text);
     background-color: var(--fs-color-surface-raised);
     font-size: 0.75rem;
   }
+  .fs-alert-inline {
+    --fs-alert-padding-block: 8px;
+    --fs-alert-padding-inline: 12px;
+    --fs-alert-gap: 8px;
+    --fs-alert-accent-width: 3px;
+    --fs-alert-icon-size: 16px;
+  }
+  .fs-alert-group {
+    display: grid;
+    gap: 12px;
+    min-inline-size: 0;
+  }
+  .fs-alert[aria-busy=true],
+  .fs-alert.is-loading {
+    cursor: progress;
+  }
+  .fs-alert[aria-busy=true] .fs-alert-actions,
+  .fs-alert.is-loading .fs-alert-actions {
+    opacity: 0.75;
+  }
+  .fs-alert .fs-spinner {
+    flex: 0 0 auto;
+    align-self: flex-start;
+    margin-block: 2px;
+  }
+  .fs-alert-icon {
+    display: inline-flex;
+    flex: 0 0 var(--fs-alert-icon-size);
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--fs-alert-icon-size);
+    block-size: var(--fs-alert-icon-size);
+    color: currentcolor;
+  }
+  .fs-alert-icon .fs-icon,
+  .fs-alert-icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  .fs-alert-content {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  .fs-alert-heading {
+    margin: 0 0 var(--fs-alert-heading-gap);
+    color: inherit;
+    font-size: inherit;
+    font-weight: 600;
+    line-height: 1.35;
+  }
+  .fs-alert-text {
+    margin: 0;
+    line-height: 1.5;
+  }
+  .fs-alert-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--fs-alert-actions-gap);
+    align-items: center;
+    margin-block-start: var(--fs-alert-actions-gap);
+  }
+  .fs-alert-link {
+    color: inherit;
+    font-weight: 500;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  .fs-alert-close {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    color: inherit;
+  }
   .fs-alert-primary {
     color: var(--fs-alert-primary-text);
     background-color: var(--fs-alert-primary-bg);
-    border-color: var(--fs-color-primary);
+    border-color: var(--fs-color-border);
+    border-inline-start-color: var(--fs-color-primary);
   }
   .fs-alert-secondary {
     color: var(--fs-alert-secondary-text);
     background-color: var(--fs-alert-secondary-bg);
-    border-color: var(--fs-color-secondary);
+    border-color: var(--fs-color-border);
+    border-inline-start-color: var(--fs-color-secondary);
   }
   .fs-alert-success {
     color: var(--fs-alert-success-text);
     background-color: var(--fs-alert-success-bg);
-    border-color: var(--fs-color-success);
+    border-color: var(--fs-color-border);
+    border-inline-start-color: var(--fs-color-success);
   }
   .fs-alert-warning {
     color: var(--fs-alert-warning-text);
     background-color: var(--fs-alert-warning-bg);
-    border-color: var(--fs-color-warning);
+    border-color: var(--fs-color-border);
+    border-inline-start-color: var(--fs-color-warning);
   }
   .fs-alert-danger {
     color: var(--fs-alert-danger-text);
     background-color: var(--fs-alert-danger-bg);
-    border-color: var(--fs-color-danger);
+    border-color: var(--fs-color-border);
+    border-inline-start-color: var(--fs-color-danger);
   }
   .fs-alert-info {
     color: var(--fs-alert-info-text);
     background-color: var(--fs-alert-info-bg);
-    border-color: var(--fs-color-info);
+    border-color: var(--fs-color-border);
+    border-inline-start-color: var(--fs-color-info);
+  }
+  @media (width <= 480px) {
+    .fs-alert {
+      --fs-alert-padding-inline: 12px;
+    }
+    .fs-alert-actions {
+      align-items: flex-start;
+    }
+  }
+  @media (forced-colors: active) {
+    .fs-alert {
+      border-color: CanvasText;
+      border-inline-start-color: Highlight;
+      color: CanvasText;
+      background-color: Canvas;
+    }
+    .fs-alert-link,
+    .fs-alert .fs-btn {
+      forced-color-adjust: none;
+    }
   }
 }
 @layer components {
@@ -2434,13 +2689,16 @@
     --fs-badge-bg: var(--fs-color-subtle);
     --fs-badge-border: transparent;
     --fs-badge-height: 22px;
-    --fs-badge-radius: 0;
+    --fs-badge-radius: var(--fs-radius-sm);
+    --fs-badge-padding-inline: 8px;
+    --fs-badge-padding-block-start: 2px;
+    --fs-badge-padding-block-end: 2px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     justify-content: center;
     min-height: var(--fs-badge-height);
-    padding: 1px 8px 3px;
+    padding: var(--fs-badge-padding-block-start) var(--fs-badge-padding-inline) var(--fs-badge-padding-block-end);
     border: 1px solid var(--fs-badge-border);
     border-radius: var(--fs-badge-radius);
     color: var(--fs-badge-color);
@@ -2537,12 +2795,16 @@
   }
   .fs-badge-sm {
     --fs-badge-height: 18px;
-    padding: 0 6px 2px;
+    --fs-badge-padding-inline: 6px;
+    --fs-badge-padding-block-start: 1px;
+    --fs-badge-padding-block-end: 1px;
     font-size: 0.6875rem;
   }
   .fs-badge-lg {
     --fs-badge-height: 26px;
-    padding: 2px 10px 4px;
+    --fs-badge-padding-inline: 10px;
+    --fs-badge-padding-block-start: 3px;
+    --fs-badge-padding-block-end: 3px;
     font-size: 0.8125rem;
   }
   .fs-badge-dot::before {
@@ -2559,13 +2821,19 @@
     padding-inline: 6px;
     font-variant-numeric: tabular-nums;
   }
+  .fs-badge-count-circle {
+    aspect-ratio: 1;
+    min-width: var(--fs-badge-height);
+    padding-inline: 0;
+    border-radius: 50%;
+  }
   .fs-badge-split {
     --fs-badge-split-label-bg: var(--fs-color-black);
     --fs-badge-split-label-color: var(--fs-color-white);
     --fs-badge-split-value-bg: var(--fs-color-primary);
     --fs-badge-split-value-color: #ffffff;
     --fs-badge-split-height: 22px;
-    --fs-badge-split-radius: 0;
+    --fs-badge-split-radius: var(--fs-radius-sm);
     display: inline-flex;
     min-height: var(--fs-badge-split-height);
     overflow: hidden;
@@ -2581,7 +2849,8 @@
     display: inline-flex;
     align-items: center;
     min-height: var(--fs-badge-split-height);
-    padding: 1px 8px 3px;
+    padding-block: 2px;
+    padding-inline: 8px;
   }
   .fs-badge-split-label {
     color: var(--fs-badge-split-label-color);
@@ -2629,11 +2898,13 @@
   }
   .fs-badge-split.fs-badge-sm .fs-badge-split-label,
   .fs-badge-split.fs-badge-sm .fs-badge-split-value {
-    padding: 0 6px 2px;
+    padding-block: 1px;
+    padding-inline: 6px;
   }
   .fs-badge-split.fs-badge-lg .fs-badge-split-label,
   .fs-badge-split.fs-badge-lg .fs-badge-split-value {
-    padding: 2px 10px 4px;
+    padding-block: 3px;
+    padding-inline: 10px;
   }
 }
 @layer components {
@@ -3381,8 +3652,17 @@
 }
 @layer components {
   .fs-tag {
+    --fs-tag-icon-size: var(--fs-tag-close-size);
+    --fs-tag-icon-glyph-size: 12px;
+    --fs-tag-icon-gap: 4px;
+    --fs-tag-icon-color: currentcolor;
+    --fs-tag-close-size: calc(var(--fs-badge-height) - 2px);
+    --fs-tag-close-gap: 4px;
+    --fs-tag-padding-inline-start: 8px;
+    --fs-tag-padding-inline-end: 2px;
     gap: 0;
-    padding: 0 0 0 8px;
+    padding-inline-start: var(--fs-tag-padding-inline-start);
+    padding-inline-end: var(--fs-tag-padding-inline-end);
   }
   .fs-tag-label {
     min-width: 0;
@@ -3397,23 +3677,29 @@
   }
   .fs-tag-icon {
     display: inline-grid;
-    width: 12px;
-    height: 12px;
-    flex: 0 0 12px;
-    margin-right: 4px;
+    width: var(--fs-tag-icon-size);
+    height: var(--fs-tag-icon-size);
+    flex: 0 0 var(--fs-tag-icon-size);
     place-items: center;
+    color: var(--fs-tag-icon-color);
+    margin-inline-end: var(--fs-tag-icon-gap);
+  }
+  .fs-tag-icon-end {
+    margin-inline-start: auto;
+    margin-inline-end: var(--fs-tag-icon-gap);
   }
   .fs-tag-icon .fs-icon {
-    width: 12px;
-    height: 12px;
+    display: block;
+    width: var(--fs-tag-icon-glyph-size);
+    height: var(--fs-tag-icon-glyph-size);
     stroke: currentcolor;
   }
   .fs-tag .fs-btn-close {
-    width: calc(var(--fs-badge-height) - 2px);
-    height: calc(var(--fs-badge-height) - 2px);
-    flex: 0 0 calc(var(--fs-badge-height) - 2px);
-    margin-left: 4px;
-    border-radius: 0;
+    width: var(--fs-tag-close-size);
+    height: var(--fs-tag-close-size);
+    flex: 0 0 var(--fs-tag-close-size);
+    margin-inline-start: var(--fs-tag-close-gap);
+    border-radius: var(--fs-badge-radius);
     background-color: transparent;
     color: inherit;
     opacity: 0.7;
@@ -3421,7 +3707,7 @@
   }
   .fs-tag .fs-btn-close::before,
   .fs-tag .fs-btn-close::after {
-    top: calc(50% + 1px);
+    top: 50%;
     width: 8px;
   }
   .fs-tag .fs-btn-close:hover {
@@ -3484,6 +3770,9 @@
   .fs-tag-group .fs-tag:focus-within {
     background-color: color-mix(in srgb, currentcolor 18%, transparent);
   }
+  .fs-tag:has(> .fs-tag-icon:not(.fs-tag-icon-end)) {
+    --fs-tag-padding-inline-start: 2px;
+  }
   .fs-tag-overflow {
     --fs-badge-bg: transparent;
     --fs-badge-color: var(--fs-alert-primary-text);
@@ -3534,7 +3823,7 @@
     display: inline-grid;
     width: calc(var(--fs-badge-height) - 2px);
     height: calc(var(--fs-badge-height) - 2px);
-    margin-left: 4px;
+    margin-inline-start: var(--fs-tag-close-gap);
     place-items: center;
   }
   .fs-tag-lock svg {
@@ -3795,118 +4084,229 @@
 }
 @layer components {
   .fs-tooltip {
+    --fs-tooltip-max-width: 240px;
+    --fs-tooltip-padding-block: 6px;
+    --fs-tooltip-padding-inline: 10px;
+    --fs-tooltip-radius: var(--fs-radius-sm);
+    --fs-tooltip-offset: 8px;
+    --fs-tooltip-shadow: var(--fs-shadow-sm, 0 2px 8px rgb(0 0 0 / 18%));
+    --fs-tooltip-arrow-size: 8px;
+    --fs-tooltip-transition-duration: 120ms;
     position: absolute;
     z-index: var(--fs-z-tooltip);
     display: none;
-    max-width: 220px;
+    max-inline-size: min(var(--fs-tooltip-max-width), 100vw - 16px);
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
   }
   .fs-tooltip.is-open {
     display: block;
+    pointer-events: none;
+    animation: fs-tooltip-in var(--fs-tooltip-transition-duration) ease-out;
   }
   .fs-tooltip-inner {
-    padding: 6px 10px;
-    border-radius: var(--fs-radius-sm);
+    padding-block: var(--fs-tooltip-padding-block);
+    padding-inline: var(--fs-tooltip-padding-inline);
+    border: 1px solid transparent;
+    border-radius: var(--fs-tooltip-radius);
     color: var(--fs-tooltip-text);
     background-color: var(--fs-tooltip-bg);
+    box-shadow: var(--fs-tooltip-shadow);
     font-size: 0.6875rem;
-    text-align: center;
+    line-height: 1.4;
+    text-align: start;
   }
   .fs-tooltip-arrow {
     position: absolute;
-    width: 8px;
-    height: 8px;
+    inline-size: var(--fs-tooltip-arrow-size);
+    block-size: var(--fs-tooltip-arrow-size);
     background-color: var(--fs-tooltip-bg);
     transform: rotate(45deg);
   }
   .fs-tooltip[data-placement=top] .fs-tooltip-arrow {
-    bottom: -4px;
-    left: 50%;
-    margin-left: -4px;
+    inset-block-end: -4px;
+    inset-inline-start: var(--fs-tooltip-arrow-offset, 50%);
+    margin-inline-start: -4px;
   }
   .fs-tooltip[data-placement=bottom] .fs-tooltip-arrow {
-    top: -4px;
-    left: 50%;
-    margin-left: -4px;
+    inset-block-start: -4px;
+    inset-inline-start: var(--fs-tooltip-arrow-offset, 50%);
+    margin-inline-start: -4px;
   }
   .fs-tooltip[data-placement=left] .fs-tooltip-arrow {
-    top: 50%;
-    right: -4px;
-    margin-top: -4px;
+    inset-block-start: var(--fs-tooltip-arrow-offset, 50%);
+    inset-inline-end: -4px;
+    margin-block-start: -4px;
   }
   .fs-tooltip[data-placement=right] .fs-tooltip-arrow {
-    top: 50%;
-    left: -4px;
-    margin-top: -4px;
+    inset-block-start: var(--fs-tooltip-arrow-offset, 50%);
+    inset-inline-start: -4px;
+    margin-block-start: -4px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-tooltip {
+      animation: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .fs-tooltip-inner,
+    .fs-tooltip-arrow {
+      color: CanvasText;
+      background-color: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+  @media (prefers-contrast: more) {
+    .fs-tooltip-inner {
+      border-color: currentcolor;
+      box-shadow: none;
+    }
+  }
+  @keyframes fs-tooltip-in {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 }
 @layer components {
   .fs-popover {
+    --fs-popover-width: 320px;
+    --fs-popover-max-width: min(var(--fs-popover-width), calc(100vw - 32px));
+    --fs-popover-padding-block: 12px;
+    --fs-popover-padding-inline: 14px;
+    --fs-popover-gap: 10px;
+    --fs-popover-radius: var(--fs-radius-md, 6px);
+    --fs-popover-shadow: var(--fs-shadow-md);
+    --fs-popover-icon-size: 20px;
+    --fs-popover-heading-gap: 4px;
+    --fs-popover-footer-gap: 8px;
+    --fs-popover-arrow-size: 8px;
+    --fs-popover-border-width: 1px;
     position: absolute;
     z-index: var(--fs-z-offcanvas);
     display: none;
-    max-width: 280px;
+    inline-size: var(--fs-popover-width);
+    max-inline-size: var(--fs-popover-max-width);
+    min-inline-size: 0;
     color: var(--fs-color-text);
     background-color: var(--fs-color-surface);
-    border: 1px solid var(--fs-color-border);
-    border-radius: var(--fs-radius-md);
-    box-shadow: var(--fs-shadow-md);
+    border: var(--fs-popover-border-width) solid var(--fs-color-border);
+    border-radius: var(--fs-popover-radius);
+    box-shadow: var(--fs-popover-shadow);
+    overflow-wrap: anywhere;
   }
   .fs-popover.is-open {
     display: block;
   }
   .fs-popover-header {
-    padding: 10px 14px;
+    display: flex;
+    align-items: center;
+    gap: var(--fs-popover-gap);
+    min-inline-size: 0;
+    padding-block: var(--fs-popover-padding-block);
+    padding-inline: var(--fs-popover-padding-inline);
     background-color: var(--fs-color-subtle);
     border-bottom: 1px solid var(--fs-color-border);
-    border-radius: var(--fs-radius-md) var(--fs-radius-md) 0 0;
+    border-radius: var(--fs-popover-radius) var(--fs-popover-radius) 0 0;
     font-size: 0.75rem;
     font-weight: 500;
   }
   .fs-popover-body {
-    padding: 14px;
+    min-inline-size: 0;
+    padding-block: var(--fs-popover-padding-block);
+    padding-inline: var(--fs-popover-padding-inline);
     font-size: 0.75rem;
+    line-height: 1.5;
+  }
+  .fs-popover-icon {
+    display: inline-flex;
+    flex: 0 0 var(--fs-popover-icon-size);
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--fs-popover-icon-size);
+    block-size: var(--fs-popover-icon-size);
+    color: currentcolor;
+  }
+  .fs-popover-icon .fs-icon,
+  .fs-popover-icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  .fs-popover-heading {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--fs-popover-heading-gap);
+    min-inline-size: 0;
+  }
+  .fs-popover-title,
+  .fs-popover-meta,
+  .fs-popover-text {
+    min-inline-size: 0;
+  }
+  .fs-popover-meta {
+    color: var(--fs-color-muted);
+    font-size: 0.6875rem;
+    font-weight: 400;
+  }
+  .fs-popover-text {
+    margin: 0;
+  }
+  .fs-popover-close {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    color: inherit;
   }
   .fs-popover-footer {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 8px;
-    padding: 10px 14px;
+    flex-wrap: wrap;
+    gap: var(--fs-popover-footer-gap);
+    padding-block: var(--fs-popover-padding-block);
+    padding-inline: var(--fs-popover-padding-inline);
     border-top: 1px solid var(--fs-color-border);
   }
   .fs-popover-arrow {
     position: absolute;
-    width: 8px;
-    height: 8px;
+    inline-size: var(--fs-popover-arrow-size);
+    block-size: var(--fs-popover-arrow-size);
     background-color: var(--fs-color-surface);
     border: 1px solid var(--fs-color-border);
     transform: rotate(45deg);
   }
   .fs-popover[data-placement=top] .fs-popover-arrow {
     bottom: -5px;
-    left: 50%;
-    margin-left: -4px;
+    inset-inline-start: var(--fs-popover-arrow-offset, 50%);
+    margin-inline-start: calc(var(--fs-popover-arrow-size) / -2);
     border-top: 0;
     border-left: 0;
   }
   .fs-popover[data-placement=bottom] .fs-popover-arrow {
     top: -5px;
-    left: 50%;
-    margin-left: -4px;
+    inset-inline-start: var(--fs-popover-arrow-offset, 50%);
+    margin-inline-start: calc(var(--fs-popover-arrow-size) / -2);
     border-right: 0;
     border-bottom: 0;
   }
   .fs-popover[data-placement=left] .fs-popover-arrow {
-    top: 50%;
-    right: -5px;
-    margin-top: -4px;
+    inset-block-start: var(--fs-popover-arrow-offset, 50%);
+    inset-inline-end: calc(var(--fs-popover-arrow-size) / -2 - 1px);
+    margin-block-start: calc(var(--fs-popover-arrow-size) / -2);
     border-bottom: 0;
     border-left: 0;
   }
   .fs-popover[data-placement=right] .fs-popover-arrow {
-    top: 50%;
-    left: -5px;
-    margin-top: -4px;
+    inset-block-start: var(--fs-popover-arrow-offset, 50%);
+    inset-inline-start: calc(var(--fs-popover-arrow-size) / -2 - 1px);
+    margin-block-start: calc(var(--fs-popover-arrow-size) / -2);
     border-top: 0;
     border-right: 0;
   }
@@ -3917,66 +4317,237 @@
     display: flex;
     gap: 12px;
   }
+  .fs-popover[aria-busy=true] {
+    cursor: progress;
+  }
+  @media (width <= 480px) {
+    .fs-popover {
+      --fs-popover-padding-inline: 12px;
+      --fs-popover-max-width: calc(100vw - 24px);
+    }
+    .fs-popover-footer {
+      align-items: flex-start;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-popover {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .fs-popover,
+    .fs-popover-arrow {
+      border-color: CanvasText;
+      color: CanvasText;
+      background-color: Canvas;
+      box-shadow: none;
+    }
+    .fs-popover-header,
+    .fs-popover-footer {
+      border-color: CanvasText;
+      background-color: Canvas;
+    }
+  }
 }
 @layer components {
   .fs-toast-container {
+    --fs-toast-offset: 16px;
+    --fs-toast-gap: 8px;
+    --fs-toast-width: 360px;
+    --fs-toast-max-width: calc(100vw - 32px);
     position: fixed;
-    right: 16px;
-    bottom: 16px;
+    inset-inline-end: calc(var(--fs-toast-offset) + env(safe-area-inset-inline-end, 0px));
+    inset-block-end: calc(var(--fs-toast-offset) + env(safe-area-inset-bottom, 0px));
     z-index: var(--fs-z-toast);
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    width: min(360px, 100%);
-    max-width: calc(100vw - 2 * var(--fs-space-3));
+    gap: var(--fs-toast-gap);
+    inline-size: min(var(--fs-toast-width), 100%);
+    max-inline-size: var(--fs-toast-max-width);
   }
   .fs-toast {
+    --fs-toast-padding-block: 12px;
+    --fs-toast-padding-inline: 14px;
+    --fs-toast-gap: 10px;
+    --fs-toast-radius: var(--fs-radius-md, 6px);
+    --fs-toast-shadow: var(--fs-shadow-md);
+    --fs-toast-icon-size: 20px;
+    --fs-toast-title-gap: 4px;
+    --fs-toast-actions-gap: 8px;
+    --fs-toast-border-width: 1px;
+    --fs-toast-progress-height: 3px;
     display: flex;
     overflow: hidden;
     flex-direction: column;
-    border: 1px solid var(--fs-color-border);
-    border-radius: var(--fs-radius-md);
+    min-inline-size: 0;
+    border: var(--fs-toast-border-width) solid var(--fs-color-border);
+    border-inline-start: 4px solid var(--fs-color-border);
+    border-radius: var(--fs-toast-radius);
     color: var(--fs-color-text);
     background-color: var(--fs-color-surface);
-    box-shadow: var(--fs-shadow-md);
+    box-shadow: var(--fs-toast-shadow);
+    overflow-wrap: anywhere;
   }
   .fs-toast-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 10px 12px;
+    gap: var(--fs-toast-gap);
+    min-inline-size: 0;
+    padding-block: var(--fs-toast-padding-block);
+    padding-inline: var(--fs-toast-padding-inline);
     border-bottom: 1px solid var(--fs-color-border);
     font-size: 0.75rem;
     font-weight: 500;
   }
+  .fs-toast-icon {
+    display: inline-flex;
+    flex: 0 0 var(--fs-toast-icon-size);
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--fs-toast-icon-size);
+    block-size: var(--fs-toast-icon-size);
+    color: currentcolor;
+  }
+  .fs-toast-icon .fs-icon,
+  .fs-toast-icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  .fs-toast-heading {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--fs-toast-title-gap);
+    min-inline-size: 0;
+  }
+  .fs-toast-title,
+  .fs-toast-meta {
+    min-inline-size: 0;
+  }
+  .fs-toast-meta {
+    color: var(--fs-color-muted);
+    font-size: 0.6875rem;
+    font-weight: 400;
+  }
+  .fs-toast-close {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    color: inherit;
+  }
   .fs-toast-body {
-    padding: 12px;
+    min-inline-size: 0;
+    padding-block: var(--fs-toast-padding-block);
+    padding-inline: var(--fs-toast-padding-inline);
     font-size: 0.75rem;
+    line-height: 1.5;
+  }
+  .fs-toast-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--fs-toast-actions-gap);
+    align-items: center;
+    padding-block: 0 var(--fs-toast-padding-block);
+    padding-inline: var(--fs-toast-padding-inline);
+  }
+  .fs-toast-link {
+    color: inherit;
+    font-weight: 500;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  .fs-toast-progress {
+    display: none;
+    align-self: stretch;
+    margin-inline-start: auto;
+    inline-size: 100%;
+    block-size: var(--fs-toast-progress-height);
+    background-color: currentcolor;
+    opacity: 0.5;
+  }
+  .fs-toast.is-progressing[data-toast-progress=true]:not([data-autohide=false]) .fs-toast-progress {
+    display: block;
+    inline-size: 100%;
+    transition: inline-size 50ms linear;
+  }
+  .fs-toast.is-paused .fs-toast-progress,
+  .fs-toast.is-progressing[data-toast-progress=true]:not([data-autohide=false]):hover .fs-toast-progress {
+    animation-play-state: paused;
   }
   .fs-toast-primary .fs-toast-header {
     color: var(--fs-alert-primary-text);
     background-color: var(--fs-alert-primary-bg);
   }
+  .fs-toast-primary {
+    border-inline-start-color: var(--fs-color-primary);
+  }
   .fs-toast-secondary .fs-toast-header {
     color: var(--fs-alert-secondary-text);
     background-color: var(--fs-alert-secondary-bg);
   }
+  .fs-toast-secondary {
+    border-inline-start-color: var(--fs-color-secondary);
+  }
   .fs-toast-success .fs-toast-header {
     color: var(--fs-alert-success-text);
     background-color: var(--fs-alert-success-bg);
   }
+  .fs-toast-success {
+    border-inline-start-color: var(--fs-color-success);
+  }
   .fs-toast-warning .fs-toast-header {
     color: var(--fs-alert-warning-text);
     background-color: var(--fs-alert-warning-bg);
   }
+  .fs-toast-warning {
+    border-inline-start-color: var(--fs-color-warning);
+  }
   .fs-toast-danger .fs-toast-header {
     color: var(--fs-alert-danger-text);
     background-color: var(--fs-alert-danger-bg);
   }
+  .fs-toast-danger {
+    border-inline-start-color: var(--fs-color-danger);
+  }
   .fs-toast-info .fs-toast-header {
     color: var(--fs-alert-info-text);
     background-color: var(--fs-alert-info-bg);
   }
+  .fs-toast-info {
+    border-inline-start-color: var(--fs-color-info);
+  }
+  @media (width <= 480px) {
+    .fs-toast-container {
+      --fs-toast-offset: 12px;
+      --fs-toast-max-width: calc(100vw - 24px);
+    }
+    .fs-toast-actions {
+      align-items: flex-start;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-toast.is-progressing[data-toast-progress=true]:not([data-autohide=false]) .fs-toast-progress {
+      animation: none;
+      inline-size: 100%;
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .fs-toast {
+      border-color: CanvasText;
+      border-inline-start-color: Highlight;
+      color: CanvasText;
+      background-color: Canvas;
+      box-shadow: none;
+    }
+    .fs-toast-header {
+      border-color: CanvasText;
+      background-color: Canvas;
+    }
+    .fs-toast-progress {
+      background-color: Highlight;
+    }
+  }
 }
 @layer components {
   .fs-pagination {
@@ -5627,6 +6198,59 @@
     inset-block-start: var(--fs-space-4);
   }
 }
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-stack-gap, var(--fs-space-3));
+  }
+  .fs-cluster {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--fs-cluster-gap, var(--fs-space-2));
+  }
+  .fs-responsive-media {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+  @media (width <= 639.98px) {
+    .fs-modal-dialog, .fs-offcanvas {
+      max-width: 100%;
+      margin-inline: 0;
+      border-radius: 0;
+    }
+    .fs-table-responsive {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+    .fs-btn-group-responsive, .fs-btn-group-responsive > .fs-btn {
+      width: 100%;
+    }
+    .fs-btn-group-responsive {
+      flex-direction: column;
+    }
+  }
+  @media (width >= 640px) {
+    .fs-stack-md-row {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-stack, .fs-cluster {
+      scroll-behavior: auto;
+    }
+  }
+  @media (forced-colors: active) {
+    .fs-card, .fs-dropdown-menu, .fs-modal-content, .fs-offcanvas, .fs-toast {
+      border: 1px solid CanvasText;
+      box-shadow: none;
+    }
+  }
+}
 @layer utilities {
   .fs-u-cq {
     container-type: inline-size;
@@ -9040,6 +9664,7 @@
     }
   }
 }
+/* stylelint-disable declaration-block-single-line-max-declarations */
 @layer utilities {
   .fs-u-color-primary {
     color: var(--fs-color-primary, oklch(53.5630074284% 0.2132145174 261.6264320248deg)) !important;
@@ -9281,6 +9906,141 @@
       text-align: start !important;
     }
   }
+  .fs-u-d-block {
+    display: block !important;
+  }
+  .fs-u-d-inline {
+    display: inline !important;
+  }
+  .fs-u-d-inline-block {
+    display: inline-block !important;
+  }
+  .fs-u-d-flex {
+    display: flex !important;
+  }
+  .fs-u-d-grid {
+    display: grid !important;
+  }
+  .fs-u-d-none {
+    display: none !important;
+  }
+  .fs-u-flex-row {
+    flex-direction: row !important;
+  }
+  .fs-u-flex-column {
+    flex-direction: column !important;
+  }
+  .fs-u-flex-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .fs-u-flex-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .fs-u-flex-wrap {
+    flex-wrap: wrap !important;
+  }
+  .fs-u-flex-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .fs-u-justify-start {
+    justify-content: flex-start !important;
+  }
+  .fs-u-justify-center {
+    justify-content: center !important;
+  }
+  .fs-u-justify-end {
+    justify-content: flex-end !important;
+  }
+  .fs-u-justify-between {
+    justify-content: space-between !important;
+  }
+  .fs-u-align-start {
+    align-items: flex-start !important;
+  }
+  .fs-u-align-center {
+    align-items: center !important;
+  }
+  .fs-u-align-end {
+    align-items: flex-end !important;
+  }
+  .fs-u-gap-0 {
+    gap: 0 !important;
+  }
+  .fs-u-row-gap-0 {
+    row-gap: 0 !important;
+  }
+  .fs-u-column-gap-0 {
+    column-gap: 0 !important;
+  }
+  .fs-u-gap-1 {
+    gap: 0.25rem !important;
+  }
+  .fs-u-row-gap-1 {
+    row-gap: 0.25rem !important;
+  }
+  .fs-u-column-gap-1 {
+    column-gap: 0.25rem !important;
+  }
+  .fs-u-gap-2 {
+    gap: 0.5rem !important;
+  }
+  .fs-u-row-gap-2 {
+    row-gap: 0.5rem !important;
+  }
+  .fs-u-column-gap-2 {
+    column-gap: 0.5rem !important;
+  }
+  .fs-u-gap-3 {
+    gap: 1rem !important;
+  }
+  .fs-u-row-gap-3 {
+    row-gap: 1rem !important;
+  }
+  .fs-u-column-gap-3 {
+    column-gap: 1rem !important;
+  }
+  .fs-u-gap-4 {
+    gap: 1.5rem !important;
+  }
+  .fs-u-row-gap-4 {
+    row-gap: 1.5rem !important;
+  }
+  .fs-u-column-gap-4 {
+    column-gap: 1.5rem !important;
+  }
+  .fs-u-gap-5 {
+    gap: 3rem !important;
+  }
+  .fs-u-row-gap-5 {
+    row-gap: 3rem !important;
+  }
+  .fs-u-column-gap-5 {
+    column-gap: 3rem !important;
+  }
+  .fs-u-text-start {
+    text-align: start !important;
+  }
+  .fs-u-text-center {
+    text-align: center !important;
+  }
+  .fs-u-text-end {
+    text-align: end !important;
+  }
+  .fs-u-text-wrap {
+    white-space: normal !important;
+  }
+  .fs-u-text-nowrap {
+    white-space: nowrap !important;
+  }
+  .fs-u-fw-normal {
+    font-weight: 400 !important;
+  }
+  .fs-u-fw-semibold {
+    font-weight: 600 !important;
+  }
+  .fs-u-fw-bold {
+    font-weight: 700 !important;
+  }
 }
 @layer tokens {
   [data-fs-brand=violet] {