@duskmoon-dev/core 1.19.3 → 1.19.5

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/toggle-switch.css

@@ -0,0 +1,165 @@
+/** Opt-in native presentation. Applications own errors, messages and announcements. */
+@layer components {
+  /* Compatibility wrapper states are intentionally immediate. */
+  :is(.form-group-info, .form-control.info) { --dm-validation-color: var(--color-info); }
+  :is(.form-group-warning, .form-control.warning) { --dm-validation-color: var(--color-warning); }
+  :is(.form-group-success, .form-control.success) { --dm-validation-color: var(--color-success); }
+
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is(.validate :valid, .validate:valid, .validator.validator-success:user-valid):not([aria-invalid="true"]):not(:where(.form-group-error *, .form-control.error *)):not(:disabled) {
+    --dm-validation-color: var(--color-success);
+    --dm-validation-content: var(--color-success-content);
+  }
+
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is(.validate :invalid, .validate:invalid, .validator:user-invalid):not(:disabled) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
+  }
+
+  :is(.form-group-error, .form-control.error) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
+  }
+
+  /* Higher specificity than native states, including server-invalid + user-valid. */
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .form-group-error *, .form-control.error *):not(:disabled):is(:focus, :not(:focus)) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
+  }
+
+  /* This shared selector wins over filled/ghost focus and semantic modifiers. */
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .validator:user-invalid, .validator.validator-success:user-valid, .validate :invalid, .validate :valid, .validate:invalid, .validate:valid, .form-group-error *, .form-group-success *, .form-group-warning *, .form-group-info *, .form-control.error *, .form-control.success *, .form-control.warning *, .form-control.info *):not(:disabled) {
+    color: var(--dm-validation-color);
+    border-color: var(--dm-validation-color);
+    --checkbox-color: var(--dm-validation-color);
+    --radio-color: var(--dm-validation-color);
+    --switch-color: var(--dm-validation-color);
+    --switch-content-color: var(--dm-validation-content, var(--color-primary-content));
+    --toggle-color: var(--dm-validation-color);
+  }
+
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .validator:user-invalid, .validator.validator-success:user-valid, .validate :invalid, .validate :valid, .validate:invalid, .validate:valid, .form-group-error *, .form-group-success *, .form-group-warning *, .form-group-info *, .form-control.error *, .form-control.success *, .form-control.warning *, .form-control.info *):not(:disabled):focus {
+    border-color: var(--dm-validation-color);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--dm-validation-color) 20%, transparent);
+  }
+
+  :is(.form-group-error, .form-control.error) :is(.form-label, .label-text) { color: var(--color-error); }
+  :is(.form-group-success, .form-control.success) :is(.form-label, .label-text) { color: var(--color-success); }
+  :is(.form-group-warning, .form-control.warning) :is(.form-label, .label-text) { color: var(--color-warning); }
+  :is(.form-group-info, .form-control.info) :is(.form-label, .label-text) { color: var(--color-info); }
+
+  .validator-hint { font-size: 0.75rem; color: var(--color-on-surface-variant); }
+  .validator-error { display: none; font-size: 0.75rem; color: var(--color-error); }
+  /* Keep OTP actions stationary when blur reveals an error during a click. */
+  .otp-code ~ .validator-error { display: block; visibility: hidden; }
+  :is(.form-group, .form-control):has(:is([aria-invalid="true"], .validator:user-invalid, .validate :invalid, .validate:invalid):not(:disabled)) > .validator-error,
+  :is(.form-group-error, .form-control.error) > .validator-error { display: block; visibility: visible; }
+
+  @media (forced-colors: active) {
+    :is(input, select, textarea):is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+    input:is(.checkbox, .radio, .switch, .toggle) { appearance: auto; }
+    input:is(.checkbox, .radio, .switch, .toggle)::before,
+    input:is(.checkbox, .radio, .switch, .toggle)::after { content: none; }
+  }
+}
+
+
+@layer components {
+  /* Toggle/Switch */
+  .toggle {
+    --toggle-color: var(--color-primary);
+    box-sizing: border-box;
+    color: var(--color-on-surface);
+    border: 1px solid currentColor;
+    appearance: none;
+    width: 3rem;
+    height: 1.5rem;
+    border-radius: var(--radius-lg);
+    background-color: var(--color-surface-container-highest);
+    cursor: pointer;
+    transition: all 150ms ease-in-out;
+    position: relative;
+  }
+
+  .toggle::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--color-on-surface-variant);
+    border-radius: var(--radius-full);
+    transition: all 150ms ease-in-out;
+  }
+
+  .toggle:checked {
+    background-color: var(--toggle-color);
+  }
+
+  .toggle:checked::after {
+    inset-inline-start: calc(100% - 1.25rem);
+    background-color: var(--dm-validation-content, var(--color-primary-content));
+  }
+
+  .toggle:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
+  .toggle:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Toggle Sizes */
+  .toggle-xs {
+    width: 2rem;
+    height: 1rem;
+  }
+
+  .toggle-xs::after {
+    width: 0.625rem;
+    height: 0.625rem;
+    inset-inline-start: 0.1875rem;
+  }
+
+  .toggle-xs:checked::after {
+    inset-inline-start: calc(100% - 0.8125rem);
+  }
+
+  .toggle-sm {
+    width: 2.5rem;
+    height: 1.25rem;
+  }
+
+  .toggle-sm::after {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .toggle-lg {
+    width: 4rem;
+    height: 2rem;
+  }
+
+  .toggle-lg::after {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .toggle-sm:checked::after { inset-inline-start: calc(100% - 1rem); }
+  .toggle-lg:checked::after { inset-inline-start: calc(100% - 1.75rem); }
+  .toggle-primary { --toggle-color: var(--color-primary); }
+  .toggle-secondary { --toggle-color: var(--color-secondary); }
+  .toggle-tertiary { --toggle-color: var(--color-tertiary); }
+  .toggle-info { --toggle-color: var(--color-info); }
+  .toggle-success { --toggle-color: var(--color-success); }
+  .toggle-warning { --toggle-color: var(--color-warning); }
+  .toggle-error { --toggle-color: var(--color-error); }
+  .toggle-ghost { border-color: transparent; }
+  @media (prefers-reduced-motion: reduce) { .toggle, .toggle::after { transition: none; } }
+}