winduum 1.2.1 → 2.0.0-next.10

package/src/components/toast/default.css

@@ -1,30 +1,30 @@
-.c-toast {
-  width: min(100%, var(--c-toast-width));
-  height: var(--c-toast-height);
-  transition: all var(--c-toast-duration) var(--ease-in-out);
+.x-toast {
+  inline-size: min(100%, var(--x-toast-inline-size));
+  block-size: var(--x-toast-block-size);
+  transition: all var(--x-toast-transition-duration) var(--x-toast-transition-timing-function, var(--transition-timing-function-in-out));
   position: relative;
   pointer-events: auto;
   display: flex;
   flex-direction: column;
   visibility: hidden;
-  opacity: 0;
+  opacity: 0%;
 
   .flex-col-reverse & {
     justify-content: flex-end;
   }
 
   &.in {
-    margin-block: var(--c-toaster-spacing-y);
+    margin-block: var(--x-toaster-margin-block);
   }
 
   &.in:where(:nth-last-child(-n+3)) {
     visibility: visible;
-    opacity: 1;
+    opacity: 100%;
   }
 
   &.out {
     visibility: hidden;
-    opacity: 0;
+    opacity: 0%;
     height: 0;
     margin-block: 0;
   }

package/src/components/toast/index.css

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

package/src/components/toast/props/content.css

@@ -0,0 +1,7 @@
+:root, :host {
+  --x-toast-content-border-radius: var(--radius-2xl);
+  --x-toast-content-padding-block: var(--spacing-md);
+  --x-toast-content-padding-inline: var(--spacing-lg);
+  --x-toast-content-gap: var(--spacing-xl);
+  --x-toast-content-background-color: var(--color-body-primary);
+}

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

@@ -0,0 +1,4 @@
+:root, :host {
+  --x-toast-inline-size: 20rem;
+  --x-toast-transition-duration: calc(var(--default-transition-duration) * 2);
+}

package/src/components/toast/readme.md

@@ -17,9 +17,9 @@ 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/toast/default-props.css" layer(components);
+@import "winduum/src/components/toast/props/default.css" layer(components);
+@import "winduum/src/components/toast/props/content.css" layer(components);
 @import "winduum/src/components/toast/default.css" layer(components);
-@import "winduum/src/components/toast/content-props.css" layer(components);
 @import "winduum/src/components/toast/content.css" layer(components);
 ```
 

package/src/components/toaster/default.css

@@ -1,7 +1,7 @@
-.c-toaster {
-  z-index: var(--z-50);
-  padding: var(--c-toaster-p);
-  margin-block: calc(var(--c-toaster-spacing-y) * -1);
+.x-toaster {
+  z-index: var(--x-toaster-z-index, var(--z-index-50));
+  padding: var(--x-toaster-padding);
+  margin-block: calc(var(--x-toaster-margin-block) * -1);
   position: fixed;
   inset: 0;
   pointer-events: none;

package/src/components/toaster/index.css

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

package/src/components/toaster/index.js

@@ -8,7 +8,7 @@ import { animationsFinished, nextRepaint } from '../../common.js'
 export const closeToast = async (element, options = {}) => {
     options = {
         hiddenClass: 'out',
-        heightProperty: '--c-toast-height',
+        heightProperty: '--x-toast-block-size',
         ...options
     }
 
@@ -36,7 +36,7 @@ export const showToast = async (element, options = {}) => {
     options = {
         visibleClass: 'in',
         autoHide: null,
-        heightProperty: '--c-toast-height',
+        heightProperty: '--x-toast-block-size',
         close: {},
         ...options
     }
@@ -65,8 +65,8 @@ export const insertToaster = async (element, options = {}) => {
         ...options
     }
 
-    if (!document.querySelector('.c-toaster')) {
-        element.insertAdjacentHTML('beforeend', `<ol class="c-toaster ${options.classes}"></ol>`)
+    if (!document.querySelector('.x-toaster')) {
+        element.insertAdjacentHTML('beforeend', `<ol class="x-toaster ${options.classes}"></ol>`)
     }
 }
 
@@ -87,12 +87,12 @@ export const insertToast = async (element, options = {}) => {
     }
 
     element.insertAdjacentHTML('beforeend', `
-        <li class="c-toast ${options.classes}" role="status" aria-live="assertive" aria-atomic="true">
-            <div class="c-toast-content">
+        <li class="x-toast ${options.classes}" role="status" aria-live="assertive" aria-atomic="true">
+            <div class="x-toast-content">
                ${options.start}
                 <div class="flex-col">
-                    <div class="ui-title">${options.title}</div>           
-                    <div class="ui-text">${options.text}</div>
+                    <div class="x-title">${options.title}</div>           
+                    <div class="x-text">${options.text}</div>
                 </div>
                 ${options.end}
             </div>

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

@@ -0,0 +1,4 @@
+:root, :host {
+  --x-toaster-padding: var(--spacing-xl);
+  --x-toaster-margin-block: var(--spacing-xs);
+}

package/src/components/toaster/readme.md

@@ -14,7 +14,7 @@ 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/toaster/default-props.css" layer(components);
+@import "winduum/src/components/toaster/props/default.css" layer(components);
 @import "winduum/src/components/toaster/default.css" layer(components);
 ```
 

package/src/components/tooltip/default.css

@@ -1,27 +1,27 @@
-.c-tooltip {
+.x-tooltip {
   position: relative;
   display: inline-block;
 
   &::before {
     --tw-content: attr(aria-label);
 
+    background-color: var(--x-tooltip-background-color);
+    color: var(--x-tooltip-color);
+    border-radius: var(--x-tooltip-border-radius);
+    font-size: var(--x-tooltip-font-size);
+    padding: var(--x-tooltip-padding-block) var(--x-tooltip-padding-inline);
+    z-index: var(--x-tooltip-z-index, var(--z-index-20));
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-duration: var(--default-transition-duration);
     content: var(--tw-content);
     opacity: var(--tw-opacity);
     visibility: var(--tw-visibility);
     transform:
       translate(var(--tw-translate-x), var(--tw-translate-y))
       scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    transition-property: var(--transition);
-    transition-timing-function: var(--ease-in-out);
-    transition-duration: var(--duration);
     will-change: transform;
-    background-color: var(--c-tooltip-bg);
-    color: var(--c-tooltip-color);
-    border-radius: var(--c-tooltip-border-radius);
-    font-size: var(--c-tooltip-font-size);
-    padding: var(--c-tooltip-py) var(--c-tooltip-px);
-    z-index: var(--z-20);
-    width: max-content;
+    inline-size: max-content;
     position: absolute;
     pointer-events: none;
   }
@@ -30,7 +30,7 @@
     &::before {
       --tw-translate-x: -50%;
 
-      margin-block: var(--c-tooltip-margin-block);
+      margin-block: var(--x-tooltip-margin-block);
       inset-inline-start: 50%;
     }
   }
@@ -39,7 +39,7 @@
     &::before {
       --tw-translate-y: -50%;
 
-      margin-inline: var(--c-tooltip-margin-inline);
+      margin-inline: var(--x-tooltip-margin-inline);
       inset-block-start: 50%;
     }
   }
@@ -73,8 +73,8 @@
   }
 
   &:not(:hover, :focus)::before {
-    --tw-scale-x: var(--c-tooltip-scale-x);
-    --tw-scale-y: var(--c-tooltip-scale-y);
+    --tw-scale-x: var(--x-tooltip-scale-x);
+    --tw-scale-y: var(--x-tooltip-scale-y);
     --tw-opacity: 0;
     --tw-visibility: hidden;
   }

package/src/components/tooltip/index.css

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

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

@@ -0,0 +1,12 @@
+:root, :host {
+  --x-tooltip-background-color: var(--color-main);
+  --x-tooltip-color: var(--color-main-foreground);
+  --x-tooltip-border-radius: var(--radius-md);
+  --x-tooltip-font-size: var(--font-size-sm);
+  --x-tooltip-padding-block: var(--spacing-xs);
+  --x-tooltip-padding-inline: var(--spacing-sm);
+  --x-tooltip-margin-block: var(--spacing-xs);
+  --x-tooltip-margin-inline: var(--spacing-xs);
+  --x-tooltip-scale-x: 0.75;
+  --x-tooltip-scale-y: 0.75;
+}

package/src/components/tooltip/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/tooltip/props/default.css" layer(components);
 @import "winduum/src/components/tooltip/default.css" layer(components);
-@import "winduum/src/components/tooltip/default-props.css" layer(components);
 ```
 
 ### Local imports
@@ -23,7 +23,7 @@ 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/ui/tooltip/assets/index.css" layer(components);
+@import "@/components/tooltip/assets/index.css" layer(components);
 ```
 
 ### Docs

package/src/main.css

@@ -1,3 +1,2 @@
 @import "base/index.css";
-@import "ui/index.css";
 @import "components/index.css";

package/src/test.css

@@ -0,0 +1,7 @@
+@import "base/index.css";
+@import "components/index.css" layer(components);
+@import "utilities/index.css" layer(components);
+@import "tailwindcss/base.css";
+@import "tailwindcss/components.css";
+@import "tailwindcss/utilities.css";
+@import "tailwindcss/variants.css";

package/src/utilities/common.css

@@ -1,12 +1,8 @@
-.animate {
-  animation-duration: var(--duration);
+.animation {
+  animation-duration: var(--default-transition-duration);
   animation-fill-mode: both;
 }
 
-.flex-col {
-  display: flex;
-}
-
 [hidden] {
   display: none;
 }

package/src/utilities/container/default.css

@@ -1,13 +1,12 @@
 .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] min(100% - (var(--container-padding) * 2), var(--container-width)) [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;
+  & > :where(*) {
+    grid-column: container;
+  }
 }

package/src/utilities/container/index.css

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

package/src/utilities/divider.css

@@ -1,25 +1,34 @@
 .divider {
   --color-accent: currentColor;
-  --tw-border-opacity: 0.15;
 
   display: flex;
   align-items: center;
   align-self: stretch;
 
   &:where(:not(:empty)) {
-    gap: var(--spacing-md);
+    gap: var(--divider-gap, var(--spacing-md));
   }
 
   &::before, &::after {
     content: "";
     flex-grow: 1;
-    border-block-start: 1px solid color-mix(in var(--space), var(--color-accent) calc(var(--tw-border-opacity) * 100%), transparent);
+    border-block-start:
+      1px solid color-mix(
+        in var(--divider-border-block-color-space, srgb),
+        var(--divider-border-block-color, var(--color-accent)) var(--divider-border-block-color-opacity, 15%),
+        var(--divider-border-block-color-mix, transparent)
+      );
   }
 
   &:where(.flex-col) {
     &::before, &::after {
       border-block-start: 0;
-      border-inline-start: 1px solid color-mix(in var(--space), var(--color-accent) calc(var(--tw-border-opacity) * 100%), transparent);
+      border-inline-start:
+        1px solid color-mix(
+          in var(--divider-border-inline-color-space, srgb),
+          var(--divider-border-inline-color, var(--color-accent)) var(--divider-border-inline-color-opacity, 15%),
+          var(--divider-border-inline-color-mix, transparent)
+        );
     }
   }
 }

package/src/utilities/ripple/index.css

@@ -1,12 +1,15 @@
 .ripple {
-  --tw-bg-opacity: 0.4;
-
-  background-color: color-mix(in var(--space), currentcolor calc(var(--tw-bg-opacity) * 100%), transparent);
+  inline-size: var(--ripple-size, 2rem);
+  block-size: var(--ripple-size, 2rem);
+  background-color:
+    color-mix(
+      in var(--ripple-background-color-space, srgb),
+      var(--ripple-background-color, currentColor) var(--ripple-background-color-opacity, 40%),
+      var(--ripple-background-color-mix, transparent)
+    );
+  animation-duration: var(--ripple-animation-duration, 1s);
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
-  animation-duration: 1s;
   pointer-events: none;
-  width: 2rem;
-  height: 2rem;
 }

package/src/utilities/skeleton/default.css

@@ -1,5 +1,12 @@
 .skeleton {
-  background: linear-gradient(to right, var(--skeleton-from), var(--skeleton-to), var(--skeleton-to), var(--skeleton-from));
+  background:
+    linear-gradient(
+      to right,
+      var(--skeleton-gradient-from),
+      var(--skeleton-gradient-to),
+      var(--skeleton-gradient-to),
+      var(--skeleton-gradient-from)
+    );
   opacity: var(--skeleton-opacity);
   transition: var(--transition-opacity);
   animation: move-indeterminate 1.5s linear infinite;

package/src/utilities/skeleton/index.css

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

package/src/utilities/skeleton/props/default.css

@@ -0,0 +1,5 @@
+:root, :host {
+  --skeleton-opacity: 50%;
+  --skeleton-gradient-from: color-mix(in var(--default-color-space), var(--color-body) 50%, var(--color-main));
+  --skeleton-gradient-to: color-mix(in var(--default-color-space), var(--color-body) 80%, var(--color-main));
+}

package/src/utilities/swap/default.css

@@ -1,13 +1,13 @@
 .swap {
+  cursor: var(--cursor-pointer, pointer);
   display: inline-grid;
-  cursor: var(--cursor, pointer);
 
   > :where(*) {
-    transition-property: var(--transition);
-    transition-timing-function: var(--ease-in-out);
-    transition-duration: var(--duration);
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-duration: var(--default-transition-duration);
     grid-area: 1/-1;
-    opacity: 0;
+    opacity: 0%;
   }
 
   > [aria-hidden="false"],
@@ -15,6 +15,6 @@
   input:indeterminate ~ :where(*:nth-last-child(2)),
   input:checked ~ :where(*:last-child) {
     transform: none;
-    opacity: 1;
+    opacity: 100%;
   }
 }

package/src/utilities/underline.css

@@ -1,13 +1,13 @@
 .underline {
-  text-underline-offset: var(--tw-underline-offset, 0.125em);
+  text-underline-offset: var(--default-underline-offset, 0.125em);
 }
 
 .underline-transparent {
   &:where(:any-link, button:enabled, [role="button"]) {
-    transition: all var(--duration) var(--ease-in-out);
+    transition: all var(--default-transition-duration) var(--transition-timing-function-in-out);
 
     &:not(:hover, :focus-visible) {
-      text-underline-offset: var(--tw-underline-transparent-offset, -0.25em);
+      text-underline-offset: var(--default-underline-transparent-offset, -0.25em);
       text-decoration-color: transparent;
     }
   }

package/types/index.d.ts

@@ -23,11 +23,13 @@ declare module 'winduum' {
 	export const defaultConfig: PluginOptions
 
 	export default function createPlugin(userConfig?: PluginOptions): Plugin
+
+	export {};
 }
 
 declare module 'winduum/src/components/carousel' {
 	export interface ObserveCarouselOptions {
-		visibleClass?: string
+		visibleAttribute?: string
 		observerOptions?: {
 			rootMargin?: string
 			threshold?: number | number[]
@@ -37,7 +39,7 @@ declare module 'winduum/src/components/carousel' {
 	export interface PaginationCarouselOptions {
 		element?: HTMLElement | Element
 		itemContent?: string
-		activeClass?: string
+		activeAttribute?: string
 	}
 
 	export interface ScrollCarouselOptions {
@@ -54,7 +56,7 @@ declare module 'winduum/src/components/carousel' {
 	}
 
 	export interface DragCarouselOptions {
-		activeClass?: string
+		activeAttribute?: string
 	}
 
 	export function scrollPrev(element: HTMLElement | Element): void
@@ -66,6 +68,8 @@ declare module 'winduum/src/components/carousel' {
 	export function paginationCarousel(element: HTMLElement | Element, options?: PaginationCarouselOptions): void
 	export function autoplayCarousel(element: HTMLElement | Element, options?: AutoplayCarouselOptions): void
 	export function dragCarousel(element: HTMLElement | Element, options?: DragCarouselOptions): void
+
+	export {};
 }
 
 declare module 'winduum/src/components/compare' {
@@ -77,6 +81,8 @@ declare module 'winduum/src/components/compare' {
 	export function setPosition(event: Event, options?: SetPositionOptions): void
 	export function setKeyboardStep(event: KeyboardEvent, step?: string): void
 	export function setMouseStep(event: MouseEvent, step?: string): void
+
+	export {};
 }
 
 declare module 'winduum/src/components/details' {
@@ -89,35 +95,24 @@ declare module 'winduum/src/components/details' {
 	export function showDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
 	export function closeDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
 	export function toggleDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
+
+	export {};
 }
 
 declare module 'winduum/src/components/dialog' {
 	export interface DefaultOptions {
 		remove?: boolean | null
 		closable?: boolean | null
-		openClass?: string
+		openAttribute?: string
+		closedAttribute?: string
 		scrollbarWidthProperty?: string
 	}
 
-	export interface InsertDialogOptions {
-		selector?: string | null
-		class?: string | null
-		append?: boolean | null
-		show?: DefaultOptions
-	}
-
-	export interface FetchDialogOptions {
-		url: string
-		insert?: InsertDialogOptions
-	}
-
 	export const defaultOptions: DefaultOptions
-	export function dialogSelector(selector: string): HTMLDialogElement
-	export function dismissDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
-	export function showDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
-	export function closeDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
-	export function insertDialog(content: string, options?: InsertDialogOptions): Promise<void>
-	export function fetchDialog({ url, insert }: FetchDialogOptions): Promise<void>
+	export function showDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>
+	export function closeDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>
+
+	export {};
 }
 
 declare module 'winduum/src/components/drawer' {
@@ -134,6 +129,8 @@ declare module 'winduum/src/components/drawer' {
 	export function showDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
 	export function closeDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
 	export function scrollDrawer(element: HTMLElement | Element, options?: ScrollDrawerOptions): void
+
+	export {};
 }
 
 declare module 'winduum/src/components/form' {
@@ -163,6 +160,8 @@ declare module 'winduum/src/components/form' {
 
 	export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void
 	export function validateField(element: HTMLElement | SubmitEvent, options?: ValidateFieldOptions): void
+
+	export {};
 }
 
 declare module 'winduum/src/components/tabs' {
@@ -172,6 +171,8 @@ declare module 'winduum/src/components/tabs' {
 	}
 
 	export function toggleTab(element: HTMLElement | Element, options?: ToggleTabOptions): void
+
+	export {};
 }
 
 declare module 'winduum/src/components/toaster' {
@@ -205,12 +206,14 @@ declare module 'winduum/src/components/toaster' {
 	export function insertToaster(element: HTMLElement, options?: InsertToasterOptions): Promise<void>
 	export function insertToast(element: HTMLElement, options?: InsertToastOptions): Promise<void>
 	export function closeToaster(element: HTMLElement, options?: CloseToastOptions): Promise<void>
+
+	export {};
 }
 
 declare module 'winduum/src/components/popover' {
 	import type { FlipOptions, Middleware, OffsetOptions, Placement, ShiftOptions } from '@floating-ui/dom';
 	export interface ShowPopoverOptions {
-		visibleClass?: string
+		openAttribute?: string
 		compute?: boolean
 		placement?: Placement
 		middleware?: Array<Middleware | null | undefined | false>
@@ -219,12 +222,18 @@ declare module 'winduum/src/components/popover' {
 		shift?: ShiftOptions
 	}
 
+	export interface HidePopoverOptions {
+		openAttribute?: string
+	}
+
 	export function showPopover(element: HTMLElement | Element, options?: ShowPopoverOptions): Promise<void>
 	export function hidePopover(element: HTMLElement | Element): Promise<void>
 	export function togglePopover(element: HTMLElement | Element, options?: ShowPopoverOptions): Promise<void>
+
+	export {};
 }
 
-declare module 'winduum/src/ui/range' {
+declare module 'winduum/src/components/range' {
 	export interface SetTrackPropertyOptions {
 		element: HTMLElement | Element
 		value: string
@@ -244,14 +253,20 @@ declare module 'winduum/src/ui/range' {
 	export function setTrackProperty(options: SetTrackPropertyOptions, track: 'start' | 'end'): void
 	export function setValue(element: HTMLInputElement, options?: SetValueOptions): void
 	export function setOutputValue(element: HTMLInputElement, outputElement: HTMLOutputElement | Element, options?: SetOutputOptions): void
+
+	export {};
 }
 
 declare module 'winduum/src/utilities/ripple' {
 	export function showRipple(event: MouseEvent, element?: HTMLElement): void
+
+	export {};
 }
 
 declare module 'winduum/src/utilities/swap' {
 	export function toggleSwap(element: HTMLElement): void
+
+	export {};
 }
 
 //# sourceMappingURL=index.d.ts.map