@duskmoon-dev/core 1.15.0 → 1.16.0

package/dist/esm/components/navigation.js

@@ -65,7 +65,7 @@ export const css = `/**
     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;
@@ -80,8 +80,8 @@ export const css = `/**
   .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,
@@ -217,9 +217,9 @@ export const css = `/**
   }
 
   .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 "/" */
@@ -301,7 +301,7 @@ export const css = `/**
     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;
   }
@@ -357,7 +357,7 @@ export const css = `/**
   .breadcrumbs-contained {
     padding: 0.75rem 1rem;
     background-color: var(--color-surface-container);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   /* No Wrap Variant */
@@ -406,8 +406,8 @@ export const css = `/**
   }
 
   .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,
@@ -424,13 +424,13 @@ export const css = `/**
   /* 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;
   }
@@ -450,7 +450,7 @@ export const css = `/**
   .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;
   }
 
@@ -490,7 +490,7 @@ export const css = `/**
     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;
@@ -557,7 +557,7 @@ export const css = `/**
     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;
@@ -599,8 +599,8 @@ export const css = `/**
   .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,
@@ -658,7 +658,7 @@ export const css = `/**
     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 {
@@ -712,12 +712,12 @@ export const css = `/**
 
   .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/esm/components/nested-menu.js

@@ -62,8 +62,8 @@ export const css = `/**
 
   .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 */
@@ -127,8 +127,8 @@ export const css = `/**
   }
 
   .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 */
@@ -224,7 +224,7 @@ export const css = `/**
     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/esm/components/otp-input.js

@@ -23,7 +23,7 @@ export const css = `/**
     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);
@@ -62,7 +62,7 @@ export const css = `/**
     width: 1rem;
     height: 0.25rem;
     background-color: var(--color-outline);
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
   }
 
   /* Size Variants */
@@ -70,14 +70,14 @@ export const css = `/**
     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 */
@@ -95,7 +95,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;
   }
 
   .otp-input-filled .otp-input-field:focus {

package/dist/esm/components/pin-input.js

@@ -23,7 +23,7 @@ export const css = `/**
     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);
@@ -59,14 +59,14 @@ export const css = `/**
     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 */
@@ -79,7 +79,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;
   }
 
   .pin-input-filled .pin-input-field:focus {
@@ -91,7 +91,7 @@ export const css = `/**
   .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 {

package/dist/esm/components/popover.js

@@ -20,7 +20,7 @@ export const css = `/**
     padding: 1rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     opacity: 0;
     visibility: hidden;
@@ -55,7 +55,7 @@ export const css = `/**
     padding: 1rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     opacity: 0;
     visibility: hidden;
@@ -221,7 +221,7 @@ export const css = `/**
     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;
   }
@@ -231,8 +231,8 @@ export const css = `/**
   }
 
   .popover-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);
   }
 
   /* Popover Body */
@@ -454,7 +454,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     text-align: left;
     transition: background-color 150ms ease-in-out;
@@ -465,8 +465,8 @@ export const css = `/**
   }
 
   .popover-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);
   }
 
   .popover-menu-item-icon {
@@ -509,7 +509,7 @@ export const css = `/**
     margin: 0;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     opacity: 0;
     transform: scale(0.95);
@@ -533,33 +533,33 @@ export const css = `/**
 
   /* Native popover backdrop */
   .popover[popover]::backdrop {
-    background-color: rgb(0 0 0 / 0);
+    background-color: transparent;
     transition: background-color 150ms ease-out, overlay 150ms ease-out allow-discrete, display 150ms ease-out allow-discrete;
   }
 
   .popover[popover]:popover-open::backdrop {
-    background-color: rgb(0 0 0 / 0.1);
+    background-color: color-mix(in srgb, var(--color-scrim) 10%, transparent);
   }
 
   @starting-style {
     .popover[popover]:popover-open::backdrop {
-      background-color: rgb(0 0 0 / 0);
+      background-color: transparent;
     }
   }
 
   /* Native popover with modal backdrop */
   .popover-modal[popover]::backdrop {
-    background-color: rgb(0 0 0 / 0);
+    background-color: transparent;
     transition: background-color 150ms ease-out, overlay 150ms ease-out allow-discrete, display 150ms ease-out allow-discrete;
   }
 
   .popover-modal[popover]:popover-open::backdrop {
-    background-color: rgb(0 0 0 / 0.3);
+    background-color: color-mix(in srgb, var(--color-scrim) 30%, transparent);
   }
 
   @starting-style {
     .popover-modal[popover]:popover-open::backdrop {
-      background-color: rgb(0 0 0 / 0);
+      background-color: transparent;
     }
   }
 

package/dist/esm/components/progress.js

@@ -11,7 +11,7 @@ export const css = `/**
     width: 100%;
     height: 0.5rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     overflow: hidden;
   }
 
@@ -22,7 +22,7 @@ export const css = `/**
     left: 0;
     height: 100%;
     background-color: var(--color-primary);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: width 300ms ease-in-out;
   }
 

package/dist/esm/components/radio.js

@@ -25,7 +25,7 @@ export const css = `/**
     appearance: none;
     background-color: transparent;
     border: 2px solid var(--radio-border-color);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transition: border-color 150ms ease-in-out;
   }
 
@@ -34,7 +34,7 @@ export const css = `/**
     content: "";
     width: 0.5em;
     height: 0.5em;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     background-color: var(--radio-color);
     transform: scale(0);
     transition: transform 150ms ease-in-out;

package/dist/esm/components/rating.js

@@ -184,7 +184,7 @@ export const css = `/**
   .rating-item:focus-visible {
     outline: none;
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 20%, transparent);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .rating-primary .rating-item:focus-visible   { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary)   20%, transparent); }

package/dist/esm/components/segment-control.js

@@ -12,7 +12,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: 1px solid var(--color-outline);
-    border-radius: 1.25rem;
+    border-radius: var(--radius-xl);
     padding: 0.25rem;
     gap: 0.25rem;
   }
@@ -31,7 +31,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
     user-select: none;
@@ -75,27 +75,27 @@ export const css = `/**
   .segment-control-sm {
     padding: 0.125rem;
     gap: 0.125rem;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
   }
 
   .segment-control-sm .segment-item {
     padding: 0.375rem 0.75rem;
     font-size: 0.75rem;
     line-height: 1rem;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
   }
 
   .segment-control-lg {
     padding: 0.375rem;
     gap: 0.375rem;
-    border-radius: 1.5rem;
+    border-radius: var(--radius-2xl);
   }
 
   .segment-control-lg .segment-item {
     padding: 0.75rem 1.5rem;
     font-size: 1rem;
     line-height: 1.5rem;
-    border-radius: 1.25rem;
+    border-radius: var(--radius-xl);
   }
 
   /* Color Variants */

package/dist/esm/components/select.js

@@ -15,7 +15,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);
     outline: none;
     cursor: pointer;
     appearance: none;
@@ -49,7 +49,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;
   }
 
   .select-filled:hover:not(:disabled) {
@@ -74,7 +74,7 @@ export const css = `/**
   .select-outlined {
     background-color: transparent;
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Color Variants — base .select:focus-visible uses currentColor 20%, so no per-variant
@@ -94,7 +94,7 @@ export const css = `/**
     padding: 0.375rem 2rem 0.375rem 0.625rem;
     font-size: 0.75rem;
     line-height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     background-size: 1rem 1rem;
   }
 
@@ -102,7 +102,7 @@ export const css = `/**
     padding: 0.5rem 2.25rem 0.5rem 0.75rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     background-size: 1.125rem 1.125rem;
   }
 
@@ -110,7 +110,7 @@ export const css = `/**
     padding: 1rem 3rem 1rem 1.25rem;
     font-size: 1.125rem;
     line-height: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
     background-size: 1.5rem 1.5rem;
     background-position: right 1rem center;
   }
@@ -156,7 +156,7 @@ export const css = `/**
 
   .select-multiple option {
     padding: 0.5rem 0.75rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .select-multiple option:checked {

package/dist/esm/components/skeleton.js

@@ -8,7 +8,7 @@ export const css = `/**
   /* Base Skeleton */
   .skeleton {
     background-color: var(--color-surface-container-high);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     animation: skeleton-pulse 2s ease-in-out infinite;
   }
 
@@ -16,20 +16,20 @@ export const css = `/**
   .skeleton-text {
     height: 1rem;
     width: 100%;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .skeleton-circle {
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     aspect-ratio: 1;
   }
 
   .skeleton-rect {
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .skeleton-rounded {
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Size Variants */
@@ -57,7 +57,7 @@ export const css = `/**
   .skeleton-avatar {
     width: 3rem;
     height: 3rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
 
   .skeleton-avatar-sm {
@@ -73,18 +73,18 @@ export const css = `/**
   .skeleton-button {
     height: 2.5rem;
     width: 6rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .skeleton-image {
     aspect-ratio: 16 / 9;
     width: 100%;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .skeleton-card {
     width: 100%;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     padding: 1rem;
   }
 
@@ -93,7 +93,7 @@ export const css = `/**
     height: 0.875rem;
     width: 100%;
     margin-bottom: 0.5rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .skeleton-line:last-child {
@@ -187,7 +187,7 @@ export const css = `/**
   .skeleton-table-cell {
     flex: 1;
     height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   /* List Skeleton */