winduum 3.0.0-next.7 → 3.0.0-next.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "3.0.0-next.7",
+  "version": "3.0.0-next.9",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",
@@ -31,6 +31,7 @@
     "eslint": "^10.6.0",
     "fast-glob": "^3.3.3",
     "globals": "^17.7.0",
+    "interestfor": "^1.0.8",
     "invokers-polyfill": "^1.0.3",
     "postcss": "^8.5.16",
     "postcss-custom-media": "^12.0.1",
@@ -65,6 +66,9 @@
       "types": "./types/index.d.ts",
       "default": "./src/supports.js"
     },
+    "./polyfill": {
+      "default": "./src/polyfill.js"
+    },
     "./src/*": "./src/*",
     "./tailwindcss/*": "./tailwindcss/*",
     "./dist/*": "./dist/*",
@@ -82,7 +86,6 @@
       "default": "./src/components/details/index.js"
     },
     "./src/components/dialog": {
-      "types": "./src/components/dialog/index.d.ts",
       "default": "./src/components/dialog/index.js"
     },
     "./src/components/drawer": {

package/src/base/defaults.css

@@ -53,12 +53,14 @@
 }
 
 :where(html) {
+  scroll-padding-top: var(--scroll-padding-top);
   color-scheme: var(--default-color-scheme);
   font-family: var(--font-primary);
   font-weight: var(--font-weight-normal);
   block-size: 100%;
   line-height: 1.5;
   text-size-adjust: 100%;
+  container-type: scroll-state;
 
   @media (prefers-reduced-motion: no-preference) {
     scroll-behavior: smooth;
@@ -73,6 +75,7 @@
   display: flex;
   flex-direction: column;
   overflow-x: clip;
+  container-type: inline-size;
 }
 
 [hidden] {

package/src/common.d.ts

@@ -1,2 +1,6 @@
 export function nextRepaint(): Promise<void>;
 export function animationsFinished(element: HTMLElement): Promise<any>;
+export const supportsAnchor: boolean;
+export const supportsAnchoredContainer: boolean;
+export const supportsAnchor: boolean;
+export const supportsAnchoredContainer: boolean;

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

@@ -1,40 +1,19 @@
-export interface ObserveCarouselOptions {
-    visibleAttribute?: string
-    observerOptions?: {
-        rootMargin?: string
-        threshold?: number | number[]
-    }
-}
-
-export interface PaginationCarouselOptions {
-    element?: HTMLElement | Element
-    itemContent?: string
-    activeAttribute?: string
-}
-
-export interface ScrollCarouselOptions {
-    observe?: ObserveCarouselOptions
-    pagination?: PaginationCarouselOptions
-    progressElement?: HTMLProgressElement | Element
-    counterMinElement?: HTMLElement | Element
-    counterMaxElement?: HTMLElement | Element
-}
+export type CarouselPlacement = 'left' | 'right' | 'top' | 'bottom'
 
-export interface AutoplayCarouselOptions {
-    delay?: number
-    pauseElements?: HTMLElement[] | Element[]
+export interface ScrollByOptions {
+    direction?: number
+    vertical?: boolean
+    ratio?: number
 }
 
-export interface DragCarouselOptions {
-    activeAttribute?: string
+export interface ToggleScrollStateOptions {
+    prevElement?: HTMLButtonElement | null
+    nextElement?: HTMLButtonElement | null
+    vertical?: boolean
 }
 
-export function scrollPrev(element: HTMLElement | Element): void
-export function scrollNext(element: HTMLElement | Element): void
-export function scrollTo(element: HTMLElement | Element, selected?: number): void
-export function getItemCount(element: HTMLElement | Element, scrollWidth?: number, mathFloor?: boolean): number
-export function observeCarousel(element: HTMLElement | Element, options?: ObserveCarouselOptions): void
-export function scrollCarousel(element: HTMLElement | Element, options?: ScrollCarouselOptions): void
-export function paginationCarousel(element: HTMLElement | Element, options?: PaginationCarouselOptions): void
-export function autoplayCarousel(element: HTMLElement | Element, options?: AutoplayCarouselOptions): void
-export function dragCarousel(element: HTMLElement | Element, options?: DragCarouselOptions): void
+export function scrollBy(element: HTMLElement, options?: ScrollByOptions): void
+export function toggleScrollState(element: HTMLElement, options?: ToggleScrollStateOptions): void
+export function setCurrentAttribute(element: HTMLElement, index: number, attributeName?: string): void
+export function setSnappedAttribute(element: HTMLElement, target: HTMLElement, markerGroupElement?: HTMLElement | null): void
+export function scrollToMarker(element: HTMLElement, target: HTMLElement, markerGroupElement: HTMLElement, scrollIntoViewOptions?: ScrollIntoViewOptions): void

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

@@ -3,7 +3,7 @@
   --x-check-size: 1.25rem;
   --x-check-gap: calc(var(--spacing) * 3);
   --x-check-font-size: var(--text-sm);
-  --x-check-line-height: calc(1em + 0.25rem);
+  --x-check-line-height: 1.25rem;
   --x-check-border-radius: var(--radius-md);
   --x-check-border-width: 1px;
   --x-check-background-color: currentcolor;

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

@@ -5,12 +5,12 @@
   --x-control-select-picker-border-color: currentcolor;
   --x-control-select-picker-background-color: var(--color-body-primary);
   --x-control-select-picker-margin-block: 0.375rem;
-  --x-control-select-picker-padding-block: 0.375rem;
-  --x-control-select-picker-padding-inline: 0.375rem;
+  --x-control-select-picker-padding-block: calc(var(--spacing) * 1);
+  --x-control-select-picker-padding-inline: calc(var(--spacing) * 1);
   --x-control-select-picker-gap: 0.25rem;
   --x-control-select-picker-scrollbar-color: currentcolor var(--color-body-primary);
-  --x-control-select-option-padding-block: 0.75rem;
-  --x-control-select-option-padding-inline: 0.75rem;
+  --x-control-select-option-padding-block: calc(var(--spacing) * 2.5);
+  --x-control-select-option-padding-inline: calc(var(--spacing) * 3);
   --x-control-select-option-border-radius: var(--radius-md);
   --x-control-select-option-hocus-background-color: var(--color-body-secondary);
 }

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

@@ -1,6 +1,6 @@
 :root,
 :host {
-  --x-control-select-icon-size: 1.25rem;
-  --x-control-select-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" /></svg>');
+  --x-control-select-icon-size: 1rem;
+  --x-control-select-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>');
   --x-control-select-icon-margin-inline-end: -0.25rem;
 }

package/src/components/control/tel-country-code.css

@@ -0,0 +1,24 @@
+.x-control {
+  &:has([autocomplete="tel-country-code"]) {
+    :where(select) {
+      @media not (scripting: none) {
+        font-size: 0;
+      }
+
+      + :where(span) {
+        pointer-events: none;
+
+        @media (scripting: none) {
+          display: none;
+        }
+      }
+
+      :where(option) {
+        &::before {
+          content: attr(data-icon);
+          margin-inline-end: 0.5ch;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+export interface ToggleDetailsOptions {
+    selector?: string
+}
+
+export function toggleDetails(element: HTMLInputElement, options?: ToggleDetailsOptions): void

package/src/components/details/index.js

@@ -0,0 +1,13 @@
+/**
+ * @param {HTMLInputElement} element
+ * @param {import("./").ToggleDetailsOptions} options
+ * @returns void
+ */
+export const toggleDetails = (element, options = {}) => {
+  const { selector } = {
+    selector: 'details',
+    ...options,
+  }
+
+  element?.closest(selector)?.toggleAttribute('open', element.checked)
+}

package/src/components/details/readme.md

@@ -1,8 +1,5 @@
 # [Details](https://winduum.dev/docs/components/details.html)
 
-## Dependencies
-* [slide-element](https://www.npmjs.com/package/slide-element)
-
 ## Installation
 ```shell
 npm i winduum
@@ -10,7 +7,7 @@ npm i winduum
 Learn more how to set up Winduum [here](https://winduum.dev/docs/).
 
 ```js
-import { showDetails } from 'winduum/src/components/details/index.js'
+import { toggleDetails } from 'winduum/src/components/details/index.js'
 ```
 
 ### Local imports
@@ -18,7 +15,7 @@ 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.
 
 ```js
-import { showDetails } from '@/components/details/assets/index.js'
+import { toggleDetails } from '@/components/details/assets/index.js'
 ```
 
 ### Docs

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

@@ -1,16 +1,9 @@
-export interface ScrollDrawerOptions {
-    snapClass?: string
-    opacityProperty?: string
-    opacityRatio?: number
-    scrollOpen?: number
-    scrollClose?: number
-    scrollSize?: number
-    scrollDirection?:number
-}
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom'
 
-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 scrollInitDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
-export function toggleDrawerAttributes(element: HTMLDialogElement | Element, state?: 'open' | 'close', snapClass?: string): void
-export function scrollDrawerState(scrollState: number, scrollDirection: number): boolean
-export function scrollDrawer(element: HTMLDialogElement | Element, options?: ScrollDrawerOptions): void
+export function isVerticalDrawer(placement: DrawerPlacement): boolean
+export function scrollDrawer(element: HTMLElement | Element, placement: DrawerPlacement, reverse?: boolean, behavior?: 'auto' | 'instant'): void
+export function showDrawer(element: HTMLElement | Element, placement: DrawerPlacement): Promise<void>
+export function closeDrawer(element: HTMLElement | Element, placement: DrawerPlacement): void
+export function drawerEvents(element: HTMLDialogElement | Element, contentElement: HTMLElement | Element, placement: DrawerPlacement, signal?: AbortSignal): void
+export function drawerObserver(element: HTMLDialogElement | Element, placement: DrawerPlacement): IntersectionObserver
+export function drawerProperties(element: HTMLElement | Element, placement: DrawerPlacement): ['top' | 'left', number, number]

package/src/components/drawer/nosnap.css

@@ -1,5 +1,5 @@
 .x-drawer {
-  &:is(.no-snap) {
+  &:where(.no-snap) {
     --x-drawer-backdrop-opacity: 1;
 
     width: fit-content;

package/src/components/heading/lg.css

@@ -1,3 +1,3 @@
 .x-heading:is(.lg) {
-  --x-heading-font-size: var(--text-3xl);
+  --x-heading-font-size: var(--text-5xl);
 }

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

@@ -2,6 +2,6 @@
 :host {
   --x-heading-font-family: var(--font-primary);
   --x-heading-font-weight: var(--font-weight-semibold);
-  --x-heading-font-size: var(--text-xl);
+  --x-heading-font-size: var(--text-4xl);
   --x-heading-line-height: calc(1em + 0.375rem);
 }

package/src/components/heading/sm.css

@@ -1,3 +1,3 @@
 .x-heading:is(.sm) {
-  --x-heading-font-size: var(--text-lg);
+  --x-heading-font-size: var(--text-3xl);
 }

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

@@ -1,5 +1,6 @@
 :root,
 :host {
-  --x-label-font-size: var(--text-sm);
-  --x-label-line-height: calc(1em + 0.25rem);
+  --x-label-font-size: var(--text-2xs);
+  --x-label-line-height: calc(1em + 0.125rem);
+  --x-label-font-weight: var(--font-weight-medium);
 }

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/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/polyfill.js

@@ -0,0 +1,18 @@
+import { supportsCommand, supportsIs } from 'webuum/supports'
+import { supportsTimelineTrigger, supportsInterestFor } from './supports.js'
+
+if (!supportsCommand) {
+  import('invokers-polyfill')
+}
+
+if (!supportsIs()) {
+  import('@webreflection/custom-elements-builtin')
+}
+
+if (!supportsInterestFor) {
+  import('interestfor/src/interestfor.js')
+}
+
+if (!supportsTimelineTrigger) {
+  import('./polyfills/timelineTrigger.js')
+}

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;
+  }
+}