elements-kit 0.23.1 → 0.24.0

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.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/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/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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.23.1",
+  "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",