winduum 2.0.0-next.2 → 2.0.0-next.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "2.0.0-next.2",
+  "version": "2.0.0-next.4",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",

package/src/base/defaults.css

@@ -37,7 +37,7 @@
 :where(hr) {
   background-color: color-mix(in var(--default-color-space), currentColor 100%, transparent);
   block-size: 1px;
-  width: 100%;
+  inline-size: 100%;
 }
 
 :where(code) {

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/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,11 @@
     display: none;
   }
 
-  &:not(.open) {
+  &:not([data-open]) {
+    overflow: hidden;
+  }
+
+  &[data-closed] {
     background-color: transparent;
   }
 }

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

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

package/src/components/dialog/index.js

@@ -4,9 +4,10 @@ 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',
+    closable: true,
     remove: false
 }
 
@@ -18,7 +19,6 @@ export const defaultOptions = {
  */
 export const showDialog = async (element, options = {}) => {
     options = {
-        closable: true,
         ...defaultOptions,
         ...options
     }
@@ -40,14 +40,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)
+
+    element.removeAttribute(options.closedAttribute)
     await animationsFinished(element.lastElementChild)
-    element.classList.add(options.overflowClass)
+    element.setAttribute(options.openAttribute, '')
+
     element.dispatchEvent(new CustomEvent('x-dialog:show'))
 }
 
@@ -63,13 +64,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)
 
-    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

@@ -20,7 +20,7 @@
 
   &::after {
     content: "";
-    min-width: 100vw;
+    min-inline-size: 100vw;
     scroll-snap-align: end;
   }
 

package/src/components/group/default.css

@@ -4,7 +4,7 @@
 
   &:has(.x-control) {
     > :where(.x-button) {
-      min-width: var(--x-control-height);
+      min-inline-size: var(--x-control-height);
       height: auto;
     }
 

package/src/components/image/default.css

@@ -13,7 +13,7 @@
 
   > :where(img, video, iframe, object, svg) {
     border-radius: inherit;
-    min-width: 100%;
+    min-inline-size: 100%;
     height: auto;
     object-fit: contain;
   }

package/src/components/popover/content.css

@@ -10,7 +10,7 @@
     translate(var(--tw-translate-x), var(--tw-translate-y))
     scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   will-change: transform;
-  width: max-content;
+  inline-size: max-content;
   position: absolute;
 
   &:where(.bottom), & {

package/src/components/range/default.css

@@ -38,8 +38,8 @@
     }
 
     &::-webkit-slider-thumb {
-      width: var(--x-range-thumb-size);
-      height: var(--x-range-thumb-size);
+      inline-size: var(--x-range-thumb-size);
+      block-size: var(--x-range-thumb-size);
       background-color: var(--x-range-thumb-background-color);
       border-radius: var(--radius-full);
       border: var(--x-range-thumb-border-width) solid var(--x-range-thumb-border-color);
@@ -63,8 +63,8 @@
     }
 
     &::-moz-range-thumb {
-      width: var(--x-range-thumb-size);
-      height: var(--x-range-thumb-size);
+      inline-size: var(--x-range-thumb-size);
+      block-size: var(--x-range-thumb-size);
       background-color: var(--x-range-thumb-background-color);
       border-radius: var(--radius-full);
       border: var(--x-range-thumb-border-width) solid var(--x-range-thumb-border-color);

package/src/components/text/default.css

@@ -170,8 +170,8 @@
       list-style-type: "";
 
       &::before {
-        width: var(--x-text-list-marker-size);
-        height: var(--x-text-list-marker-size);
+        inline-size: var(--x-text-list-marker-size);
+        block-size: var(--x-text-list-marker-size);
         inset-inline-start: var(--x-text-list-marker-inset-inline-start, -0.75em);
         inset-block-start: var(--x-text-list-marker-inset-block-start, 0.5lh);
         border: