@duskmoon-dev/core 1.14.2 → 1.16.0

package/dist/esm/components/dialog.js

@@ -17,14 +17,14 @@ export const css = `/**
     max-height: calc(100vh - 4rem);
     background-color: var(--color-surface);
     color: var(--color-on-surface);
-    border-radius: 1.5rem;
+    border-radius: var(--radius-2xl);
     box-shadow: var(--shadow-2xl);
     overflow: hidden;
   }
 
   /* Dialog Backdrop (native ::backdrop) */
   dialog.dialog::backdrop {
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
   }
 
   /* Dialog Box - inner container for flex layout */
@@ -63,7 +63,7 @@ export const css = `/**
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
     flex-shrink: 0;
@@ -75,8 +75,8 @@ export const css = `/**
   }
 
   .dialog-close: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);
   }
 
   /* Dialog Body */

package/dist/esm/components/drawer.js

@@ -10,7 +10,7 @@ export const css = `/**
     position: fixed;
     inset: 0;
     z-index: 1100;
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
     opacity: 0;
     visibility: hidden;
     transition: opacity 300ms ease-out, visibility 300ms ease-out;
@@ -57,7 +57,7 @@ export const css = `/**
     width: 20rem;
     max-width: calc(100vw - 3.5rem);
     transform: translateX(-100%);
-    border-radius: 0 1rem 1rem 0;
+    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
   }
 
   .drawer-left.drawer-open {
@@ -71,7 +71,7 @@ export const css = `/**
     width: 20rem;
     max-width: calc(100vw - 3.5rem);
     transform: translateX(100%);
-    border-radius: 1rem 0 0 1rem;
+    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
   }
 
   .drawer-right.drawer-open {
@@ -85,7 +85,7 @@ export const css = `/**
     height: auto;
     max-height: 80vh;
     transform: translateY(-100%);
-    border-radius: 0 0 1rem 1rem;
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   }
 
   .drawer-top.drawer-open {
@@ -99,7 +99,7 @@ export const css = `/**
     height: auto;
     max-height: 80vh;
     transform: translateY(100%);
-    border-radius: 1rem 1rem 0 0;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   }
 
   .drawer-bottom.drawer-open {
@@ -132,7 +132,7 @@ export const css = `/**
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -142,8 +142,8 @@ export const css = `/**
   }
 
   .drawer-close: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);
   }
 
   /* Drawer Body (main content area) */
@@ -174,7 +174,7 @@ export const css = `/**
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 1.75rem;
+    border-radius: var(--radius-2xl);
     cursor: pointer;
     text-decoration: none;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
@@ -187,8 +187,8 @@ export const css = `/**
   }
 
   .drawer-item: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);
   }
 
   /* Active Item States */
@@ -226,7 +226,7 @@ export const css = `/**
     font-weight: 500;
     background-color: var(--color-error-container);
     color: var(--color-on-error-container);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     margin-left: auto;
   }
 
@@ -268,7 +268,7 @@ export const css = `/**
   .drawer-profile-avatar {
     width: 2.5rem;
     height: 2.5rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     background-color: var(--color-primary-container);
     display: flex;
     align-items: center;

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

@@ -24,7 +24,7 @@ export const css = `/**
     padding: 2rem;
     background-color: var(--color-surface);
     border: 2px dashed currentColor;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     cursor: pointer;
     transition: border-color 150ms ease-in-out, background-color 150ms ease-in-out;
   }
@@ -107,7 +107,7 @@ export const css = `/**
     gap: 0.75rem;
     padding: 0.75rem;
     background-color: var(--color-surface-container);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .file-upload-item-icon {
@@ -118,7 +118,7 @@ export const css = `/**
     height: 2.5rem;
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     font-size: 1.25rem;
     flex-shrink: 0;
   }
@@ -151,7 +151,7 @@ export const css = `/**
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
     flex-shrink: 0;
@@ -168,7 +168,7 @@ export const css = `/**
     height: 0.25rem;
     margin-top: 0.5rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     overflow: hidden;
   }
 
@@ -178,7 +178,7 @@ export const css = `/**
     left: 0;
     height: 100%;
     background-color: var(--color-primary);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: width 150ms ease-in-out;
   }
 
@@ -218,7 +218,7 @@ export const css = `/**
   .file-upload-preview-item {
     position: relative;
     aspect-ratio: 1;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     overflow: hidden;
     background-color: var(--color-surface-container);
   }
@@ -241,7 +241,7 @@ export const css = `/**
     background-color: var(--color-on-surface);
     color: var(--color-surface);
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     opacity: 0;
     transition: opacity 150ms ease-in-out;
@@ -277,10 +277,10 @@ export const css = `/**
     padding: 0.75rem 1.5rem;
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
     background-color: var(--color-primary);
     border: none;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
@@ -290,8 +290,8 @@ export const css = `/**
   }
 
   .file-upload-button: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);
   }
 
   .file-upload-button:disabled {

package/dist/esm/components/form-group.js

@@ -121,7 +121,7 @@ export const css = `/**
     padding: 1rem;
     margin: 0;
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     background-color: transparent;
   }
 
@@ -333,11 +333,172 @@ export const css = `/**
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
   }
 
+  /* Info State on Form Group */
+  .form-group-info .form-label {
+    color: var(--color-info);
+  }
+
+  .form-group-info .input,
+  .form-group-info .select,
+  .form-group-info .textarea {
+    border-color: var(--color-info);
+  }
+
+  .form-group-info .input:focus-visible,
+  .form-group-info .select:focus-visible,
+  .form-group-info .textarea:focus-visible {
+    border-color: var(--color-info);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
+  }
+
   /* Disabled Form Group */
   .form-group-disabled {
     opacity: 0.5;
     pointer-events: none;
   }
+
+  /* ARIA-based validation states — mirrors class-based states for native form validation */
+  .input[aria-invalid="true"],
+  .select[aria-invalid="true"],
+  .textarea[aria-invalid="true"] {
+    border-color: var(--color-error);
+    color: var(--color-error);
+  }
+
+  .input[aria-invalid="true"]:focus-visible,
+  .select[aria-invalid="true"]:focus-visible,
+  .textarea[aria-invalid="true"]:focus-visible {
+    border-color: var(--color-error);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
+  }
+
+  /* ARIA-based validation for checkbox, radio, switch, file-input
+     (frameworks like React Hook Form / Angular set aria-invalid programmatically) */
+  .checkbox[aria-invalid="true"],
+  .radio[aria-invalid="true"],
+  .file-input[aria-invalid="true"] {
+    border-color: var(--color-error);
+  }
+
+  .checkbox[aria-invalid="true"]:focus-visible,
+  .radio[aria-invalid="true"]:focus-visible,
+  .file-input[aria-invalid="true"]:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
+  }
+
+  .switch[aria-invalid="true"] {
+    border-color: var(--color-error);
+  }
+
+  .switch[aria-invalid="true"]:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
+  }
+
+  /* ARIA required indicator for labels */
+  .form-label[aria-required="true"]::after,
+  label[aria-required="true"]::after {
+    content: ' *';
+    color: var(--color-error);
+  }
+
+  /* Native :invalid pseudo-class (opt-in with .validate class to avoid red on page load) */
+  .validate .input:invalid,
+  .validate .select:invalid,
+  .validate .textarea:invalid {
+    border-color: var(--color-error);
+  }
+
+  .validate .input:valid,
+  .validate .select:valid,
+  .validate .textarea:valid {
+    border-color: var(--color-success);
+  }
+
+  /* :user-invalid — fires only after user interaction (no .validate wrapper needed) */
+  .input:user-invalid,
+  .select:user-invalid,
+  .textarea:user-invalid {
+    border-color: var(--color-error);
+  }
+
+  .input:user-invalid:focus-visible,
+  .select:user-invalid:focus-visible,
+  .textarea:user-invalid:focus-visible {
+    border-color: var(--color-error);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
+  }
+
+  .input:user-valid,
+  .select:user-valid,
+  .textarea:user-valid {
+    border-color: var(--color-success);
+  }
+
+  .input:user-valid:focus-visible,
+  .select:user-valid:focus-visible,
+  .textarea:user-valid:focus-visible {
+    border-color: var(--color-success);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+  }
+
+  /* Checkbox & Radio — validation pseudo-classes */
+  .checkbox:user-invalid,
+  .radio:user-invalid {
+    border-color: var(--color-error);
+  }
+
+  .checkbox:user-invalid:focus-visible,
+  .radio:user-invalid:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
+  }
+
+  .checkbox:user-valid:checked,
+  .radio:user-valid:checked {
+    border-color: var(--color-success);
+    background-color: var(--color-success);
+  }
+
+  /* Switch — validation pseudo-classes (required but unchecked) */
+  .switch:user-invalid {
+    border-color: var(--color-error);
+  }
+
+  .switch:user-invalid:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
+  }
+
+  .switch:user-valid:checked {
+    background-color: var(--color-success);
+    border-color: var(--color-success);
+  }
+
+  /* File Input — validation pseudo-classes */
+  .file-input:user-invalid {
+    border-color: var(--color-error);
+  }
+
+  .file-input:user-invalid:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
+  }
+
+  /* Filled Input — validation with bottom border */
+  .input-filled:user-invalid {
+    border-bottom-color: var(--color-error);
+  }
+
+  .input-filled:user-invalid:focus-visible {
+    border-bottom-color: var(--color-error);
+    box-shadow: none;
+  }
+
+  .input-filled:user-valid {
+    border-bottom-color: var(--color-success);
+  }
+
+  .input-filled:user-valid:focus-visible {
+    border-bottom-color: var(--color-success);
+    box-shadow: none;
+  }
 }
 `;