elements-kit 0.19.0 → 0.21.0

package/dist/{infer-B7T5hi_D.d.mts → types-CUvFIgPa.d.mts}

@@ -1,13 +1,10 @@
 import { n as AttrChangeHandler, t as ATTRIBUTES } from "./attributes-3r7Diua4.mjs";
-import { t as CustomElementRegistry } from "./custom-elements-D5CgfNKc.mjs";
-import { n as Slot, r as PrimitiveNodeType, t as SLOTS } from "./slot-B8y0aEoz.mjs";
+import { n as Slot, r as PrimitiveNodeType, t as SLOTS } from "./slot-BFWXeFRl.mjs";
+import { t as CustomElementRegistry } from "./custom-elements-BGcU6ldL.mjs";
 import { JSX } from "dom-expressions/src/jsx-h";
 
 //#region src/jsx-runtime/element.d.ts
-declare function createElement(type: string | Component, {
-  ref,
-  ...props
-}?: JSX$1.IntrinsicAttributes & Record<string, unknown>): JSX$1.Element;
+declare function createElement(type: string | Component, allProps?: JSX$1.IntrinsicAttributes & Record<string, unknown>): JSX$1.Element | null;
 //#endregion
 //#region src/signals/lib.d.ts
 declare const SIGNAL: unique symbol;
@@ -111,6 +108,19 @@ declare function computed<T>(getter: (previousValue?: T) => T): () => T;
  * stop();            // final cleanup: abort the last fetch
  * ```
  */
+/**
+ * @internal Method key for settling a reactive async wrapper from a
+ * serialized server snapshot (hydration seeding). Lives here so
+ * `utilities/promise`, `utilities/async` and `hydrate` can share it without
+ * a utility-to-utility dependency.
+ */
+declare const SEED: unique symbol;
+/**
+ * @internal Method key for the hydrate claim protocol: the claim walk hands
+ * each async wrapper its ek-data record (or undefined). The wrapper decides —
+ * seed and discard any deferred run, or execute the deferred run now.
+ */
+declare const CLAIM: unique symbol;
 declare function effect(fn: () => void): () => void;
 /**
  * Creates an ownership scope that groups reactive effects so they can all be
@@ -333,142 +343,8 @@ type MaybeReactive<T> = T | Computed<T>;
  * ```
  */
 declare function resolve<T>(value: MaybeReactive<T>): T;
-/**
- * Turn a reactive-props object into a bag of per-key getters. Callers may
- * pass values or reactive sources (`signal`, `computed`); reading
- * `props.name()` inside an effect or JSX getter subscribes to whatever
- * drives it. Static values become stable thunks, signals and computed pass
- * through unchanged — so identity is preserved (`props.name === props.name`).
- *
- * The JSX runtime auto-applies this to function-component props — call
- * directly only for non-JSX call sites or nested prop bags.
- *
- * @example
- * ```ts
- * import { resolveProps } from "elements-kit/signals";
- * import { signal } from "elements-kit/signals";
- *
- * const count = signal(0);
- * const props = resolveProps({ count, label: "n" });
- * props.count();   // 0 — subscribes to count
- * props.label();   // "n"
- * ```
- */
 declare function resolveProps<P extends object>(raw: { [K in keyof P]: MaybeReactive<P[K]> }): ReactiveProps<P>;
 //#endregion
-//#region src/jsx-runtime/fragment.d.ts
-/**
- * Used by the JSX transform for `<>...</>` fragments.
- *
- * Each child is routed through `mountChild`, which handles Nodes, strings,
- * numbers, arrays, and reactive getters — matching the behavior of any other
- * JSX container. `mountChild` also wires each child's cleanup via its own
- * `effectScope`, which links to the enclosing `effectScope` created by
- * `createElement(Fragment, ...)` for disposal propagation.
- */
-declare function Fragment(props: {
-  children?: () => Child;
-}): DocumentFragment;
-//#endregion
-//#region src/jsx-runtime/index.d.ts
-/**
- * Maps slot names to `Child` content.
- * Use this to type `slot:name` JSX props on a custom component.
- *
- * @example
- * ```tsx
- * function Card(props: { title: string } & SlotProps<"header" | "footer">) { … }
- * // caller: <Card title="…" slot:header={<h1>…</h1>} slot:footer={<p>…</p>} />
- * ```
- */
-type SlotProps<K extends string> = { [P in K as `slot:${P}`]?: Child };
-/**
- * Get the full JSX prop types for a given tag name, including reactive
- * attributes, events, and all our namespace extensions.
- *
- * @example
- * ```ts
- * type InputProps = Attrs<"input">;   // typed props for <input>
- * type DivProps   = Attrs<"div">;     // typed props for <div>
- * ```
- */
-type Attrs<K extends keyof JSX$1.IntrinsicElements> = JSX$1.IntrinsicElements[K];
-/**
- * Namespaced JSX props added by elements-kit on top of dom-expressions.
- * All four are tag-aware via the element type `E`.
- *
- * - `ref` — callback invoked with the mounted element, typed as the concrete
- *   element class for intrinsics and registered custom elements.
- * - `class:foo` — open string + `MaybeReactive<boolean>`. Class names are
- *   user-defined CSS so the key stays open (no autocomplete possible).
- * - `style:cssProp` — keys mapped from `DomJSX.CSSProperties` (csstype's
- *   hyphenated property names) for autocomplete; value typed per-property.
- * - `prop:K` — inferred from `keyof E`. On `<div>` exposes
- *   `prop:className`, `prop:id`, etc. (from `HTMLDivElement`); on a
- *   registered custom element exposes its public fields too.
- *
- * `slot:foo` is NOT here — it's emitted per-element via `SlotsOf<C>` only
- * for elements that declare `[SLOTS]`. Plain HTML intrinsics don't accept
- * slot props (the runtime ignores them).
- */
-type CssStyleKey = Extract<keyof JSX.CSSProperties, string> extends infer K ? K extends `-${string}` ? never : K : never;
-type StyleNamespace = { [K in CssStyleKey as `style:${K}`]?: MaybeReactive<JSX.CSSProperties[K] | null> };
-type PropNamespace<E> = { [K in keyof E as K extends string ? `prop:${K}` : never]?: MaybeReactive<E[K]> };
-type JsxNamespaces<E extends Element = Element> = {
-  ref?: (el: E) => void;
-  [cls: `class:${string}`]: MaybeReactive<boolean>;
-} & StyleNamespace & PropNamespace<E>;
-type XlinkAttrs = {
-  "xlink:href"?: MaybeReactive<string | undefined>;
-  "xlink:title"?: MaybeReactive<string | undefined>;
-  "xlink:show"?: MaybeReactive<"new" | "replace" | "embed" | "other" | "none" | undefined>;
-  "xlink:role"?: MaybeReactive<string | undefined>;
-  "xlink:type"?: MaybeReactive<"simple" | "extended" | "locator" | "arc" | "resource" | "title" | undefined>;
-  "xlink:arcrole"?: MaybeReactive<string | undefined>;
-  "xlink:actuate"?: MaybeReactive<"onLoad" | "onRequest" | "other" | "none" | undefined>;
-};
-type XmlAttrs = {
-  "xml:lang"?: MaybeReactive<string | undefined>;
-  "xml:space"?: MaybeReactive<"default" | "preserve" | undefined>;
-  "xml:base"?: MaybeReactive<string | undefined>;
-};
-type SvgNamespaceAttrs = XlinkAttrs & XmlAttrs;
-type JsxNamespaceKeys = "ref" | `class:${string}` | `style:${string}` | `prop:${string}`;
-type WithJsxNamespaces<T, E extends Element = Element> = Omit<T, JsxNamespaceKeys> & JsxNamespaces<E>;
-type IntrinsicElementOf<T> = T extends {
-  ref?: infer R | undefined;
-} ? Extract<R, (el: any) => any> extends ((el: infer E) => any) ? E : Element : Element;
-declare namespace JSX$1 {
-  export type Element = globalThis.Element | globalThis.DocumentFragment | null;
-  export type ElementType = Child | Component;
-  export interface ElementChildrenAttribute {
-    children: {};
-  }
-  export interface IntrinsicAttributes {
-    ref?: (el: Element) => void;
-  }
-  export type LibraryManagedAttributes<C, P> = ResolveProps<C, P>;
-  type RegisteredElements = { [K in keyof CustomElementRegistry]: CustomElementRegistry[K] extends infer C extends AnyElementCtor ? WithJsxNamespaces<MaybeReactiveProps<ElementProps<C>>, InstanceType<C>> : never };
-  export type IntrinsicElements = { [K in keyof JSX.IntrinsicElements]: WithJsxNamespaces<JSX.IntrinsicElements[K], IntrinsicElementOf<JSX.IntrinsicElements[K]>> & (IntrinsicElementOf<JSX.IntrinsicElements[K]> extends SVGElement ? SvgNamespaceAttrs : {}) } & RegisteredElements;
-  export {};
-}
-//#endregion
-//#region src/jsx-runtime/types.d.ts
-/** An instance created by a component class — must expose `render()`. */
-interface ComponentInstance {
-  render(): JSX$1.Element;
-}
-/** A class whose constructor returns a ComponentInstance. */
-type ComponentClass<P extends Record<PropertyKey, unknown> = any> = new (props: P) => ComponentInstance;
-type ComponentFn<P extends Record<PropertyKey, unknown> = any> = (props: ReactiveProps<P>) => JSX$1.Element;
-/** Anything valid as the first arg to `createElement` / a JSX tag target. */
-type Component = NonNullable<JSX$1.Element> | ComponentClass | ComponentFn;
-/** A resolved runtime node — what `applyProps` / `applyChildren` operate on. */
-type PropsTarget = NonNullable<JSX$1.Element> | ComponentInstance;
-/** Anything that can appear as a JSX child. */
-type Child = PrimitiveNodeType | JSX$1.Element | AnyFn | Child[];
-type AnyFn = (...args: any[]) => Child;
-//#endregion
 //#region src/jsx-runtime/infer.d.ts
 type AnyElementCtor = abstract new (...args: any[]) => HTMLElement;
 type Inst<C> = C extends (abstract new (...args: any[]) => infer I) ? I : never;
@@ -681,4 +557,127 @@ type ComponentProps<C extends ComponentClass<any>> = C extends ComponentClass<in
  */
 type Props<C> = (C extends (abstract new (...args: any[]) => infer I) ? MaybeReactiveProps<InstanceProps<I>> : C extends ((props: infer P, ...rest: any[]) => any) ? P extends object ? MaybeReactiveProps<RawProps<P>> : {} : MaybeReactiveProps<InstanceProps<C>>) & SlotsOf<C>;
 //#endregion
-export { SIGNAL as A, signal as B, isReactive as C, COMPUTED as D, resolveProps as E, isComputed as F, untracked as H, isEffect as I, isEffectScope as L, computed as M, effect as N, EFFECT as O, effectScope as P, isSignal as R, Updater as S, resolve as T, createElement as U, trigger as V, SlotProps as _, RawProps as a, MaybeReactive as b, ResolveProps as c, ComponentClass as d, ComponentFn as f, JSX$1 as g, Attrs as h, Props as i, batch as j, EFFECT_SCOPE as k, Child as l, PropsTarget as m, ElementProps as n, ReactiveProps as o, ComponentInstance as p, MaybeReactiveProps as r, Require as s, ComponentProps as t, Component as u, Fragment as v, reactive as w, Signal as x, Computed as y, onCleanup as z };
+//#region src/jsx-runtime/fragment.d.ts
+/**
+ * Used by the JSX transform for `<>...</>` fragments.
+ *
+ * Each child is routed through `mountChild`, which handles Nodes, strings,
+ * numbers, arrays, and reactive getters — matching the behavior of any other
+ * JSX container. `mountChild` also wires each child's cleanup via its own
+ * `effectScope`, which links to the enclosing `effectScope` created by
+ * `createElement(Fragment, ...)` for disposal propagation.
+ *
+ * **Raw HTML mode** — `<Fragment html>{markup}</Fragment>`: the child is a
+ * `MaybeReactive<string>` rendered as markup inside a Slot region (comment
+ * markers), so the server renderer and the hydration claim pass share the
+ * region boundary. Reactive sources re-render the region on change. This is
+ * the library's only raw-HTML sink: the string is NOT escaped — sanitize
+ * untrusted input at the call site. `<script>` tags never execute.
+ */
+declare function Fragment(props: Props<{
+  children: Child;
+}> | {
+  html: true;
+  children: MaybeReactive<string>;
+}): DocumentFragment;
+//#endregion
+//#region src/jsx-runtime/index.d.ts
+/**
+ * Maps slot names to `Child` content.
+ * Use this to type `slot:name` JSX props on a custom component.
+ *
+ * @example
+ * ```tsx
+ * function Card(props: { title: string } & SlotProps<"header" | "footer">) { … }
+ * // caller: <Card title="…" slot:header={<h1>…</h1>} slot:footer={<p>…</p>} />
+ * ```
+ */
+type SlotProps<K extends string> = { [P in K as `slot:${P}`]?: Child };
+/**
+ * Get the full JSX prop types for a given tag name, including reactive
+ * attributes, events, and all our namespace extensions.
+ *
+ * @example
+ * ```ts
+ * type InputProps = Attrs<"input">;   // typed props for <input>
+ * type DivProps   = Attrs<"div">;     // typed props for <div>
+ * ```
+ */
+type Attrs<K extends keyof JSX$1.IntrinsicElements> = JSX$1.IntrinsicElements[K];
+/**
+ * Namespaced JSX props added by elements-kit on top of dom-expressions.
+ * All four are tag-aware via the element type `E`.
+ *
+ * - `ref` — callback invoked with the mounted element, typed as the concrete
+ *   element class for intrinsics and registered custom elements.
+ * - `class:foo` — open string + `MaybeReactive<boolean>`. Class names are
+ *   user-defined CSS so the key stays open (no autocomplete possible).
+ * - `style:cssProp` — keys mapped from `DomJSX.CSSProperties` (csstype's
+ *   hyphenated property names) for autocomplete; value typed per-property.
+ * - `prop:K` — inferred from `keyof E`. On `<div>` exposes
+ *   `prop:className`, `prop:id`, etc. (from `HTMLDivElement`); on a
+ *   registered custom element exposes its public fields too.
+ *
+ * `slot:foo` is NOT here — it's emitted per-element via `SlotsOf<C>` only
+ * for elements that declare `[SLOTS]`. Plain HTML intrinsics don't accept
+ * slot props (the runtime ignores them).
+ */
+type CssStyleKey = Extract<keyof JSX.CSSProperties, string> extends infer K ? K extends `-${string}` ? never : K : never;
+type StyleNamespace = { [K in CssStyleKey as `style:${K}`]?: MaybeReactive<JSX.CSSProperties[K] | null> };
+type PropNamespace<E> = { [K in keyof E as K extends string ? `prop:${K}` : never]?: MaybeReactive<E[K]> };
+type JsxNamespaces<E extends Element = Element> = {
+  ref?: (el: E) => void;
+  [cls: `class:${string}`]: MaybeReactive<boolean>;
+} & StyleNamespace & PropNamespace<E>;
+type XlinkAttrs = {
+  "xlink:href"?: MaybeReactive<string | undefined>;
+  "xlink:title"?: MaybeReactive<string | undefined>;
+  "xlink:show"?: MaybeReactive<"new" | "replace" | "embed" | "other" | "none" | undefined>;
+  "xlink:role"?: MaybeReactive<string | undefined>;
+  "xlink:type"?: MaybeReactive<"simple" | "extended" | "locator" | "arc" | "resource" | "title" | undefined>;
+  "xlink:arcrole"?: MaybeReactive<string | undefined>;
+  "xlink:actuate"?: MaybeReactive<"onLoad" | "onRequest" | "other" | "none" | undefined>;
+};
+type XmlAttrs = {
+  "xml:lang"?: MaybeReactive<string | undefined>;
+  "xml:space"?: MaybeReactive<"default" | "preserve" | undefined>;
+  "xml:base"?: MaybeReactive<string | undefined>;
+};
+type SvgNamespaceAttrs = XlinkAttrs & XmlAttrs;
+type JsxNamespaceKeys = "ref" | `class:${string}` | `style:${string}` | `prop:${string}`;
+type WithJsxNamespaces<T, E extends Element = Element> = Omit<T, JsxNamespaceKeys> & JsxNamespaces<E>;
+type IntrinsicElementOf<T> = T extends {
+  ref?: infer R | undefined;
+} ? Extract<R, (el: any) => any> extends ((el: infer E) => any) ? E : Element : Element;
+declare namespace JSX$1 {
+  export type Element = globalThis.Element | globalThis.DocumentFragment;
+  export type ElementType = Child | Component;
+  export interface ElementChildrenAttribute {
+    children: {};
+  }
+  export interface IntrinsicAttributes {
+    ref?: (el: Element) => void;
+  }
+  export type LibraryManagedAttributes<C, P> = ResolveProps<C, P>;
+  type RegisteredElements = { [K in keyof CustomElementRegistry]: CustomElementRegistry[K] extends infer C extends AnyElementCtor ? WithJsxNamespaces<MaybeReactiveProps<ElementProps<C>>, InstanceType<C>> : never };
+  export type IntrinsicElements = { [K in keyof JSX.IntrinsicElements]: WithJsxNamespaces<JSX.IntrinsicElements[K], IntrinsicElementOf<JSX.IntrinsicElements[K]>> & (IntrinsicElementOf<JSX.IntrinsicElements[K]> extends SVGElement ? SvgNamespaceAttrs : {}) } & RegisteredElements;
+  export {};
+}
+//#endregion
+//#region src/jsx-runtime/types.d.ts
+/** An instance created by a component class — must expose `render()`. */
+interface ComponentInstance {
+  render(): JSX$1.Element | null;
+}
+/** A class whose constructor returns a ComponentInstance. */
+type ComponentClass<P extends Record<PropertyKey, unknown> = any> = new (props: P) => ComponentInstance;
+type ComponentFn<P extends Record<PropertyKey, unknown> = any> = (props: ReactiveProps<P>) => JSX$1.Element | null;
+/** Anything valid as the first arg to `createElement` / a JSX tag target. */
+type Component = JSX$1.Element | ComponentClass | ComponentFn;
+/** A resolved runtime node — what `applyProps` / `applyChildren` operate on. */
+type PropsTarget = JSX$1.Element | ComponentInstance;
+/** Anything that can appear as a JSX child. */
+type Child = PrimitiveNodeType | JSX$1.Element | AnyFn | Child[];
+type AnyFn = (...args: any[]) => Child;
+//#endregion
+export { EFFECT_SCOPE as A, isSignal as B, isReactive as C, CLAIM as D, resolveProps as E, effect as F, createElement as G, signal as H, effectScope as I, isComputed as L, SIGNAL as M, batch as N, COMPUTED as O, computed as P, isEffect as R, Updater as S, resolve as T, trigger as U, onCleanup as V, untracked as W, Require as _, ComponentInstance as a, MaybeReactive as b, JSX$1 as c, ComponentProps as d, ElementProps as f, ReactiveProps as g, RawProps as h, ComponentFn as i, SEED as j, EFFECT as k, SlotProps as l, Props as m, Component as n, PropsTarget as o, MaybeReactiveProps as p, ComponentClass as r, Attrs as s, Child as t, Fragment as u, ResolveProps as v, reactive as w, Signal as x, Computed as y, isEffectScope as z };

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/otp-input/index.d.mts

@@ -0,0 +1,132 @@
+import { n as AttrChangeHandler, t as ATTRIBUTES } from "../../attributes-3r7Diua4.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 };