@duskmoon-dev/core 1.19.4 → 1.19.6

package/dist/components/swap.css

@@ -0,0 +1,116 @@
+/**
+ * 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;
+    }
+  }
+}

package/dist/components/toast.css

@@ -15,17 +15,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 {
@@ -33,18 +52,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 {
@@ -52,10 +74,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;
@@ -86,9 +118,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 */
@@ -139,7 +190,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 {
@@ -157,10 +208,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);
   }
 
@@ -169,6 +256,7 @@
   }
 
   .toast-success {
+    --_toast-accent-color: var(--color-success);
     border-color: var(--color-success);
   }
 
@@ -177,6 +265,7 @@
   }
 
   .toast-warning {
+    --_toast-accent-color: var(--color-warning);
     border-color: var(--color-warning);
   }
 
@@ -185,6 +274,7 @@
   }
 
   .toast-error {
+    --_toast-accent-color: var(--color-error);
     border-color: var(--color-error);
   }
 
@@ -193,6 +283,7 @@
   }
 
   .toast-primary {
+    --_toast-accent-color: var(--color-primary);
     border-color: var(--color-primary);
   }
 
@@ -201,6 +292,7 @@
   }
 
   .toast-secondary {
+    --_toast-accent-color: var(--color-secondary);
     border-color: var(--color-secondary);
   }
 
@@ -209,6 +301,7 @@
   }
 
   .toast-tertiary {
+    --_toast-accent-color: var(--color-tertiary);
     border-color: var(--color-tertiary);
   }
 
@@ -216,15 +309,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);
   }
 
@@ -233,6 +319,7 @@
   }
 
   .toast-base {
+    --_toast-accent-color: var(--color-base-content);
     border-color: var(--color-base-content);
   }
 
@@ -241,58 +328,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);
+    background-color: var(--color-tertiary);
     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));
-    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 {
@@ -305,8 +392,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 */
@@ -315,6 +410,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); }
@@ -322,7 +418,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); }
 
@@ -331,6 +426,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;
@@ -361,5 +499,21 @@
     .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%;
+    }
   }
 }

package/dist/components/tooltip.css

@@ -76,53 +76,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