winduum 1.2.1 → 2.0.0-next.2

package/src/{ui/color → components/check}/readme.md

@@ -1,4 +1,4 @@
-# [Color](https://winduum.dev/docs/ui/color.html)
+# [Check](https://winduum.dev/docs/components/check.html)
 
 ## Installation
 ```shell
@@ -8,17 +8,16 @@ 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/ui/color/index.css" layer(components);
+@import "winduum/src/components/check/index.css" layer(components);
 ```
 
 or modular (you can use your own props or CSS)
 
 ```css
-@import "winduum/src/ui/color/default-props.css" layer(components);
-@import "winduum/src/ui/color/default.css" layer(components);
-@import "winduum/src/ui/color/interactive-props.css" layer(components);
-@import "winduum/src/ui/color/interactive.css" layer(components);
-
+@import "winduum/src/components/check/props/default.css" layer(components);
+@import "winduum/src/components/check/default.css" layer(components);
+@import "winduum/src/components/check/interactive.css" layer(components);
+@import "winduum/src/components/check/invalid.css" layer(components);
 ```
 
 ### Local imports
@@ -26,8 +25,8 @@ 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/color/assets/index.css" layer(components);
+@import "@/components/check/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/color.html) to learn more about usage examples.
+Visit [docs](https://winduum.dev/docs/components/check.html) to learn more about usage examples.

package/src/components/color/default.css

@@ -0,0 +1,36 @@
+.x-color {
+  --x-color-outline-color: var(--color-accent);
+
+  display: inline-flex;
+
+  :where(input) {
+    inline-size: var(--x-color-size);
+    block-size: var(--x-color-size);
+    border-radius: var(--x-color-border-radius);
+    outline:
+      var(--x-color-outline-width, 1px) solid
+      color-mix(
+        in var(--x-color-outline-color-space, srgb),
+        var(--x-color-outline-color) var(--x-color-outline-color-opacity, 0%),
+        var(--x-color-outline-color-mix, transparent)
+      );
+    outline-offset: var(--x-color-outline-offset);
+    display: inline-grid;
+
+    &::before, &::after {
+      border: 1px solid transparent;
+      border-radius: inherit;
+      grid-area: 1/-1;
+      content: "";
+    }
+
+    &::before {
+      background-color: var(--x-color-primary);
+    }
+
+    &::after {
+      background-color: var(--x-color-secondary);
+      clip-path: polygon(100% 0, 100% 100%, 0 100%);
+    }
+  }
+}

package/src/components/color/index.css

@@ -0,0 +1,3 @@
+@import "props/default.css";
+@import "default.css";
+@import "interactive.css";

package/src/components/color/interactive.css

@@ -0,0 +1,36 @@
+.x-color {
+  :where(input) {
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-duration: var(--default-transition-duration);
+
+    &:disabled {
+      cursor: not-allowed;
+
+      &::before, &::after {
+        opacity: var(--x-color-disabled-opacity, 50%);
+      }
+    }
+
+    &:enabled {
+      &:hover {
+        --x-color-outline-color-opacity: var(--x-color-hover-outline-color-opacity);
+        --x-color-outline-offset: var(--x-color-hover-outline-offset);
+      }
+
+      &:focus-visible {
+        --x-color-outline-color-opacity: var(--x-color-focus-outline-color-opacity, 50%);
+        --x-color-outline-offset: var(--x-color-focus-outline-offset, 3px);
+      }
+
+      &:checked {
+        --x-color-outline-color-opacity: var(--x-color-checked-outline-color-opacity, 100%);
+        --x-color-outline-offset: var(--x-color-focus-outline-offset, 3px);
+
+        &:focus-visible {
+          outline-style: dashed;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+:root, :host {
+  --x-color-primary: currentColor;
+  --x-color-secondary: transparent;
+  --x-color-size: 1.5rem;
+  --x-color-border-radius: var(--radius-full);
+  --x-color-outline-width: 1px;
+}

package/src/{ui/title → components/color}/readme.md

@@ -1,4 +1,4 @@
-# [Title](https://winduum.dev/docs/ui/title.html)
+# [Color](https://winduum.dev/docs/components/color.html)
 
 ## Installation
 ```shell
@@ -8,16 +8,15 @@ 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/ui/title/index.css" layer(components);
+@import "winduum/src/components/color/index.css" layer(components);
 ```
 
 or modular (you can use your own props or CSS)
 
 ```css
-@import "winduum/src/ui/title/default.css" layer(components);
-@import "winduum/src/ui/title/default-props.css" layer(components);
-@import "winduum/src/ui/title/sm.css" layer(components);
-@import "winduum/src/ui/title/lg.css" layer(components);
+@import "winduum/src/components/color/props/default.css" layer(components);
+@import "winduum/src/components/color/default.css" layer(components);
+@import "winduum/src/components/color/interactive.css" layer(components);
 
 ```
 
@@ -26,8 +25,8 @@ 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/title/assets/index.css" layer(components);
+@import "@/components/color/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/title.html) to learn more about usage examples.
+Visit [docs](https://winduum.dev/docs/components/color.html) to learn more about usage examples.

package/src/components/compare/default.css

@@ -1,6 +1,6 @@
-.c-compare {
-  --c-compare-position: 50%;
-  --c-compare-clip-path: polygon(0% 0, var(--c-compare-position) 0%, var(--c-compare-position) 100%, 0 100%);
+.x-compare {
+  --x-compare-position: 50%;
+  --x-compare-clip-path: polygon(0% 0, var(--x-compare-position) 0%, var(--x-compare-position) 100%, 0 100%);
 
   display: grid;
   overflow: hidden;
@@ -15,7 +15,7 @@
 
   &::before {
     background-color: var(--color-accent);
-    inset-inline-start: var(--c-compare-position);
+    inset-inline-start: var(--x-compare-position);
     inline-size: 1px;
     content: "";
   }
@@ -23,18 +23,17 @@
   > :where(input) {
     pointer-events: auto;
     cursor: grab;
-    opacity: 0;
+    opacity: 0%;
 
-    &:is(:focus-visible, :active) {
-      ~ .ui-btn {
-        --tw-bg-mix: var(--ui-btn-hover-bg-mix, var(--color-dark));
-        --tw-bg-opacity: 0.8;
-      }
+    &:active ~ .x-button {
+      --x-button-background-color-mix: var(--x-button-active-background-color-mix, var(--color-dark));
+      --x-button-background-color-opacity: var(--x-button-active-background-color-opacity, 80%);
     }
 
-    &:focus-visible ~ .ui-btn {
-      --ui-btn-outline-offset: 2px;
-      --tw-outline-opacity: 0.5;
+    &:focus-visible ~ .x-button {
+      --x-button-outline-color: var(--x-button-focus-outline-color, var(--color-accent));
+      --x-button-outline-offset: var(--x-button-focus-outline-offset, 2px);
+      --x-button-outline-color-opacity: var(--x-button-focus-outline-opacity, 50%);
     }
 
     &:active {
@@ -42,13 +41,13 @@
     }
   }
 
-  > :where(.ui-btn) {
-    inset-inline-start: var(--c-compare-position);
-    margin-inline-start: calc(var(--ui-btn-width) / 2 * -1);
+  > :where(.x-button) {
+    inset-inline-start: var(--x-compare-position);
+    margin-inline-start: calc(var(--x-button-width) / 2 * -1);
     margin-block: auto;
   }
 
-  > :where(.ui-image) {
+  > :where(.x-image) {
     display: grid;
     z-index: 0;
 
@@ -58,7 +57,7 @@
       grid-area: 1/1;
 
       &:first-child {
-        clip-path: var(--c-compare-clip-path);
+        clip-path: var(--x-compare-clip-path);
         position: relative;
       }
     }

package/src/components/compare/index.js

@@ -5,8 +5,8 @@
  */
 export const setPosition = ({ currentTarget }, options = {}) => {
     const { selector, positionProperty } = {
-        selector: '.c-compare',
-        positionProperty: '--c-compare-position',
+        selector: '.x-compare',
+        positionProperty: '--x-compare-position',
         ...options
     }
 

package/src/components/control/color.css

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

package/src/components/control/default.css

@@ -0,0 +1,74 @@
+.x-control {
+  display: grid;
+  block-size: var(--x-control-height);
+  font-family: var(--x-control-font-family);
+  font-weight: var(--x-control-font-weight);
+  font-size: var(--x-control-font-size);
+  letter-spacing: var(--x-control-letter-spacing);
+  color: var(--x-control-color);
+  border-radius: var(--x-control-border-radius);
+  background-color:
+    color-mix(
+      in var(--x-control-background-color-space, srgb),
+      var(--x-control-background-color) var(--x-control-background-color-opacity, 100%),
+      var(--x-control-background-color-mix, transparent)
+    );
+  border:
+    var(--x-control-border-width) solid
+    color-mix(
+      in var(--x-control-border-color-space, srgb),
+      var(--x-control-border-color) var(--x-control-border-color-opacity, 15%),
+      var(--x-control-border-color-mix, transparent)
+    );
+  outline:
+    var(--x-control-outline-width) solid
+    color-mix(
+      in var(--x-control-outline-color-space, srgb),
+      var(--x-control-outline-color, var(--color-accent)) var(--x-control-outline-color-opacity, 0%),
+      var(--x-control-outline-color-mix, transparent)
+    );
+  outline-offset: var(--x-control-outline-offset);
+  grid-template:
+    [x-control-start] calc(var(--x-control-padding-block) - var(--x-control-border-width))
+    [x-control-padding] 1fr
+    calc(var(--x-control-padding-block) - var(--x-control-border-width)) [x-control-end] /
+    [x-control-start] var(--x-control-padding-inline)
+    [x-control-padding] 1fr
+    var(--x-control-padding-inline) [x-control-end];
+
+  &:has(textarea) {
+    height: auto;
+  }
+
+  > :where(*) {
+    grid-area: x-control-padding;
+    align-self: center;
+  }
+
+  > :where(input, textarea, select) {
+    padding-block: 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;
+    overflow: clip;
+    align-self: stretch;
+    align-items: center;
+    border-radius: inherit;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  > :where(input, textarea) {
+    &::placeholder {
+      color: var(--x-control-placeholder-color);
+      opacity: var(--x-control-placeholder-opacity);
+    }
+  }
+
+  > :where(textarea) {
+    min-block-size: var(--x-control-height-textarea);
+    resize: vertical;
+  }
+}

package/src/components/control/file.css

@@ -0,0 +1,27 @@
+.x-control:where(:has([type="file"])) {
+  overflow: clip;
+
+  > :where([type="file"]) {
+    &::file-selector-button {
+      all: unset;
+      background-color:
+        color-mix(
+          in var(--x-control-file-background-color-space, srgb),
+          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);
+      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);
+      border-start-end-radius: var(--x-control-border-radius);
+      border-end-end-radius: var(--x-control-border-radius);
+      transition: var(--transition-background);
+      cursor: pointer;
+    }
+
+    &:is(:hover, :focus) {
+      --x-control-file-background-color-opacity: 20%;
+    }
+  }
+}

package/src/components/control/floating-interactive.css

@@ -0,0 +1,13 @@
+.x-control:where(:has(:not([type="color"]) ~ label)) {
+  --x-control-label-focus-opacity: 50%;
+  --x-control-placeholder-color: transparent;
+
+  > :where(input, textarea, select) {
+    &:is(:focus, :not(:placeholder-shown)) {
+      ~ label {
+        transform: translateY(calc(var(--x-control-label-translate-y) * -1)) scale(var(--x-control-label-scale));
+        opacity: var(--x-control-label-focus-opacity);
+      }
+    }
+  }
+}

package/src/components/control/floating.css

@@ -0,0 +1,36 @@
+.x-control:where(:has(:not([type="color"]) ~ label)) {
+  > :where(label) {
+    margin-inline: var(--x-control-padding-inline-start, 0) var(--x-control-padding-inline-end, 0);
+    transition: var(--transition-transform), var(--transition-color), var(--transition-opacity);
+    pointer-events: none;
+    transform-origin: 0 50%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: clip;
+    will-change: transform;
+  }
+
+  > :where(textarea) {
+    padding-block-start: calc(var(--x-control-padding-block) + var(--x-control-label-translate-y) * var(--x-control-label-scale));
+
+    + :where(label) {
+      align-self: start;
+    }
+  }
+
+  > :where(input, select) {
+    padding-block: calc(var(--x-control-padding-block) + var(--x-control-label-translate-y) * var(--x-control-label-scale)) calc(var(--x-control-padding-block) - var(--x-control-label-translate-y) * var(--x-control-label-scale));
+
+    &::-webkit-calendar-picker-indicator,
+    &::-webkit-search-cancel-button,
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      transform: translateY(calc(var(--x-control-label-translate-y) * var(--x-control-label-scale) * -1));
+    }
+  }
+
+  &:where(:has(:required)) :where(label)::after {
+    color: var(--x-control-required-color, var(--color-error));
+    content: " *";
+  }
+}

package/src/components/control/icon.css

@@ -0,0 +1,32 @@
+.x-control {
+  --x-control-start: calc(var(--x-control-icon-count-start, 1) * (var(--x-control-icon-size) + var(--x-control-icon-gap)) - var(--x-control-icon-gap));
+  --x-control-end: calc(var(--x-control-icon-count-end, 1) * (var(--x-control-icon-size) + var(--x-control-icon-gap)) - var(--x-control-icon-gap));
+
+  &:has(textarea) {
+    :where(.me-auto), :where(.ms-auto) {
+      align-self: start;
+    }
+  }
+
+  &:has(.me-auto) {
+    --x-control-padding-inline-start: calc(var(--x-control-start) + var(--x-control-padding-inline));
+  }
+
+  &:has(.ms-auto) {
+    --x-control-padding-inline-end: calc(var(--x-control-end) + var(--x-control-padding-inline));
+  }
+
+  &:has(.me-auto > *:nth-child(2)) {
+    --x-control-icon-count-start: 2;
+  }
+
+  &:has(.ms-auto > *:nth-child(2)) {
+    --x-control-icon-count-end: 2;
+  }
+
+  :where(.me-auto), :where(.ms-auto) {
+    gap: var(--x-control-icon-gap);
+    display: flex;
+    align-items: center;
+  }
+}

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

@@ -1,16 +1,15 @@
-@import "default-props.css";
+@import "props/default.css";
+@import "props/color.css";
+@import "props/icon.css";
+@import "props/floating.css";
+@import "props/select.css";
 @import "default.css";
 @import "interactive.css";
-@import "interactive-props.css";
 @import "invalid.css";
-@import "color-props.css";
 @import "color.css";
 @import "icon.css";
-@import "icon-props.css";
 @import "file.css";
-@import "floating-props.css";
 @import "floating.css";
 @import "floating-interactive.css";
-@import "select-props.css";
 @import "select.css";
 @import "select-multiple.css";

package/src/components/control/interactive.css

@@ -0,0 +1,19 @@
+.x-control {
+  transition-property: var(--default-transition-property);
+  transition-timing-function: var(--transition-timing-function-in-out);
+  transition-duration: var(--default-transition-duration);
+
+  &:focus-within {
+    --x-control-border-color: var(--x-control-focus-border-color, var(--color-accent));
+    --x-control-border-color-opacity: var(--x-control-focus-border-color-opacity, 100%);
+    --x-control-outline-offset: var(--x-control-focus-outline-offset);
+    --x-control-outline-color-opacity: var(--x-control-focus-outline-color-opacity, 20%);
+  }
+
+  &.disabled, &:has(:where(input, textarea, select):disabled) {
+    --x-control-background-color: var(--x-control-disabled-background-color, currentColor);
+    --x-control-background-color-opacity: var(--x-control-disabled-background-color-opacity, 5%);
+    --x-control-border-color: var(--x-control-disabled-border-color, currentColor);
+    --x-control-border-color-opacity: var(--x-control-disabled-border-color-opacity);
+  }
+}

package/src/components/control/invalid.css

@@ -0,0 +1,10 @@
+.x-control {
+  &.invalid, &:has(:user-invalid), .validated &:has(: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));
+    --x-control-border-color-opacity: var(--x-control-invalid-border-color-opacity, 100%);
+    --x-control-outline-color: var(--x-control-invalid-outline-color, var(--color-error));
+    --x-control-color: var(--x-control-invalid-color, var(--color-error));
+  }
+}

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

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

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

@@ -0,0 +1,16 @@
+:root, :host {
+  --x-control-height: 3rem;
+  --x-control-height-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-background-color: transparent;
+  --x-control-color: currentColor;
+  --x-control-outline-width: 3px;
+  --x-control-placeholder-color: currentColor;
+  --x-control-placeholder-opacity: 50%;
+}

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

@@ -0,0 +1,4 @@
+:root, :host {
+  --x-control-label-translate-y: 0.625rem;
+  --x-control-label-scale: 0.8;
+}

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

@@ -0,0 +1,4 @@
+:root, :host {
+  --x-control-icon-size: 1.25rem;
+  --x-control-icon-gap: 0.375rem;
+}

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

@@ -0,0 +1,4 @@
+:root, :host {
+  --x-control-select-icon-size: 1.5rem;
+  --x-control-select-icon-margin-inline-end: -0.25rem;
+}

package/src/components/control/readme.md

@@ -0,0 +1,43 @@
+# [Control](https://winduum.dev/docs/components/control.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/control/index.css" layer(components);
+```
+
+or modular (you can use your own props or CSS)
+
+```css
+@import "winduum/src/components/control/props/default.css" layer(components);
+@import "winduum/src/components/control/props/color.css" layer(components);
+@import "winduum/src/components/control/props/icon.css" layer(components);
+@import "winduum/src/components/control/props/floating.css" layer(components);
+@import "winduum/src/components/control/props/select.css" layer(components);
+@import "winduum/src/components/control/default.css" layer(components);
+@import "winduum/src/components/control/interactive.css" layer(components);
+@import "winduum/src/components/control/invalid.css" layer(components);
+@import "winduum/src/components/control/color.css" layer(components);
+@import "winduum/src/components/control/icon.css" layer(components);
+@import "winduum/src/components/control/file.css" layer(components);
+@import "winduum/src/components/control/floating.css" layer(components);
+@import "winduum/src/components/control/floating-interactive.css" layer(components);
+@import "winduum/src/components/control/select.css" layer(components);
+@import "winduum/src/components/control/select-multiple.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/control/assets/index.css" layer(components);
+```
+
+### Docs
+Visit [docs](https://winduum.dev/docs/components/control.html) to learn more about usage examples.

package/src/{ui → components}/control/select-multiple.css

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

package/src/components/control/select.css

@@ -0,0 +1,23 @@
+.x-control:has(select:not([multiple])) {
+  --x-control-padding-inline-end: calc(var(--x-control-end) + var(--x-control-padding-inline) + var(--x-control-select-icon-margin-inline-end));
+
+  &:has(.ms-auto) {
+    --x-control-icon-count-end: 2;
+  }
+
+  &::after {
+    inline-size: var(--x-control-select-icon-size);
+    block-size: var(--x-control-select-icon-size);
+    mask: var(--mask-angle-down);
+    margin-inline: auto var(--x-control-select-icon-margin-inline-end);
+    grid-area: x-control-padding;
+    background-color: currentColor;
+    pointer-events: none;
+    align-self: center;
+    content: "";
+  }
+
+  :where(.ms-auto) {
+    margin-inline-end: var(--x-control-select-icon-size);
+  }
+}

package/src/components/dialog/content.css

@@ -1,13 +1,13 @@
-.c-dialog-content {
-  background-color: var(--color-body-primary);
-  border-radius: var(--rounded-3xl);
-  padding: var(--c-dialog-content-py) var(--c-dialog-content-px);
-  inline-size: min(100%, var(--c-dialog-content-width));
+.x-dialog-content {
+  background-color: var(--x-dialog-content-background-color, var(--color-body-primary));
+  border-radius: var(--x-dialog-content-border-radius, var(--radius-3xl));
+  padding: var(--x-dialog-content-padding-block) var(--x-dialog-content-padding-inline);
+  inline-size: min(100%, var(--x-dialog-content-inline-size));
   transition: var(--transition-transform), var(--transition-opacity);
   margin: auto;
 
-  :where(dialog:not([open])) & {
+  :where(dialog:not(.open)) & {
     transform: translateY(-2rem);
-    opacity: 0;
+    opacity: 0%;
   }
 }