@duskmoon-dev/core 1.12.4 → 1.14.0

package/dist/esm/components/appbar.js

@@ -103,8 +103,8 @@ export const css = `/**
   }
 
   .appbar-nav: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);
   }
 
   /* App Bar Title */
@@ -166,8 +166,8 @@ export const css = `/**
   }
 
   .appbar-action: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);
   }
 
   /* App Bar Logo/Brand */
@@ -282,8 +282,8 @@ export const css = `/**
   }
 
   .appbar-back: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);
   }
 
   /* Search Input (direct on element) */
@@ -314,64 +314,162 @@ export const css = `/**
   /* Color Variants */
   .appbar-primary {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   .appbar-primary .appbar-nav,
-  .appbar-primary .appbar-action {
-    color: var(--color-on-primary);
+  .appbar-primary .appbar-action,
+  .appbar-primary .appbar-back {
+    color: var(--color-primary-content);
   }
 
   .appbar-primary .appbar-nav:hover,
-  .appbar-primary .appbar-action:hover {
+  .appbar-primary .appbar-action:hover,
+  .appbar-primary .appbar-back:hover {
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
   }
 
   .appbar-primary .appbar-subtitle {
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
     opacity: 0.8;
   }
 
   .appbar-secondary {
     background-color: var(--color-secondary);
-    color: var(--color-on-secondary);
+    color: var(--color-secondary-content);
   }
 
   .appbar-secondary .appbar-nav,
-  .appbar-secondary .appbar-action {
-    color: var(--color-on-secondary);
+  .appbar-secondary .appbar-action,
+  .appbar-secondary .appbar-back {
+    color: var(--color-secondary-content);
   }
 
   .appbar-secondary .appbar-nav:hover,
-  .appbar-secondary .appbar-action:hover {
+  .appbar-secondary .appbar-action:hover,
+  .appbar-secondary .appbar-back:hover {
     background-color: var(--color-secondary-container);
     color: var(--color-on-secondary-container);
   }
 
   .appbar-secondary .appbar-subtitle {
-    color: var(--color-on-secondary);
+    color: var(--color-secondary-content);
     opacity: 0.8;
   }
 
   .appbar-tertiary {
     background-color: var(--color-tertiary);
-    color: var(--color-on-tertiary);
+    color: var(--color-tertiary-content);
   }
 
   .appbar-tertiary .appbar-nav,
-  .appbar-tertiary .appbar-action {
-    color: var(--color-on-tertiary);
+  .appbar-tertiary .appbar-action,
+  .appbar-tertiary .appbar-back {
+    color: var(--color-tertiary-content);
   }
 
   .appbar-tertiary .appbar-nav:hover,
-  .appbar-tertiary .appbar-action:hover {
+  .appbar-tertiary .appbar-action:hover,
+  .appbar-tertiary .appbar-back:hover {
     background-color: var(--color-tertiary-container);
     color: var(--color-on-tertiary-container);
   }
 
   .appbar-tertiary .appbar-subtitle {
-    color: var(--color-on-tertiary);
+    color: var(--color-tertiary-content);
+    opacity: 0.8;
+  }
+
+  .appbar-info {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
+  }
+
+  .appbar-info .appbar-nav,
+  .appbar-info .appbar-action,
+  .appbar-info .appbar-back {
+    color: var(--color-info-content);
+  }
+
+  .appbar-info .appbar-nav:hover,
+  .appbar-info .appbar-action:hover,
+  .appbar-info .appbar-back:hover {
+    background-color: var(--color-info-container);
+    color: var(--color-on-info-container);
+  }
+
+  .appbar-info .appbar-subtitle {
+    color: var(--color-info-content);
+    opacity: 0.8;
+  }
+
+  .appbar-success {
+    background-color: var(--color-success);
+    color: var(--color-success-content);
+  }
+
+  .appbar-success .appbar-nav,
+  .appbar-success .appbar-action,
+  .appbar-success .appbar-back {
+    color: var(--color-success-content);
+  }
+
+  .appbar-success .appbar-nav:hover,
+  .appbar-success .appbar-action:hover,
+  .appbar-success .appbar-back:hover {
+    background-color: var(--color-success-container);
+    color: var(--color-on-success-container);
+  }
+
+  .appbar-success .appbar-subtitle {
+    color: var(--color-success-content);
+    opacity: 0.8;
+  }
+
+  .appbar-warning {
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
+  }
+
+  .appbar-warning .appbar-nav,
+  .appbar-warning .appbar-action,
+  .appbar-warning .appbar-back {
+    color: var(--color-warning-content);
+  }
+
+  .appbar-warning .appbar-nav:hover,
+  .appbar-warning .appbar-action:hover,
+  .appbar-warning .appbar-back:hover {
+    background-color: var(--color-warning-container);
+    color: var(--color-on-warning-container);
+  }
+
+  .appbar-warning .appbar-subtitle {
+    color: var(--color-warning-content);
+    opacity: 0.8;
+  }
+
+  .appbar-error {
+    background-color: var(--color-error);
+    color: var(--color-error-content);
+  }
+
+  .appbar-error .appbar-nav,
+  .appbar-error .appbar-action,
+  .appbar-error .appbar-back {
+    color: var(--color-error-content);
+  }
+
+  .appbar-error .appbar-nav:hover,
+  .appbar-error .appbar-action:hover,
+  .appbar-error .appbar-back:hover {
+    background-color: var(--color-error-container);
+    color: var(--color-on-error-container);
+  }
+
+  .appbar-error .appbar-subtitle {
+    color: var(--color-error-content);
     opacity: 0.8;
   }
 

package/dist/esm/components/autocomplete.js

@@ -20,15 +20,14 @@ 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;
   }
 
   .autocomplete-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);
   }
 
   .autocomplete-input:disabled {
@@ -250,6 +249,67 @@ export const css = `/**
     outline: none;
   }
 
+  /* Color Variants */
+  .autocomplete-primary .autocomplete-input {
+    color: var(--color-primary);
+  }
+  .autocomplete-primary .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
+  }
+
+  .autocomplete-secondary .autocomplete-input {
+    color: var(--color-secondary);
+  }
+  .autocomplete-secondary .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent);
+  }
+
+  .autocomplete-tertiary .autocomplete-input {
+    color: var(--color-tertiary);
+  }
+  .autocomplete-tertiary .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent);
+  }
+
+  .autocomplete-info .autocomplete-input {
+    color: var(--color-info);
+  }
+  .autocomplete-info .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
+  }
+
+  .autocomplete-success .autocomplete-input {
+    color: var(--color-success);
+  }
+  .autocomplete-success .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+  }
+
+  .autocomplete-warning .autocomplete-input {
+    color: var(--color-warning);
+  }
+  .autocomplete-warning .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
+  }
+
+  .autocomplete-error .autocomplete-input {
+    color: var(--color-error);
+  }
+  .autocomplete-error .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
+  }
+
+  /* Ghost Variant */
+  .autocomplete-ghost .autocomplete-input {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .autocomplete-ghost .autocomplete-input:focus {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
   /* Size Variants */
   .autocomplete-sm .autocomplete-input {
     padding: 0.5rem 0.75rem;

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 */