winduum 0.1.18 → 0.2.0-beta.2

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

@@ -0,0 +1,8 @@
+.ui-btn:where(.hover-fill) {
+  --ui-btn-hover-mix: black;
+  --ui-btn-hover-opacity: 100%;
+  --ui-btn-active-mix: black;
+  --ui-btn-active-opacity: 90%;
+  --ui-btn-hover-color: var(--color-light);
+  --ui-btn-active-color: var(--color-light);
+}

package/src/ui/btn/index.css

@@ -0,0 +1,15 @@
+@import "default.css";
+@import "sm.css";
+@import "lg.css";
+@import "loading.css";
+@import "wide.css";
+@import "bordered.css";
+@import "hover-fill.css";
+@import "gradient.css";
+@import "gradient-bordered.css";
+@import "ghosted.css";
+@import "muted.css";
+@import "raised.css";
+@import "square.css";
+@import "circle.css";
+@import "group.css";

package/src/ui/btn/lg.css

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

package/src/ui/btn/loading.css

@@ -0,0 +1,24 @@
+.ui-btn:is(.loading) {
+  pointer-events: none;
+  color: transparent;
+
+  & > * {
+    opacity: 0;
+  }
+
+  &::after {
+    z-index: 1;
+    width: var(--ui-btn-loading-width);
+    height: var(--ui-btn-loading-width);
+    content: "";
+    border: var(--ui-btn-loading-border-width) solid var(--color-current);
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.45s infinite linear;
+    position: absolute;
+    margin-left: calc(var(--ui-btn-loading-width) / 2 * -1);
+    margin-top: calc(var(--ui-btn-loading-width) / 2 * -1);
+    left: 50%;
+    top: 50%;
+  }
+}

package/src/ui/btn/muted.css

@@ -0,0 +1,4 @@
+.ui-btn:where(.muted) {
+  --ui-btn-hover-opacity: 30%;
+  --ui-btn-bg-opacity: 10%;
+}

package/src/ui/btn/raised.css

@@ -0,0 +1,8 @@
+.ui-btn:where(.raised) {
+  --ui-btn-border-width: 2px;
+  --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.5) * 100%);
+
+  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));
+}

package/src/ui/btn/sm.css

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

package/src/ui/btn/square.css

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

package/src/ui/btn/wide.css

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

package/src/ui/btn.css

@@ -1,234 +1 @@
-:where(.ui-btn) {
-  --color-current: var(--color-light);
-  --ui-btn-width: max-content;
-  --ui-btn-height: 2.25rem;
-  --ui-btn-py: 0.375rem;
-  --ui-btn-px: 0.75rem;
-  --ui-btn-border-radius: var(--rounded);
-  --ui-btn-font-size: 0.875rem;
-  --ui-btn-font-weight: var(--font-medium);
-  --ui-btn-bg: rgb(var(--color-accent) / var(--ui-btn-bg-opacity));
-  --ui-btn-bg-opacity: var(--tw-bg-opacity, 1);
-  --ui-btn-color: rgb(var(--color-current) / var(--ui-btn-color-opacity));
-  --ui-btn-color-opacity: var(--tw-text-opacity, 1);
-  --ui-btn-hover-filter: invert(1);
-  --ui-btn-hover-opacity: 0.2;
-  --ui-btn-focus-opacity: 0.3;
-  --ui-btn-disabled-opacity: 0.7;
-  --ui-btn-outline-width: 2px;
-  --ui-btn-outline-opacity: 0.5;
-  --ui-btn-icon-font-size: 1.25rem;
-  --ui-btn-gap: 0.375rem;
-  --ui-btn-loading-width: 1rem;
-  --ui-btn-loading-border-width: 2px;
-
-  width: var(--ui-btn-width);
-  height: var(--ui-btn-height);
-  padding: var(--ui-btn-py) var(--ui-btn-px);
-  border-radius: var(--ui-btn-border-radius);
-  font-size: var(--ui-btn-font-size);
-  font-weight: var(--ui-btn-font-weight);
-  background-color: var(--ui-btn-bg);
-  color: var(--ui-btn-color);
-  user-select: none;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  white-space: nowrap;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 0;
-  transition: var(--transition-opacity), var(--transition-background), var(--transition-color), var(--transition-shadow);
-  gap: var(--ui-btn-gap);
-
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background-color: rgb(var(--color-current));
-    filter: var(--ui-btn-hover-filter);
-    z-index: -1;
-    opacity: 0;
-    transition: var(--transition-opacity);
-  }
-
-  & :where(svg) {
-    width: 1em;
-    height: 1em;
-    font-size: var(--ui-btn-icon-font-size);
-  }
-
-  &:where(.is-sm) {
-    --ui-btn-height: 2rem;
-    --ui-btn-px: 1rem;
-  }
-
-  &:where(.is-lg) {
-    --ui-btn-height: 3rem;
-    --ui-btn-px: 1.75rem;
-  }
-
-  &:where(.is-loading) {
-    pointer-events: none;
-    color: transparent !important;
-
-    & > * {
-      opacity: 0;
-    }
-
-    &::after {
-      z-index: 1;
-      width: var(--ui-btn-loading-width);
-      height: var(--ui-btn-loading-width);
-      content: "";
-      border: var(--ui-btn-loading-border-width) solid rgb(var(--color-current));
-      border-right-color: transparent;
-      border-radius: 50%;
-      animation: spin 0.45s infinite linear;
-      position: absolute;
-      margin-left: calc(var(--ui-btn-loading-width) / 2 * -1);
-      margin-top: calc(var(--ui-btn-loading-width) / 2 * -1);
-      left: 50%;
-      top: 50%;
-    }
-  }
-
-  &:where(.is-wide) {
-    padding-left: calc(var(--ui-btn-px) * 2);
-    padding-right: calc(var(--ui-btn-px) * 2);
-  }
-
-  &:where(.is-outline, .is-muted, .is-text) {
-    --color-current: var(--color-accent);
-    --ui-btn-hover-opacity: 0.1;
-    --ui-btn-hover-filter: none;
-
-    background-color: transparent;
-
-    &::before {
-      background-color: var(--ui-btn-bg);
-    }
-  }
-
-  &:where(.is-outline) {
-    --ui-btn-focus-opacity: 0.15;
-
-    outline: var(--ui-btn-outline-width) solid rgb(var(--color-accent) / var(--ui-btn-outline-opacity));
-    outline-offset: calc(var(--ui-btn-outline-width) * -1);
-  }
-
-  &:where(.is-outline-gradient) {
-    --ui-btn-focus-opacity: 0.15;
-    --color-accent: var(--color-default);
-    --color-current: var(--color-accent);
-
-    &.is-loading.is-hover-fill {
-      --color-current: var(--color-light);
-    }
-
-    &:not(.is-loading) {
-      &::after {
-        content: "";
-        position: absolute;
-        background-color: rgb(var(--color-background));
-        inset: var(--ui-btn-outline-width);
-        border-radius: calc(var(--ui-btn-border-radius) / 1.25);
-        z-index: -1;
-        transition: var(--transition-opacity);
-      }
-    }
-  }
-
-  &:where(.is-muted) {
-    --ui-btn-hover-opacity: 0.3;
-
-    &::before {
-      opacity: 0.1;
-    }
-  }
-
-  &:where(.is-raised) {
-    --ui-btn-outline-opacity: 0.15;
-
-    outline: var(--ui-btn-outline-width) solid rgb(var(--color-current) / var(--ui-btn-outline-opacity));
-    outline-offset: calc(var(--ui-btn-outline-width) * -1);
-  }
-
-  &:where(.is-square, .is-circle) {
-    --ui-btn-py: var(--ui-btn-py);
-    --ui-btn-width: var(--ui-btn-height);
-  }
-
-  &:where(.is-circle) {
-    --ui-btn-border-radius: var(--rounded-full);
-  }
-
-  &:where(.is-hover-fill) {
-    --ui-btn-hover-opacity: 1;
-  }
-
-  &:not(:disabled):hover {
-    @media (hover: hover) and (pointer: fine) {
-      &::before {
-        opacity: var(--ui-btn-hover-opacity);
-      }
-
-      &.is-hover-fill {
-        --color-current: var(--color-light);
-      }
-
-      &.is-outline-gradient {
-        &::before, &::after {
-          opacity: 0;
-        }
-      }
-    }
-  }
-
-  &:is(:not(:disabled):active, .is-active) {
-    &::before {
-      opacity: var(--ui-btn-hover-opacity);
-    }
-
-    &.is-outline-gradient {
-      &::before, &::after {
-        opacity: 0;
-      }
-    }
-
-    &.is-hover-fill {
-      --color-current: var(--color-light);
-    }
-  }
-
-  &:focus-visible {
-    z-index: 2;
-    box-shadow:
-      0 0 0 0 rgb(var(--color-current)),
-      0 0 0 max(2px, var(--ui-btn-outline-width)) rgb(var(--color-accent) / var(--ui-btn-focus-opacity));
-  }
-
-  &:disabled {
-    opacity: var(--ui-btn-disabled-opacity);
-    cursor: not-allowed;
-  }
-}
-
-:where(.ui-btn-group) {
-  display: flex;
-
-  & :where(.ui-btn) {
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      margin-left: calc(var(--ui-btn-outline-width) * -1);
-    }
-
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-}
+@import "btn/index.css";

package/src/ui/check.css

@@ -0,0 +1,130 @@
+.ui-check {
+  --ui-check-width: 1.375rem;
+  --ui-check-font-size: 0.875rem;
+  --ui-check-gap: 0.625rem;
+  --ui-check-bg: var(--color-body);
+  --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-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);
+  flex-wrap: wrap;
+  width: fit-content;
+  font-size: var(--ui-check-font-size);
+
+  &:has([type="radio"]) {
+    --ui-check-icon: var(--icon-radio);
+    --ui-check-radius: 50%;
+  }
+
+  & :where(label[for], input) {
+    cursor: pointer;
+  }
+
+  & :where(a) {
+    color: var(--color-accent);
+    text-decoration: underline;
+  }
+
+  & :where(input) {
+    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;
+    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;
+
+    &::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-light);
+      content: "";
+      background-color: currentColor;
+      mask: var(--ui-check-icon);
+      opacity: 0;
+      transform: scale(0);
+      will-change: transform;
+      width: 1em;
+      height: 1em;
+    }
+
+    &:where(:required) {
+      & + *::after {
+        color: var(--color-error);
+        content: " *";
+      }
+    }
+
+    &:not(:disabled) {
+      &:is(:hover, :focus-visible) {
+        --ui-check-bg: var(--ui-check-checked-bg);
+        --ui-check-border-color: var(--ui-check-checked-bg);
+        --ui-check-border-opacity: 75%;
+        --ui-check-bg-opacity: 10%;
+      }
+
+      &:focus {
+        --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);
+      }
+    }
+
+    &:disabled {
+      --ui-check-bg-opacity: 15%;
+      --ui-check-bg: var(--color-current);
+
+      cursor: not-allowed;
+      opacity: var(--ui-check-disabled-opacity);
+    }
+
+    &:checked {
+      --ui-check-border-opacity: 0%;
+
+      background-color: var(--ui-check-checked-bg);
+
+      &::before {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
+
+  &.invalid, .validated & :where(input):invalid {
+    --color-current: var(--color-error);
+    --ui-check-bg: 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/default-rgb.css

@@ -0,0 +1,18 @@
+.ui-control {
+  --ui-control-border-color: var(--color-current-rgb);
+
+  & :where(input, textarea, select) {
+    border: var(--ui-control-border-width) solid rgb(var(--ui-control-border-color) / var(--ui-control-border-opacity));
+
+    &:focus {
+      --ui-control-border-color: var(--color-accent-rgb);
+    }
+  }
+
+  &.invalid, .validated & :where(input, textarea, select):invalid {
+    --ui-control-border-color: var(--color-error-rgb);
+    --color-accent-rgb: var(--color-error-rgb);
+
+    background-color: rgb(var(--color-error-rgb) / var(--ui-control-error-opacity));
+  }
+}

package/src/ui/control/default.css

@@ -0,0 +1,94 @@
+.ui-control {
+  --ui-control-height: 3rem;
+  --ui-control-height-textarea: 8rem;
+  --ui-control-pt-floating: 1.25rem;
+  --ui-control-pb-floating: 0.4375rem;
+  --ui-control-py: 0.875rem;
+  --ui-control-px: 0.875rem;
+  --ui-control-pl: var(--ui-control-px);
+  --ui-control-pr: var(--ui-control-px);
+  --ui-control-bg: var(--color-body);
+  --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-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: 2px;
+  --ui-control-outline-offset: 0;
+  --ui-control-outline-opacity: 20%;
+  --ui-control-disabled-opacity: 5%;
+  --ui-control-error-opacity: 10%;
+
+  display: grid;
+  grid-template-areas: "input";
+  font-size: var(--ui-control-font-size);
+  position: relative;
+  border-radius: var(--ui-control-border-radius);
+
+  & :where(input, textarea, select) {
+    grid-area: input;
+    background-clip: padding-box;
+    background-color: var(--ui-control-bg);
+    padding: var(--ui-control-py) var(--ui-control-pr) var(--ui-control-py) var(--ui-control-pl);
+    transition:
+      var(--transition-border),
+      outline-color var(--transition-duration),
+      outline-offset var(--transition-duration);
+    line-height: normal;
+    font-size: inherit;
+    height: var(--ui-control-height);
+    font-weight: var(--ui-control-font-weight);
+    border-radius: inherit;
+    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;
+
+    &:focus {
+      --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);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      background-color: color-mix(in sRGB, var(--color-base) var(--ui-control-disabled-opacity), var(--ui-control-bg));
+    }
+
+    &:required ~ label {
+      &::after {
+        color: var(--color-error);
+        content: " *";
+      }
+    }
+  }
+
+  & :where(input, textarea) {
+    &::placeholder {
+      color: var(--ui-control-placeholder-color);
+      opacity: var(--ui-control-placeholder-opacity);
+    }
+  }
+
+  & :where(textarea) {
+    resize: vertical;
+    overflow: hidden;
+    min-height: var(--ui-control-height-textarea);
+  }
+
+  &.invalid, .validated & :where(input, textarea, select):invalid {
+    --ui-control-border-opacity: 100%;
+    --ui-control-border-color: var(--color-error);
+    --ui-control-color: var(--color-error);
+    --color-accent: var(--color-error);
+
+    background-color: color-mix(in sRGB, var(--color-error) var(--ui-control-error-opacity), var(--ui-control-bg));
+  }
+}

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

@@ -0,0 +1,8 @@
+.ui-control:where(.floating) {
+  & :where(input, textarea, select) {
+    &:is(:focus, :not(:placeholder-shown)) ~ label {
+      transform: var(--ui-control-floating-label-focus-transform);
+      opacity: var(--ui-control-floating-label-focus-opacity);
+    }
+  }
+}

package/src/ui/control/floating.css

@@ -0,0 +1,31 @@
+.ui-control:where(.floating) {
+  --ui-control-floating-label-font-size: 0.875rem;
+  --ui-control-floating-label-font-weight: var(--font-medium);
+  --ui-control-floating-label-focus-transform: translateY(-0.6875rem) scale(0.8);
+  --ui-control-floating-label-focus-opacity: 50%;
+  --ui-control-floating-label-transition-duration: 0.4s;
+  --ui-control-placeholder-color: transparent;
+
+  & :where(label) {
+    grid-area: input;
+    align-self: start;
+    pointer-events: none;
+    transition: transform var(--ui-control-floating-label-transition-duration) cubic-bezier(0.25, 0.8, 0.25, 1), var(--transition-color), var(--transition-opacity);
+    transform-origin: 0 50%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    transform: perspective(100px);
+    will-change: transform;
+    font-weight: var(--ui-control-floating-label-font-weight);
+    margin-left: var(--ui-control-pl);
+    margin-right: var(--ui-control-pr);
+    line-height: var(--ui-control-floating-label-font-size);
+    margin-top: calc(var(--ui-control-height) / 2 - (var(--ui-control-font-size) / 2));
+  }
+
+  & :where(input, textarea, select) {
+    padding-top: calc(var(--ui-control-pt-floating));
+    padding-bottom: calc(var(--ui-control-pb-floating));
+  }
+}

package/src/ui/control/group.css

@@ -0,0 +1,22 @@
+.ui-control-group {
+  display: flex;
+  flex-wrap: wrap;
+
+  & :where(.ui-btn) {
+    --ui-btn-border-width: 1px;
+    --ui-btn-height: 3rem;
+  }
+
+  & > * {
+    &:not(:first-child) {
+      border-left: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}

package/src/ui/control/icon.css

@@ -0,0 +1,66 @@
+.ui-control {
+  --ui-control-icon-font-size: 1.25rem;
+  --ui-control-icon-count-l: 1;
+  --ui-control-icon-count-r: 1;
+  --ui-control-icon-gap: 0.375rem;
+  --ui-control-icon-inset-x: calc(var(--ui-control-px) - 0.25rem);
+  --ui-control-icon-inset-x-gap: 0.125rem;
+  --ui-control-icon-offset-l: calc(var(--ui-control-icon-inset-x) + var(--ui-control-icon-inset-x-gap) + (var(--ui-control-icon-font-size) + var(--ui-control-icon-gap)) * var(--ui-control-icon-count-l));
+  --ui-control-icon-offset-r: calc(var(--ui-control-icon-inset-x) + var(--ui-control-icon-inset-x-gap) + (var(--ui-control-icon-font-size) + var(--ui-control-icon-gap)) * var(--ui-control-icon-count-r));
+
+  &:has(.icon-l) {
+    --ui-control-pl: var(--ui-control-icon-offset-l);
+  }
+
+  &:has(.icon-r) {
+    --ui-control-pr: var(--ui-control-icon-offset-r);
+  }
+
+  &:has(.icon-l > *:nth-child(2)) {
+    --ui-control-icon-count-r: 2;
+  }
+
+  &:has(.icon-r > *:nth-child(2)) {
+    --ui-control-icon-count-r: 2;
+  }
+
+  & :where(svg) {
+    font-size: var(--ui-control-icon-font-size);
+    width: 1em;
+    height: var(--ui-control-height);
+  }
+
+  & :where([class^="icon-"]) {
+    grid-area: input;
+    content: "";
+    position: relative;
+    line-height: 1em;
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--ui-control-icon-gap);
+    transition: var(--transition-opacity);
+
+    &:where(.icon-l) {
+      left: var(--ui-control-icon-inset-x);
+      margin-right: auto;
+    }
+
+    &:where(.icon-r) {
+      right: var(--ui-control-icon-inset-x);
+      margin-left: auto;
+    }
+  }
+
+  & :where([aria-label]) {
+    &::after {
+      content: attr(aria-label);
+      font-size: var(--ui-control-font-size);
+      min-width: var(--ui-control-icon-font-size);
+      text-align: center;
+      line-height: var(--ui-control-icon-font-size);
+      display: block;
+    }
+  }
+}