@threadlabs/looma 0.14.8 → 0.15.0

package/styles/ui-listbox.css

@@ -0,0 +1,69 @@
+/* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@property --ui-listbox-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-listbox-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-listbox-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-listbox-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-listbox-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+@scope ([data-component~="ui-listbox"]) to ([data-component], [data-slotted]) {
+:scope {
+      box-sizing: border-box;
+      display: block;
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-min-block-size);
+      margin: 0;
+      padding: var(--ui-space-1);
+      border: 1px solid var(--ui-listbox-border, var(--ui-control-border));
+      border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
+      background: var(--ui-listbox-surface, var(--ui-control-surface));
+      color: var(--ui-text-primary);
+      color-scheme: light dark;
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      box-shadow: var(--ui-control-inset);
+    }
+
+    :scope option,
+    :scope optgroup {
+      padding: var(--ui-space-2);
+      font: inherit;
+    }
+
+    :scope:focus-visible {
+      border-color: var(--ui-control-focus);
+      outline: 2px solid var(--ui-focus-ring);
+      outline-offset: 2px;
+      box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
+    }
+
+    :scope[aria-invalid="true"],
+    :scope:is(:user-invalid, [data-user-invalid]) {
+      border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
+    }
+
+    :scope:disabled {
+      background: var(--ui-control-surface-disabled);
+      color: var(--ui-disabled-text);
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+}

package/styles/ui-menu-group.css

@@ -0,0 +1,19 @@
+/* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@scope ([data-component~="ui-menu-group"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: flex;
+      flex-direction: column;
+      min-inline-size: 0;
+    }
+
+    .heading {
+      padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-semibold);
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+}

package/styles/ui-menu-item.css

@@ -27,7 +27,9 @@
 /* This component's hooks style the element they are set on, and never a nested one. */
 
     :scope {
-      display: block;
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-5);
       box-sizing: border-box;
       width: 100%;
       padding: var(--ui-menu-item-padding-block, var(--_ui-default-menu-item-padding-block, var(--ui-space-2)))
@@ -37,19 +39,44 @@
       color: var(--ui-text-primary);
       font-size: var(--ui-menu-item-font-size, var(--_ui-default-menu-item-font-size, var(--ui-font-size-md)));
       font-weight: var(--ui-font-medium);
+      text-decoration: none;
       cursor: pointer;
       outline: none;
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
-     * Trimming applies to block containers, so the box is a block with centred content. */
+    .label {
+      flex: 1;
+      min-inline-size: 0;
+    }
+
+    .indicator {
+      display: inline-flex;
+      place-items: center;
+      flex: none;
+      inline-size: var(--ui-icon-size-md);
+      color: var(--ui-accent-solid);
+    }
+
+    :scope[data-ui-menu-item-state~="type=action"] .indicator {
+      display: none;
+    }
+
+    .shortcut {
+      margin-inline-start: auto;
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-normal);
+    }
+
+    .shortcut:empty {
+      display: none;
+    }
+
+    /* Keep the text row at the shared control height where cap trimming is available. */
     @supports (text-box-trim: trim-both) {
       :scope {
-        display: block;
         min-block-size: var(--ui-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem));
-        align-content: center;
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
@@ -59,11 +86,22 @@
       background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
     }
 
+    :scope:focus-visible {
+      outline: 2px solid var(--ui-focus-ring);
+      outline-offset: -2px;
+    }
+
     :scope[aria-disabled="true"] {
       opacity: 0.6;
       cursor: not-allowed;
     }
 
+    @media (forced-colors: active) {
+      :scope:focus-visible {
+        outline-color: Highlight;
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
@@ -72,11 +110,12 @@
 @scope ([data-component~="ui-menu-item"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
-     * Trimming applies to block containers, so the box is a block with centred content. */
+    /* Keep the text row at the shared control height where cap trimming is available. */
     @supports (text-box-trim: trim-both) {
     }
 
+    @media (forced-colors: active) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-menu.css

@@ -1,4 +1,20 @@
 /* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@property --ui-menu-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-menu-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-menu-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-menu-shadow {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-menu-viewport-gap {
       syntax: "*";
       inherits: false;
@@ -18,6 +34,10 @@
     }
 
     :scope {
+      --_ui-menu-surface: var(--ui-menu-surface);
+      --_ui-menu-border: var(--ui-menu-border);
+      --_ui-menu-radius: var(--ui-menu-radius);
+      --_ui-menu-shadow: var(--ui-menu-shadow);
       /* A menu nested in a compact one starts again from its own density. */
       --_ui-default-menu-item-padding-block: initial;
       --_ui-default-menu-item-padding-inline: initial;
@@ -44,14 +64,22 @@
       box-sizing: border-box;
       max-inline-size: inherit;
       padding: var(--ui-space-1);
-      background: var(--ui-surface-elevated);
-      border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-lg);
-      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: 1px solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+      box-shadow: var(--_ui-menu-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       max-block-size: inherit;
       overflow: auto;
     }
 
+    .surface hr {
+      align-self: stretch;
+      block-size: 0;
+      margin: var(--ui-space-1) 0;
+      border: 0;
+      border-block-start: 1px solid var(--ui-border-default);
+    }
+
     :scope:not(:scope[data-ui-menu-state~="internalOpen"]) {
       display: none;
     }

package/styles/ui-popover.css

@@ -1,12 +1,36 @@
 /* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@property --ui-popover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-popover-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-popover-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-popover-shadow {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-popover-viewport-gap {
       syntax: "*";
       inherits: false;
     }
+@property --ui-popover-offset {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-popover"]) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
     :scope {
+      --_ui-popover-surface: var(--ui-popover-surface);
+      --_ui-popover-border: var(--ui-popover-border);
+      --_ui-popover-radius: var(--ui-popover-radius);
+      --_ui-popover-shadow: var(--ui-popover-shadow);
       box-sizing: border-box;
       max-inline-size: min(
         20rem,
@@ -28,10 +52,10 @@
       max-block-size: inherit;
       overflow: auto;
       padding: var(--ui-space-3);
-      background: var(--ui-surface-elevated);
-      border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-lg);
-      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: 1px solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+      box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
 
     :scope:not(:scope[data-ui-popover-state~="internalOpen"]) {

package/styles/ui-radio-group.css

@@ -1,6 +1,11 @@
 /* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@property --ui-radio-group-invalid-text {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-radio-group"]) to ([data-component], [data-slotted]) {
 :scope {
+      --_ui-radio-group-invalid-text: var(--ui-radio-group-invalid-text, var(--ui-field-danger, var(--ui-danger-solid)));
       display: inline-flex;
       align-items: center;
       gap: var(--ui-space-2);
@@ -23,6 +28,10 @@
       clear: both;
     }
 
+    :scope[data-ui-radio-group-state~="invalid"] legend {
+      color: var(--_ui-radio-group-invalid-text);
+    }
+
     :scope[data-ui-radio-group-state~="orientation=vertical"] {
       display: inline-grid;
       justify-items: start;

package/styles/ui-search-shell.css

@@ -88,10 +88,10 @@
       max-block-size: var(--_ui-search-shell-max-height, 80vh);
       margin-inline: auto;
       overflow: hidden;
-      background: var(--_ui-search-shell-surface, var(--ui-surface-elevated));
-      border: 1px solid var(--_ui-search-shell-border, var(--ui-border-default));
-      border-radius: var(--_ui-search-shell-radius, var(--ui-radius-dialog));
-      box-shadow: var(--_ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
+      background: var(--_ui-search-shell-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: 1px solid var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--_ui-search-shell-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
+      box-shadow: var(--_ui-search-shell-shadow, var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl))));
     }
 
     .search {
@@ -188,7 +188,7 @@
       min-block-size: var(--ui-control-min-block-size);
       padding: var(--ui-space-2) var(--ui-space-3);
       border: 1px solid var(--ui-control-border);
-      border-radius: var(--ui-radius-md);
+      border-radius: var(--ui-field-radius, var(--ui-radius-md));
       background: var(--ui-control-surface);
       color: var(--ui-text-primary);
       font: inherit;

package/styles/ui-select.css

@@ -3,6 +3,14 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-select-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-select-invalid-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-select-radius {
       syntax: "*";
       inherits: false;
@@ -23,7 +31,7 @@
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-select-radius, var(--ui-radius-md));
+      border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background-color: var(--ui-control-surface, var(--ui-surface-elevated));
       color: var(--ui-text-primary);
       color-scheme: light dark;
@@ -63,13 +71,15 @@
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
     :scope[aria-invalid="true"],
     :scope:is(:user-invalid, [data-user-invalid]) {
-      border-color: var(--ui-danger-solid);
+      border-color: var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
     }
 
     :scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-      box-shadow:
+      box-shadow: var(
+        --ui-select-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+        0 0 0 3px color-mix(in srgb, var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%, transparent)
+      );
     }
 
     :scope:disabled {

package/styles/ui-switch.css

@@ -59,7 +59,7 @@
       height: var(--_ui-switch-track-height, 1.5rem);
       padding: 0;
       border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 10%, transparent);
       cursor: pointer;
@@ -74,7 +74,7 @@
       left: 3px;
       width: 1rem;
       height: 1rem;
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       background: var(--ui-text-secondary);
       box-shadow: var(--ui-shadow-xs);
       transition: transform var(--ui-motion-fast) var(--ui-motion-ease);

package/styles/ui-switcher.css

@@ -62,6 +62,10 @@
       /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */
       flex-basis: calc((var(--_ui-switcher-threshold, 30rem) - 100%) * 999);
     }
+
+    :scope[data-ui-switcher-state~="overLimit"] > :where([data-slotted], [data-slotted] *):is(*) {
+      flex-basis: 100%;
+    }
     :scope[data-ui-switcher-state~="threshold=xs"] > :where([data-slotted], [data-slotted] *):is(*) {
       flex-basis: calc((var(--_ui-switcher-threshold, 20rem) - 100%) * 999);
     }

package/styles/ui-textarea.css

@@ -3,6 +3,14 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-textarea-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-textarea-invalid-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-textarea-radius {
       syntax: "*";
       inherits: false;
@@ -21,11 +29,12 @@
       min-inline-size: 0;
       min-block-size: calc(3rem * 2);
       margin: 0;
+      --_padding-block: var(--ui-space-2);
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
       resize: vertical;
       border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-textarea-radius, var(--ui-radius-md));
+      border-radius: var(--ui-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-control-surface, var(--ui-surface-elevated));
       color: var(--ui-text-primary);
       font: inherit;
@@ -61,13 +70,15 @@
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
     :scope[aria-invalid="true"],
     :scope:is(:user-invalid, [data-user-invalid]) {
-      border-color: var(--ui-danger-solid);
+      border-color: var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
     }
 
     :scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-      box-shadow:
+      box-shadow: var(
+        --ui-textarea-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+        0 0 0 3px color-mix(in srgb, var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%, transparent)
+      );
     }
 
     :scope:disabled {
@@ -78,15 +89,24 @@
     }
 
     :scope[data-ui-textarea-state~="size=sm"] {
+      --_padding-block: var(--ui-space-1);
       padding: var(--ui-space-1) var(--ui-space-2);
       font-size: var(--ui-font-size-sm);
     }
 
     :scope[data-ui-textarea-state~="size=lg"] {
+      --_padding-block: var(--ui-space-3);
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: var(--ui-font-size-md);
     }
 
+    @supports (field-sizing: content) {
+      :scope[data-ui-textarea-state~="autosize"] {
+        field-sizing: content;
+        min-block-size: calc(var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px);
+      }
+    }
+
     /* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
     @media (pointer: coarse) {
       :scope[data-ui-textarea-state~="size=sm"] {
@@ -106,6 +126,9 @@
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 
+    @supports (field-sizing: content) {
+    }
+
     /* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
     @media (pointer: coarse) {
     }

package/styles/ui-toast-region.css

@@ -1,4 +1,20 @@
 /* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@property --ui-toast-region-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-toast-region-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-toast-region-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-toast-region-shadow {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-toast-region-enter-duration {
       syntax: "*";
       inherits: false;
@@ -27,11 +43,35 @@
         transform: translateY(0.75rem);
       }
     }
+@keyframes ui-toast-enter-bottom {
+      from {
+        opacity: 0;
+        transform: translateY(1rem);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+@keyframes ui-toast-exit-bottom {
+      from {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      to {
+        opacity: 0;
+        transform: translateY(-0.75rem);
+      }
+    }
 @scope ([data-component~="ui-toast-region"]) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
     :scope {
       /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-toast-region-surface: var(--ui-toast-region-surface);
+      --_ui-toast-region-border: var(--ui-toast-region-border);
+      --_ui-toast-region-radius: var(--ui-toast-region-radius);
+      --_ui-toast-region-shadow: var(--ui-toast-region-shadow);
       --_ui-toast-region-enter-duration: var(--ui-toast-region-enter-duration);
       --_ui-toast-region-exit-duration: var(--ui-toast-region-exit-duration);
 
@@ -61,26 +101,70 @@
       display: none;
     }
 
+    :scope[data-ui-toast-region-state~="placement=top-start"],
+    :scope[data-ui-toast-region-state~="placement=bottom-start"] {
+      left: auto;
+      right: auto;
+      inset-inline-start: calc(var(--ui-space-4) + env(safe-area-inset-left));
+      transform: none;
+    }
+
+    :scope[data-ui-toast-region-state~="placement=top-end"],
+    :scope[data-ui-toast-region-state~="placement=bottom-end"] {
+      left: auto;
+      right: auto;
+      inset-inline-end: calc(var(--ui-space-4) + env(safe-area-inset-right));
+      transform: none;
+    }
+
+    :scope[data-ui-toast-region-state~="placement=bottom"],
+    :scope[data-ui-toast-region-state~="placement=bottom-start"],
+    :scope[data-ui-toast-region-state~="placement=bottom-end"] {
+      top: auto;
+      bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
+    }
+
     .toast {
       display: grid;
       grid-template-columns: 1fr auto;
       gap: var(--ui-space-2);
       align-items: start;
-      border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-lg);
+      border: 1px solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       padding: var(--ui-space-3) var(--ui-space-4);
-      background: var(--ui-surface-elevated);
+      background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
-      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      box-shadow: var(--_ui-toast-region-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       animation: ui-toast-enter var(--_ui-toast-region-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
+    .toast[data-tone="info"] {
+      border-inline-start: 3px solid var(--ui-info-solid);
+    }
+    .toast[data-tone="success"] {
+      border-inline-start: 3px solid var(--ui-success-solid);
+    }
+    .toast[data-tone="warning"] {
+      border-inline-start: 3px solid var(--ui-warning-solid);
+    }
+    .toast[data-tone="danger"] {
+      border-inline-start: 3px solid var(--ui-danger-solid);
+    }
+
     /* Leaving slides on down and fades; the controller removes the toast when this ends. */
     .toast.closing {
       animation: ui-toast-exit var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
       pointer-events: none;
     }
 
+    :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"]) .toast {
+      animation-name: ui-toast-enter-bottom;
+    }
+
+    :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"]) .toast.closing {
+      animation-name: ui-toast-exit-bottom;
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .toast, .toast.closing {
         animation: none;