winduum 2.2.28 → 3.0.0-next.10

package/src/components/text/content.css

@@ -0,0 +1,241 @@
+.x-text {
+  &:where(.content) {
+    > :is(*:first-child) {
+      margin-block-start: 0;
+    }
+
+    > :is(*:last-child) {
+      margin-block-end: 0;
+    }
+
+    :where(b, strong) {
+      font-weight: var(--x-text-content-bold);
+    }
+
+    :where(em) {
+      font-style: italic;
+    }
+
+    :where(img) {
+      display: block;
+      height: auto;
+      border-radius: var(--x-text-img-border-radius);
+    }
+
+    :where(p) {
+      margin-block: var(--x-text-p-margin-block, var(--x-text-content-margin-block));
+
+      &:empty {
+        line-height: 0;
+        margin: 0;
+
+        &::after {
+          content: "\00a0";
+        }
+      }
+    }
+
+    :where(hr) {
+      margin-block: var(--x-text-hr-margin-block);
+      background-color:
+          color-mix(
+              in var(--x-text-hr-background-color-space, srgb),
+              var(--x-text-hr-background-color, currentColor) var(--x-text-hr-background-color-opacity, 10%),
+              var(--x-text-hr-background-color-mix, transparent)
+          );
+    }
+
+    :where(a) {
+      color: var(--x-text-link-color, var(--color-accent));
+      text-decoration: var(--x-text-link-text-decoration, underline);
+      transition: var(--transition-color);
+
+      &:hover {
+        color:
+            color-mix(
+                in var(--x-text-link-hover-color-space, srgb),
+                var(--x-text-link-hover-color, var(--color-accent)) var(--x-text-link-hover-color-opacity, 75%),
+                var(--x-text-link-hover-color-mix, transparent)
+            );
+      }
+
+      &:focus-visible {
+        color:
+            color-mix(
+                in var(--x-text-link-focus-color-space, srgb),
+                var(--x-text-link-focus-color, var(--color-accent)) var(--x-text-link-focus-color-opacity, 75%),
+                var(--x-text-link-focus-color-mix, transparent)
+            );
+      }
+    }
+
+    :where(h1, h2, h3, h4, h5, h6) {
+      font-family: var(--x-text-heading-font-family);
+      font-weight: var(--x-text-heading-font-weight, var(--x-text-content-bold));
+      font-size: var(--x-text-heading-font-size);
+      line-height: var(--x-text-heading-line-height);
+      letter-spacing: var(--x-text-heading-letter-spacing);
+      margin-block: var(--x-text-heading-margin-block);
+      color: var(--x-text-heading-color);
+      text-wrap: balance;
+    }
+
+    :where(h1) {
+      --x-text-heading-font-size: var(--x-text-heading-1-font-size, var(--text-5xl));
+    }
+
+    :where(h2) {
+      --x-text-heading-font-size: var(--x-text-heading-2-font-size, var(--text-4xl));
+    }
+
+    :where(h3) {
+      --x-text-heading-font-size: var(--x-text-heading-3-font-size, var(--text-3xl));
+    }
+
+    :where(h4) {
+      --x-text-heading-font-size: var(--x-text-heading-4-font-size, var(--text-2xl));
+    }
+
+    :where(h5) {
+      --x-text-heading-font-size: var(--x-text-heading-5-font-size, var(--text-xl));
+    }
+
+    :where(h6) {
+      --x-text-heading-font-size: var(--x-text-heading-6-font-size, var(--text-lg));
+    }
+
+    :where(table) {
+      border: 0;
+      min-inline-size: 100%;
+
+      :where(td, th) {
+        padding: var(--x-text-table-cell-padding-block, 1em) var(--x-text-table-cell-padding-inline, 1.25em);
+        text-align: left;
+      }
+
+      :where(thead) {
+        font-weight: var(--x-text-table-thead-font-weight, var(--x-text-content-bold));
+        border-block-end:
+            1px solid color-mix(
+                in var(--x-text-table-thead-border-color-space, srgb),
+                var(--x-text-table-thead-border-color, currentColor) var(--x-text-table-thead-border-color-opacity, 10%),
+                var(--x-text-table-thead-border-color-mix, transparent)
+            );
+      }
+
+      :where(tbody tr) {
+        &:nth-of-type(even) {
+          background-color:
+              color-mix(
+                  in var(--x-text-table-row-even-background-color-space, srgb),
+                  var(--x-text-table-row-even-background-color, currentColor) var(--x-text-table-row-even-background-color-opacity, 5%),
+                  var(--x-text-table-row-even-background-color-mix, transparent)
+              );
+        }
+      }
+    }
+
+    :where(ol, ul) {
+      margin-inline-start: var(--x-text-list-margin-inline-start, 0.75em);
+      padding-inline-start: var(--x-text-list-padding-inline-start, 1em);
+      margin-block: var(--x-text-list-margin-block, var(--x-text-content-margin-block));
+
+      :where(li) {
+        margin-block: var(--x-text-list-item-margin-block, 0.5em);
+        padding-inline-start: var(--x-text-list-item-padding-inline-start, 1ch);
+      }
+    }
+
+    :where(ol) {
+      &:not([type]) {
+        list-style: decimal;
+      }
+
+      & :where(li) {
+        &::marker {
+          color: var(--x-text-list-marker-color, var(--color-accent));
+          font-weight: var(--x-text-list-marker-font-weight, var(--x-text-content-bold));
+        }
+      }
+    }
+
+    :where(ul) {
+      :where(li) {
+        position: relative;
+        list-style-type: "";
+
+        &::before {
+          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:
+              var(--x-text-list-marker-border-width, 1px) solid
+              var(--x-text-list-marker-border-color, var(--color-accent));
+          background-color: var(--x-text-list-marker-background-color, var(--color-accent));
+          margin-inline-start: calc((var(--x-text-list-marker-size) / 2) * -1);
+          margin-block-start: calc(var(--x-text-list-marker-size) / 2 * -1);
+          border-radius: var(--x-text-list-marker-border-radius, 50%);
+          mask: var(--x-text-list-marker-mask);
+          position: absolute;
+          will-change: transform;
+          content: "";
+        }
+      }
+
+      &[style*="square"] {
+        --x-text-list-marker-border-radius: 0;
+      }
+
+      &[style*="circle"] {
+        --x-text-list-marker-background-color: transparent;
+      }
+    }
+
+    :where(blockquote) {
+      border-inline-start:
+          var(--x-text-blockquote-border-inline-start-width, 0.125rem) solid
+          var(--x-text-blockquote-border-inline-start-color, var(--color-accent));
+      margin-block: var(--x-text-blockquote-margin-block, var(--x-text-content-margin-block));
+      padding: var(--x-text-blockquote-padding-block, 0) var(--x-text-blockquote-padding-inline, 1.25em);
+      font-size: var(--x-text-blockquote-font-size, var(--text-lg));
+      font-style: var(--x-text-blockquote-font-style);
+      letter-spacing: var(--x-text-blockquote-letter-spacing, inherit);
+      line-height: var(--x-text-blockquote-line-height, inherit);
+    }
+
+    :where(code) {
+      font-size: var(--x-text-code-font-size, 87.5%);
+    }
+
+    :where(figure) {
+      margin-block: var(--x-text-figure-margin-block, var(--x-text-content-margin-block));
+    }
+
+    :where(figcaption) {
+      font-size: var(--x-text-figcaption-font-size, 87.5%);
+      font-weight: var(--x-text-figcaption-font-weight, var(--font-weight-normal));
+      font-style: var(--x-text-figcaption-font-style);
+      line-height: var(--x-text-figcaption-line-height, 1.5);
+      letter-spacing: var(--x-text-figcaption-letter-spacing);
+      margin-block-start: var(--x-text-figcaption-margin-block-start, 0.5em);
+      padding-inline-start: var(--x-text-figcaption-padding-inline-start);
+      border-inline-start: var(--x-text-figcaption-border-inline-start);
+    }
+
+    :where(pre) {
+      padding: var(--x-text-pre-padding-block, 0.25rem) var(--x-text-pre-padding-inline, 0.5rem);
+      background-color: var(--x-text-pre-background-color, var(--color-body-secondary));
+      border-radius: var(--x-pre-border-radius, var(--radius-md));
+      scrollbar-color: var(--x-pre-scrollbar-color, currentcolor var(--color-body-secondary));
+      overflow-x: auto;
+      overscroll-behavior: contain;
+
+      > :where(code) {
+        background: transparent;
+        width: max-content;
+        color: inherit;
+      }
+    }
+  }
+}

package/src/components/text/default.css

@@ -5,242 +5,4 @@
   line-height: var(--x-text-line-height);
   letter-spacing: var(--x-text-letter-spacing);
   text-wrap: pretty;
-
-  > :is(*:first-child) {
-    margin-block-start: 0;
-  }
-
-  > :is(*:last-child) {
-    margin-block-end: 0;
-  }
-
-  :where(b, strong) {
-    font-weight: var(--x-text-content-bold);
-  }
-
-  :where(em) {
-    font-style: italic;
-  }
-
-  :where(img) {
-    display: block;
-    height: auto;
-    border-radius: var(--x-text-img-border-radius);
-  }
-
-  :where(p) {
-    margin-block: var(--x-text-p-margin-block, var(--x-text-content-margin-block));
-
-    &:empty {
-      line-height: 0;
-      margin: 0;
-
-      &::after {
-        content: "\00a0";
-      }
-    }
-  }
-
-  :where(hr) {
-    margin-block: var(--x-text-hr-margin-block);
-    background-color:
-      color-mix(
-        in var(--x-text-hr-background-color-space, srgb),
-        var(--x-text-hr-background-color, currentColor) var(--x-text-hr-background-color-opacity, 10%),
-        var(--x-text-hr-background-color-mix, transparent)
-      );
-  }
-
-  :where(a) {
-    color: var(--x-text-link-color, var(--color-accent));
-    text-decoration: var(--x-text-link-text-decoration, underline);
-    transition: var(--transition-color);
-
-    &:hover {
-      color:
-        color-mix(
-          in var(--x-text-link-hover-color-space, srgb),
-          var(--x-text-link-hover-color, var(--color-accent)) var(--x-text-link-hover-color-opacity, 75%),
-          var(--x-text-link-hover-color-mix, transparent)
-        );
-    }
-
-    &:focus-visible {
-      color:
-        color-mix(
-          in var(--x-text-link-focus-color-space, srgb),
-          var(--x-text-link-focus-color, var(--color-accent)) var(--x-text-link-focus-color-opacity, 75%),
-          var(--x-text-link-focus-color-mix, transparent)
-        );
-    }
-  }
-
-  :where(h1, h2, h3, h4, h5, h6) {
-    font-family: var(--x-text-heading-font-family);
-    font-weight: var(--x-text-heading-font-weight, var(--x-text-content-bold));
-    font-size: var(--x-text-heading-font-size);
-    line-height: var(--x-text-heading-line-height);
-    letter-spacing: var(--x-text-heading-letter-spacing);
-    margin-block: var(--x-text-heading-margin-block);
-    color: var(--x-text-heading-color);
-    text-wrap: balance;
-  }
-
-  :where(h1) {
-    --x-text-heading-font-size: var(--x-text-heading-1-font-size, var(--text-4xl));
-  }
-
-  :where(h2) {
-    --x-text-heading-font-size: var(--x-text-heading-2-font-size, var(--text-3xl));
-  }
-
-  :where(h3) {
-    --x-text-heading-font-size: var(--x-text-heading-3-font-size, var(--text-2xl));
-  }
-
-  :where(h4) {
-    --x-text-heading-font-size: var(--x-text-heading-4-font-size, var(--text-xl));
-  }
-
-  :where(h5) {
-    --x-text-heading-font-size: var(--x-text-heading-5-font-size, var(--text-lg));
-  }
-
-  :where(h6) {
-    --x-text-heading-font-size: var(--x-text-heading-6-font-size);
-  }
-
-  :where(table) {
-    border: 0;
-    min-inline-size: 100%;
-
-    :where(td, th) {
-      padding: var(--x-text-table-cell-padding-block, 1em) var(--x-text-table-cell-padding-inline, 1.25em);
-      text-align: left;
-    }
-
-    :where(thead) {
-      font-weight: var(--x-text-table-thead-font-weight, var(--x-text-content-bold));
-      border-block-end:
-        1px solid color-mix(
-          in var(--x-text-table-thead-border-color-space, srgb),
-          var(--x-text-table-thead-border-color, currentColor) var(--x-text-table-thead-border-color-opacity, 10%),
-          var(--x-text-table-thead-border-color-mix, transparent)
-        );
-    }
-
-    :where(tbody tr) {
-      &:nth-of-type(even) {
-        background-color:
-          color-mix(
-            in var(--x-text-table-row-even-background-color-space, srgb),
-            var(--x-text-table-row-even-background-color, currentColor) var(--x-text-table-row-even-background-color-opacity, 5%),
-            var(--x-text-table-row-even-background-color-mix, transparent)
-          );
-      }
-    }
-  }
-
-  :where(ol, ul) {
-    margin-inline-start: var(--x-text-list-margin-inline-start, 0.75em);
-    padding-inline-start: var(--x-text-list-padding-inline-start, 1em);
-    margin-block: var(--x-text-list-margin-block, var(--x-text-content-margin-block));
-
-    :where(li) {
-      margin-block: var(--x-text-list-item-margin-block, 0.5em);
-      padding-inline-start: var(--x-text-list-item-padding-inline-start, 1ch);
-    }
-  }
-
-  :where(ol) {
-    &:not([type]) {
-      list-style: decimal;
-    }
-
-    & :where(li) {
-      &::marker {
-        color: var(--x-text-list-marker-color, var(--color-accent));
-        font-weight: var(--x-text-list-marker-font-weight, var(--x-text-content-bold));
-      }
-    }
-  }
-
-  :where(ul) {
-    :where(li) {
-      position: relative;
-      list-style-type: "";
-
-      &::before {
-        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:
-          var(--x-text-list-marker-border-width, 1px) solid
-          var(--x-text-list-marker-border-color, var(--color-accent));
-        background-color: var(--x-text-list-marker-background-color, var(--color-accent));
-        margin-inline-start: calc((var(--x-text-list-marker-size) / 2) * -1);
-        margin-block-start: calc(var(--x-text-list-marker-size) / 2 * -1);
-        border-radius: var(--x-text-list-marker-border-radius, 50%);
-        mask: var(--x-text-list-marker-mask);
-        position: absolute;
-        will-change: transform;
-        content: "";
-      }
-    }
-
-    &[style*="square"] {
-      --x-text-list-marker-border-radius: 0;
-    }
-
-    &[style*="circle"] {
-      --x-text-list-marker-background-color: transparent;
-    }
-  }
-
-  :where(blockquote) {
-    border-inline-start:
-      var(--x-text-blockquote-border-inline-start-width, 0.375em) solid
-      var(--x-text-blockquote-border-inline-start-color, var(--color-accent));
-    margin-block: var(--x-text-blockquote-margin-block, var(--x-text-content-margin-block));
-    padding: var(--x-text-blockquote-padding-block, 0) var(--x-text-blockquote-padding-inline, 1.25em);
-    font-size: var(--x-text-blockquote-font-size, inherit);
-    font-style: var(--x-text-blockquote-font-style);
-    letter-spacing: var(--x-text-blockquote-letter-spacing, inherit);
-    line-height: var(--x-text-blockquote-line-height, inherit);
-  }
-
-  :where(code) {
-    font-size: var(--x-text-code-font-size, 87.5%);
-  }
-
-  :where(figure) {
-    margin-block: var(--x-text-figure-margin-block, var(--x-text-content-margin-block));
-  }
-
-  :where(figcaption) {
-    font-size: var(--x-text-figcaption-font-size, 87.5%);
-    font-weight: var(--x-text-figcaption-font-weight, var(--font-weight-semibold));
-    font-style: var(--x-text-figcaption-font-style);
-    line-height: var(--x-text-figcaption-line-height, 1.5);
-    letter-spacing: var(--x-text-figcaption-letter-spacing);
-    margin-block-start: var(--x-text-figcaption-margin-block-start, 0.5em);
-    padding-inline-start: var(--x-text-figcaption-padding-inline-start);
-    border-inline-start: var(--x-text-figcaption-border-inline-start);
-  }
-
-  :where(pre) {
-    padding: var(--x-text-pre-padding-block, 0.25rem) var(--x-text-pre-padding-inline, 0.5rem);
-    background-color: var(--x-text-pre-background-color, var(--color-body-secondary));
-    border-radius: var(--x-pre-border-radius, var(--radius-md));
-    scrollbar-color: var(--x-pre-scrollbar-color, currentcolor var(--color-body-secondary));
-    overflow-x: auto;
-    overscroll-behavior: contain;
-
-    > :where(code) {
-      background: transparent;
-      width: max-content;
-      color: inherit;
-    }
-  }
 }

package/src/components/text/index.css

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

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

@@ -0,0 +1,9 @@
+:root,
+:host {
+  --x-text-content-bold: var(--font-weight-semibold);
+  --x-text-list-marker-size: 0.375em;
+  --x-text-content-margin-block: 1.25em;
+  --x-text-hr-margin-block: 3em;
+  --x-text-heading-line-height: 1.2;
+  --x-text-img-border-radius: var(--radius-2xl);
+}

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

@@ -1,10 +1,4 @@
 :root,
 :host {
-  --x-text-content-bold: var(--font-weight-semibold);
-  --x-text-content-margin-block: calc(var(--spacing) * 5);
-  --x-text-list-marker-size: 0.375em;
-  --x-text-line-height: calc(1em + 0.75rem);
-  --x-text-hr-margin-block: 3em;
-  --x-text-heading-line-height: calc(1em + 0.375rem);
-  --x-text-heading-margin-block: 1.5em 0.5em;
+  --x-text-line-height: 1.5;
 }

package/src/components/toast/default.css

@@ -9,6 +9,12 @@
   visibility: hidden;
   opacity: 0%;
 
+  :where(:root, :host):has(dialog[open]) & {
+    button {
+      display: none;
+    }
+  }
+
   .flex-col-reverse & {
     justify-content: flex-end;
   }

package/src/components/toast/index.js

@@ -9,6 +9,7 @@ export const closeToast = async (element, options = {}) => {
   options = {
     closedAttribute: 'data-closed',
     heightProperty: '--x-toast-block-size',
+    remove: true,
     ...options,
   }
 
@@ -31,7 +32,7 @@ export const closeToast = async (element, options = {}) => {
 export const showToast = async (element, options = {}) => {
   options = {
     openAttribute: 'data-open',
-    autoHide: null,
+    autoHide: 7500,
     heightProperty: '--x-toast-block-size',
     close: {},
     ...options,

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

@@ -4,3 +4,4 @@ export interface CloseToastOptions {
 }
 
 export function closeToaster(element: HTMLElement, options?: CloseToastOptions): Promise<void>
+export function toasterObserver(): MutationObserver

package/src/components/toaster/index.js

@@ -10,3 +10,21 @@ export const closeToaster = (element, options = {}) => {
     closeToast(toast, options),
   )
 }
+
+/**
+ * @returns MutationObserver
+ */
+export const toasterObserver = () => {
+  return new MutationObserver((mutations) => {
+    for (const { target } of mutations) {
+      if (target.children.length > 0) {
+        if (!target.matches(':popover-open')) {
+          target?.showPopover?.()
+        }
+      }
+      else {
+        target?.hidePopover?.()
+      }
+    }
+  })
+}

package/src/components/tooltip/default.css

@@ -26,8 +26,8 @@
     pointer-events: none;
   }
 
-  &:where(.top),
-  &:where(.bottom) {
+  &:where(.tooltip-top),
+  &:where(.tooltip-bottom) {
     &::before {
       --tw-translate-x: -50%;
 
@@ -36,8 +36,8 @@
     }
   }
 
-  &:where(.left),
-  &:where(.right) {
+  &:where(.tooltip-left),
+  &:where(.tooltip-right) {
     &::before {
       --tw-translate-y: -50%;
 
@@ -46,28 +46,28 @@
     }
   }
 
-  &:where(.bottom) {
+  &:where(.tooltip-bottom) {
     &::before {
       inset-block-start: 100%;
       transform-origin: top;
     }
   }
 
-  &:where(.top) {
+  &:where(.tooltip-top) {
     &::before {
       inset-block-end: 100%;
       transform-origin: bottom;
     }
   }
 
-  &:where(.left) {
+  &:where(.tooltip-left) {
     &::before {
       inset-inline-end: 100%;
       transform-origin: right;
     }
   }
 
-  &:where(.right) {
+  &:where(.tooltip-right) {
     &::before {
       inset-inline-start: 100%;
       transform-origin: left;

package/src/polyfill.js

@@ -0,0 +1,13 @@
+import { supportsTimelineTrigger, supportsInterestFor, supportsScrollSnapEvents } from './supports.js'
+
+if (!supportsInterestFor) {
+  import('interestfor/src/interestfor.js')
+}
+
+if (!supportsTimelineTrigger) {
+  import('./polyfills/timelineTrigger.js')
+}
+
+if (!supportsScrollSnapEvents) {
+  import('scrollsnap-events/scrollsnapchanging')
+}

package/src/supports.js

@@ -7,3 +7,18 @@ export const supportsTimelineTrigger = CSS.supports('timeline-trigger-name: --v'
  * @type {boolean}
  */
 export const supportsInterestFor = Object.prototype.hasOwnProperty.call(HTMLButtonElement.prototype, 'interestForElement')
+
+/**
+ * @type {boolean}
+ */
+export const supportsScrollInitialTarget = CSS.supports('scroll-initial-target', 'nearest')
+
+/**
+ * @type {boolean}
+ */
+export const supportsAnimationTimeline = CSS.supports('animation-timeline: scroll()')
+
+/**
+ * @type {boolean}
+ */
+export const supportsScrollSnapEvents = ('onscrollsnapchanging' in window)

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

@@ -2,8 +2,8 @@
 :host {
   --container: min(100% - (var(--container-padding) * 2), var(--container-width));
   --container-breakout: min(100% - (var(--container-padding) * 2), var(--container-breakout-width));
-  --container-width: 80rem;
+  --container-width: 82rem;
   --container-breakout-width: calc(var(--container-width) + 10rem);
-  --container-padding: 5vw;
-  --container-padding-calc: max(calc(50vw - (var(--container-width) / 2)), var(--container-padding));
+  --container-padding: clamp(1.25rem, 7.5cqw - 1.5rem, 4rem);
+  --container-padding-calc: max(calc(50cqw - (var(--container-width) / 2)), var(--container-padding));
 }

package/tailwindcss/utilities/animation-trigger-fallback.css

@@ -0,0 +1,18 @@
+@utility animation-trigger-enter {
+  @supports not (timeline-trigger-name: --v) {
+    animation-play-state: paused;
+
+    @media (scripting: none) {
+      animation: none;
+    }
+
+    &:is([data-enter]),
+    :is([data-enter]) & {
+      animation-play-state: running;
+    }
+  }
+
+  @media (prefers-reduced-motion), print {
+    animation: none;
+  }
+}