@duskmoon-dev/core 1.14.2 → 1.16.0

package/dist/esm/components/form.js

@@ -41,7 +41,7 @@ export const css = `/**
     width: 1.25rem;
     height: 1.25rem;
     border: 2px solid var(--color-outline);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     background-color: transparent;
     cursor: pointer;
     transition: all 150ms ease-in-out;
@@ -70,8 +70,8 @@ export const css = `/**
   }
 
   .checkbox: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);
   }
 
   .checkbox:disabled {
@@ -95,6 +95,21 @@ export const css = `/**
     border-color: var(--color-success);
   }
 
+  .checkbox-tertiary:checked {
+    background-color: var(--color-tertiary);
+    border-color: var(--color-tertiary);
+  }
+
+  .checkbox-info:checked {
+    background-color: var(--color-info);
+    border-color: var(--color-info);
+  }
+
+  .checkbox-warning:checked {
+    background-color: var(--color-warning);
+    border-color: var(--color-warning);
+  }
+
   .checkbox-error:checked {
     background-color: var(--color-error);
     border-color: var(--color-error);
@@ -122,7 +137,7 @@ export const css = `/**
     width: 1.25rem;
     height: 1.25rem;
     border: 2px solid var(--color-outline);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     background-color: transparent;
     cursor: pointer;
     transition: all 150ms ease-in-out;
@@ -145,13 +160,13 @@ export const css = `/**
     width: 0.5rem;
     height: 0.5rem;
     background-color: var(--color-primary);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transform: translate(-50%, -50%);
   }
 
   .radio: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);
   }
 
   .radio:disabled {
@@ -176,12 +191,52 @@ export const css = `/**
     background-color: var(--color-secondary);
   }
 
+  .radio-tertiary:checked {
+    border-color: var(--color-tertiary);
+  }
+
+  .radio-tertiary:checked::after {
+    background-color: var(--color-tertiary);
+  }
+
+  .radio-info:checked {
+    border-color: var(--color-info);
+  }
+
+  .radio-info:checked::after {
+    background-color: var(--color-info);
+  }
+
+  .radio-success:checked {
+    border-color: var(--color-success);
+  }
+
+  .radio-success:checked::after {
+    background-color: var(--color-success);
+  }
+
+  .radio-warning:checked {
+    border-color: var(--color-warning);
+  }
+
+  .radio-warning:checked::after {
+    background-color: var(--color-warning);
+  }
+
+  .radio-error:checked {
+    border-color: var(--color-error);
+  }
+
+  .radio-error:checked::after {
+    background-color: var(--color-error);
+  }
+
   /* Toggle/Switch */
   .toggle {
     appearance: none;
     width: 3rem;
     height: 1.5rem;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     background-color: var(--color-surface-container-highest);
     cursor: pointer;
     transition: all 150ms ease-in-out;
@@ -197,7 +252,7 @@ export const css = `/**
     width: 1rem;
     height: 1rem;
     background-color: var(--color-on-surface-variant);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transition: all 150ms ease-in-out;
   }
 
@@ -211,8 +266,8 @@ export const css = `/**
   }
 
   .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:disabled {
@@ -265,8 +320,8 @@ export const css = `/**
     line-height: 1.5rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
-    border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border: 1px solid currentColor;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
     background-position: right 0.75rem center;
@@ -331,8 +386,8 @@ export const css = `/**
     line-height: 1.5rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
-    border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border: 1px solid currentColor;
+    border-radius: var(--radius-sm);
     resize: vertical;
     transition: border-color 150ms ease-in-out;
   }
@@ -364,8 +419,17 @@ export const css = `/**
   .form-control.error .input,
   .form-control.error .select,
   .form-control.error .textarea,
-  .input-error {
+  .input-error,
+  .select-error,
+  .textarea-error {
+    border-color: var(--color-error);
+  }
+
+  .form-control.error .input:focus-visible,
+  .form-control.error .select:focus-visible,
+  .form-control.error .textarea:focus-visible {
     border-color: var(--color-error);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
   .form-control.error .label-text {
@@ -374,14 +438,64 @@ export const css = `/**
 
   .form-control.success .input,
   .form-control.success .select,
-  .form-control.success .textarea {
+  .form-control.success .textarea,
+  .input-success,
+  .select-success,
+  .textarea-success {
     border-color: var(--color-success);
   }
 
+  .form-control.success .input:focus-visible,
+  .form-control.success .select:focus-visible,
+  .form-control.success .textarea:focus-visible {
+    border-color: var(--color-success);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+  }
+
   .form-control.success .label-text {
     color: var(--color-success);
   }
 
+  .form-control.warning .input,
+  .form-control.warning .select,
+  .form-control.warning .textarea,
+  .input-warning,
+  .select-warning,
+  .textarea-warning {
+    border-color: var(--color-warning);
+  }
+
+  .form-control.warning .input:focus-visible,
+  .form-control.warning .select:focus-visible,
+  .form-control.warning .textarea:focus-visible {
+    border-color: var(--color-warning);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
+  }
+
+  .form-control.warning .label-text {
+    color: var(--color-warning);
+  }
+
+  .form-control.info .input,
+  .form-control.info .select,
+  .form-control.info .textarea,
+  .input-info,
+  .select-info,
+  .textarea-info {
+    border-color: var(--color-info);
+  }
+
+  .form-control.info .input:focus-visible,
+  .form-control.info .select:focus-visible,
+  .form-control.info .textarea:focus-visible {
+    border-color: var(--color-info);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
+  }
+
+  .form-control.info .label-text {
+    color: var(--color-info);
+  }
+
   /* Helper Text */
   .helper-text {
     font-size: 0.75rem;
@@ -397,6 +511,17 @@ export const css = `/**
     color: var(--color-success);
   }
 
+  .helper-text.warning {
+    color: var(--color-warning);
+  }
+
+  .helper-text.info {
+    color: var(--color-info);
+  }
+
+  /* Native HTML Validation (:user-invalid/:user-valid, :invalid/:valid, ARIA)
+   * is handled in form-group.css to avoid duplication. */
+
   /* Required Field Indicator */
   .label-text.required::after {
     content: ' *';
@@ -409,7 +534,7 @@ export const css = `/**
     width: 100%;
     height: 0.5rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
   }
 
@@ -418,7 +543,7 @@ export const css = `/**
     width: 1.25rem;
     height: 1.25rem;
     background-color: var(--color-primary);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: transform 150ms ease-in-out;
   }
@@ -432,13 +557,25 @@ export const css = `/**
     height: 1.25rem;
     background-color: var(--color-primary);
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
   }
 
   .range: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);
+  }
+
+  /* Reduce Motion */
+  @media (prefers-reduced-motion: reduce) {
+    .form-control,
+    .input,
+    .select,
+    .textarea,
+    .range,
+    .label-float .form-control ~ label {
+      transition: none;
+    }
   }
 }
 `;

package/dist/esm/components/input.js

@@ -15,7 +15,7 @@ export const css = `/**
     background-color: var(--color-surface);
     color: var(--color-on-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;
   }
 
@@ -66,7 +66,7 @@ export const css = `/**
     padding: 0.375rem 0.625rem;
     font-size: 0.75rem;
     line-height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     height: 1.75rem;
   }
 
@@ -74,7 +74,7 @@ export const css = `/**
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     height: 2.25rem;
   }
 
@@ -82,7 +82,7 @@ export const css = `/**
     padding: 1rem 1.25rem;
     font-size: 1.125rem;
     line-height: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
     height: 3.5rem;
   }
 
@@ -103,7 +103,7 @@ export const css = `/**
     background-color: var(--color-surface-container);
     border-color: transparent;
     border-bottom: 2px solid var(--color-outline);
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
 
   .input-filled:focus-visible {
@@ -131,13 +131,13 @@ export const css = `/**
   }
 
   .input-group > .input:first-child {
-    border-top-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: var(--radius-sm);
+    border-bottom-left-radius: var(--radius-sm);
   }
 
   .input-group > .input:last-child {
-    border-top-right-radius: 0.5rem;
-    border-bottom-right-radius: 0.5rem;
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
   }
 
   .input-group-text {
@@ -151,14 +151,14 @@ export const css = `/**
   }
 
   .input-group-text:first-child {
-    border-top-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: var(--radius-sm);
+    border-bottom-left-radius: var(--radius-sm);
     border-right: none;
   }
 
   .input-group-text:last-child {
-    border-top-right-radius: 0.5rem;
-    border-bottom-right-radius: 0.5rem;
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
     border-left: none;
   }
 
@@ -169,7 +169,7 @@ export const css = `/**
     padding: 0;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     overflow: hidden;
     cursor: pointer;
   }
@@ -192,6 +192,15 @@ export const css = `/**
     box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
     outline: none;
   }
+
+  /* Reduce Motion */
+  @media (prefers-reduced-motion: reduce) {
+    .input,
+    .input-filled,
+    .file-input {
+      transition: none;
+    }
+  }
 }
 `;
 

package/dist/esm/components/list.js

@@ -40,8 +40,8 @@ export const css = `/**
   }
 
   .list-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);
     background-color: var(--color-surface-container);
   }
 
@@ -88,7 +88,7 @@ export const css = `/**
   /* List Variants */
   .list-bordered {
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     padding: 0;
   }
 

package/dist/esm/components/markdown-body.js

@@ -81,8 +81,8 @@ export const css = `/**
   }
 
   .markdown-body a: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);
   }
 
   /* Emphasis */
@@ -176,7 +176,7 @@ export const css = `/**
     padding-block: 0.2em;
     padding-inline: 0.4em;
     background-color: var(--color-surface-container-high);
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
   }
 
   /* Code blocks */
@@ -188,7 +188,7 @@ export const css = `/**
     margin-block-end: 1rem;
     overflow-x: auto;
     background-color: var(--color-surface-container);
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
   }
 
   /* Reset code inside pre */
@@ -207,7 +207,7 @@ export const css = `/**
     padding-inline: 0.4em;
     background-color: var(--color-surface-container);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
     box-shadow: inset 0 -1px 0 var(--color-outline-variant);
   }
 
@@ -364,7 +364,7 @@ export const css = `/**
     color: var(--color-on-tertiary-container);
     padding-block: 0.1em;
     padding-inline: 0.2em;
-    border-radius: 2px;
+    border-radius: var(--radius-xs);
   }
 
   /* Details/Summary */

package/dist/esm/components/modal.js

@@ -35,7 +35,7 @@ export const css = `/**
     padding: 1.5rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     box-shadow: var(--shadow-2xl);
     overflow-y: auto;
     transform: scale(0.95);
@@ -52,7 +52,7 @@ export const css = `/**
     position: fixed;
     inset: 0;
     z-index: -1;
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
     cursor: pointer;
   }
 
@@ -134,7 +134,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;
   }
@@ -145,8 +145,8 @@ export const css = `/**
   }
 
   .modal-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);
   }
 
   /* Modal Header */
@@ -184,7 +184,7 @@ export const css = `/**
       max-width: 100%;
       max-height: 90vh;
       margin: 0;
-      border-radius: 1rem 1rem 0 0;
+      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     }
   }
 
@@ -238,7 +238,7 @@ export const css = `/**
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     font-size: 2rem;
   }
 

package/dist/esm/components/multi-select.js

@@ -26,7 +26,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
@@ -68,7 +68,7 @@ export const css = `/**
     line-height: 1.25rem;
     background-color: var(--color-surface-container-high);
     color: var(--color-on-surface);
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
   }
 
   .multi-select-tag-text {
@@ -88,7 +88,7 @@ export const css = `/**
     color: inherit;
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     opacity: 0.7;
     transition: opacity 150ms ease-in-out, background-color 150ms ease-in-out;
@@ -120,7 +120,7 @@ export const css = `/**
     line-height: 1.25rem;
     background-color: var(--color-surface-container);
     color: var(--color-on-surface-variant);
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
   }
 
   /* Inline Search Input */
@@ -168,7 +168,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;
     flex-shrink: 0;
     transition: background-color 150ms ease-in-out;
@@ -190,7 +190,7 @@ export const css = `/**
     margin-top: 0.25rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     box-shadow: var(--shadow-md);
     overflow: hidden;
   }
@@ -227,7 +227,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     outline: none;
   }
 
@@ -258,7 +258,7 @@ export const css = `/**
     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;
@@ -299,7 +299,7 @@ export const css = `/**
     height: 1rem;
     background-color: transparent;
     border: 2px solid var(--color-on-surface-variant);
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
     flex-shrink: 0;
   }
 
@@ -309,7 +309,7 @@ export const css = `/**
   }
 
   .multi-select-option-selected .multi-select-option-checkbox svg {
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   /* Option Icon */
@@ -372,7 +372,7 @@ export const css = `/**
     color: var(--color-primary);
     background-color: transparent;
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -393,7 +393,7 @@ export const css = `/**
     font-weight: 600;
     color: var(--color-primary-content);
     background-color: var(--color-primary);
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Size Variants */
@@ -401,7 +401,7 @@ export const css = `/**
     min-height: 2.25rem;
     padding: 0.375rem 0.5rem;
     font-size: 0.875rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .multi-select-sm .multi-select-tag {
@@ -413,7 +413,7 @@ export const css = `/**
     min-height: 3.25rem;
     padding: 0.625rem 1rem;
     font-size: 1.125rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Outlined Variant (Default) */
@@ -427,7 +427,7 @@ export const css = `/**
     background-color: var(--color-surface-container);
     border: none;
     border-bottom: 2px solid var(--color-outline);
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
 
   .multi-select-filled .multi-select-trigger:focus-within {
@@ -518,7 +518,7 @@ export const css = `/**
     height: 1rem;
     border: 2px solid var(--color-outline);
     border-top-color: var(--color-primary);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: multi-select-spin 0.8s linear infinite;
   }