winduum 0.5.0-next.8 → 0.5.0

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(--duration),
-      outline-offset var(--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,59 @@
   --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(--duration),
-    outline-offset var(--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);
+  grid-template:
+    [control-start] calc(var(--ui-control-py) - var(--ui-control-border-width))
+    [control-p] 1fr
+    calc(var(--ui-control-py) - var(--ui-control-border-width)) [control-end] /
+    [control-start] var(--ui-control-px)
+    [control-p] 1fr
+    var(--ui-control-px) [control-end];
 
   &:has(textarea) {
     height: auto;
   }
 
-  & > * {
-    grid-area: body;
+  & > :where(*) {
+    grid-area: control-p;
+    align-self: center;
   }
 
   & :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;
-    display: flex;
-    align-items: center;
+    overflow: clip;
+    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));
+    grid-area: control;
+    align-self: stretch;
 
     &: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 +67,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 +77,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,22 @@
 .ui-control:has([type="file"]) {
-  overflow: hidden;
+  overflow: clip;
 
   :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-top-right-radius: var(--ui-control-border-radius, var(--rounded));
+      border-bottom-right-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) {
+      align-self: start;
     }
   }
 
-  & :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

@@ -1,41 +1,40 @@
 .ui-control {
   --ui-control-icon-size: 1.25rem;
   --ui-control-icon-gap: 0.375rem;
-  --ui-control-icon-count-s: 1;
-  --ui-control-icon-count-e: 1;
+  --ui-control-icon-s: calc(var(--ui-control-icon-count-s, 1) * (var(--ui-control-icon-size) + var(--ui-control-icon-gap)) - var(--ui-control-icon-gap));
+  --ui-control-icon-e: calc(var(--ui-control-icon-count-e, 1) * (var(--ui-control-icon-size) + var(--ui-control-icon-gap)) - var(--ui-control-icon-gap));
 
-  &:has(.icon-l) {
-    --ui-control-ps: calc(var(--ui-control-icon-count-s) * (var(--ui-control-icon-size) + var(--ui-control-icon-gap)) - var(--ui-control-icon-gap) + var(--ui-control-px));
+  &:has(.icon-s) {
+    --ui-control-ps: calc(var(--ui-control-icon-s) + var(--ui-control-px));
   }
 
-  &:has(.icon-r) {
-    --ui-control-pe: calc(var(--ui-control-icon-count-e) * (var(--ui-control-icon-size) + var(--ui-control-icon-gap)) - var(--ui-control-icon-gap) + var(--ui-control-px));
+  &:has(.icon-e) {
+    --ui-control-pe: calc(var(--ui-control-icon-e) + var(--ui-control-px));
   }
 
-  &:has(.icon-l > *:nth-child(2)) {
+  &:has(.icon-s > *:nth-child(2)) {
     --ui-control-icon-count-s: 2;
   }
 
-  &:has(.icon-r > *:nth-child(2)) {
+  &:has(.icon-e > *:nth-child(2)) {
     --ui-control-icon-count-e: 2;
   }
 
-  & :where(.icon-l) {
-    inset-inline-start: var(--ui-control-px);
+  & :where(.icon-s) {
     margin-inline-end: auto;
   }
 
-  & :where(.icon-r) {
-    inset-inline-end: var(--ui-control-px);
+  & :where(.icon-e) {
     margin-inline-start: auto;
   }
 
-  & :where(.icon-l, .icon-r) {
-    position: relative;
+  & :where(.icon-s, .icon-e) {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    align-self: center;
     gap: var(--ui-control-icon-gap);
   }
+
+  &:has(textarea) :where(.icon-s, .icon-e) {
+    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,13 +1,13 @@
 .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) {
+  &:has(.icon-e) {
     --ui-control-icon-count-e: 2;
   }
 
-  & :where(.icon-r) {
+  & :where(.icon-e) {
     margin-inline-end: var(--ui-control-select-icon-size);
   }
 
@@ -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: control-p;
     align-self: center;
     margin-inline: auto var(--ui-control-select-icon-me);
   }

package/src/ui/image.css

@@ -1,32 +1,21 @@
 .ui-image {
   position: relative;
-  display: block;
+  display: flex;
   border-radius: inherit;
   flex-shrink: 0;
+  max-width: max-content;
 
-  &:not([class*="bg-"])::before {
-    content: "";
+  &::before {
     position: absolute;
     inset: 0;
-    background:
-      linear-gradient(
-        270deg,
-        color-mix(in sRGB, var(--color-body) 50%, var(--color-main)),
-        color-mix(in sRGB, var(--color-body) 80%, var(--color-main)),
-        color-mix(in sRGB, var(--color-body) 80%, var(--color-main)),
-        color-mix(in sRGB, var(--color-body) 50%, var(--color-main))
-      );
-    background-size: 400% 100%;
-    animation: skeleton-wave 1.5s linear infinite;
-    border-radius: inherit;
     z-index: -1;
-    opacity: 0.3;
+    border-radius: inherit;
   }
 
-  & > *:not(source) {
-    display: block;
-    width: 100%;
-    height: 100%;
+  & > :where(img, video, iframe, object, svg) {
     border-radius: inherit;
+    min-width: 100%;
+    height: auto;
+    object-fit: cover;
   }
 }

package/src/ui/info.css

@@ -1,7 +1,8 @@
 .ui-info {
-  --ui-info-font-size: 0.75rem;
-  --ui-info-font-weight: var(--font-normal);
-
-  font-size: var(--ui-info-font-size);
-  font-weight: var(--ui-info-font-weight);
+  font-family: var(--ui-info-font-family, inherit);
+  font-weight: var(--ui-info-font-weight, inherit);
+  font-size: var(--ui-info-font-size, var(--text-xs));
+  line-height: var(--ui-info-line-height, calc(1em + var(--ui-info-line-height-ratio, 0.15lh)));
+  letter-spacing: var(--ui-info-letter-spacing, inherit);
+  text-wrap: balance;
 }

package/src/ui/label.css

@@ -1,7 +1,8 @@
 .ui-label {
-  --ui-label-font-size: 0.875rem;
-  --ui-label-font-weight: var(--font-medium);
-
-  font-size: var(--ui-label-font-size);
-  font-weight: var(--ui-label-font-weight);
+  font-family: var(--ui-label-font-family, inherit);
+  font-weight: var(--ui-label-font-weight, inherit);
+  font-size: var(--ui-label-font-size, var(--text-sm));
+  line-height: var(--ui-label-line-height, calc(1em + var(--ui-label-line-height-ratio, 0.15lh)));
+  letter-spacing: var(--ui-label-letter-spacing, inherit);
+  text-wrap: balance;
 }

package/src/ui/notice.css

@@ -1,26 +1,18 @@
 .ui-notice {
   --color-current: var(--color-accent);
-  --ui-notice-bg: var(--color-accent);
-  --ui-notice-py: 1.25rem;
-  --ui-notice-px: 1.5rem;
-  --ui-notice-font-size: 0.875rem;
-  --ui-notice-border-radius: var(--rounded);
   --ui-notice-outline-width: 1px;
-  --ui-notice-outline-offset: calc(var(--ui-notice-outline-width) * -1);
-  --ui-notice-outline-opacity: 10%;
-  --ui-notice-gap: 1.25rem;
 
   position: relative;
   display: flex;
   flex-direction: column;
-  padding: var(--ui-notice-py) var(--ui-notice-px);
-  font-size: var(--ui-notice-font-size);
-  border-radius: var(--ui-notice-border-radius);
-  background-color: color-mix(in sRGB, var(--ui-notice-bg) 10%, transparent);
-  outline: var(--ui-notice-outline-width) solid color-mix(in sRGB, var(--ui-notice-bg) var(--ui-notice-outline-opacity), transparent);
-  outline-offset: var(--ui-notice-outline-offset);
+  padding: var(--ui-notice-py, 1.25rem) var(--ui-notice-px, 1.5rem);
+  font-size: var(--ui-notice-font-size, var(--text-sm));
+  border-radius:  var(--rounded);
+  background-color: color-mix(in sRGB, var(--color-accent) 10%, transparent);
+  outline: var(--ui-notice-outline-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-notice-outline-opacity, 10%), transparent);
+  outline-offset: var(--ui-notice-outline-offset, calc(var(--ui-notice-outline-width) * -1));
   color: var(--color-accent);
-  gap: var(--ui-notice-gap);
+  gap: var(--ui-notice-gap, 1.25rem);
   text-wrap: balance;
 
   & :where(hr) {

package/src/ui/progress/default.css

@@ -1,14 +1,13 @@
 .ui-progress {
-  --ui-progress-height: 1rem;
-  --ui-progress-border-radius: var(--rounded-full);
   --ui-progress-bg: color-mix(in sRGB, var(--color-accent) var(--ui-progress-bg-opacity), var(--color-body));
-  --ui-progress-bg-opacity: 10%;
+  --ui-progress-bg-opacity: calc(var(--tw-bg-opacity, 1) * 10%);
 
   appearance: none;
-  height: var(--ui-progress-height);
-  border-radius: var(--ui-progress-border-radius);
+  height: var(--ui-progress-height, 1rem);
+  border-radius: var(--ui-progress-border-radius, var(--rounded-full));
   background-color: var(--ui-progress-bg);
   width: 100%;
+  overflow: clip;
 
   &::-webkit-progress-bar {
     background-color: transparent;
@@ -16,12 +15,10 @@
 
   &::-webkit-progress-value {
     background-color: var(--color-accent);
-    border-radius: var(--ui-progress-border-radius);
   }
 
   &::-moz-progress-bar {
     background-color: var(--color-accent);
-    border-radius: var(--ui-progress-border-radius);
   }
 
   &:indeterminate {
@@ -30,7 +27,6 @@
     background-position: top left;
     background-repeat: no-repeat;
     background-size: 150% 150%;
-    border-radius: var(--ui-progress-border-radius);
 
     &::-moz-progress-bar {
       background-color: transparent;

package/src/ui/progress/lg.css

@@ -1,3 +1,3 @@
-.ui-progress:where(.lg) {
+.ui-progress:is(.lg) {
   --ui-progress-height: 1.5rem;
 }

package/src/ui/progress/sm.css

@@ -1,3 +1,3 @@
-.ui-progress:where(.sm) {
+.ui-progress:is(.sm) {
   --ui-progress-height: 0.5rem;
 }