fokus-styles 2.3.0 → 2.5.0

package/dist/css/components.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 {
@@ -585,46 +607,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 {
@@ -633,13 +764,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);
@@ -736,12 +870,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 {
@@ -758,13 +896,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;
@@ -780,7 +924,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);
@@ -828,11 +973,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 {
@@ -1580,8 +1727,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;
@@ -1596,23 +1752,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;
@@ -1620,7 +1782,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 {
@@ -1683,6 +1845,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);
@@ -1733,7 +1898,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 {
@@ -1994,118 +2159,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;
   }
@@ -2116,66 +2392,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 {
@@ -3826,6 +4273,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 tokens {
   [data-fs-brand=violet] {
     --fs-color-primary: #6d28d9;