@duskmoon-dev/core 1.15.0 → 1.16.0

package/dist/components/time-input.css

@@ -21,7 +21,7 @@
     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;
   }
@@ -61,7 +61,7 @@
     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 {
@@ -73,7 +73,7 @@
     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;
   }
@@ -94,7 +94,7 @@
     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;
   }
 
@@ -105,7 +105,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, color 150ms ease-in-out;
   }
@@ -123,7 +123,7 @@
   .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 {
@@ -134,7 +134,7 @@
   .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 {
@@ -148,7 +148,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;
   }
 
   .time-input-filled .time-input-field:focus,
@@ -246,7 +246,7 @@
     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);
   }
 
@@ -275,7 +275,7 @@
     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/components/timeline.css

@@ -45,7 +45,7 @@
     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;
   }
@@ -59,7 +59,7 @@
     width: 0.75rem;
     height: 0.75rem;
     background-color: var(--color-outline-variant);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
 
   /* Timeline Content */
@@ -92,7 +92,7 @@
   .timeline-card {
     padding: 1rem;
     background-color: var(--color-surface-container);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     margin-top: 0.5rem;
   }
 
@@ -147,7 +147,7 @@
   }
 
   .timeline-item.completed .timeline-marker-icon {
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   /* Active State */
@@ -159,8 +159,8 @@
 
   .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/components/toast.css

@@ -65,7 +65,7 @@
     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;
@@ -135,7 +135,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, color 150ms ease-in-out;
     flex-shrink: 0;
@@ -293,7 +293,7 @@
     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/components/toggle.css

@@ -18,7 +18,7 @@
     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;
@@ -149,7 +149,7 @@
     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);
   }
@@ -157,7 +157,7 @@
   /* Toggle buttons in group */
   .toggle-group .toggle-btn {
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     margin: 0;
   }
 
@@ -208,14 +208,14 @@
     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,
@@ -227,7 +227,7 @@
 
   /* Chip-like toggle */
   .toggle-chip {
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     padding: 0.5rem 1rem;
   }
 
@@ -272,7 +272,7 @@
     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);
   }
 
@@ -306,7 +306,7 @@
     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/components/tooltip.css

@@ -21,7 +21,7 @@
     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;

package/dist/components/tree-select.css

@@ -24,7 +24,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;
   }
@@ -105,7 +105,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;
@@ -133,7 +133,7 @@
     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);
     overflow-y: auto;
   }
@@ -185,7 +185,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;
   }
 
@@ -208,7 +208,7 @@
     font-size: 0.875rem;
     color: var(--color-on-surface);
     background-color: transparent;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -242,7 +242,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     flex-shrink: 0;
     transition: transform 150ms ease-in-out;
@@ -314,7 +314,7 @@
     height: 1rem;
     background-color: transparent;
     border: 2px solid var(--color-on-surface-variant);
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
     transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
   }
 
@@ -328,7 +328,7 @@
     display: block;
     width: 0.375rem;
     height: 0.625rem;
-    border: 2px solid var(--color-on-primary);
+    border: 2px solid var(--color-primary-content);
     border-width: 0 2px 2px 0;
     transform: rotate(45deg) translateY(-1px);
   }
@@ -345,13 +345,13 @@
   .tree-select-sm .tree-select-trigger {
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .tree-select-lg .tree-select-trigger {
     padding: 1rem 1.25rem;
     font-size: 1.125rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Outlined Variant (Default) */
@@ -365,7 +365,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;
   }
 
   .tree-select-filled .tree-select-trigger:focus {
@@ -458,7 +458,7 @@
     height: 1rem;
     border: 2px solid var(--color-outline);
     border-top-color: var(--color-primary);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: tree-select-spin 0.8s linear infinite;
   }
 
@@ -482,7 +482,7 @@
     font-size: 0.75rem;
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
   }
 
   .tree-select-tag-remove {
@@ -495,7 +495,7 @@
     color: inherit;
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     opacity: 0.7;
   }

package/dist/esm/components/accordion.js

@@ -9,7 +9,7 @@ export const css = `/**
   .accordion {
     display: flex;
     flex-direction: column;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     overflow: hidden;
   }
 
@@ -22,13 +22,13 @@ export const css = `/**
 
   .accordion-item:first-child {
     margin-top: 0;
-    border-top-left-radius: 0.75rem;
-    border-top-right-radius: 0.75rem;
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
   }
 
   .accordion-item:last-child {
-    border-bottom-left-radius: 0.75rem;
-    border-bottom-right-radius: 0.75rem;
+    border-bottom-left-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
   }
 
   /* Accordion Header */
@@ -54,7 +54,7 @@ export const css = `/**
   .accordion-header:focus-visible {
     outline: none;
     background-color: var(--color-surface-container);
-    box-shadow: inset 0 0 0 2px var(--color-primary);
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .accordion-item.open .accordion-header {
@@ -139,7 +139,7 @@ export const css = `/**
   /* Separated Variant */
   .accordion-separated .accordion-item {
     margin-top: 0.5rem;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
   }
 
   .accordion-separated .accordion-item:first-child {

package/dist/esm/components/alert.js

@@ -11,7 +11,7 @@ export const css = `/**
     align-items: flex-start;
     gap: 0.75rem;
     padding: 1rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
     border: 1px solid var(--color-outline);
@@ -61,7 +61,7 @@ export const css = `/**
     opacity: 0.7;
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: opacity 150ms ease-in-out;
     flex-shrink: 0;

package/dist/esm/components/appbar.js

@@ -92,7 +92,7 @@ export const css = `/**
     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;
     flex-shrink: 0;
@@ -155,7 +155,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;
   }
@@ -271,7 +271,7 @@ export const css = `/**
     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;
     flex-shrink: 0;
@@ -296,7 +296,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: none;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: background-color 150ms ease-in-out;
   }
 
@@ -554,7 +554,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: none;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: background-color 150ms ease-in-out;
   }
 

package/dist/esm/components/autocomplete.js

@@ -21,7 +21,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);
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
 
@@ -48,7 +48,7 @@ export const css = `/**
     margin-top: 0.25rem;
     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);
     overflow-y: auto;
     opacity: 0;
@@ -130,7 +130,7 @@ export const css = `/**
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
     font-weight: 600;
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
   }
 
   /* Group Header */
@@ -176,7 +176,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;
   }
@@ -201,7 +201,7 @@ export const css = `/**
     min-height: 2.75rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .autocomplete-tags:focus-within {
@@ -217,7 +217,7 @@ export const css = `/**
     font-size: 0.75rem;
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .autocomplete-tag-remove {
@@ -230,7 +230,7 @@ export const css = `/**
     background-color: transparent;
     border: none;
     cursor: pointer;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transition: background-color 150ms ease-in-out;
   }
 

package/dist/esm/components/avatar.js

@@ -13,7 +13,7 @@ export const css = `/**
     position: relative;
     width: 3rem;
     height: 3rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     overflow: hidden;
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
@@ -71,7 +71,7 @@ export const css = `/**
 
   /* Shape Variants */
   .avatar-rounded {
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .avatar-square {
@@ -116,8 +116,8 @@ export const css = `/**
 
   /* Ring */
   .avatar-ring {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .avatar-ring-primary {
@@ -143,7 +143,7 @@ export const css = `/**
     height: 25%;
     min-width: 0.5rem;
     min-height: 0.5rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     border: 2px solid var(--color-surface);
   }
 

package/dist/esm/components/badge.js

@@ -15,7 +15,7 @@ export const css = `/**
     font-weight: 500;
     line-height: 1rem;
     white-space: nowrap;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
   }
@@ -165,7 +165,7 @@ export const css = `/**
     transform: translateY(-50%);
     width: 0.375rem;
     height: 0.375rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     background-color: currentColor;
   }
 
@@ -174,7 +174,7 @@ export const css = `/**
     width: 0.5rem;
     height: 0.5rem;
     padding: 0;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
 }
 `;

package/dist/esm/components/bottom-navigation.js

@@ -18,7 +18,7 @@ export const css = `/**
     min-height: 5rem;
     padding-bottom: env(safe-area-inset-bottom, 0);
     background-color: var(--color-surface);
-    box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 0.1);
+    box-shadow: 0 -1px 3px 0 color-mix(in srgb, var(--color-shadow) 10%, transparent);
   }
 
   /* Navigation Item */
@@ -49,8 +49,8 @@ export const css = `/**
   }
 
   .bottom-nav-item:focus-visible .bottom-nav-indicator {
-    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 */
@@ -66,7 +66,7 @@ export const css = `/**
     justify-content: center;
     width: 4rem;
     height: 2rem;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     transition: background-color 150ms ease-in-out;
   }
 
@@ -112,9 +112,9 @@ export const css = `/**
     font-size: 0.625rem;
     font-weight: 600;
     line-height: 1rem;
-    color: var(--color-on-error);
+    color: var(--color-error-content);
     background-color: var(--color-error);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     text-align: center;
   }
 
@@ -129,7 +129,7 @@ export const css = `/**
 
   /* Variants */
   .bottom-nav-elevated {
-    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1);
+    box-shadow: 0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent);
   }
 
   .bottom-nav-bordered {