@duskmoon-dev/core 1.14.2 → 1.16.0

package/dist/esm/components/slider.js

@@ -23,7 +23,7 @@ export const css = `/**
     width: 100%;
     height: 0.25rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 
   /* Slider Track Filled (Progress) */
@@ -33,7 +33,7 @@ export const css = `/**
     left: 0;
     height: 100%;
     background-color: var(--color-primary);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 
   /* Slider Thumb */
@@ -44,20 +44,20 @@ export const css = `/**
     height: 1.25rem;
     background-color: var(--color-primary);
     border: none;
-    border-radius: 50%;
-    box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
+    border-radius: var(--radius-full);
+    box-shadow: 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
     transform: translate(-50%, -50%);
     cursor: grab;
     transition: box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
   }
 
   .slider-thumb:hover {
-    box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-thumb:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-thumb:active {
@@ -77,7 +77,7 @@ export const css = `/**
     font-weight: 500;
     color: var(--color-primary-content);
     background-color: var(--color-primary);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     white-space: nowrap;
     opacity: 0;
     visibility: hidden;
@@ -125,7 +125,7 @@ export const css = `/**
     width: 0.125rem;
     height: 0.5rem;
     background-color: var(--color-outline);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 
   .slider-mark-active {
@@ -189,7 +189,7 @@ export const css = `/**
 
   .slider-primary .slider-thumb:hover,
   .slider-primary .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-primary .slider-thumb-label {
@@ -208,7 +208,7 @@ export const css = `/**
 
   .slider-secondary .slider-thumb:hover,
   .slider-secondary .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-secondary-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-secondary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-secondary .slider-mark-active { background-color: var(--color-secondary-content); }
@@ -229,7 +229,7 @@ export const css = `/**
 
   .slider-tertiary .slider-thumb:hover,
   .slider-tertiary .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-tertiary-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-tertiary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-tertiary .slider-mark-active { background-color: var(--color-tertiary-content); }
@@ -251,7 +251,7 @@ export const css = `/**
 
   .slider-info .slider-thumb:hover,
   .slider-info .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-info-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-info-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-info .slider-mark-active { background-color: var(--color-info-content); }
@@ -273,7 +273,7 @@ export const css = `/**
 
   .slider-success .slider-thumb:hover,
   .slider-success .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-success-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-success-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-success .slider-mark-active { background-color: var(--color-success-content); }
@@ -295,7 +295,7 @@ export const css = `/**
 
   .slider-warning .slider-thumb:hover,
   .slider-warning .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-warning-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-warning-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-warning .slider-mark-active { background-color: var(--color-warning-content); }
@@ -317,7 +317,7 @@ export const css = `/**
 
   .slider-error .slider-thumb:hover,
   .slider-error .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-error-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-error-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-error .slider-mark-active { background-color: var(--color-error-content); }
@@ -433,7 +433,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);
   }
 
   .slider-input:focus {

package/dist/esm/components/snackbar.js

@@ -65,7 +65,7 @@ export const css = `/**
     padding: 0.875rem 1rem;
     background-color: var(--color-surface-container-highest);
     color: var(--color-on-surface);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     box-shadow: var(--shadow-md);
     pointer-events: auto;
     opacity: 0;
@@ -172,7 +172,7 @@ export const css = `/**
     color: var(--color-primary);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
     white-space: nowrap;
@@ -184,8 +184,8 @@ export const css = `/**
   }
 
   .snackbar-action: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);
   }
 
   /* Snackbar Close */
@@ -199,7 +199,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;
     flex-shrink: 0;

package/dist/esm/components/stepper.js

@@ -57,8 +57,8 @@ export const css = `/**
   }
 
   .stepper-step-button:focus-visible .stepper-step-icon {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Step Icon (Number/Icon Circle) */
@@ -73,26 +73,26 @@ export const css = `/**
     color: var(--color-on-surface-variant);
     background-color: var(--color-surface);
     border: 2px solid var(--color-outline-variant);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out;
   }
 
   .stepper-step-active .stepper-step-icon {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   .stepper-step-completed .stepper-step-icon {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   .stepper-step-error .stepper-step-icon {
     background-color: var(--color-error);
     border-color: var(--color-error);
-    color: var(--color-on-error);
+    color: var(--color-error-content);
   }
 
   .stepper-step-disabled .stepper-step-icon {
@@ -181,7 +181,7 @@ export const css = `/**
   .stepper-secondary .stepper-step-completed .stepper-step-icon {
     background-color: var(--color-secondary);
     border-color: var(--color-secondary);
-    color: var(--color-on-secondary);
+    color: var(--color-secondary-content);
   }
 
   .stepper-secondary .stepper-step-completed .stepper-step-connector {
@@ -196,7 +196,7 @@ export const css = `/**
   .stepper-tertiary .stepper-step-completed .stepper-step-icon {
     background-color: var(--color-tertiary);
     border-color: var(--color-tertiary);
-    color: var(--color-on-tertiary);
+    color: var(--color-tertiary-content);
   }
 
   .stepper-tertiary .stepper-step-completed .stepper-step-connector {
@@ -263,7 +263,7 @@ export const css = `/**
 
   .stepper-dots .stepper-step-active .stepper-step-icon {
     width: 1.5rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     background-color: var(--color-primary);
   }
 

package/dist/esm/components/switch.js

@@ -47,7 +47,7 @@ export const css = `/**
     width: var(--switch-thumb-size);
     height: var(--switch-thumb-size);
     background-color: var(--switch-thumb-color);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     /* Use !important to override global * { transition } rules */
     transition: background-color 200ms ease-in-out !important,
       width 200ms ease-in-out !important,

package/dist/esm/components/table.js

@@ -74,7 +74,7 @@ export const css = `/**
   /* Bordered Table */
   .table-bordered {
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     overflow: hidden;
   }
 
@@ -194,8 +194,8 @@ export const css = `/**
   /* Focus State for Interactive Tables */
   .table tr:focus-visible,
   .table-row: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);
   }
 }
 `;

package/dist/esm/components/textarea.js

@@ -94,7 +94,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;
     resize: vertical;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
@@ -143,7 +143,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;
   }
 
   .textarea-filled:hover:not(:disabled) {
@@ -168,7 +168,7 @@ export const css = `/**
   .textarea-outlined {
     background-color: transparent;
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Ghost Variant */
@@ -216,7 +216,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);
   }
 
   .textarea-lg {
@@ -224,7 +224,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);
   }
 
   /* ============================================

package/dist/esm/components/theme-controller.js

@@ -55,8 +55,8 @@ export const css = `/**
 
   /* Focus-visible ring on the label when its radio is focused */
   .theme-controller-item:focus-visible + .theme-controller-label {
-    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/checked state */
@@ -162,8 +162,8 @@ export const css = `/**
   }
 
   .theme-controller-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);
   }
 
   /* Chevron indicator */

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

@@ -22,7 +22,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;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
@@ -62,7 +62,7 @@ export const css = `/**
     padding: 0.75rem 1rem;
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .time-input-segment {
@@ -74,7 +74,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     outline: none;
     transition: background-color 150ms ease-in-out;
   }
@@ -95,7 +95,7 @@ export const css = `/**
     display: inline-flex;
     margin-left: 0.5rem;
     background-color: var(--color-surface-container);
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     padding: 0.125rem;
   }
 
@@ -106,7 +106,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, color 150ms ease-in-out;
   }
@@ -124,7 +124,7 @@ export const css = `/**
   .time-input-sm .time-input-field {
     padding: 0.5rem 2rem 0.5rem 0.75rem;
     font-size: 0.875rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .time-input-sm .time-input-segment {
@@ -135,7 +135,7 @@ export const css = `/**
   .time-input-lg .time-input-field {
     padding: 1rem 3rem 1rem 1.25rem;
     font-size: 1.125rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   .time-input-lg .time-input-segment {
@@ -149,7 +149,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;
   }
 
   .time-input-filled .time-input-field:focus,
@@ -247,7 +247,7 @@ export const css = `/**
     padding: 0.5rem;
     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);
   }
 
@@ -276,7 +276,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }

package/dist/esm/components/timeline.js

@@ -46,7 +46,7 @@ export const css = `/**
     height: 2.5rem;
     background-color: var(--color-surface);
     border: 2px solid var(--color-outline-variant);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     flex-shrink: 0;
     z-index: 1;
   }
@@ -60,7 +60,7 @@ export const css = `/**
     width: 0.75rem;
     height: 0.75rem;
     background-color: var(--color-outline-variant);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
 
   /* Timeline Content */
@@ -93,7 +93,7 @@ export const css = `/**
   .timeline-card {
     padding: 1rem;
     background-color: var(--color-surface-container);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     margin-top: 0.5rem;
   }
 
@@ -148,7 +148,7 @@ export const css = `/**
   }
 
   .timeline-item.completed .timeline-marker-icon {
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   /* Active State */
@@ -160,8 +160,8 @@ export const css = `/**
 
   .timeline-item.active .timeline-marker-icon,
   .timeline-item.active .timeline-marker-dot {
-    color: var(--color-on-primary);
-    background-color: var(--color-on-primary);
+    color: var(--color-primary-content);
+    background-color: var(--color-primary-content);
   }
 
   /* Size Variants */

package/dist/esm/components/toast.js

@@ -66,7 +66,7 @@ export const css = `/**
     background-color: var(--color-surface);
     color: var(--color-on-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     pointer-events: auto;
     opacity: 0;
@@ -136,7 +136,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, color 150ms ease-in-out;
     flex-shrink: 0;
@@ -294,7 +294,7 @@ export const css = `/**
     left: 0;
     height: 3px;
     background-color: currentColor;
-    border-radius: 0 0 0.75rem 0.75rem;
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
     animation: toast-progress linear forwards;
   }
 

package/dist/esm/components/toggle.js

@@ -19,7 +19,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: transparent;
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     user-select: none;
@@ -150,7 +150,7 @@ export const css = `/**
     align-items: center;
     gap: 0;
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     padding: 0.25rem;
     background-color: color-mix(in oklch, var(--color-surface-variant) 30%, transparent);
   }
@@ -158,7 +158,7 @@ export const css = `/**
   /* Toggle buttons in group */
   .toggle-group .toggle-btn {
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     margin: 0;
   }
 
@@ -209,14 +209,14 @@ export const css = `/**
     gap: 0;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     padding: 0.25rem;
   }
 
   .toggle-segmented .toggle-btn {
     border: none;
     background-color: transparent;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .toggle-segmented .toggle-btn.toggle-btn-active,
@@ -228,7 +228,7 @@ export const css = `/**
 
   /* Chip-like toggle */
   .toggle-chip {
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     padding: 0.5rem 1rem;
   }
 
@@ -273,7 +273,7 @@ export const css = `/**
     width: 0.5rem;
     height: 0.5rem;
     background-color: var(--color-error);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     border: 2px solid var(--color-surface);
   }
 
@@ -307,7 +307,7 @@ export const css = `/**
     margin-left: -0.5rem;
     border: 2px solid currentColor;
     border-top-color: transparent;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: toggle-spin 0.6s linear infinite;
   }
 

package/dist/esm/components/tooltip.js

@@ -22,7 +22,7 @@ export const css = `/**
     white-space: nowrap;
     background-color: var(--color-on-surface);
     color: var(--color-surface);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     box-shadow: var(--shadow-md);
     opacity: 0;
     visibility: hidden;