@helpwave/hightide 0.6.16 → 0.8.0

package/dist/style/globals.css

@@ -147,6 +147,18 @@
     --color-focus: var(--color-primary);
     --color-outline-variant: var(--color-gray-200);
     --font-space: 'Space Grotesk', sans-serif;
+    --spacing-element-xs: calc(7 * var(--spacing));
+    --spacing-element-sm: calc(9 * var(--spacing));
+    --spacing-element-md: calc(11 * var(--spacing));
+    --spacing-element-lg: calc(13 * var(--spacing));
+    --spacing-element-padding-xs: calc((var(--spacing-element-xs) - 4 * var(--spacing)) / 2);
+    --spacing-element-padding-sm: calc((var(--spacing-element-sm) - 6 * var(--spacing)) / 2);
+    --spacing-element-padding-md: calc((var(--spacing-element-md) - 6 * var(--spacing)) / 2);
+    --spacing-element-padding-lg: calc((var(--spacing-element-lg) - 8 * var(--spacing)) / 2);
+    --spacing-element-padding-direction-xs: calc(var(--spacing-element-padding-xs) * 1.5);
+    --spacing-element-padding-direction-sm: calc(var(--spacing-element-padding-sm) * 2);
+    --spacing-element-padding-direction-md: calc(var(--spacing-element-padding-md) * 2);
+    --spacing-element-padding-direction-lg: calc(var(--spacing-element-padding-lg) * 3);
   }
 }
 @layer base {
@@ -331,9 +343,6 @@
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
-  .top-full {
-    top: 100%;
-  }
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
@@ -343,21 +352,18 @@
   .right-1 {
     right: calc(var(--spacing) * 1);
   }
+  .right-1\.5 {
+    right: calc(var(--spacing) * 1.5);
+  }
   .right-1\/2 {
     right: calc(1/2 * 100%);
   }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
-  .right-full {
-    right: 100%;
-  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
-  .bottom-full {
-    bottom: 100%;
-  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -373,9 +379,6 @@
   .left-\[50\%\] {
     left: 50%;
   }
-  .left-full {
-    left: 100%;
-  }
   .z-1 {
     z-index: 1;
   }
@@ -385,15 +388,6 @@
   .z-\[1\] {
     z-index: 1;
   }
-  .z-\[6\] {
-    z-index: 6;
-  }
-  .z-\[8\] {
-    z-index: 8;
-  }
-  .z-\[10\] {
-    z-index: 10;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -439,30 +433,21 @@
   .mt-12 {
     margin-top: calc(var(--spacing) * 12);
   }
-  .mt-\[6px\] {
-    margin-top: 6px;
-  }
   .mr-8 {
     margin-right: calc(var(--spacing) * 8);
   }
-  .mr-\[6px\] {
-    margin-right: 6px;
+  .mr-10 {
+    margin-right: calc(var(--spacing) * 10);
   }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
-  .mb-\[6px\] {
-    margin-bottom: 6px;
-  }
   .-ml-1 {
     margin-left: calc(var(--spacing) * -1);
   }
   .ml-0\.5 {
     margin-left: calc(var(--spacing) * 0.5);
   }
-  .ml-\[6px\] {
-    margin-left: 6px;
-  }
   .flex-row-0 {
     display: flex;
     flex-direction: row;
@@ -543,9 +528,6 @@
   .inline {
     display: inline;
   }
-  .inline-block {
-    display: inline-block;
-  }
   .table {
     display: table;
   }
@@ -573,18 +555,18 @@
     min-width: calc(var(--spacing) * 6);
     max-width: calc(var(--spacing) * 6);
   }
-  .expandable-content-h-39 {
-    height: calc(var(--spacing) * 39);
-    &[data-expanded] {
-      max-height: calc(var(--spacing) * 39);
-    }
-  }
   .expandable-content-h-40 {
     height: calc(var(--spacing) * 40);
     &[data-expanded] {
       max-height: calc(var(--spacing) * 40);
     }
   }
+  .expandable-content-h-43 {
+    height: calc(var(--spacing) * 43);
+    &[data-expanded] {
+      max-height: calc(var(--spacing) * 43);
+    }
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -593,12 +575,18 @@
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
   .size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
-  .h-0 {
-    height: calc(var(--spacing) * 0);
+  .element {
+    padding: var(--element-padding, var(--spacing-element-padding-md)) var(--element-padding-direction, var(--spacing-element-padding-direction-md));
+    border-radius: var(--element-border-radius, 0.375rem);
+    height: var(--element-height, var(--spacing-element-md));
   }
   .h-2 {
     height: calc(var(--spacing) * 2);
@@ -693,9 +681,6 @@
   .min-h-\[400px\] {
     min-height: 400px;
   }
-  .w-0 {
-    width: calc(var(--spacing) * 0);
-  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -717,8 +702,8 @@
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
-  .w-64 {
-    width: calc(var(--spacing) * 64);
+  .w-80 {
+    width: calc(var(--spacing) * 80);
   }
   .w-96 {
     width: calc(var(--spacing) * 96);
@@ -774,6 +759,9 @@
   .min-w-8 {
     min-width: calc(var(--spacing) * 8);
   }
+  .min-w-16 {
+    min-width: calc(var(--spacing) * 16);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -783,8 +771,8 @@
   .min-w-26 {
     min-width: calc(var(--spacing) * 26);
   }
-  .min-w-32 {
-    min-width: calc(var(--spacing) * 32);
+  .min-w-40 {
+    min-width: calc(var(--spacing) * 40);
   }
   .min-w-56 {
     min-width: calc(var(--spacing) * 56);
@@ -801,6 +789,9 @@
   .min-w-\[40px\] {
     min-width: 40px;
   }
+  .min-w-auto {
+    min-width: auto;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -839,28 +830,29 @@
     animation: var(--animate-pulse);
   }
   .animate-wave-big-left-up {
-    animation: bigLeftUp 1.7s ease-in infinite normal;
+    animation: bigLeftUp var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
   }
   .animate-wave-big-right-down {
-    animation: bigRightDown 1.7s ease-in infinite reverse;
+    animation: bigRightDown var(--helpwave-loading-duration, 1.7s) ease-in infinite reverse;
   }
   .animate-wave-small-left-up {
-    animation: smallLeftUp 1.7s ease-in infinite normal;
+    animation: smallLeftUp var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
   }
   .animate-wave-small-right-down {
-    animation: smallRightDown 1.7s ease-in infinite reverse;
+    animation: smallRightDown var(--helpwave-loading-duration, 1.7s) ease-in infinite reverse;
   }
   .input-element {
-    &:focus-visible {
-      border-style: var(--tw-border-style);
-      border-width: 2px;
-      border-color: var(--color-focus);
-    }
     border-style: var(--tw-border-style);
     border-width: 2px;
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
+    --focus-outline: none;
+    --focus-outline-offset: 0;
+    --focus-outline-transition: none;
+    --focus-box-shadow: none;
+    --focus-border-color: inherit;
+    --focus-border-color: var(--color-focus);
+    --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
     }
     &:not([data-disabled]):not([data-invalid]) {
       background-color: var(--color-input-background);
@@ -905,12 +897,6 @@
       }
     }
   }
-  .cursor-copy {
-    cursor: copy;
-  }
-  .cursor-default {
-    cursor: default;
-  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1019,13 +1005,6 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
-  .focus-style-border {
-    &:focus-visible {
-      border-style: var(--tw-border-style);
-      border-width: 2px;
-      border-color: var(--color-focus);
-    }
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1058,6 +1037,15 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .focusable {
+    transition: var(--focus-outline-transition);
+    &:focus-visible {
+      outline: var(--focus-outline);
+      outline-offset: var(--focus-outline-offset);
+      box-shadow: var(--focus-box-shadow);
+      border-color: var(--focus-border-color);
+    }
+  }
   .border-divider\/50 {
     border-color: color-mix(in srgb, #E6E6E6 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1073,30 +1061,6 @@
   .border-transparent {
     border-color: transparent;
   }
-  .border-t-tooltip-background {
-    border-top-color: var(--color-tooltip-background);
-  }
-  .border-t-transparent {
-    border-top-color: transparent;
-  }
-  .border-r-tooltip-background {
-    border-right-color: var(--color-tooltip-background);
-  }
-  .border-r-transparent {
-    border-right-color: transparent;
-  }
-  .border-b-tooltip-background {
-    border-bottom-color: var(--color-tooltip-background);
-  }
-  .border-b-transparent {
-    border-bottom-color: transparent;
-  }
-  .border-l-tooltip-background {
-    border-left-color: var(--color-tooltip-background);
-  }
-  .border-l-transparent {
-    border-left-color: transparent;
-  }
   .coloring-solid {
     background-color: var(--coloring-solid-color,var(--coloring-color));
     color: var(--coloring-solid-text,var(--coloring-on-color));
@@ -1119,9 +1083,6 @@
   .bg-input-background {
     background-color: var(--color-input-background);
   }
-  .bg-menu-background {
-    background-color: var(--color-menu-background);
-  }
   .bg-negative {
     background-color: var(--color-negative);
   }
@@ -1137,24 +1098,6 @@
       background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
     }
   }
-  .bg-primary\/40 {
-    background-color: color-mix(in srgb, #694BB4 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
-    }
-  }
-  .bg-primary\/60 {
-    background-color: color-mix(in srgb, #694BB4 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
-    }
-  }
-  .bg-primary\/90 {
-    background-color: color-mix(in srgb, #694BB4 90%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
-    }
-  }
   .bg-red-400 {
     background-color: var(--color-red-400);
   }
@@ -1182,12 +1125,6 @@
   .bg-text-image-secondary-text {
     background-color: var(--color-text-image-secondary-text);
   }
-  .bg-tooltip-background {
-    background-color: var(--color-tooltip-background);
-  }
-  .bg-transparent {
-    background-color: transparent;
-  }
   .bg-warning {
     background-color: var(--color-warning);
   }
@@ -1433,10 +1370,6 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
-  .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
-  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1451,9 +1384,6 @@
   .text-ellipsis {
     text-overflow: ellipsis;
   }
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
   .\!text-red-400 {
     color: var(--color-red-400) !important;
   }
@@ -1514,9 +1444,6 @@
   .text-text-image-secondary-text {
     color: var(--color-text-image-secondary-text);
   }
-  .text-tooltip-text {
-    color: var(--color-tooltip-text);
-  }
   .text-transparent {
     color: transparent;
   }
@@ -1538,15 +1465,13 @@
   .opacity-0 {
     opacity: 0%;
   }
-  .opacity-5 {
-    opacity: 5%;
-  }
-  .opacity-20 {
-    opacity: 20%;
-  }
   .opacity-80 {
     opacity: 80%;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1555,76 +1480,13 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-around-md {
-    --shadow-right: 5px 0 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
-    --shadow-left: -5px 0 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
-    --shadow-top: 0 -5px 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
-    --shadow-bottom: 0 5px 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
-    box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
-  }
   .shadow-side {
     box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
   }
-  .focus-style-default {
-    &:focus-visible:not(.focus-style-none) {
-      transition: outline-offset var(--animation-duration-in, 250ms);
-      outline-offset: 0;
-      &:focus-visible {
-        outline-style: var(--tw-outline-style);
-        outline-width: 2px;
-        outline-color: var(--color-focus);
-        --tw-outline-style: solid;
-        outline-style: solid;
-        outline-offset: calc(var(--spacing) * 0.25);
-      }
-    }
-  }
-  .focus-style-outline {
-    transition: outline-offset var(--animation-duration-in, 250ms);
-    outline-offset: 0;
-    &:focus-visible {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-      outline-color: var(--color-focus);
-      --tw-outline-style: solid;
-      outline-style: solid;
-      outline-offset: calc(var(--spacing) * 0.25);
-    }
-  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
-  .outline-offset-0 {
-    outline-offset: 0px;
-  }
-  .outline-primary {
-    outline-color: var(--color-primary);
-  }
-  .outline-primary\/40 {
-    outline-color: color-mix(in srgb, #694BB4 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
-    }
-  }
-  .outline-primary\/60 {
-    outline-color: color-mix(in srgb, #694BB4 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
-    }
-  }
-  .outline-primary\/90 {
-    outline-color: color-mix(in srgb, #694BB4 90%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
-    }
-  }
-  .outline-white\/20 {
-    outline-color: color-mix(in srgb, #FFFFFF 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-    }
-  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1646,11 +1508,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-opacity {
-    transition-property: opacity;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1659,14 +1516,6 @@
   .delay-25 {
     transition-delay: 25ms;
   }
-  .duration-\(--animation-duration-in\) {
-    --tw-duration: var(--animation-duration-in);
-    transition-duration: var(--animation-duration-in);
-  }
-  .duration-200 {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -1840,10 +1689,16 @@
     --coloring-color: var(--color-description);
   }
   .focus-style-none {
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
+    --focus-outline: none;
+    --focus-outline-offset: 0;
+    --focus-outline-transition: none;
+    --focus-box-shadow: none;
+    --focus-border-color: inherit;
+  }
+  .focus-style-outline {
+    --focus-outline: 2px solid var(--color-focus);
+    --focus-outline-offset: calc(var(--spacing) * 0.25);
+    --focus-outline-transition: outline-offset var(--animation-duration-in, 250ms);
   }
   .select-none {
     -webkit-user-select: none;
@@ -1855,6 +1710,15 @@
       --shadow-bottom: 0 calc(1rem/16) calc(20rem/16) 0 var(--tw-shadow-color, rgb(0 0 0 / 20%));
     }
   }
+  .focus-style-border {
+    --focus-border-color: var(--color-focus);
+  }
+  .focus-style-shadow {
+    --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
+    }
+  }
   .not-data-disabled\:cursor-pointer {
     &:not(*[data-disabled]) {
       cursor: pointer;
@@ -1894,6 +1758,13 @@
       border-color: var(--color-primary);
     }
   }
+  .hover\:cursor-copy {
+    &:hover {
+      @media (hover: hover) {
+        cursor: copy;
+      }
+    }
+  }
   .hover\:cursor-pointer {
     &:hover {
       @media (hover: hover) {
@@ -1948,28 +1819,12 @@
       }
     }
   }
-  .focus\:border-primary {
-    &:focus {
-      border-color: var(--color-primary);
-    }
-  }
   .focus\:ring-0 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus\:outline-1 {
-    &:focus {
-      outline-style: var(--tw-outline-style);
-      outline-width: 1px;
-    }
-  }
-  .focus\:outline-offset-1 {
-    &:focus {
-      outline-offset: 1px;
-    }
-  }
   .focus-visible\:ring-0 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2086,7 +1941,7 @@
   0%, 25%, 50% {
     stroke-dashoffset: 0;
   }
-  75%, 100% {
+  70%, 100% {
     stroke-dashoffset: -1000;
   }
 }
@@ -2170,7 +2025,8 @@
     --color-placeholder: var(--color-gray-500);
     --color-description: var(--color-gray-400);
     --color-label: var(--color-gray-300);
-    --color-primary: var(--color-purple-400);
+    --color-primary: var(--color-purple-500);
+    --color-primary-hover: var(--color-purple-400);
     --color-neutral: var(--color-gray-750);
     --color-neutral-hover: var(--color-gray-600);
     --color-on-neutral: var(--color-white);
@@ -2200,7 +2056,8 @@
     --color-placeholder: var(--color-gray-500);
     --color-description: var(--color-gray-400);
     --color-label: var(--color-gray-300);
-    --color-primary: var(--color-purple-400);
+    --color-primary: var(--color-purple-500);
+    --color-primary-hover: var(--color-purple-400);
     --color-neutral: var(--color-gray-750);
     --color-neutral-hover: var(--color-gray-600);
     --color-on-neutral: var(--color-white);
@@ -2227,6 +2084,13 @@
 }
 @layer components {
   [data-name="button"] {
+    display: flex;
+    padding: var(--element-padding, var(--spacing-element-padding-md)) var(--element-padding-direction, var(--spacing-element-padding-direction-md));
+    border-radius: var(--element-border-radius, 0.375rem);
+    height: var(--element-height, var(--spacing-element-md));
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
     &:not([data-disabled]) {
       cursor: pointer;
       &[data-coloringstyle="solid"] {
@@ -2250,8 +2114,7 @@
         }
       }
       &[data-coloringstyle="outline"] {
-        border-style: var(--tw-border-style);
-        border-width: 2px;
+        border-width: var(--coloring-outline-width, 0.125rem);
         border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
         color: var(--coloring-outline,var(--coloring-color));
         &:hover {
@@ -2442,8 +2305,7 @@
         color: var(--coloring-text,var(--coloring-color));
       }
       &[data-coloringstyle="outline"] {
-        border-style: var(--tw-border-style);
-        border-width: 2px;
+        border-width: var(--coloring-outline-width, 0.125rem);
         border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
         color: var(--coloring-outline,var(--coloring-color));
       }
@@ -2470,105 +2332,58 @@
       --coloring-hover: var(--color-disabled);
       --coloring-text-hover: transparent;
     }
-    &[data-layout="icon"] {
-      display: flex;
-      flex-direction: column;
-      row-gap: calc(var(--spacing) * 0);
-      align-items: center;
-      justify-content: center;
-      &[data-size="xs"] {
-        width: calc(var(--spacing) * 6);
-        height: calc(var(--spacing) * 6);
-        border-radius: calc(var(--spacing) * 1);
-        padding: calc(var(--spacing) * 1);
-        &[data-coloringstyle="outline"] {
-          padding: calc(var(--spacing) * 0.5);
-        }
-      }
-      &[data-size="sm"] {
-        width: calc(var(--spacing) * 8);
-        height: calc(var(--spacing) * 8);
-        border-radius: calc(var(--spacing) * 1.5);
-        padding: calc(var(--spacing) * 1.5);
-        &[data-coloringstyle="outline"] {
-          padding: calc(var(--spacing) * 1);
-        }
-      }
-      &[data-size="md"] {
-        width: calc(var(--spacing) * 10);
-        height: calc(var(--spacing) * 10);
-        border-radius: calc(var(--spacing) * 1.5);
-        padding: calc(var(--spacing) * 2);
-        &[data-coloringstyle="outline"] {
-          padding: calc(var(--spacing) * 1.5);
-        }
-      }
-      &[data-size="lg"] {
-        width: calc(var(--spacing) * 12);
-        height: calc(var(--spacing) * 12);
-        border-radius: calc(var(--spacing) * 1.5);
-        padding: calc(var(--spacing) * 2);
-        &[data-coloringstyle="outline"] {
-          padding: calc(var(--spacing) * 1.5);
-        }
+    &[data-size="xs"] {
+      column-gap: calc(var(--spacing) * 1);
+      --element-padding: var(--spacing-element-padding-xs);
+      --element-padding-direction: var(--spacing-element-padding-direction-xs);
+      --element-border-radius: 0.25rem;
+      --element-height: var(--spacing-element-xs);
+      min-width: calc(var(--spacing) * 20);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      &[data-coloringstyle="outline"] {
+        padding: calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width)) calc(var(--spacing-element-padding-direction-xs) - var(--coloring-outline-width));
       }
     }
-    &[data-layout="default"] {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      &[data-size="xs"] {
-        height: calc(var(--spacing) * 6);
-        column-gap: calc(var(--spacing) * 1);
-        border-radius: calc(var(--spacing) * 1);
-        padding-inline: calc(var(--spacing) * 1);
-        padding-block: calc(var(--spacing) * 0.75);
-        font-size: var(--text-sm);
-        line-height: var(--tw-leading, var(--text-sm--line-height));
-        &[data-coloringstyle="outline"] {
-          padding-inline: calc(var(--spacing) * 0.5);
-          padding-block: calc(var(--spacing) * 0.25);
-        }
-      }
-      &[data-size="sm"] {
-        height: calc(var(--spacing) * 8);
-        column-gap: calc(var(--spacing) * 1);
-        border-radius: calc(var(--spacing) * 1.5);
-        padding-inline: calc(var(--spacing) * 1.5);
-        padding-block: calc(var(--spacing) * 1);
-        &[data-coloringstyle="outline"] {
-          padding-inline: calc(var(--spacing) * 1);
-          padding-block: calc(var(--spacing) * 0.5);
-        }
+    &[data-size="sm"] {
+      column-gap: calc(var(--spacing) * 1);
+      --element-padding: var(--spacing-element-padding-sm);
+      --element-padding-direction: var(--spacing-element-padding-direction-sm);
+      --element-border-radius: 0.375rem;
+      --element-height: var(--spacing-element-sm);
+      min-width: calc(var(--spacing) * 28);
+      &[data-coloringstyle="outline"] {
+        padding: calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width)) calc(var(--spacing-element-padding-direction-sm) - var(--coloring-outline-width));
       }
-      &[data-size="md"] {
-        height: calc(var(--spacing) * 10);
-        column-gap: calc(var(--spacing) * 2);
-        border-radius: calc(var(--spacing) * 1.5);
-        padding-inline: calc(var(--spacing) * 3);
-        padding-block: calc(var(--spacing) * 2);
-        &[data-coloringstyle="outline"] {
-          padding-inline: calc(var(--spacing) * 2.5);
-          padding-block: calc(var(--spacing) * 1.5);
-        }
+    }
+    &[data-size="md"] {
+      column-gap: calc(var(--spacing) * 2);
+      --element-padding: var(--spacing-element-padding-md);
+      --element-padding-direction: var(--spacing-element-padding-direction-md);
+      --element-border-radius: 0.375rem;
+      --element-height: var(--spacing-element-md);
+      min-width: calc(var(--spacing) * 36);
+      &[data-coloringstyle="outline"] {
+        padding: calc(var(--spacing-element-padding-md) - var(--coloring-outline-width)) calc(var(--spacing-element-padding-direction-md) - var(--coloring-outline-width));
       }
-      &[data-size="lg"] {
-        height: calc(var(--spacing) * 12);
-        column-gap: calc(var(--spacing) * 2);
-        border-radius: calc(var(--spacing) * 1.5);
-        padding-inline: calc(var(--spacing) * 4);
-        padding-block: calc(var(--spacing) * 2.5);
-        &[data-coloringstyle="outline"] {
-          padding-inline: calc(var(--spacing) * 3.5);
-          padding-block: calc(var(--spacing) * 2);
-        }
+    }
+    &[data-size="lg"] {
+      column-gap: calc(var(--spacing) * 2);
+      --element-padding: var(--spacing-element-padding-lg);
+      --element-padding-direction: var(--spacing-element-padding-direction-lg);
+      --element-border-radius: 0.5rem;
+      --element-height: var(--spacing-element-lg);
+      min-width: calc(var(--spacing) * 45);
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+      &[data-coloringstyle="outline"] {
+        padding: calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width)) calc(var(--spacing-element-padding-direction-lg) - var(--coloring-outline-width));
       }
     }
   }
 }
 @layer components {
-  .card-sm {
+  [data-name="card-sm"] {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 2);
@@ -2592,7 +2407,7 @@
     --coloring-on-color: var(--color-on-surface);
     --coloring-hover: var(--color-surface-hover);
   }
-  .card-md {
+  [data-name="card-md"] {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 2);
@@ -2602,7 +2417,7 @@
     padding-block: calc(var(--spacing) * 2);
     color: var(--color-on-surface);
   }
-  .card-lg {
+  [data-name="card-lg"] {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 2);
@@ -2628,8 +2443,7 @@
       color: var(--coloring-text,var(--coloring-color));
     }
     &[data-coloringstyle="outline"] {
-      border-style: var(--tw-border-style);
-      border-width: 2px;
+      border-width: var(--coloring-outline-width, 0.125rem);
       border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
       color: var(--coloring-outline,var(--coloring-color));
     }
@@ -2833,17 +2647,18 @@
 }
 @layer components {
   [data-name="input"] {
-    height: calc(var(--spacing) * 10);
-    &:focus-visible {
-      border-style: var(--tw-border-style);
-      border-width: 2px;
-      border-color: var(--color-focus);
-    }
+    height: var(--spacing-element-md);
     border-style: var(--tw-border-style);
     border-width: 2px;
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
+    --focus-outline: none;
+    --focus-outline-offset: 0;
+    --focus-outline-transition: none;
+    --focus-box-shadow: none;
+    --focus-border-color: inherit;
+    --focus-border-color: var(--color-focus);
+    --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
     }
     &:not([data-disabled]):not([data-invalid]) {
       background-color: var(--color-input-background);
@@ -2891,190 +2706,76 @@
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
   }
-  [data-name="select-button"] {
+}
+@layer components {
+  [data-name="togglable-input"] {
+    all: unset;
+    width: 100%;
+    border-radius: var(--radius-md);
+    transition: var(--focus-outline-transition);
+    &:focus-visible {
+      outline: var(--focus-outline);
+      outline-offset: var(--focus-outline-offset);
+      box-shadow: var(--focus-box-shadow);
+      border-color: var(--focus-border-color);
+    }
+    --focus-outline: none;
+    --focus-outline-offset: 0;
+    --focus-outline-transition: none;
+    --focus-box-shadow: none;
+    --focus-border-color: inherit;
+    --focus-outline: 2px solid var(--color-focus);
+    --focus-outline-offset: calc(var(--spacing) * 0.25);
+    --focus-outline-transition: outline-offset var(--animation-duration-in, 250ms);
+    &:not([data-isediting]) {
+      color: transparent;
+    }
+  }
+}
+@layer components {
+  [data-name="table-container"] {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+    width: 100%;
+    overflow: auto;
+  }
+  [data-name="table"] {
+    table-layout: fixed;
+    border-collapse: separate;
+    --tw-border-spacing-x: calc(var(--spacing) * 0);
+    --tw-border-spacing-y: calc(var(--spacing) * 0);
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+    border-radius: var(--radius-lg);
+    background-color: var(--color-table-background);
+    color: var(--color-table-text);
+  }
+  [data-name="table-filler-cell"] {
     display: flex;
+    height: calc(var(--spacing) * 6);
+    width: calc(1/2 * 100%);
     flex-direction: row;
-    column-gap: calc(var(--spacing) * 2);
-    &:focus-visible {
-      border-style: var(--tw-border-style);
-      border-width: 2px;
-      border-color: var(--color-focus);
+    align-items: center;
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-disabled);
+  }
+  [data-name="table-default-cell"] {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  [data-name="table-header-cell"] {
+    position: relative;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2.5);
+    &:first-child {
+      padding-left: calc(var(--spacing) * 6);
     }
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-    &:not([data-disabled]):not([data-invalid]) {
-      background-color: var(--color-input-background);
-      &:hover {
-        @media (hover: hover) {
-          border-color: var(--color-primary-hover);
-        }
-      }
-      &:not([data-value]) {
-        color: var(--color-placeholder);
-      }
-      &[data-value] {
-        color: var(--color-input-text);
-      }
-    }
-    &:not([data-disabled])[data-invalid] {
-      border-color: var(--color-negative);
-      background-color: color-mix(in srgb, #DC576D 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-negative) 20%, transparent);
-      }
-      &:hover {
-        @media (hover: hover) {
-          border-color: var(--color-negative-hover);
-        }
-      }
-      --color-focus: var(--color-negative);
-      &[data-value] {
-        color: var(--color-negative);
-      }
-      &:not([data-value]) {
-        color: var(--color-placeholder);
-      }
-    }
-    &[data-disabled] {
-      cursor: not-allowed;
-      border-color: var(--color-disabled);
-      background-color: var(--color-disabled);
-      color: var(--color-on-disabled);
-      &::placeholder {
-        color: transparent;
-      }
-    }
-    align-items: center;
-    justify-content: space-between;
-    border-radius: var(--radius-md);
-    padding-inline: calc(var(--spacing) * 3);
-    padding-block: calc(var(--spacing) * 2);
-    &:not([data-disabled]) {
-      &:hover {
-        @media (hover: hover) {
-          cursor: pointer;
-        }
-      }
-    }
-  }
-  [data-name="select-button-chips"] {
-    display: flex;
-    &:focus-visible {
-      border-style: var(--tw-border-style);
-      border-width: 2px;
-      border-color: var(--color-focus);
-    }
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-    &:not([data-disabled]):not([data-invalid]) {
-      background-color: var(--color-input-background);
-      &:hover {
-        @media (hover: hover) {
-          border-color: var(--color-primary-hover);
-        }
-      }
-      &:not([data-value]) {
-        color: var(--color-placeholder);
-      }
-      &[data-value] {
-        color: var(--color-input-text);
-      }
-    }
-    &:not([data-disabled])[data-invalid] {
-      border-color: var(--color-negative);
-      background-color: color-mix(in srgb, #DC576D 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-negative) 20%, transparent);
-      }
-      &:hover {
-        @media (hover: hover) {
-          border-color: var(--color-negative-hover);
-        }
-      }
-      --color-focus: var(--color-negative);
-      &[data-value] {
-        color: var(--color-negative);
-      }
-      &:not([data-value]) {
-        color: var(--color-placeholder);
-      }
-    }
-    &[data-disabled] {
-      cursor: not-allowed;
-      border-color: var(--color-disabled);
-      background-color: var(--color-disabled);
-      color: var(--color-on-disabled);
-      &::placeholder {
-        color: transparent;
-      }
-    }
-    flex-wrap: wrap;
-    align-items: center;
-    gap: calc(var(--spacing) * 2);
-    border-radius: var(--radius-md);
-    padding-inline: calc(var(--spacing) * 2.5);
-    padding-block: calc(var(--spacing) * 2.5);
-    &:not([data-disabled]) {
-      &:hover {
-        @media (hover: hover) {
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
-@layer components {
-  .table-container {
-    display: flex;
-    flex-direction: column;
-    row-gap: calc(var(--spacing) * 0);
-    width: 100%;
-    overflow: auto;
-  }
-  .table {
-    table-layout: fixed;
-    border-collapse: separate;
-    --tw-border-spacing-x: calc(var(--spacing) * 0);
-    --tw-border-spacing-y: calc(var(--spacing) * 0);
-    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
-    border-radius: var(--radius-lg);
-    background-color: var(--color-table-background);
-    color: var(--color-table-text);
-  }
-  .table-filler-cell {
-    display: flex;
-    height: calc(var(--spacing) * 6);
-    width: calc(1/2 * 100%);
-    flex-direction: row;
-    align-items: center;
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-disabled);
-  }
-  .table-default-cell {
-    display: block;
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .table-header-cell {
-    position: relative;
-    padding-inline: calc(var(--spacing) * 3);
-    padding-block: calc(var(--spacing) * 2.5);
-    &:first-child {
-      padding-left: calc(var(--spacing) * 6);
-    }
-    &:last-child {
-      padding-right: calc(var(--spacing) * 6);
+    &:last-child {
+      padding-right: calc(var(--spacing) * 6);
     }
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
@@ -3101,7 +2802,7 @@
       top: calc(var(--spacing) * 0);
     }
   }
-  .table-body-row {
+  [data-name="table-body-row"] {
     &:hover {
       @media (hover: hover) {
         background-color: var(--color-table-row-hover-background);
@@ -3115,7 +2816,7 @@
       }
     }
   }
-  .table-body-filler-row {
+  [data-name="table-body-filler-row"] {
     &:hover {
       @media (hover: hover) {
         cursor: not-allowed;
@@ -3134,7 +2835,7 @@
       }
     }
   }
-  .table-body-cell, .table-body-filler-cell {
+  [data-name="table-body-cell"], [data-name="table-body-filler-cell"] {
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2.5);
     &:first-child {
@@ -3164,7 +2865,7 @@
       }
     }
   }
-  .table-resize-indicator {
+  [data-name="table-resize-indicator"] {
     position: absolute;
     top: calc(1/2 * 100%);
     right: calc(var(--spacing) * 1);
@@ -3194,7 +2895,7 @@
       }
     }
   }
-  .table-body-row:last-child > .table-body-cell, .table-body-filler-row:last-child > .table-body-filler-cell {
+  [data-name="table-body-row"]:last-child > [data-name="table-body-cell"], [data-name="table-body-filler-row"]:last-child > [data-name="table-body-filler-cell"] {
     &:first-child {
       border-bottom-left-radius: var(--radius-lg);
     }
@@ -3249,7 +2950,7 @@
   }
 }
 @layer components {
-  .link {
+  [data-name="link"] {
     border-radius: 0.25rem;
     padding: calc(var(--spacing) * 2);
     font-size: var(--text-lg);
@@ -3268,7 +2969,7 @@
   }
 }
 @layer components {
-  *[data-name="avatar"] {
+  [data-name="avatar"] {
     position: relative;
     display: flex;
     flex-direction: row;
@@ -3356,7 +3057,7 @@
       z-index: 1;
     }
   }
-  *[data-name="avatar-image"] {
+  [data-name="avatar-image"] {
     position: absolute;
     top: calc(var(--spacing) * 0);
     left: calc(var(--spacing) * 0);
@@ -3368,7 +3069,7 @@
       opacity: 0%;
     }
   }
-  *[data-name="avatar-group"] {
+  [data-name="avatar-group"] {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
@@ -3390,12 +3091,12 @@
       --size: calc(var(--spacing) * 12);
     }
   }
-  *[data-name="avatar-group-container"] {
+  [data-name="avatar-group-container"] {
     position: relative;
     height: var(--size);
     width: calc(var(--size) * (0.5 * 4 + 1));
   }
-  *[data-name="avatar-group-more"] {
+  [data-name="avatar-group-more"] {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
@@ -3421,8 +3122,7 @@
       color: var(--coloring-text,var(--coloring-color));
     }
     &[data-coloringstyle="outline"] {
-      border-style: var(--tw-border-style);
-      border-width: 2px;
+      border-width: var(--coloring-outline-width, 0.125rem);
       border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
       color: var(--coloring-outline,var(--coloring-color));
     }
@@ -3698,9 +3398,8 @@
 }
 @layer components {
   [data-name="tab-list"] {
-    display: flex;
-    flex-direction: row;
-    column-gap: calc(var(--spacing) * 0);
+    display: grid;
+    grid-template-columns: repeat(var(--tab-count), 1fr);
   }
   [data-name="tab-list-item"] {
     display: flex;
@@ -3709,7 +3408,7 @@
     flex-grow: 1;
     justify-content: center;
     border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
+    border-bottom-width: 4px;
     color: var(--coloring-text,var(--coloring-color));
     &:hover {
       @media (hover: hover) {
@@ -3725,8 +3424,6 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -3752,14 +3449,36 @@
     --coloring-tonal-text: var(--color-neutral-tonal-text);
     --coloring-tonal-background: var(--color-neutral-tonal-background);
     --coloring-tonal-hover: var(--color-neutral-tonal-hover);
-    &[data-active] {
-      border-color: var(--color-primary);
+    &[data-disabled] {
+      cursor: not-allowed;
+      color: var(--coloring-text,var(--coloring-color));
+      --coloring-color: initial;
+      --coloring-on-color: initial;
+      --coloring-hover: initial;
+      --coloring-text: initial;
+      --coloring-text-hover: initial;
+      --coloring-outline: initial;
+      --coloring-outline-hover: initial;
+      --coloring-tonal: initial;
+      --coloring-tonal-background: initial;
+      --coloring-tonal-text: initial;
+      --coloring-tonal-hover: initial;
+      --coloring-color: var(--color-disabled);
+      --coloring-on-color: var(--color-on-disabled);
+      --coloring-hover: var(--color-disabled);
+      --coloring-text-hover: transparent;
     }
-    &:not([data-active]) {
-      color: var(--color-description);
-      &:hover {
-        @media (hover: hover) {
-          cursor: pointer;
+    &:not([data-disabled]) {
+      &[data-active] {
+        border-color: var(--color-primary);
+        --tw-font-weight: var(--font-weight-bold);
+        font-weight: var(--font-weight-bold);
+      }
+      &:not([data-active]) {
+        &:hover {
+          @media (hover: hover) {
+            cursor: pointer;
+          }
         }
       }
     }
@@ -3923,7 +3642,7 @@
   }
 }
 @layer components {
-  .checkbox {
+  [data-name="checkbox"] {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 0);
@@ -4023,7 +3742,7 @@
       max-width: calc(var(--spacing) * 8);
     }
   }
-  .checkbox-indicator {
+  [data-name="checkbox-indicator"] {
     height: 100%;
     width: 100%;
     &[data-size="sm"] {
@@ -4038,7 +3757,94 @@
   }
 }
 @layer components {
-  .tooltip {
+  [data-name="switch"] {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+    align-items: center;
+    justify-content: center;
+    height: calc(var(--spacing) * 7);
+    width: calc(var(--spacing) * 12);
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    padding: calc(var(--spacing) * 1);
+    &:not([data-disabled]) {
+      &:hover {
+        @media (hover: hover) {
+          cursor: pointer;
+        }
+      }
+    }
+    &[data-disabled] {
+      cursor: not-allowed;
+      border-color: var(--color-on-disabled);
+      background-color: var(--color-disabled);
+    }
+    &:not([data-disabled]) {
+      [data-invalid] {
+        border-color: var(--color-negative);
+        &:hover {
+          border-color: var(--color-negative-hover);
+          background-color: color-mix(in srgb, #DC576D 10%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-negative) 10%, transparent);
+          }
+        }
+      }
+      &:not([data-invalid]) {
+        border-color: var(--color-border);
+        background-color: var(--color-input-background);
+        &:hover {
+          border-color: var(--color-primary-hover);
+          background-color: color-mix(in srgb, #694BB4 10%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+          }
+        }
+        &[data-active] {
+          border-color: var(--color-primary);
+          background-color: var(--color-primary);
+          &:hover {
+            border-color: var(--color-primary-hover);
+            background-color: var(--color-primary-hover);
+          }
+        }
+      }
+    }
+  }
+  [data-name="switch-track"] {
+    position: relative;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    border-radius: calc(infinity * 1px);
+  }
+  [data-name="switch-thumb"] {
+    height: calc(var(--spacing) * 3);
+    width: calc(var(--spacing) * 3);
+    border-radius: calc(infinity * 1px);
+    background-color: var(--color-on-surface);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: var(--animation-duration-in,250ms);
+    transition-duration: var(--animation-duration-in,250ms);
+    position: absolute;
+    top: calc(1/2 * 100%);
+    left: calc(var(--spacing) * 0.5);
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    &[data-active] {
+      height: calc(var(--spacing) * 4);
+      width: calc(var(--spacing) * 4);
+      left: calc(100% - 4 * var(--spacing));
+    }
+  }
+}
+@layer components {
+  [data-name="tooltip"] {
     position: absolute;
     border-radius: 0.25rem;
     padding-inline: calc(var(--spacing) * 2);
@@ -4270,7 +4076,7 @@
   }
 }
 @layer components {
-  .dialog-container {
+  [data-name="dialog-container"] {
     position: fixed;
     inset: calc(var(--spacing) * 0);
     height: 100vh;
@@ -4280,7 +4086,7 @@
       touch-action: none;
     }
   }
-  .dialog-background {
+  [data-name="dialog-background"] {
     position: fixed;
     inset: calc(var(--spacing) * 0);
     height: 100vh;
@@ -4298,7 +4104,7 @@
       animation-name: fade-in;
     }
   }
-  .dialog-content {
+  [data-name="dialog-content"] {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 2);
@@ -4345,16 +4151,17 @@
   [data-name="textarea"] {
     height: calc(var(--spacing) * 32);
     width: 100%;
-    &:focus-visible {
-      border-style: var(--tw-border-style);
-      border-width: 2px;
-      border-color: var(--color-focus);
-    }
     border-style: var(--tw-border-style);
     border-width: 2px;
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
+    --focus-outline: none;
+    --focus-outline-offset: 0;
+    --focus-outline-transition: none;
+    --focus-box-shadow: none;
+    --focus-border-color: inherit;
+    --focus-border-color: var(--color-focus);
+    --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
     }
     &:not([data-disabled]):not([data-invalid]) {
       background-color: var(--color-input-background);
@@ -4406,18 +4213,18 @@
   }
 }
 @layer components {
-  .form-field-container {
+  [data-name="form-field-container"] {
     position: relative;
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 1);
   }
-  .form-field-description {
+  [data-name="form-field-description"] {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-description);
   }
-  .form-field-error {
+  [data-name="form-field-error"] {
     position: absolute;
     top: calc(100% + 0.25rem);
     left: calc(var(--spacing) * 0);
@@ -4427,7 +4234,7 @@
     font-weight: var(--font-weight-medium);
     color: var(--color-negative);
   }
-  .form-field-label {
+  [data-name="form-field-label"] {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 1);
@@ -4474,11 +4281,10 @@
     align-items: center;
     justify-content: center;
     border-radius: calc(infinity * 1px);
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-    border-color: transparent;
     &[data-today] {
-      border-color: var(--color-on-background);
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-on-background);
     }
     &:not([data-invalid]) {
       &:hover {
@@ -4708,7 +4514,7 @@
     width: 100%;
     &[data-invalid] {
       color: var(--color-warning);
-      [data-name="select-button"], [data-name="select-button-chips"] {
+      [data-name="select-button"], [data-name="select-chip-display"] {
         background-color: var(--color-warning) !important;
         color: var(--color-surface-warning) !important;
       }
@@ -4735,7 +4541,7 @@
     }
   }
 }
-.pop-up {
+[data-name="pop-up"] {
   border-radius: var(--radius-md);
   border-style: var(--tw-border-style);
   border-width: 2px;
@@ -4768,6 +4574,183 @@
     opacity: 0%;
   }
 }
+@layer components {
+  [data-name="select-button"] {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    --focus-outline: none;
+    --focus-outline-offset: 0;
+    --focus-outline-transition: none;
+    --focus-box-shadow: none;
+    --focus-border-color: inherit;
+    --focus-border-color: var(--color-focus);
+    --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary-hover);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      border-color: var(--color-negative);
+      background-color: color-mix(in srgb, #DC576D 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-negative) 20%, transparent);
+      }
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-negative-hover);
+        }
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      cursor: not-allowed;
+      border-color: var(--color-disabled);
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+      &::placeholder {
+        color: transparent;
+      }
+    }
+    align-items: center;
+    justify-content: space-between;
+    border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    &:not([data-disabled]) {
+      &:hover {
+        @media (hover: hover) {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  [data-name="select-chip-display"] {
+    display: flex;
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    --focus-outline: none;
+    --focus-outline-offset: 0;
+    --focus-outline-transition: none;
+    --focus-box-shadow: none;
+    --focus-border-color: inherit;
+    --focus-border-color: var(--color-focus);
+    --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary-hover);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      border-color: var(--color-negative);
+      background-color: color-mix(in srgb, #DC576D 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-negative) 20%, transparent);
+      }
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-negative-hover);
+        }
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      cursor: not-allowed;
+      border-color: var(--color-disabled);
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+      &::placeholder {
+        color: transparent;
+      }
+    }
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 2.5);
+    padding-block: calc(var(--spacing) * 2.5);
+    &:not([data-disabled]) {
+      &:hover {
+        @media (hover: hover) {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  [data-name="select-chip-display-chip"] {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 1);
+    height: calc(var(--spacing) * 9);
+    align-items: center;
+    border-radius: var(--radius-md);
+    background-color: var(--coloring-solid-color,var(--coloring-color));
+    color: var(--coloring-solid-text,var(--coloring-on-color));
+    padding-right: calc(var(--spacing) * 1);
+    padding-left: calc(var(--spacing) * 2);
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+    --coloring-tonal: initial;
+    --coloring-tonal-background: initial;
+    --coloring-tonal-text: initial;
+    --coloring-tonal-hover: initial;
+    --coloring-color: var(--color-neutral);
+    --coloring-on-color: var(--color-on-neutral);
+    --coloring-hover: var(--color-neutral-hover);
+    --coloring-text: var(--color-neutral-text);
+    --coloring-text-hover: var(--color-neutral-text-hover);
+    --coloring-outline: var(--color-neutral-outline);
+    --coloring-outline-hover: var(--color-neutral-outline-hover);
+    --coloring-tonal: var(--color-neutral-tonal);
+    --coloring-tonal-text: var(--color-neutral-tonal-text);
+    --coloring-tonal-background: var(--color-neutral-tonal-background);
+    --coloring-tonal-hover: var(--color-neutral-tonal-hover);
+  }
+}
 @layer components {
   * {
     list-style-type: none;
@@ -4796,16 +4779,304 @@
     outline-width: 0px;
   }
   * {
-    &:focus-visible:not(.focus-style-none) {
-      transition: outline-offset var(--animation-duration-in, 250ms);
-      outline-offset: 0;
-      &:focus-visible {
-        outline-style: var(--tw-outline-style);
-        outline-width: 2px;
-        outline-color: var(--color-focus);
-        --tw-outline-style: solid;
-        outline-style: solid;
-        outline-offset: calc(var(--spacing) * 0.25);
+    transition: var(--focus-outline-transition);
+    &:focus-visible {
+      outline: var(--focus-outline);
+      outline-offset: var(--focus-outline-offset);
+      box-shadow: var(--focus-box-shadow);
+      border-color: var(--focus-border-color);
+    }
+    --focus-outline: 2px solid var(--color-focus);
+    --focus-outline-offset: calc(var(--spacing) * 0.25);
+    --focus-outline-transition: outline-offset var(--animation-duration-in, 250ms);
+  }
+}
+@layer components {
+  [data-name="icon-button"] {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+    padding: var(--element-padding, var(--spacing-element-padding-md));
+    border-radius: var(--element-border-radius, 0.375rem);
+    height: var(--element-height, var(--spacing-element-height-md));
+    width: var(--element-height, var(--spacing-element-md));
+    align-items: center;
+    justify-content: center;
+    &:not([data-disabled]) {
+      cursor: pointer;
+      &[data-coloringstyle="solid"] {
+        background-color: var(--coloring-solid-color,var(--coloring-color));
+        color: var(--coloring-solid-text,var(--coloring-on-color));
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--coloring-solid-hover,var(--coloring-hover));
+          }
+        }
+      }
+      &[data-coloringstyle="text"] {
+        color: var(--coloring-text,var(--coloring-color));
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--coloring-text-hover,var(--coloring-text,var(--coloring-color)));
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab, var(--coloring-text-hover,var(--coloring-text,var(--coloring-color))) 20%, transparent);
+            }
+          }
+        }
+      }
+      &[data-coloringstyle="outline"] {
+        border-width: var(--coloring-outline-width, 0.125rem);
+        border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
+        color: var(--coloring-outline,var(--coloring-color));
+        &:hover {
+          @media (hover: hover) {
+            border-color: var(--coloring-border-hover,--coloring-hover);
+          }
+        }
+        &:hover {
+          @media (hover: hover) {
+            color: var(--coloring-outline-hover,var(--coloring-hover));
+          }
+        }
+      }
+      &[data-coloringstyle="tonal"] {
+        background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
+        }
+        color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--coloring-tonal-hover,var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))));
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab, var(--coloring-tonal-hover,var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)))) 30%, transparent);
+            }
+          }
+        }
+      }
+      &[data-color="primary"] {
+        --coloring-color: initial;
+        --coloring-on-color: initial;
+        --coloring-hover: initial;
+        --coloring-text: initial;
+        --coloring-text-hover: initial;
+        --coloring-outline: initial;
+        --coloring-outline-hover: initial;
+        --coloring-tonal: initial;
+        --coloring-tonal-background: initial;
+        --coloring-tonal-text: initial;
+        --coloring-tonal-hover: initial;
+        --coloring-color: var(--color-primary);
+        --coloring-on-color: var(--color-on-primary);
+        --coloring-hover: var(--color-primary-hover);
+      }
+      &[data-color="secondary"] {
+        --coloring-color: initial;
+        --coloring-on-color: initial;
+        --coloring-hover: initial;
+        --coloring-text: initial;
+        --coloring-text-hover: initial;
+        --coloring-outline: initial;
+        --coloring-outline-hover: initial;
+        --coloring-tonal: initial;
+        --coloring-tonal-background: initial;
+        --coloring-tonal-text: initial;
+        --coloring-tonal-hover: initial;
+        --coloring-color: var(--color-secondary);
+        --coloring-on-color: var(--color-on-secondary);
+        --coloring-hover: var(--color-secondary-hover);
+      }
+      &[data-color="positive"] {
+        --coloring-color: initial;
+        --coloring-on-color: initial;
+        --coloring-hover: initial;
+        --coloring-text: initial;
+        --coloring-text-hover: initial;
+        --coloring-outline: initial;
+        --coloring-outline-hover: initial;
+        --coloring-tonal: initial;
+        --coloring-tonal-background: initial;
+        --coloring-tonal-text: initial;
+        --coloring-tonal-hover: initial;
+        --coloring-color: var(--color-positive);
+        --coloring-on-color: var(--color-on-positive);
+        --coloring-hover: var(--color-positive-hover);
+      }
+      &[data-color="warning"] {
+        --coloring-color: initial;
+        --coloring-on-color: initial;
+        --coloring-hover: initial;
+        --coloring-text: initial;
+        --coloring-text-hover: initial;
+        --coloring-outline: initial;
+        --coloring-outline-hover: initial;
+        --coloring-tonal: initial;
+        --coloring-tonal-background: initial;
+        --coloring-tonal-text: initial;
+        --coloring-tonal-hover: initial;
+        --coloring-color: var(--color-warning);
+        --coloring-on-color: var(--color-on-warning);
+        --coloring-hover: var(--color-warning-hover);
+      }
+      &[data-color="negative"] {
+        --coloring-color: initial;
+        --coloring-on-color: initial;
+        --coloring-hover: initial;
+        --coloring-text: initial;
+        --coloring-text-hover: initial;
+        --coloring-outline: initial;
+        --coloring-outline-hover: initial;
+        --coloring-tonal: initial;
+        --coloring-tonal-background: initial;
+        --coloring-tonal-text: initial;
+        --coloring-tonal-hover: initial;
+        --coloring-color: var(--color-negative);
+        --coloring-on-color: var(--color-on-negative);
+        --coloring-hover: var(--color-negative-hover);
+      }
+      &[data-color="neutral"] {
+        --coloring-color: initial;
+        --coloring-on-color: initial;
+        --coloring-hover: initial;
+        --coloring-text: initial;
+        --coloring-text-hover: initial;
+        --coloring-outline: initial;
+        --coloring-outline-hover: initial;
+        --coloring-tonal: initial;
+        --coloring-tonal-background: initial;
+        --coloring-tonal-text: initial;
+        --coloring-tonal-hover: initial;
+        --coloring-color: var(--color-neutral);
+        --coloring-on-color: var(--color-on-neutral);
+        --coloring-hover: var(--color-neutral-hover);
+        --coloring-text: var(--color-neutral-text);
+        --coloring-text-hover: var(--color-neutral-text-hover);
+        --coloring-outline: var(--color-neutral-outline);
+        --coloring-outline-hover: var(--color-neutral-outline-hover);
+        --coloring-tonal: var(--color-neutral-tonal);
+        --coloring-tonal-text: var(--color-neutral-tonal-text);
+        --coloring-tonal-background: var(--color-neutral-tonal-background);
+        --coloring-tonal-hover: var(--color-neutral-tonal-hover);
+      }
+      &[data-color="description"] {
+        --coloring-color: initial;
+        --coloring-on-color: initial;
+        --coloring-hover: initial;
+        --coloring-text: initial;
+        --coloring-text-hover: initial;
+        --coloring-outline: initial;
+        --coloring-outline-hover: initial;
+        --coloring-tonal: initial;
+        --coloring-tonal-background: initial;
+        --coloring-tonal-text: initial;
+        --coloring-tonal-hover: initial;
+        --coloring-color: var(--color-description);
+      }
+      &[data-color="surface"] {
+        --coloring-color: initial;
+        --coloring-on-color: initial;
+        --coloring-hover: initial;
+        --coloring-text: initial;
+        --coloring-text-hover: initial;
+        --coloring-outline: initial;
+        --coloring-outline-hover: initial;
+        --coloring-tonal: initial;
+        --coloring-tonal-background: initial;
+        --coloring-tonal-text: initial;
+        --coloring-tonal-hover: initial;
+        --coloring-color: var(--color-surface);
+        --coloring-on-color: var(--color-on-surface);
+        --coloring-hover: var(--color-surface-hover);
+      }
+      &[data-color="disabled"] {
+        --coloring-color: initial;
+        --coloring-on-color: initial;
+        --coloring-hover: initial;
+        --coloring-text: initial;
+        --coloring-text-hover: initial;
+        --coloring-outline: initial;
+        --coloring-outline-hover: initial;
+        --coloring-tonal: initial;
+        --coloring-tonal-background: initial;
+        --coloring-tonal-text: initial;
+        --coloring-tonal-hover: initial;
+        --coloring-color: var(--color-disabled);
+        --coloring-on-color: var(--color-on-disabled);
+        --coloring-hover: var(--color-disabled);
+        --coloring-text-hover: transparent;
+      }
+    }
+    &[data-disabled] {
+      cursor: not-allowed;
+      &[data-coloringstyle="solid"] {
+        background-color: var(--coloring-solid-color,var(--coloring-color));
+        color: var(--coloring-solid-text,var(--coloring-on-color));
+      }
+      &[data-coloringstyle="text"] {
+        color: var(--coloring-text,var(--coloring-color));
+      }
+      &[data-coloringstyle="outline"] {
+        border-width: var(--coloring-outline-width, 0.125rem);
+        border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
+        color: var(--coloring-outline,var(--coloring-color));
+      }
+      &[data-coloringstyle="tonal"] {
+        background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
+        }
+        color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
+      }
+      --coloring-color: initial;
+      --coloring-on-color: initial;
+      --coloring-hover: initial;
+      --coloring-text: initial;
+      --coloring-text-hover: initial;
+      --coloring-outline: initial;
+      --coloring-outline-hover: initial;
+      --coloring-tonal: initial;
+      --coloring-tonal-background: initial;
+      --coloring-tonal-text: initial;
+      --coloring-tonal-hover: initial;
+      --coloring-color: var(--color-disabled);
+      --coloring-on-color: var(--color-on-disabled);
+      --coloring-hover: var(--color-disabled);
+      --coloring-text-hover: transparent;
+    }
+    &[data-size="xs"] {
+      --element-padding: var(--spacing-element-padding-xs);
+      --element-padding-direction: var(--spacing-element-padding-direction-xs);
+      --element-border-radius: 0.25rem;
+      --element-height: var(--spacing-element-xs);
+      &[data-coloringstyle="outline"] {
+        padding: calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width));
+      }
+    }
+    &[data-size="sm"] {
+      --element-padding: var(--spacing-element-padding-sm);
+      --element-padding-direction: var(--spacing-element-padding-direction-sm);
+      --element-border-radius: 0.375rem;
+      --element-height: var(--spacing-element-sm);
+      &[data-coloringstyle="outline"] {
+        padding: calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width));
+      }
+    }
+    &[data-size="md"] {
+      --element-padding: var(--spacing-element-padding-md);
+      --element-padding-direction: var(--spacing-element-padding-direction-md);
+      --element-border-radius: 0.375rem;
+      --element-height: var(--spacing-element-md);
+      &[data-coloringstyle="outline"] {
+        padding: calc(var(--spacing-element-padding-md) - var(--coloring-outline-width));
+      }
+    }
+    &[data-size="lg"] {
+      --element-padding: var(--spacing-element-padding-lg);
+      --element-padding-direction: var(--spacing-element-padding-direction-lg);
+      --element-border-radius: 0.5rem;
+      --element-height: var(--spacing-element-lg);
+      &[data-coloringstyle="outline"] {
+        padding: calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width));
       }
     }
   }
@@ -4815,6 +5086,7 @@
   --drawer-indent: calc(4 * var(--spacing));
   --animation-duration-in: 250ms;
   --animation-duration-out: 170ms;
+  --coloring-outline-width: calc(0.5 * var(--spacing));
 }
 @property --tw-translate-x {
   syntax: "*";
@@ -5025,10 +5297,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-ease {
   syntax: "*";
   inherits: false;
@@ -5043,6 +5311,10 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -5108,10 +5380,10 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
-      --tw-duration: initial;
       --tw-ease: initial;
       --tw-border-spacing-x: 0;
       --tw-border-spacing-y: 0;
+      --tw-duration: initial;
     }
   }
 }