winduum 1.2.1 → 2.0.0-next.10

package/src/base/theme/default.css

@@ -1,6 +1,6 @@
 :root, :host {
-  --space: sRGB;
-  --scheme: light;
+  --default-color-space: sRGB;
+  --default-color-scheme: light;
   --color-accent: var(--color-primary);
   --color-accent-foreground: var(--color-primary-foreground);
   --color-primary: #3b82f6; /* color.blue.500 */
@@ -8,13 +8,13 @@
   --color-main: #171717; /* color.neutral.900 */
   --color-main-foreground: var(--color-body);
   --color-main-primary: var(--color-main);
-  --color-main-secondary: color-mix(in var(--space), var(--color-main) 75%, var(--color-main-foreground));
-  --color-main-tertiary: color-mix(in var(--space), var(--color-main) 50%, var(--color-main-foreground));
+  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 75%, var(--color-main-foreground));
+  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 50%, var(--color-main-foreground));
   --color-body: #fff; /* color.white */
   --color-body-foreground: var(--color-main);
   --color-body-primary: var(--color-body);
-  --color-body-secondary: color-mix(in var(--space), var(--color-body) 95%, var(--color-body-foreground));
-  --color-body-tertiary: color-mix(in var(--space), var(--color-body) 90%, var(--color-body-foreground));
+  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 95%, var(--color-body-foreground));
+  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 90%, var(--color-body-foreground));
   --color-light: #fff; /* color.white */
   --color-light-foreground: var(--color-dark);
   --color-dark: #171717; /* color.neutral.900 */

package/src/components/badge/bordered.css

@@ -0,0 +1,6 @@
+.x-badge:is(.bordered) {
+  --x-badge-border-width: 1px;
+  --x-badge-border-color-opacity: 100%;
+  --x-badge-background-color-opacity: 0%;
+  --x-badge-color: var(--color-accent);
+}

package/src/components/badge/circle.css

@@ -0,0 +1,5 @@
+.x-badge:is(.circle) {
+  --x-badge-padding-inline: var(--x-badge-padding-block);
+  --x-badge-width: var(--x-badge-height);
+  --x-badge-border-radius: var(--radius-full);
+}

package/src/components/badge/default.css

@@ -0,0 +1,42 @@
+.x-badge {
+  --x-badge-background-color: var(--color-accent);
+  --x-badge-border-color: var(--color-accent);
+  --x-badge-color: var(--color-accent-foreground);
+
+  inline-size: var(--x-badge-width);
+  block-size: var(--x-badge-height);
+  padding: var(--x-badge-padding-block) var(--x-badge-padding-inline);
+  padding-inline: calc(var(--x-badge-padding-inline) - var(--x-badge-border-width));
+  border-radius: var(--x-badge-border-radius);
+  font-family: var(--x-badge-font-family);
+  font-weight: var(--x-badge-font-weight);
+  font-size: var(--x-badge-font-size);
+  letter-spacing: var(--x-badge-letter-spacing);
+  background-color:
+    color-mix(
+      in var(--x-badge-background-color-space, srgb),
+      var(--x-badge-background-color) var(--x-badge-background-color-opacity, 100%),
+      var(--x-badge-background-color-mix, transparent)
+    );
+  color:
+    color-mix(
+      in var(--x-badge-color-space, srgb),
+      var(--x-badge-color) var(--x-badge-color-opacity, 100%),
+      var(--x-badge-color-mix, transparent)
+    );
+  border:
+    var(--x-badge-border-width)
+    solid
+    color-mix(
+      in var(--x-badge-border-color-space, srgb),
+      var(--x-badge-border-color) var(--x-badge-border-color-opacity, 100%),
+      var(--x-badge-border-color-mix, transparent)
+    );
+  gap: var(--x-badge-gap);
+  display: inline-flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  flex-shrink: 0;
+}

package/src/{ui → components}/badge/index.css

@@ -1,5 +1,5 @@
 @import "default.css";
-@import "default-props.css";
+@import "props/default.css";
 @import "sm.css";
 @import "lg.css";
 @import "bordered.css";

package/src/components/badge/lg.css

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

package/src/components/badge/muted.css

@@ -0,0 +1,4 @@
+.x-badge:is(.muted) {
+  --x-badge-color: var(--color-accent);
+  --x-badge-background-color-opacity: 10%;
+}

package/src/components/badge/props/default.css

@@ -0,0 +1,9 @@
+:root, :host {
+  --x-badge-border-width: 0px;
+  --x-badge-border-radius: var(--radius-lg);
+  --x-badge-font-size: var(--font-size-xs);
+  --x-badge-gap: var(--spacing-xs);
+  --x-badge-height: 1.5rem;
+  --x-badge-padding-block: 0;
+  --x-badge-padding-inline: 0.5rem;
+}

package/src/components/badge/readme.md

@@ -0,0 +1,37 @@
+# [Badge](https://winduum.dev/docs/components/badge.html)
+
+## Installation
+```shell
+npm i winduum
+```
+Learn more how to set up Winduum [here](https://winduum.dev/docs/).
+Include CSS either globally or to your component _([you can't use TailwindCSS layers in per-component CSS](https://tailwindcss.com/docs/adding-custom-styles#layers-and-per-component-css))_
+
+```css
+@import "winduum/src/components/badge/index.css" layer(components);
+```
+
+or modular (you can use your own props or CSS)
+
+```css
+@import "winduum/src/components/badge/props/default.css" layer(components);
+@import "winduum/src/components/badge/default.css" layer(components);
+@import "winduum/src/components/badge/sm.css" layer(components);
+@import "winduum/src/components/badge/lg.css" layer(components);
+@import "winduum/src/components/badge/bordered.css" layer(components);
+@import "winduum/src/components/badge/muted.css" layer(components);
+@import "winduum/src/components/badge/square.css" layer(components);
+@import "winduum/src/components/badge/circle.css" layer(components);
+
+```
+
+### Local imports
+By default, imports are directly from `npm` so you can leverage updates.
+You can also copy and paste the code from this directory to your project and remap the imports to local.
+
+```css
+@import "@/components/badge/assets/index.css" layer(components);
+```
+
+### Docs
+Visit [docs](https://winduum.dev/docs/components/badge.html) to learn more about usage examples.

package/src/components/badge/sm.css

@@ -0,0 +1,4 @@
+.x-badge:is(.sm) {
+  --x-badge-height: 1.25rem;
+  --x-badge-font-size: var(--font-size-xs);
+}

package/src/components/badge/square.css

@@ -0,0 +1,4 @@
+.x-badge:is(.square) {
+  --x-badge-padding-inline: var(--x-badge-padding-block);
+  --x-badge-width: var(--x-badge-height);
+}

package/src/components/breadcrumb/default.css

@@ -1,4 +1,4 @@
-.c-breadcrumb {
+.x-breadcrumb {
   > :where(ul, ol) {
     &, > li {
       display: flex;
@@ -7,13 +7,13 @@
 
     > li {
       &:not(:last-child)::after {
-        content: "";
-        mask: var(--c-breadcrumb-marker);
-        background-color: currentColor;
-        margin-inline: var(--c-breadcrumb-gap);
-        width: var(--c-breadcrumb-marker-size);
-        height: var(--c-breadcrumb-marker-size);
+        mask: var(--x-breadcrumb-marker);
+        background-color: var(--x-breadcrumb-marker-background-color, currentColor);
+        margin-inline: var(--x-breadcrumb-gap);
+        inline-size: var(--x-breadcrumb-marker-size);
+        block-size: var(--x-breadcrumb-marker-size);
         flex-shrink: 0;
+        content: "";
       }
     }
   }

package/src/components/breadcrumb/index.css

@@ -1,2 +1,2 @@
+@import "props/default.css";
 @import "default.css";
-@import "default-props.css";

package/src/components/breadcrumb/props/default.css

@@ -0,0 +1,5 @@
+:root, :host {
+  --x-breadcrumb-marker-size: 0.875rem;
+  --x-breadcrumb-marker: var(--mask-chevron-right);
+  --x-breadcrumb-gap: var(--spacing-xs);
+}

package/src/components/breadcrumb/readme.md

@@ -14,8 +14,8 @@ Include CSS either globally or to your component _([you can't use TailwindCSS la
 or modular (you can use your own props or CSS)
 
 ```css
+@import "winduum/src/components/breadcrumb/props/default.css" layer(components);
 @import "winduum/src/components/breadcrumb/default.css" layer(components);
-@import "winduum/src/components/breadcrumb/default-props.css" layer(components);
 ```
 
 ### Local imports

package/src/components/button/bordered.css

@@ -0,0 +1,19 @@
+.x-button:is(.bordered) {
+  --x-button-disabled-background-color-opacity: 0%;
+  --x-button-disabled-background-color-mix: transparent;
+  --x-button-disabled-border-color-opacity: 30%;
+  --x-button-disabled-color: var(--color-accent);
+  --x-button-active-background-color-opacity: 20%;
+  --x-button-active-background-color-mix: transparent;
+  --x-button-active-border-color-opacity: 30%;
+  --x-button-active-color: var(--color-accent);
+  --x-button-hover-background-color-opacity: 10%;
+  --x-button-hover-background-color-mix: transparent;
+  --x-button-hover-border-color-opacity: 30%;
+  --x-button-hover-color: var(--color-accent);
+  --x-button-focus-outline-offset: 0px;
+  --x-button-border-width: 1px;
+  --x-button-border-color-opacity: 30%;
+  --x-button-background-color-opacity: 0%;
+  --x-button-color: var(--color-accent);
+}

package/src/components/button/circle.css

@@ -0,0 +1,6 @@
+.x-button:is(.circle) {
+  --x-button-padding-block: 0;
+  --x-button-padding-inline: 0;
+  --x-button-width: var(--x-button-height);
+  --x-button-border-radius: var(--radius-full);
+}

package/src/components/button/default.css

@@ -0,0 +1,63 @@
+.x-button {
+  --x-button-background-color: var(--color-accent);
+  --x-button-border-color: var(--color-accent);
+  --x-button-color: var(--color-accent-foreground);
+
+  inline-size: var(--x-button-width);
+  block-size: var(--x-button-height);
+  padding: var(--x-button-padding-block) var(--x-button-padding-inline);
+  padding-inline: calc(var(--x-button-padding-inline) - var(--x-button-border-width));
+  border-radius: var(--x-button-border-radius);
+  font-family: var(--x-button-font-family);
+  font-size: var(--x-button-font-size);
+  font-weight: var(--x-button-font-weight);
+  letter-spacing: var(--x-button-letter-spacing);
+  background-color:
+    color-mix(
+      in var(--x-button-background-color-space, srgb),
+      var(--x-button-background-color) var(--x-button-background-color-opacity, 100%),
+      var(--x-button-background-color-mix, transparent)
+    );
+  color:
+    color-mix(
+      in var(--x-button-color-space, srgb),
+      var(--x-button-color) var(--x-button-color-opacity, 100%),
+      var(--x-button-color-mix, transparent)
+    );
+  border:
+    var(--x-button-border-width)
+    solid
+    color-mix(
+      in var(--x-button-border-color-space, srgb),
+      var(--x-button-border-color) var(--x-button-border-color-opacity, 100%),
+      var(--x-button-border-color-mix, transparent)
+    );
+  outline:
+    var(--x-button-outline-width)
+    solid
+    color-mix(
+      in var(--x-button-outline-color-space, srgb),
+      var(--x-button-outline-color, transparent) var(--x-button-outline-color-opacity, 100%),
+      var(--x-button-outline-color-mix, transparent)
+    );
+  outline-offset: var(--x-button-outline-offset);
+  gap: var(--x-button-gap);
+  user-select: none;
+  overflow: clip;
+  display: inline-flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  line-height: 1;
+  flex-shrink: 0;
+  z-index: 0;
+
+  :where(*) {
+    pointer-events: none;
+  }
+
+  &:where(input)::after {
+    content: attr(aria-label);
+  }
+}

package/src/components/button/fill.css

@@ -0,0 +1,6 @@
+.x-button:is(.fill) {
+  --x-button-hover-background-color-mix: var(--color-dark);
+  --x-button-hover-background-color-opacity: 100%;
+  --x-button-active-background-color-mix: var(--color-dark);
+  --x-button-active-background-color-opacity: 90%;
+}

package/src/components/button/ghosted.css

@@ -0,0 +1,14 @@
+.x-button:is(.ghosted) {
+  --x-button-disabled-background-color-opacity: 0%;
+  --x-button-disabled-background-color-mix: transparent;
+  --x-button-disabled-color: var(--color-accent);
+  --x-button-active-background-color-opacity: 20%;
+  --x-button-active-background-color-mix: transparent;
+  --x-button-active-color: var(--color-accent);
+  --x-button-hover-background-color-opacity: 10%;
+  --x-button-hover-background-color-mix: transparent;
+  --x-button-hover-color: var(--color-accent);
+  --x-button-focus-outline-offset: -2px;
+  --x-button-color: var(--color-accent);
+  --x-button-background-color-opacity: 0%;
+}

package/src/{ui/btn → components/button}/index.css

@@ -1,16 +1,11 @@
+@import "props/default.css";
+@import "props/interactive.css";
 @import "default.css";
-@import "default-props.css";
 @import "interactive.css";
-@import "interactive-props.css";
 @import "sm.css";
 @import "lg.css";
-@import "loading.css";
-@import "loading-props.css";
-@import "wide.css";
 @import "bordered.css";
 @import "ghosted.css";
-@import "gradient.css";
-@import "gradient-bordered.css";
 @import "muted.css";
 @import "raised.css";
 @import "fill.css";

package/src/components/button/interactive.css

@@ -0,0 +1,56 @@
+.x-button {
+  transition-property: var(--default-transition-property);
+  transition-timing-function: var(--transition-timing-function-in-out);
+  transition-duration: var(--default-transition-duration);
+
+  &:where(.accent-primary),
+  &:where(.accent-body),
+  &:where(.accent-light),
+  &:where(.accent-dark) {
+    --x-button-hover-background-color-mix: var(--color-accent-foreground);
+  }
+
+  &:is(button, input, label, :any-link, [role="button"]) {
+    &:hover {
+      --x-button-background-color: var(--x-button-hover-background-color, var(--color-accent));
+      --x-button-background-color-mix: var(--x-button-hover-background-color-mix);
+      --x-button-background-color-opacity: var(--x-button-hover-background-color-opacity);
+      --x-button-border-color: var(--x-button-hover-border-color, var(--color-accent));
+      --x-button-border-color-mix: var(--x-button-hover-border-color-mix, transparent);
+      --x-button-border-color-opacity: var(--x-button-hover-border-color-opacity, 100%);
+      --x-button-color: var(--x-button-hover-color, var(--color-accent-foreground));
+      --x-button-color-mix: var(--x-button-hover-color-mix, transparent);
+      --x-button-color-opacity: var(--x-button-hover-color-opacity, 100%);
+    }
+
+    &:focus {
+      --x-button-outline-offset: var(--x-button-focus-outline-offset);
+      --x-button-outline-color: var(--x-button-focus-outline-color, var(--color-accent));
+      --x-button-outline-color-opacity: var(--x-button-focus-outline-color-opacity);
+    }
+
+    &:active, &:checked, &.active {
+      --x-button-background-color: var(--x-button-hover-background-color, var(--color-accent));
+      --x-button-background-color-mix: var(--x-button-active-background-color-mix);
+      --x-button-background-color-opacity: var(--x-button-active-background-color-opacity);
+      --x-button-border-color: var(--x-button-active-border-color, var(--color-accent));
+      --x-button-border-color-mix: var(--x-button-active-border-color-mix, transparent);
+      --x-button-border-color-opacity: var(--x-button-active-border-color-opacity, 100%);
+      --x-button-color: var(--x-button-active-color, var(--color-accent-foreground));
+      --x-button-color-mix: var(--x-button-active-color-mix, transparent);
+      --x-button-color-opacity: var(--x-button-active-color-opacity, 100%);
+    }
+
+    &:disabled {
+      --x-button-background-color: var(--x-button-disabled-background-color, var(--color-accent));
+      --x-button-background-color-mix: var(--x-button-disabled-background-color-mix, transparent);
+      --x-button-background-color-opacity: var(--x-button-disabled-background-color-opacity, 50%);
+      --x-button-border-color: var(--x-button-disabled-border-color, var(--color-accent));
+      --x-button-border-color-mix: var(--x-button-disabled-border-color-mix, transparent);
+      --x-button-border-color-opacity: var(--x-button-disabled-border-color-opacity, 50%);
+      --x-button-color: var(--x-button-disabled-color, var(--color-accent-foreground));
+      --x-button-color-mix: var(--x-button-disabled-color-mix, transparent);
+      --x-button-color-opacity: var(--x-button-disabled-color-opacity, 50%);
+    }
+  }
+}

package/src/components/button/lg.css

@@ -0,0 +1,4 @@
+.x-button:is(.lg) {
+  --x-button-height: 3rem;
+  --x-button-padding-inline: 1.75rem;
+}

package/src/components/button/muted.css

@@ -0,0 +1,14 @@
+.x-button:is(.muted) {
+  --x-button-disabled-background-color-opacity: 5%;
+  --x-button-disabled-background-color-mix: transparent;
+  --x-button-disabled-color: var(--color-accent);
+  --x-button-active-background-color-opacity: 30%;
+  --x-button-active-background-color-mix: transparent;
+  --x-button-active-color: var(--color-accent);
+  --x-button-hover-background-color-opacity: 20%;
+  --x-button-hover-background-color-mix: transparent;
+  --x-button-hover-color: var(--color-accent);
+  --x-button-focus-outline-offset: -2px;
+  --x-button-color: var(--color-accent);
+  --x-button-background-color-opacity: 10%;
+}

package/src/components/button/props/default.css

@@ -0,0 +1,11 @@
+:root, :host {
+  --x-button-outline-width: 2px;
+  --x-button-border-width: 0px;
+  --x-button-border-radius: var(--radius);
+  --x-button-font-size: var(--font-size-sm);
+  --x-button-font-weight: var(--font-weight-medium);
+  --x-button-gap: var(--spacing-sm);
+  --x-button-height: 2.25rem;
+  --x-button-padding-block: 0.375rem;
+  --x-button-padding-inline: 0.75rem;
+}

package/src/components/button/props/interactive.css

@@ -0,0 +1,9 @@
+:root, :host {
+  --x-button-hover-background-color-mix: var(--color-dark);
+  --x-button-hover-background-color-opacity: 80%;
+  --x-button-focus-outline-offset: 2px;
+  --x-button-focus-outline-color-opacity: 50%;
+  --x-button-active-background-color-mix: var(--color-dark);
+  --x-button-active-background-color-opacity: 90%;
+  --x-button-disabled-background-color-opacity: 75%;
+}

package/src/components/button/raised.css

@@ -0,0 +1,6 @@
+.x-button:is(.raised) {
+  --x-button-border-width: 1px;
+  --x-button-border-color-opacity: 75%;
+  --x-button-border-color: var(--x-button-background-color);
+  --x-button-border-color-mix: var(--x-button-color);
+}

package/src/components/button/readme.md

@@ -0,0 +1,46 @@
+# [Button](https://winduum.dev/docs/components/button.html)
+
+## Installation
+```shell
+npm i winduum
+```
+Learn more how to set up Winduum [here](https://winduum.dev/docs/).
+Include CSS either globally or to your component _([you can't use TailwindCSS layers in per-component CSS](https://tailwindcss.com/docs/adding-custom-styles#layers-and-per-component-css))_
+
+```css
+@import "winduum/src/button/index.css" layer(components);
+```
+
+or modular (you can use your own props or CSS)
+
+```css
+@import "winduum/src/button/props/default.css" layer(components);
+@import "winduum/src/button/props/interactive.css" layer(components);
+@import "winduum/src/button/default.css" layer(components);
+@import "winduum/src/button/interactive.css" layer(components);
+@import "winduum/src/button/sm.css" layer(components);
+@import "winduum/src/button/lg.css" layer(components);
+@import "winduum/src/button/bordered.css" layer(components);
+@import "winduum/src/button/ghosted.css" layer(components);
+@import "winduum/src/button/fill.css" layer(components);
+@import "winduum/src/button/muted.css" layer(components);
+@import "winduum/src/button/raised.css" layer(components);
+@import "winduum/src/button/square.css" layer(components);
+@import "winduum/src/button/circle.css" layer(components);
+```
+
+
+### Local imports
+By default, imports are directly from `npm` so you can leverage updates.
+You can also copy and paste the code from this directory to your project and remap the imports to local.
+
+```css
+@import "@/components/button/assets/index.css" layer(components);
+```
+
+### Docs
+Visit [docs](https://winduum.dev/docs/components/button.html) to learn more about usage examples.
+
+### Frameworks
+* [winduum/winduum-vue](https://github.com/winduum/winduum-vue/blob/main/src/button)
+* [winduum/winduum-react](https://github.com/winduum/winduum-react/blob/main/src/button)

package/src/components/button/sm.css

@@ -0,0 +1,4 @@
+.x-button:is(.sm) {
+  --x-button-height: 2rem;
+  --x-button-padding-inline: 1rem;
+}

package/src/components/button/square.css

@@ -0,0 +1,5 @@
+.x-button:is(.square) {
+  --x-button-padding-block: 0;
+  --x-button-padding-inline: 0;
+  --x-button-width: var(--x-button-height);
+}

package/src/components/card/default.css

@@ -1,9 +1,7 @@
-.c-card {
-  --c-card-p: var(--c-card-py) var(--c-card-px);
-
-  background-color: var(--color-body-primary);
-  border-radius: var(--rounded-2xl);
-  padding: var(--c-card-p);
+.x-card {
+  background-color: var(--x-card-background-color);
+  border-radius: var(--x-card-border-radius);
+  padding: var(--x-card-padding-block) var(--x-card-padding-inline);
   display: flex;
   flex-direction: column;
 }

package/src/components/card/index.css

@@ -1,2 +1,2 @@
+@import "props/default.css";
 @import "default.css";
-@import "default-props.css";

package/src/components/card/props/default.css

@@ -0,0 +1,6 @@
+:root, :host {
+  --x-card-background-color: var(--color-body-primary);
+  --x-card-border-radius: var(--radius-2xl);
+  --x-card-padding-block: var(--spacing-2xl);
+  --x-card-padding-inline: var(--spacing-3xl);
+}

package/src/components/card/readme.md

@@ -14,8 +14,8 @@ Include CSS either globally or to your component _([you can't use TailwindCSS la
 or modular (you can use your own props or CSS)
 
 ```css
+@import "winduum/src/components/card/props/default.css" layer(components);
 @import "winduum/src/components/card/default.css" layer(components);
-@import "winduum/src/components/card/default-props.css" layer(components);
 ```
 
 ### Local imports

package/src/components/carousel/content.css

@@ -1,10 +1,9 @@
-.c-carousel-content {
+.x-carousel-content {
   display: flex;
   overflow: auto;
   user-select: none;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
-  overscroll-behavior-x: none;
   position: relative;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
@@ -22,6 +21,7 @@
     }
   }
 
+  /* TODO grabbing */
   &:is(.grabbing) {
     &, & * {
       cursor: grabbing;

package/src/components/carousel/default.css

@@ -1,3 +1,3 @@
-.c-carousel {
+.x-carousel {
   inline-size: 100%;
 }

package/src/components/carousel/index.d.ts

@@ -1,5 +1,5 @@
 export interface ObserveCarouselOptions {
-    visibleClass?: string
+    visibleAttribute?: string
     observerOptions?: {
         rootMargin?: string
         threshold?: number | number[]
@@ -9,7 +9,7 @@ export interface ObserveCarouselOptions {
 export interface PaginationCarouselOptions {
     element?: HTMLElement | Element
     itemContent?: string
-    activeClass?: string
+    activeAttribute?: string
 }
 
 export interface ScrollCarouselOptions {
@@ -26,7 +26,7 @@ export interface AutoplayCarouselOptions {
 }
 
 export interface DragCarouselOptions {
-    activeClass?: string
+    activeAttribute?: string
 }
 
 export function scrollPrev(element: HTMLElement | Element): void