@duskmoon-dev/core 1.14.2 → 1.16.0

package/dist/components/collapse.css

@@ -8,7 +8,7 @@
   .collapse {
     display: flex;
     flex-direction: column;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     background-color: var(--color-surface);
     /* Override Tailwind's visibility: collapse utility */
     visibility: visible !important;
@@ -36,8 +36,8 @@
   }
 
   .collapse-trigger: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);
   }
 
   /* Collapse Icon */
@@ -124,7 +124,7 @@
     border: none;
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .collapse-toggle:hover {
@@ -132,8 +132,8 @@
   }
 
   .collapse-toggle: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);
   }
 
   /* Toggle Icon */
@@ -154,7 +154,7 @@
   .collapse-card {
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     overflow: hidden;
     box-shadow: var(--shadow-sm);
   }
@@ -182,7 +182,7 @@
   /* Bordered Variant */
   .collapse-bordered {
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Ghost Variant */
@@ -306,7 +306,7 @@
     margin-left: 0.5rem;
     border: 2px solid var(--color-outline);
     border-top-color: var(--color-primary);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: collapse-spin 0.8s linear infinite;
   }
 

package/dist/components/datepicker.css

@@ -20,7 +20,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
 
@@ -90,7 +90,7 @@
     padding: 0;
     background: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     color: var(--color-on-surface-variant);
     transition: background-color 150ms ease-in-out;
@@ -114,7 +114,7 @@
     margin-top: 0.25rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     opacity: 0;
     visibility: hidden;
@@ -140,7 +140,7 @@
     min-width: 18rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
   }
 
@@ -173,7 +173,7 @@
     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;
   }
@@ -230,7 +230,7 @@
     color: var(--color-on-surface);
     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;
   }
@@ -240,8 +240,8 @@
   }
 
   .datepicker-day: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);
   }
 
   .datepicker-day-other-month {
@@ -255,7 +255,7 @@
 
   .datepicker-day-selected {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   .datepicker-day-selected:hover {
@@ -278,14 +278,14 @@
 
   .datepicker-day-range-start {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
-    border-radius: 50% 0 0 50%;
+    color: var(--color-primary-content);
+    border-radius: var(--radius-full) 0 0 var(--radius-full);
   }
 
   .datepicker-day-range-end {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
-    border-radius: 0 50% 50% 0;
+    color: var(--color-primary-content);
+    border-radius: 0 var(--radius-full) var(--radius-full) 0;
   }
 
   /* Month/Year View */
@@ -308,7 +308,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -323,7 +323,7 @@
   .datepicker-year.selected,
   .datepicker-year-selected {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   .datepicker-day-disabled {
@@ -360,7 +360,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: 1px solid var(--color-outline);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .datepicker-time-input:focus {
@@ -393,17 +393,17 @@
   }
 
   .datepicker-time-period-btn:first-child {
-    border-radius: 0.25rem 0.25rem 0 0;
+    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
   }
 
   .datepicker-time-period-btn:last-child {
-    border-radius: 0 0 0.25rem 0.25rem;
+    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
     border-top: none;
   }
 
   .datepicker-time-period-btn.active {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
     border-color: var(--color-primary);
   }
 
@@ -465,7 +465,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     text-align: left;
     transition: background-color 150ms ease-in-out;
@@ -532,7 +532,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
 
@@ -638,7 +638,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     transition: border-color 150ms ease-in-out;
   }
 

package/dist/components/dialog.css

@@ -16,14 +16,14 @@
     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 */
@@ -62,7 +62,7 @@
     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;
@@ -74,8 +74,8 @@
   }
 
   .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/components/drawer.css

@@ -9,7 +9,7 @@
     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;
@@ -56,7 +56,7 @@
     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 {
@@ -70,7 +70,7 @@
     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 {
@@ -84,7 +84,7 @@
     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 {
@@ -98,7 +98,7 @@
     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 {
@@ -131,7 +131,7 @@
     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;
   }
@@ -141,8 +141,8 @@
   }
 
   .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) */
@@ -173,7 +173,7 @@
     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;
@@ -186,8 +186,8 @@
   }
 
   .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 */
@@ -225,7 +225,7 @@
     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;
   }
 
@@ -267,7 +267,7 @@
   .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/components/file-upload.css

@@ -23,7 +23,7 @@
     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;
   }
@@ -106,7 +106,7 @@
     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 {
@@ -117,7 +117,7 @@
     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;
   }
@@ -150,7 +150,7 @@
     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;
@@ -167,7 +167,7 @@
     height: 0.25rem;
     margin-top: 0.5rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     overflow: hidden;
   }
 
@@ -177,7 +177,7 @@
     left: 0;
     height: 100%;
     background-color: var(--color-primary);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: width 150ms ease-in-out;
   }
 
@@ -217,7 +217,7 @@
   .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);
   }
@@ -240,7 +240,7 @@
     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;
@@ -276,10 +276,10 @@
     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;
   }
@@ -289,8 +289,8 @@
   }
 
   .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/components/form-group.css

@@ -120,7 +120,7 @@
     padding: 1rem;
     margin: 0;
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     background-color: transparent;
   }
 
@@ -332,9 +332,170 @@
     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;
+  }
 }