elements-kit 0.23.0 → 0.24.0

package/dist/await.d.mts

@@ -1,4 +1,4 @@
-import { s as Props, t as Children } from "./children-BbHF-Dew.mjs";
+import { s as Props, t as Children } from "./children-CYLVeDZc.mjs";
 
 //#region src/await.d.ts
 /** @internal Metadata stamped on an Await region getter (see claim walk). */

package/dist/{children-BbHF-Dew.d.mts → children-CYLVeDZc.d.mts}

@@ -1,6 +1,6 @@
 import { n as AttrChangeHandler, t as ATTRIBUTES } from "./attributes-DILeh3-s.mjs";
 import { i as PropertiesOf, n as CustomElementRegistry, r as EventsOf } from "./custom-elements-CdpilMDu.mjs";
-import { r as MaybeReactive } from "./index-BR8XVkck.mjs";
+import { r as MaybeReactive } from "./index-CzKKJCCK.mjs";
 import * as CSS from "csstype";
 import { JSX } from "dom-expressions/src/jsx";
 

package/dist/{element-w3nDE2S5.mjs → element-FFqOLWQu.mjs}

@@ -396,6 +396,8 @@ function ensureFlatArray(raw) {
 function applyProps(node, props) {
 	const entries = Object.entries(props);
 	if (entries.length === 0) return;
+	const base = (k) => k === "class" || k === "style" ? 0 : 1;
+	entries.sort((a, b) => base(a[0]) - base(b[0]));
 	for (const [key, value] of entries) {
 		if (isChildrenProperty(node, key)) {
 			applyChildren(node, key, value);
@@ -432,8 +434,9 @@ function setProp(node, key, value) {
 				return;
 			}
 			if (ns === "style") {
-				if (value == null || value === false) node.style.removeProperty(name);
-				else node.style.setProperty(name, String(value));
+				const css = value == null || value === false ? null : String(value);
+				setStyleProperty(node, name, css);
+				nsStyles(node).set(name, css);
 				return;
 			}
 			return;
@@ -445,7 +448,7 @@ function setProp(node, key, value) {
 		}
 	}
 	if (key === "class") {
-		node.className = String(value ?? "");
+		applyClass(node, value);
 		return;
 	}
 	if (key === "style") {
@@ -474,11 +477,46 @@ function setProp(node, key, value) {
 	}
 	setAttribute(node, key, value);
 }
+/** Tokens the bare `class` prop last wrote, per element. */
+const ownedClasses = /* @__PURE__ */ new WeakMap();
+/**
+* Apply the bare `class` prop without clobbering `class:*` toggles. Assigning
+* `className` would drop them — and drop them again on every reactive update —
+* so only the tokens this prop owns are diffed. Matches the server renderer,
+* which merges `class` and `class:*` into one attribute.
+*/
+function applyClass(el, value) {
+	const next = String(value ?? "").split(/\s+/).filter(Boolean);
+	const prev = ownedClasses.get(el);
+	if (prev) {
+		for (const c of prev) if (!next.includes(c)) el.classList.remove(c);
+	}
+	for (const c of next) el.classList.add(c);
+	ownedClasses.set(el, next);
+}
+/** Properties set through `style:*`, per element, so they can be re-applied. */
+const styleNamespaces = /* @__PURE__ */ new WeakMap();
+function nsStyles(el) {
+	let m = styleNamespaces.get(el);
+	if (!m) styleNamespaces.set(el, m = /* @__PURE__ */ new Map());
+	return m;
+}
+function setStyleProperty(el, name, css) {
+	if (css === null) el.style.removeProperty(name);
+	else el.style.setProperty(name, css);
+}
+/**
+* Apply the bare `style` prop, then restore any `style:*` properties. The string
+* form assigns `cssText`, which drops them — and would drop them again on every
+* reactive update. Matches the server, which merges `style` and `style:*`.
+*/
 function applyStyle(el, value) {
 	const s = el.style;
 	if (!s) return;
 	if (typeof value === "string") s.cssText = value;
 	else if (value && typeof value === "object") Object.assign(s, value);
+	const ns = styleNamespaces.get(el);
+	if (ns) for (const [name, css] of ns) setStyleProperty(el, name, css);
 }
 function setAttribute(el, key, value) {
 	if (value == null || value === false) {

package/dist/for.d.mts

@@ -1,4 +1,4 @@
-import { o as MaybeReactiveProps } from "./children-BbHF-Dew.mjs";
+import { o as MaybeReactiveProps } from "./children-CYLVeDZc.mjs";
 
 //#region src/for.d.ts
 type KeyFn<T> = (item: T, index: number) => string | number;

package/dist/for.mjs

@@ -1,6 +1,6 @@
 import { C as untracked, S as trigger, _ as onCleanup, d as effectScope, u as effect, x as signal } from "./lib-DYypKhxk.mjs";
 import "./signals/index.mjs";
-import { n as disposeElement } from "./element-w3nDE2S5.mjs";
+import { n as disposeElement } from "./element-FFqOLWQu.mjs";
 //#region src/for.ts
 /**
 * Keyed list renderer. See {@link ForProps} for prop details.

package/dist/{fragment-DEhI5x0f.mjs → fragment-i-S0RyT4.mjs}

@@ -1,6 +1,6 @@
 import { _ as onCleanup, u as effect } from "./lib-DYypKhxk.mjs";
 import "./signals/index.mjs";
-import { a as mountChild } from "./element-w3nDE2S5.mjs";
+import { a as mountChild } from "./element-FFqOLWQu.mjs";
 import { Slot } from "./slot.mjs";
 //#region src/jsx-runtime/fragment.ts
 /**

package/dist/hydrate/index.mjs

@@ -1,2 +1,2 @@
-import { t as hydrate } from "../hydrate-CrVzu88K.mjs";
+import { t as hydrate } from "../hydrate-DZ_o7akg.mjs";
 export { hydrate };

package/dist/{hydrate-CrVzu88K.mjs → hydrate-DZ_o7akg.mjs}

@@ -2,10 +2,10 @@ import { C as untracked, _ as onCleanup, d as effectScope, n as CLAIM, t as ASYN
 import { isReactive } from "./signals/index.mjs";
 import { isReactivePromiseLike } from "./utilities/promise.mjs";
 import { flushDeferredAsyncRuns, isAsyncLike } from "./utilities/async.mjs";
-import { i as applyProps, o as resolveChild, r as setRenderer, t as createElement } from "./element-w3nDE2S5.mjs";
+import { i as applyProps, o as resolveChild, r as setRenderer, t as createElement } from "./element-FFqOLWQu.mjs";
 import { Slot } from "./slot.mjs";
 import { For, isForComponent } from "./for.mjs";
-import { n as isFragmentComponent, r as parseHtml, t as Fragment } from "./fragment-DEhI5x0f.mjs";
+import { n as isFragmentComponent, r as parseHtml, t as Fragment } from "./fragment-i-S0RyT4.mjs";
 //#region src/hydrate/claim.ts
 let hydrationContext = null;
 function setHydrationContext(ctx) {

package/dist/{index-BR8XVkck.d.mts → index-CzKKJCCK.d.mts}

@@ -373,8 +373,8 @@ type NoArgFnProps<P> = { [K in keyof P]: ArgCount<P[K]> extends 0 ? P[K] : ArgFn
  * components their props untouched.
  *
  * Every key is callable, including one the caller omitted. A getter is always
- * truthy, so defaults go on the call: `props.excited() ?? "…"`. Read a bag by
- * calling the key — {@link resolve} is for raw props.
+ * truthy, so defaults go on the call: `props.excited() ?? "…"`. Keys are
+ * branded sources, so they keep working when forwarded to a child component.
  *
  * Function props are the limit: a prop taking arguments is rejected, and a
  * zero-arg one types as its return value. Read those off the raw props.

package/dist/integrations/astro-client.mjs

@@ -1,6 +1,6 @@
-import { t as createElement } from "../element-w3nDE2S5.mjs";
+import { t as createElement } from "../element-FFqOLWQu.mjs";
 import { render } from "../render.mjs";
-import { t as hydrate } from "../hydrate-CrVzu88K.mjs";
+import { t as hydrate } from "../hydrate-DZ_o7akg.mjs";
 import { withSlotProps } from "./astro-slots.mjs";
 //#region src/integrations/astro-client.ts
 /**

package/dist/integrations/astro-server.mjs

@@ -1,7 +1,7 @@
 import { y as setInertEffects } from "../lib-DYypKhxk.mjs";
-import { r as setRenderer, t as createElement } from "../element-w3nDE2S5.mjs";
+import { r as setRenderer, t as createElement } from "../element-FFqOLWQu.mjs";
 import { withSlotProps } from "./astro-slots.mjs";
-import { i as serverJsx, n as renderToString, r as SNode } from "../server-D7ffi7b_.mjs";
+import { i as serverJsx, n as renderToString, r as SNode } from "../server-C5Ka5iG2.mjs";
 //#region src/integrations/astro-server.ts
 /**
 * Decide whether `Component` is an elements-kit component. Invoked by Astro

package/dist/integrations/astro-slots.mjs

@@ -1,5 +1,5 @@
-import { t as createElement } from "../element-w3nDE2S5.mjs";
-import { t as Fragment } from "../fragment-DEhI5x0f.mjs";
+import { t as createElement } from "../element-FFqOLWQu.mjs";
+import { t as Fragment } from "../fragment-i-S0RyT4.mjs";
 //#region src/integrations/astro-slots.ts
 /**
 * @internal Map Astro's pre-rendered slot HTML (`Record<name, html>`) into

package/dist/integrations/react.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/integrations/react.d.ts
 /**

package/dist/jsx-runtime/index.d.mts

@@ -1,3 +1,3 @@
-import { a as Fragment, c as PropsOf, i as JSX, l as Require, n as ComponentClass, o as MaybeReactiveProps, r as ComponentFn, s as Props, t as Children, u as createElement } from "../children-BbHF-Dew.mjs";
-import { n as ComputedProps, r as MaybeReactive } from "../index-BR8XVkck.mjs";
+import { a as Fragment, c as PropsOf, i as JSX, l as Require, n as ComponentClass, o as MaybeReactiveProps, r as ComponentFn, s as Props, t as Children, u as createElement } from "../children-CYLVeDZc.mjs";
+import { n as ComputedProps, r as MaybeReactive } from "../index-CzKKJCCK.mjs";
 export { type Children, ComponentClass, ComponentFn, type ComputedProps, Fragment, JSX, type MaybeReactive, type MaybeReactiveProps, type Props, type PropsOf, type Require, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/jsx-runtime/index.mjs

@@ -1,3 +1,3 @@
-import { t as createElement } from "../element-w3nDE2S5.mjs";
-import { t as Fragment } from "../fragment-DEhI5x0f.mjs";
+import { t as createElement } from "../element-FFqOLWQu.mjs";
+import { t as Fragment } from "../fragment-i-S0RyT4.mjs";
 export { Fragment, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/server/index.mjs

@@ -1,2 +1,2 @@
-import { n as renderToString, t as renderToStream } from "../server-D7ffi7b_.mjs";
+import { n as renderToString, t as renderToStream } from "../server-C5Ka5iG2.mjs";
 export { renderToStream, renderToString };

package/dist/{server-D7ffi7b_.mjs → server-C5Ka5iG2.mjs}

@@ -2,9 +2,9 @@ import { C as untracked, y as setInertEffects } from "./lib-DYypKhxk.mjs";
 import { isReactive } from "./signals/index.mjs";
 import { isReactivePromiseLike } from "./utilities/promise.mjs";
 import { isAsyncLike } from "./utilities/async.mjs";
-import { c as BooleanAttributes, l as ChildProperties, r as setRenderer, s as AttrAliases, u as Properties } from "./element-w3nDE2S5.mjs";
+import { c as BooleanAttributes, l as ChildProperties, r as setRenderer, s as AttrAliases, u as Properties } from "./element-FFqOLWQu.mjs";
 import { isForComponent } from "./for.mjs";
-import { n as isFragmentComponent } from "./fragment-DEhI5x0f.mjs";
+import { n as isFragmentComponent } from "./fragment-i-S0RyT4.mjs";
 //#region src/server/escape.ts
 function escapeDelim(s, delim, escDelim) {
 	let iDelim = s.indexOf(delim);

package/dist/signals/index.d.mts

@@ -1,2 +1,2 @@
-import { C as isSignal, D as untracked, E as trigger, S as isEffectScope, T as signal, _ as computed, a as Updater, b as isComputed, c as reactive, d as COMPUTED, f as EFFECT, g as batch, h as SIGNAL, i as Signal, l as resolve, m as SEED, n as ComputedProps, o as computedProps, p as EFFECT_SCOPE, r as MaybeReactive, s as isReactive, t as Computed, u as CLAIM, v as effect, w as onCleanup, x as isEffect, y as effectScope } from "../index-BR8XVkck.mjs";
+import { C as isSignal, D as untracked, E as trigger, S as isEffectScope, T as signal, _ as computed, a as Updater, b as isComputed, c as reactive, d as COMPUTED, f as EFFECT, g as batch, h as SIGNAL, i as Signal, l as resolve, m as SEED, n as ComputedProps, o as computedProps, p as EFFECT_SCOPE, r as MaybeReactive, s as isReactive, t as Computed, u as CLAIM, v as effect, w as onCleanup, x as isEffect, y as effectScope } from "../index-CzKKJCCK.mjs";
 export { CLAIM, COMPUTED, Computed, ComputedProps, EFFECT, EFFECT_SCOPE, MaybeReactive, SEED, SIGNAL, Signal, Updater, batch, computed, computedProps, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, signal, trigger, untracked };

package/dist/signals/index.mjs

@@ -101,8 +101,8 @@ const COMPUTED_PROPS = Symbol.for("elements-kit.computed-props");
 * components their props untouched.
 *
 * Every key is callable, including one the caller omitted. A getter is always
-* truthy, so defaults go on the call: `props.excited() ?? "…"`. Read a bag by
-* calling the key — {@link resolve} is for raw props.
+* truthy, so defaults go on the call: `props.excited() ?? "…"`. Keys are
+* branded sources, so they keep working when forwarded to a child component.
 *
 * Function props are the limit: a prop taking arguments is rejected, and a
 * zero-arg one types as its return value. Read those off the raw props.
@@ -124,7 +124,7 @@ function computedProps(raw) {
 		let getter = cache.get(key);
 		if (!getter) {
 			const v = raw[key];
-			getter = isReactive(v) ? v : () => v;
+			getter = isReactive(v) ? v : computed(() => v);
 			cache.set(key, getter);
 		}
 		return getter;

package/dist/ui/styles/index.css

@@ -424,7 +424,7 @@
 
 :is(.dark, .dark-theme) {
   --color-material-solid: var(--neutral-2);
-  --color-material-translucent: var(--black-a7);
+  --color-material-translucent: var(--neutral-a3);
 }
 
 :where([data-material-background="solid"]) {

package/dist/ui/styles/material.css

@@ -5,7 +5,7 @@
 
 :is(.dark, .dark-theme) {
   --color-material-solid: var(--neutral-2);
-  --color-material-translucent: var(--black-a7);
+  --color-material-translucent: var(--neutral-a3);
 }
 
 :where([data-material-background="solid"]) {

package/dist/utilities/active-element.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/active-element.d.ts
 declare const activeElement: Computed<Element | null>;

package/dist/utilities/async.d.mts

@@ -1,4 +1,4 @@
-import { m as SEED, r as MaybeReactive, u as CLAIM } from "../index-BR8XVkck.mjs";
+import { m as SEED, r as MaybeReactive, u as CLAIM } from "../index-CzKKJCCK.mjs";
 import { ComputedPromise } from "./promise.mjs";
 
 //#region src/utilities/async.d.ts

package/dist/utilities/debounced.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/debounced.d.ts
 /**

package/dist/utilities/element-rect.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/element-rect.d.ts
 type RectResult = {

package/dist/utilities/element-scroll.d.mts

@@ -1,4 +1,4 @@
-import { i as Signal } from "../index-BR8XVkck.mjs";
+import { i as Signal } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/element-scroll.d.ts
 type ElementScrollResult = {

package/dist/utilities/event-driven.d.mts

@@ -1,4 +1,4 @@
-import { i as Signal, t as Computed } from "../index-BR8XVkck.mjs";
+import { i as Signal, t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/event-driven.d.ts
 /**

package/dist/utilities/event-listener.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/event-listener.d.ts
 /**

package/dist/utilities/focus-within.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/focus-within.d.ts
 /**

package/dist/utilities/hover.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/hover.d.ts
 /**

package/dist/utilities/interval.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/interval.d.ts
 type IntervalResult = {

package/dist/utilities/location.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/location.d.ts
 type LocationResult = {

package/dist/utilities/media-devices.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/media-devices.d.ts
 /**

package/dist/utilities/media-player.d.mts

@@ -1,4 +1,4 @@
-import { i as Signal, t as Computed } from "../index-BR8XVkck.mjs";
+import { i as Signal, t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/media-player.d.ts
 type MediaPlayerResult<T extends HTMLMediaElement> = {

package/dist/utilities/media-query.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/media-query.d.ts
 /**

package/dist/utilities/network.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/network.d.ts
 /**

package/dist/utilities/orientation.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/orientation.d.ts
 type OrientationResult = {

package/dist/utilities/previous.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/previous.d.ts
 /**

package/dist/utilities/promise.d.mts

@@ -1,4 +1,4 @@
-import { m as SEED, t as Computed, u as CLAIM } from "../index-BR8XVkck.mjs";
+import { m as SEED, t as Computed, u as CLAIM } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/promise.d.ts
 /**

package/dist/utilities/routing.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/routing.d.ts
 /**

package/dist/utilities/search-params.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/search-params.d.ts
 /**

package/dist/utilities/storage.d.mts

@@ -1,4 +1,4 @@
-import { i as Signal } from "../index-BR8XVkck.mjs";
+import { i as Signal } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/storage.d.ts
 type StorageOptions<T> = {

package/dist/utilities/throttled.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/throttled.d.ts
 /**

package/dist/utilities/timeout.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/timeout.d.ts
 type TimeoutResult = {

package/dist/utilities/window-focus.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/window-focus.d.ts
 /**

package/dist/utilities/window-size.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BR8XVkck.mjs";
+import { t as Computed } from "../index-CzKKJCCK.mjs";
 
 //#region src/utilities/window-size.d.ts
 type WindowSizeResult = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
   "keywords": [
     "webcomponents",