@excom/super-input 0.1.0

package/.rush/temp/chunked-rush-logs/super-input.apply-exports.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/chunked-rush-logs/super-input.build_docs.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/chunked-rush-logs/super-input.build_package-metas.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/apply-exports/all.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/.rush/temp/operation/apply-exports/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/operation/apply-exports/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 35.44262400000002
+}

package/.rush/temp/operation/build_docs/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/.rush/temp/operation/build_docs/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/operation/build_docs/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 51.63553899999988
+}

package/.rush/temp/operation/build_package-metas/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/.rush/temp/operation/build_package-metas/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/build_package-metas/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 99.33473099999992
+}

package/.rush/temp/shrinkwrap-deps.json

@@ -0,0 +1,9 @@
+{
+  "../../packages/super-input": "../../packages/super-input:fueVqvrObk+Av74S5aPlYPlhcaLS7CnIrVGb9WU6O8s=:",
+  "input-format@0.3.14": "input-format@0.3.14:wcZZfzrfa6WangE6QCn6dztFBYbHJDpmvmqRVDmgNCY=:",
+  "js-tokens@4.0.0": "js-tokens@4.0.0:bylIGj6At7FynPHmuZRgqLdhMSiaXEF+4m8SwJ0gY5k=:",
+  "loose-envify@1.4.0": "loose-envify@1.4.0:jl4j5x+ArQHmZCLrhcyKySMYfzxa2ijSEIuGDd0Pnn4=:",
+  "object-assign@4.1.1": "object-assign@4.1.1:gEYm2YMdR9pgGzUfDEsvSm8ByOtns3HUdx2PKjOtz8o=:",
+  "prop-types@15.8.1": "prop-types@15.8.1:F1eP/KKS5NQ0iflvTEPenWZltp31hhxQ7mL9wYzJELU=:",
+  "react-is@16.13.1": "react-is@16.13.1:qb0MRFVn3OE37GB60Jr8crveic53PdhMhnO/V/iWDPw=:"
+}

package/config/rig.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+  "rigPackageName": "@excom/heft-rig",
+  "rigProfile": "default"
+}

package/index.css

@@ -0,0 +1,5 @@
+@import "./src/super-input.css";
+
+@layer {
+  @mixin module-super-input;
+}

package/index.ts

@@ -0,0 +1,17 @@
+import { SuperInput } from "./super-input";
+
+SuperInput.define();
+
+export { SuperInput };
+
+type T_HTMLSuperInputElement = typeof SuperInput.CustomElement;
+declare global {
+  interface HTMLSuperInputElement extends T_HTMLSuperInputElement {}
+  interface Window {
+    HTMLSuperInputElement: HTMLSuperInputElement;
+  }
+  interface HTMLElementTagNameMap {
+    "super-input": HTMLSuperInputElement;
+  }
+}
+export type { HTMLSuperInputElement };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@excom/super-input",
+  "version": "0.1.0",
+  "description": "<super-input> custom element",
+  "license": "MIT",
+  "engines": {
+    "node": ">=24.13.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "input-format": "^0.3.10",
+    "@excom/neutron": "^0.1.0",
+    "@excom/valence": "^0.1.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@excom/heft-rig": "^0.1.0"
+  },
+  "repository": {
+    "url": "excom-dev/nucleus",
+    "directory": "packages/super-input"
+  },
+  "homepage": "https://github.com/excom-dev/nucleus/tree/main/packages/super-input/support/docs/README.md",
+  "bugs": "https://github.com/excom-dev/nucleus/issues",
+  "keywords": [
+    "super-input",
+    "neutron",
+    "custom-elements"
+  ],
+  "excom": {
+    "packageType": "kit-element"
+  },
+  "scripts": {
+    "build": "node node_modules/@excom/heft-rig/scripts/vite-build.mjs",
+    "build:watch": "node node_modules/@excom/heft-rig/scripts/vite-build-watch.mjs",
+    "format": "node node_modules/@excom/heft-rig/scripts/format.mjs",
+    "test": "node node_modules/@excom/heft-rig/scripts/vitest.mjs",
+    "coverage": "node node_modules/@excom/heft-rig/scripts/coverage.mjs",
+    "dev": "node node_modules/@excom/heft-rig/scripts/vite-dev.mjs",
+    "preview": "node node_modules/@excom/heft-rig/scripts/vite-preview.mjs",
+    "build:package-metas": "node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs",
+    "build:docs": "node node_modules/@excom/heft-rig/scripts/build-docs.mjs"
+  }
+}

package/rush-logs/super-input.apply-exports.cache.log

@@ -0,0 +1 @@
+Caching has been disabled for this project's "apply-exports" command.

package/rush-logs/super-input.apply-exports.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/rush-logs/super-input.build_docs.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:docs" command, so caching has been disabled.

package/rush-logs/super-input.build_docs.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/rush-logs/super-input.build_package-metas.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:package-metas" command, so caching has been disabled.

package/rush-logs/super-input.build_package-metas.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/src/super-input.css

@@ -0,0 +1,372 @@
+@import "@excom/valence/src/util.default.css";
+
+/**
+ * Styles for `<super-input>`.
+ * @element super-input
+ */
+
+/* Aliases */
+@custom-selector :--super-input super-input, .tag-super-input;
+@custom-selector :--super-input--has-reflect-value
+  [reflect-value],
+  [data-reflect-value];
+@custom-selector :--super-input--has-current-value
+  [current-value],
+  [data-current-value];
+
+@define-mixin slider-track {
+  height: var(--super-input-track-height);
+  line-height: normal;
+  background: linear-gradient(
+    to right,
+    var(--super-input-accent) 0%,
+    var(--super-input-accent) var(--super-input-progress, 50%),
+    transparent var(--super-input-progress, 50%),
+    transparent 100%
+  );
+}
+
+@define-mixin slider-thumb {
+  margin: calc(
+      calc(var(--super-input-thumb-size) * -0.5) +
+        var(--super-input-track-height)
+    )
+    0 0 0;
+  box-sizing: border-box;
+  cursor: grab;
+  width: var(--super-input-thumb-size);
+  height: var(--super-input-thumb-size);
+  background: var(--super-input-thumb-color);
+  border-radius: var(--super-input-thumb-radius, 100%);
+  border: var(
+    --super-input-thumb-border,
+    var(--super-input-border-width) solid var(--super-input-primary)
+  );
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+@define-mixin module-super-input {
+  :root {
+    /**
+     * Foreground / label color.
+     * @cssproperty
+     * @syntax <color>
+     */
+    --super-input-color: var(--v-color, inherit);
+    /**
+     * Surface background behind the control (and raised-label mask).
+     * @cssproperty
+     * @syntax <color>
+     */
+    --super-input-bg: var(--v-form-element-background-color, transparent);
+    /**
+     * Default border color for raised inputs.
+     * @cssproperty
+     * @syntax <color>
+     */
+    --super-input-border-color: var(
+      --v-form-element-border-color,
+      currentColor
+    );
+    /**
+     * Focus ring / focus border color.
+     * @cssproperty
+     * @syntax <color>
+     */
+    --super-input-focus-color: var(
+      --v-form-element-focus-color,
+      var(--super-input-border-color)
+    );
+    /**
+     * Corner radius for raised inputs.
+     * @cssproperty
+     * @syntax <length>
+     */
+    --super-input-border-radius: var(--v-border-radius, 4px);
+    /**
+     * Border width for raised inputs.
+     * @cssproperty
+     * @syntax <length>
+     */
+    --super-input-border-width: var(--v-border-width, 1px);
+    /**
+     * Duration for border / label transitions.
+     * @cssproperty
+     * @syntax <time>
+     */
+    --super-input-transition-duration: var(--v-transition-duration-fast, 0.15s);
+    /**
+     * Easing for border / label transitions.
+     * @cssproperty
+     * @syntax *
+     */
+    --super-input-transition-ease: var(--v-transition-ease-out, ease-out);
+    /**
+     * Accent color (range fill, thumb border, focus chrome).
+     * @cssproperty
+     * @syntax <color>
+     */
+    --super-input-primary: var(--v-primary, blue);
+    /**
+     * Gap between a floating label and the control.
+     * @cssproperty
+     * @syntax <length>
+     */
+    --super-input-label-margin-bottom: calc(21px * 0.375);
+    /**
+     * Base font size for the control and value readout.
+     * @cssproperty
+     * @syntax <length>
+     */
+    --super-input-font-size: 16px;
+    /**
+     * Computed label line box height (used when a `<label>` is present).
+     * @cssproperty
+     * @syntax <length>
+     */
+    --super-input-label-height: calc(
+      var(--v-line-height, 1.5) * var(--super-input-font-size)
+    );
+  }
+
+  :--super-input {
+    &:has(input[type="range"]) {
+      /**
+       * Host height for range layout (thumb + value readout).
+       * @cssproperty
+       * @syntax <length>
+       */
+      --super-input-height: calc(var(--super-input-thumb-size) + 36px);
+      /**
+       * Host width for range layout.
+       * @cssproperty
+       * @syntax <length> | <percentage>
+       */
+      --super-input-width: 100%;
+      /**
+       * Range minimum. Prefer setting on the host (or via CSS): CSS cannot
+       * read the child input's `min` attribute from the parent.
+       * @cssproperty
+       * @syntax <number>
+       */
+      --super-input-min: 0;
+      /**
+       * Range maximum. Prefer setting on the host (or via CSS).
+       * @cssproperty
+       * @syntax <number>
+       */
+      --super-input-max: 100;
+      /**
+       * Current range value used for fill / readout positioning. With
+       * `reflect-value`, may be driven from `attr(current-value)` where
+       * typed `attr()` is supported.
+       * @cssproperty
+       * @syntax <number>
+       */
+      --super-input-value: 50;
+      /* START this will not work in safari or firefox yet */
+      --super-input-value: attr(current-value type(<number>));
+      /* END */
+      /** @internal */
+      --super-input-zero: calc(
+        var(--super-input-value) - var(--super-input-min, 0)
+      );
+      /** @internal */
+      --super-input-range: calc(
+        var(--super-input-max, 100) - var(--super-input-min, 0)
+      );
+      /** @internal */
+      --super-input-number-raw: calc(
+        calc(var(--super-input-zero) / var(--super-input-range)) *
+          calc(var(--super-input-width) - var(--super-input-thumb-size))
+      );
+      /** @internal Fill / readout progress position along the track. */
+      --super-input-progress: calc(
+        var(--super-input-number-raw) + calc(var(--super-input-thumb-size) / 2)
+      );
+      /**
+       * Diameter of the range thumb.
+       * @cssproperty
+       * @syntax <length>
+       */
+      --super-input-thumb-size: 44px;
+      /**
+       * Range thumb fill color.
+       * @cssproperty
+       * @syntax <color>
+       */
+      --super-input-thumb-color: var(
+        --v-range-thumb-color,
+        var(--super-input-bg)
+      );
+      /**
+       * Active track / accent color for the range fill.
+       * @cssproperty
+       * @syntax <color>
+       */
+      --super-input-accent: var(--super-input-primary, blue);
+
+      /**
+       * Height of the range track.
+       * @cssproperty
+       * @syntax <length>
+       */
+      --super-input-track-height: 2px;
+
+      /** @internal */
+      --super-input-value-content: attr(current-value);
+      /** @internal */
+      --super-input-value-bottom: var(--super-input-thumb-size);
+      /** @internal */
+      --super-input-value-transform: translate(-50%, 0);
+
+      display: block;
+      position: relative;
+      box-sizing: border-box;
+      font-size: var(--super-input-font-size);
+      /**
+       * Font weight for the range value readout.
+       * @cssproperty --super-input-font-weight
+       * @syntax <number> | <integer>
+       * @default 700
+       */
+      font-weight: var(--super-input-font-weight, 700);
+      height: var(--super-input-height, 100%);
+      width: var(--super-input-width, 100%);
+      &:has(label) {
+        padding-top: calc(
+          var(--super-input-label-height) + var(--super-input-height, 100%)
+        );
+        label {
+          position: absolute;
+          margin: 0;
+          top: 0;
+          left: 0;
+        }
+      }
+
+      input,
+      &::before {
+        position: absolute;
+        bottom: calc(var(--super-input-thumb-size) / 2);
+      }
+      &::before {
+        position: absolute;
+        display: block;
+        box-sizing: border-box;
+        text-align: center;
+        padding-bottom: var(--super-input-label-margin-bottom);
+        bottom: var(--super-input-value-bottom);
+        left: var(--super-input-progress);
+        content: var(--super-input-value-content);
+        transform: var(--super-input-value-transform);
+      }
+      input {
+        box-sizing: border-box;
+        margin: 0;
+        width: 100%;
+        background: var(--super-input-bg);
+        height: var(--super-input-track-height);
+        outline: none;
+        z-index: 2;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        /* Don't combine webkit + moz selectors; identical blocks still break WebKit. */
+        &::-webkit-slider-runnable-track {
+          @mixin slider-track;
+        }
+        &::-moz-range-track {
+          @mixin slider-track;
+        }
+        &::-webkit-slider-thumb {
+          @mixin slider-thumb;
+        }
+        &::-moz-range-thumb {
+          @mixin slider-thumb;
+        }
+      }
+    }
+
+    /**
+     * Raised / floating-label text field appearance. Apply as
+     * `class="raised"` on `<super-input>` wrapping a text-like `<input>`.
+     * @cssclass
+     */
+    &.raised {
+      display: block;
+      position: relative;
+      margin-top: 8px;
+
+      input {
+        @mixin util-nested-card;
+        font-size: 1rem;
+        padding: 0 10px 0 10px;
+        outline: none;
+        border-radius: var(--super-input-border-radius);
+        color: var(--super-input-color);
+        border: var(--super-input-border-width) solid
+          var(--super-input-border-color);
+        transition: border-color var(--super-input-transition-duration)
+          var(--super-input-transition-ease);
+        &:focus {
+          border-color: var(--super-input-focus-color) !important;
+        }
+        &::placeholder {
+          transition: color var(--super-input-transition-duration)
+            var(--super-input-transition-ease);
+        }
+      }
+      label {
+        position: absolute;
+        margin: 0;
+        font-size: 0.9rem;
+        line-height: var(--v-line-height, 16px);
+        top: -14px;
+        left: 10px;
+        background: transparent;
+        color: var(--super-input-color);
+        padding: 0 3px;
+        pointer-events: none;
+        z-index: 1;
+        transition:
+          top var(--super-input-transition-duration)
+            var(--super-input-transition-ease),
+          font-size var(--super-input-transition-duration)
+            var(--super-input-transition-ease);
+        &::after {
+          /* a line to hide input border behind label */
+          content: "";
+          position: absolute;
+          top: 12px;
+          left: 0;
+          width: 100%;
+          height: 4px;
+          z-index: -1;
+          background-color: var(--super-input-bg);
+        }
+      }
+
+      /* `[reflect-value]`: raised label even with no placeholder */
+      &:--super-input--has-reflect-value:not(:--super-input--has-current-value):not(
+          :has(input:focus)
+        ),
+      /* Else fall back to `:placeholder-shown` */
+      &:not(:--super-input--has-reflect-value):has(input:placeholder-shown):not(
+          :has(input:focus)
+        ) {
+        label {
+          font-size: 1rem;
+          top: 16px;
+          &::after {
+            content: none;
+          }
+        }
+        input::placeholder {
+          color: transparent;
+        }
+      }
+    }
+  }
+}

package/super-input.ts

@@ -0,0 +1,165 @@
+import { Neutron } from "@excom/neutron";
+// TODO swap this library for something lighter.
+import {
+  format as formatInput,
+  parse as parseInput,
+  parseDigit,
+  templateFormatter,
+  templateParser,
+} from "input-format";
+
+const formatValue = (
+  value: string,
+  selection: number,
+  textFormat: string,
+  parseFormat?: string
+) => {
+  const parser = templateParser(parseFormat ?? textFormat, parseDigit);
+  const formatter = templateFormatter(textFormat);
+  return formatInput(parseInput(value, -1, parser).value, selection, formatter)
+    .text;
+};
+
+/**
+ * Wrapper around a native `<input>` that adds live text formatting, auto-labeling, and
+ * a reflected value attribute. Does not replace the input — enhances it. Pair it with
+ * `<super-form>` for form-level submission handling.
+ *
+ * @descendant input - Required native `<input>` to enhance.
+ * @descendant ?label - Optional native `<label>`. When `auto-label` is set,
+ *   its `for` attribute is linked to the input's `id`.
+ *
+ * @example Basic
+ * <super-input auto-label>
+ *   <label>Name</label>
+ *   <input />
+ * </super-input>
+ *
+ * @example With text formatting
+ * <super-input text-format="(xxx) xxx-xxxx" auto-label>
+ *   <label>Phone</label>
+ *   <input pattern="^\(\d{3}\)\s\d{3}-\d{4}" />
+ * </super-input>
+ */
+export const SuperInput = Neutron({
+  tag: "super-input",
+  props: {
+    /**
+     * @option
+     * Pattern defining visible formatting. Use `x` for any digit and any
+     * other character as a literal. Examples: `(xxx) xxx-xxxx`, `xx/xx/xxxx`,
+     * `xxx-xx-xxxx`. When set, the input value is live-formatted on every
+     * keystroke.
+     */
+    textFormat: String,
+    /**
+     * @option
+     * If set, this message is installed via `setCustomValidity()` when the
+     * native `invalid` event fires, and cleared on the next `keydown`. Makes
+     * built-in HTML validation surface a custom message.
+     */
+    invalidMessage: String,
+    /**
+     * @option
+     * When set, the current input value is mirrored to the `current-value`
+     * attribute so CSS and selectors can respond to it. Off by default because
+     * reflecting every keystroke is not free.
+     */
+    reflectValue: Boolean,
+    /**
+     * @state
+     * Mirrors the wrapped `<input>`'s value when `reflect-value` is set.
+     * Read-only from the app's point of view — writing it does not change
+     * the input.
+     */
+    currentValue: String,
+    /**
+     * @option
+     * When set, generates or uses an existing `id` on the `<input>` and associates the `<label>`.
+     */
+    autoLabel: Boolean,
+    _inputElement: HTMLInputElement,
+  },
+})
+  .defineMethods({
+    doFormat: ({ textFormat, _inputElement }, parseFormat?: string) => {
+      if ((!!textFormat || parseFormat) && _inputElement?.value) {
+        return {
+          _inputElement: {
+            value: formatValue(
+              _inputElement!.value,
+              _inputElement!.selectionEnd ?? 0,
+              textFormat ?? "",
+              parseFormat
+            ),
+          },
+        };
+      }
+    },
+    setCurrentValue: ({ reflectValue, _inputElement }) => ({
+      currentValue: reflectValue ? _inputElement?.value || null : null,
+    }),
+    handleInput: ({ reflectValue }) => [
+      {
+        doFormat: [],
+      },
+      reflectValue && {
+        setCurrentValue: [],
+      },
+    ],
+    handleInvalid: ({ invalidMessage }) =>
+      invalidMessage && {
+        _inputElement: {
+          setCustomValidity: [invalidMessage],
+        },
+      },
+    handleValid: () => ({
+      _inputElement: {
+        setCustomValidity: [""],
+      },
+    }),
+  })
+  .onConnected((el) => ({
+    _inputElement: el.querySelector("input"),
+  }))
+  // formatting
+  .onPropChanged(
+    ["_inputElement", "reflectValue", "textFormat"],
+    ({ _inputElement, reflectValue, textFormat, handleInput }, previous) => [
+      // Rare: reformat the input programmatically
+      { doFormat: [previous?.textFormat ?? undefined] },
+      { setCurrentValue: [] },
+      _inputElement && {
+        _inputElement: {
+          // Same handler so these tasks stay in order
+          toggleListeners: [
+            ["input", handleInput, reflectValue || !!textFormat],
+          ],
+        },
+      },
+    ]
+  )
+  .onPropChanged(
+    ["_inputElement", "invalidMessage"],
+    ({ _inputElement, invalidMessage, handleInvalid, handleValid }) =>
+      !!_inputElement && {
+        _inputElement: {
+          toggleListeners: [
+            ["invalid", handleInvalid, !!invalidMessage],
+            ["keydown", handleValid, !!invalidMessage],
+          ],
+        },
+      }
+  )
+  .onPropChanged(["_inputElement", "autoLabel"], (ce) => {
+    const { _inputElement, autoLabel } = ce;
+    const labelElement = ce.querySelector("label");
+    if (_inputElement && autoLabel && labelElement) {
+      const labelValue =
+        _inputElement.id ||
+        labelElement.htmlFor ||
+        "super-input-" + Math.random().toString(36).substring(2, 10);
+      _inputElement.id = labelValue;
+      labelElement.htmlFor = labelValue;
+    }
+  });