winduum 0.4.0 → 0.5.0-next.10

package/src/base/reset.css

@@ -1,5 +1,5 @@
 /***
-    The new CSS reset - version 1.11.1 (last updated 24.10.2023)
+    The new CSS reset - version 1.11.2 (last updated 15.11.2023)
     GitHub page: https://github.com/elad2412/the-new-css-reset
 ***/
 
@@ -36,7 +36,7 @@ html {
 }
 
 /* For images to not be able to exceed their container */
-:where(img) {
+:where(img, iframe) {
   max-inline-size: 100%;
   max-block-size: 100%;
 }
@@ -79,12 +79,6 @@ html {
   content: initial;
 }
 
-/* fix the feature of 'hidden' attribute.
-   display:revert; revert to element instead of attribute */
-:where([hidden]) {
-  display: none;
-}
-
 /* revert for bug in Chromium browsers
    - fix for the content editable attribute will work properly.
    - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
@@ -101,7 +95,16 @@ html {
   -webkit-user-drag: element;
 }
 
+/* Remove details summary webkit styles */
+::-webkit-details-marker {
+  display: none;
+}
+
 /* fix firefox svg */
 :where(svg, use, path, symbol) {
   all: revert-layer;
 }
+
+:where(search) {
+  display: block;
+}

package/src/base/tailwind/container.css

@@ -0,0 +1,28 @@
+:root, :host {
+  --container: min(100% - (var(--container-padding) * 2), var(--container-width));
+  --container-sm: min(100% - (var(--container-padding) * 2), var(--container-sm-width));
+  --container-lg: min(100% - (var(--container-padding) * 2), var(--container-lg-width));
+  --container-width: 80rem;
+  --container-sm-width: 50rem;
+  --container-lg-width: 90rem;
+  --container-padding: 5vw;
+  --container-padding-calc: max(calc(50vw - (var(--container-width) / 2)), var(--container-padding));
+}
+
+@layer components {
+  .grid-cols-container {
+    display: grid;
+    grid-template-columns:
+      [container-full-start] minmax(var(--container-padding), 1fr)
+      [container-lg-start] minmax(0, calc((var(--container-lg-width) - var(--container-width)) / 2))
+      [container-start] minmax(0, calc((var(--container-width) - var(--container-sm-width)) / 2))
+      [container-sm-start] min(100% - (var(--container-padding) * 2), var(--container-sm-width)) [container-sm-end]
+      minmax(0, calc((var(--container-width) - var(--container-sm-width)) / 2)) [container-end]
+      minmax(0, calc((var(--container-lg-width) - var(--container-width)) / 2)) [container-lg-end]
+      minmax(var(--container-padding), 1fr) [container-full-end];
+  }
+
+  :where(.grid-cols-container > *) {
+    grid-column: container;
+  }
+}

package/src/base/tailwind/utilities.css

@@ -1,18 +1,27 @@
-@layer utilities {
+@layer components {
   .animate {
-    animation-duration: var(--transition-duration);
+    animation-duration: var(--duration);
     animation-fill-mode: both;
   }
 
-  .container {
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: var(--container-padding);
-    padding-right: var(--container-padding);
-    max-width: var(--container-width);
+  .underline {
+    text-underline-position: under;
+    text-decoration-thickness: max(1px, 0.0625em);
+    text-underline-offset: -0.125rem;
+    transition: all var(--duration) var(--ease-in-out);
 
-    &:where(.container-sm) {
-      --container-width: var(--container-width-sm);
+    &:where([href], button, .interactive) {
+      &:hover {
+        @media (hover: hover) and (pointer: fine) {
+          text-decoration-color: var(--color-current);
+          text-underline-offset: 0;
+        }
+      }
+
+      &:focus {
+        text-decoration-color: var(--color-current);
+        text-underline-offset: 0;
+      }
     }
   }
 
@@ -30,4 +39,24 @@
     opacity: 0.3;
     transition: opacity 0.3s ease-out;
   }
+
+  .flex-col {
+    display: flex;
+  }
+
+  .flex-between {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--spacing-sm);
+  }
+
+  .flex-center {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+  }
+  
+  [hidden] {
+    display: none;
+  }
 }

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

@@ -1,4 +1,7 @@
 :root.dark, :host.dark {
+  --color-scheme: dark;
+  --color-main: rgb(var(--color-main-rgb));
+  --color-body: rgb(var(--color-body-rgb));
   --color-main-rgb: 255 255 255;
   --color-body-rgb: 25 26 27;
 }

package/src/base/theme/dark.css

@@ -1,6 +1,5 @@
 :root.dark, :host.dark {
-  --color-main: rgb(var(--color-main-rgb));
-  --color-body: rgb(var(--color-body-rgb));
-
-  color-scheme: dark;
+  --color-scheme: dark;
+  --color-main: rgb(255 255 255);
+  --color-body: rgb(25 26 27);
 }

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

@@ -1,4 +1,29 @@
 :root, :host {
+  --color-scheme: light;
+  --color-current: rgb(var(--color-current-rgb));
+  --color-current-fg: rgb(var(--color-current-fg-rgb));
+  --color-accent: rgb(var(--color-accent-rgb));
+  --color-accent-fg: rgb(var(--color-accent-fg-rgb));
+  --color-primary: rgb(var(--color-primary-rgb));
+  --color-primary-fg: rgb(var(--color-primary-fg-rgb));
+  --color-main: var(--color-main-primary);
+  --color-main-fg: rgb(var(--color-main-fg-rgb));
+  --color-main-primary: rgb(var(--color-main-rgb));
+  --color-main-secondary: color-mix(in sRGB, var(--color-main) 75%, var(--color-main-fg));
+  --color-main-tertiary: color-mix(in sRGB, var(--color-main) 50%, var(--color-main-fg));
+  --color-body: var(--color-body-primary);
+  --color-body-fg: rgb(var(--color-body-fg-rgb));
+  --color-body-primary: rgb(var(--color-body-rgb));
+  --color-body-secondary: color-mix(in sRGB, var(--color-body) 95%, var(--color-body-fg));
+  --color-body-tertiary: color-mix(in sRGB, var(--color-body) 90%, var(--color-body-fg));
+  --color-light: rgb(var(--color-light-rgb));
+  --color-light-fg: rgb(var(--color-light-fg-rgb));
+  --color-dark: rgb(var(--color-dark-rgb));
+  --color-dark-fg: rgb(var(--color-dark-fg-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-current-rgb: var(--color-main-rgb);
   --color-current-fg-rgb: var(--color-main-fg-rgb);
   --color-accent-rgb: var(--color-primary-rgb);

package/src/base/theme/default.css

@@ -1,28 +1,27 @@
 :root, :host {
-  --color-current: rgb(var(--color-current-rgb));
-  --color-current-fg: rgb(var(--color-current-fg-rgb));
-  --color-accent: rgb(var(--color-accent-rgb));
-  --color-accent-fg: rgb(var(--color-accent-fg-rgb));
-  --color-primary: rgb(var(--color-primary-rgb));
-  --color-primary-fg: rgb(var(--color-primary-fg-rgb));
-  --color-main: var(--color-main-primary);
-  --color-main-fg: rgb(var(--color-main-fg-rgb));
-  --color-main-primary: rgb(var(--color-main-rgb));
+  --color-scheme: light;
+  --color-current: var(--color-main);
+  --color-current-fg: var(--color-main-fg);
+  --color-accent: var(--color-primary);
+  --color-accent-fg: var(--color-primary-fg);
+  --color-primary: rgb(3 138 255);
+  --color-primary-fg: var(--color-light);
+  --color-main: rgb(17 19 2);
+  --color-main-fg: var(--color-body);
+  --color-main-primary: var(--color-main);
   --color-main-secondary: color-mix(in sRGB, var(--color-main) 75%, var(--color-main-fg));
   --color-main-tertiary: color-mix(in sRGB, var(--color-main) 50%, var(--color-main-fg));
-  --color-body: var(--color-body-primary);
-  --color-body-fg: rgb(var(--color-body-fg-rgb));
-  --color-body-primary: rgb(var(--color-body-rgb));
+  --color-body: rgb(255 255 255);
+  --color-body-fg: var(--color-main);
+  --color-body-primary: var(--color-body);
   --color-body-secondary: color-mix(in sRGB, var(--color-body) 95%, var(--color-body-fg));
   --color-body-tertiary: color-mix(in sRGB, var(--color-body) 90%, var(--color-body-fg));
-  --color-light: rgb(var(--color-light-rgb));
-  --color-light-fg: rgb(var(--color-light-fg-rgb));
-  --color-dark: rgb(var(--color-dark-rgb));
-  --color-dark-fg: rgb(var(--color-dark-fg-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-scheme: light;
+  --color-light: rgb(255 255 255);
+  --color-light-fg: var(--color-dark);
+  --color-dark: rgb(17 19 21);
+  --color-dark-fg: var(--color-light);
+  --color-success: rgb(33 154 67);
+  --color-error: rgb(254 50 75);
+  --color-warning: rgb(254 179 53);
+  --color-info: rgb(45 168 234);
 }

package/src/components/dialog.css

@@ -1,20 +1,15 @@
 .c-dialog {
-  --c-dialog-py: 1.5rem;
-  --c-dialog-px: 1.5rem;
-  --c-dialog-width: 35rem;
-  --c-dialog-animation-duration: var(--transition-duration);
-
-  animation: var(--c-dialog-animation-duration) ease 0s backwards 1 fade-in-down;
+  animation: var(--duration) ease 0s backwards 1 fade-in-down;
   position: relative;
   z-index: var(--z-20);
   margin: auto;
   background-color: var(--color-body-primary);
   width: 100%;
-  max-width: var(--c-dialog-width);
+  max-width: var(--c-dialog-width, 35rem);
   border-radius: var(--rounded-3xl);
-  padding: var(--c-dialog-py) var(--c-dialog-px);
+  padding: var(--c-dialog-py, 1.5rem) var(--c-dialog-px, 1.5rem);
 
   :where(dialog:not([open])) & {
-    animation: var(--c-dialog-animation-duration) ease 0s forwards 1 fade-out-up;
+    animation: var(--duration) ease 0s forwards 1 fade-out-up;
   }
 }

package/src/components/field.css

@@ -1,9 +1,7 @@
 .c-field {
-  --c-field-gap: 0.5rem;
-
   display: flex;
   flex-direction: column;
-  gap: var(--c-field-gap);
+  gap: var(--c-field-gap, 0.5rem);
 
   .validated &:has(:invalid) {
     & :where(.ui-info[hidden]) {

package/src/libraries/dialog.css

@@ -1,27 +1,22 @@
 .lib-dialog {
-  --lib-ripple-bg: color-mix(in sRGB, var(--color-dark) calc(var(--tw-bg-opacity, 0.8) * 100%), transparent);
-  --lib-dialog-py: 2rem;
-  --lib-dialog-px: 1.5rem;
-  --lib-dialog-animation-duration: var(--transition-duration);
-
   inset: 0;
   z-index: var(--z-30);
   position: fixed;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
-  background-color: var(--lib-ripple-bg);
+  background-color: var(--lib-ripple-bg, color-mix(in sRGB, var(--color-dark) calc(var(--tw-bg-opacity, 0.8) * 100%), transparent));
   overscroll-behavior: contain;
   display: flex;
-  visibility: hidden;
-  padding: var(--lib-dialog-py) var(--lib-dialog-px);
+  padding: var(--lib-dialog-py, 2rem) var(--lib-dialog-px, 1.5rem);
+  transition: var(--transition-background);
 
-  &:not([open]) {
-    animation: var(--lib-dialog-animation-duration) ease 0s forwards 1 fade-out;
-    pointer-events: none;
+  &, &::backdrop {
+    visibility: hidden;
   }
 
-  &[open] {
-    animation: var(--lib-dialog-animation-duration) ease 0s backwards 1 fade-in;
+  &:not([open]) {
+    background-color: transparent;
+    pointer-events: none;
   }
 
   .is-lib-dialog-open & {
@@ -30,6 +25,10 @@
 }
 
 .is-lib-dialog-open {
-  overflow: hidden;
-  padding-right: var(--lib-dialog-scrollbar-width, 0);
+  scrollbar-width: none;
+  padding-inline-end: var(--lib-dialog-scrollbar-width, 0);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }

package/src/libraries/dialog.d.ts

@@ -2,6 +2,8 @@ export interface DefaultOptions {
     openClass: string;
     scrollbarWidthProperty: string;
     show: {
+        onCloseStart: Function
+        onCloseEnd: Function
         closable: boolean | null;
     };
     close: {

package/src/libraries/dialog.js

@@ -2,7 +2,9 @@ export const defaultOptions = {
     openClass: 'is-lib-dialog-open',
     scrollbarWidthProperty: '--lib-dialog-scrollbar-width',
     show: {
-        closable: true ?? null
+        closable: true ?? null,
+        onCloseStart: () => null,
+        onCloseEnd: () => null
     },
     close: {
         remove: false ?? null
@@ -29,6 +31,7 @@ export const dismissDialog = async (selector, options = defaultOptions.close) =>
     options.remove && selector.remove()
 
     if (!document.querySelector('dialog[open]')) {
+        document.documentElement.style.removeProperty(defaultOptions.scrollbarWidthProperty)
         document.documentElement.classList.remove(defaultOptions.openClass)
     }
 }
@@ -47,13 +50,19 @@ export const showDialog = async (selector, options = defaultOptions.show) => {
     if (!selector?._dialogHasEvents && options.closable) {
         selector.addEventListener('keydown', async ({ key }) => {
             if (key === 'Escape') {
-                setTimeout(() => dismissDialog(selector, options), 1)
+                setTimeout(async () => {
+                    options.onCloseStart()
+                    await dismissDialog(selector, options)
+                    options.onCloseEnd()
+                }, 1)
             }
         })
 
-        selector.addEventListener('click', ({ target }) => {
+        selector.addEventListener('click', async ({ target }) => {
             if (target.nodeName === 'DIALOG') {
-                closeDialog(selector, options)
+                options.onCloseStart()
+                await closeDialog(selector, options)
+                options.onCloseEnd()
             }
         })
 

package/src/libraries/ripple.css

@@ -1,11 +1,8 @@
 .lib-ripple {
-  --lib-ripple-animation-duration: 1s;
-  --lib-ripple-bg: color-mix(in sRGB, var(--color-body) calc(var(--tw-bg-opacity, 0.4) * 100%), transparent);
-
   position: absolute;
-  background: var(--lib-ripple-bg);
+  background: var(--lib-ripple-bg, color-mix(in sRGB, var(--color-body) calc(var(--tw-bg-opacity, 0.4) * 100%), transparent));
   border-radius: 50%;
   transform: scale(0);
-  animation-duration: var(--lib-ripple-animation-duration);
+  animation-duration: var(--lib-ripple-animation-duration, 1s);
   pointer-events: none;
 }

package/src/main-rgb.css

@@ -1,3 +1,5 @@
+@import "base/theme/default-rgb.css";
+@import "base/theme/dark-rgb.css";
 @import "ui/btn/default-rgb.css";
 @import "ui/btn/bordered-rgb.css";
 @import "ui/btn/gradient-bordered-rgb.css";

package/src/tailwind.css

@@ -1,3 +1,3 @@
 @import "base/tailwind/base.css";
 @import "base/tailwind/utilities.css";
-@import "base/tailwind/gutters.css";
+@import "base/tailwind/container.css";

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

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

package/src/ui/badge/bordered.css

@@ -1,10 +1,11 @@
-.ui-badge:where(.bordered) {
-  --color-current: var(--color-accent);
-  --ui-badge-bg-opacity: 0%;
-  --ui-badge-border-width: 1px;
-  --ui-badge-border-opacity: calc(var(--tw-border-opacity, 1) * 100%);
+.ui-badge {
+  &:where(.bordered) {
+    border: var(--ui-badge-border-width, 1px) solid color-mix(in sRGB, var(--color-accent) var(--ui-badge-border-opacity, calc(var(--tw-border-opacity, 1) * 100%)), transparent);
+    padding-inline: calc(var(--ui-badge-px) - var(--ui-badge-border-width, 1px));
+  }
 
-  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));
+  &:is(.bordered) {
+    --color-current: var(--color-accent);
+    --ui-badge-bg-opacity: 0%;
+  }
 }

package/src/ui/badge/circle.css

@@ -1,4 +1,4 @@
-.ui-badge:where(.circle) {
+.ui-badge:is(.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

@@ -1,34 +1,30 @@
 .ui-badge {
   --color-current: var(--color-accent-fg);
-  --ui-badge-width: fit-content;
   --ui-badge-height: 1.5rem;
   --ui-badge-py: 0;
   --ui-badge-px: 0.5rem;
-  --ui-badge-border-radius: var(--rounded-lg);
-  --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: color-mix(in sRGB, var(--color-accent) var(--ui-badge-bg-opacity), var(--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);
+  width: var(--ui-badge-width, auto);
   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);
+  border-radius: var(--ui-badge-border-radius, var(--rounded-lg));
+  font-family: var(--ui-badge-font-family, inherit);
+  font-weight: var(--ui-badge-font-weight, inherit);
+  font-size: var(--ui-badge-font-size, var(--text-xs));
+  letter-spacing: var(--ui-badge-letter-spacing, inherit);
   background-color: var(--ui-badge-bg);
   color: var(--ui-badge-color);
   display: inline-flex;
-  align-items: center;
   text-align: center;
+  align-items: center;
   justify-content: center;
   white-space: nowrap;
   flex-shrink: 0;
   position: relative;
-  gap: var(--ui-badge-gap);
+  gap: var(--ui-badge-gap, var(--spacing-xs));
   transition: var(--transition-opacity);
 }

package/src/ui/badge/lg.css

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

package/src/ui/badge/muted.css

@@ -1,4 +1,4 @@
-.ui-badge:where(.muted) {
+.ui-badge:is(.muted) {
   --color-current: var(--color-accent);
   --ui-badge-bg-opacity: 10%;
 }

package/src/ui/badge/sm.css

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

package/src/ui/badge/square.css

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

package/src/ui/btn/bordered.css

@@ -1,15 +1,16 @@
-.ui-btn:where(.bordered) {
-  --color-current: var(--color-accent);
-  --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: -2px;
-  --ui-btn-bg-opacity: 0%;
-  --ui-btn-border-width: 1px;
-  --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.3) * 100%);
+.ui-btn {
+  &:where(.bordered) {
+    border: var(--ui-btn-border-width, 1px) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity, calc(var(--tw-border-opacity, 0.3) * 100%)), transparent);
+    padding-inline: calc(var(--ui-btn-px) - var(--ui-btn-border-width, 1px));
+  }
 
-  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));
+  &:is(.bordered) {
+    --color-current: var(--color-accent);
+    --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: -2px;
+    --ui-btn-bg-opacity: 0%;
+  }
 }

package/src/ui/btn/circle.css

@@ -1,4 +1,4 @@
-.ui-btn:where(.circle) {
+.ui-btn:is(.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.css

@@ -1,55 +1,34 @@
 .ui-btn {
   --color-current: var(--color-accent-fg);
-  --ui-btn-width: fit-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-medium);
-  --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: color-mix(in sRGB, var(--color-accent) var(--ui-btn-bg-opacity), var(--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-hover-color: var(--color-current);
-  --ui-btn-hover-bg-mix: black;
-  --ui-btn-hover-bg-opacity: 80%;
-  --ui-btn-active-color: var(--color-current);
-  --ui-btn-active-bg-mix: black;
-  --ui-btn-active-bg-opacity: 90%;
-  --ui-btn-focus-outline-color-mix: transparent;
-  --ui-btn-focus-outline-color-opacity: 50%;
-  --ui-btn-focus-outline-offset: 2px;
-  --ui-btn-disabled-opacity: 70%;
 
-  width: var(--ui-btn-width);
+  width: var(--ui-btn-width, auto);
   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);
+  border-radius: var(--ui-btn-border-radius, var(--rounded));
+  font-size: var(--ui-btn-font-size, 0.875rem);
+  font-weight: var(--ui-btn-font-weight, var(--font-medium));
+  letter-spacing: var(--ui-btn-letter-spacing, 0);
   background-color: var(--ui-btn-bg);
   color: var(--ui-btn-color);
   user-select: none;
   overflow: hidden;
   display: inline-flex;
+  text-align: center;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  flex-shrink: 0;
   position: relative;
-  transition:
-    var(--transition-background),
-    var(--transition-color),
-    outline-color var(--transition-duration),
-    outline-offset 100ms cubic-bezier(0.4, 0, 0.2, 1);
-  gap: var(--ui-btn-gap);
-  outline: var(--ui-btn-outline-width) solid transparent;
+  flex-shrink: 0;
+  z-index: 0;
+  gap: var(--ui-btn-gap, 0.375rem);
+  outline: var(--ui-btn-outline-width, 2px) solid transparent;
   outline-offset: 0;
 
   &:where([class*="accent-main"]) {
@@ -60,31 +39,7 @@
     --ui-btn-hover-bg-mix: var(--color-body-fg);
   }
 
-  &: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-bg-mix);
-          --ui-btn-bg-opacity: var(--ui-btn-hover-bg-opacity);
-        }
-      }
-
-      &:focus {
-        outline-color: color-mix(in sRGB, var(--color-accent) var(--ui-btn-focus-outline-color-opacity), var(--ui-btn-focus-outline-color-mix));
-        outline-offset: var(--ui-btn-focus-outline-offset);
-      }
-
-      &:is(:active, .active) {
-        --ui-btn-color: var(--ui-btn-active-color);
-        --ui-btn-bg-mix: var(--ui-btn-active-bg-mix);
-        --ui-btn-bg-opacity: var(--ui-btn-active-bg-opacity);
-      }
-    }
+  &:where(input)::after {
+    content: attr(aria-label);
   }
 }

package/src/ui/btn/ghosted.css

@@ -1,4 +1,4 @@
-.ui-btn:where(.ghosted) {
+.ui-btn:is(.ghosted) {
   --ui-btn-hover-bg-mix: transparent;
   --ui-btn-hover-bg-opacity: 10%;
   --ui-btn-active-bg-mix: transparent;