@duskmoon-dev/core 1.12.4 → 1.13.0

package/dist/esm/components/avatar.js

@@ -94,6 +94,26 @@ export const css = `/**
     color: var(--color-tertiary-content);
   }
 
+  .avatar-info {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
+  }
+
+  .avatar-success {
+    background-color: var(--color-success);
+    color: var(--color-success-content);
+  }
+
+  .avatar-warning {
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
+  }
+
+  .avatar-error {
+    background-color: var(--color-error);
+    color: var(--color-error-content);
+  }
+
   /* Ring */
   .avatar-ring {
     outline: 2px solid var(--color-primary);
@@ -162,8 +182,8 @@ export const css = `/**
 
   /* Focus State for Interactive Avatars */
   .avatar: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);
   }
 }
 `;

package/dist/esm/components/button.js

@@ -45,8 +45,8 @@ export const css = `/**
   }
 
   .btn: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);
   }
 
   .btn:disabled {
@@ -68,10 +68,6 @@ export const css = `/**
     filter: none;
   }
 
-  .btn-primary:focus-visible {
-    outline-color: color-mix(in oklch, var(--color-primary), black 10%);
-  }
-
   /* Secondary Button */
   .btn-secondary {
     --btn-text-color: var(--color-secondary-content);
@@ -85,10 +81,6 @@ export const css = `/**
     filter: none;
   }
 
-  .btn-secondary:focus-visible {
-    outline-color: color-mix(in oklch, var(--color-secondary), black 10%);
-  }
-
   /* Tertiary Button */
   .btn-tertiary {
     --btn-text-color: var(--color-tertiary-content);
@@ -102,92 +94,102 @@ export const css = `/**
     filter: none;
   }
 
-  .btn-tertiary:focus-visible {
-    outline-color: color-mix(in oklch, var(--color-tertiary), black 10%);
-  }
-
-  /* Outline Variant */
-  .btn-outline {
+  /* Outline / Outlined Variant (.btn-outlined is an alias) */
+  .btn-outline,
+  .btn-outlined {
     --btn-text-color: var(--color-on-surface);
     background-color: transparent;
     border: 1px solid var(--color-outline);
   }
 
-  .btn-outline:hover {
+  .btn-outline:hover,
+  .btn-outlined:hover {
     background-color: var(--color-surface-container);
     filter: none;
   }
 
-  .btn-outline.btn-primary {
+  .btn-outline.btn-primary,
+  .btn-outlined.btn-primary {
     --btn-text-color: var(--color-primary);
     border-color: var(--color-primary);
   }
 
-  .btn-outline.btn-primary:hover {
+  .btn-outline.btn-primary:hover,
+  .btn-outlined.btn-primary:hover {
     --btn-text-color: var(--color-primary-content);
     background-color: var(--color-primary);
   }
 
-  .btn-outline.btn-secondary {
+  .btn-outline.btn-secondary,
+  .btn-outlined.btn-secondary {
     --btn-text-color: var(--color-secondary);
     border-color: var(--color-secondary);
   }
 
-  .btn-outline.btn-secondary:hover {
+  .btn-outline.btn-secondary:hover,
+  .btn-outlined.btn-secondary:hover {
     --btn-text-color: var(--color-secondary-content);
     background-color: var(--color-secondary);
   }
 
-  .btn-outline.btn-tertiary {
+  .btn-outline.btn-tertiary,
+  .btn-outlined.btn-tertiary {
     --btn-text-color: var(--color-tertiary);
     border-color: var(--color-tertiary);
   }
 
-  .btn-outline.btn-tertiary:hover {
+  .btn-outline.btn-tertiary:hover,
+  .btn-outlined.btn-tertiary:hover {
     --btn-text-color: var(--color-tertiary-content);
     background-color: var(--color-tertiary);
   }
 
-  /* Outlined Variant (alias for .btn-outline - documentation aligned) */
-  .btn-outlined {
-    --btn-text-color: var(--color-on-surface);
-    background-color: transparent;
-    border: 1px solid var(--color-outline);
+  .btn-outline.btn-info,
+  .btn-outlined.btn-info {
+    --btn-text-color: var(--color-info);
+    border-color: var(--color-info);
   }
 
-  .btn-outlined:hover {
-    background-color: var(--color-surface-container);
-    filter: none;
+  .btn-outline.btn-info:hover,
+  .btn-outlined.btn-info:hover {
+    --btn-text-color: var(--color-info-content);
+    background-color: var(--color-info);
   }
 
-  .btn-outlined.btn-primary {
-    --btn-text-color: var(--color-primary);
-    border-color: var(--color-primary);
+  .btn-outline.btn-success,
+  .btn-outlined.btn-success {
+    --btn-text-color: var(--color-success);
+    border-color: var(--color-success);
   }
 
-  .btn-outlined.btn-primary:hover {
-    --btn-text-color: var(--color-primary-content);
-    background-color: var(--color-primary);
+  .btn-outline.btn-success:hover,
+  .btn-outlined.btn-success:hover {
+    --btn-text-color: var(--color-success-content);
+    background-color: var(--color-success);
   }
 
-  .btn-outlined.btn-secondary {
-    --btn-text-color: var(--color-secondary);
-    border-color: var(--color-secondary);
+  .btn-outline.btn-warning,
+  .btn-outlined.btn-warning {
+    --btn-text-color: var(--color-warning);
+    border-color: var(--color-warning);
   }
 
-  .btn-outlined.btn-secondary:hover {
-    --btn-text-color: var(--color-secondary-content);
-    background-color: var(--color-secondary);
+  .btn-outline.btn-warning:hover,
+  .btn-outlined.btn-warning:hover {
+    --btn-text-color: var(--color-warning-content);
+    background-color: var(--color-warning);
   }
 
-  .btn-outlined.btn-tertiary {
-    --btn-text-color: var(--color-tertiary);
-    border-color: var(--color-tertiary);
+  .btn-outline.btn-error,
+  .btn-outlined.btn-error {
+    --btn-text-color: var(--color-error);
+    border-color: var(--color-error);
   }
 
-  .btn-outlined.btn-tertiary:hover {
-    --btn-text-color: var(--color-tertiary-content);
-    background-color: var(--color-tertiary);
+  .btn-outline.btn-error:hover,
+  .btn-outlined.btn-error:hover {
+    --btn-text-color: var(--color-error-content);
+    background-color: var(--color-error);
   }
 
   /* Ghost Variant */
@@ -229,6 +231,31 @@ export const css = `/**
     background-color: var(--color-tertiary-container);
   }
 
+  .btn-ghost.btn-info    { --btn-text-color: var(--color-info); }
+  .btn-ghost.btn-success { --btn-text-color: var(--color-success); }
+  .btn-ghost.btn-warning { --btn-text-color: var(--color-warning); }
+  .btn-ghost.btn-error   { --btn-text-color: var(--color-error); }
+
+  .btn-ghost.btn-info:hover {
+    --btn-text-color: var(--color-on-info-container);
+    background-color: var(--color-info-container);
+  }
+
+  .btn-ghost.btn-success:hover {
+    --btn-text-color: var(--color-on-success-container);
+    background-color: var(--color-success-container);
+  }
+
+  .btn-ghost.btn-warning:hover {
+    --btn-text-color: var(--color-on-warning-container);
+    background-color: var(--color-warning-container);
+  }
+
+  .btn-ghost.btn-error:hover {
+    --btn-text-color: var(--color-on-error-container);
+    background-color: var(--color-error-container);
+  }
+
   /* Text Variant (alias for .btn-ghost - documentation aligned) */
   .btn-text {
     --btn-text-color: var(--color-on-surface);
@@ -268,6 +295,31 @@ export const css = `/**
     background-color: var(--color-tertiary-container);
   }
 
+  .btn-text.btn-info    { --btn-text-color: var(--color-info); }
+  .btn-text.btn-success { --btn-text-color: var(--color-success); }
+  .btn-text.btn-warning { --btn-text-color: var(--color-warning); }
+  .btn-text.btn-error   { --btn-text-color: var(--color-error); }
+
+  .btn-text.btn-info:hover {
+    --btn-text-color: var(--color-on-info-container);
+    background-color: var(--color-info-container);
+  }
+
+  .btn-text.btn-success:hover {
+    --btn-text-color: var(--color-on-success-container);
+    background-color: var(--color-success-container);
+  }
+
+  .btn-text.btn-warning:hover {
+    --btn-text-color: var(--color-on-warning-container);
+    background-color: var(--color-warning-container);
+  }
+
+  .btn-text.btn-error:hover {
+    --btn-text-color: var(--color-on-error-container);
+    background-color: var(--color-error-container);
+  }
+
   /* Tonal Variant - uses container colors for subtle appearance */
   .btn-tonal {
     --btn-text-color: var(--color-on-primary-container);

package/dist/esm/components/card.js

@@ -163,6 +163,42 @@ export const css = `/**
     color: var(--color-on-tertiary-container);
   }
 
+  .card-info {
+    background-color: var(--color-info-container);
+    color: var(--color-on-info-container);
+  }
+
+  .card-info .card-title {
+    color: var(--color-on-info-container);
+  }
+
+  .card-success {
+    background-color: var(--color-success-container);
+    color: var(--color-on-success-container);
+  }
+
+  .card-success .card-title {
+    color: var(--color-on-success-container);
+  }
+
+  .card-warning {
+    background-color: var(--color-warning-container);
+    color: var(--color-on-warning-container);
+  }
+
+  .card-warning .card-title {
+    color: var(--color-on-warning-container);
+  }
+
+  .card-error {
+    background-color: var(--color-error-container);
+    color: var(--color-on-error-container);
+  }
+
+  .card-error .card-title {
+    color: var(--color-on-error-container);
+  }
+
   /* Glass Effect */
   .card-glass {
     background-color: rgb(255 255 255 / 0.1);
@@ -190,8 +226,8 @@ export const css = `/**
   }
 
   .card-interactive: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);
   }
 
   /* Full Image Card */

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;