elements-kit 0.21.0 → 0.22.1

package/dist/for.d.mts

@@ -1,4 +1,4 @@
-import { _ as Require, m as Props } from "./types-CUvFIgPa.mjs";
+import { s as MaybeReactiveProps } from "./children-s3nFjpLA.mjs";
 
 //#region src/for.d.ts
 type KeyFn<T> = (item: T, index: number) => string | number;
@@ -13,8 +13,9 @@ interface Entry {
 }
 /**
  * Props for `<For>`, derived from its public instance fields.
- * All props are optional — the class initializes sane defaults at runtime.
- * Non-function props also accept a reactive getter.
+ * `each` and `children` are required; `by` is optional (identity keying by
+ * default). Non-function props also accept a reactive getter — `each` takes a
+ * signal of arrays.
  *
  * @example
  * ```tsx
@@ -30,7 +31,11 @@ interface Entry {
  * };
  * ```
  */
-type ForProps<T> = Require<Props<For<T>>, "each" | "children">;
+type ForProps<T> = MaybeReactiveProps<{
+  each: T[];
+  by?: KeyFn<T>;
+  children: RenderFn<T>;
+}>;
 /**
  * Keyed list renderer. See {@link ForProps} for prop details.
  *

package/dist/for.mjs

@@ -1,6 +1,6 @@
 import { C as untracked, S as trigger, _ as onCleanup, d as effectScope, u as effect, x as signal } from "./lib-DYypKhxk.mjs";
 import "./signals/index.mjs";
-import { n as disposeElement } from "./element-D3om9yA6.mjs";
+import { n as disposeElement } from "./element-Di0PYFX1.mjs";
 //#region src/for.ts
 /**
 * Keyed list renderer. See {@link ForProps} for prop details.

package/dist/{fragment-ROPRBJQd.mjs → fragment-Bvs1sGu1.mjs}

@@ -1,7 +1,7 @@
 import { _ as onCleanup, u as effect } from "./lib-DYypKhxk.mjs";
 import "./signals/index.mjs";
-import { a as mountChild } from "./element-D3om9yA6.mjs";
-import { n as Slot } from "./slot-Dvf30O0B.mjs";
+import { a as mountChild } from "./element-Di0PYFX1.mjs";
+import { Slot } from "./slot.mjs";
 //#region src/jsx-runtime/fragment.ts
 /**
 * Parse an HTML string script-inertly: markup renders, `<script>` tags are
@@ -33,7 +33,7 @@ function Fragment(props) {
 	const fragment = document.createDocumentFragment();
 	if ("html" in props && props.html) {
 		const slot = new Slot();
-		fragment.appendChild(slot.render());
+		fragment.appendChild(slot.get());
 		const source = props.children;
 		if (typeof source === "function") {
 			effect(() => {

package/dist/hydrate/index.mjs

@@ -1,2 +1,2 @@
-import { t as hydrate } from "../hydrate-6Qx4n4Su.mjs";
+import { t as hydrate } from "../hydrate-DvWdnV-e.mjs";
 export { hydrate };

package/dist/{hydrate-6Qx4n4Su.mjs → hydrate-DvWdnV-e.mjs}

@@ -2,10 +2,10 @@ import { C as untracked, _ as onCleanup, d as effectScope, n as CLAIM, t as ASYN
 import { isReactive, resolveProps } from "./signals/index.mjs";
 import { isReactivePromiseLike } from "./utilities/promise.mjs";
 import { flushDeferredAsyncRuns, isAsyncLike } from "./utilities/async.mjs";
-import { i as applyProps, o as resolveChild, r as setRenderer, t as createElement } from "./element-D3om9yA6.mjs";
-import { n as Slot } from "./slot-Dvf30O0B.mjs";
+import { i as applyProps, o as resolveChild, r as setRenderer, t as createElement } from "./element-Di0PYFX1.mjs";
+import { Slot } from "./slot.mjs";
 import { For, isForComponent } from "./for.mjs";
-import { n as isFragmentComponent, r as parseHtml, t as Fragment } from "./fragment-ROPRBJQd.mjs";
+import { n as isFragmentComponent, r as parseHtml, t as Fragment } from "./fragment-Bvs1sGu1.mjs";
 //#region src/hydrate/claim.ts
 let hydrationContext = null;
 function setHydrationContext(ctx) {
@@ -158,7 +158,7 @@ function claimAsync(cur, p, om) {
 	}
 	const slot = claimSlot(cur, om);
 	effect(() => {
-		if (p.state === "pending") return;
+		if (p.state !== "fulfilled" && p.state !== "rejected") return;
 		slot.set(resolveChild(p.result));
 	});
 	onCleanup(() => slot.clear());
@@ -171,7 +171,7 @@ function claimSlot(cur, om) {
 		found: cur.node
 	});
 	const slot = new Slot();
-	cur.parent.insertBefore(slot.render(), cur.node);
+	cur.parent.insertBefore(slot.get(), cur.node);
 	return slot;
 }
 function claimMarkerRange(cur, open, close) {

package/dist/integrations/astro-client.mjs

@@ -1,6 +1,6 @@
-import { t as createElement } from "../element-D3om9yA6.mjs";
+import { t as createElement } from "../element-Di0PYFX1.mjs";
 import { render } from "../render.mjs";
-import { t as hydrate } from "../hydrate-6Qx4n4Su.mjs";
+import { t as hydrate } from "../hydrate-DvWdnV-e.mjs";
 import { withSlotProps } from "./astro-slots.mjs";
 //#region src/integrations/astro-client.ts
 /**

package/dist/integrations/astro-server.mjs

@@ -1,8 +1,8 @@
 import { y as setInertEffects } from "../lib-DYypKhxk.mjs";
 import { resolveProps } from "../signals/index.mjs";
-import { r as setRenderer, t as createElement } from "../element-D3om9yA6.mjs";
+import { r as setRenderer, t as createElement } from "../element-Di0PYFX1.mjs";
 import { withSlotProps } from "./astro-slots.mjs";
-import { i as serverJsx, n as renderToString, r as SNode } from "../server-iFSng50i.mjs";
+import { i as serverJsx, n as renderToString, r as SNode } from "../server-CTkyXTV6.mjs";
 //#region src/integrations/astro-server.ts
 /**
 * Decide whether `Component` is an elements-kit component. Invoked by Astro

package/dist/integrations/astro-slots.d.mts

@@ -1,11 +1,12 @@
 //#region src/integrations/astro-slots.d.ts
 /**
  * @internal Map Astro's pre-rendered slot HTML (`Record<name, html>`) into
- * elements-kit props: the `default` slot becomes `children`, named slots
- * become `slot:<name>` props. Each value is a thunk building Astro's slot
- * wrapper element around a `<Fragment html>` region — deferred so the jsx
- * dispatches to whichever renderer is active when the component reads the
- * prop (string emission on the server, DOM on the client).
+ * elements-kit props: the `default` slot becomes `children`, each named slot
+ * becomes a plain `<name>` prop (named slots are plain properties now — the
+ * same shape `<Card header={…}>` passes). Each value is a thunk building
+ * Astro's slot wrapper element around a `<Fragment html>` region — deferred so
+ * the jsx dispatches to whichever renderer is active when the component reads
+ * the prop (string emission on the server, DOM on the client).
  */
 declare function withSlotProps(props: Record<string, unknown> | null | undefined, slots: Record<string, string> | null | undefined, staticSlot?: boolean): Record<string, unknown>;
 //#endregion

package/dist/integrations/astro-slots.mjs

@@ -1,13 +1,14 @@
-import { t as createElement } from "../element-D3om9yA6.mjs";
-import { t as Fragment } from "../fragment-ROPRBJQd.mjs";
+import { t as createElement } from "../element-Di0PYFX1.mjs";
+import { t as Fragment } from "../fragment-Bvs1sGu1.mjs";
 //#region src/integrations/astro-slots.ts
 /**
 * @internal Map Astro's pre-rendered slot HTML (`Record<name, html>`) into
-* elements-kit props: the `default` slot becomes `children`, named slots
-* become `slot:<name>` props. Each value is a thunk building Astro's slot
-* wrapper element around a `<Fragment html>` region — deferred so the jsx
-* dispatches to whichever renderer is active when the component reads the
-* prop (string emission on the server, DOM on the client).
+* elements-kit props: the `default` slot becomes `children`, each named slot
+* becomes a plain `<name>` prop (named slots are plain properties now — the
+* same shape `<Card header={…}>` passes). Each value is a thunk building
+* Astro's slot wrapper element around a `<Fragment html>` region — deferred so
+* the jsx dispatches to whichever renderer is active when the component reads
+* the prop (string emission on the server, DOM on the client).
 */
 function withSlotProps(props, slots, staticSlot = false) {
 	const base = { ...props ?? {} };
@@ -22,7 +23,7 @@ function withSlotProps(props, slots, staticSlot = false) {
 			})
 		});
 		if (name === "default") base.children = slot;
-		else base[`slot:${name}`] = slot;
+		else base[name] = slot;
 	}
 	return base;
 }

package/dist/integrations/react.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../types-CUvFIgPa.mjs";
+import { f as Computed } from "../children-s3nFjpLA.mjs";
 
 //#region src/integrations/react.d.ts
 /**

package/dist/integrations/react.mjs

@@ -1,6 +1,6 @@
 import { u as effect, x as signal } from "../lib-DYypKhxk.mjs";
 import "../signals/index.mjs";
-import { t as scope } from "../scope-zbEG299F.mjs";
+import { t as scope } from "../scope-C1vELXqP.mjs";
 import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 //#region src/integrations/react.ts
 /**

package/dist/jsx-runtime/index.d.mts

@@ -1,2 +1,2 @@
-import { G as createElement, _ as Require, a as ComponentInstance, b as MaybeReactive, c as JSX, d as ComponentProps, f as ElementProps, g as ReactiveProps, h as RawProps, i as ComponentFn, l as SlotProps, m as Props, n as Component, o as PropsTarget, p as MaybeReactiveProps, r as ComponentClass, s as Attrs, t as Child, u as Fragment, v as ResolveProps } from "../types-CUvFIgPa.mjs";
-export { Attrs, type Child, type Component, type ComponentClass, type ComponentFn, type ComponentInstance, type ComponentProps, type ElementProps, Fragment, JSX, type MaybeReactive, type MaybeReactiveProps, type Props, type PropsTarget, type RawProps, type ReactiveProps, type Require, type ResolveProps, SlotProps, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };
+import { a as Fragment, c as Props, d as Require, i as JSX, l as PropsOf, n as ComponentClass, o as createElement, p as MaybeReactive, r as ComponentFn, s as MaybeReactiveProps, t as Children, u as RawProps } from "../children-s3nFjpLA.mjs";
+export { type Children, ComponentClass, ComponentFn, Fragment, JSX, type MaybeReactive, type MaybeReactiveProps, type Props, type PropsOf, type RawProps, type Require, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/jsx-runtime/index.mjs

@@ -1,3 +1,3 @@
-import { t as createElement } from "../element-D3om9yA6.mjs";
-import { t as Fragment } from "../fragment-ROPRBJQd.mjs";
+import { t as createElement } from "../element-Di0PYFX1.mjs";
+import { t as Fragment } from "../fragment-Bvs1sGu1.mjs";
 export { Fragment, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/polyfill-BVNd6ogU.d.mts

@@ -0,0 +1,9 @@
+//#region src/polyfill.d.ts
+declare global {
+  interface SymbolConstructor {
+    readonly dispose: symbol;
+  }
+  interface Disposable {
+    [Symbol.dispose](): void;
+  }
+}

package/dist/render.mjs

@@ -1,4 +1,4 @@
-import { t as scope } from "./scope-zbEG299F.mjs";
+import { t as scope } from "./scope-C1vELXqP.mjs";
 //#region src/render.ts
 /**
 * Mount a node into `target` with a scoped lifetime.

package/dist/server/index.mjs

@@ -1,2 +1,2 @@
-import { n as renderToString, t as renderToStream } from "../server-iFSng50i.mjs";
+import { n as renderToString, t as renderToStream } from "../server-CTkyXTV6.mjs";
 export { renderToStream, renderToString };

package/dist/{server-iFSng50i.mjs → server-CTkyXTV6.mjs}

@@ -2,9 +2,9 @@ import { C as untracked, y as setInertEffects } from "./lib-DYypKhxk.mjs";
 import { isReactive, resolveProps } from "./signals/index.mjs";
 import { isReactivePromiseLike } from "./utilities/promise.mjs";
 import { isAsyncLike } from "./utilities/async.mjs";
-import { c as BooleanAttributes, l as ChildProperties, r as setRenderer, s as AttrAliases, u as Properties } from "./element-D3om9yA6.mjs";
+import { c as BooleanAttributes, l as ChildProperties, r as setRenderer, s as AttrAliases, u as Properties } from "./element-Di0PYFX1.mjs";
 import { isForComponent } from "./for.mjs";
-import { n as isFragmentComponent } from "./fragment-ROPRBJQd.mjs";
+import { n as isFragmentComponent } from "./fragment-Bvs1sGu1.mjs";
 //#region src/server/escape.ts
 function escapeDelim(s, delim, escDelim) {
 	let iDelim = s.indexOf(delim);

package/dist/signals/index.d.mts

@@ -1,2 +1,2 @@
-import { A as EFFECT_SCOPE, B as isSignal, C as isReactive, D as CLAIM, E as resolveProps, F as effect, H as signal, I as effectScope, L as isComputed, M as SIGNAL, N as batch, O as COMPUTED, P as computed, R as isEffect, S as Updater, T as resolve, U as trigger, V as onCleanup, W as untracked, b as MaybeReactive, j as SEED, k as EFFECT, w as reactive, x as Signal, y as Computed, z as isEffectScope } from "../types-CUvFIgPa.mjs";
+import { A as isComputed, C as EFFECT_SCOPE, D as computed, E as batch, F as signal, I as trigger, L as untracked, M as isEffectScope, N as isSignal, O as effect, P as onCleanup, S as EFFECT, T as SIGNAL, _ as reactive, b as CLAIM, f as Computed, g as isReactive, h as Updater, j as isEffect, k as effectScope, m as Signal, p as MaybeReactive, v as resolve, w as SEED, x as COMPUTED, y as resolveProps } from "../children-s3nFjpLA.mjs";
 export { CLAIM, COMPUTED, Computed, EFFECT, EFFECT_SCOPE, MaybeReactive, SEED, SIGNAL, Signal, Updater, batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, resolveProps, signal, trigger, untracked };

package/dist/slot.d.mts

@@ -1,2 +1,83 @@
-import { n as Slot, t as SLOTS } from "./slot-BFWXeFRl.mjs";
-export { SLOTS, Slot };
+//#region src/slot.d.ts
+/**
+ * A lightweight slot that reserves a region in the DOM using comment markers.
+ * Content between the markers can be replaced dynamically without wrapper elements.
+ */
+declare class Slot {
+  #private;
+  /**
+   * Bind a slot to an existing marker pair (server-rendered comments) instead
+   * of creating new ones. Used by the hydrate claim pass: content between the
+   * markers is adopted as the slot's current content.
+   */
+  static claim(start: Comment, end: Comment): Slot;
+  /**
+   * Render the slot as a DocumentFragment.
+   * If not yet mounted, inserts the comment markers and any default content
+   * (`Node`s or strings — native `append()` semantics; strings become text
+   * nodes). If already mounted, extracts and returns the current content
+   * WITHOUT disposing it — the caller takes ownership of the returned nodes
+   * and is responsible for their disposal.
+   */
+  get(...nodes: (string | Node)[]): DocumentFragment;
+  /** Dispose reactive children and remove all content between the markers. */
+  clear(): void;
+  /**
+   * Replace the slot's content with the given nodes/strings (native
+   * `append()` semantics; strings become text nodes). No args clears the
+   * slot. Buffers until mounted; no-op if the content is identical.
+   */
+  set(...nodes: (string | Node)[]): void;
+  /**
+   * Extract and return the current slot content as a DocumentFragment.
+   * Returns `null` if the slot is not mounted.
+   * Content is NOT disposed — the caller takes ownership and is responsible
+   * for disposal.
+   */
+  current(): DocumentFragment | null;
+  /** Returns the parent node if the slot is mounted, otherwise `null`. */
+  parent(): ParentNode | null;
+  /** Whether the slot's comment markers are attached to the DOM. */
+  isMounted(): boolean;
+}
+/**
+ * What a `@slot()` property assignment accepts — the same content the
+ * platform's `ParentNode.append()` takes (`Node` or string, strings become
+ * text nodes), plus arrays of it (JSX passes multiple children as an array).
+ */
+type SlotContent = Node | string | readonly (Node | string)[];
+/**
+ * Field decorator declaring a slot as a plain property backed by a
+ * {@link Slot}. Reading returns the slot's region (`slot.get()` — a fragment
+ * to append into any template, elements-kit JSX or not); assigning fills it
+ * (`null` clears). Values follow native `append()` semantics — a `Node`, a
+ * string, or an array of them. Assignment buffers before mount, so consumers
+ * can set content before the element renders.
+ *
+ * The getter is EFFECTFUL: it mounts the markers on first read and extracts
+ * current content on later reads (the re-render semantic of
+ * {@link Slot.get}). Read it to PLACE the region, not to inspect it.
+ *
+ * Declare the field as {@link SlotContent} to accept the full native
+ * `append()` surface (`Node` | string | array); narrow it to `Node` when the
+ * slot only ever holds an element.
+ *
+ * @example
+ * ```tsx
+ * class Card extends HTMLElement {
+ *   \@slot() header!: SlotContent;
+ *
+ *   render() {
+ *     return <header>{this.header}</header>; // or root.append(card.header)
+ *   }
+ * }
+ *
+ * // consumers — any framework, or none:
+ * card.header = document.createElement("h1"); // Node
+ * card.header = "plain text";                  // native append() content
+ * card.header = null;                          // clear
+ * ```
+ */
+declare function slot(): <This extends object, V extends SlotContent | null>(_target: unknown, context: ClassFieldDecoratorContext<This, V>) => (this: This, initialValue: V) => V;
+//#endregion
+export { Slot, SlotContent, slot };

package/dist/slot.mjs

@@ -1,2 +1,179 @@
-import { n as Slot, t as SLOTS } from "./slot-Dvf30O0B.mjs";
-export { SLOTS, Slot };
+import "./polyfill-CdZVCxdo.mjs";
+//#region src/slot.ts
+/**
+* A lightweight slot that reserves a region in the DOM using comment markers.
+* Content between the markers can be replaced dynamically without wrapper elements.
+*/
+var Slot = class Slot {
+	#start;
+	#end;
+	#pending;
+	/**
+	* Bind a slot to an existing marker pair (server-rendered comments) instead
+	* of creating new ones. Used by the hydrate claim pass: content between the
+	* markers is adopted as the slot's current content.
+	*/
+	static claim(start, end) {
+		const slot = new Slot();
+		slot.#start = start;
+		slot.#end = end;
+		return slot;
+	}
+	/**
+	* Render the slot as a DocumentFragment.
+	* If not yet mounted, inserts the comment markers and any default content
+	* (`Node`s or strings — native `append()` semantics; strings become text
+	* nodes). If already mounted, extracts and returns the current content
+	* WITHOUT disposing it — the caller takes ownership of the returned nodes
+	* and is responsible for their disposal.
+	*/
+	get(...nodes) {
+		const fragment = document.createDocumentFragment();
+		if (this.isMounted()) {
+			const range = document.createRange();
+			range.setStartAfter(this.#start);
+			range.setEndBefore(this.#end);
+			fragment.appendChild(range.extractContents());
+			return fragment;
+		}
+		const start = this.#start ??= document.createComment("{");
+		const end = this.#end ??= document.createComment("}");
+		fragment.appendChild(start);
+		fragment.appendChild(end);
+		const initialContent = this.#pending ?? toContent(nodes);
+		if (initialContent) fragment.insertBefore(initialContent, end);
+		this.#pending = void 0;
+		return fragment;
+	}
+	/** Dispose reactive children and remove all content between the markers. */
+	clear() {
+		if (!this.#start || !this.#end) return;
+		let node = this.#start.nextSibling;
+		while (node && node !== this.#end) {
+			const next = node.nextSibling;
+			if (node instanceof Element) node[Symbol.dispose]?.();
+			node = next;
+		}
+		const range = document.createRange();
+		range.setStartAfter(this.#start);
+		range.setEndBefore(this.#end);
+		range.deleteContents();
+	}
+	/**
+	* Replace the slot's content with the given nodes/strings (native
+	* `append()` semantics; strings become text nodes). No args clears the
+	* slot. Buffers until mounted; no-op if the content is identical.
+	*/
+	set(...nodes) {
+		const content = toContent(nodes);
+		if (content == null) {
+			this.clear();
+			return;
+		}
+		const parent = this.parent();
+		if (!parent) {
+			this.#pending = content;
+			return;
+		}
+		if (this.#isSame(content)) return;
+		this.clear();
+		parent.insertBefore(content, this.#end);
+		this.#pending = void 0;
+	}
+	/**
+	* Extract and return the current slot content as a DocumentFragment.
+	* Returns `null` if the slot is not mounted.
+	* Content is NOT disposed — the caller takes ownership and is responsible
+	* for disposal.
+	*/
+	current() {
+		if (!this.isMounted()) return null;
+		const range = document.createRange();
+		range.setStartAfter(this.#start);
+		range.setEndBefore(this.#end);
+		return range.extractContents();
+	}
+	/** Returns the parent node if the slot is mounted, otherwise `null`. */
+	parent() {
+		return this.isMounted() ? this.#start.parentNode : null;
+	}
+	/** Whether the slot's comment markers are attached to the DOM. */
+	isMounted() {
+		return !!this.#start && this.#start.parentNode !== null && this.#start.parentNode === this.#end.parentNode;
+	}
+	#isSame(element) {
+		return this.#start.nextSibling === element && this.#end === element.nextSibling;
+	}
+};
+function toContent(nodes) {
+	if (nodes.length === 0) return void 0;
+	if (nodes.length === 1 && nodes[0] instanceof Node) return nodes[0];
+	const frag = document.createDocumentFragment();
+	frag.append(...nodes);
+	return frag;
+}
+function toArgs(value) {
+	return Array.isArray(value) ? value.flat(Infinity) : [value];
+}
+/**
+* Field decorator declaring a slot as a plain property backed by a
+* {@link Slot}. Reading returns the slot's region (`slot.get()` — a fragment
+* to append into any template, elements-kit JSX or not); assigning fills it
+* (`null` clears). Values follow native `append()` semantics — a `Node`, a
+* string, or an array of them. Assignment buffers before mount, so consumers
+* can set content before the element renders.
+*
+* The getter is EFFECTFUL: it mounts the markers on first read and extracts
+* current content on later reads (the re-render semantic of
+* {@link Slot.get}). Read it to PLACE the region, not to inspect it.
+*
+* Declare the field as {@link SlotContent} to accept the full native
+* `append()` surface (`Node` | string | array); narrow it to `Node` when the
+* slot only ever holds an element.
+*
+* @example
+* ```tsx
+* class Card extends HTMLElement {
+*   \@slot() header!: SlotContent;
+*
+*   render() {
+*     return <header>{this.header}</header>; // or root.append(card.header)
+*   }
+* }
+*
+* // consumers — any framework, or none:
+* card.header = document.createElement("h1"); // Node
+* card.header = "plain text";                  // native append() content
+* card.header = null;                          // clear
+* ```
+*/
+function slot() {
+	const store = /* @__PURE__ */ new WeakMap();
+	return function(_target, context) {
+		context.addInitializer(function() {
+			const s = store.get(this);
+			Object.defineProperty(this, context.name, {
+				get() {
+					return s.get();
+				},
+				set(value) {
+					if (value == null) {
+						s.clear();
+						return;
+					}
+					s.set(...toArgs(value));
+				},
+				enumerable: true,
+				configurable: true
+			});
+		});
+		return function(initialValue) {
+			const s = new Slot();
+			store.set(this, s);
+			if (initialValue != null) s.set(...toArgs(initialValue));
+			return initialValue;
+		};
+	};
+}
+//#endregion
+export { Slot, slot };

package/dist/ui/marketing/marketing.css

@@ -1,5 +1,7 @@
-.hero :is(h1, h2, h3, h4, h5, h6, p), .section-header :is(h1, h2, h3, h4, h5, h6, p), .section-heading, .section-paragraph, .river-content :is(h1, h2, h3, h4, h5, h6, p), .pillar :is(h1, h2, h3, h4, h5, h6, p, [data-heading], [data-paragraph]), .cta-banner :is(h1, h2, h3, h4, h5, h6, p), .testimonial :is(blockquote, figcaption, cite, p), .statistic :is(p, [data-leading], [data-heading], [data-description]) {
-  margin: 0;
+@layer unset {
+  .hero :is(h1, h2, h3, h4, h5, h6, p), .section-header :is(h1, h2, h3, h4, h5, h6, p), .section-heading, .section-paragraph, .river-content :is(h1, h2, h3, h4, h5, h6, p), .pillar :is(h1, h2, h3, h4, h5, h6, p, [data-heading], [data-paragraph]), .cta-banner :is(h1, h2, h3, h4, h5, h6, p), .testimonial :is(blockquote, figcaption, cite, p), .statistic :is(p, [data-leading], [data-heading], [data-description]) {
+    margin: 0;
+  }
 }
 
 .hero {
@@ -32,7 +34,7 @@
 @media (min-width: 64rem) {
   .hero .section-paragraph {
     font-size: var(--font-size-5);
-    line-height: var(--line-height-5);
+    line-height: var(--line-height-6);
   }
 }
 

package/dist/ui/otp-input/index.d.mts

@@ -1,4 +1,5 @@
-import { n as AttrChangeHandler, t as ATTRIBUTES } from "../../attributes-3r7Diua4.mjs";
+import { n as AttrChangeHandler, t as ATTRIBUTES } from "../../attributes-DILeh3-s.mjs";
+import { t as HTMLElementBase } from "../../environment-CTAGxqz_.mjs";
 
 //#region src/ui/otp-input/otp-input.d.ts
 /**
@@ -30,7 +31,7 @@ import { n as AttrChangeHandler, t as ATTRIBUTES } from "../../attributes-3r7Diu
  * </x-otp-input>
  * ```
  */
-declare class XOtpInput extends HTMLElement {
+declare class XOtpInput extends HTMLElementBase {
   #private;
   static formAssociated: boolean;
   static [ATTRIBUTES]: {
@@ -82,7 +83,7 @@ declare global {
  * `<x-otp-input>` paints its character and active / caret / disabled state by
  * index; all styling lives in the companion CSS.
  */
-declare class XOtpSlot extends HTMLElement {
+declare class XOtpSlot extends HTMLElementBase {
   static [ATTRIBUTES]: {
     index: AttrChangeHandler<XOtpSlot>;
   };
@@ -102,7 +103,7 @@ declare global {
  * `<x-otp-slot>`s into one attached group. All layout lives in CSS; this only
  * applies a `group` role so the visual grouping is exposed to assistive tech.
  */
-declare class XOtpGroup extends HTMLElement {
+declare class XOtpGroup extends HTMLElementBase {
   connectedCallback(): void;
 }
 declare global {
@@ -118,7 +119,7 @@ declare global {
  * `<x-otp-separator>` — decorative divider authored between OTP groups (e.g. a
  * dash between a 3-3 split). Purely visual: `aria-hidden`, glyph drawn in CSS.
  */
-declare class XOtpSeparator extends HTMLElement {
+declare class XOtpSeparator extends HTMLElementBase {
   connectedCallback(): void;
 }
 declare global {

package/dist/ui/otp-input/index.mjs

@@ -3,7 +3,7 @@ import { l as computed, u as effect, x as signal } from "../../lib-DYypKhxk.mjs"
 import "../../signals/index.mjs";
 import { on } from "../../utilities/event-listener.mjs";
 import { render } from "../../render.mjs";
-import { isBrowser } from "../../utilities/environment.mjs";
+import { HTMLElementBase, isBrowser } from "../../utilities/environment.mjs";
 //#region src/ui/otp-input/otp-input.shadow.css?inline
 var otp_input_shadow_default = ".x-otp-input__field {\n  color: #0000;\n  caret-color: #0000;\n  width: 100%;\n  height: 100%;\n  font: inherit;\n  letter-spacing: inherit;\n  pointer-events: auto;\n  background: none;\n  border: 0;\n  outline: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  inset: 0;\n}\n\n.x-otp-input__field::selection {\n  color: #0000;\n  background-color: #0000;\n}\n";
 //#endregion
@@ -43,7 +43,7 @@ SHADOW_SHEET?.replaceSync(otp_input_shadow_default);
 * </x-otp-input>
 * ```
 */
-var XOtpInput = class XOtpInput extends HTMLElement {
+var XOtpInput = class XOtpInput extends HTMLElementBase {
 	static formAssociated = true;
 	static [ATTRIBUTES] = {
 		value(value) {
@@ -293,7 +293,7 @@ if (isBrowser && !customElements.get("x-otp-input")) customElements.define("x-ot
 * `<x-otp-input>` paints its character and active / caret / disabled state by
 * index; all styling lives in the companion CSS.
 */
-var XOtpSlot = class extends HTMLElement {
+var XOtpSlot = class extends HTMLElementBase {
 	connectedCallback() {
 		this.setAttribute("aria-hidden", "true");
 	}
@@ -306,7 +306,7 @@ if (isBrowser && !customElements.get("x-otp-slot")) customElements.define("x-otp
 * `<x-otp-slot>`s into one attached group. All layout lives in CSS; this only
 * applies a `group` role so the visual grouping is exposed to assistive tech.
 */
-var XOtpGroup = class extends HTMLElement {
+var XOtpGroup = class extends HTMLElementBase {
 	connectedCallback() {
 		if (!this.hasAttribute("role")) this.setAttribute("role", "group");
 	}
@@ -318,7 +318,7 @@ if (isBrowser && !customElements.get("x-otp-group")) customElements.define("x-ot
 * `<x-otp-separator>` — decorative divider authored between OTP groups (e.g. a
 * dash between a 3-3 split). Purely visual: `aria-hidden`, glyph drawn in CSS.
 */
-var XOtpSeparator = class extends HTMLElement {
+var XOtpSeparator = class extends HTMLElementBase {
 	connectedCallback() {
 		this.setAttribute("aria-hidden", "true");
 	}