@duskmoon-dev/core 1.15.0 → 1.16.0

package/dist/components/input.css

@@ -14,7 +14,7 @@
     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;
   }
 
@@ -65,7 +65,7 @@
     padding: 0.375rem 0.625rem;
     font-size: 0.75rem;
     line-height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     height: 1.75rem;
   }
 
@@ -73,7 +73,7 @@
     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;
   }
 
@@ -81,7 +81,7 @@
     padding: 1rem 1.25rem;
     font-size: 1.125rem;
     line-height: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
     height: 3.5rem;
   }
 
@@ -102,7 +102,7 @@
     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 {
@@ -130,13 +130,13 @@
   }
 
   .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 {
@@ -150,14 +150,14 @@
   }
 
   .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;
   }
 
@@ -168,7 +168,7 @@
     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;
   }
@@ -191,4 +191,13 @@
     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/components/list.css

@@ -39,8 +39,8 @@
   }
 
   .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);
   }
 
@@ -87,7 +87,7 @@
   /* List Variants */
   .list-bordered {
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     padding: 0;
   }
 

package/dist/components/markdown-body.css

@@ -80,8 +80,8 @@
   }
 
   .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 */
@@ -175,7 +175,7 @@
     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 */
@@ -187,7 +187,7 @@
     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 */
@@ -206,7 +206,7 @@
     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);
   }
 
@@ -363,7 +363,7 @@
     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/components/modal.css

@@ -34,7 +34,7 @@
     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);
@@ -51,7 +51,7 @@
     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;
   }
 
@@ -133,7 +133,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;
   }
@@ -144,8 +144,8 @@
   }
 
   .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 */
@@ -183,7 +183,7 @@
       max-width: 100%;
       max-height: 90vh;
       margin: 0;
-      border-radius: 1rem 1rem 0 0;
+      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     }
   }
 
@@ -237,7 +237,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     font-size: 2rem;
   }
 

package/dist/components/multi-select.css

@@ -25,7 +25,7 @@
     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;
   }
@@ -67,7 +67,7 @@
     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 {
@@ -87,7 +87,7 @@
     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;
@@ -119,7 +119,7 @@
     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 */
@@ -167,7 +167,7 @@
     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;
@@ -189,7 +189,7 @@
     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;
   }
@@ -226,7 +226,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     outline: none;
   }
 
@@ -257,7 +257,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;
@@ -298,7 +298,7 @@
     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;
   }
 
@@ -308,7 +308,7 @@
   }
 
   .multi-select-option-selected .multi-select-option-checkbox svg {
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   /* Option Icon */
@@ -371,7 +371,7 @@
     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;
   }
@@ -392,7 +392,7 @@
     font-weight: 600;
     color: var(--color-primary-content);
     background-color: var(--color-primary);
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Size Variants */
@@ -400,7 +400,7 @@
     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 {
@@ -412,7 +412,7 @@
     min-height: 3.25rem;
     padding: 0.625rem 1rem;
     font-size: 1.125rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Outlined Variant (Default) */
@@ -426,7 +426,7 @@
     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 {
@@ -517,7 +517,7 @@
     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;
   }
 

package/dist/components/navigation.css

@@ -64,7 +64,7 @@
     font-size: 0.875rem;
     color: var(--color-on-surface);
     text-decoration: none;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
     white-space: nowrap;
@@ -79,8 +79,8 @@
   .menu li > a:focus-visible,
   .menu li > button:focus-visible,
   .menu-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);
   }
 
   .menu li > a.active,
@@ -216,9 +216,9 @@
   }
 
   .breadcrumb-link:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-    border-radius: 0.25rem;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    border-radius: var(--radius-xs);
   }
 
   /* Separator - Default shows "/" */
@@ -300,7 +300,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -356,7 +356,7 @@
   .breadcrumbs-contained {
     padding: 0.75rem 1rem;
     background-color: var(--color-surface-container);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   /* No Wrap Variant */
@@ -405,8 +405,8 @@
   }
 
   .tab: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);
   }
 
   .tab.tab-active,
@@ -423,13 +423,13 @@
   /* Tabs Boxed */
   .tabs-boxed {
     background-color: var(--color-surface-container);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     padding: 0.25rem;
     border: none;
   }
 
   .tabs-boxed .tab {
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     border-bottom: none;
     margin-bottom: 0;
   }
@@ -449,7 +449,7 @@
   .tabs-lifted .tab {
     border: 1px solid transparent;
     border-bottom: none;
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
     margin-bottom: -1px;
   }
 
@@ -489,7 +489,7 @@
     padding: 0.5rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     box-shadow: var(--shadow-lg);
     opacity: 0;
     visibility: hidden;
@@ -556,7 +556,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: all 150ms ease-in-out;
     white-space: nowrap;
@@ -598,8 +598,8 @@
   .pagination-next:focus-visible,
   .pagination li > a:focus-visible,
   .pagination li > 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);
   }
 
   .pagination-item:disabled,
@@ -657,7 +657,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .pagination-input input:focus {
@@ -711,12 +711,12 @@
 
   .pagination-compact .pagination-item:first-child,
   .pagination-compact .pagination-prev {
-    border-radius: 0.5rem 0 0 0.5rem;
+    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
   }
 
   .pagination-compact .pagination-item:last-child,
   .pagination-compact .pagination-next {
-    border-radius: 0 0.5rem 0.5rem 0;
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
   }
 
   /* Pagination Responsive */

package/dist/components/nested-menu.css

@@ -61,8 +61,8 @@
 
   .nested-menu li > a:focus-visible,
   .nested-menu li > 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);
   }
 
   /* Active state */
@@ -126,8 +126,8 @@
   }
 
   .nested-menu summary: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);
   }
 
   /* Chevron indicator */
@@ -223,7 +223,7 @@
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
     border-radius: var(--radius-card, 0.75rem);
-    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+    box-shadow: var(--shadow-sm);
   }
 
   /* Compact — tighter padding throughout */

package/dist/components/otp-input.css

@@ -22,7 +22,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 2px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     outline: none;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
     caret-color: var(--color-primary);
@@ -61,7 +61,7 @@
     width: 1rem;
     height: 0.25rem;
     background-color: var(--color-outline);
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
   }
 
   /* Size Variants */
@@ -69,14 +69,14 @@
     width: 2.5rem;
     height: 3rem;
     font-size: 1.25rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .otp-input-lg .otp-input-field {
     width: 3.5rem;
     height: 4rem;
     font-size: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Compact Gap */
@@ -94,7 +94,7 @@
     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;
   }
 
   .otp-input-filled .otp-input-field:focus {

package/dist/components/pin-input.css

@@ -22,7 +22,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 2px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     outline: none;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
     caret-color: var(--color-primary);
@@ -58,14 +58,14 @@
     width: 2.5rem;
     height: 3rem;
     font-size: 1.25rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .pin-input-lg .pin-input-field {
     width: 3.5rem;
     height: 4rem;
     font-size: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Compact Gap */
@@ -78,7 +78,7 @@
     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;
   }
 
   .pin-input-filled .pin-input-field:focus {
@@ -90,7 +90,7 @@
   .pin-input-circle .pin-input-field {
     width: 3rem;
     height: 3rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
 
   .pin-input-circle.pin-input-sm .pin-input-field {