winduum 0.1.17 → 0.2.0-beta.1

package/src/base/tailwind/utilities.css

@@ -1,17 +1,17 @@
 @layer utilities {
-  :where(.animate) {
+  .animate {
     animation-duration: var(--transition-duration);
     animation-fill-mode: both;
   }
 
-  :where(.container) {
+  .container {
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--container-padding);
     padding-right: var(--container-padding);
     max-width: var(--container-width);
 
-    &:where(.is-sm) {
+    &:where(.sm) {
       --container-width: var(--container-width-sm);
     }
   }

package/src/base/theme/dark-rgb.css

@@ -0,0 +1,5 @@
+:root.dark {
+  --color-secondary-rgb: 39 41 46;
+  --color-base-rgb: 201 209 217;
+  --color-body-rgb: 25 26 27;
+}

package/src/base/theme/dark.css

@@ -1,9 +1,7 @@
 :root.dark {
-  --color-default: 201 209 217;
-  --color-invert: 14 17 22;
-  --color-secondary: 39 41 46;
-  --color-background: 25 26 27;
-  --color-background-100: 14 15 16;
-  --color-background-200: 26 32 38;
-  --color-background-300: 30 36 46;
+  --color-base-mix: black;
+  --color-body-mix: white;
+  --color-secondary: rgb(var(--color-secondary-rgb));
+  --color-base: rgb(var(--color-base-rgb));
+  --color-body: rgb(var(--color-body-rgb));
 }

package/src/base/theme/default-rgb.css

@@ -0,0 +1,14 @@
+:root {
+  --color-primary-rgb: 3 138 255;
+  --color-secondary-rgb: 69 71 72;
+  --color-base-rgb: 17 19 21;
+  --color-body-rgb: 255 255 255;
+  --color-success-rgb: 33 154 67;
+  --color-error-rgb: 254 50 75;
+  --color-warning-rgb: 254 179 53;
+  --color-info-rgb: 45 168 234;
+  --color-light-rgb: 255 255 255;
+  --color-dark-rgb: 17 19 21;
+  --color-accent-rgb: var(--color-primary-rgb);
+  --color-current-rgb: var(--color-base-rgb);
+}

package/src/base/theme/default.css

@@ -1,17 +1,22 @@
 :root {
+  --color-primary: rgb(var(--color-primary-rgb));
+  --color-secondary: rgb(var(--color-secondary-rgb));
+  --color-success: rgb(var(--color-success-rgb));
+  --color-error: rgb(var(--color-error-rgb));
+  --color-warning: rgb(var(--color-warning-rgb));
+  --color-info: rgb(var(--color-info-rgb));
+  --color-base: var(--color-base-primary);
+  --color-base-mix: white;
+  --color-base-primary: rgb(var(--color-base-rgb));
+  --color-base-secondary: color-mix(in sRGB, var(--color-base) 75%, var(--color-base-mix));
+  --color-base-tertiary: color-mix(in sRGB, var(--color-base) 50%, var(--color-base-mix));
+  --color-body: var(--color-body-primary);
+  --color-body-mix: black;
+  --color-body-primary: rgb(var(--color-body-rgb));
+  --color-body-secondary: color-mix(in sRGB, var(--color-body) 95%, var(--color-body-mix));
+  --color-body-tertiary: color-mix(in sRGB, var(--color-body) 90%, var(--color-body-mix));
+  --color-light: rgb(var(--color-light-rgb));
+  --color-dark: rgb(var(--color-dark-rgb));
   --color-accent: var(--color-primary);
-  --color-current: var(--color-default);
-  --color-default: 17 19 21;
-  --color-primary: 3 138 255;
-  --color-secondary: 69 71 72;
-  --color-light: 255 255 255;
-  --color-dark: 17 19 21;
-  --color-success: 33 154 67;
-  --color-error: 254 50 75;
-  --color-warning: 254 179 53;
-  --color-info: 45 168 234;
-  --color-background: 255 255 255;
-  --color-background-100: 249 250 252;
-  --color-background-200: 235 235 235;
-  --color-background-300: 225 225 225;
+  --color-current: var(--color-base);
 }

package/src/components/dialog.css

@@ -1,4 +1,4 @@
-:where(.c-dialog) {
+.c-dialog {
   --c-dialog-py: 1.5rem;
   --c-dialog-px: 1.5rem;
   --c-dialog-width: 35rem;
@@ -8,7 +8,7 @@
   position: relative;
   z-index: var(--z-20);
   margin: auto;
-  background-color: rgb(var(--color-background));
+  background-color: var(--color-body-primary);
   width: 100%;
   max-width: var(--c-dialog-width);
   border-radius: var(--rounded-md);

package/src/components/field.css

@@ -1,11 +1,11 @@
-:where(.c-field) {
+.c-field {
   --c-field-gap: 0.5rem;
 
   display: flex;
   flex-direction: column;
   gap: var(--c-field-gap);
 
-  .is-validated &:has(:invalid) {
+  .validated &:has(:invalid) {
     & :where(.ui-info[hidden]) {
       display: block;
     }
@@ -13,7 +13,7 @@
 
   &:has([required]) :where(.ui-label) {
     &::after {
-      color: rgb(var(--color-error));
+      color: var(--color-error);
       content: " *";
     }
   }

package/src/libraries/dialog.css

@@ -1,5 +1,5 @@
-:where(.lib-dialog) {
-  --lib-ripple-bg: rgb(var(--color-dark) / var(--tw-bg-opacity, 0.8));
+.lib-dialog {
+  --lib-ripple-bg: rgb(var(--color-dark-rgb) / var(--tw-bg-opacity, 0.8));
   --lib-dialog-py: 2rem;
   --lib-dialog-px: 1.5rem;
   --lib-dialog-animation-duration: var(--transition-duration);

package/src/libraries/dialog.js

@@ -1,4 +1,4 @@
-const defaultOptions = {
+export const defaultOptions = {
     openClass: 'is-lib-dialog-open',
     scrollbarWidthProperty: '--lib-dialog-scrollbar-width',
     show: {
@@ -15,7 +15,7 @@ const defaultOptions = {
     }
 }
 
-const dialogSelector = selector => document.querySelectorAll(selector)[document.querySelectorAll(selector).length - 1]
+export const dialogSelector = selector => document.querySelectorAll(selector)[document.querySelectorAll(selector).length - 1]
 
 /**
  * Dismisses a dialog.
@@ -23,7 +23,7 @@ const dialogSelector = selector => document.querySelectorAll(selector)[document.
  * @param selector - The dialog element to dismiss.
  * @param options - The options for closing the dialog.
  */
-const dismissDialog = async (selector, options = defaultOptions.close) => {
+export const dismissDialog = async (selector, options = defaultOptions.close) => {
     await Promise.allSettled(selector.getAnimations().map(animation => animation.finished))
     selector.setAttribute('inert', '')
     options.remove && selector.remove()
@@ -39,7 +39,7 @@ const dismissDialog = async (selector, options = defaultOptions.close) => {
  * @param selector - The dialog element to show.
  * @param options - The options for showing the dialog.
  */
-const showDialog = async (selector, options = defaultOptions.show) => {
+export const showDialog = async (selector, options = defaultOptions.show) => {
     options = Object.assign({}, defaultOptions.show, options)
 
     document.documentElement.style.setProperty(defaultOptions.scrollbarWidthProperty, `${window.innerWidth - document.body.clientWidth}px`)
@@ -75,7 +75,7 @@ const showDialog = async (selector, options = defaultOptions.show) => {
  * @param selector - The dialog element to dismiss.
  * @param options - The options for closing the dialog.
  */
-const closeDialog = async (selector, options = defaultOptions.close) => {
+export const closeDialog = async (selector, options = defaultOptions.close) => {
     options = Object.assign({}, defaultOptions.close, options)
 
     window.HTMLDialogElement
@@ -91,7 +91,7 @@ const closeDialog = async (selector, options = defaultOptions.close) => {
  * @param content - The HTML content to insert into the dialog.
  * @param options - The options for inserting the dialog.
  */
-const insertDialog = async (content, options = defaultOptions.insert) => {
+export const insertDialog = async (content, options = defaultOptions.insert) => {
     options = Object.assign({}, defaultOptions.insert, options)
 
     if (!dialogSelector(options.selector) || options.append) {
@@ -109,14 +109,12 @@ const insertDialog = async (content, options = defaultOptions.insert) => {
  * @type {typeof import("./dialog").fetchDialog}
  * @param options - The options for fetching and inserting the dialog.
  */
-const fetchDialog = async ({ url, insertOptions = {} }) => {
+export const fetchDialog = async ({ url, insertOptions = {} }) => {
     await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
         .then(response => response.json())
         .then(async ({ content }) => await insertDialog(content, insertOptions))
 }
 
-export { showDialog, closeDialog, insertDialog, fetchDialog, dialogSelector, dismissDialog }
-
 export default {
     defaults: defaultOptions,
     dismiss: dismissDialog,

package/src/libraries/ripple.css

@@ -1,6 +1,6 @@
-:where(.lib-ripple) {
+.lib-ripple {
   --lib-ripple-animation-duration: 1s;
-  --lib-ripple-bg: rgb(var(--color-background) / var(--tw-bg-opacity, 0.4));
+  --lib-ripple-bg: rgb(var(--color-body-rgb) / var(--tw-bg-opacity, 0.4));
 
   position: absolute;
   background: var(--lib-ripple-bg);

package/src/libraries/ripple.js

@@ -2,7 +2,7 @@
  * Shows a ripple effect.
  * @type {typeof import("./ripple").showRipple}
  */
-const showRipple = ({ currentTarget, layerX, layerY }, selector = currentTarget.querySelector('.lib-ripple')) => {
+export const showRipple = ({ currentTarget, layerX, layerY }, selector = currentTarget.querySelector('.lib-ripple')) => {
     if (!selector) {
         currentTarget.insertAdjacentHTML('beforeend', "<div class='lib-ripple'></div>")
         selector = currentTarget.querySelector('.lib-ripple')
@@ -17,13 +17,11 @@ const showRipple = ({ currentTarget, layerX, layerY }, selector = currentTarget.
         selector.style.height = d + 'px'
     }
 
-    selector.style.top = layerX - (selector.clientWidth / 2) + 'px'
-    selector.style.left = layerY - (selector.clientHeight / 2) + 'px'
+    selector.style.top = layerY - (selector.clientHeight / 2) + 'px'
+    selector.style.left = layerX - (selector.clientWidth / 2) + 'px'
     selector.classList.add('animation-ripple')
 }
 
-export { showRipple }
-
 export default {
     show: showRipple
 }

package/src/main-rgb.css

@@ -0,0 +1 @@
+@import "ui/control/default-rgb.css"

package/src/main.css

@@ -1,4 +1,4 @@
 @import "base/index.css";
-@import "ui/+.css";
+@import "ui/index.css";
 @import "components/+.css";
 @import "libraries/+.css";

package/src/main.js

@@ -0,0 +1 @@
+!CSS.supports('selector(:has(*))') && (async () => (await import('css-has-pseudo/browser')).default(document))()

package/src/ui/badge/bordered.css

@@ -0,0 +1,8 @@
+.ui-badge:where(.bordered) {
+  --ui-badge-border-width: 2px;
+  --ui-badge-border-opacity: calc(var(--tw-border-opacity, 1) * 100%);
+
+  border: var(--ui-badge-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-badge-border-opacity), transparent);
+  padding-left: calc(var(--ui-badge-px) - var(--ui-badge-border-width));
+  padding-right: calc(var(--ui-badge-px) - var(--ui-badge-border-width));
+}

package/src/ui/badge/circle.css

@@ -0,0 +1,5 @@
+.ui-badge:where(.circle) {
+  --ui-badge-px: var(--ui-badge-py);
+  --ui-badge-width: var(--ui-badge-height);
+  --ui-badge-border-radius: var(--rounded-full);
+}

package/src/ui/badge/default.css

@@ -0,0 +1,40 @@
+.ui-badge {
+  --color-current: var(--color-light);
+  --ui-badge-width: max-content;
+  --ui-badge-height: 1.5rem;
+  --ui-badge-py: 0;
+  --ui-badge-px: 0.5rem;
+  --ui-badge-border-radius: var(--rounded-xs);
+  --ui-badge-font-size: 0.75rem;
+  --ui-badge-font-weight: var(--font-normal);
+  --ui-badge-bg: color-mix(in sRGB, var(--color-accent) var(--ui-badge-bg-opacity), var(--ui-badge-bg-mix));
+  --ui-badge-bg-mix: transparent;
+  --ui-badge-bg-opacity: calc(var(--tw-bg-opacity, 1) * 100%);
+  --ui-badge-color: color-mix(in sRGB, var(--color-current) var(--ui-badge-color-opacity), transparent);
+  --ui-badge-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);
+  --ui-badge-gap: 0.25rem;
+
+  width: var(--ui-badge-width);
+  height: var(--ui-badge-height);
+  padding: var(--ui-badge-py) var(--ui-badge-px);
+  border-radius: var(--ui-badge-border-radius);
+  font-size: var(--ui-badge-font-size);
+  font-weight: var(--ui-badge-font-weight);
+  background-color: var(--ui-badge-bg);
+  color: var(--ui-badge-color);
+  display: inline-flex;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  white-space: nowrap;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 0;
+  gap: var(--ui-badge-gap);
+  transition: var(--transition-opacity);
+
+  &:where(.bordered, .muted) {
+    --color-current: var(--color-accent);
+    --ui-badge-bg-opacity: 0%;
+  }
+}

package/src/ui/badge/group.css

@@ -0,0 +1,16 @@
+.ui-badge-group {
+  display: flex;
+
+  & :where(.ui-badge) {
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left: 0;
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}

package/src/ui/badge/index.css

@@ -0,0 +1,8 @@
+@import "default.css";
+@import "sm.css";
+@import "lg.css";
+@import "bordered.css";
+@import "muted.css";
+@import "square.css";
+@import "circle.css";
+@import "group.css";

package/src/ui/badge/lg.css

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

package/src/ui/badge/muted.css

@@ -0,0 +1,3 @@
+.ui-badge:where(.muted) {
+  --ui-badge-bg-opacity: 10%;
+}

package/src/ui/badge/sm.css

@@ -0,0 +1,4 @@
+.ui-badge:where(.sm) {
+  --ui-badge-height: 1.25rem;
+  --ui-badge-font-size: 0.625rem;
+}

package/src/ui/badge/square.css

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

package/src/ui/badge.css

@@ -1,109 +1 @@
-:where(.ui-badge) {
-  --color-current: var(--color-light);
-  --ui-badge-width: max-content;
-  --ui-badge-height: 1.5rem;
-  --ui-badge-py: 0;
-  --ui-badge-px: 0.5rem;
-  --ui-badge-border-radius: var(--rounded-xs);
-  --ui-badge-font-size: 0.75rem;
-  --ui-badge-font-weight: var(--font-normal);
-  --ui-badge-bg: rgb(var(--color-accent) / var(--ui-badge-bg-opacity));
-  --ui-badge-bg-opacity: var(--tw-bg-opacity, 1);
-  --ui-badge-color: rgb(var(--color-current) / var(--ui-badge-color-opacity));
-  --ui-badge-color-opacity: var(--tw-text-opacity, 1);
-  --ui-badge-outline-width: 1px;
-  --ui-badge-outline-opacity: 0.75;
-  --ui-badge-icon-font-size: 0.875rem;
-  --ui-badge-gap: 0.25rem;
-  --ui-badge-focus-opacity: 0.3;
-  --ui-badge-hover-opacity: 0.8;
-
-  width: var(--ui-badge-width);
-  height: var(--ui-badge-height);
-  padding: var(--ui-badge-py) var(--ui-badge-px);
-  border-radius: var(--ui-badge-border-radius);
-  font-size: var(--ui-badge-font-size);
-  font-weight: var(--ui-badge-font-weight);
-  background-color: var(--ui-badge-bg);
-  color: var(--ui-badge-color);
-  display: inline-flex;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  white-space: nowrap;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 0;
-  gap: var(--ui-badge-gap);
-  transition: var(--transition-opacity);
-
-  & :where(svg) {
-    width: 1em;
-    height: 1em;
-    font-size: var(--ui-badge-icon-font-size);
-  }
-
-  &:where(.is-sm) {
-    --ui-badge-height: 1.25rem;
-    --ui-badge-font-size: 0.625rem;
-  }
-
-  &:where(.is-lg) {
-    --ui-badge-height: 1.75rem;
-  }
-
-  &:where(.is-outline) {
-    outline: var(--ui-badge-outline-width) solid rgb(var(--color-accent) / var(--ui-badge-outline-opacity));
-    outline-offset: calc(var(--ui-badge-outline-width) * -1);
-  }
-
-  &:where(.is-outline, .is-muted) {
-    --color-current: var(--color-accent);
-    --ui-badge-bg: transparent;
-  }
-
-  &:where(.is-muted) {
-    background-color: rgb(var(--color-current) / 0.1);
-  }
-
-  &:where(.is-square, .is-circle) {
-    --ui-badge-px: var(--ui-badge-py);
-    --ui-badge-width: var(--ui-badge-height);
-  }
-
-  &:where(.is-circle) {
-    --ui-badge-border-radius: var(--rounded-full);
-  }
-
-  &:where([href], button) {
-    &:hover {
-      @media (hover: hover) and (pointer: fine) {
-        opacity: var(--ui-badge-hover-opacity);
-      }
-    }
-
-    &:focus-visible {
-      z-index: 2;
-      box-shadow:
-        0 0 0 0 rgb(var(--color-current)),
-        0 0 0 max(2px, var(--ui-badge-outline-width)) rgb(var(--color-accent) / var(--ui-badge-focus-opacity));
-    }
-  }
-}
-
-:where(.ui-badge-group) {
-  display: flex;
-
-  & :where(.ui-badge) {
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      margin-left: calc(var(--ui-badge-outline-width) * -1);
-    }
-
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-}
+@import "badge/index.css";

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

@@ -0,0 +1,3 @@
+.ui-btn:where(.bordered) {
+  border: var(--ui-btn-border-width) solid rgb(var(--color-accent-rgb) / var(--ui-btn-border-opacity));
+}

package/src/ui/btn/bordered.css

@@ -0,0 +1,8 @@
+.ui-btn:where(.bordered) {
+  --ui-btn-border-width: 2px;
+  --ui-btn-border-opacity: calc(var(--tw-border-opacity, 1) * 100%);
+
+  border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), transparent);
+  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/circle.css

@@ -0,0 +1,5 @@
+.ui-btn:where(.circle) {
+  --ui-btn-px: var(--ui-btn-py);
+  --ui-btn-width: var(--ui-btn-height);
+  --ui-btn-border-radius: var(--rounded-full);
+}

package/src/ui/btn/default-rgb.css

@@ -0,0 +1,9 @@
+.ui-btn {
+  --color-current-rgb: var(--color-light-rgb);
+  --ui-btn-bg: rgb(var(--color-accent-rgb) / var(--ui-btn-bg-opacity));
+  --ui-btn-color: rgb(var(--color-current-rgb) / var(--ui-btn-color-opacity));
+
+  &:where(.bordered, .muted, .ghosted) {
+    --color-current-rgb: var(--color-accent-rgb);
+  }
+}

package/src/ui/btn/default.css

@@ -0,0 +1,97 @@
+.ui-btn {
+  --color-current: var(--color-light);
+  --ui-btn-width: max-content;
+  --ui-btn-height: 2.25rem;
+  --ui-btn-gap: 0.375rem;
+  --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-semibold);
+  --ui-btn-letter-spacing: 0;
+  --ui-btn-bg: color-mix(in sRGB, var(--color-accent) var(--ui-btn-bg-opacity), var(--ui-btn-bg-mix));
+  --ui-btn-bg-mix: transparent;
+  --ui-btn-bg-opacity: calc(var(--tw-bg-opacity, 1) * 100%);
+  --ui-btn-color: color-mix(in sRGB, var(--color-current) var(--ui-btn-color-opacity), transparent);
+  --ui-btn-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);
+  --ui-btn-outline-width: 2px;
+  --ui-btn-outline-offset: 2px;
+  --ui-btn-outline-opacity: 50%;
+  --ui-btn-hover-mix: black;
+  --ui-btn-hover-opacity: 80%;
+  --ui-btn-hover-color: var(--color-current);
+  --ui-btn-active-mix: black;
+  --ui-btn-active-opacity: 90%;
+  --ui-btn-active-color: var(--color-current);
+  --ui-btn-focus-mix: transparent;
+  --ui-btn-focus-opacity: 50%;
+  --ui-btn-disabled-opacity: 70%;
+  --ui-btn-loading-width: 1rem;
+  --ui-btn-loading-border-width: 2px;
+
+  max-width: var(--ui-btn-width);
+  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);
+  letter-spacing: var(--ui-btn-letter-spacing);
+  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-background),
+    var(--transition-color),
+    outline-color var(--transition-duration),
+    outline-offset var(--transition-duration);
+  gap: var(--ui-btn-gap);
+  outline: var(--ui-btn-outline-width) solid transparent;
+  outline-offset: 0;
+
+  &:where(.bordered, .muted, .ghosted) {
+    --ui-btn-hover-mix: transparent;
+    --ui-btn-hover-opacity: 10%;
+    --ui-btn-active-mix: transparent;
+    --ui-btn-active-opacity: 20%;
+    --color-current: var(--color-accent);
+    --ui-btn-bg-opacity: 0%;
+  }
+
+  &:is([href], button, [role="button"]) {
+    &:disabled {
+      opacity: var(--ui-btn-disabled-opacity);
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled) {
+      &:hover {
+        @media (hover: hover) and (pointer: fine) {
+          --ui-btn-color: var(--ui-btn-hover-color);
+          --ui-btn-bg-mix: var(--ui-btn-hover-mix);
+          --ui-btn-bg-opacity: var(--ui-btn-hover-opacity);
+        }
+      }
+
+      &:focus {
+        outline-color: color-mix(in sRGB, var(--color-accent) var(--ui-btn-focus-opacity), var(--ui-btn-focus-mix));
+        outline-offset: var(--ui-btn-outline-offset);
+      }
+
+      &:is(:active, .active) {
+        --ui-btn-color: var(--ui-btn-active-color);
+        --ui-btn-bg-mix: var(--ui-btn-active-mix);
+        --ui-btn-bg-opacity: var(--ui-btn-active-opacity);
+      }
+    }
+  }
+}

package/src/ui/btn/ghosted.css

@@ -0,0 +1,4 @@
+.ui-btn:where(.ghosted) {
+  --ui-btn-outline-width: 2px;
+  --ui-btn-outline-offset: -2px;
+}

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

@@ -0,0 +1,27 @@
+:is(.ui-btn.gradient-bordered) {
+  --ui-btn-border-width: 2px;
+  --ui-btn-hover-mix: transparent;
+  --ui-btn-hover-opacity: 10%;
+  --ui-btn-active-mix: transparent;
+  --ui-btn-active-opacity: 20%;
+  --ui-btn-bg-opacity: 0%;
+  --color-current: var(--color-base);
+
+  &::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) {
+    --ui-btn-bg-opacity: 100%;
+
+    &::before {
+      background-color: color-mix(in sRGB, var(--color-body) var(--ui-btn-bg-opacity), transparent);
+    }
+  }
+}

package/src/ui/btn/gradient.css

@@ -0,0 +1,10 @@
+.ui-btn:where(.gradient) {
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: color-mix(in sRGB, var(--ui-btn-bg-mix) calc(100% - var(--ui-btn-bg-opacity)), transparent);
+    z-index: -1;
+    transition: var(--transition-background);
+  }
+}

package/src/ui/btn/group.css

@@ -0,0 +1,18 @@
+.ui-btn-group {
+  display: flex;
+
+  & :where(.ui-btn) {
+    --ui-btn-outline-offset: 0;
+
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left: 0;
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}