@duskmoon-dev/core 1.19.4 → 1.19.6

package/dist/esm/components/modal.js

@@ -31,7 +31,7 @@ export const css = `/**
     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);
@@ -63,8 +63,10 @@ export const css = `/**
   }
 
   /* Modal Action */
-  .modal-action {
+  .modal-action,
+  .modal-footer {
     display: flex;
+    flex-wrap: wrap;
     justify-content: flex-end;
     gap: 0.5rem;
     margin-top: 1.5rem;
@@ -94,10 +96,18 @@ export const css = `/**
     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);
@@ -120,6 +130,38 @@ export const css = `/**
     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;
@@ -168,6 +210,22 @@ export const css = `/**
     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 {
@@ -182,7 +240,7 @@ export const css = `/**
 
     .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;
     }
@@ -197,7 +255,7 @@ export const css = `/**
 
   .drawer-modal .modal-box {
     max-width: 20rem;
-    max-height: 100vh;
+    max-height: 100dvh;
     height: 100%;
     margin: 0;
     border-radius: 0;
@@ -289,6 +347,10 @@ export const css = `/**
     white-space: nowrap;
     border: 0;
   }
+
+  body.modal-open {
+    overflow: hidden;
+  }
 }
 `;
 

package/dist/esm/components/navigation.js

@@ -4,6 +4,100 @@ export const css = `/**
  * 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 {
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .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;
+  }
+
+  .dropdown > .dropdown-content[popover]:popover-open {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  @starting-style {
+    .dropdown > .dropdown-content[popover]:popover-open {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+  }
+
+  @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;
+    }
+
+    .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 {
@@ -590,60 +684,6 @@ export const css = `/**
     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;

package/dist/esm/components/progress.js

@@ -15,6 +15,36 @@ export const css = `/**
     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;
@@ -67,6 +97,21 @@ export const css = `/**
     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;
@@ -142,6 +187,25 @@ export const css = `/**
     }
   }
 
+  /* 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;
@@ -241,7 +305,17 @@ export const css = `/**
 
   /* 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 {

package/dist/esm/components/radial-progress.d.ts

@@ -0,0 +1,5 @@
+// Auto-generated type declaration for radial-progress
+export declare const css: string;
+export declare const styles: CSSStyleSheet | null;
+declare const sheet: CSSStyleSheet | null;
+export default sheet;

package/dist/esm/components/radial-progress.js

@@ -0,0 +1,56 @@
+// Auto-generated from radial-progress.css
+export const css = `/**
+ * 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; }
+  }
+}
+`;
+
+const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
+if (sheet) {
+  sheet.replaceSync(css);
+}
+export const styles = sheet;
+export default sheet;

package/dist/esm/components/skeleton.js

@@ -32,6 +32,10 @@ export const css = `/**
     border-radius: var(--radius-sm);
   }
 
+  .skeleton-static {
+    animation: none;
+  }
+
   /* Size Variants */
   .skeleton-xs {
     height: 0.5rem;
@@ -134,7 +138,7 @@ export const css = `/**
     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;
@@ -212,6 +216,14 @@ export const css = `/**
 
     .skeleton-wave::after {
       animation: none;
+      transform: translateX(0);
+      opacity: 0.35;
+    }
+
+    .skeleton-static::after {
+      animation: none;
+      transform: translateX(0);
+      opacity: 0.35;
     }
   }
 }

package/dist/esm/components/snackbar.js

@@ -211,49 +211,49 @@ export const css = `/**
 
   /* 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 {
@@ -261,6 +261,36 @@ export const css = `/**
     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);

package/dist/esm/components/swap.d.ts

@@ -0,0 +1,5 @@
+// Auto-generated type declaration for swap
+export declare const css: string;
+export declare const styles: CSSStyleSheet | null;
+declare const sheet: CSSStyleSheet | null;
+export default sheet;