winduum 0.4.0 → 0.5.0-next.10

package/src/ui/btn/gradient-bordered-rgb.css

@@ -1,4 +1,4 @@
-:is(.ui-btn.gradient-bordered) {
+.ui-btn:is(.gradient-bordered) {
   --color-current-rgb: var(--color-current-rgb);
 
   &::before {

package/src/ui/btn/gradient-bordered.css

@@ -1,28 +1,34 @@
-:is(.ui-btn.gradient-bordered) {
-  --ui-btn-border-width: 2px;
-  --ui-btn-hover-bg-mix: transparent;
-  --ui-btn-hover-bg-opacity: 10%;
-  --ui-btn-active-bg-mix: transparent;
-  --ui-btn-active-bg-opacity: 20%;
-  --ui-btn-focus-outline-offset: 0;
-  --ui-btn-bg-opacity: 0%;
-  --color-current: var(--color-main);
+.ui-btn {
+  &:where(.gradient-bordered) {
+    &::before {
+      content: "";
+      position: absolute;
+      background-color: color-mix(in sRGB, var(--color-body) calc(100% - var(--ui-btn-bg-opacity)), transparent);
+      inset: var(--ui-btn-border-width);
+      border-radius: calc(var(--ui-btn-border-radius, var(--rounded)) / 1.25);
+      z-index: -1;
+      transition: var(--transition-background);
+    }
 
-  &::before {
-    content: "";
-    position: absolute;
-    background-color: color-mix(in sRGB, var(--color-body) calc(100% - var(--ui-btn-bg-opacity)), transparent);
-    inset: var(--ui-btn-border-width);
-    border-radius: calc(var(--ui-btn-border-radius) / 1.25);
-    z-index: -1;
-    transition: var(--transition-background);
+    &:where(.hover-fill) {
+      &::before {
+        background-color: color-mix(in sRGB, var(--color-body) var(--ui-btn-bg-opacity), transparent);
+      }
+    }
   }
 
-  &:where(.hover-fill) {
-    --ui-btn-bg-opacity: 100%;
+  &:is(.gradient-bordered) {
+    --ui-btn-border-width: 2px;
+    --ui-btn-hover-bg-mix: transparent;
+    --ui-btn-hover-bg-opacity: 10%;
+    --ui-btn-active-bg-mix: transparent;
+    --ui-btn-active-bg-opacity: 20%;
+    --ui-btn-focus-outline-offset: 0;
+    --ui-btn-bg-opacity: 0%;
+    --color-current: var(--color-main);
 
-    &::before {
-      background-color: color-mix(in sRGB, var(--color-body) var(--ui-btn-bg-opacity), transparent);
+    &:is(.hover-fill) {
+      --ui-btn-bg-opacity: 100%;
     }
   }
 }

package/src/ui/btn/hover-fill.css

@@ -1,4 +1,4 @@
-.ui-btn:where(.hover-fill) {
+.ui-btn:is(.hover-fill) {
   --ui-btn-hover-bg-mix: black;
   --ui-btn-hover-bg-opacity: 100%;
   --ui-btn-active-bg-mix: black;

package/src/ui/btn/index.css

@@ -1,4 +1,5 @@
 @import "default.css";
+@import "interactive.css";
 @import "sm.css";
 @import "lg.css";
 @import "loading.css";

package/src/ui/btn/interactive.css

@@ -0,0 +1,35 @@
+.ui-btn {
+  transition-property: var(--transition);
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: var(--duration);
+
+  &:is([href], button, [role="button"], input, .interactive) {
+    cursor: pointer;
+
+    &:disabled {
+      opacity: var(--ui-btn-disabled-opacity, 0.7);
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled) {
+      &:hover {
+        @media (hover: hover) and (pointer: fine) {
+          --ui-btn-color: var(--ui-btn-hover-color, var(--color-current));
+          --ui-btn-bg-mix: var(--ui-btn-hover-bg-mix, black);
+          --ui-btn-bg-opacity: var(--ui-btn-hover-bg-opacity, 80%);
+        }
+      }
+
+      &:focus {
+        outline-color: color-mix(in sRGB, var(--color-accent) var(--ui-btn-focus-outline-color-opacity, 50%), var(--ui-btn-focus-outline-color-mix, transparent));
+        outline-offset: var(--ui-btn-focus-outline-offset, 2px);
+      }
+
+      &:is(:active, :checked, .active) {
+        --ui-btn-color: var(--ui-btn-active-color, var(--color-current));
+        --ui-btn-bg-mix: var(--ui-btn-active-bg-mix, black);
+        --ui-btn-bg-opacity: var(--ui-btn-active-bg-opacity, 90%);
+      }
+    }
+  }
+}

package/src/ui/btn/lg.css

@@ -1,4 +1,4 @@
-.ui-btn:where(.lg) {
+.ui-btn:is(.lg) {
   --ui-btn-height: 3rem;
   --ui-btn-px: 1.75rem;
 }

package/src/ui/btn/muted.css

@@ -1,4 +1,4 @@
-.ui-btn:where(.muted) {
+.ui-btn:is(.muted) {
   --color-current: var(--color-accent);
   --ui-btn-hover-bg-mix: transparent;
   --ui-btn-active-bg-mix: transparent;

package/src/ui/btn/raised.css

@@ -1,8 +1,11 @@
-.ui-btn:where(.raised) {
-  --ui-btn-border-width: 2px;
-  --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.85) * 100%);
+.ui-btn {
+  &:where(.raised) {
+    border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), var(--color-current));
+    padding-inline: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
+  }
 
-  border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), var(--color-current));
-  padding-left: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
-  padding-right: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
+  &:is(.raised) {
+    --ui-btn-border-width: 2px;
+    --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.85) * 100%);
+  }
 }

package/src/ui/btn/sm.css

@@ -1,4 +1,4 @@
-.ui-btn:where(.sm) {
+.ui-btn:is(.sm) {
   --ui-btn-height: 2rem;
   --ui-btn-px: 1rem;
 }

package/src/ui/btn/square.css

@@ -1,4 +1,4 @@
-.ui-btn:where(.square) {
+.ui-btn:is(.square) {
   --ui-btn-px: var(--ui-btn-py);
   --ui-btn-width: var(--ui-btn-height);
 }

package/src/ui/btn/wide.css

@@ -1,4 +1,3 @@
 .ui-btn:where(.wide) {
-  padding-left: calc(var(--ui-btn-px) * 1.5);
-  padding-right: calc(var(--ui-btn-px) * 1.5);
+  padding-inline: calc(var(--ui-btn-px) * 1.5);
 }

package/src/ui/check.css

@@ -1,33 +1,18 @@
 .ui-check {
-  --ui-check-width: 1.375rem;
-  --ui-check-font-size: 0.875rem;
-  --ui-check-gap: 0.625rem;
-  --ui-check-bg: transparent;
-  --ui-check-bg-mix: transparent;
-  --ui-check-bg-opacity: calc(var(--tw-bg-opacity, 0.1) * 100%);
-  --ui-check-border-color: var(--color-current);
-  --ui-check-border-mix: transparent;
-  --ui-check-border-opacity: calc(var(--tw-border-opacity, 0.2) * 100%);
-  --ui-check-border-width: 1px;
+  --ui-check-width: 1.25rem;
   --ui-check-checked-bg: var(--color-accent);
-  --ui-check-radius: 0.5rem;
-  --ui-check-icon: var(--icon-check);
-  --ui-check-icon-font-size: 1.125rem;
-  --ui-check-box-shadow: none;
-  --ui-check-outline-width: 3px;
-  --ui-check-outline-offset: 0;
-  --ui-check-outline-opacity: 20%;
-  --ui-check-disabled-opacity: 50%;
-
-  display: flex;
-  align-items: center;
-  gap: 0 var(--ui-check-gap);
-  width: fit-content;
-  font-size: var(--ui-check-font-size);
+  --ui-check-icon-width: 1.125rem;
+
+  display: inline-flex;
+  gap: var(--ui-check-gap, 0.75rem);
+  font-weight: var(--ui-check-font-weight, var(--font-normal));
+  font-size: var(--ui-check-font-size, var(--text-sm));
+  line-height: var(--ui-check-line-height, calc(1em + var(--ui-check-line-height-ratio, 0.25lh)));
+  letter-spacing: var(--ui-check-letter-spacing, inherit);
   text-wrap: balance;
 
   &:has([type="radio"]) {
-    --ui-check-icon: var(--icon-radio);
+    --ui-check-icon: var(--mask-radio);
     --ui-check-radius: 50%;
   }
 
@@ -44,37 +29,28 @@
     display: flex;
     width: var(--ui-check-width);
     height: var(--ui-check-width);
-    background-color: color-mix(in sRGB, var(--ui-check-bg) var(--ui-check-bg-opacity), var(--ui-check-bg-mix));
-    border: var(--ui-check-border-width) solid color-mix(in sRGB, var(--ui-check-border-color) var(--ui-check-border-opacity), var(--ui-check-border-mix));
-    border-radius: var(--ui-check-radius);
-    user-select: none;
-    outline: var(--ui-check-outline-width) solid transparent;
+    background-color: var(--ui-check-bg, color-mix(in sRGB, var(--color-current) var(--ui-check-bg-opacity, 0), var(--ui-check-bg-mix, transparent)));
+    border: var(--ui-check-border-width, 1px) solid color-mix(in sRGB, var(--ui-check-border-color, var(--color-current)) var(--ui-check-border-opacity, calc(var(--tw-border-opacity, 0.2) * 100%)), var(--ui-check-border-mix, transparent));
+    border-radius: var(--ui-check-radius, var(--rounded-md));
+    outline: var(--ui-check-outline-width, 3px) solid transparent;
     outline-offset: 0;
-    justify-content: center;
-    align-items: center;
-    transition:
-      var(--transition-border),
-      var(--transition-background),
-      outline-color var(--transition-duration),
-      outline-offset var(--transition-duration);
-    font-size: var(--ui-check-icon-font-size);
-    cursor: pointer;
+    transition-property: var(--transition);
+    transition-timing-function: var(--ease-in-out);
+    transition-duration: var(--duration);
     flex-shrink: 0;
 
     &::before {
-      line-height: var(--ui-check-icon-font-size);
-      text-indent: 0;
-      display: block;
       transition: var(--transition-color), var(--transition-opacity), var(--transition-transform);
       color: var(--color-accent-fg);
       content: "";
       background-color: currentColor;
-      mask: var(--ui-check-icon);
+      mask: var(--ui-check-icon, var(--mask-check));
       opacity: 0;
       transform: scale(0);
       will-change: transform;
-      width: 1em;
-      height: 1em;
+      width: var(--ui-check-icon-width);
+      height: var(--ui-check-icon-width);
+      margin: auto;
     }
 
     &:where(:required) {
@@ -86,7 +62,7 @@
 
     &:not(:disabled) {
       &:is(:hover, :focus-visible) {
-        --ui-check-bg: var(--ui-check-checked-bg);
+        --color-current: var(--ui-check-checked-bg);
         --ui-check-border-color: var(--ui-check-checked-bg);
         --ui-check-border-opacity: 75%;
         --ui-check-bg-opacity: 10%;
@@ -96,23 +72,21 @@
         --ui-check-border-color: var(--ui-check-checked-bg);
         --ui-check-border-opacity: 75%;
 
-        outline-color: color-mix(in sRGB, var(--ui-check-checked-bg) var(--ui-check-outline-opacity), transparent);
-        outline-offset: var(--ui-check-outline-offset);
+        outline-color: color-mix(in sRGB, var(--ui-check-checked-bg) var(--ui-check-outline-opacity, 20%), transparent);
+        outline-offset: var(--ui-check-outline-offset, 0);
       }
     }
 
     &:disabled {
       --ui-check-bg-opacity: 15%;
-      --ui-check-bg: var(--color-current);
 
       cursor: not-allowed;
-      opacity: var(--ui-check-disabled-opacity);
+      opacity: var(--ui-check-disabled-opacity, 0.5);
     }
 
     &:checked {
       --ui-check-border-opacity: 0%;
-
-      background-color: var(--ui-check-checked-bg);
+      --ui-check-bg: var(--ui-check-checked-bg);
 
       &::before {
         opacity: 1;
@@ -122,7 +96,7 @@
   }
 
   &.invalid, .validated & :where(input):invalid {
-    --ui-check-bg: var(--color-error);
+    --color-current: var(--color-error);
     --ui-check-border-color: var(--color-error);
     --ui-check-checked-bg: var(--color-error);
     --ui-check-border-opacity: 100%;

package/src/ui/control/color.css

@@ -1,9 +1,9 @@
 .ui-control {
   --ui-control-color-swatch-width: 1.25rem;
   --ui-control-color-swatch-height: 1.25rem;
-  --ui-control-color-swatch-px: 2rem;
+  --ui-control-color-swatch-border-radius: var(--rounded-full);
 
-  & :where(input, textarea, select) {
+  & :where(input) {
     &::-webkit-color-swatch-wrapper {
       width: var(--ui-control-color-swatch-width);
       height: var(--ui-control-color-swatch-height);
@@ -13,19 +13,16 @@
     &::-moz-color-swatch {
       width: var(--ui-control-color-swatch-width);
       height: var(--ui-control-color-swatch-height);
-      border-radius: var(--ui-control-border-radius);
+      border-radius: var(--ui-control-color-swatch-border-radius);
       margin: 0;
     }
 
     &::-webkit-color-swatch {
-      border-radius: var(--ui-control-border-radius);
+      border-radius: var(--ui-control-color-swatch-border-radius);
     }
 
     &[type="color"] ~ label {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      padding-inline: calc(var(--ui-control-px) + var(--ui-control-color-swatch-px)) var(--ui-control-px);
+      margin-inline-start: calc(var(--ui-control-px) + var(--ui-control-color-swatch-width));
     }
   }
 }

package/src/ui/control/default.css

@@ -2,69 +2,54 @@
   --ui-control-height: 3rem;
   --ui-control-height-textarea: 8rem;
   --ui-control-px: 0.75rem;
-  --ui-control-ps: 0rem;
-  --ui-control-pe: 0rem;
-  --ui-control-bg: transparent;
-  --ui-control-color: currentColor;
-  --ui-control-placeholder-color: currentColor;
-  --ui-control-placeholder-opacity: 0.5;
-  --ui-control-font-size: 0.875rem;
-  --ui-control-font-weight: var(--font-medium);
+  --ui-control-py: 0.75rem;
   --ui-control-border-width: 1px;
-  --ui-control-border-color: var(--color-current);
-  --ui-control-border-mix: transparent;
-  --ui-control-border-opacity: 15%;
-  --ui-control-border-radius: var(--rounded);
-  --ui-control-outline-width: 3px;
-  --ui-control-outline-offset: 0;
-  --ui-control-outline-opacity: 20%;
-  --ui-control-disabled-opacity: 5%;
-  --ui-control-invalid-bg-opacity: 10%;
 
   display: grid;
-  grid-template-areas: "body";
-  position: relative;
-  font-size: var(--ui-control-font-size);
-  border-radius: var(--ui-control-border-radius);
-  background-color: var(--ui-control-bg);
-  transition:
-    var(--transition-border),
-    outline-color var(--transition-duration),
-    outline-offset var(--transition-duration);
-  font-weight: var(--ui-control-font-weight);
-  color: var(--ui-control-color);
-  border: var(--ui-control-border-width) solid color-mix(in sRGB, var(--ui-control-border-color) var(--ui-control-border-opacity), var(--ui-control-border-mix));
-  outline: var(--ui-control-outline-width) solid transparent;
-  outline-offset: 0;
   height: var(--ui-control-height);
+  font-family: var(--ui-contro-font-family, var(--font-primary));
+  font-weight: var(--ui-control-font-weight, var(--font-medium));
+  font-size: var(--ui-control-font-size, var(--text-sm));
+  letter-spacing: var(--ui-control-letter-spacing, inherit);
+  background-color: var(--ui-control-bg, transparent);
+  color: var(--ui-control-color, currentColor);
+  border-radius: var(--ui-control-border-radius, var(--rounded));
+  border: var(--ui-control-border-width) solid color-mix(in sRGB, var(--ui-control-border-color, var(--color-current)) var(--ui-control-border-opacity, 15%), var(--ui-control-border-mix, transparent));
+  outline: var(--ui-control-outline-width, 3px) solid transparent;
+  outline-offset: 0;
+  transition-property: var(--transition);
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: var(--duration);
+  padding-inline: var(--ui-control-px);
 
   &:has(textarea) {
     height: auto;
   }
 
   & > * {
-    grid-area: body;
+    grid-area: 1/-1;
+    margin-block: auto;
   }
 
   & :where(input, textarea, select) {
-    place-self: stretch;
-    padding-top: var(--ui-control-pt, 0);
-    padding-inline: calc(var(--ui-control-px) + var(--ui-control-ps)) calc(var(--ui-control-px) + var(--ui-control-pe));
     text-overflow: ellipsis;
-    overflow: hidden;
+    overflow: clip;
     display: flex;
     align-items: center;
+    padding-block: var(--ui-control-py);
+    padding-inline: calc(var(--ui-control-px) + var(--ui-control-ps, 0rem)) calc(var(--ui-control-px) + var(--ui-control-pe, 0rem));
+    margin-inline: calc(var(--ui-control-px) * -1);
 
     &:disabled {
       cursor: not-allowed;
-      background-color: color-mix(in sRGB, var(--color-current) var(--ui-control-disabled-opacity), var(--ui-control-bg));
+      background-color: color-mix(in sRGB, var(--color-current) var(--ui-control-disabled-opacity, 5%), var(--ui-control-bg, transparent));
     }
   }
 
   & :where(input, textarea) {
     &::placeholder {
-      color: var(--ui-control-placeholder-color);
-      opacity: var(--ui-control-placeholder-opacity);
+      color: var(--ui-control-placeholder-color, currentColor);
+      opacity: var(--ui-control-placeholder-opacity, 0.5);
     }
   }
 
@@ -77,8 +62,8 @@
     --ui-control-border-opacity: 100%;
     --ui-control-border-color: var(--color-accent);
 
-    outline-color: color-mix(in sRGB, var(--color-accent) var(--ui-control-outline-opacity), transparent);
-    outline-offset: var(--ui-control-outline-offset);
+    outline-color: color-mix(in sRGB, var(--color-accent) var(--ui-control-outline-opacity, 20%), transparent);
+    outline-offset: var(--ui-control-outline-offset, 0);
   }
 
   &.invalid, .validated &:has(:invalid) {
@@ -87,6 +72,6 @@
     --ui-control-color: var(--color-error);
     --color-accent: var(--color-error);
 
-    background-color: color-mix(in sRGB, var(--color-error) var(--ui-control-invalid-bg-opacity), var(--ui-control-bg));
+    background-color: color-mix(in sRGB, var(--color-error) var(--ui-control-invalid-bg-opacity, 10%), var(--ui-control-bg));
   }
 }

package/src/ui/control/file.css

@@ -1,25 +1,19 @@
 .ui-control:has([type="file"]) {
-  overflow: hidden;
-
   :where([type="file"]) {
-    --file-selector-button-bg-opacity: 15%;
-
     &:is(:hover, :focus) {
-      --file-selector-button-bg-opacity: 20%;
+      --ui-control-file-selector-button-bg-opacity: 20%;
     }
 
     &::file-selector-button {
       all: unset;
-      background-color: color-mix(in sRGB, var(--color-current) var(--file-selector-button-bg-opacity), transparent);
+      background-color: color-mix(in sRGB, var(--color-current) var(--ui-control-file-selector-button-bg-opacity, 15%), transparent);
       height: calc(var(--ui-control-height) - var(--ui-control-border-width) * 2);
-      padding: 0 1rem;
-      margin-right: var(--ui-control-px);
-      border-top-right-radius: var(--rounded);
-      border-bottom-right-radius: var(--rounded);
-      cursor: pointer;
-      margin-top: calc(var(--ui-control-py) * -1);
-      margin-left: calc(var(--ui-control-px) * -1);
+      padding-inline: var(--ui-control-px);
+      margin-inline: calc(var(--ui-control-px) * -1) var(--ui-control-px);
+      margin-block-start: calc(var(--ui-control-py) * -1);
+      border-radius: var(--ui-control-border-radius, var(--rounded));
       transition: var(--transition-background);
+      cursor: pointer;
     }
   }
 }

package/src/ui/control/floating-interactive.css

@@ -0,0 +1,12 @@
+.ui-control:where(:has(:not([type="color"]) ~ label)) {
+  --ui-control-placeholder-color: transparent;
+
+  & :where(input, textarea, select) {
+    &:is(:focus, :not(:placeholder-shown)) {
+      ~ label {
+        transform: translateY(calc(var(--ui-control-label-translate-y) * -1)) scale(var(--ui-control-label-scale));
+        opacity: var(--ui-control-label-focus-opacity, 0.5);
+      }
+    }
+  }
+}

package/src/ui/control/floating.css

@@ -1,43 +1,39 @@
-.ui-control:has(:not([type="color"]) ~ label) {
-  --ui-control-pt: 0.875rem;
-  --ui-control-label-font-size: 0.875rem;
-  --ui-control-label-font-weight: var(--font-medium);
-  --ui-control-label-transition-duration: 0.4s;
+.ui-control:where(:has(:not([type="color"]) ~ label)) {
+  --ui-control-label-translate-y: 0.625rem;
+  --ui-control-label-scale: 0.8;
 
   & :where(label) {
-    align-self: start;
     pointer-events: none;
-    transition: transform var(--ui-control-label-transition-duration) cubic-bezier(0.25, 0.8, 0.25, 1), var(--transition-color), var(--transition-opacity);
+    transition: var(--transition-transform), var(--transition-color), var(--transition-opacity);
     transform-origin: 0 50%;
     white-space: nowrap;
     text-overflow: ellipsis;
-    overflow: hidden;
-    transform: perspective(100px);
+    overflow: clip;
     will-change: transform;
-    font-weight: var(--ui-control-label-font-weight);
-    line-height: var(--ui-control-label-font-size);
-    margin-top: calc(var(--ui-control-height) / 2 - (var(--ui-control-font-size) / 2));
-    margin-inline: calc(var(--ui-control-px) + var(--ui-control-ps)) calc(var(--ui-control-px) + var(--ui-control-pe));
+    margin-inline: var(--ui-control-ps, 0) var(--ui-control-pe, 0);
   }
 
-  &:has(:required) label {
-    &::after {
-      color: var(--color-error);
-      content: " *";
-    }
+  &:where(:has(:required)) :where(label)::after {
+    color: var(--color-error);
+    content: " *";
   }
 
-  & :where(input) {
-    &::-webkit-calendar-picker-indicator {
-      margin-top: calc(var(--ui-control-pt) * -1);
-    }
+  & :where(textarea) {
+    padding-block-start: calc(var(--ui-control-py) + var(--ui-control-label-translate-y) * var(--ui-control-label-scale));
 
-    &::-webkit-search-cancel-button {
-      transform: translateY(calc(var(--ui-control-pt) / 2 * -1));
+    & + :where(label) {
+      margin-block-start: var(--ui-control-py);
     }
   }
 
-  & :where(textarea) {
-    padding-top: calc(var(--ui-control-pt) + calc(var(--ui-control-height) / 2 - (var(--ui-control-font-size))));
+  & :where(input, select) {
+    padding-block: calc(var(--ui-control-py) + var(--ui-control-label-translate-y) * var(--ui-control-label-scale)) calc(var(--ui-control-py) - var(--ui-control-label-translate-y) * var(--ui-control-label-scale));
+
+    &::-webkit-calendar-picker-indicator,
+    &::-webkit-search-cancel-button,
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      transform: translateY(calc(var(--ui-control-label-translate-y) * var(--ui-control-label-scale) * -1));
+    }
   }
 }

package/src/ui/control/icon.css

@@ -21,21 +21,20 @@
   }
 
   & :where(.icon-l) {
-    inset-inline-start: var(--ui-control-px);
     margin-inline-end: auto;
   }
 
   & :where(.icon-r) {
-    inset-inline-end: var(--ui-control-px);
     margin-inline-start: auto;
   }
 
   & :where(.icon-l, .icon-r) {
-    position: relative;
     display: flex;
-    flex-direction: row;
     align-items: center;
-    align-self: center;
     gap: var(--ui-control-icon-gap);
   }
+
+  &:has(textarea) :where(.icon-l, .icon-r) {
+    margin-block-start: var(--ui-control-py);
+  }
 }

package/src/ui/control/index.css

@@ -3,5 +3,5 @@
 @import "icon.css";
 @import "file.css";
 @import "floating.css";
-@import "floating-focus.css";
+@import "floating-interactive.css";
 @import "select.css";

package/src/ui/control/select.css

@@ -1,7 +1,7 @@
 .ui-control:has(select) {
   --ui-control-select-icon-size: 1.5rem;
-  --ui-control-select-icon-me: calc(var(--ui-control-px) - 0.25rem);
-  --ui-control-pe: calc(var(--ui-control-select-icon-size) + 0.25rem);
+  --ui-control-select-icon-me: -0.25rem;
+  --ui-control-pe: calc(var(--ui-control-select-icon-size) + var(--ui-control-select-icon-me));
 
   &:has(.icon-r) {
     --ui-control-icon-count-e: 2;
@@ -16,9 +16,9 @@
     width: var(--ui-control-select-icon-size);
     height: var(--ui-control-select-icon-size);
     background-color: currentColor;
-    mask: var(--icon-angle-down);
+    mask: var(--mask-angle-down);
     pointer-events: none;
-    grid-area: body;
+    grid-area: 1/-1;
     align-self: center;
     margin-inline: auto var(--ui-control-select-icon-me);
   }

package/src/ui/heading/default.css

@@ -1,13 +1,8 @@
 .ui-heading {
-  --ui-heading-font-family: var(--font-primary);
-  --ui-heading-font-weight: var(--font-semibold);
-  --ui-heading-font-size: 1.25rem;
-  --ui-heading-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));
-  --ui-heading-line-height-ratio: 0.375rem;
-
-  font-family: var(--ui-heading-font-family);
-  font-size: var(--ui-heading-font-size);
-  line-height: var(--ui-heading-line-height);
-  font-weight: var(--ui-heading-font-weight);
+  font-family: var(--ui-heading-font-family, var(--font-primary));
+  font-weight: var(--ui-heading-font-weight, var(--font-semibold));
+  font-size: var(--ui-heading-font-size, var(--text-xl));
+  line-height: var(--ui-heading-line-height, calc(1em + var(--ui-heading-line-height-ratio, 0.25lh)));
+  letter-spacing: var(--ui-heading-letter-spacing, 0);
   text-wrap: balance;
 }

package/src/ui/heading/lg.css

@@ -1,3 +1,3 @@
-.ui-heading:where(.lg) {
-  --ui-heading-font-size: 1.875rem;
+.ui-heading:is(.lg) {
+  --ui-heading-font-size: var(--text-3xl);
 }

package/src/ui/heading/sm.css

@@ -1,4 +1,3 @@
-.ui-heading:where(.sm) {
-  --ui-heading-font-size: 1.125rem;
-  --ui-heading-line-height-ratio: 0.125rem;
+.ui-heading:is(.sm) {
+  --ui-heading-font-size: var(--text-lg);
 }