slexkit 0.3.0 → 0.3.1

package/dist/components/switch.css

@@ -104,11 +104,11 @@
   opacity: 0.55;
 }
 
-.slex-switch:has(.slex-switch-input:disabled) {
+.slex-switch[data-disabled="true"] {
   cursor: not-allowed;
 }
 
-.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control,
-.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control::after {
+.slex-switch[data-disabled="true"]:hover .slex-switch-control,
+.slex-switch[data-disabled="true"]:hover .slex-switch-control::after {
   box-shadow: none;
 }

package/dist/components/switch.js

@@ -89,6 +89,7 @@ function Switch($$anchor, $$props) {
   reset(span);
   template_effect(($0, $1) => {
     set_attribute(label, "data-state", get(enabled) ? "on" : "off");
+    set_attribute(label, "data-disabled", get(p).disabled ? "true" : undefined);
     input.disabled = !!get(p).disabled;
     set_attribute(input, "aria-label", $0);
     set_text(text_1, $1);

package/dist/components/text-input.css

@@ -45,16 +45,18 @@
   border: 1px solid var(--input);
   border-radius: var(--radius);
   background: var(--background);
+  background-clip: padding-box;
   color: var(--foreground);
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.5;
   outline: none;
+  -webkit-appearance: none;
+  appearance: none;
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
-.slex-input-control[data-has-unit="true"] .slex-input,
-.slex-input-control[data-has-controls="true"] .slex-input {
+.slex-input-control[data-has-unit="true"] .slex-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -78,79 +80,16 @@
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
-.slex-input-control[data-has-controls="true"] .slex-input-unit {
-  border-radius: 0;
-}
-
-.slex-input-controls {
-  box-sizing: border-box;
-  display: inline-grid;
-  grid-template-rows: repeat(2, minmax(0, 1fr));
-  align-items: stretch;
-  flex: 0 0 auto;
-  width: 1.875rem;
-  min-width: 1.875rem;
-  min-height: 2.5625rem;
-  overflow: hidden;
-  border: 1px solid var(--input);
-  border-left: 0;
-  border-radius: 0 var(--radius) var(--radius) 0;
-  background: var(--background);
-  transition: border-color 150ms ease, box-shadow 150ms ease;
-}
-
-.slex-input-step {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-  border: 0;
-  border-top: 1px solid var(--input);
-  border-radius: 0;
-  background: transparent;
-  color: var(--foreground);
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1;
-  cursor: pointer;
-  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
-}
-
-.slex-input-step:first-child {
-  border-top: 0;
-}
-
-.slex-input-step:last-child {
-  border-radius: 0;
-}
-
-.slex-input-step:hover:not(:disabled) {
-  background: color-mix(in oklab, var(--muted) 52%, var(--background));
-}
-
-.slex-input-step:focus-visible {
-  z-index: 1;
-  outline: none;
-  background: color-mix(in oklab, var(--muted) 58%, var(--background));
-  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ring) 34%, transparent);
-}
-
-.slex-input-step:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
 .slex-input::placeholder {
   color: var(--muted-foreground);
 }
 
 .slex-input:focus {
   border-color: var(--ring);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 18%, transparent);
+}
+
+.slex-input-control[data-has-unit="true"] .slex-input:focus {
   box-shadow: none;
 }
 
@@ -175,6 +114,10 @@
 
 .slex-input-field[data-invalid="true"] .slex-input:focus {
   border-color: var(--destructive);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
+}
+
+.slex-input-field[data-invalid="true"] .slex-input-control[data-has-unit="true"] .slex-input:focus {
   box-shadow: none;
 }
 
@@ -182,13 +125,12 @@
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
 }
 
-.slex-input-control:focus-within .slex-input,
-.slex-input-control:focus-within .slex-input-unit,
-.slex-input-control:focus-within .slex-input-controls {
-  border-color: var(--ring);
+.slex-input-control:not([data-has-unit]):focus-within {
+  box-shadow: none;
 }
 
-.slex-input-control:focus-within .slex-input-step {
+.slex-input-control:focus-within .slex-input,
+.slex-input-control:focus-within .slex-input-unit {
   border-color: var(--ring);
 }
 
@@ -197,22 +139,16 @@
   color: color-mix(in oklab, var(--destructive) 84%, var(--muted-foreground));
 }
 
-.slex-input-field[data-invalid="true"] .slex-input-step {
-  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
-}
-
-.slex-input-field[data-invalid="true"] .slex-input-controls {
-  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
-}
-
 .slex-input-field[data-invalid="true"] .slex-input-control:focus-within {
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
 }
 
+.slex-input-field[data-invalid="true"] .slex-input-control:not([data-has-unit]):focus-within {
+  box-shadow: none;
+}
+
 .slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input,
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit,
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-controls,
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-step {
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit {
   border-color: var(--destructive);
 }
 
@@ -226,11 +162,6 @@
   cursor: not-allowed;
 }
 
-.slex-input[disabled] ~ .slex-input-controls,
-.slex-input[readonly] ~ .slex-input-controls {
-  opacity: 0.6;
-}
-
 .slex-input-description {
   color: var(--muted-foreground);
   font-size: 0.75rem;

package/dist/components/text.js

@@ -11,10 +11,12 @@ import {
   reset,
   set,
   set_class,
+  set_style,
   set_text,
   state,
   template_effect,
   text1 as text,
+  user_derived,
   user_effect
 } from "../chunks/button-cr1fhsa7.js";
 
@@ -27,11 +29,21 @@ function Text($$anchor, $$props) {
   push($$props, true);
   let p = state(proxy({}));
   user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  const color = user_derived(() => get(p).color == null || get(p).color === "" ? undefined : text(get(p).color));
+  const size = user_derived(() => cssLength(get(p).size));
+  function cssLength(value) {
+    if (value == null || value === "")
+      return;
+    const rendered = text(value);
+    return /^-?\d+(\.\d+)?$/.test(rendered) ? `${rendered}px` : rendered;
+  }
   var div = root();
+  let styles;
   var text_1 = child(div, true);
   reset(div);
   template_effect(($0, $1) => {
     set_class(div, 1, $0);
+    styles = set_style(div, "", styles, { color: get(color), "font-size": get(size) });
     set_text(text_1, $1);
   }, [
     () => `slex-text${get(p).variant ? ` slex-text--${text(get(p).variant)}` : ""}${get(p).class ? ` ${text(get(p).class)}` : ""}`,

package/dist/components/tooling.css

@@ -572,7 +572,6 @@
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
-  clip-path: inset(50%);
 }
 
 .slex-playground-error {

package/dist/runtime.cjs

@@ -761,6 +761,9 @@ function isWritableComponent(type) {
   const mode = getComponentStateMode(type);
   return mode === "value" || mode === "checked" || mode === "enabled";
 }
+function isReadableComponent(type) {
+  return getComponentStateMode(type) === "readable";
+}
 function isStatefulComponent(type) {
   return getComponentStateMode(type) !== "none";
 }
@@ -877,7 +880,10 @@ function createGProxy(g, components, componentTypes) {
 function ensureComponentState(name, type, components, componentTypes) {
   if (!components[name])
     components[name] = {};
-  componentTypes[name] = type;
+  const previousType = componentTypes[name] ?? "";
+  if (!(isWritableComponent(previousType) && isReadableComponent(type))) {
+    componentTypes[name] = type;
+  }
   return components[name];
 }
 function syncReadableComponentProp(type, state, propName, value) {
@@ -905,6 +911,9 @@ function syncReadableComponentProp(type, state, propName, value) {
 function syncComponentProps(type, name, props, components, componentTypes) {
   if (!name || !isStatefulComponent(type))
     return;
+  const previousType = componentTypes[name] ?? "";
+  if (isWritableComponent(previousType) && isReadableComponent(type))
+    return;
   const state = ensureComponentState(name, type, components, componentTypes);
   if (type === "input" && typeof props.type === "string") {
     assignInputType(state, props.type);
@@ -969,7 +978,7 @@ function seedStaticComponentState(type, state, props) {
 function warnDuplicateState(ns, name, currentType, currentPath, previous) {
   console.warn(`[SlexKit][${ns}] Component state '${name}' is declared more than once at ${previous.path} and ${currentPath}; state is shared by namespace and component name.`);
   if (previous.type !== currentType) {
-    console.warn(`[SlexKit][${ns}] Component state '${name}' is used by multiple component types (${previous.type}, ${currentType}); the latest rendered type controls write behavior.`);
+    console.warn(`[SlexKit][${ns}] Component state '${name}' is used by multiple component types (${previous.type}, ${currentType}); use distinct names when components should not share state.`);
   }
 }
 function dynamicStateBinding(type, props) {
@@ -981,6 +990,9 @@ function isMirroredValueControlPair(previousType, currentType) {
   return previousType === "input" && currentType === "slider" || previousType === "slider" && currentType === "input";
 }
 function shouldWarnDuplicateState(currentType, currentBinding, previous) {
+  if (isReadableComponent(previous.type) && isReadableComponent(currentType)) {
+    return false;
+  }
   if (currentBinding && previous.stateBinding === currentBinding && isMirroredValueControlPair(previous.type, currentType)) {
     return false;
   }
@@ -1791,7 +1803,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.0";
+var SLEXKIT_VERSION = "0.3.1";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {
@@ -2919,7 +2931,6 @@ var inputSpec = component({
     min: { type: "string | number", dynamic: true, description: "Minimum value used by numeric input controls." },
     max: { type: "string | number", dynamic: true, description: "Maximum value used by numeric input controls." },
     step: { type: "string | number", dynamic: true, description: "Step size used by numeric input controls." },
-    controls: { type: "boolean", default: true, dynamic: true, description: "Show decrement and increment buttons for numeric inputs." },
     onchange: { type: "write-expression", description: "Write expression invoked when the value changes." }
   },
   children: noChildren,
@@ -3427,6 +3438,8 @@ var textSpec = component({
     content: { type: "string", dynamic: true, description: "Alias for text." },
     label: { type: "string", dynamic: true, description: "Alias for text." },
     variant: { type: "string", values: ["default", "muted"], default: "default", description: "Text visual variant." },
+    color: { type: "string", dynamic: true, description: "Optional CSS color for controlled previews." },
+    size: { type: "string | number", dynamic: true, description: "Optional font size. Numbers are treated as px." },
     class: { type: "string", description: "Additional host-controlled CSS class." }
   },
   children: noChildren,
@@ -3727,7 +3740,11 @@ function isRenderableSource(value) {
   return Object.keys(value).some((key) => key.includes(":"));
 }
 function bareLayoutFromSource(value) {
-  const { slex: _slex, namespace: _namespace, g: _g, layout: _layout, ...layout } = value;
+  const layout = { ...value };
+  delete layout.slex;
+  delete layout.namespace;
+  delete layout.g;
+  delete layout.layout;
   return layout;
 }
 function isStateOnlySource(value) {

package/dist/runtime.js

@@ -689,6 +689,9 @@ function isWritableComponent(type) {
   const mode = getComponentStateMode(type);
   return mode === "value" || mode === "checked" || mode === "enabled";
 }
+function isReadableComponent(type) {
+  return getComponentStateMode(type) === "readable";
+}
 function isStatefulComponent(type) {
   return getComponentStateMode(type) !== "none";
 }
@@ -805,7 +808,10 @@ function createGProxy(g, components, componentTypes) {
 function ensureComponentState(name, type, components, componentTypes) {
   if (!components[name])
     components[name] = {};
-  componentTypes[name] = type;
+  const previousType = componentTypes[name] ?? "";
+  if (!(isWritableComponent(previousType) && isReadableComponent(type))) {
+    componentTypes[name] = type;
+  }
   return components[name];
 }
 function syncReadableComponentProp(type, state, propName, value) {
@@ -833,6 +839,9 @@ function syncReadableComponentProp(type, state, propName, value) {
 function syncComponentProps(type, name, props, components, componentTypes) {
   if (!name || !isStatefulComponent(type))
     return;
+  const previousType = componentTypes[name] ?? "";
+  if (isWritableComponent(previousType) && isReadableComponent(type))
+    return;
   const state = ensureComponentState(name, type, components, componentTypes);
   if (type === "input" && typeof props.type === "string") {
     assignInputType(state, props.type);
@@ -897,7 +906,7 @@ function seedStaticComponentState(type, state, props) {
 function warnDuplicateState(ns, name, currentType, currentPath, previous) {
   console.warn(`[SlexKit][${ns}] Component state '${name}' is declared more than once at ${previous.path} and ${currentPath}; state is shared by namespace and component name.`);
   if (previous.type !== currentType) {
-    console.warn(`[SlexKit][${ns}] Component state '${name}' is used by multiple component types (${previous.type}, ${currentType}); the latest rendered type controls write behavior.`);
+    console.warn(`[SlexKit][${ns}] Component state '${name}' is used by multiple component types (${previous.type}, ${currentType}); use distinct names when components should not share state.`);
   }
 }
 function dynamicStateBinding(type, props) {
@@ -909,6 +918,9 @@ function isMirroredValueControlPair(previousType, currentType) {
   return previousType === "input" && currentType === "slider" || previousType === "slider" && currentType === "input";
 }
 function shouldWarnDuplicateState(currentType, currentBinding, previous) {
+  if (isReadableComponent(previous.type) && isReadableComponent(currentType)) {
+    return false;
+  }
   if (currentBinding && previous.stateBinding === currentBinding && isMirroredValueControlPair(previous.type, currentType)) {
     return false;
   }
@@ -1719,7 +1731,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.0";
+var SLEXKIT_VERSION = "0.3.1";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {
@@ -2847,7 +2859,6 @@ var inputSpec = component({
     min: { type: "string | number", dynamic: true, description: "Minimum value used by numeric input controls." },
     max: { type: "string | number", dynamic: true, description: "Maximum value used by numeric input controls." },
     step: { type: "string | number", dynamic: true, description: "Step size used by numeric input controls." },
-    controls: { type: "boolean", default: true, dynamic: true, description: "Show decrement and increment buttons for numeric inputs." },
     onchange: { type: "write-expression", description: "Write expression invoked when the value changes." }
   },
   children: noChildren,
@@ -3355,6 +3366,8 @@ var textSpec = component({
     content: { type: "string", dynamic: true, description: "Alias for text." },
     label: { type: "string", dynamic: true, description: "Alias for text." },
     variant: { type: "string", values: ["default", "muted"], default: "default", description: "Text visual variant." },
+    color: { type: "string", dynamic: true, description: "Optional CSS color for controlled previews." },
+    size: { type: "string | number", dynamic: true, description: "Optional font size. Numbers are treated as px." },
     class: { type: "string", description: "Additional host-controlled CSS class." }
   },
   children: noChildren,
@@ -3655,7 +3668,11 @@ function isRenderableSource(value) {
   return Object.keys(value).some((key) => key.includes(":"));
 }
 function bareLayoutFromSource(value) {
-  const { slex: _slex, namespace: _namespace, g: _g, layout: _layout, ...layout } = value;
+  const layout = { ...value };
+  delete layout.slex;
+  delete layout.namespace;
+  delete layout.g;
+  delete layout.layout;
   return layout;
 }
 function isStateOnlySource(value) {