elements-kit 0.20.0 → 0.21.0

package/dist/await.d.mts

@@ -1,4 +1,4 @@
-import { t as Child } from "./types-ncUK9rki.mjs";
+import { t as Child } from "./types-CUvFIgPa.mjs";
 
 //#region src/await.d.ts
 /** @internal Metadata stamped on an Await region getter (see claim walk). */

package/dist/{custom-elements-DK5VUcWA.d.mts → custom-elements-BGcU6ldL.d.mts}

@@ -19,10 +19,12 @@
  * }
  * ```
  */
+type RegisteredElementInstances = { [K in keyof ElementsKit.CustomElementRegistry]: ElementsKit.CustomElementRegistry[K] extends (abstract new (...args: any[]) => infer I) ? I : never };
 declare global {
   namespace ElementsKit {
     interface CustomElementRegistry {}
   }
+  interface HTMLElementTagNameMap extends RegisteredElementInstances {}
 }
 type CustomElementRegistry = ElementsKit.CustomElementRegistry;
 type AnyCtor = CustomElementConstructor;

package/dist/custom-elements.d.mts

@@ -1,2 +1,2 @@
-import { n as defineElement, t as CustomElementRegistry } from "./custom-elements-DK5VUcWA.mjs";
+import { n as defineElement, t as CustomElementRegistry } from "./custom-elements-BGcU6ldL.mjs";
 export { CustomElementRegistry, defineElement };

package/dist/for.d.mts

@@ -1,4 +1,4 @@
-import { _ as Require, m as Props } from "./types-ncUK9rki.mjs";
+import { _ as Require, m as Props } from "./types-CUvFIgPa.mjs";
 
 //#region src/for.d.ts
 type KeyFn<T> = (item: T, index: number) => string | number;

package/dist/integrations/react.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../types-ncUK9rki.mjs";
+import { y as Computed } from "../types-CUvFIgPa.mjs";
 
 //#region src/integrations/react.d.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-ncUK9rki.mjs";
+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 };

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-ncUK9rki.mjs";
+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";
 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/{types-ncUK9rki.d.mts → types-CUvFIgPa.d.mts}

@@ -1,10 +1,10 @@
 import { n as AttrChangeHandler, t as ATTRIBUTES } from "./attributes-3r7Diua4.mjs";
 import { n as Slot, r as PrimitiveNodeType, t as SLOTS } from "./slot-BFWXeFRl.mjs";
-import { t as CustomElementRegistry } from "./custom-elements-DK5VUcWA.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, allProps?: 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;
@@ -650,7 +650,7 @@ 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 Element = globalThis.Element | globalThis.DocumentFragment;
   export type ElementType = Child | Component;
   export interface ElementChildrenAttribute {
     children: {};
@@ -667,15 +667,15 @@ declare namespace JSX$1 {
 //#region src/jsx-runtime/types.d.ts
 /** An instance created by a component class — must expose `render()`. */
 interface ComponentInstance {
-  render(): JSX$1.Element;
+  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;
+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 = NonNullable<JSX$1.Element> | ComponentClass | ComponentFn;
+type Component = JSX$1.Element | ComponentClass | ComponentFn;
 /** A resolved runtime node — what `applyProps` / `applyChildren` operate on. */
-type PropsTarget = NonNullable<JSX$1.Element> | ComponentInstance;
+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;

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