elements-kit 0.21.0 → 0.22.0

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,4 @@
-import { n as AttrChangeHandler, t as ATTRIBUTES } from "../../attributes-3r7Diua4.mjs";
+import { n as AttrChangeHandler, t as ATTRIBUTES } from "../../attributes-DILeh3-s.mjs";
 
 //#region src/ui/otp-input/otp-input.d.ts
 /**

package/dist/ui/styles/index.css

@@ -449,214 +449,216 @@
   --cursor-switch: default;
 }
 
-.unset:where(body, blockquote, dl, dd, figure, p) {
-  margin: 0;
-}
+@layer unset {
+  .unset:where(body, blockquote, dl, dd, figure, p) {
+    margin: 0;
+  }
 
-.unset:where(address, b, cite, code, dfn, em, i, kbd, q, samp, small, strong, var) {
-  font: unset;
-}
+  .unset:where(address, b, cite, code, dfn, em, i, kbd, q, samp, small, strong, var) {
+    font: unset;
+  }
 
-.unset:where(h1, h2, h3, h4, h5, h6) {
-  font: unset;
-  margin: 0;
-}
+  .unset:where(h1, h2, h3, h4, h5, h6) {
+    font: unset;
+    margin: 0;
+  }
 
-.unset:where(a) {
-  all: unset;
-  -webkit-tap-highlight-color: transparent;
-}
+  .unset:where(a) {
+    all: unset;
+    -webkit-tap-highlight-color: transparent;
+  }
 
-.unset:where(button, select, [type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"]) {
-  all: unset;
-  text-indent: initial;
-  -webkit-tap-highlight-color: transparent;
-  font-style: normal;
-  font-weight: normal;
-  display: inline-block;
-}
+  .unset:where(button, select, [type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"]) {
+    all: unset;
+    text-indent: initial;
+    -webkit-tap-highlight-color: transparent;
+    font-style: normal;
+    font-weight: normal;
+    display: inline-block;
+  }
 
-.unset:where(label) {
-  -webkit-tap-highlight-color: transparent;
-}
+  .unset:where(label) {
+    -webkit-tap-highlight-color: transparent;
+  }
 
-.unset:where(dialog, [popover]) {
-  box-sizing: border-box;
-  background: none;
-  border: 0;
-  outline: none;
-  max-width: none;
-  max-height: none;
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  inset: auto;
-  overflow: visible;
-}
+  .unset:where(dialog, [popover]) {
+    box-sizing: border-box;
+    background: none;
+    border: 0;
+    outline: none;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    inset: auto;
+    overflow: visible;
+  }
 
-.unset:where(select) {
-  text-align: start;
-  font-style: normal;
-  font-weight: normal;
-}
+  .unset:where(select) {
+    text-align: start;
+    font-style: normal;
+    font-weight: normal;
+  }
 
-.unset:where(textarea, input:not([type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"])) {
-  all: unset;
-  text-align: start;
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  text-indent: initial;
-  -webkit-tap-highlight-color: transparent;
-  cursor: text;
-  white-space: pre-wrap;
-  font-style: normal;
-  font-weight: normal;
-  display: block;
-}
+  .unset:where(textarea, input:not([type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"])) {
+    all: unset;
+    text-align: start;
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: stretch;
+    text-indent: initial;
+    -webkit-tap-highlight-color: transparent;
+    cursor: text;
+    white-space: pre-wrap;
+    font-style: normal;
+    font-weight: normal;
+    display: block;
+  }
 
-.unset:where(:focus) {
-  outline: none;
-}
+  .unset:where(:focus) {
+    outline: none;
+  }
 
-.unset::placeholder {
-  color: unset;
-  opacity: unset;
-  -webkit-user-select: none;
-  user-select: none;
-}
+  .unset::placeholder {
+    color: unset;
+    opacity: unset;
+    -webkit-user-select: none;
+    user-select: none;
+  }
 
-.unset:where(table) {
-  all: unset;
-  text-indent: initial;
-  display: table;
-}
+  .unset:where(table) {
+    all: unset;
+    text-indent: initial;
+    display: table;
+  }
 
-.unset:where(caption) {
-  text-align: inherit;
-}
+  .unset:where(caption) {
+    text-align: inherit;
+  }
 
-.unset:where(td) {
-  padding: 0;
-}
+  .unset:where(td) {
+    padding: 0;
+  }
 
-.unset:where(th) {
-  font-weight: unset;
-  text-align: inherit;
-  padding: 0;
-}
+  .unset:where(th) {
+    font-weight: unset;
+    text-align: inherit;
+    padding: 0;
+  }
 
-.unset:where(abbr, acronym) {
-  text-decoration: none;
-}
+  .unset:where(abbr, acronym) {
+    text-decoration: none;
+  }
 
-.unset:where(canvas, object, picture, summary) {
-  display: block;
-}
+  .unset:where(canvas, object, picture, summary) {
+    display: block;
+  }
 
-.unset:where(del, s) {
-  -webkit-text-decoration: unset;
-  text-decoration: unset;
-}
+  .unset:where(del, s) {
+    -webkit-text-decoration: unset;
+    text-decoration: unset;
+  }
 
-.unset:where(fieldset, hr) {
-  all: unset;
-  display: block;
-}
+  .unset:where(fieldset, hr) {
+    all: unset;
+    display: block;
+  }
 
-.unset:where(legend) {
-  cursor: default;
-  border: none;
-  padding: 0;
-}
+  .unset:where(legend) {
+    cursor: default;
+    border: none;
+    padding: 0;
+  }
 
-.unset:where(li) {
-  text-align: unset;
-  display: block;
-}
+  .unset:where(li) {
+    text-align: unset;
+    display: block;
+  }
 
-.unset:where(ol, ul) {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
+  .unset:where(ol, ul) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
 
-.unset:where(iframe) {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  border: none;
-  width: stretch;
-  display: block;
-}
+  .unset:where(iframe) {
+    width: -webkit-fill-available;
+    width: -moz-available;
+    border: none;
+    width: stretch;
+    display: block;
+  }
 
-.unset:where(ins, u) {
-  text-decoration: none;
-}
+  .unset:where(ins, u) {
+    text-decoration: none;
+  }
 
-.unset:where(img) {
-  max-width: 100%;
-  display: block;
-}
+  .unset:where(img) {
+    max-width: 100%;
+    display: block;
+  }
 
-.unset:where(svg) {
-  flex-shrink: 0;
-  max-width: 100%;
-  display: block;
-}
+  .unset:where(svg) {
+    flex-shrink: 0;
+    max-width: 100%;
+    display: block;
+  }
 
-.unset:where(mark) {
-  all: unset;
-}
+  .unset:where(mark) {
+    all: unset;
+  }
 
-.unset:where(pre) {
-  font: unset;
-  margin: unset;
-}
+  .unset:where(pre) {
+    font: unset;
+    margin: unset;
+  }
 
-.unset:where(q):before, .unset:where(q):after {
-  content: "";
-}
+  .unset:where(q):before, .unset:where(q):after {
+    content: "";
+  }
 
-.unset:where(sub, sup) {
-  font: unset;
-  vertical-align: unset;
-}
+  .unset:where(sub, sup) {
+    font: unset;
+    vertical-align: unset;
+  }
 
-.unset:where(details) ::marker {
-  content: none;
-}
+  .unset:where(details) ::marker {
+    content: none;
+  }
 
-.unset:where(summary)::marker {
-  content: none;
-}
+  .unset:where(summary)::marker {
+    content: none;
+  }
 
-.unset:where(video) {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: block;
-}
+  .unset:where(video) {
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: stretch;
+    display: block;
+  }
 
-.unset:where(:any-link) {
-  cursor: var(--cursor-link);
-}
+  .unset:where(:any-link) {
+    cursor: var(--cursor-link);
+  }
 
-.unset:where(button) {
-  cursor: var(--cursor-button);
-}
+  .unset:where(button) {
+    cursor: var(--cursor-button);
+  }
 
-.unset:where(:disabled, [data-disabled]) {
-  cursor: var(--cursor-disabled);
-}
+  .unset:where(:disabled, [data-disabled]) {
+    cursor: var(--cursor-disabled);
+  }
 
-.unset:where(input[type="checkbox"]) {
-  cursor: var(--cursor-checkbox);
-}
+  .unset:where(input[type="checkbox"]) {
+    cursor: var(--cursor-checkbox);
+  }
 
-.unset:where(input[type="radio"]) {
-  cursor: var(--cursor-radio);
-}
+  .unset:where(input[type="radio"]) {
+    cursor: var(--cursor-radio);
+  }
 
-.unset, .unset:before, .unset:after {
-  box-sizing: border-box;
+  .unset, .unset:before, .unset:after {
+    box-sizing: border-box;
+  }
 }