@duskmoon-dev/core 1.12.4 → 1.14.0

package/dist/esm/components/cascader.js

@@ -24,20 +24,19 @@ export const css = `/**
     line-height: 1.5rem;
     color: var(--color-on-surface);
     background-color: var(--color-surface);
-    border: 1px solid var(--color-outline);
+    border: 1px solid currentColor;
     border-radius: 0.5rem;
     cursor: pointer;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
 
   .cascader-trigger:hover:not(:disabled) {
-    border-color: var(--color-on-surface-variant);
+    background-color: var(--color-surface-container);
   }
 
   .cascader-trigger:focus {
     outline: none;
-    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);
   }
 
   .cascader-trigger:disabled {
@@ -364,20 +363,71 @@ export const css = `/**
   }
 
   .cascader-filled .cascader-trigger:focus {
-    border-bottom-color: var(--color-primary);
+    border-bottom-color: currentColor;
     box-shadow: none;
   }
 
-  /* Error State */
-  .cascader-error .cascader-trigger {
-    border-color: var(--color-error);
+  /* Color Variants */
+  .cascader-primary .cascader-trigger {
+    color: var(--color-primary);
+  }
+  .cascader-primary .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
+  }
+
+  .cascader-secondary .cascader-trigger {
+    color: var(--color-secondary);
+  }
+  .cascader-secondary .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent);
+  }
+
+  .cascader-tertiary .cascader-trigger {
+    color: var(--color-tertiary);
+  }
+  .cascader-tertiary .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent);
+  }
+
+  .cascader-info .cascader-trigger {
+    color: var(--color-info);
+  }
+  .cascader-info .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
+  }
+
+  .cascader-success .cascader-trigger {
+    color: var(--color-success);
+  }
+  .cascader-success .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+  }
+
+  .cascader-warning .cascader-trigger {
+    color: var(--color-warning);
+  }
+  .cascader-warning .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
   }
 
+  .cascader-error .cascader-trigger {
+    color: var(--color-error);
+  }
   .cascader-error .cascader-trigger:focus {
-    border-color: var(--color-error);
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  /* Ghost Variant */
+  .cascader-ghost .cascader-trigger {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .cascader-ghost .cascader-trigger:focus {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
   /* Disabled State */
   .cascader-disabled .cascader-trigger {
     cursor: not-allowed;

package/dist/esm/components/checkbox.js

@@ -13,6 +13,7 @@ export const css = `/**
     --checkbox-size: 1.25rem;
     --checkbox-color: var(--color-primary);
     --checkbox-border-color: var(--color-on-surface-variant);
+    color: var(--color-on-surface);
 
     position: relative;
     display: inline-grid;
@@ -35,8 +36,8 @@ export const css = `/**
     height: 0.35em;
     transform: scale(0) rotate(-45deg);
     transform-origin: center;
-    border-bottom: 2px solid var(--color-on-primary);
-    border-left: 2px solid var(--color-on-primary);
+    border-bottom: 2px solid var(--color-primary-content);
+    border-left: 2px solid var(--color-primary-content);
     transition: transform 150ms ease-in-out;
   }
 
@@ -59,7 +60,7 @@ export const css = `/**
   .checkbox:indeterminate::before {
     width: 0.5em;
     height: 0;
-    border-bottom: 2px solid var(--color-on-primary);
+    border-bottom: 2px solid var(--color-primary-content);
     border-left: 0;
     transform: scale(1) rotate(0deg);
   }
@@ -77,8 +78,8 @@ export const css = `/**
 
   /* Focus State */
   .checkbox:focus-visible {
-    outline: 2px solid var(--checkbox-color);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--checkbox-color) 20%, transparent);
   }
 
   /* Disabled State */
@@ -178,6 +179,15 @@ export const css = `/**
     border-color: var(--color-info-content);
   }
 
+  /* Ghost Variant — borderless unchecked state */
+  .checkbox-ghost {
+    --checkbox-border-color: transparent;
+  }
+
+  .checkbox-ghost:hover:not(:disabled):not(:checked) {
+    border-color: transparent;
+  }
+
   /* ========================================
    * Checkbox with Label (wrapper pattern)
    * ======================================== */

package/dist/esm/components/chip.js

@@ -36,8 +36,8 @@ export const css = `/**
   }
 
   .chip:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Color Variants - Filled */
@@ -68,6 +68,42 @@ export const css = `/**
     background-color: color-mix(in oklch, var(--color-tertiary), black 10%);
   }
 
+  .chip-info {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
+  }
+
+  .chip-info:hover {
+    background-color: color-mix(in oklch, var(--color-info), black 10%);
+  }
+
+  .chip-success {
+    background-color: var(--color-success);
+    color: var(--color-success-content);
+  }
+
+  .chip-success:hover {
+    background-color: color-mix(in oklch, var(--color-success), black 10%);
+  }
+
+  .chip-warning {
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
+  }
+
+  .chip-warning:hover {
+    background-color: color-mix(in oklch, var(--color-warning), black 10%);
+  }
+
+  .chip-error {
+    background-color: var(--color-error);
+    color: var(--color-error-content);
+  }
+
+  .chip-error:hover {
+    background-color: color-mix(in oklch, var(--color-error), black 10%);
+  }
+
   /* Outlined Variant */
   .chip-outlined {
     background-color: transparent;
@@ -105,6 +141,42 @@ export const css = `/**
     background-color: var(--color-tertiary-container);
   }
 
+  .chip-outlined.chip-info {
+    border-color: var(--color-info);
+    color: var(--color-info);
+  }
+
+  .chip-outlined.chip-info:hover {
+    background-color: var(--color-info-container);
+  }
+
+  .chip-outlined.chip-success {
+    border-color: var(--color-success);
+    color: var(--color-success);
+  }
+
+  .chip-outlined.chip-success:hover {
+    background-color: var(--color-success-container);
+  }
+
+  .chip-outlined.chip-warning {
+    border-color: var(--color-warning);
+    color: var(--color-warning);
+  }
+
+  .chip-outlined.chip-warning:hover {
+    background-color: var(--color-warning-container);
+  }
+
+  .chip-outlined.chip-error {
+    border-color: var(--color-error);
+    color: var(--color-error);
+  }
+
+  .chip-outlined.chip-error:hover {
+    background-color: var(--color-error-container);
+  }
+
   /* Tonal/Soft Variant */
   .chip-tonal {
     background-color: var(--color-surface-container-high);
@@ -125,6 +197,54 @@ export const css = `/**
     color: var(--color-on-tertiary-container);
   }
 
+  .chip-tonal.chip-info {
+    background-color: var(--color-info-container);
+    color: var(--color-on-info-container);
+  }
+
+  .chip-tonal.chip-success {
+    background-color: var(--color-success-container);
+    color: var(--color-on-success-container);
+  }
+
+  .chip-tonal.chip-warning {
+    background-color: var(--color-warning-container);
+    color: var(--color-on-warning-container);
+  }
+
+  .chip-tonal.chip-error {
+    background-color: var(--color-error-container);
+    color: var(--color-on-error-container);
+  }
+
+  /* Ghost Variant */
+  .chip-ghost {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .chip-ghost:hover {
+    background-color: var(--color-surface-container);
+  }
+
+  /* Ghost + color sub-variants: transparent bg/border, colored text.
+     Hover uses container color (matches .chip-outlined.chip-*:hover pattern). */
+  .chip-ghost.chip-primary   { background-color: transparent; color: var(--color-primary); }
+  .chip-ghost.chip-secondary { background-color: transparent; color: var(--color-secondary); }
+  .chip-ghost.chip-tertiary  { background-color: transparent; color: var(--color-tertiary); }
+  .chip-ghost.chip-info      { background-color: transparent; color: var(--color-info); }
+  .chip-ghost.chip-success   { background-color: transparent; color: var(--color-success); }
+  .chip-ghost.chip-warning   { background-color: transparent; color: var(--color-warning); }
+  .chip-ghost.chip-error     { background-color: transparent; color: var(--color-error); }
+
+  .chip-ghost.chip-primary:hover   { background-color: var(--color-primary-container); }
+  .chip-ghost.chip-secondary:hover { background-color: var(--color-secondary-container); }
+  .chip-ghost.chip-tertiary:hover  { background-color: var(--color-tertiary-container); }
+  .chip-ghost.chip-info:hover      { background-color: var(--color-info-container); }
+  .chip-ghost.chip-success:hover   { background-color: var(--color-success-container); }
+  .chip-ghost.chip-warning:hover   { background-color: var(--color-warning-container); }
+  .chip-ghost.chip-error:hover     { background-color: var(--color-error-container); }
+
   /* Size Variants */
   .chip-sm {
     padding: 0.25rem 0.5rem;

package/dist/esm/components/collapse.js

@@ -220,6 +220,38 @@ export const css = `/**
     background-color: var(--color-tertiary-container);
   }
 
+  .collapse-info .collapse-trigger {
+    color: var(--color-info);
+  }
+
+  .collapse-info .collapse-trigger:hover {
+    background-color: var(--color-info-container);
+  }
+
+  .collapse-success .collapse-trigger {
+    color: var(--color-success);
+  }
+
+  .collapse-success .collapse-trigger:hover {
+    background-color: var(--color-success-container);
+  }
+
+  .collapse-warning .collapse-trigger {
+    color: var(--color-warning);
+  }
+
+  .collapse-warning .collapse-trigger:hover {
+    background-color: var(--color-warning-container);
+  }
+
+  .collapse-error .collapse-trigger {
+    color: var(--color-error);
+  }
+
+  .collapse-error .collapse-trigger:hover {
+    background-color: var(--color-error-container);
+  }
+
   /* Size Variants */
   .collapse-sm .collapse-trigger {
     padding: 0.5rem 0.75rem;

package/dist/esm/components/datepicker.js

@@ -20,7 +20,7 @@ export const css = `/**
     line-height: 1.5;
     color: var(--color-on-surface);
     background-color: var(--color-surface);
-    border: 1px solid var(--color-outline);
+    border: 1px solid currentColor;
     border-radius: 0.5rem;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
@@ -39,8 +39,7 @@ export const css = `/**
 
   .datepicker-input:focus {
     outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--color-primary-container);
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .datepicker-input:disabled {
@@ -693,7 +692,71 @@ export const css = `/**
     box-shadow: none;
   }
 
-  /* Color Variants */
+  /* Input Color Variants */
+  .datepicker-primary .datepicker-input {
+    color: var(--color-primary);
+  }
+  .datepicker-primary .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
+  }
+
+  .datepicker-secondary .datepicker-input {
+    color: var(--color-secondary);
+  }
+  .datepicker-secondary .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent);
+  }
+
+  .datepicker-tertiary .datepicker-input {
+    color: var(--color-tertiary);
+  }
+  .datepicker-tertiary .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent);
+  }
+
+  .datepicker-info .datepicker-input {
+    color: var(--color-info);
+  }
+  .datepicker-info .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
+  }
+
+  .datepicker-info .datepicker-day-selected,
+  .datepicker-info .datepicker-day-range-start,
+  .datepicker-info .datepicker-day-range-end {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
+  }
+
+  .datepicker-success .datepicker-input {
+    color: var(--color-success);
+  }
+  .datepicker-success .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+  }
+
+  .datepicker-success .datepicker-day-selected,
+  .datepicker-success .datepicker-day-range-start,
+  .datepicker-success .datepicker-day-range-end {
+    background-color: var(--color-success);
+    color: var(--color-success-content);
+  }
+
+  .datepicker-warning .datepicker-input {
+    color: var(--color-warning);
+  }
+  .datepicker-warning .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
+  }
+
+  .datepicker-warning .datepicker-day-selected,
+  .datepicker-warning .datepicker-day-range-start,
+  .datepicker-warning .datepicker-day-range-end {
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
+  }
+
+  /* Day Selected Color Variants */
   .datepicker-primary .datepicker-day-selected,
   .datepicker-primary .datepicker-day-range-start,
   .datepicker-primary .datepicker-day-range-end {
@@ -718,15 +781,25 @@ export const css = `/**
   /* Error State */
   .datepicker-error .datepicker-input,
   .datetime-picker-error .datetime-picker-input {
-    border-color: var(--color-error);
+    color: var(--color-error);
   }
 
   .datepicker-error .datepicker-input:focus,
   .datetime-picker-error .datetime-picker-input:focus {
-    border-color: var(--color-error);
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  /* Ghost Variant */
+  .datepicker-ghost .datepicker-input {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .datepicker-ghost .datepicker-input:focus {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
   /* Reduce Motion */
   @media (prefers-reduced-motion: reduce) {
     .datepicker-dropdown,