elements-kit 0.20.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/badge/badge.css

@@ -19,7 +19,7 @@
   border-radius: max(var(--radius-1), var(--radius-pill));
 }
 
-.x-badge:where([data-size="2"]) {
+.x-badge:where([data-size="2"], :not([data-size])) {
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
   letter-spacing: var(--letter-spacing-1);
@@ -37,22 +37,22 @@
   border-radius: max(var(--radius-2), var(--radius-pill));
 }
 
-.x-badge:where([data-variant="solid"]) {
+.x-badge:where(:not([data-variant]), [data-variant="solid"]) {
   background-color: var(--accent-9);
   color: var(--accent-contrast);
 }
 
-.x-badge:where([data-variant="solid"])::selection {
+.x-badge:where(:not([data-variant]), [data-variant="solid"])::selection {
   background-color: var(--accent-7);
   color: var(--accent-12);
 }
 
-.x-badge:where([data-variant="solid"]):where([data-high-contrast]) {
+.x-badge:where(:not([data-variant]), [data-variant="solid"]):where([data-high-contrast]) {
   background-color: var(--accent-12);
   color: var(--accent-1);
 }
 
-.x-badge:where([data-variant="solid"]):where([data-high-contrast])::selection {
+.x-badge:where(:not([data-variant]), [data-variant="solid"]):where([data-high-contrast])::selection {
   background-color: var(--accent-a11);
   color: var(--accent-1);
 }

package/dist/ui/button/button.css

@@ -33,7 +33,7 @@
   border-radius: max(var(--radius-1), var(--radius-pill));
 }
 
-.x-button:where([data-size="2"]) {
+.x-button:where([data-size="2"], :not([data-size])) {
   --base-button-height: var(--space-6);
   border-radius: max(var(--radius-2), var(--radius-pill));
 }
@@ -64,61 +64,61 @@
     saturate(1.2);
 }
 
-.x-button:where([data-variant="solid"]) {
+.x-button:where(:not([data-variant]), [data-variant="solid"]) {
   background-color: var(--accent-9);
   color: var(--accent-contrast);
 }
 
 @media (hover: hover) {
-  .x-button:where([data-variant="solid"]):where(:hover) {
+  .x-button:where(:not([data-variant]), [data-variant="solid"]):where(:hover) {
     background-color: var(--accent-10);
   }
 }
 
-.x-button:where([data-variant="solid"]):where([data-state="open"]) {
+.x-button:where(:not([data-variant]), [data-variant="solid"]):where([data-state="open"]) {
   background-color: var(--accent-10);
 }
 
-.x-button:where([data-variant="solid"]):where(:active:not([data-state="open"])) {
+.x-button:where(:not([data-variant]), [data-variant="solid"]):where(:active:not([data-state="open"])) {
   background-color: var(--accent-10);
   filter: var(--base-button-solid-active-filter);
 }
 
 @media (pointer: coarse) {
-  .x-button:where([data-variant="solid"]):where(:active:not([data-state="open"])) {
+  .x-button:where(:not([data-variant]), [data-variant="solid"]):where(:active:not([data-state="open"])) {
     outline: .5em solid var(--accent-a4);
     outline-offset: 0;
   }
 }
 
-.x-button:where([data-variant="solid"]):where(:focus-visible) {
+.x-button:where(:not([data-variant]), [data-variant="solid"]):where(:focus-visible) {
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
 }
 
-.x-button:where([data-variant="solid"]):where([data-high-contrast]) {
+.x-button:where(:not([data-variant]), [data-variant="solid"]):where([data-high-contrast]) {
   background-color: var(--accent-12);
   color: var(--neutral-1);
 }
 
 @media (hover: hover) {
-  .x-button:where([data-variant="solid"]):where([data-high-contrast]):where(:hover) {
+  .x-button:where(:not([data-variant]), [data-variant="solid"]):where([data-high-contrast]):where(:hover) {
     background-color: var(--accent-12);
     filter: var(--base-button-solid-high-contrast-hover-filter);
   }
 }
 
-.x-button:where([data-variant="solid"]):where([data-high-contrast]):where([data-state="open"]) {
+.x-button:where(:not([data-variant]), [data-variant="solid"]):where([data-high-contrast]):where([data-state="open"]) {
   background-color: var(--accent-12);
   filter: var(--base-button-solid-high-contrast-hover-filter);
 }
 
-.x-button:where([data-variant="solid"]):where([data-high-contrast]):where(:active:not([data-state="open"])) {
+.x-button:where(:not([data-variant]), [data-variant="solid"]):where([data-high-contrast]):where(:active:not([data-state="open"])) {
   background-color: var(--accent-12);
   filter: var(--base-button-solid-high-contrast-active-filter);
 }
 
-.x-button:where([data-variant="solid"]):where([data-disabled], :disabled) {
+.x-button:where(:not([data-variant]), [data-variant="solid"]):where([data-disabled], :disabled) {
   color: var(--neutral-a8);
   background-color: var(--neutral-a3);
   filter: none;
@@ -308,19 +308,19 @@
   --button-text-padding-y: var(--space-1);
 }
 
-.x-button:where([data-size="2"]) {
+.x-button:where([data-size="2"], :not([data-size])) {
   gap: var(--space-2);
   font-size: var(--font-size-2);
   line-height: var(--line-height-2);
   letter-spacing: var(--letter-spacing-2);
 }
 
-.x-button:where([data-size="2"]):where(:not([data-variant="text"])) {
+.x-button:where([data-size="2"], :not([data-size])):where(:not([data-variant="text"])) {
   padding-left: var(--space-3);
   padding-right: var(--space-3);
 }
 
-.x-button:where([data-size="2"]):where([data-variant="text"]) {
+.x-button:where([data-size="2"], :not([data-size])):where([data-variant="text"]) {
   gap: var(--space-1);
   --button-text-padding-x: var(--space-2);
   --button-text-padding-y: var(--space-1);

package/dist/ui/card/card.css

@@ -56,7 +56,7 @@
   --card-border-radius: var(--radius-6);
 }
 
-:where([data-neutral]) {
+:where(:root), :where([data-neutral]) {
   --card-surface-box-shadow: 0 0 0 1px var(--neutral-a5);
   --card-surface-hover-box-shadow: 0 0 0 1px var(--neutral-a7);
   --card-surface-active-box-shadow: 0 0 0 1px var(--neutral-a6);
@@ -81,7 +81,7 @@
 }
 
 @supports (color: color-mix(in oklab, white, black)) {
-  :where([data-neutral]) {
+  :where(:root), :where([data-neutral]) {
     --card-surface-box-shadow: 0 0 0 1px
       color-mix(in oklab, var(--neutral-a5), var(--neutral-5) 25%);
     --card-surface-hover-box-shadow: 0 0 0 1px

package/dist/ui/group/group.css

@@ -0,0 +1,61 @@
+.x-group {
+  vertical-align: top;
+  isolation: isolate;
+  align-items: stretch;
+  display: inline-flex;
+}
+
+.x-group > :is(.x-text-input, .x-select) {
+  flex: auto;
+  min-width: 0;
+}
+
+.x-group > :is(.x-button, .x-text-input, .x-select, .x-toggle) {
+  z-index: 0;
+  position: relative;
+}
+
+.x-group > :is(.x-button, .x-text-input, .x-select, .x-toggle):where(:hover, :focus-within) {
+  z-index: 1;
+}
+
+.x-group > :is(.x-button, .x-text-input, .x-select, .x-toggle):not(:first-child) {
+  margin-inline-start: -1px;
+}
+
+.x-group > :is(.x-button, .x-text-input, .x-select, .x-toggle):not(:last-child) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.x-group > :is(.x-button, .x-text-input, .x-select, .x-toggle):not(:first-child) {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.x-group > .x-text-input:not(:last-child) > input {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.x-group > .x-text-input:not(:first-child) > input {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.x-group > .x-button[data-variant="solid"] + .x-button[data-variant="solid"] {
+  box-shadow: inset 1px 0 0 0
+    color-mix(in srgb, var(--accent-contrast) 20%, transparent);
+}
+
+[dir="rtl"] .x-group > .x-button[data-variant="solid"] + .x-button[data-variant="solid"] {
+  box-shadow: inset -1px 0 0 0
+    color-mix(in srgb, var(--accent-contrast) 20%, transparent);
+}
+
+@media (forced-colors: active) {
+  .x-group > :is(.x-button, .x-text-input, .x-select, .x-toggle):not(:first-child) {
+    border-inline-start: 1px solid buttontext;
+    margin-inline-start: 0;
+  }
+}

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

@@ -0,0 +1,132 @@
+import { n as AttrChangeHandler, t as ATTRIBUTES } from "../../attributes-DILeh3-s.mjs";
+
+//#region src/ui/otp-input/otp-input.d.ts
+/**
+ * `<x-otp-input>` — segmented one-time-passcode / pin input.
+ *
+ * A single transparent `<input>` (rendered into the shadow root) overlays the
+ * author-composed cells and owns all keyboard / pointer / paste / mobile
+ * autofill behavior. The cells (`<x-otp-slot>`, projected through a `<slot>`)
+ * are a purely visual layer whose active cell + fake caret are mirrored from
+ * the input's selection. Because it is one field there is no roving tabindex
+ * and a screen reader perceives a single textbox.
+ *
+ * Form-associated: submits under the host `name`, participates in
+ * reset / restore / disabled, and reports `valueMissing` / `tooShort`.
+ *
+ * ```html
+ * <x-otp-input name="code" maxlength="6" pattern="[0-9]" aria-label="Code">
+ *   <x-otp-group>
+ *     <x-otp-slot index="0"></x-otp-slot>
+ *     <x-otp-slot index="1"></x-otp-slot>
+ *     <x-otp-slot index="2"></x-otp-slot>
+ *   </x-otp-group>
+ *   <x-otp-separator></x-otp-separator>
+ *   <x-otp-group>
+ *     <x-otp-slot index="3"></x-otp-slot>
+ *     <x-otp-slot index="4"></x-otp-slot>
+ *     <x-otp-slot index="5"></x-otp-slot>
+ *   </x-otp-group>
+ * </x-otp-input>
+ * ```
+ */
+declare class XOtpInput extends HTMLElement {
+  #private;
+  static formAssociated: boolean;
+  static [ATTRIBUTES]: {
+    value(this: XOtpInput, value: string | null): void;
+    maxlength(this: XOtpInput, value: string | null): void;
+    disabled(this: XOtpInput, value: string | null): void;
+    required(this: XOtpInput, value: string | null): void;
+    pattern(this: XOtpInput, value: string | null): void;
+    inputmode(this: XOtpInput, value: string | null): void;
+  };
+  static observedAttributes: string[];
+  static events: {
+    complete: CustomEvent<string>;
+  };
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+  get value(): string;
+  set value(v: string);
+  get maxLength(): number;
+  set maxLength(v: number);
+  get disabled(): boolean;
+  set disabled(v: boolean);
+  get required(): boolean;
+  set required(v: boolean);
+  get pattern(): string | null;
+  set pattern(v: string | null);
+  get name(): string;
+  set name(v: string);
+  /** Optional transform applied to pasted text before validation. */
+  pasteTransformer: ((text: string) => string) | null;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  formResetCallback(): void;
+  formStateRestoreCallback(state: unknown): void;
+  formDisabledCallback(disabled: boolean): void;
+  get validity(): ValidityState | null;
+}
+declare global {
+  namespace ElementsKit {
+    interface CustomElementRegistry {
+      "x-otp-input": typeof XOtpInput;
+    }
+  }
+}
+//#endregion
+//#region src/ui/otp-input/otp-slot.d.ts
+/**
+ * `<x-otp-slot index="N">` — one visual cell of an `<x-otp-input>`. Purely
+ * presentational: `aria-hidden`, no focus, no value of its own. The parent
+ * `<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 {
+  static [ATTRIBUTES]: {
+    index: AttrChangeHandler<XOtpSlot>;
+  };
+  connectedCallback(): void;
+}
+declare global {
+  namespace ElementsKit {
+    interface CustomElementRegistry {
+      "x-otp-slot": typeof XOtpSlot;
+    }
+  }
+}
+//#endregion
+//#region src/ui/otp-input/otp-group.d.ts
+/**
+ * `<x-otp-group>` — presentational container that joins a run of
+ * `<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 {
+  connectedCallback(): void;
+}
+declare global {
+  namespace ElementsKit {
+    interface CustomElementRegistry {
+      "x-otp-group": typeof XOtpGroup;
+    }
+  }
+}
+//#endregion
+//#region src/ui/otp-input/otp-separator.d.ts
+/**
+ * `<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 {
+  connectedCallback(): void;
+}
+declare global {
+  namespace ElementsKit {
+    interface CustomElementRegistry {
+      "x-otp-separator": typeof XOtpSeparator;
+    }
+  }
+}
+//#endregion
+export { XOtpGroup, XOtpInput, XOtpSeparator, XOtpSlot };