@duskmoon-dev/core 1.12.4 → 1.14.0

package/dist/esm/components/divider.js

@@ -2,57 +2,90 @@
 export const css = `/**
  * Divider Component Styles
  * DuskMoonUI - Material Design 3 inspired divider system
+ *
+ * Usage:
+ *   <div class="divider"></div>            — plain horizontal line
+ *   <div class="divider">OR</div>          — text centered between lines
+ *   <div class="divider divider-start">Title</div>  — text at start
  */
 
 @layer components {
-  /* Base Divider (Horizontal) */
+  /* ── Base Divider (Horizontal) ──────────────────────────────────── */
   .divider {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0;
     width: 100%;
-    height: 1px;
     margin: 1rem 0;
+    white-space: nowrap;
+  }
+
+  /* Only add gap when content is present so an empty divider renders as one continuous line */
+  .divider:not(:empty) {
+    gap: 1rem;
+  }
+
+  /* The two line segments flanking any content */
+  .divider::before,
+  .divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
     background-color: var(--color-outline-variant);
-    border: none;
   }
 
-  /* Vertical Divider */
+  /* ── Vertical Divider ───────────────────────────────────────────── */
   .divider-vertical {
-    width: 1px;
-    height: auto;
-    min-height: 1rem;
+    flex-direction: column;
+    width: auto;
     margin: 0 1rem;
     align-self: stretch;
   }
 
-  /* Divider Thickness */
-  .divider-thin {
+  .divider-vertical::before,
+  .divider-vertical::after {
+    width: 1px;
+    height: unset; /* let flex: 1 control the length */
+  }
+
+  /* ── Thickness ──────────────────────────────────────────────────── */
+  .divider-thin::before,
+  .divider-thin::after {
     height: 1px;
   }
 
-  .divider-thin.divider-vertical {
+  .divider-thin.divider-vertical::before,
+  .divider-thin.divider-vertical::after {
     width: 1px;
-    height: auto;
+    height: unset;
   }
 
-  .divider-medium {
+  .divider-medium::before,
+  .divider-medium::after {
     height: 2px;
   }
 
-  .divider-medium.divider-vertical {
+  .divider-medium.divider-vertical::before,
+  .divider-medium.divider-vertical::after {
     width: 2px;
-    height: auto;
+    height: unset;
   }
 
-  .divider-thick {
+  .divider-thick::before,
+  .divider-thick::after {
     height: 4px;
   }
 
-  .divider-thick.divider-vertical {
+  .divider-thick.divider-vertical::before,
+  .divider-thick.divider-vertical::after {
     width: 4px;
-    height: auto;
+    height: unset;
   }
 
-  /* Divider Styles */
-  .divider-dashed {
+  /* ── Line Styles ────────────────────────────────────────────────── */
+  .divider-dashed::before,
+  .divider-dashed::after {
     background-color: transparent;
     background-image: linear-gradient(
       to right,
@@ -63,7 +96,8 @@ export const css = `/**
     background-repeat: repeat-x;
   }
 
-  .divider-dashed.divider-vertical {
+  .divider-dashed.divider-vertical::before,
+  .divider-dashed.divider-vertical::after {
     background-image: linear-gradient(
       to bottom,
       var(--color-outline-variant) 50%,
@@ -73,7 +107,8 @@ export const css = `/**
     background-repeat: repeat-y;
   }
 
-  .divider-dotted {
+  .divider-dotted::before,
+  .divider-dotted::after {
     background-color: transparent;
     background-image: linear-gradient(
       to right,
@@ -84,7 +119,8 @@ export const css = `/**
     background-repeat: repeat-x;
   }
 
-  .divider-dotted.divider-vertical {
+  .divider-dotted.divider-vertical::before,
+  .divider-dotted.divider-vertical::after {
     background-image: linear-gradient(
       to bottom,
       var(--color-outline-variant) 25%,
@@ -94,12 +130,14 @@ export const css = `/**
     background-repeat: repeat-y;
   }
 
-  /* Color Variants */
-  .divider-primary {
+  /* ── Color Variants ─────────────────────────────────────────────── */
+  .divider-primary::before,
+  .divider-primary::after {
     background-color: var(--color-primary);
   }
 
-  .divider-primary.divider-dashed {
+  .divider-primary.divider-dashed::before,
+  .divider-primary.divider-dashed::after {
     background-image: linear-gradient(
       to right,
       var(--color-primary) 50%,
@@ -107,7 +145,8 @@ export const css = `/**
     );
   }
 
-  .divider-primary.divider-dashed.divider-vertical {
+  .divider-primary.divider-dashed.divider-vertical::before,
+  .divider-primary.divider-dashed.divider-vertical::after {
     background-image: linear-gradient(
       to bottom,
       var(--color-primary) 50%,
@@ -115,20 +154,114 @@ export const css = `/**
     );
   }
 
-  .divider-secondary {
+  .divider-secondary::before,
+  .divider-secondary::after {
     background-color: var(--color-secondary);
   }
 
-  .divider-light {
-    background-color: var(--color-outline-variant);
-    opacity: 0.5;
+  .divider-tertiary::before,
+  .divider-tertiary::after {
+    background-color: var(--color-tertiary);
+  }
+
+  .divider-info::before,
+  .divider-info::after {
+    background-color: var(--color-info);
+  }
+
+  .divider-success::before,
+  .divider-success::after {
+    background-color: var(--color-success);
+  }
+
+  .divider-warning::before,
+  .divider-warning::after {
+    background-color: var(--color-warning);
+  }
+
+  .divider-error::before,
+  .divider-error::after {
+    background-color: var(--color-error);
+  }
+
+  /* ── Gradient Lines ─────────────────────────────────────────────── */
+  .divider-gradient::before,
+  .divider-gradient::after {
+    background: linear-gradient(
+      to right,
+      transparent,
+      var(--color-outline-variant) 20%,
+      var(--color-outline-variant) 80%,
+      transparent
+    );
+  }
+
+  .divider-gradient.divider-vertical::before,
+  .divider-gradient.divider-vertical::after {
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      var(--color-outline-variant) 20%,
+      var(--color-outline-variant) 80%,
+      transparent
+    );
+  }
+
+  /* ── Content Positioning ────────────────────────────────────────── */
+
+  /* Push content to start: shrink the leading line segment */
+  .divider-start::before {
+    flex: 0 0 2rem;
+  }
+
+  /* Push content to end: shrink the trailing line segment */
+  .divider-end::after {
+    flex: 0 0 2rem;
+  }
+
+  /* Vertical equivalents */
+  .divider-vertical.divider-start::before {
+    flex: 0 0 2rem;
+  }
+
+  .divider-vertical.divider-end::after {
+    flex: 0 0 2rem;
+  }
+
+  /* ── Spacing Variants ───────────────────────────────────────────── */
+  .divider-compact {
+    margin: 0.25rem 0;
+  }
+
+  .divider-compact:not(:empty) {
+    gap: 0.5rem;
+  }
+
+  .divider-compact.divider-vertical {
+    margin: 0 0.25rem;
+  }
+
+  .divider-comfortable {
+    margin: 1.5rem 0;
   }
 
-  .divider-dark {
-    background-color: var(--color-outline);
+  .divider-comfortable.divider-vertical {
+    margin: 0 1.5rem;
+  }
+
+  .divider-spacious {
+    margin: 2rem 0;
   }
 
-  /* Spacing Variants */
+  .divider-spacious:not(:empty) {
+    gap: 1.5rem;
+  }
+
+  .divider-spacious.divider-vertical {
+    margin: 0 2rem;
+  }
+
+  /* Legacy spacing aliases */
   .divider-none {
     margin: 0;
   }
@@ -165,122 +298,64 @@ export const css = `/**
     margin: 0 2rem;
   }
 
-  /* Divider with Text (Horizontal) */
-  .divider-text {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    height: auto;
-    background-color: transparent;
-  }
-
-  .divider-text::before,
-  .divider-text::after {
-    content: '';
-    flex: 1;
-    height: 1px;
-    background-color: var(--color-outline-variant);
-  }
-
-  .divider-text-content {
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--color-on-surface-variant);
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-    white-space: nowrap;
-  }
-
-  /* Text Position */
-  .divider-text-left::before {
-    flex: 0 0 2rem;
-  }
-
-  .divider-text-right::after {
-    flex: 0 0 2rem;
-  }
-
-  /* Inset Divider */
+  /* ── Inset Divider ──────────────────────────────────────────────── */
   .divider-inset {
-    margin-left: 4rem;
-    width: calc(100% - 4rem);
+    padding-left: 4rem;
   }
 
   .divider-inset-right {
-    margin-right: 4rem;
-    width: calc(100% - 4rem);
+    padding-right: 4rem;
   }
 
   .divider-inset-both {
-    margin-left: 4rem;
-    margin-right: 4rem;
-    width: calc(100% - 8rem);
+    padding-left: 4rem;
+    padding-right: 4rem;
   }
 
-  /* List Divider (for use between list items) */
+  /* ── List / Card Helpers ────────────────────────────────────────── */
   .divider-list {
     margin: 0;
-    margin-left: 1rem;
-    width: calc(100% - 1rem);
+    padding-left: 1rem;
   }
 
-  /* Card Divider */
   .divider-card {
     margin: 0;
     margin-left: -1rem;
     margin-right: -1rem;
-    width: calc(100% + 2rem);
   }
 
-  /* Gradient Divider */
-  .divider-gradient {
-    background: linear-gradient(
-      to right,
-      transparent,
-      var(--color-outline-variant) 20%,
-      var(--color-outline-variant) 80%,
-      transparent
-    );
-  }
-
-  .divider-gradient.divider-vertical {
-    background: linear-gradient(
-      to bottom,
-      transparent,
-      var(--color-outline-variant) 20%,
-      var(--color-outline-variant) 80%,
-      transparent
-    );
+  /* ── Legacy: divider-text aliases ──────────────────────────────── */
+  /* divider-text is now just .divider — kept for backwards compat */
+  .divider-text {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0;
+    width: 100%;
+    margin: 1rem 0;
+    white-space: nowrap;
   }
 
-  /* Decorative Divider */
-  .divider-decorative {
-    position: relative;
-    height: auto;
-    padding: 1rem 0;
-    background-color: transparent;
-    text-align: center;
+  .divider-text:not(:empty) {
+    gap: 1rem;
   }
 
-  .divider-decorative::before {
+  .divider-text::before,
+  .divider-text::after {
     content: '';
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
+    flex: 1;
     height: 1px;
     background-color: var(--color-outline-variant);
   }
 
-  .divider-decorative-icon {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    background-color: var(--color-surface);
-    color: var(--color-on-surface-variant);
+  .divider-text-left::before,
+  .divider-text-left.divider-text::before {
+    flex: 0 0 2rem;
+  }
+
+  .divider-text-right::after,
+  .divider-text-right.divider-text::after {
+    flex: 0 0 2rem;
   }
 }
 `;

package/dist/esm/components/file-upload.js

@@ -23,25 +23,25 @@ export const css = `/**
     min-height: 10rem;
     padding: 2rem;
     background-color: var(--color-surface);
-    border: 2px dashed var(--color-outline);
+    border: 2px dashed currentColor;
     border-radius: 0.75rem;
     cursor: pointer;
     transition: border-color 150ms ease-in-out, background-color 150ms ease-in-out;
   }
 
   .file-upload-dropzone:hover {
-    border-color: var(--color-primary);
+    border-color: currentColor;
     background-color: var(--color-surface-container);
   }
 
   .file-upload-dropzone:focus-within {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--color-primary-container);
+    border-color: currentColor;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .file-upload-dropzone.dragging {
-    border-color: var(--color-primary);
-    background-color: var(--color-primary-container);
+    border-color: currentColor;
+    background-color: color-mix(in oklch, currentColor 10%, var(--color-surface));
   }
 
   .file-upload-dropzone.disabled {
@@ -66,7 +66,6 @@ export const css = `/**
     justify-content: center;
     width: 3rem;
     height: 3rem;
-    color: var(--color-primary);
     font-size: 2rem;
   }
 
@@ -88,7 +87,7 @@ export const css = `/**
   }
 
   .file-upload-browse {
-    color: var(--color-primary);
+    color: currentColor;
     font-weight: 500;
     text-decoration: underline;
     cursor: pointer;
@@ -300,6 +299,67 @@ export const css = `/**
     cursor: not-allowed;
   }
 
+  /* Color Variants */
+  .file-upload-primary .file-upload-dropzone {
+    color: var(--color-primary);
+  }
+  .file-upload-primary .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
+  }
+
+  .file-upload-secondary .file-upload-dropzone {
+    color: var(--color-secondary);
+  }
+  .file-upload-secondary .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent);
+  }
+
+  .file-upload-tertiary .file-upload-dropzone {
+    color: var(--color-tertiary);
+  }
+  .file-upload-tertiary .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent);
+  }
+
+  .file-upload-info .file-upload-dropzone {
+    color: var(--color-info);
+  }
+  .file-upload-info .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
+  }
+
+  .file-upload-success .file-upload-dropzone {
+    color: var(--color-success);
+  }
+  .file-upload-success .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+  }
+
+  .file-upload-warning .file-upload-dropzone {
+    color: var(--color-warning);
+  }
+  .file-upload-warning .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
+  }
+
+  .file-upload-error .file-upload-dropzone {
+    color: var(--color-error);
+  }
+  .file-upload-error .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
+  }
+
+  /* Ghost Variant */
+  .file-upload-ghost .file-upload-dropzone {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .file-upload-ghost .file-upload-dropzone:focus-within {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
   /* Size Variants */
   .file-upload-sm .file-upload-dropzone {
     min-height: 6rem;

package/dist/esm/components/form.js

@@ -12,6 +12,7 @@ export const css = `/**
     gap: 0.25rem;
     width: 100%;
     margin-bottom: 1rem;
+    color: var(--color-on-surface);
   }
 
   /* Label */
@@ -25,7 +26,7 @@ export const css = `/**
   .label-text {
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--color-base-content);
+    color: var(--color-on-surface);
     padding-bottom: 0.25rem;
   }
 

package/dist/esm/components/input.js

@@ -14,7 +14,7 @@ export const css = `/**
     line-height: 1.5rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
-    border: 1px solid transparent;
+    border: 1px solid currentColor;
     border-radius: 0.5rem;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
@@ -29,8 +29,7 @@ export const css = `/**
   }
 
   .input:focus-visible {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
     outline: none;
   }
 
@@ -50,70 +49,17 @@ export const css = `/**
     border-color: var(--color-outline-variant);
   }
 
-  /* Color Variants */
-  .input-primary {
-    border-color: var(--color-primary);
-  }
-
-  .input-primary:focus-visible {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
-  }
-
-  .input-secondary {
-    border-color: var(--color-secondary);
-  }
-
-  .input-secondary:focus-visible {
-    border-color: var(--color-secondary);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent);
-  }
-
-  .input-tertiary {
-    border-color: var(--color-tertiary);
-  }
-
-  .input-tertiary:focus-visible {
-    border-color: var(--color-tertiary);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent);
-  }
+  /* Color Variants — base .input:focus-visible uses currentColor 20%, so no per-variant
+     focus-visible overrides needed; setting color: here is sufficient. */
+  .input-primary   { color: var(--color-primary); }
+  .input-secondary { color: var(--color-secondary); }
+  .input-tertiary  { color: var(--color-tertiary); }
 
   /* Semantic Colors */
-  .input-info {
-    border-color: var(--color-info);
-  }
-
-  .input-info:focus-visible {
-    border-color: var(--color-info);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
-  }
-
-  .input-success {
-    border-color: var(--color-success);
-  }
-
-  .input-success:focus-visible {
-    border-color: var(--color-success);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
-  }
-
-  .input-warning {
-    border-color: var(--color-warning);
-  }
-
-  .input-warning:focus-visible {
-    border-color: var(--color-warning);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
-  }
-
-  .input-error {
-    border-color: var(--color-error);
-  }
-
-  .input-error:focus-visible {
-    border-color: var(--color-error);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
-  }
+  .input-info    { color: var(--color-info); }
+  .input-success { color: var(--color-success); }
+  .input-warning { color: var(--color-warning); }
+  .input-error   { color: var(--color-error); }
 
   /* Size Variants */
   .input-xs {
@@ -149,7 +95,7 @@ export const css = `/**
   .input-ghost:focus-visible {
     background-color: var(--color-surface-container);
     border-color: transparent;
-    box-shadow: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Filled Input */
@@ -165,6 +111,14 @@ export const css = `/**
     box-shadow: none;
   }
 
+  .input-filled.input-primary:focus-visible { border-bottom-color: var(--color-primary); }
+  .input-filled.input-secondary:focus-visible { border-bottom-color: var(--color-secondary); }
+  .input-filled.input-tertiary:focus-visible { border-bottom-color: var(--color-tertiary); }
+  .input-filled.input-info:focus-visible { border-bottom-color: var(--color-info); }
+  .input-filled.input-success:focus-visible { border-bottom-color: var(--color-success); }
+  .input-filled.input-warning:focus-visible { border-bottom-color: var(--color-warning); }
+  .input-filled.input-error:focus-visible { border-bottom-color: var(--color-error); }
+
   /* Input with Icon */
   .input-group {
     display: flex;
@@ -235,7 +189,7 @@ export const css = `/**
   }
 
   .file-input:focus-visible {
-    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
     outline: none;
   }
 }