slexkit 0.3.0 → 0.3.1

package/dist/components/input.css

@@ -164,53 +164,62 @@
 .slex-slider {
   box-sizing: border-box;
   width: 100%;
-  height: 0.5rem;
+  height: 1rem;
+  padding: 0;
+  border: 0;
   border-radius: 999px;
   -webkit-appearance: none;
   appearance: none;
-  background: linear-gradient(
-    to right,
-    var(--primary) 0%,
-    var(--primary) var(--slex-slider-progress, 0%),
-    var(--secondary) var(--slex-slider-progress, 0%),
-    var(--secondary) 100%
-  );
+  background: transparent;
   accent-color: var(--primary);
   cursor: pointer;
+  overflow: visible;
   transition: box-shadow 150ms ease, filter 150ms ease;
 }
 
-.slex-slider:hover {
-  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 8%, transparent);
-}
-
-.slex-slider:active {
-  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
-}
-
 .slex-slider:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 4px;
 }
 
 .slex-slider::-webkit-slider-thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
+  margin-top: -0.25rem;
   border: 2px solid var(--primary);
   border-radius: 999px;
-  background: var(--background) !important;
+  background-color: var(--background);
+  background-clip: padding-box;
   box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
   -webkit-appearance: none;
   appearance: none;
   transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
 }
 
+.slex-slider::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.5rem;
+  border: 0;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--primary) 0%,
+    var(--primary) var(--slex-slider-progress, 0%),
+    var(--secondary) var(--slex-slider-progress, 0%),
+    var(--secondary) 100%
+  );
+}
+
 .slex-slider::-moz-range-thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
   border: 2px solid var(--primary);
   border-radius: 999px;
-  background: var(--background) !important;
+  background-color: var(--background);
+  background-clip: padding-box;
   box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
   transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
 }
@@ -363,12 +372,12 @@
   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;
 }
 
@@ -421,16 +430,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;
 }
@@ -454,79 +465,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;
 }
 
@@ -551,6 +499,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;
 }
 
@@ -558,13 +510,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);
 }
 
@@ -573,22 +524,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);
 }
 
@@ -602,11 +547,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;
@@ -734,7 +674,6 @@
   border: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
-  clip-path: inset(50%);
   white-space: nowrap;
 }
 
@@ -793,11 +732,6 @@
   color: var(--accent-foreground);
 }
 
-.slex-select-menu:has(.slex-select-option:hover) .slex-select-option--active:not(:hover) {
-  background: transparent;
-  color: var(--popover-foreground, var(--foreground));
-}
-
 .slex-select-option--selected {
   font-weight: 500;
 }
@@ -1236,8 +1170,8 @@
   transform: none;
 }
 
-.slex-checkbox-field:has(.slex-checkbox:disabled),
-.slex-radio-field:has(.slex-radio:disabled) {
+.slex-checkbox-field[data-disabled="true"],
+.slex-radio-field[data-disabled="true"] {
   cursor: not-allowed;
   opacity: 0.65;
 }

package/dist/components/input.js

@@ -117,26 +117,11 @@ function parseEngineeringNumber(input) {
 var nextInputId = 0;
 var root_1 = from_html(`<label class="slex-input-label"> </label>`);
 var root_2 = from_html(`<span class="slex-input-unit" aria-hidden="true"> </span>`);
-var root_3 = from_html(`<span class="slex-input-controls"><button class="slex-input-step" type="button">+</button> <button class="slex-input-step" type="button">-</button></span>`);
-var root_4 = from_html(`<div class="slex-input-description"> </div>`);
-var root_5 = from_html(`<div class="slex-input-error" role="alert"> </div>`);
-var root = from_html(`<div class="slex-input-field"><!> <div class="slex-input-control"><input class="slex-input"/> <!> <!></div> <!> <!></div>`);
+var root_3 = from_html(`<div class="slex-input-description"> </div>`);
+var root_4 = from_html(`<div class="slex-input-error" role="alert"> </div>`);
+var root = from_html(`<div class="slex-input-field"><!> <div class="slex-input-control"><input class="slex-input"/> <!></div> <!> <!></div>`);
 function Input($$anchor, $$props) {
   push($$props, true);
-  const engineeringPrefixFactors = {
-    p: 0.000000000001,
-    n: 0.000000001,
-    u: 0.000001,
-    "µ": 0.000001,
-    "碌": 0.000001,
-    m: 0.001,
-    k: 1000,
-    K: 1000,
-    M: 1e6,
-    meg: 1e6,
-    G: 1e9,
-    T: 1000000000000
-  };
   let p = state(proxy({}));
   let value = state("");
   const fallbackId = `slex-input-${++nextInputId}`;
@@ -148,8 +133,6 @@ function Input($$anchor, $$props) {
   const readonly = user_derived(() => bool(get(p).readonly) || bool(get(p).readOnly));
   const required = user_derived(() => bool(get(p).required));
   const invalid2 = user_derived(() => bool(get(p).invalid) || !!get(errorText));
-  const steppable = user_derived(isSteppableInput);
-  const controls = user_derived(() => get(steppable) && get(p).controls !== false && get(p).controls !== "false");
   const componentId = user_derived(() => safeId($$props.componentName));
   const inputId = user_derived(() => text(get(p).id) || (get(componentId) ? `slex-input-${get(componentId)}` : fallbackId));
   const descriptionId = user_derived(() => `${get(inputId)}-description`);
@@ -160,10 +143,6 @@ function Input($$anchor, $$props) {
     get(descriptionText) ? get(descriptionId) : "",
     get(errorText) ? get(errorId) : ""
   ].filter(Boolean).join(" "));
-  const numericValue = user_derived(readNumericValue);
-  const controlLabel = user_derived(() => get(labelText) || text(get(p).placeholder) || $$props.componentName || "input");
-  const decrementDisabled = user_derived(() => !canStep(-1));
-  const incrementDisabled = user_derived(() => !canStep(1));
   user_effect(() => bindPropStore($$props.props, (next) => {
     set(p, next, true);
     set(value, text(next.value), true);
@@ -174,72 +153,6 @@ function Input($$anchor, $$props) {
   function inputType() {
     return text(get(p).type, "text") === "engineering" ? "text" : text(get(p).type, "text");
   }
-  function isSteppableInput() {
-    const kind = text(get(p).type, "text");
-    return kind === "number" || kind === "engineering" || get(p).min !== undefined || get(p).max !== undefined || get(p).step !== undefined;
-  }
-  function numericProp(input) {
-    if (input === undefined || input === null || input === "")
-      return;
-    const next = Number(input);
-    return Number.isFinite(next) ? next : undefined;
-  }
-  function stepSize() {
-    const next = numericProp(get(p).step);
-    if (next !== undefined && next > 0)
-      return next;
-    if (text(get(p).type, "text") !== "engineering")
-      return 1;
-    const parsed = parseEngineeringNumber(get(value));
-    if (!parsed.valid || !parsed.prefix)
-      return 1;
-    return engineeringPrefixFactors[parsed.prefix] ?? 1;
-  }
-  function readNumericValue() {
-    if (text(get(p).type, "text") === "engineering") {
-      const parsed = parseEngineeringNumber(get(value));
-      return parsed.valid && parsed.number !== null ? parsed.number : null;
-    }
-    const next = Number(get(value));
-    return Number.isFinite(next) ? next : null;
-  }
-  function clamp(next) {
-    const min = numericProp(get(p).min);
-    const max = numericProp(get(p).max);
-    let clamped = next;
-    if (min !== undefined)
-      clamped = Math.max(min, clamped);
-    if (max !== undefined)
-      clamped = Math.min(max, clamped);
-    return clamped;
-  }
-  function canStep(direction) {
-    if (!get(controls) || get(disabled) || get(readonly) || get(numericValue) === null)
-      return false;
-    return clamp(get(numericValue) + direction * stepSize()) !== get(numericValue);
-  }
-  function formatSteppedValue(next) {
-    if (text(get(p).type, "text") !== "engineering")
-      return text(next);
-    const parsed = parseEngineeringNumber(get(value));
-    if (!parsed.valid)
-      return text(next);
-    const factor = parsed.prefix ? engineeringPrefixFactors[parsed.prefix] : undefined;
-    const visibleNumber = factor ? next / factor : next;
-    return `${formatNumber(visibleNumber)}${parsed.prefix}${parsed.unit}`;
-  }
-  function formatNumber(next) {
-    return text(Number(next.toPrecision(12)));
-  }
-  function emitValue(nextValue) {
-    set(value, nextValue, true);
-    emit($$props.ctx, "change", text(get(p).type, "text") === "engineering" ? parseEngineeringNumber(get(value)) : get(value));
-  }
-  function stepBy(direction) {
-    if (!canStep(direction) || get(numericValue) === null)
-      return;
-    emitValue(formatSteppedValue(clamp(get(numericValue) + direction * stepSize())));
-  }
   function update(event) {
     if (get(disabled) || get(readonly))
       return;
@@ -265,9 +178,9 @@ function Input($$anchor, $$props) {
     });
   }
   var div_1 = sibling(node, 2);
-  var input_1 = child(div_1);
-  remove_input_defaults(input_1);
-  var node_1 = sibling(input_1, 2);
+  var input = child(div_1);
+  remove_input_defaults(input);
+  var node_1 = sibling(input, 2);
   {
     var consequent_1 = ($$anchor2) => {
       var span = root_2();
@@ -281,33 +194,11 @@ function Input($$anchor, $$props) {
         $$render(consequent_1);
     });
   }
-  var node_2 = sibling(node_1, 2);
-  {
-    var consequent_2 = ($$anchor2) => {
-      var span_1 = root_3();
-      var button = child(span_1);
-      var button_1 = sibling(button, 2);
-      reset(span_1);
-      template_effect(() => {
-        set_attribute(button, "aria-label", `Increase ${get(controlLabel)}`);
-        button.disabled = get(incrementDisabled);
-        set_attribute(button_1, "aria-label", `Decrease ${get(controlLabel)}`);
-        button_1.disabled = get(decrementDisabled);
-      });
-      delegated("click", button, () => stepBy(1));
-      delegated("click", button_1, () => stepBy(-1));
-      append($$anchor2, span_1);
-    };
-    if_block(node_2, ($$render) => {
-      if (get(controls))
-        $$render(consequent_2);
-    });
-  }
   reset(div_1);
-  var node_3 = sibling(div_1, 2);
+  var node_2 = sibling(div_1, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var div_2 = root_4();
+    var consequent_2 = ($$anchor2) => {
+      var div_2 = root_3();
       var text_3 = child(div_2, true);
       reset(div_2);
       template_effect(() => {
@@ -316,15 +207,15 @@ function Input($$anchor, $$props) {
       });
       append($$anchor2, div_2);
     };
-    if_block(node_3, ($$render) => {
+    if_block(node_2, ($$render) => {
       if (get(descriptionText))
-        $$render(consequent_3);
+        $$render(consequent_2);
     });
   }
-  var node_4 = sibling(node_3, 2);
+  var node_3 = sibling(node_2, 2);
   {
-    var consequent_4 = ($$anchor2) => {
-      var div_3 = root_5();
+    var consequent_3 = ($$anchor2) => {
+      var div_3 = root_4();
       var text_4 = child(div_3, true);
       reset(div_3);
       template_effect(() => {
@@ -333,9 +224,9 @@ function Input($$anchor, $$props) {
       });
       append($$anchor2, div_3);
     };
-    if_block(node_4, ($$render) => {
+    if_block(node_3, ($$render) => {
       if (get(errorText))
-        $$render(consequent_4);
+        $$render(consequent_3);
     });
   }
   reset(div);
@@ -344,21 +235,20 @@ function Input($$anchor, $$props) {
     set_attribute(div, "data-required", get(required) ? "true" : undefined);
     set_attribute(div, "data-readonly", get(readonly) ? "true" : undefined);
     set_attribute(div_1, "data-has-unit", get(unitText) ? "true" : undefined);
-    set_attribute(div_1, "data-has-controls", get(controls) ? "true" : undefined);
-    set_attribute(input_1, "id", get(inputId));
-    set_attribute(input_1, "type", $0);
-    set_attribute(input_1, "inputmode", $1);
-    set_attribute(input_1, "name", $2);
-    set_attribute(input_1, "placeholder", $3);
-    input_1.disabled = get(disabled);
-    input_1.readOnly = get(readonly);
-    input_1.required = get(required);
-    set_attribute(input_1, "min", $4);
-    set_attribute(input_1, "max", $5);
-    set_attribute(input_1, "step", $6);
-    set_attribute(input_1, "aria-label", get(computedAriaLabel) || undefined);
-    set_attribute(input_1, "aria-describedby", get(describedBy) || undefined);
-    set_attribute(input_1, "aria-invalid", get(invalid2) ? "true" : undefined);
+    set_attribute(input, "id", get(inputId));
+    set_attribute(input, "type", $0);
+    set_attribute(input, "inputmode", $1);
+    set_attribute(input, "name", $2);
+    set_attribute(input, "placeholder", $3);
+    input.disabled = get(disabled);
+    input.readOnly = get(readonly);
+    input.required = get(required);
+    set_attribute(input, "min", $4);
+    set_attribute(input, "max", $5);
+    set_attribute(input, "step", $6);
+    set_attribute(input, "aria-label", get(computedAriaLabel) || undefined);
+    set_attribute(input, "aria-describedby", get(describedBy) || undefined);
+    set_attribute(input, "aria-invalid", get(invalid2) ? "true" : undefined);
   }, [
     () => inputType(),
     () => text(get(p).type, "text") === "engineering" ? "decimal" : undefined,
@@ -368,12 +258,12 @@ function Input($$anchor, $$props) {
     () => get(p).max === undefined ? undefined : text(get(p).max),
     () => get(p).step === undefined ? undefined : text(get(p).step)
   ]);
-  delegated("input", input_1, update);
-  bind_value(input_1, () => get(value), ($$value) => set(value, $$value));
+  delegated("input", input, update);
+  bind_value(input, () => get(value), ($$value) => set(value, $$value));
   append($$anchor, div);
   pop();
 }
-delegate(["input", "click"]);
+delegate(["input"]);
 
 // src/components/entries/input.ts
 register("input", createSvelteRenderer("input", Input), { state: "value" });

package/dist/components/radio-group.js

@@ -150,6 +150,7 @@ function RadioGroup($$anchor, $$props) {
     reset(label);
     reset(span_1);
     template_effect(($0, $1, $2) => {
+      set_attribute(label, "data-disabled", get(disabled) ? "true" : undefined);
       set_attribute(input, "name", $0);
       set_value(input, $1);
       set_checked(input, get(itemValue) === get(value));

package/dist/components/select.css

@@ -110,7 +110,6 @@
   border: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
-  clip-path: inset(50%);
   white-space: nowrap;
 }
 
@@ -169,11 +168,6 @@
   color: var(--accent-foreground);
 }
 
-.slex-select-menu:has(.slex-select-option:hover) .slex-select-option--active:not(:hover) {
-  background: transparent;
-  color: var(--popover-foreground, var(--foreground));
-}
-
 .slex-select-option--selected {
   font-weight: 500;
 }

package/dist/components/slider.css

@@ -33,53 +33,62 @@
 .slex-slider {
   box-sizing: border-box;
   width: 100%;
-  height: 0.5rem;
+  height: 1rem;
+  padding: 0;
+  border: 0;
   border-radius: 999px;
   -webkit-appearance: none;
   appearance: none;
-  background: linear-gradient(
-    to right,
-    var(--primary) 0%,
-    var(--primary) var(--slex-slider-progress, 0%),
-    var(--secondary) var(--slex-slider-progress, 0%),
-    var(--secondary) 100%
-  );
+  background: transparent;
   accent-color: var(--primary);
   cursor: pointer;
+  overflow: visible;
   transition: box-shadow 150ms ease, filter 150ms ease;
 }
 
-.slex-slider:hover {
-  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 8%, transparent);
-}
-
-.slex-slider:active {
-  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
-}
-
 .slex-slider:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 4px;
 }
 
 .slex-slider::-webkit-slider-thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
+  margin-top: -0.25rem;
   border: 2px solid var(--primary);
   border-radius: 999px;
-  background: var(--background) !important;
+  background-color: var(--background);
+  background-clip: padding-box;
   box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
   -webkit-appearance: none;
   appearance: none;
   transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
 }
 
+.slex-slider::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.5rem;
+  border: 0;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--primary) 0%,
+    var(--primary) var(--slex-slider-progress, 0%),
+    var(--secondary) var(--slex-slider-progress, 0%),
+    var(--secondary) 100%
+  );
+}
+
 .slex-slider::-moz-range-thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
   border: 2px solid var(--primary);
   border-radius: 999px;
-  background: var(--background) !important;
+  background-color: var(--background);
+  background-clip: padding-box;
   box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
   transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
 }

package/dist/components/specs.js

@@ -526,7 +526,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,
@@ -1034,6 +1033,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,