winduum 0.5.0-next.8 → 0.5.0

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
 ***/
 
@@ -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

@@ -1,7 +1,10 @@
 :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-lg: calc((var(--container-lg-width) - var(--container-width)) / 2);
   --container-padding: 5vw;
   --container-padding-calc: max(calc(50vw - (var(--container-width) / 2)), var(--container-padding));
 }
@@ -11,9 +14,11 @@
     display: grid;
     grid-template-columns:
       [container-full-start] minmax(var(--container-padding), 1fr)
-      [container-lg-start] minmax(0, var(--container-lg))
-      [container-start] min(100% - (var(--container-padding) * 2), var(--container-width)) [container-end]
-      minmax(0, var(--container-lg)) [container-lg-end]
+      [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];
   }
 

package/src/base/tailwind/utilities.css

@@ -25,30 +25,6 @@
     }
   }
 
-  :where(.border-inner-t > *:not(:first-child)) {
-    border-top: 1px solid var(--border-inner-t-color, var(--color-body-tertiary));
-  }
-
-  :where(.border-inner-r > *:not(:first-child)) {
-    border-left: 1px solid var(--border-inner-r-color, var(--color-body-tertiary));
-  }
-
-  .flex-col {
-    display: flex;
-  }
-
-  .flex-between {
-    display: flex;
-    justify-content: space-between;
-    gap: 0.5rem;
-  }
-
-  .flex-center {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
   .skeleton {
     background:
       linear-gradient(
@@ -63,4 +39,12 @@
     opacity: 0.3;
     transition: opacity 0.3s ease-out;
   }
+
+  .flex-col {
+    display: flex;
+  }
+
+  [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: var(--color-light);
+  --color-body: var(--color-dark);
 }

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: #3b82f6; /* color.blue.500 */
+  --color-primary-fg: var(--color-light);
+  --color-main: #171717; /* color.neutral.900 */
+  --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: #fff; /* color.white */
+  --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: #fff; /* color.white */
+  --color-light-fg: var(--color-dark);
+  --color-dark: #171717; /* color.neutral.900 */
+  --color-dark-fg: var(--color-light);
+  --color-success: #16a34a; /* color.green.600 */
+  --color-error: #dc2626; /* color.red.600 */
+  --color-warning: #eab308; /* color.yellow.500 */
+  --color-info: #0ea5e9; /* color.sky.500 */
 }

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(--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(--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.js

@@ -31,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)
     }
 }

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/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/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: var(--spacing-sm);
-  --ui-badge-border-radius: var(--rounded-lg);
-  --ui-badge-font-size: var(--text-xs);
-  --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-px: 0.5rem;
+  --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: var(--spacing-xs);
 
-  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/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/default.css

@@ -8,11 +8,11 @@
   --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%);
 
-  width: var(--ui-btn-width, fit-content);
+  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, var(--rounded));
-  font-size: var(--ui-btn-font-size, 0.875rem);
+  font-size: var(--ui-btn-font-size, var(--text-sm));
   font-weight: var(--ui-btn-font-weight, var(--font-medium));
   letter-spacing: var(--ui-btn-letter-spacing, 0);
   background-color: var(--ui-btn-bg);
@@ -20,15 +20,13 @@
   user-select: none;
   overflow: hidden;
   display: inline-flex;
+  text-align: center;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
   position: relative;
   flex-shrink: 0;
   z-index: 0;
-  transition-property: var(--transition), outline-color, outline-offset;
-  transition-timing-function: var(--ease-in-out);
-  transition-duration: var(--duration);
   gap: var(--ui-btn-gap, 0.375rem);
   outline: var(--ui-btn-outline-width, 2px) solid transparent;
   outline-offset: 0;

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

@@ -1,28 +1,34 @@
-.ui-btn: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);
+.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, var(--rounded)) / 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/interactive.css

@@ -1,4 +1,8 @@
 .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;
 

package/src/ui/btn/raised.css

@@ -1,8 +1,7 @@
 .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-left: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
-    padding-right: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
+    padding-inline: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
   }
 
   &:is(.raised) {

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);
 }