@duskmoon-dev/core 1.12.4 → 1.13.0

package/dist/components/alert.css

@@ -72,8 +72,8 @@
   }
 
   .alert-close:focus-visible {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Type Variants */
@@ -101,6 +101,24 @@
     border-color: transparent;
   }
 
+  .alert-primary {
+    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-container);
+    border-color: transparent;
+  }
+
+  .alert-secondary {
+    background-color: var(--color-secondary-container);
+    color: var(--color-on-secondary-container);
+    border-color: transparent;
+  }
+
+  .alert-tertiary {
+    background-color: var(--color-tertiary-container);
+    color: var(--color-on-tertiary-container);
+    border-color: transparent;
+  }
+
   /* Filled Variants */
   .alert-filled.alert-info {
     background-color: var(--color-info);
@@ -122,6 +140,21 @@
     color: var(--color-error-content);
   }
 
+  .alert-filled.alert-primary {
+    background-color: var(--color-primary);
+    color: var(--color-primary-content);
+  }
+
+  .alert-filled.alert-secondary {
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-content);
+  }
+
+  .alert-filled.alert-tertiary {
+    background-color: var(--color-tertiary);
+    color: var(--color-tertiary-content);
+  }
+
   /* Outlined Variants */
   .alert-outlined {
     background-color: transparent;
@@ -147,6 +180,35 @@
     color: var(--color-error);
   }
 
+  .alert-outlined.alert-primary {
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+  }
+
+  .alert-outlined.alert-secondary {
+    border-color: var(--color-secondary);
+    color: var(--color-secondary);
+  }
+
+  .alert-outlined.alert-tertiary {
+    border-color: var(--color-tertiary);
+    color: var(--color-tertiary);
+  }
+
+  /* Ghost Variant */
+  .alert-ghost {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .alert-ghost.alert-primary   { color: var(--color-primary); }
+  .alert-ghost.alert-secondary { color: var(--color-secondary); }
+  .alert-ghost.alert-tertiary  { color: var(--color-tertiary); }
+  .alert-ghost.alert-info      { color: var(--color-info); }
+  .alert-ghost.alert-success   { color: var(--color-success); }
+  .alert-ghost.alert-warning   { color: var(--color-warning); }
+  .alert-ghost.alert-error     { color: var(--color-error); }
+
   /* Dismissible */
   .alert-dismissible {
     padding-right: 2.5rem;

package/dist/components/appbar.css

@@ -102,8 +102,8 @@
   }
 
   .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 */
@@ -165,8 +165,8 @@
   }
 
   .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 */
@@ -281,8 +281,8 @@
   }
 
   .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) */
@@ -313,64 +313,162 @@
   /* 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/components/autocomplete.css

@@ -19,15 +19,14 @@
     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 {
@@ -249,6 +248,67 @@
     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/components/avatar.css

@@ -93,6 +93,26 @@
     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);
@@ -161,7 +181,7 @@
 
   /* 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/components/button.css

@@ -44,8 +44,8 @@
   }
 
   .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 {
@@ -67,10 +67,6 @@
     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);
@@ -84,10 +80,6 @@
     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);
@@ -101,92 +93,102 @@
     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 */
@@ -228,6 +230,31 @@
     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);
@@ -267,6 +294,31 @@
     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);