@duskmoon-dev/core 1.15.0 → 1.16.0

package/dist/components/popover.css

@@ -19,7 +19,7 @@
     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;
@@ -54,7 +54,7 @@
     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;
@@ -220,7 +220,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;
   }
@@ -230,8 +230,8 @@
   }
 
   .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 */
@@ -453,7 +453,7 @@
     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;
@@ -464,8 +464,8 @@
   }
 
   .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 {
@@ -508,7 +508,7 @@
     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);
@@ -532,33 +532,33 @@
 
   /* 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/components/progress.css

@@ -10,7 +10,7 @@
     width: 100%;
     height: 0.5rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     overflow: hidden;
   }
 
@@ -21,7 +21,7 @@
     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/components/radio.css

@@ -24,7 +24,7 @@
     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;
   }
 
@@ -33,7 +33,7 @@
     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/components/rating.css

@@ -183,7 +183,7 @@
   .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/components/segment-control.css

@@ -11,7 +11,7 @@
     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;
   }
@@ -30,7 +30,7 @@
     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;
@@ -74,27 +74,27 @@
   .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/components/select.css

@@ -14,7 +14,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;
     cursor: pointer;
     appearance: none;
@@ -48,7 +48,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;
   }
 
   .select-filled:hover:not(:disabled) {
@@ -73,7 +73,7 @@
   .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
@@ -93,7 +93,7 @@
     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;
   }
 
@@ -101,7 +101,7 @@
     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;
   }
 
@@ -109,7 +109,7 @@
     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;
   }
@@ -155,7 +155,7 @@
 
   .select-multiple option {
     padding: 0.5rem 0.75rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .select-multiple option:checked {

package/dist/components/skeleton.css

@@ -7,7 +7,7 @@
   /* 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;
   }
 
@@ -15,20 +15,20 @@
   .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 */
@@ -56,7 +56,7 @@
   .skeleton-avatar {
     width: 3rem;
     height: 3rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
 
   .skeleton-avatar-sm {
@@ -72,18 +72,18 @@
   .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;
   }
 
@@ -92,7 +92,7 @@
     height: 0.875rem;
     width: 100%;
     margin-bottom: 0.5rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .skeleton-line:last-child {
@@ -186,7 +186,7 @@
   .skeleton-table-cell {
     flex: 1;
     height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   /* List Skeleton */

package/dist/components/slider.css

@@ -22,7 +22,7 @@
     width: 100%;
     height: 0.25rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 
   /* Slider Track Filled (Progress) */
@@ -32,7 +32,7 @@
     left: 0;
     height: 100%;
     background-color: var(--color-primary);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 
   /* Slider Thumb */
@@ -43,20 +43,20 @@
     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 {
@@ -76,7 +76,7 @@
     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;
@@ -124,7 +124,7 @@
     width: 0.125rem;
     height: 0.5rem;
     background-color: var(--color-outline);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 
   .slider-mark-active {
@@ -188,7 +188,7 @@
 
   .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 {
@@ -207,7 +207,7 @@
 
   .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); }
@@ -228,7 +228,7 @@
 
   .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); }
@@ -250,7 +250,7 @@
 
   .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); }
@@ -272,7 +272,7 @@
 
   .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); }
@@ -294,7 +294,7 @@
 
   .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); }
@@ -316,7 +316,7 @@
 
   .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); }
@@ -432,7 +432,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);
   }
 
   .slider-input:focus {

package/dist/components/snackbar.css

@@ -64,7 +64,7 @@
     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;
@@ -171,7 +171,7 @@
     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;
@@ -183,8 +183,8 @@
   }
 
   .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 */
@@ -198,7 +198,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;
     flex-shrink: 0;

package/dist/components/stepper.css

@@ -56,8 +56,8 @@
   }
 
   .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) */
@@ -72,26 +72,26 @@
     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 {
@@ -180,7 +180,7 @@
   .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 {
@@ -195,7 +195,7 @@
   .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 {
@@ -262,7 +262,7 @@
 
   .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/components/switch.css

@@ -46,7 +46,7 @@
     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/components/table.css

@@ -73,7 +73,7 @@
   /* Bordered Table */
   .table-bordered {
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     overflow: hidden;
   }
 
@@ -193,7 +193,7 @@
   /* 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/components/textarea.css

@@ -93,7 +93,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;
     resize: vertical;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
@@ -142,7 +142,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;
   }
 
   .textarea-filled:hover:not(:disabled) {
@@ -167,7 +167,7 @@
   .textarea-outlined {
     background-color: transparent;
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Ghost Variant */
@@ -215,7 +215,7 @@
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .textarea-lg {
@@ -223,7 +223,7 @@
     padding: 1rem 1.25rem;
     font-size: 1.125rem;
     line-height: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* ============================================

package/dist/components/theme-controller.css

@@ -54,8 +54,8 @@
 
   /* 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 */
@@ -161,8 +161,8 @@
   }
 
   .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 */