slexkit 0.3.0 → 0.3.1

package/src/components/svelte/input/Input.svelte

@@ -8,21 +8,6 @@
   import { parseEngineeringNumber } from "../../../engine/engineering";
   import type { PropValues, SvelteComponentProps } from "../types";
 
-  const engineeringPrefixFactors: Record<string, number> = {
-    p: 1e-12,
-    n: 1e-9,
-    u: 1e-6,
-    "\u00b5": 1e-6,
-    "\u788c": 1e-6,
-    m: 1e-3,
-    k: 1e3,
-    K: 1e3,
-    M: 1e6,
-    meg: 1e6,
-    G: 1e9,
-    T: 1e12,
-  };
-
   let { componentName, props, ctx }: SvelteComponentProps = $props();
   let p = $state<PropValues>({});
   let value = $state("");
@@ -35,8 +20,6 @@
   const readonly = $derived(bool(p.readonly) || bool(p.readOnly));
   const required = $derived(bool(p.required));
   const invalid = $derived(bool(p.invalid) || !!errorText);
-  const steppable = $derived(isSteppableInput());
-  const controls = $derived(steppable && p.controls !== false && p.controls !== "false");
   const componentId = $derived(safeId(componentName));
   const inputId = $derived(text(p.id) || (componentId ? `slex-input-${componentId}` : fallbackId));
   const descriptionId = $derived(`${inputId}-description`);
@@ -44,10 +27,6 @@
   const explicitAriaLabel = $derived(text(p["aria-label"] ?? p.ariaLabel));
   const computedAriaLabel = $derived(explicitAriaLabel || (labelText ? "" : text(p.placeholder)));
   const describedBy = $derived([descriptionText ? descriptionId : "", errorText ? errorId : ""].filter(Boolean).join(" "));
-  const numericValue = $derived(readNumericValue());
-  const controlLabel = $derived(labelText || text(p.placeholder) || componentName || "input");
-  const decrementDisabled = $derived(!canStep(-1));
-  const incrementDisabled = $derived(!canStep(1));
   $effect(() => bindPropStore(props, (next) => {
     p = next;
     value = text(next.value);
@@ -61,76 +40,6 @@
     return text(p.type, "text") === "engineering" ? "text" : text(p.type, "text");
   }
 
-  function isSteppableInput(): boolean {
-    const kind = text(p.type, "text");
-    return kind === "number" ||
-      kind === "engineering" ||
-      p.min !== undefined ||
-      p.max !== undefined ||
-      p.step !== undefined;
-  }
-
-  function numericProp(input: unknown): number | undefined {
-    if (input === undefined || input === null || input === "") return undefined;
-    const next = Number(input);
-    return Number.isFinite(next) ? next : undefined;
-  }
-
-  function stepSize(): number {
-    const next = numericProp(p.step);
-    if (next !== undefined && next > 0) return next;
-    if (text(p.type, "text") !== "engineering") return 1;
-    const parsed = parseEngineeringNumber(value);
-    if (!parsed.valid || !parsed.prefix) return 1;
-    return engineeringPrefixFactors[parsed.prefix] ?? 1;
-  }
-
-  function readNumericValue(): number | null {
-    if (text(p.type, "text") === "engineering") {
-      const parsed = parseEngineeringNumber(value);
-      return parsed.valid && parsed.number !== null ? parsed.number : null;
-    }
-    const next = Number(value);
-    return Number.isFinite(next) ? next : null;
-  }
-
-  function clamp(next: number): number {
-    const min = numericProp(p.min);
-    const max = numericProp(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: -1 | 1): boolean {
-    if (!controls || disabled || readonly || numericValue === null) return false;
-    return clamp(numericValue + direction * stepSize()) !== numericValue;
-  }
-
-  function formatSteppedValue(next: number): string {
-    if (text(p.type, "text") !== "engineering") return text(next);
-    const parsed = parseEngineeringNumber(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: number): string {
-    return text(Number(next.toPrecision(12)));
-  }
-
-  function emitValue(nextValue: string): void {
-    value = nextValue;
-    emit(ctx, "change", text(p.type, "text") === "engineering" ? parseEngineeringNumber(value) : value);
-  }
-
-  function stepBy(direction: -1 | 1): void {
-    if (!canStep(direction) || numericValue === null) return;
-    emitValue(formatSteppedValue(clamp(numericValue + direction * stepSize())));
-  }
-
   function update(event: Event): void {
     if (disabled || readonly) return;
     value = (event.target as HTMLInputElement).value;
@@ -150,7 +59,6 @@
   <div
     class="slex-input-control"
     data-has-unit={unitText ? "true" : undefined}
-    data-has-controls={controls ? "true" : undefined}
   >
     <input
       id={inputId}
@@ -174,24 +82,6 @@
     {#if unitText}
       <span class="slex-input-unit" aria-hidden="true">{unitText}</span>
     {/if}
-    {#if controls}
-      <span class="slex-input-controls">
-        <button
-          class="slex-input-step"
-          type="button"
-          aria-label={`Increase ${controlLabel}`}
-          disabled={incrementDisabled}
-          onclick={() => stepBy(1)}
-        >+</button>
-        <button
-          class="slex-input-step"
-          type="button"
-          aria-label={`Decrease ${controlLabel}`}
-          disabled={decrementDisabled}
-          onclick={() => stepBy(-1)}
-        >-</button>
-      </span>
-    {/if}
   </div>
   {#if descriptionText}
     <div id={descriptionId} class="slex-input-description">{descriptionText}</div>

package/src/components/svelte/input/RadioGroup.svelte

@@ -49,7 +49,7 @@
     {@const disabled = !!item.disabled || !!p.disabled}
     {@const hapticKey = text(itemValue)}
     <span class="slex-choice-event-layer" onpointerdown={() => haptic(hapticKey, disabled, 8)} onclick={() => haptic(hapticKey, disabled, 8)}>
-      <label class="slex-radio-field">
+      <label class="slex-radio-field" data-disabled={disabled ? "true" : undefined}>
         <input
           type="radio"
           class="slex-radio"

package/src/components/svelte/input/Switch.svelte

@@ -34,7 +34,7 @@
 </script>
 
 <span class="slex-switch-event-layer" onpointerdown={() => haptic(8)} onclick={() => haptic(8)}>
-  <label class="slex-switch" data-state={enabled ? "on" : "off"}>
+  <label class="slex-switch" data-state={enabled ? "on" : "off"} data-disabled={p.disabled ? "true" : undefined}>
     <input
       type="checkbox"
       role="switch"

package/src/styles/components/choice.css

@@ -154,8 +154,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/src/styles/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/src/styles/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/src/styles/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/src/styles/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/src/styles/display.css

@@ -79,7 +79,7 @@
   display: block;
 }
 
-.slex-stat-character[data-stat-change] {
+.slex-stat-character[data-stat-kind="digit"][data-stat-change] {
   overflow: hidden;
 }
 

package/src/styles/tooling.css

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