winduum 2.0.0-next.2 → 2.0.0-next.20

package/src/base/reset.css

@@ -19,7 +19,6 @@
 :where(h1, h2, h3, h4, h5, h6),
 :where(hgroup),
 :where(hr),
-:where(html),
 :where(input),
 :where(kbd),
 :where(label),

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

@@ -0,0 +1,26 @@
+@theme {
+  --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 */
+  --color-primary-foreground: var(--color-light);
+  --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(--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(--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 */
+  --color-dark-foreground: 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/base/transitions.css

@@ -0,0 +1,11 @@
+@view-transition {
+    navigation: auto;
+}
+
+::view-transition-group(main) {
+    animation-duration: var(--view-transition-main-duration);
+}
+
+::view-transition-new(main) {
+    animation-delay: var(--view-transition-main-duration);
+}

package/src/components/badge/circle.css

@@ -1,5 +1,5 @@
 .x-badge:is(.circle) {
   --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);
   --x-badge-border-radius: var(--radius-full);
 }

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

@@ -3,7 +3,7 @@
   --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-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/default.css

@@ -8,7 +8,7 @@
     > li {
       &:not(:last-child)::after {
         mask: var(--x-breadcrumb-marker);
-        background-color: var(--x-breadcrumb-background-color, currentColor);
+        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);

package/src/components/button/bordered.css

@@ -13,7 +13,7 @@
   --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/interactive.css

@@ -10,17 +10,19 @@
     --x-button-hover-background-color-mix: var(--color-accent-foreground);
   }
 
-  &:is(button, input, :any-link, [role="button"]) {
+  &: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 {
@@ -29,7 +31,7 @@
       --x-button-outline-color-opacity: var(--x-button-focus-outline-color-opacity);
     }
 
-    &:active, &:checked, &[data-active] {
+    &: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);

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

@@ -5,7 +5,7 @@
   --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-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/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/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: 'visible',
         observerOptions: {},
         ...options
     }
 
     element._observer = new IntersectionObserver(entries => {
         entries.forEach(entry => {
-            entry.target.classList.toggle(options.visibleClass, entry.isIntersecting)
+            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) {
@@ -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))
         })
@@ -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)
 
@@ -215,7 +217,7 @@ export const dragCarousel = (element, options = {}) => {
 
         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/default.css

@@ -44,8 +44,8 @@
     flex-shrink: 0;
 
     &::before {
-      width: var(--x-check-icon-size);
-      height: var(--x-check-icon-size);
+      inline-size: var(--x-check-icon-size);
+      block-size: var(--x-check-icon-size);
       color: var(--x-check-icon-color);
       mask: var(--x-check-icon);
       transition: inherit;

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

@@ -43,7 +43,7 @@
 
   > :where(.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;
   }
 

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/content.css

@@ -6,7 +6,7 @@
   transition: var(--transition-transform), var(--transition-opacity);
   margin: auto;
 
-  :where(dialog:not(.open)) & {
+  :where(dialog[data-closed]) & {
     transform: translateY(-2rem);
     opacity: 0%;
   }

package/src/components/dialog/default.css

@@ -11,7 +11,7 @@
   display: flex;
   position: fixed;
   inset: 0;
-  overflow: hidden;
+  overflow: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
 
@@ -19,7 +19,7 @@
     display: none;
   }
 
-  &:not(.open) {
+  &[data-closed] {
     background-color: transparent;
   }
 }

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

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

package/src/components/dialog/index.js

@@ -4,9 +4,11 @@ import { animationsFinished } from '../../common.js'
  * @type {import("./").DefaultOptions}
 */
 export const defaultOptions = {
-    openClass: 'open',
-    overflowClass: 'overflow-auto',
+    closedAttribute: 'data-closed',
+    openAttribute: 'data-open',
     scrollbarWidthProperty: '--default-scrollbar-width',
+    contentSelector: '.x-dialog-content',
+    closable: true,
     remove: false
 }
 
@@ -18,7 +20,6 @@ export const defaultOptions = {
  */
 export const showDialog = async (element, options = {}) => {
     options = {
-        closable: true,
         ...defaultOptions,
         ...options
     }
@@ -40,14 +41,15 @@ export const showDialog = async (element, options = {}) => {
         element._dialogHasEvents = true
     }
 
-    window.HTMLDialogElement
-        ? element.showModal()
-        : element.setAttribute('open', '')
+    element.setAttribute(options.closedAttribute, '')
 
+    element.showModal()
     element.scroll(0, 0)
-    element.classList.add(options.openClass)
-    await animationsFinished(element.lastElementChild)
-    element.classList.add(options.overflowClass)
+
+    element.removeAttribute(options.closedAttribute)
+    await animationsFinished(element.querySelector(options.contentSelector))
+    element.setAttribute(options.openAttribute, '')
+
     element.dispatchEvent(new CustomEvent('x-dialog:show'))
 }
 
@@ -63,13 +65,12 @@ export const closeDialog = async (element, options = {}) => {
         ...options
     }
 
-    element.classList.remove(options.overflowClass, options.openClass)
+    element.removeAttribute(options.openAttribute)
+    element.setAttribute(options.closedAttribute, '')
 
-    await animationsFinished(element.lastElementChild)
+    await animationsFinished(element.querySelector(options.contentSelector))
 
-    window.HTMLDialogElement
-        ? element.close()
-        : element.removeAttribute('open')
+    element.close()
 
     element.dispatchEvent(new CustomEvent('x-dialog:close'))
     options.remove && element.remove()

package/src/components/drawer/default.css

@@ -13,6 +13,11 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+
+  &:not([open]), &::backdrop {
+    display: none;
+  }
 
   &::-webkit-scrollbar {
     display: none;
@@ -20,14 +25,10 @@
 
   &::after {
     content: "";
-    min-width: 100vw;
+    min-inline-size: 100vw;
     scroll-snap-align: end;
   }
 
-  &[inert] {
-    pointer-events: none;
-  }
-
   &.flex-col {
     overflow: hidden auto;
 

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

@@ -10,4 +10,5 @@ export interface ScrollDrawerOptions {
 
 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 function scrollInitDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
+export function scrollDrawer(element: HTMLDialogElement | Element, options?: ScrollDrawerOptions): void