@duskmoon-dev/core 1.19.4 → 1.19.6

package/dist/components/index.css

@@ -721,6 +721,308 @@
 }
 
 
+/* Action composition components */
+/**
+ * FAB / Speed Dial Component Styles
+ *
+ * FAB owns viewport placement and action layout. Pair its trigger and actions
+ * with Button classes for color, interaction, and disabled states.
+ */
+
+@layer components {
+  .fab {
+    --fab-offset-block: 1rem;
+    --fab-offset-inline: 1rem;
+    --fab-gap: 0.75rem;
+    --fab-size: 3.5rem;
+
+    position: fixed;
+    inset-block-end: calc(var(--fab-offset-block) + env(safe-area-inset-bottom, 0px));
+    inset-inline-end: calc(var(--fab-offset-inline) + env(safe-area-inset-right, 0px));
+    z-index: 40;
+    display: inline-flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    gap: var(--fab-gap);
+    max-inline-size: calc(100dvw - 2 * var(--fab-offset-inline));
+  }
+
+  .fab-start {
+    inset-inline-start: calc(var(--fab-offset-inline) + env(safe-area-inset-left, 0px));
+    inset-inline-end: auto;
+    align-items: flex-start;
+  }
+
+  .fab-contained {
+    position: absolute;
+  }
+
+  .fab-speed-dial {
+    flex-direction: column-reverse;
+  }
+
+  .fab-trigger {
+    min-inline-size: var(--fab-size);
+    min-block-size: var(--fab-size);
+    padding: 0.875rem;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .fab-trigger:not(.fab-extended) {
+    inline-size: var(--fab-size);
+    block-size: var(--fab-size);
+  }
+
+  .fab-extended {
+    inline-size: auto;
+    max-inline-size: 100%;
+    min-block-size: var(--fab-size);
+    padding-inline: 1.25rem;
+    border-radius: var(--radius-lg);
+  }
+
+  .fab-actions {
+    align-items: flex-end;
+    flex-direction: column-reverse;
+    gap: var(--fab-gap);
+    max-inline-size: min(22rem, calc(100dvw - 2rem));
+  }
+
+  .fab-start .fab-actions {
+    align-items: flex-start;
+  }
+
+  /* Controlled mode: application code owns .fab-open and all ARIA state. */
+  .fab-controlled > .fab-actions:not([popover]) {
+    display: none;
+  }
+
+  .fab-controlled.fab-open > .fab-actions:not([popover]) {
+    display: flex;
+  }
+
+  /* Native mode: the browser's popover state is the sole authority. */
+  .fab-actions[popover] {
+    display: none;
+    position: fixed;
+    inset-block-start: auto;
+    inset-block-end: calc(
+      var(--fab-offset-block, 1rem) + env(safe-area-inset-bottom, 0px) +
+      var(--fab-size, 3.5rem) + var(--fab-gap, 0.75rem)
+    );
+    inset-inline-start: auto;
+    inset-inline-end: calc(var(--fab-offset-inline, 1rem) + env(safe-area-inset-right, 0px));
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: visible;
+    color: inherit;
+    background: transparent;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(0.5rem);
+    transition:
+      opacity 150ms ease-out,
+      transform 150ms ease-out,
+      overlay 150ms ease-out allow-discrete,
+      display 150ms ease-out allow-discrete;
+  }
+
+  .fab-start > .fab-actions[popover] {
+    inset-inline-start: calc(var(--fab-offset-inline, 1rem) + env(safe-area-inset-left, 0px));
+    inset-inline-end: auto;
+  }
+
+  .fab-actions[popover]:popover-open {
+    display: flex;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  @starting-style {
+    .fab-actions[popover]:popover-open {
+      opacity: 0;
+      transform: translateY(0.5rem);
+    }
+  }
+
+  @supports (position-area: top) {
+    .fab-actions[popover] {
+      inset: auto;
+      margin: var(--fab-gap, 0.75rem);
+      position-area: top span-left;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    }
+
+    .fab-start > .fab-actions[popover] {
+      inset: auto;
+      position-area: top span-right;
+    }
+  }
+
+  .fab-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    max-inline-size: 100%;
+  }
+
+  .fab-start .fab-action {
+    flex-direction: row-reverse;
+  }
+
+  .fab-label {
+    max-inline-size: min(16rem, calc(100dvw - 6rem));
+    padding: 0.375rem 0.625rem;
+    overflow-wrap: anywhere;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface-container-high);
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-sm);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.125rem;
+  }
+
+  @media (max-width: 30rem) {
+    .fab {
+      --fab-offset-block: 0.75rem;
+      --fab-offset-inline: 0.75rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fab-actions[popover] {
+      transition: none;
+      transform: none;
+    }
+  }
+}
+
+/**
+ * Swap Component Styles
+ * Displays one of two non-interactive state indicators.
+ */
+
+@layer components {
+  .swap {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .swap-input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .swap-on,
+  .swap-off {
+    grid-area: 1 / 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: max-content;
+    max-inline-size: 100%;
+    transition: opacity 150ms ease-out, transform 150ms ease-out;
+  }
+
+  .swap-on {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .swap-off {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: none;
+  }
+
+  .swap-input:checked ~ .swap-on,
+  .swap[aria-pressed="true"] > .swap-on {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .swap-input:checked ~ .swap-off,
+  .swap[aria-pressed="true"] > .swap-off {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .swap:focus-visible,
+  .swap:has(.swap-input:focus-visible) {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    border-radius: var(--radius-sm);
+  }
+
+  .swap:disabled,
+  .swap:has(.swap-input:disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .swap-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .swap-rotate .swap-on {
+    transform: rotate(-90deg) scale(0.8);
+  }
+
+  .swap-rotate .swap-off {
+    transform: rotate(0deg) scale(1);
+  }
+
+  .swap-rotate .swap-input:checked ~ .swap-on,
+  .swap-rotate[aria-pressed="true"] > .swap-on {
+    transform: rotate(0deg) scale(1);
+  }
+
+  .swap-rotate .swap-input:checked ~ .swap-off,
+  .swap-rotate[aria-pressed="true"] > .swap-off {
+    transform: rotate(90deg) scale(0.8);
+  }
+
+  /* Presentation-only override. It intentionally wins over semantic state. */
+  .swap.swap-active > .swap-on {
+    opacity: 1;
+    visibility: visible;
+    transform: rotate(0deg) scale(1);
+  }
+
+  .swap.swap-active > .swap-off {
+    opacity: 0;
+    visibility: hidden;
+    transform: rotate(90deg) scale(0.8);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .swap-on,
+    .swap-off {
+      transition: none;
+    }
+  }
+}
+
+
 /* Card Component */
 /**
  * Card Component Styles
@@ -2825,45 +3127,139 @@
 
 
 
-/* Navigation Component - includes navbar, menu, breadcrumbs, tabs, pagination, dropdown */
+/* Navigation Component - retains the legacy Dropdown import contract */
 /**
  * Navigation Component Styles
  * DuskMoonUI - Material Design 3 inspired navigation system
  */
 
+/* Preserve the Navigation entrypoint's published Dropdown coverage. */
+/**
+ * Dropdown Component Styles
+ * Native Popover disclosure with logical CSS anchor positioning.
+ */
+
 @layer components {
-  /* Navbar Base */
-  .navbar {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: 4rem;
-    padding: 0.5rem 1rem;
-    background-color: var(--color-surface);
-    color: var(--color-on-surface);
+  .dropdown {
+    position: relative;
+    display: inline-block;
   }
 
-  .navbar-primary {
-    background-color: var(--color-primary);
-    color: var(--color-primary-content);
+  .dropdown > .dropdown-content[popover] {
+    display: none;
+    position: fixed;
+    inset-block-start: auto;
+    inset-block-end: max(0.5rem, env(safe-area-inset-bottom, 0px));
+    inset-inline-start: auto;
+    inset-inline-end: max(
+      0.5rem,
+      env(safe-area-inset-left, 0px),
+      env(safe-area-inset-right, 0px)
+    );
+    z-index: 50;
+    min-inline-size: 12rem;
+    max-inline-size: min(24rem, calc(100dvw - 1rem));
+    max-block-size: calc(100dvh - 1rem);
+    margin: 0;
+    padding: 0.5rem;
+    overflow: auto;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-outline);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-lg);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(-0.5rem);
+    transition:
+      opacity 150ms ease-out,
+      transform 150ms ease-out,
+      overlay 150ms ease-out allow-discrete,
+      display 150ms ease-out allow-discrete;
   }
 
-  .navbar-secondary {
-    background-color: var(--color-secondary);
-    color: var(--color-secondary-content);
+  .dropdown > .dropdown-content[popover]:popover-open {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
   }
 
-  .navbar-tertiary {
-    background-color: var(--color-tertiary);
-    color: var(--color-tertiary-content);
+  @starting-style {
+    .dropdown > .dropdown-content[popover]:popover-open {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
   }
 
-  .navbar-accent {
-    background-color: var(--color-accent);
-    color: var(--color-accent-content);
-  }
+  @supports (position-area: block-end) {
+    .dropdown > .dropdown-content[popover] {
+      inset: auto;
+      margin: 0.25rem;
+      position-area: block-end span-inline-end;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    }
 
-  .navbar-neutral {
+    .dropdown.dropdown-block-start > .dropdown-content[popover] {
+      position-area: block-start span-inline-end;
+    }
+
+    .dropdown.dropdown-block-end > .dropdown-content[popover] {
+      position-area: block-end span-inline-end;
+    }
+
+    .dropdown.dropdown-inline-start > .dropdown-content[popover] {
+      position-area: inline-start span-block-end;
+    }
+
+    .dropdown.dropdown-inline-end > .dropdown-content[popover] {
+      position-area: inline-end span-block-end;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dropdown > .dropdown-content[popover] {
+      transition: none;
+    }
+  }
+}
+
+
+@layer components {
+  /* Navbar Base */
+  .navbar {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 4rem;
+    padding: 0.5rem 1rem;
+    background-color: var(--color-surface);
+    color: var(--color-on-surface);
+  }
+
+  .navbar-primary {
+    background-color: var(--color-primary);
+    color: var(--color-primary-content);
+  }
+
+  .navbar-secondary {
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-content);
+  }
+
+  .navbar-tertiary {
+    background-color: var(--color-tertiary);
+    color: var(--color-tertiary-content);
+  }
+
+  .navbar-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .navbar-neutral {
     background-color: var(--color-neutral);
     color: var(--color-neutral-content);
   }
@@ -3417,60 +3813,6 @@
     font-size: 1rem;
   }
 
-  /* Dropdown */
-  .dropdown {
-    position: relative;
-    display: inline-block;
-  }
-
-  .dropdown-content {
-    position: absolute;
-    z-index: 50;
-    min-width: 12rem;
-    padding: 0.5rem;
-    background-color: var(--color-surface);
-    border: 1px solid var(--color-outline);
-    border-radius: var(--radius-sm);
-    box-shadow: var(--shadow-lg);
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-0.5rem);
-    transition: all 150ms ease-in-out;
-  }
-
-  .dropdown:hover .dropdown-content,
-  .dropdown:focus-within .dropdown-content,
-  .dropdown.dropdown-open .dropdown-content {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
-
-  /* Dropdown Positions */
-  .dropdown-end .dropdown-content {
-    right: 0;
-  }
-
-  .dropdown-top .dropdown-content {
-    bottom: 100%;
-    top: auto;
-    margin-bottom: 0.25rem;
-  }
-
-  .dropdown-left .dropdown-content {
-    right: 100%;
-    left: auto;
-    top: 0;
-    margin-right: 0.25rem;
-  }
-
-  .dropdown-right .dropdown-content {
-    left: 100%;
-    right: auto;
-    top: 0;
-    margin-left: 0.25rem;
-  }
-
   /* Pagination */
   .pagination {
     display: flex;
@@ -3714,7 +4056,7 @@
     position: relative;
     z-index: 1;
     max-width: 32rem;
-    max-height: calc(100vh - 5rem);
+    max-height: calc(100dvh - 5rem);
     padding: 1.5rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
@@ -3746,8 +4088,10 @@
   }
 
   /* Modal Action */
-  .modal-action {
+  .modal-action,
+  .modal-footer {
     display: flex;
+    flex-wrap: wrap;
     justify-content: flex-end;
     gap: 0.5rem;
     margin-top: 1.5rem;
@@ -3777,10 +4121,18 @@
     max-width: 20rem;
   }
 
+  .modal-md .modal-box {
+    max-width: 32rem;
+  }
+
   .modal-lg .modal-box {
     max-width: 48rem;
   }
 
+  .modal-xl .modal-box {
+    max-width: 64rem;
+  }
+
   .modal-full .modal-box {
     max-width: calc(100vw - 2rem);
     max-height: calc(100vh - 2rem);
@@ -3803,6 +4155,38 @@
     align-items: center;
   }
 
+  /* Animation Variants */
+  .modal-slide-up .modal-box {
+    transform: translateY(6rem) scale(0.95);
+  }
+
+  .modal-slide-down .modal-box {
+    transform: translateY(-6rem) scale(0.95);
+  }
+
+  .modal-zoom .modal-box {
+    transform: scale(0.75);
+  }
+
+  :is(.modal-slide-up, .modal-slide-down, .modal-zoom).modal-open .modal-box,
+  :is(.modal-slide-up, .modal-slide-down, .modal-zoom):target .modal-box {
+    transform: translateY(0) scale(1);
+  }
+
+  /* Backdrop Variants */
+  .modal-backdrop-light {
+    background-color: color-mix(in srgb, white 80%, transparent);
+  }
+
+  .modal-backdrop-blur {
+    background-color: color-mix(in srgb, var(--color-scrim) 30%, transparent);
+    backdrop-filter: blur(8px);
+  }
+
+  .modal-no-backdrop {
+    background-color: transparent;
+  }
+
   /* Modal Close Button */
   .modal-close {
     position: absolute;
@@ -3851,6 +4235,22 @@
     line-height: 1.5;
   }
 
+  .modal-scrollable .modal-body {
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+
+  .modal-no-padding .modal-body {
+    padding: 0;
+  }
+
+  .modal-centered .modal-body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
   /* Responsive Modal */
   @media (max-width: 640px) {
     .modal-box {
@@ -3865,7 +4265,7 @@
 
     .modal-responsive .modal-box {
       max-width: 100%;
-      max-height: 90vh;
+      max-height: 90dvh;
       margin: 0;
       border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     }
@@ -3880,7 +4280,7 @@
 
   .drawer-modal .modal-box {
     max-width: 20rem;
-    max-height: 100vh;
+    max-height: 100dvh;
     height: 100%;
     margin: 0;
     border-radius: 0;
@@ -3972,6 +4372,10 @@
     white-space: nowrap;
     border: 0;
   }
+
+  body.modal-open {
+    overflow: hidden;
+  }
 }
 
 
@@ -12529,8 +12933,11 @@
 @layer components {
   /* Base Alert */
   .alert {
-    display: flex;
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    grid-template-areas:
+      "icon content actions close";
+    align-items: center;
     gap: 0.75rem;
     padding: 1rem;
     border-radius: var(--radius-sm);
@@ -12541,6 +12948,7 @@
 
   /* Alert Icon */
   .alert-icon {
+    grid-area: icon;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -12548,10 +12956,12 @@
     height: 1.5rem;
     font-size: 1.25rem;
     flex-shrink: 0;
+    align-self: start;
   }
 
   /* Alert Content */
   .alert-content {
+    grid-area: content;
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
@@ -12559,13 +12969,42 @@
     min-width: 0;
   }
 
+  .alert-content > p {
+    margin: 0;
+  }
+
+  /* Keep the compact single-message form vertically balanced against global typography margins. */
+  .alert > p {
+    margin: 0;
+  }
+
+  .alert-horizontal { display: grid; }
+  .alert-actions-end { grid-template-areas: "icon content actions close"; }
+  .alert-actions-bottom {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      "icon content close"
+      ". actions .";
+  }
+
+  .alert-actions-bottom .alert-actions {
+    justify-self: start;
+    margin-top: 0.5rem;
+  }
+  .alert-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+
   .alert-title {
+    margin: 0;
     font-size: 0.875rem;
     font-weight: 600;
     line-height: 1.25rem;
   }
 
   .alert-description {
+    margin: 0;
     font-size: 0.875rem;
     line-height: 1.25rem;
     opacity: 0.9;
@@ -12573,6 +13012,7 @@
 
   /* Alert Close Button */
   .alert-close {
+    grid-area: close;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -12786,6 +13226,7 @@
   /* Dismissible */
   .alert-dismissible {
     padding-right: 2.5rem;
+    padding-inline-end: 2.5rem;
     position: relative;
   }
 
@@ -12793,6 +13234,7 @@
     position: absolute;
     top: 0.75rem;
     right: 0.75rem;
+    inset-inline-end: 0.75rem;
   }
 
   /* Compact */
@@ -12812,11 +13254,25 @@
     font-size: 0.8125rem;
   }
 
+  .alert-comfortable {
+    padding: 1.25rem;
+    gap: 1rem;
+  }
+
   /* Alert Actions */
   .alert-actions {
+    grid-area: actions;
     display: flex;
     gap: 0.5rem;
-    margin-top: 0.5rem;
+    margin-top: 0;
+    flex-wrap: wrap;
+    align-self: center;
+    justify-self: end;
+  }
+
+  .alert-vertical .alert-actions {
+    align-self: stretch;
+    width: 100%;
   }
 
   .alert-filled .alert-actions .btn-text {
@@ -12840,6 +13296,32 @@
       transition: none;
     }
   }
+
+  @media (max-width: 32rem) {
+    .alert:not(.alert-vertical) .alert-content,
+    .alert-horizontal .alert-content {
+      flex-basis: min(100%, 18rem);
+    }
+    .alert:not(.alert-vertical),
+    .alert-horizontal {
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      grid-template-areas:
+        "icon content close"
+        ". actions actions";
+    }
+    .alert:not(.alert-vertical).alert-actions-end,
+    .alert-horizontal.alert-actions-end {
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      grid-template-areas:
+        "icon content close"
+        ". actions actions";
+    }
+    .alert:not(.alert-vertical) .alert-actions,
+    .alert-horizontal .alert-actions {
+      justify-self: start;
+      margin-top: 0.5rem;
+    }
+  }
 }
 
 /**
@@ -12855,9 +13337,10 @@
     margin: auto;
     padding: 0;
     border: none;
-    width: 100%;
+    width: calc(100% - 2rem);
     max-width: 28rem;
-    max-height: calc(100vh - 4rem);
+    max-height: calc(100dvh - 2rem);
+    box-sizing: border-box;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
     border-radius: var(--radius-2xl);
@@ -12874,7 +13357,7 @@
   .dialog-box {
     display: flex;
     flex-direction: column;
-    max-height: calc(100vh - 4rem);
+    max-height: calc(100dvh - 2rem);
     overflow: hidden;
   }
 
@@ -12933,6 +13416,7 @@
   /* Dialog Footer */
   .dialog-footer {
     display: flex;
+    flex-wrap: wrap;
     justify-content: flex-end;
     gap: 0.5rem;
     padding: 1rem 1.5rem 1.5rem;
@@ -12972,6 +13456,30 @@
     margin: 0;
   }
 
+  @media (max-width: 640px) {
+    dialog.dialog {
+      width: calc(100% - 1rem);
+      max-height: calc(100dvh - 1rem);
+      border-radius: var(--radius-lg);
+    }
+
+    .dialog-box {
+      max-height: calc(100dvh - 1rem);
+    }
+
+    .dialog-header {
+      padding: 1rem 1rem 0;
+    }
+
+    .dialog-body {
+      padding: 1rem;
+    }
+
+    .dialog-footer {
+      padding: 0.75rem 1rem 1rem;
+    }
+  }
+
   dialog.dialog.dialog-fullscreen .dialog-box {
     max-height: 100%;
   }
@@ -13017,79 +13525,230 @@
 }
 
 /**
- * Progress Component Styles
- * DuskMoonUI - Material Design 3 inspired progress system
+ * Loading Component Styles
+ * CSS-only activity indicators. State, aria-busy, and disabling remain consumer-owned.
  */
 
 @layer components {
-  /* Base Progress (Linear) */
-  .progress {
-    position: relative;
-    width: 100%;
-    height: 0.5rem;
-    background-color: var(--color-surface-container-highest);
-    border-radius: var(--radius-full);
-    overflow: hidden;
+  .loading {
+    --loading-size: 1.25rem;
+    display: inline-flex;
+    width: var(--loading-size);
+    height: var(--loading-size);
+    flex: 0 0 var(--loading-size);
+    color: currentColor;
+    vertical-align: middle;
   }
 
-  /* Progress Bar */
-  .progress-bar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    background-color: var(--color-primary);
+  .loading-spinner {
+    border: max(2px, calc(var(--loading-size) / 8)) solid color-mix(in oklch, currentColor 25%, transparent);
+    border-top-color: currentColor;
     border-radius: var(--radius-full);
-    transition: width 300ms ease-in-out;
+    animation: loading-spin 800ms linear infinite;
   }
 
-  /* Color Variants */
-  .progress-primary .progress-bar {
-    background-color: var(--color-primary);
+  .loading-dots,
+  .loading-bars {
+    align-items: center;
+    justify-content: center;
+    gap: max(2px, calc(var(--loading-size) / 8));
   }
 
-  .progress-secondary .progress-bar {
-    background-color: var(--color-secondary);
+  .loading-dots::before,
+  .loading-dots::after,
+  .loading-bars::before,
+  .loading-bars::after {
+    content: "";
+    display: block;
+    background: currentColor;
   }
 
-  .progress-tertiary .progress-bar {
-    background-color: var(--color-tertiary);
+  .loading-dots::before,
+  .loading-dots::after {
+    width: 25%;
+    height: 25%;
+    border-radius: var(--radius-full);
+    box-shadow: calc(var(--loading-size) / 3) 0 currentColor;
+    animation: loading-dots 900ms ease-in-out infinite;
   }
 
-  .progress-info .progress-bar {
-    background-color: var(--color-info);
+  .loading-dots::after {
+    display: none;
   }
 
-  .progress-success .progress-bar {
-    background-color: var(--color-success);
+  .loading-bars {
+    padding-inline: 10%;
   }
 
-  .progress-warning .progress-bar {
-    background-color: var(--color-warning);
+  .loading-bars::before,
+  .loading-bars::after {
+    width: 18%;
+    height: 65%;
+    border-radius: var(--radius-xs);
+    box-shadow: calc(var(--loading-size) / 3) 0 currentColor, calc(var(--loading-size) * 2 / 3) 0 currentColor;
+    animation: loading-bars 900ms ease-in-out infinite;
   }
 
-  .progress-error .progress-bar {
-    background-color: var(--color-error);
+  .loading-bars::after {
+    display: none;
   }
 
-  .progress-accent .progress-bar {
-    background-color: var(--color-accent);
-  }
+  .loading-xs { --loading-size: 0.75rem; }
+  .loading-sm { --loading-size: 1rem; }
+  .loading-md { --loading-size: 1.25rem; }
+  .loading-lg { --loading-size: 1.75rem; }
+  .loading-xl { --loading-size: 2.5rem; }
 
-  .progress-neutral .progress-bar {
-    background-color: var(--color-neutral);
+  .loading-primary { color: var(--color-primary); }
+  .loading-secondary { color: var(--color-secondary); }
+  .loading-tertiary { color: var(--color-tertiary); }
+  .loading-info { color: var(--color-info); }
+  .loading-success { color: var(--color-success); }
+  .loading-warning { color: var(--color-warning); }
+  .loading-error { color: var(--color-error); }
+
+  @keyframes loading-spin {
+    to { transform: rotate(360deg); }
   }
 
-  .progress-base .progress-bar {
-    background-color: var(--color-base-content);
+  @keyframes loading-dots {
+    0%, 100% { opacity: 0.35; transform: scale(0.75); }
+    50% { opacity: 1; transform: scale(1); }
   }
 
-  /* Size Variants */
-  .progress-xs {
-    height: 0.25rem;
+  @keyframes loading-bars {
+    0%, 100% { opacity: 0.35; transform: scaleY(0.65); }
+    50% { opacity: 1; transform: scaleY(1); }
   }
 
-  .progress-sm {
+  @media (prefers-reduced-motion: reduce) {
+    .loading-spinner,
+    .loading-dots::before,
+    .loading-bars::before {
+      animation: none;
+    }
+  }
+}
+
+/**
+ * Progress Component Styles
+ * DuskMoonUI - Material Design 3 inspired progress system
+ */
+
+@layer components {
+  /* Base Progress (Linear) */
+  .progress {
+    position: relative;
+    width: 100%;
+    height: 0.5rem;
+    background-color: var(--color-surface-container-highest);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+  }
+
+  /* Native progress keeps the platform's accessible value/max contract. */
+  progress.progress {
+    appearance: none;
+    border: 0;
+    display: block;
+  }
+
+  progress.progress::-webkit-progress-bar {
+    background: var(--color-surface-container-highest);
+    border-radius: var(--radius-full);
+  }
+
+  progress.progress::-webkit-progress-value {
+    background: var(--color-primary);
+    border-radius: var(--radius-full);
+    transition: width 300ms ease-in-out;
+  }
+
+  progress.progress::-moz-progress-bar {
+    background: var(--color-primary);
+    border-radius: var(--radius-full);
+    transition: width 300ms ease-in-out;
+  }
+
+  progress.progress:indeterminate::-webkit-progress-value,
+  progress.progress:indeterminate::-moz-progress-bar {
+    width: 30%;
+    animation: progress-indeterminate 1.5s infinite ease-in-out;
+  }
+
+  /* Progress Bar */
+  .progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background-color: var(--color-primary);
+    border-radius: var(--radius-full);
+    transition: width 300ms ease-in-out;
+  }
+
+  /* Color Variants */
+  .progress-primary .progress-bar {
+    background-color: var(--color-primary);
+  }
+
+  .progress-secondary .progress-bar {
+    background-color: var(--color-secondary);
+  }
+
+  .progress-tertiary .progress-bar {
+    background-color: var(--color-tertiary);
+  }
+
+  .progress-info .progress-bar {
+    background-color: var(--color-info);
+  }
+
+  .progress-success .progress-bar {
+    background-color: var(--color-success);
+  }
+
+  .progress-warning .progress-bar {
+    background-color: var(--color-warning);
+  }
+
+  .progress-error .progress-bar {
+    background-color: var(--color-error);
+  }
+
+  .progress-accent .progress-bar {
+    background-color: var(--color-accent);
+  }
+
+  .progress-neutral .progress-bar {
+    background-color: var(--color-neutral);
+  }
+
+  .progress-base .progress-bar {
+    background-color: var(--color-base-content);
+  }
+
+  progress.progress-primary::-webkit-progress-value,
+  progress.progress-primary::-moz-progress-bar { background: var(--color-primary); }
+  progress.progress-secondary::-webkit-progress-value,
+  progress.progress-secondary::-moz-progress-bar { background: var(--color-secondary); }
+  progress.progress-tertiary::-webkit-progress-value,
+  progress.progress-tertiary::-moz-progress-bar { background: var(--color-tertiary); }
+  progress.progress-info::-webkit-progress-value,
+  progress.progress-info::-moz-progress-bar { background: var(--color-info); }
+  progress.progress-success::-webkit-progress-value,
+  progress.progress-success::-moz-progress-bar { background: var(--color-success); }
+  progress.progress-warning::-webkit-progress-value,
+  progress.progress-warning::-moz-progress-bar { background: var(--color-warning); }
+  progress.progress-error::-webkit-progress-value,
+  progress.progress-error::-moz-progress-bar { background: var(--color-error); }
+
+  /* Size Variants */
+  .progress-xs {
+    height: 0.25rem;
+  }
+
+  .progress-sm {
     height: 0.375rem;
   }
 
@@ -13159,6 +13818,25 @@
     }
   }
 
+  /* Buffer tracks belong to custom markup, not native <progress>. */
+  .progress-buffer {
+    position: relative;
+  }
+
+  .progress-buffer-bar {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 0;
+    background: color-mix(in oklch, var(--color-primary) 30%, transparent);
+    border-radius: var(--radius-full);
+    transition: width 300ms ease-in-out;
+  }
+
+  .progress-buffer .progress-bar {
+    z-index: 1;
+  }
+
   /* Circular Progress */
   .progress-circular {
     position: relative;
@@ -13258,7 +13936,17 @@
 
   /* Reduce Motion */
   @media (prefers-reduced-motion: reduce) {
+    .progress-bar,
+    progress.progress::-webkit-progress-value,
+    progress.progress::-moz-progress-bar,
+    .progress-circular-bar,
+    .progress-buffer-bar {
+      transition: none;
+    }
+
     .progress-indeterminate .progress-bar,
+    progress.progress:indeterminate::-webkit-progress-value,
+    progress.progress:indeterminate::-moz-progress-bar,
     .progress-striped.progress-animated .progress-bar,
     .progress-circular-indeterminate svg,
     .progress-circular-indeterminate .progress-circular-bar {
@@ -13267,6 +13955,54 @@
   }
 }
 
+/**
+ * Radial Progress Component Styles
+ * Determinate percentage progress without circumference arithmetic.
+ */
+
+@layer components {
+  .radial-progress {
+    --radial-progress-value: 0;
+    --radial-progress-size: 3rem;
+    --radial-progress-thickness: 0.375rem;
+    --radial-progress-track: var(--color-surface-container-highest);
+    position: relative;
+    display: inline-grid;
+    width: var(--radial-progress-size);
+    height: var(--radial-progress-size);
+    place-items: center;
+    color: var(--color-primary);
+    border-radius: var(--radius-full);
+    background: conic-gradient(currentColor calc(clamp(0, var(--radial-progress-value), 100) * 1%), var(--radial-progress-track) 0);
+    isolation: isolate;
+  }
+
+  .radial-progress::before {
+    content: "";
+    position: absolute;
+    inset: var(--radial-progress-thickness);
+    z-index: 0;
+    border-radius: inherit;
+    background: var(--color-surface);
+  }
+
+  .radial-progress-primary { color: var(--color-primary); }
+  .radial-progress-secondary { color: var(--color-secondary); }
+  .radial-progress-tertiary { color: var(--color-tertiary); }
+  .radial-progress-info { color: var(--color-info); }
+  .radial-progress-success { color: var(--color-success); }
+  .radial-progress-warning { color: var(--color-warning); }
+  .radial-progress-error { color: var(--color-error); }
+
+  .radial-progress-sm { --radial-progress-size: 2rem; --radial-progress-thickness: 0.25rem; }
+  .radial-progress-lg { --radial-progress-size: 4rem; --radial-progress-thickness: 0.5rem; }
+  .radial-progress-xl { --radial-progress-size: 6rem; --radial-progress-thickness: 0.625rem; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .radial-progress { transition: none; }
+  }
+}
+
 /**
  * Skeleton Component Styles
  * DuskMoonUI - Material Design 3 inspired skeleton loading system
@@ -13300,6 +14036,10 @@
     border-radius: var(--radius-sm);
   }
 
+  .skeleton-static {
+    animation: none;
+  }
+
   /* Size Variants */
   .skeleton-xs {
     height: 0.5rem;
@@ -13402,7 +14142,7 @@
     background: linear-gradient(
       90deg,
       transparent,
-      rgba(255, 255, 255, 0.3),
+      color-mix(in oklch, var(--color-surface-bright) 35%, transparent),
       transparent
     );
     animation: skeleton-wave 1.5s infinite;
@@ -13480,6 +14220,14 @@
 
     .skeleton-wave::after {
       animation: none;
+      transform: translateX(0);
+      opacity: 0.35;
+    }
+
+    .skeleton-static::after {
+      animation: none;
+      transform: translateX(0);
+      opacity: 0.35;
     }
   }
 }
@@ -13696,49 +14444,49 @@
 
   /* Color Variants */
   .snackbar-info {
-    background-color: var(--color-info-container);
-    color: var(--color-on-info-container);
+    background-color: var(--color-info);
+    color: var(--color-info-content);
   }
 
   .snackbar-success {
-    background-color: var(--color-success-container);
-    color: var(--color-on-success-container);
+    background-color: var(--color-success);
+    color: var(--color-success-content);
   }
 
   .snackbar-warning {
-    background-color: var(--color-warning-container);
-    color: var(--color-on-warning-container);
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
   }
 
   .snackbar-error {
-    background-color: var(--color-error-container);
-    color: var(--color-on-error-container);
+    background-color: var(--color-error);
+    color: var(--color-error-content);
   }
 
   /* Brand Color Variants */
   .snackbar-primary {
-    background-color: var(--color-primary-container);
-    color: var(--color-on-primary-container);
+    background-color: var(--color-primary);
+    color: var(--color-primary-content);
   }
 
   .snackbar-secondary {
-    background-color: var(--color-secondary-container);
-    color: var(--color-on-secondary-container);
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-content);
   }
 
   .snackbar-tertiary {
-    background-color: var(--color-tertiary-container);
-    color: var(--color-on-tertiary-container);
+    background-color: var(--color-tertiary);
+    color: var(--color-tertiary-content);
   }
 
   .snackbar-accent {
-    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
-    color: var(--color-on-surface);
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
   }
 
   .snackbar-neutral {
-    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
-    color: var(--color-on-surface);
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
   }
 
   .snackbar-base {
@@ -13746,6 +14494,36 @@
     color: var(--color-base-content);
   }
 
+  :is(
+    .snackbar-info,
+    .snackbar-success,
+    .snackbar-warning,
+    .snackbar-error,
+    .snackbar-primary,
+    .snackbar-secondary,
+    .snackbar-tertiary,
+    .snackbar-accent,
+    .snackbar-neutral,
+    .snackbar-base
+  ) :is(.snackbar-action, .snackbar-close) {
+    color: inherit;
+  }
+
+  :is(
+    .snackbar-info,
+    .snackbar-success,
+    .snackbar-warning,
+    .snackbar-error,
+    .snackbar-primary,
+    .snackbar-secondary,
+    .snackbar-tertiary,
+    .snackbar-accent,
+    .snackbar-neutral,
+    .snackbar-base
+  ) :is(.snackbar-action, .snackbar-close):hover {
+    background-color: color-mix(in oklch, currentColor 12%, transparent);
+  }
+
   /* Dark Snackbar (default MD3 style) */
   .snackbar-dark {
     background-color: var(--color-on-surface);
@@ -13828,17 +14606,36 @@
     pointer-events: none;
   }
 
+  /* Native command targets use the container as a manual popover. Reset the
+     user-agent popover box while preserving the existing positioning API. */
+  :where(.toast-container[popover]) {
+    inset: auto;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    color: inherit;
+    background: transparent;
+    border: 0;
+  }
+
+  .toast-container[popover]:not(:popover-open) {
+    display: none;
+  }
+
   /* Position Variants */
   .toast-container-top-right {
     top: 0;
     right: 0;
     align-items: flex-end;
+    padding-top: max(1rem, env(safe-area-inset-top));
   }
 
   .toast-container-top-left {
     top: 0;
     left: 0;
     align-items: flex-start;
+    padding-top: max(1rem, env(safe-area-inset-top));
   }
 
   .toast-container-top-center {
@@ -13846,18 +14643,21 @@
     left: 50%;
     transform: translateX(-50%);
     align-items: center;
+    padding-top: max(1rem, env(safe-area-inset-top));
   }
 
   .toast-container-bottom-right {
     bottom: 0;
     right: 0;
     align-items: flex-end;
+    padding-bottom: max(1rem, env(safe-area-inset-bottom));
   }
 
   .toast-container-bottom-left {
     bottom: 0;
     left: 0;
     align-items: flex-start;
+    padding-bottom: max(1rem, env(safe-area-inset-bottom));
   }
 
   .toast-container-bottom-center {
@@ -13865,10 +14665,20 @@
     left: 50%;
     transform: translateX(-50%);
     align-items: center;
+    padding-bottom: max(1rem, env(safe-area-inset-bottom));
   }
 
+  /* Logical aliases add RTL-aware placement without changing left/right. */
+  .toast-container-top-start { top: 0; inset-inline-start: 0; align-items: flex-start; }
+  .toast-container-top-end { top: 0; inset-inline-end: 0; align-items: flex-end; }
+  .toast-container-bottom-start { bottom: 0; inset-inline-start: 0; align-items: flex-start; }
+  .toast-container-bottom-end { bottom: 0; inset-inline-end: 0; align-items: flex-end; }
+
   /* Base Toast */
   .toast {
+    --_toast-accent-color: var(--color-primary);
+
+    position: relative;
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
@@ -13899,9 +14709,28 @@
   /* Toast Open State */
   .toast.toast-open,
   .toast.show,
-  .toast-show {
+  .toast.toast-show {
+    opacity: 1;
+    transform: translateX(0) translateY(0);
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  /* A closed item cannot intercept input. Consumers should also use hidden,
+     inert, or unmounting when removing it from the accessibility tree. */
+  .toast:not(.toast-open):not(.show):not(.toast-show),
+  .toast[hidden],
+  .toast[inert],
+  .toast[aria-hidden="true"] {
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  .toast-container[popover]:popover-open .toast {
     opacity: 1;
     transform: translateX(0) translateY(0);
+    visibility: visible;
+    pointer-events: auto;
   }
 
   /* Toast Icon */
@@ -13952,7 +14781,7 @@
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
     flex-shrink: 0;
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 
   .toast-close:hover {
@@ -13970,10 +14799,46 @@
     display: flex;
     gap: 0.5rem;
     margin-top: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .toast-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    min-height: 2rem;
+    padding: 0.375rem 0.75rem;
+    color: var(--color-primary);
+    font-size: 0.875rem;
+    font-weight: 500;
+    background-color: transparent;
+    border: 1px solid currentColor;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+  }
+
+  .toast-action:hover {
+    background-color: color-mix(in oklch, currentColor 10%, transparent);
+  }
+
+  .toast-action:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Type Variants */
+  .toast-accent {
+    --_toast-accent-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .toast-accent .toast-icon {
+    color: var(--color-accent);
+  }
+
   .toast-info {
+    --_toast-accent-color: var(--color-info);
     border-color: var(--color-info);
   }
 
@@ -13982,6 +14847,7 @@
   }
 
   .toast-success {
+    --_toast-accent-color: var(--color-success);
     border-color: var(--color-success);
   }
 
@@ -13990,6 +14856,7 @@
   }
 
   .toast-warning {
+    --_toast-accent-color: var(--color-warning);
     border-color: var(--color-warning);
   }
 
@@ -13998,6 +14865,7 @@
   }
 
   .toast-error {
+    --_toast-accent-color: var(--color-error);
     border-color: var(--color-error);
   }
 
@@ -14006,6 +14874,7 @@
   }
 
   .toast-primary {
+    --_toast-accent-color: var(--color-primary);
     border-color: var(--color-primary);
   }
 
@@ -14014,6 +14883,7 @@
   }
 
   .toast-secondary {
+    --_toast-accent-color: var(--color-secondary);
     border-color: var(--color-secondary);
   }
 
@@ -14022,6 +14892,7 @@
   }
 
   .toast-tertiary {
+    --_toast-accent-color: var(--color-tertiary);
     border-color: var(--color-tertiary);
   }
 
@@ -14029,15 +14900,8 @@
     color: var(--color-tertiary);
   }
 
-  .toast-accent {
-    border-color: var(--color-accent);
-  }
-
-  .toast-accent .toast-icon {
-    color: var(--color-accent);
-  }
-
   .toast-neutral {
+    --_toast-accent-color: var(--color-neutral);
     border-color: var(--color-neutral);
   }
 
@@ -14046,6 +14910,7 @@
   }
 
   .toast-base {
+    --_toast-accent-color: var(--color-base-content);
     border-color: var(--color-base-content);
   }
 
@@ -14054,58 +14919,58 @@
   }
 
   /* Filled Variants */
+  .toast-filled.toast-accent {
+    background-color: var(--color-accent);
+    border-color: transparent;
+    color: var(--color-accent-content);
+  }
+
   .toast-filled.toast-info {
-    background-color: var(--color-info-container);
+    background-color: var(--color-info);
     border-color: transparent;
-    color: var(--color-on-info-container);
+    color: var(--color-info-content);
   }
 
   .toast-filled.toast-success {
-    background-color: var(--color-success-container);
+    background-color: var(--color-success);
     border-color: transparent;
-    color: var(--color-on-success-container);
+    color: var(--color-success-content);
   }
 
   .toast-filled.toast-warning {
-    background-color: var(--color-warning-container);
+    background-color: var(--color-warning);
     border-color: transparent;
-    color: var(--color-on-warning-container);
+    color: var(--color-warning-content);
   }
 
   .toast-filled.toast-error {
-    background-color: var(--color-error-container);
+    background-color: var(--color-error);
     border-color: transparent;
-    color: var(--color-on-error-container);
+    color: var(--color-error-content);
   }
 
   .toast-filled.toast-primary {
-    background-color: var(--color-primary-container);
+    background-color: var(--color-primary);
     border-color: transparent;
-    color: var(--color-on-primary-container);
+    color: var(--color-primary-content);
   }
 
   .toast-filled.toast-secondary {
-    background-color: var(--color-secondary-container);
+    background-color: var(--color-secondary);
     border-color: transparent;
-    color: var(--color-on-secondary-container);
+    color: var(--color-secondary-content);
   }
 
   .toast-filled.toast-tertiary {
-    background-color: var(--color-tertiary-container);
-    border-color: transparent;
-    color: var(--color-on-tertiary-container);
-  }
-
-  .toast-filled.toast-accent {
-    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    background-color: var(--color-tertiary);
     border-color: transparent;
-    color: var(--color-on-surface);
+    color: var(--color-tertiary-content);
   }
 
   .toast-filled.toast-neutral {
-    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    background-color: var(--color-neutral);
     border-color: transparent;
-    color: var(--color-on-surface);
+    color: var(--color-neutral-content);
   }
 
   .toast-filled.toast-base {
@@ -14118,8 +14983,16 @@
      .toast-title and .toast-message have explicit color rules that would otherwise
      override the filled variant's inherited on-container color. */
   .toast-filled .toast-title,
-  .toast-filled .toast-message {
+  .toast-filled .toast-message,
+  .toast-filled .toast-icon,
+  .toast-filled .toast-close,
+  .toast-filled .toast-action {
+    color: inherit;
+  }
+
+  .toast-filled .toast-close:hover {
     color: inherit;
+    background-color: color-mix(in oklch, currentColor 12%, transparent);
   }
 
   /* Ghost Variant */
@@ -14128,6 +15001,7 @@
     border-color: transparent;
   }
 
+  .toast-ghost.toast-accent    { color: var(--color-accent); }
   .toast-ghost.toast-primary   { color: var(--color-primary); }
   .toast-ghost.toast-secondary { color: var(--color-secondary); }
   .toast-ghost.toast-tertiary  { color: var(--color-tertiary); }
@@ -14135,7 +15009,6 @@
   .toast-ghost.toast-success   { color: var(--color-success); }
   .toast-ghost.toast-warning   { color: var(--color-warning); }
   .toast-ghost.toast-error     { color: var(--color-error); }
-  .toast-ghost.toast-accent    { color: var(--color-accent); }
   .toast-ghost.toast-neutral   { color: var(--color-neutral); }
   .toast-ghost.toast-base      { color: var(--color-base-content); }
 
@@ -14144,6 +15017,49 @@
     color: inherit;
   }
 
+  /* Size and density variants retained by the public API. */
+  .toast-sm {
+    width: 18rem;
+    padding: 0.75rem;
+  }
+
+  .toast-lg {
+    width: 26rem;
+    padding: 1.25rem;
+  }
+
+  .toast-compact {
+    padding: 0.75rem;
+    gap: 0.5rem;
+  }
+
+  .toast-compact .toast-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1rem;
+  }
+
+  .toast-compact .toast-title { font-size: 0.8125rem; }
+  .toast-compact .toast-message { font-size: 0.8125rem; }
+
+  /* Accent edge and stacked presentation. */
+  .toast-accent::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 0.25rem;
+    background-color: var(--_toast-accent-color);
+    border-start-start-radius: var(--radius-md);
+    border-end-start-radius: var(--radius-md);
+  }
+
+  .toast-container-stacked .toast:not(:first-child) {
+    margin-top: -0.75rem;
+    transform: scale(0.97);
+    opacity: 0.9;
+  }
+
   /* Progress Bar (for auto-dismiss) */
   .toast-progress {
     position: absolute;
@@ -14174,6 +15090,22 @@
     .toast-progress {
       animation: none;
     }
+
+    .toast-container { scroll-behavior: auto; }
+  }
+
+  @media (max-width: 40rem) {
+    .toast-container[popover] {
+      inset-inline: 0;
+      width: 100%;
+      transform: none;
+      align-items: stretch;
+    }
+
+    .toast {
+      width: 100%;
+      max-width: 100%;
+    }
   }
 }
 
@@ -14255,53 +15187,8 @@
     position-area: right;
   }
 
-  /* ========================================
-   * Arrow (preferred position only; may be wrong after flip)
-   * ======================================== */
-
-  .tooltip[popover]::before {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 0.375rem solid transparent;
-  }
-
-  .tooltip-top[popover]::before,
-  .tooltip[popover]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right)::before {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border-top-color: var(--tooltip-bg);
-  }
-
-  .tooltip-bottom[popover]::before {
-    bottom: 100%;
-    top: auto;
-    left: 50%;
-    transform: translateX(-50%);
-    border-bottom-color: var(--tooltip-bg);
-    border-top-color: transparent;
-  }
-
-  .tooltip-left[popover]::before {
-    left: 100%;
-    top: 50%;
-    bottom: auto;
-    transform: translateY(-50%);
-    border-left-color: var(--tooltip-bg);
-    border-top-color: transparent;
-  }
-
-  .tooltip-right[popover]::before {
-    right: 100%;
-    left: auto;
-    top: 50%;
-    bottom: auto;
-    transform: translateY(-50%);
-    border-right-color: var(--tooltip-bg);
-    border-top-color: transparent;
-  }
+  /* Automatic placement can flip independently of the preferred side. The
+     core stays arrowless instead of showing a misleading arrow. */
 
   /* ========================================
    * Color variants