elements-kit 0.20.0 → 0.21.0

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

@@ -0,0 +1,328 @@
+import { ATTRIBUTES, observedAttributes } from "../../attributes.mjs";
+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";
+//#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
+//#region src/ui/otp-input/otp-input.ts
+function toggleAttr(el, name, on) {
+	if (on) el.setAttribute(name, "");
+	else el.removeAttribute(name);
+}
+const SHADOW_SHEET = typeof CSSStyleSheet === "undefined" ? null : new CSSStyleSheet();
+SHADOW_SHEET?.replaceSync(otp_input_shadow_default);
+/**
+* `<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>
+* ```
+*/
+var XOtpInput = class XOtpInput extends HTMLElement {
+	static formAssociated = true;
+	static [ATTRIBUTES] = {
+		value(value) {
+			this.value = value ?? "";
+		},
+		maxlength(value) {
+			this.maxLength = value == null ? 6 : Math.max(1, Number(value) || 6);
+		},
+		disabled(value) {
+			this.disabled = value != null;
+		},
+		required(value) {
+			this.required = value != null;
+		},
+		pattern(value) {
+			this.pattern = value;
+		},
+		inputmode(value) {
+			this.#inputMode(value ?? "text");
+		}
+	};
+	static observedAttributes = observedAttributes(XOtpInput);
+	attributeChangedCallback(name, oldValue, newValue) {
+		XOtpInput[ATTRIBUTES][name]?.call(this, newValue, oldValue);
+	}
+	#value = signal("");
+	get value() {
+		return this.#value();
+	}
+	set value(v) {
+		this.#value(v ?? "");
+	}
+	#maxLength = signal(6);
+	get maxLength() {
+		return this.#maxLength();
+	}
+	set maxLength(v) {
+		this.#maxLength(v);
+	}
+	#disabled = signal(false);
+	get disabled() {
+		return this.#disabled();
+	}
+	set disabled(v) {
+		this.#disabled(v);
+	}
+	#required = signal(false);
+	get required() {
+		return this.#required();
+	}
+	set required(v) {
+		this.#required(v);
+	}
+	#pattern = signal(null);
+	get pattern() {
+		return this.#pattern();
+	}
+	set pattern(v) {
+		this.#pattern(v);
+	}
+	get name() {
+		return this.getAttribute("name") ?? "";
+	}
+	set name(v) {
+		if (v == null || v === "") this.removeAttribute("name");
+		else this.setAttribute("name", v);
+	}
+	/** Optional transform applied to pasted text before validation. */
+	pasteTransformer = null;
+	#internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
+	#shadow = this.attachShadow({ mode: "open" });
+	#input = null;
+	#unmount = null;
+	#focused = signal(false);
+	#selStart = signal(null);
+	#selEnd = signal(null);
+	#inputMode = signal("text");
+	#prevValue = "";
+	#regex = computed(() => {
+		const p = this.pattern;
+		if (!p) return null;
+		try {
+			return new RegExp(p, "u");
+		} catch {
+			return null;
+		}
+	});
+	connectedCallback() {
+		if (SHADOW_SHEET) this.#shadow.adoptedStyleSheets = [SHADOW_SHEET];
+		if (!this.#shadow.querySelector("slot")) this.#shadow.append(document.createElement("slot"));
+		this.#unmount?.();
+		this.#unmount = render(this.#shadow, () => this.#renderField());
+	}
+	disconnectedCallback() {
+		this.#unmount?.();
+		this.#unmount = null;
+		this.#input = null;
+	}
+	formResetCallback() {
+		this.value = "";
+	}
+	formStateRestoreCallback(state) {
+		this.value = typeof state === "string" ? state : "";
+	}
+	formDisabledCallback(disabled) {
+		this.disabled = disabled;
+	}
+	get validity() {
+		return this.#internals?.validity ?? null;
+	}
+	/** Build the overlay input and wire all reactive state + listeners. */
+	#renderField() {
+		const input = document.createElement("input");
+		input.className = "x-otp-input__field";
+		input.type = "text";
+		input.autocomplete = "one-time-code";
+		input.setAttribute("autocapitalize", "none");
+		input.spellcheck = false;
+		this.#input = input;
+		effect(() => {
+			input.inputMode = this.#inputMode();
+			input.maxLength = this.maxLength;
+			input.disabled = this.disabled;
+			const label = this.getAttribute("aria-label");
+			if (label) input.setAttribute("aria-label", label);
+		});
+		effect(() => {
+			const v = this.value;
+			if (input.value !== v) input.value = v;
+			this.#prevValue = v;
+			this.#internals?.setFormValue(v);
+			this.#updateValidity();
+		});
+		effect(() => {
+			const value = this.value;
+			const focused = this.#focused();
+			const s = this.#selStart();
+			const e = this.#selEnd();
+			const max = this.maxLength;
+			const disabled = this.disabled;
+			for (const slot of this.querySelectorAll("x-otp-slot")) {
+				const i = Number(slot.getAttribute("index")) || 0;
+				const char = value[i];
+				slot.textContent = char ?? "";
+				const hasSel = focused && s !== null && e !== null;
+				const caretCell = hasSel && s === e && i === Math.min(s, max - 1);
+				const inRange = hasSel && s !== e && i >= s && i < e;
+				toggleAttr(slot, "data-active", caretCell);
+				toggleAttr(slot, "data-selected", inRange);
+				toggleAttr(slot, "data-caret", caretCell && char == null);
+				toggleAttr(slot, "data-disabled", disabled);
+			}
+		});
+		on(input, "input", () => this.#commit());
+		on(input, "keydown", (e) => this.#onKeydown(e));
+		on(input, "focus", () => this.#onFocus());
+		on(input, "blur", () => this.#focused(false));
+		on(input, "paste", (e) => this.#onPaste(e));
+		on(input, "selectionchange", () => this.#syncSelection());
+		on(input, "keyup", () => this.#syncSelection());
+		on(input, "pointerup", () => this.#syncSelection());
+		on(input, "select", () => this.#syncSelection());
+		if (this.hasAttribute("autofocus")) input.focus();
+		return input;
+	}
+	#charOk(ch) {
+		const r = this.#regex();
+		return !r || r.test(ch);
+	}
+	/** Filter to accepted characters and clamp to `maxLength`. */
+	#sanitize(raw) {
+		let out = "";
+		for (const ch of raw) {
+			if (out.length >= this.maxLength) break;
+			if (this.#charOk(ch)) out += ch;
+		}
+		return out;
+	}
+	#commit() {
+		const input = this.#input;
+		if (!input) return;
+		const next = this.#sanitize(input.value);
+		if (input.value !== next) input.value = next;
+		const prev = this.#prevValue;
+		if (next === prev) {
+			this.#syncSelection();
+			return;
+		}
+		this.value = next;
+		this.#syncSelection();
+		this.dispatchEvent(new Event("input", { bubbles: true }));
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+		if (prev.length < this.maxLength && next.length === this.maxLength) this.dispatchEvent(new CustomEvent("complete", {
+			detail: next,
+			bubbles: true
+		}));
+	}
+	#onKeydown(e) {
+		if (e.metaKey || e.ctrlKey || e.altKey) return;
+		if (e.key.length === 1 && !this.#charOk(e.key)) e.preventDefault();
+	}
+	#onFocus() {
+		this.#focused(true);
+		const input = this.#input;
+		if (input) {
+			const end = input.value.length;
+			input.setSelectionRange(end, end);
+		}
+		this.#syncSelection();
+	}
+	#onPaste(e) {
+		e.preventDefault();
+		const input = this.#input;
+		if (!input) return;
+		const raw = e.clipboardData?.getData("text") ?? "";
+		const text = this.pasteTransformer ? this.pasteTransformer(raw) : raw;
+		const start = input.selectionStart ?? this.value.length;
+		const end = input.selectionEnd ?? start;
+		const merged = this.value.slice(0, start) + text + this.value.slice(end);
+		const next = this.#sanitize(merged);
+		input.value = next;
+		const caret = Math.min(next.length, this.maxLength);
+		input.setSelectionRange(caret, caret);
+		this.#commit();
+	}
+	#syncSelection() {
+		const input = this.#input;
+		if (!input) return;
+		this.#selStart(input.selectionStart);
+		this.#selEnd(input.selectionEnd);
+	}
+	#updateValidity() {
+		const internals = this.#internals;
+		if (!internals) return;
+		const v = this.value;
+		if (this.required && v.length === 0) internals.setValidity({ valueMissing: true }, "Please fill out this field.");
+		else if (v.length > 0 && v.length < this.maxLength) internals.setValidity({ tooShort: true }, `Please enter all ${this.maxLength} characters.`);
+		else internals.setValidity({});
+	}
+};
+if (isBrowser && !customElements.get("x-otp-input")) customElements.define("x-otp-input", XOtpInput);
+//#endregion
+//#region src/ui/otp-input/otp-slot.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.
+*/
+var XOtpSlot = class extends HTMLElement {
+	connectedCallback() {
+		this.setAttribute("aria-hidden", "true");
+	}
+};
+if (isBrowser && !customElements.get("x-otp-slot")) customElements.define("x-otp-slot", XOtpSlot);
+//#endregion
+//#region src/ui/otp-input/otp-group.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.
+*/
+var XOtpGroup = class extends HTMLElement {
+	connectedCallback() {
+		if (!this.hasAttribute("role")) this.setAttribute("role", "group");
+	}
+};
+if (isBrowser && !customElements.get("x-otp-group")) customElements.define("x-otp-group", XOtpGroup);
+//#endregion
+//#region src/ui/otp-input/otp-separator.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.
+*/
+var XOtpSeparator = class extends HTMLElement {
+	connectedCallback() {
+		this.setAttribute("aria-hidden", "true");
+	}
+};
+if (isBrowser && !customElements.get("x-otp-separator")) customElements.define("x-otp-separator", XOtpSeparator);
+//#endregion
+export { XOtpGroup, XOtpInput, XOtpSeparator, XOtpSlot };

package/dist/ui/otp-input/otp-input.css

@@ -0,0 +1,157 @@
+x-otp-input {
+  align-items: center;
+  gap: var(--space-3);
+  vertical-align: top;
+  font-family: var(--default-font-family);
+  color: var(--neutral-12);
+  --otp-cell-height: var(--space-6);
+  --otp-cell-radius: var(--radius-2);
+  --otp-cell-font: var(--font-size-3);
+  --otp-border-width: 1px;
+  --otp-border-color: var(--neutral-a7);
+  --otp-focus-color: var(--focus-8);
+  --otp-surface: var(--color-surface);
+  display: inline-flex;
+  position: relative;
+}
+
+x-otp-input:where([data-size="1"]) {
+  --otp-cell-height: var(--space-5);
+  --otp-cell-radius: var(--radius-2);
+  --otp-cell-font: var(--font-size-2);
+  gap: var(--space-2);
+}
+
+x-otp-input:where([data-size="3"]) {
+  --otp-cell-height: var(--space-7);
+  --otp-cell-radius: var(--radius-3);
+  --otp-cell-font: var(--font-size-4);
+}
+
+x-otp-group {
+  isolation: isolate;
+  align-items: stretch;
+  display: inline-flex;
+}
+
+x-otp-slot {
+  z-index: 0;
+  box-sizing: border-box;
+  height: var(--otp-cell-height);
+  min-width: calc(var(--otp-cell-height) * .9);
+  padding-inline: calc(var(--otp-cell-height) * .28);
+  font-size: var(--otp-cell-font);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  -webkit-user-select: none;
+  user-select: none;
+  background-color: var(--otp-surface);
+  border: var(--otp-border-width) solid var(--otp-border-color);
+  border-radius: var(--otp-cell-radius);
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  display: inline-flex;
+  position: relative;
+}
+
+x-otp-group > x-otp-slot:not(:last-child) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+x-otp-group > x-otp-slot:not(:first-child) {
+  border-inline-start-width: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+x-otp-slot:where([data-active]) {
+  z-index: 1;
+  box-shadow: 0 0 0 2px var(--otp-focus-color);
+  border-width: 0;
+}
+
+x-otp-slot:where([data-selected]) {
+  z-index: 1;
+  background-color: var(--accent-a4);
+}
+
+x-otp-slot:where([data-disabled]) {
+  color: var(--neutral-a8);
+  background-color: var(--neutral-a2);
+  border-color: var(--neutral-a6);
+}
+
+x-otp-slot:where([data-caret]):after {
+  content: "";
+  background-color: var(--neutral-12);
+  width: 1px;
+  height: 1.1em;
+  animation: 1s step-start infinite x-otp-caret-blink;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes x-otp-caret-blink {
+  0%, 49% {
+    opacity: 1;
+  }
+
+  50%, 100% {
+    opacity: 0;
+  }
+}
+
+x-otp-separator {
+  color: var(--neutral-a8);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+x-otp-separator:where(:empty):before {
+  content: "";
+  width: var(--space-3);
+  border-radius: var(--radius-thumb);
+  background-color: currentColor;
+  height: 2px;
+}
+
+x-otp-input:where([data-variant="soft"]) {
+  --otp-border-width: 0px;
+  --otp-focus-color: var(--accent-8);
+}
+
+x-otp-input:where([data-variant="soft"]) x-otp-slot {
+  background-color: var(--accent-a3);
+  color: var(--accent-12);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  x-otp-slot:where([data-caret]):after {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  x-otp-slot {
+    border-color: buttontext;
+  }
+
+  x-otp-slot:where([data-active]) {
+    outline-offset: -2px;
+    outline: 2px solid highlight;
+  }
+
+  x-otp-slot:where([data-selected]) {
+    color: highlighttext;
+    background-color: highlight;
+  }
+
+  x-otp-slot:where([data-caret]):after {
+    background-color: canvastext;
+  }
+}

package/dist/ui/overlay/index.css

@@ -19,14 +19,56 @@
 .x-overlay {
   top: var(--_ct);
   left: var(--_cl);
-  translate: calc(-50% + var(--_ex, 0px) + var(--overlay-dx, 0px) +
+  translate: calc(-50% + var(--overlay-dx, 0px) +
         clamp(50%,
           var(--overlay-x, calc(var(--_cw) / 2)),
           calc(-50% + var(--_cw))))
-    calc(-50% + var(--_ey, 0px) + var(--overlay-dy, 0px) +
+    calc(-50% + var(--overlay-dy, 0px) +
         clamp(50%,
           var(--overlay-y, calc(var(--_ch) / 2)),
           calc(-50% + var(--_ch))));
+  transform: translate(var(--_ex, 0px), var(--_ey, 0px));
+  bottom: auto;
+  right: auto;
+}
+
+@supports (anchor-name: --x) and (position-area: block-end) {
+  .x-overlay[data-anchor="element"] {
+    translate: var(--overlay-dx, 0px) var(--overlay-dy, 0px);
+    position-area: var(--overlay-area, block-end);
+    position-try-fallbacks: flip-block, flip-inline;
+    position-visibility: anchors-visible;
+    margin: var(--overlay-gap, var(--space-2));
+    top: auto;
+    left: auto;
+  }
+}
+
+.x-overlay-anchor {
+  pointer-events: none;
+  width: 0;
+  height: 0;
+  transition: top var(--overlay-duration, .3s)
+      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1)),
+    left var(--overlay-duration, .3s)
+      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1)),
+    width var(--overlay-duration, .3s)
+      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1)),
+    height var(--overlay-duration, .3s)
+      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1));
+  position: fixed;
+}
+
+@supports (anchor-name: --x) and (position-area: block-end) {
+  .x-overlay-anchor[data-follow] {
+    top: anchor(top);
+    left: anchor(left);
+    width: anchor-size(width);
+    height: anchor-size(height);
+  }
+}
+
+.x-overlay {
   --overlay-width: 480px;
   width: var(--overlay-w, var(--overlay-width));
   max-width: var(--_cw);
@@ -37,9 +79,10 @@
   transition: top var(--overlay-duration) var(--overlay-easing),
     left var(--overlay-duration) var(--overlay-easing),
     translate var(--overlay-duration) var(--overlay-easing),
+    transform var(--overlay-duration) var(--overlay-easing),
     width var(--overlay-duration) var(--overlay-easing),
     height var(--overlay-duration) var(--overlay-easing);
-  grid-template-rows: minmax(0, 1fr);
+  flex-direction: column;
 }
 
 .x-overlay:not([open], :popover-open) {
@@ -51,7 +94,12 @@
 }
 
 .x-overlay:where([open], :popover-open) {
-  display: grid;
+  display: flex;
+}
+
+.x-overlay > .x-card {
+  flex: auto;
+  min-height: 0;
 }
 
 @supports not (translate: 0px) {