winduum 2.0.0-next.9 → 2.0.1

package/src/components/badge/default.css

@@ -3,8 +3,8 @@
   --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);
+  inline-size: var(--x-badge-inline-size);
+  block-size: var(--x-badge-block-size);
   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);

package/src/components/badge/lg.css

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

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

@@ -2,8 +2,8 @@
   --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-gap: var(--spacing-1);
+  --x-badge-block-size: 1.5rem;
   --x-badge-padding-block: 0;
   --x-badge-padding-inline: 0.5rem;
 }

package/src/components/badge/sm.css

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

package/src/components/badge/square.css

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

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

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

package/src/components/button/bordered.css

@@ -1,19 +1,16 @@
 .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-border-color-opacity: 100%;
   --x-button-background-color-opacity: 0%;
   --x-button-color: var(--color-accent);
 }

package/src/components/button/circle.css

@@ -1,6 +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-inline-size: var(--x-button-block-size);
   --x-button-border-radius: var(--radius-full);
 }

package/src/components/button/default.css

@@ -3,8 +3,8 @@
   --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);
+  inline-size: var(--x-button-inline-size);
+  block-size: var(--x-button-block-size);
   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);

package/src/components/button/index.css

@@ -11,3 +11,4 @@
 @import "fill.css";
 @import "square.css";
 @import "circle.css";
+@import "spinner.css";

package/src/components/button/interactive.css

@@ -1,7 +1,7 @@
 .x-button {
-  transition-property: var(--default-transition-property);
-  transition-timing-function: var(--transition-timing-function-in-out);
-  transition-duration: var(--default-transition-duration);
+  transition-property: var(--x-button-transition-property, var(--default-transition-property));
+  transition-timing-function: var(--x-button-timing-function, var(--transition-timing-function-in-out));
+  transition-duration: var(--x-button-transition-duration, var(--default-transition-duration));
 
   &:where(.accent-primary),
   &:where(.accent-body),
@@ -12,15 +12,17 @@
 
   &: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%);
+      @media (hover: hover) and (pointer: fine) {
+        --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 {
@@ -30,7 +32,7 @@
     }
 
     &:active, &:checked, &.active {
-      --x-button-background-color: var(--x-button-hover-background-color, var(--color-accent));
+      --x-button-background-color: var(--x-button-active-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));

package/src/components/button/lg.css

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

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

@@ -4,8 +4,8 @@
   --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-gap: var(--spacing-2);
+  --x-button-block-size: 2.25rem;
   --x-button-padding-block: 0.375rem;
   --x-button-padding-inline: 0.75rem;
 }

package/src/components/button/sm.css

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

package/src/components/button/spinner.css

@@ -0,0 +1,9 @@
+.x-button:has(.spinner-absolute) {
+  pointer-events: none;
+  color: transparent;
+
+  .spinner-absolute {
+    color: var(--x-button-color);
+    position: absolute;
+  }
+}

package/src/components/button/square.css

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

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

@@ -1,6 +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);
+  --x-card-padding-block: var(--spacing-6);
+  --x-card-padding-inline: var(--spacing-7);
 }

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

package/src/components/carousel/index.js

@@ -47,21 +47,21 @@ export const getItemCount = (element, scrollWidth = element.scrollWidth - elemen
 /**
  * @param {HTMLElement | Element} element
  * @param {import("./").ObserveCarouselOptions} options
- * @returns void
+ * @returns IntersectionObserver
  */
 export const observeCarousel = (element, options = {}) => {
     options = {
-        visibleClass: 'visible',
+        visibleAttribute: 'data-visible',
         observerOptions: {},
         ...options
     }
 
-    element._observer = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-            entry.target.classList.toggle(options.visibleClass, entry.isIntersecting)
+    element._observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            entry.target.toggleAttribute(options.visibleAttribute, entry.isIntersecting)
         })
 
-        const activeElement = [...element.children].find(children => children.classList.contains(options.visibleClass))
+        const activeElement = [...element.children].find(children => children.hasAttribute(options.visibleAttribute))
 
         if (activeElement) {
             element._activeIndex = [...element.children].indexOf(activeElement)
@@ -73,6 +73,8 @@ export const observeCarousel = (element, options = {}) => {
     })
 
     ;[...element.children].forEach(children => element._observer.observe(children))
+
+    return element._observer
 }
 
 /**
@@ -82,7 +84,7 @@ export const observeCarousel = (element, options = {}) => {
  */
 export const scrollCarousel = (element, options = {}) => {
     options.pagination = {
-        activeClass: 'active',
+        activeAttribute: 'data-active',
         ...options.pagination
     }
 
@@ -90,9 +92,9 @@ export const scrollCarousel = (element, options = {}) => {
     const activeItemMax = getItemCount(element)
 
     if (options?.pagination?.element) {
-        ;[...options.pagination.element.children].forEach(children => children.classList.remove(options.pagination.activeClass))
+        ;[...options.pagination.element.children].forEach(children => children.removeAttribute(options.pagination.activeAttribute))
 
-        options.pagination.element.children[activeItem - 1]?.classList.add(options.pagination.activeClass)
+        options.pagination.element.children[activeItem - 1]?.setAttribute(options.pagination.activeAttribute, '')
     }
 
     if (options.progressElement) {
@@ -118,7 +120,7 @@ export const scrollCarousel = (element, options = {}) => {
 export const paginationCarousel = (element, options = {}) => {
     options = {
         itemContent: '<div aria-hidden="true"></div>',
-        activeClass: 'active',
+        activeAttribute: 'data-active',
         ...options
     }
 
@@ -129,7 +131,7 @@ export const paginationCarousel = (element, options = {}) => {
     ).join(''))
 
     ;[...options.element.children].forEach((children, i) => {
-        (i === 0) && children.classList.add(options.activeClass)
+        (i === 0) && children.setAttribute(options.activeAttribute, '')
         children.addEventListener('click', ({ currentTarget }) => {
             scrollTo(element, [...options.element.children].indexOf(currentTarget))
         })
@@ -150,7 +152,7 @@ export const autoplayCarousel = (element, options = {}) => {
 
     let paused
 
-    options.pauseElements.forEach(element => {
+    options.pauseElements.forEach((element) => {
         element?.addEventListener('mouseenter', () => (paused = true))
         element?.addEventListener('mouseleave', () => (paused = false))
     })
@@ -173,7 +175,7 @@ export const autoplayCarousel = (element, options = {}) => {
  */
 export const dragCarousel = (element, options = {}) => {
     options = {
-        activeClass: 'grabbing',
+        activeAttribute: 'data-grabbing',
         ...options
     }
 
@@ -188,7 +190,7 @@ export const dragCarousel = (element, options = {}) => {
 
     const endGrabbing = () => {
         isDown = false
-        element.classList.remove(options.activeClass)
+        element.removeAttribute(options.activeAttribute)
 
         scrollTo(element, element._activeIndex)
 
@@ -209,13 +211,13 @@ export const dragCarousel = (element, options = {}) => {
         scrollLeft = element.scrollLeft
     })
 
-    element.addEventListener('mousemove', e => {
+    element.addEventListener('mousemove', (e) => {
         if (!isDown) return
         e.preventDefault()
 
         const x = e.pageX - element.offsetLeft
 
-        element.classList.add(options.activeClass)
+        element.setAttribute(options.activeAttribute, '')
         element.style.scrollSnapType = 'unset'
         element.scroll({ left: scrollLeft - ((x - startX) * 1.25), behavior: 'instant' })
         element.ondragstart = e => e.preventDefault()

package/src/components/check/invalid.css

@@ -1,5 +1,5 @@
 .x-check {
-  &.invalid, :user-invalid, .validated & :invalid {
+  :user-invalid {
     --x-check-border-color: var(--x-check-invalid-border-color, var(--color-error));
     --x-check-outline-color: var(--x-check-invalid-outline-color, var(--color-error));
     --x-check-background-color: var(--x-check-invalid-background-color, var(--color-error));

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

@@ -2,7 +2,7 @@
   --x-check-size: 1.25rem;
   --x-check-icon-size: 1.125rem;
   --x-check-icon: var(--mask-check);
-  --x-check-gap: var(--spacing-md);
+  --x-check-gap: var(--spacing-3);
   --x-check-font-size: var(--font-size-sm);
   --x-check-line-height: calc(1em + 0.25rem);
   --x-check-border-radius: var(--radius-md);

package/src/components/color/interactive.css

@@ -19,7 +19,7 @@
       }
 
       &:focus-visible {
-        --x-color-outline-color-opacity: var(--x-color-focus-outline-color-opacity, 50%);
+        --x-color-outline-color-opacity: var(--x-color-focus-outline-color-opacity, 100%);
         --x-color-outline-offset: var(--x-color-focus-outline-offset, 3px);
       }
 

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

@@ -3,5 +3,4 @@
   --x-color-secondary: transparent;
   --x-color-size: 1.5rem;
   --x-color-border-radius: var(--radius-full);
-  --x-color-outline-width: 1px;
 }

package/src/components/compare/default.css

@@ -41,13 +41,13 @@
     }
   }
 
-  > :where(.x-button) {
+  > .x-button {
     inset-inline-start: var(--x-compare-position);
-    margin-inline-start: calc(var(--x-button-width) / 2 * -1);
+    margin-inline-start: calc(var(--x-button-inline-size) / 2 * -1);
     margin-block: auto;
   }
 
-  > :where(.x-image) {
+  > .x-image {
     display: grid;
     z-index: 0;
 

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

@@ -3,6 +3,6 @@ export interface SetPositionOptions {
     positionProperty?: string
 }
 
-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 function setPosition(element: HTMLInputElement, options?: SetPositionOptions): void
+export function setKeyboardStep(element: HTMLInputElement, key: string, step?: string): void
+export function setMouseStep(element: HTMLInputElement, step?: string): void

package/src/components/compare/index.js

@@ -1,34 +1,35 @@
 /**
- * @param {Event & { currentTarget: HTMLElement | Element }} event
+ * @param {HTMLInputElement} element
  * @param {import("./").SetPositionOptions} options
  * @returns void
  */
-export const setPosition = ({ currentTarget }, options = {}) => {
+export const setPosition = (element, options = {}) => {
     const { selector, positionProperty } = {
         selector: '.x-compare',
         positionProperty: '--x-compare-position',
         ...options
     }
 
-    currentTarget?.closest(selector)?.style.setProperty(positionProperty, `${currentTarget.value}%`)
+    element?.closest(selector)?.style.setProperty(positionProperty, `${element.value}%`)
 }
 
 /**
- * @param {KeyboardEvent & { currentTarget: HTMLInputElement | EventTarget }} event
+ * @param {HTMLInputElement} element
+ * @param {string} key
  * @param {string} step
  * @returns void
  */
-export const setKeyboardStep = ({ key, currentTarget }, step = '10') => {
+export const setKeyboardStep = (element, key, step = '10') => {
     if (key?.toLowerCase() !== 'arrowright' && key?.toLowerCase() !== 'arrowleft') return
 
-    currentTarget.step = step
+    element.step = step
 }
 
 /**
- * @param {MouseEvent & { currentTarget: HTMLInputElement | EventTarget }} event
+ * @param {HTMLInputElement} element
  * @param {string} step
  * @returns void
  */
-export const setMouseStep = ({ currentTarget }, step = '0.1') => {
-    currentTarget.step = step
+export const setMouseStep = (element, step = '0.1') => {
+    element.step = step
 }

package/src/components/control/color.css

@@ -1,14 +1,14 @@
 .x-control {
   > :where(input) {
     &::-webkit-color-swatch-wrapper {
-      inline-size: var(--x-control-color-swatch-width);
-      block-size: var(--x-control-color-swatch-height);
+      inline-size: var(--x-control-color-swatch-inline-size);
+      block-size: var(--x-control-color-swatch-block-size);
       padding: 0;
     }
 
     &::-moz-color-swatch {
-      inline-size: var(--x-control-color-swatch-width);
-      block-size: var(--x-control-color-swatch-height);
+      inline-size: var(--x-control-color-swatch-inline-size);
+      block-size: var(--x-control-color-swatch-block-size);
       border-radius: var(--x-control-color-swatch-border-radius);
       margin: 0;
     }
@@ -18,7 +18,7 @@
     }
 
     &[type="color"] ~ label {
-      margin-inline-start: calc(var(--x-control-padding-inline) + var(--x-control-color-swatch-width));
+      margin-inline-start: calc(var(--x-control-padding-inline) + var(--x-control-color-swatch-inline-size));
     }
   }
 }

package/src/components/control/default.css

@@ -1,6 +1,6 @@
 .x-control {
   display: grid;
-  block-size: var(--x-control-height);
+  block-size: var(--x-control-block-size);
   font-family: var(--x-control-font-family);
   font-weight: var(--x-control-font-weight);
   font-size: var(--x-control-font-size);
@@ -46,7 +46,7 @@
   }
 
   > :where(input, textarea, select) {
-    padding-block: var(--x-control-padding-block);
+    padding-block: var(--x-control-padding-block-start, var(--x-control-padding-block)) var(--x-control-padding-block-end, var(--x-control-padding-block));
     padding-inline: calc(var(--x-control-padding-inline) + var(--x-control-padding-inline-start, 0px)) calc(var(--x-control-padding-inline) + var(--x-control-padding-inline-end, 0px));
     grid-area: x-control;
     text-overflow: ellipsis;
@@ -68,7 +68,7 @@
   }
 
   > :where(textarea) {
-    min-block-size: var(--x-control-height-textarea);
+    min-block-size: var(--x-control-block-size-textarea);
     resize: vertical;
   }
 }

package/src/components/control/file.css

@@ -10,7 +10,7 @@
           var(--x-control-file-background-color, currentColor) var(--x-control-file-background-color-opacity, 15%),
           var(--x-control-file-background-color-mix, transparent)
         );
-      block-size: calc(var(--x-control-height) - var(--x-control-border-width) * 2);
+      block-size: calc(var(--x-control-block-size) - var(--x-control-border-width) * 2);
       padding-inline: var(--x-control-padding-inline);
       margin-inline: calc(var(--x-control-padding-inline) * -1) var(--x-control-padding-inline);
       margin-block-start: calc(var(--x-control-padding-block) * -1);

package/src/components/control/invalid.css

@@ -1,5 +1,5 @@
 .x-control {
-  &.invalid, &:has(:user-invalid), .validated &:has(:invalid) {
+  &:has(:user-invalid) {
     --x-control-background-color: var(--x-control-invalid-background-color, var(--color-error));
     --x-control-background-color-opacity: var(--x-control-invalid-background-color-opacity, 10%);
     --x-control-border-color: var(--x-control-invalid-border-color, var(--color-error));

package/src/components/control/props/color.css

@@ -1,5 +1,5 @@
 :root, :host {
-  --x-control-color-swatch-width: 1.25rem;
-  --x-control-color-swatch-height: 1.25rem;
+  --x-control-color-swatch-inline-size: 1.25rem;
+  --x-control-color-swatch-block-size: 1.25rem;
   --x-control-color-swatch-border-radius: var(--radius-full);
 }

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

@@ -1,13 +1,13 @@
 :root, :host {
-  --x-control-height: 3rem;
-  --x-control-height-textarea: 8rem;
+  --x-control-block-size: 3rem;
+  --x-control-block-size-textarea: 8rem;
   --x-control-padding-inline: 0.75rem;
   --x-control-padding-block: 0.75rem;
   --x-control-border-width: 1px;
   --x-control-border-radius: var(--radius);
   --x-control-border-color: currentColor;
   --x-control-font-weight: var(--font-weight-medium);
-  --x-control-font-size: var(--font-size-sm);
+  --x-control-font-size: var(--font-size-base);
   --x-control-background-color: transparent;
   --x-control-color: currentColor;
   --x-control-outline-width: 3px;

package/src/components/control/select-multiple.css

@@ -1,5 +1,5 @@
 .x-control:has(select[multiple]) {
-  --x-control-height: auto;
+  --x-control-block-size: auto;
 
   select {
     overflow-y: auto;

package/src/components/details/index.js

@@ -19,7 +19,7 @@ export const showDetails = async (element, options = {}) => {
 
     const details = element.closest(options.selector)
     const { down } = await import('slide-element')
-    const content = element.closest(options.summarySelector).nextElementSibling
+    const content = details.querySelector(options.summarySelector).nextElementSibling
 
     details._isHiding = false
     details.open = true
@@ -42,7 +42,7 @@ export const closeDetails = async (element, options = {}) => {
 
     const details = element.closest(options.selector)
     const { up } = await import('slide-element')
-    const content = element.closest(options.summarySelector).nextElementSibling
+    const content = details.querySelector(options.summarySelector).nextElementSibling
 
     details._isHiding = true
 

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

@@ -1,8 +1,10 @@
 export interface DefaultOptions {
     remove?: boolean | null
     closable?: boolean | null
+    modal?: boolean
     openAttribute?: string
     closedAttribute?: string
+    contentSelector?: string
     scrollbarWidthProperty?: string
 }
 

package/src/components/dialog/index.js

@@ -7,8 +7,9 @@ export const defaultOptions = {
     closedAttribute: 'data-closed',
     openAttribute: 'data-open',
     scrollbarWidthProperty: '--default-scrollbar-width',
+    contentSelector: '.x-dialog-content',
     closable: true,
-    remove: false
+    modal: true
 }
 
 /**
@@ -26,7 +27,7 @@ export const showDialog = async (element, options = {}) => {
     document.documentElement.style.setProperty(options.scrollbarWidthProperty, `${window.innerWidth - document.body.clientWidth}px`)
 
     if (!element?._dialogHasEvents) {
-        element.addEventListener('cancel', e => {
+        element.addEventListener('cancel', (e) => {
             e.preventDefault()
             options.closable && closeDialog(element, options)
         })
@@ -42,11 +43,11 @@ export const showDialog = async (element, options = {}) => {
 
     element.setAttribute(options.closedAttribute, '')
 
-    element.showModal()
+    options.modal ? element.showModal() : element.show()
     element.scroll(0, 0)
 
     element.removeAttribute(options.closedAttribute)
-    await animationsFinished(element.lastElementChild)
+    await animationsFinished(element.querySelector(options.contentSelector))
     element.setAttribute(options.openAttribute, '')
 
     element.dispatchEvent(new CustomEvent('x-dialog:show'))
@@ -64,13 +65,14 @@ export const closeDialog = async (element, options = {}) => {
         ...options
     }
 
+    element.dispatchEvent(new CustomEvent('x-dialog:close'))
+
     element.removeAttribute(options.openAttribute)
     element.setAttribute(options.closedAttribute, '')
 
-    await animationsFinished(element.lastElementChild)
+    await animationsFinished(element.querySelector(options.contentSelector))
 
     element.close()
 
-    element.dispatchEvent(new CustomEvent('x-dialog:close'))
     options.remove && element.remove()
 }