@kenlo/sds-design-system 0.9.9

package/components/Input/input.marko

@@ -0,0 +1,530 @@
+<!-- sds-input — ported from kdls-design-system v2.5.1 (0f3edf8) components/Input/Input.tsx.
+
+A text field with a floating label, per-type masking and validation, an optional
+incrementer for numbers, and a textarea mode.
+
+It hydrates. A field that masks as you type, reveals a password and validates on blur is
+interactive by definition; there is no stateless half of it to ship. Its input is a label,
+a value and flags.
+
+Divergences:
+
+`tel-inter` — the phone with a country selector — IS ported, and the flags are emoji rather
+than images fetched from flagcdn.com: that request hands a third party the IP address of
+every visitor who opens a form. See input-countries.js. The old note, kept for the shape
+of the argument it made:
+
+`tel-inter` — the country selector — needed a dropdown, which
+arrives with Menu. It also needs a decision first: KDLS fetches each flag from
+flagcdn.com, which hands the visitor's IP to a third party on every phone field. That is
+the same shape as the Google Fonts problem already recorded, and it should be settled
+rather than carried across by reflex.
+
+`defaultCountry`, `onlyCountries`, `excludeCountries` and `onCountryChange` belong to the
+international phone. KDLS fetches its flags from flagcdn.com,
+which hands the visitor's IP to a third party on every phone field on every page — the same
+shape of exposure as the Google Fonts question, and Rafael's call rather than mine. The type
+itself is absent, so the four attributes that configure it are too.
+
+Form integration is here. KDLS reads validateOn from a React context, which Marko 5 has no
+equivalent of — so sds-form writes it on the <form> element and the field asks the nearest
+one when it mounts, which is what context does expressed in the tree both already share.
+See components/Form/form-context.js. An explicit `validateOn` on the field still wins, as
+it does in KDLS. Without a form around it the field validates itself on blur, which is
+what it does with no
+Form anyway; how a Form coordinates its fields is a design decision of its own.
+
+The password eye and the incrementer chevrons were inline SVG in KDLS. They come from the
+icon set now, so they follow the icon sizing and colour like everything else.
+
+Validation runs on blur rather than on change. Telling someone their CPF is invalid while
+they are still typing the fourth digit is noise; KDLS's default was 'change' and this is a
+deliberate departure, reversible through validateOn. -->
+
+import { countryOf, flagOf, assertCountry, maskNational, searchCountries } from "./input-countries.js";
+import { assertInputType, assertFeedback, assertWidth, formatValue, nativeTypeFor,
+  inputModeFor, validate, isInternationalPhone, DOCUMENT_TYPES, PHONE_TYPES } from "./input-types.js";
+import { validateOnFor, SUBMIT_EVENT } from "../Form/form-context.js";
+import { rehyphenate } from "../../foundations/attrs.js";
+
+class {
+  onCreate(input) {
+    this.state = {
+      value: input.value ?? input.defaultValue ?? "",
+      country: input.defaultCountry ?? "br",
+      countryQuery: "",
+      showPassword: false,
+      error: null,
+      touched: false,
+    };
+  }
+
+  /**
+   * Write a value the component decided on, and tell the caller about it.
+   *
+   * The two places that do this — choosing a country, and the incrementer's +/− — passed
+   * `null` as the event. KDLS delivers a real one, so a consumer written against KDLS and
+   * reading `event.target.value` crashed on the first press of +. There is nothing exotic
+   * about what they need: the element the value now lives on.
+   *
+   * The value is written onto the element as well as into state. A field the reader has
+   * typed in holds its own value, and a re-render does not take it back — the same reason
+   * `handleInput` writes the mask back rather than trusting the next render to. The
+   * element is found through the root rather than by key, because the field is rendered
+   * inside a branch (input or textarea) and `getEl` does not resolve it from here.
+   */
+  report(value) {
+    const native = (this.el ?? this.getEl("field-root"))?.querySelector(".sds-input__native");
+    if (native) native.value = value;
+    // Before mount there is no element to point at, and a caller still gets the shape it
+    // reads rather than a null it has to guard.
+    this.input.onChange?.({ target: native ?? { value } }, value);
+  }
+
+  /** The country is the caller's when they hold it, ours otherwise. */
+  get country() {
+    return countryOf(this.input.country ?? this.state.country);
+  }
+
+  /**
+   * Choosing a country re-masks what is already typed: the digits are the same number,
+   * and only the way it is written changes.
+   */
+  pickCountry(code) {
+    if (this.input.country === undefined) this.state.country = code;
+    this.input.onCountryChange?.(code);
+
+    const digits = String(this.currentValue).replace(/\D/g, "");
+    const masked = maskNational(digits, code);
+
+    if (this.input.value === undefined) this.state.value = masked;
+    this.report(masked);
+    this.state.countryQuery = "";
+  }
+
+  /**
+   * The countries the open list shows.
+   *
+   * A getter rather than something computed in `onInput`, because `onInput` does not run
+   * when only state moves — and the query is state. See `.claude/component-rules.md` §1.
+   */
+  get countryOptions() {
+    return searchCountries(this.state.countryQuery);
+  }
+
+  setCountryQuery(query) {
+    this.state.countryQuery = query;
+  }
+
+  /** The next opening starts from the whole list, not from the last search. */
+  onCountryMenuOpen(open) {
+    if (!open) this.state.countryQuery = "";
+  }
+
+  onMount() {
+    const root = this.getEl("field-root");
+    // What the form around this field asked for, read once when it mounts. There is no
+    // context in Marko 5; see components/Form/form-context.js for why this is the shape.
+    this.formValidateOn = validateOnFor(root);
+
+    // A form that has been submitted wants every field to say what is wrong with it, even
+    // the ones nobody touched — which is the whole point of validateOn: "submit".
+    this.onFormSubmit = () => {
+      this.state.touched = true;
+      this.state.error = this.validateNow(this.currentValue);
+    };
+    root?.addEventListener(SUBMIT_EVENT, this.onFormSubmit);
+  }
+
+  onDestroy() {
+    this.getEl("field-root")?.removeEventListener(SUBMIT_EVENT, this.onFormSubmit);
+  }
+
+  get currentValue() {
+    return this.input.value !== undefined ? this.input.value : this.state.value;
+  }
+
+  /** How this field writes what is typed into it — by country when it has one. */
+  maskFor(raw) {
+    const { type = "text" } = this.input;
+    // The country selector is what `tel-inter` IS, rather than a flag set beside another
+    // type — see input-types.js. Decided by Rafael.
+    return isInternationalPhone(type)
+      ? maskNational(raw, this.country.code)
+      : formatValue(raw, type);
+  }
+
+  handleInput(event) {
+    const { onChange } = this.input;
+    const masked = this.maskFor(event.target.value);
+
+    // Writing the masked value back keeps the field and the model in step: without it the
+    // separators the mask inserts would be typed over on the next keystroke.
+    if (masked !== event.target.value) event.target.value = masked;
+    if (this.input.value === undefined) this.state.value = masked;
+
+    // Once a field has been marked invalid, revalidate as they fix it — leaving the error
+    // up while someone corrects it is the thing that makes forms feel broken. A form asking
+    // for `change` validates from the first keystroke instead of waiting to be left.
+    if (this.state.touched || this.validateOn === "change") {
+      this.state.touched = true;
+      this.state.error = this.validateNow(masked);
+    }
+
+    onChange?.(event, masked);
+  }
+
+  handleBlur(event) {
+    this.input.onBlur?.(event);
+    if (this.validateOn === "submit") return;
+    this.state.touched = true;
+    this.state.error = this.validateNow(this.currentValue);
+  }
+
+  /** The field's own answer, or the form's, or the default. */
+  get validateOn() {
+    return this.input.validateOn ?? this.formValidateOn ?? "blur";
+  }
+
+  validateNow(value) {
+    const { type = "text", label, rules, required, validateDocument = true } = this.input;
+    return validate(value, { type, label, rules, required, validateDocument });
+  }
+
+  togglePassword() {
+    this.state.showPassword = !this.state.showPassword;
+  }
+
+  step(direction) {
+    const { min, max, step = 1 } = this.input;
+    const current = parseFloat(this.currentValue || "0") || 0;
+    let next = current + direction * step;
+    if (min !== undefined) next = Math.max(next, min);
+    if (max !== undefined) next = Math.min(next, max);
+
+    const value = String(next);
+    if (this.input.value === undefined) this.state.value = value;
+    this.report(value);
+  }
+
+  stepUp() { this.step(1); }
+  stepDown() { this.step(-1); }
+}
+
+$ {
+  const {
+    label,
+    type = "text",
+    hint,
+    feedback = "none",
+    width = "fill",
+    placeholder,
+    name,
+    // `component.id`, not a random string. This one is read by the label's `for`, by
+    // `aria-describedby` and by the hint's own id — and being generated inside the render
+    // block it changed on EVERY render, so on a field the reader is typing into it changed
+    // on every keystroke, and it differed between the server render and hydration. Marko
+    // gives a stateful component an id that is stable across both.
+    id = `sds-input-${component.id}`,
+    rows = 3,
+    min,
+    max,
+    step,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    isLoading = false,
+    showIncrementer = false,
+    notificationCount,
+    iconLeft,
+    defaultCountry,
+    country: countryInput,
+    onCountryChange,
+    iconRight,
+    onClickIconRight,
+    autoComplete,
+    autoFocus,
+    tabIndex,
+    onKeyDown,
+    onFocus,
+    maxLength,
+    minLength,
+    pattern,
+    class: extraClass = "",
+  } = input;
+
+  // A field in a Kenlo site is 56px. Decided by Rafael, 2026-09-10: SearchBar is the only
+  // one that varies, at 40 and 48, and it gets those from sds-search-bar. Accepting a `size`
+  // here would offer every field in the product a variation that only one of them wants.
+  if (input.size) {
+    throw new Error("sds-input takes no `size` — a field is 56px. The 40px and 48px shells belong to sds-search-bar, which sds-search-bar is built on.");
+  }
+
+  if (!label) throw new Error("sds-input needs a `label` — the floating label is the field's name.");
+  assertInputType(type);
+  assertFeedback(feedback);
+  assertWidth(width);
+
+  const renderable = (value) => (value && value.renderBody) || value;
+
+  const value = component.currentValue;
+  // The render masks the value too, and it has to mask it the same way the typing did:
+  // `formatValue` knows types and nothing about countries, so on an international phone it
+  // wrote the Brazilian mask back over whatever country had just been chosen.
+  const displayValue = component.maskFor(value);
+
+  // An explicit feedback wins: a caller that knows the server rejected the value should
+  // not have it overwritten by a local check that passes.
+  const effectiveFeedback = feedback !== "none" ? feedback : (state.error ? "error" : "none");
+  const effectiveHint = hint ?? state.error ?? null;
+  const hintId = `${id}-hint`;
+
+  const loading = isLoading && !disabled;
+  const isTextarea = type === "textbox";
+  const showsIncrementer = type === "number" && showIncrementer;
+  assertCountry(countryInput ?? defaultCountry);
+
+  // A country selector only makes sense on a phone, and it replaces the left icon: the
+  // flag IS the icon there.
+  // The country selector is the type, not a flag beside it: `tel-inter` has one and
+  // nothing else does. It used to be `phoneInternational && (tel || cel)` — a boolean that
+  // meant nothing on eleven of the twelve types, and had to be guarded against the twelfth.
+  // Decided by Rafael; KDLS keeps the boolean.
+  const showsCountry = isInternationalPhone(type);
+  const country = component.country;
+  const showsLeftIcon = iconLeft && type !== "email" && !showsCountry;
+
+  // Three layers, which KDLS has and an earlier version of this port flattened into two:
+  // an outer box that owns the width, a column holding the field and its hint, and the
+  // field itself — which is the 56px flex row the icons sit inside. Collapsing them left
+  // .sds-input as a block, so the icon, the field and the toggle stacked vertically
+  // instead of sitting side by side.
+  const outerClass = [`sds-input-box sds-input-box--${width}`, extraClass].filter(Boolean).join(" ");
+
+  const fieldBoxClass = [
+    "sds-input",
+    // KDLS marks only the textbox. A modifier per type produced ten classes no rule
+    // matched — dead weight in every field's class attribute.
+    type === "textbox" ? "sds-input--textbox" : "",
+    effectiveFeedback !== "none" ? `sds-input--feedback-${effectiveFeedback}` : "",
+    disabled ? "sds-input--disabled" : "",
+    loading ? "sds-input--loading" : "",
+    value ? "sds-input--filled" : "",
+  ].filter(Boolean).join(" ");
+
+  const nativeAttrs = {
+    id,
+    name,
+    autocomplete: autoComplete,
+    placeholder,
+    disabled: disabled || null,
+    readonly: (readOnly || isLoading) || null,
+    required: (!disabled && required) || null,
+    maxlength: maxLength,
+    // Two constraints the port accepted and then dropped: neither reached the control, so
+    // a field asked to refuse a shape or a minimum length refused nothing at all, silently.
+    pattern: pattern ?? null,
+    minlength: minLength ?? null,
+    "aria-required": (!disabled && required) ? "true" : null,
+    "aria-invalid": effectiveFeedback === "error" ? "true" : null,
+    "aria-describedby": effectiveHint ? hintId : null,
+    // A wrapper that turns this field into something else has to be able to say so on
+    // the element the reader lands on. Select's input trigger is a listbox's combobox and
+    // was announcing itself as a plain readonly field — no role, no expanded state.
+    // Marko camelCases hyphenated attributes on a component tag, so they come back
+    // through rehyphenate; see foundations/attrs.js.
+    ...rehyphenate(Object.fromEntries(
+      Object.entries(input).filter(([key]) => /^(aria|data)[A-Z-]/.test(key)),
+    )),
+    role: input.role ?? null,
+  };
+}
+
+<div key="field-root" class=outerClass data-sds-field>
+  <div class=`sds-input-wrapper ${disabled ? "sds-input-wrapper--disabled" : ""}`.trim()>
+    // `rows` reached the <textarea> attribute and stopped there, and the stylesheet pins
+    // `min-height` to a 114px fallback that wins — so every textbox was the same height
+    // whatever was asked for. KDLS sets this variable from `rows`; the port kept the rule
+    // that reads it and lost the line that writes it. 24px a line plus the 42px the label
+    // and padding take, which is KDLS's arithmetic.
+    <div
+      class=fieldBoxClass
+      aria-busy=(loading ? "true" : null)
+      style=(isTextarea ? `--sds-textarea-min-height: ${rows * 24 + 42}px` : null)
+    >
+      <if(showsCountry)>
+        <!-- The flag opens the list and the dial code sits beside it, which is the whole
+             control: KDLS draws the same pair and fetches the flag as an image from a
+             third party. The flag is decorative — the country's name is in the list and
+             the button is named by its aria-label — so a Windows reader seeing "BR"
+             instead of 🇧🇷 loses nothing. -->
+        <sds-menu
+          class="sds-input__country"
+          trigger="custom"
+          placement="bottomLeft"
+          aria-label=`País: ${country.name}`
+          onOpenChange=(open) => component.onCountryMenuOpen(open)
+          emptyMessage="Nenhum país encontrado"
+          items=component.countryOptions.map((option) => ({
+            label: `${flagOf(option.code)}  ${option.name}  ${option.ddi}`,
+            active: option.code === country.code,
+            onClick: () => component.pickCountry(option.code),
+          }))
+        >
+          <!-- Fifteen rows is past the point where reading beats typing, and the panel is
+               capped at seven of them, so the rest are below the fold. The box goes in the
+               menu's header slot, which does not scroll with the list and which the menu
+               already focuses on open — so the list opens ready for the first keystroke. -->
+          <@header>
+            <div class="sds-input__country-search">
+              <sds-search-bar
+                size="sm"
+                labelMode="placeholder"
+                label="Buscar país"
+                filled=(state.countryQuery.length > 0)
+                onClear=() => component.setCountryQuery("")
+              >
+                <input
+                  type="text"
+                  class="sds-search-bar__input"
+                  value=state.countryQuery
+                  on-input((event) => component.setCountryQuery(event.target.value))
+                />
+              </sds-search-bar>
+            </div>
+          </@header>
+
+          <@triggerBody>
+            <span class="sds-input__country-flag" aria-hidden="true">${flagOf(country.code)}</span>
+            <span class="sds-input__country-ddi">${country.ddi}</span>
+            <span class="sds-input__country-chevron" aria-hidden="true">
+              <sds-icon size="sm"><fluent-chevron-down-regular/></sds-icon>
+            </span>
+          </@triggerBody>
+        </sds-menu>
+      </if>
+      <else-if(showsLeftIcon)>
+        <span class="sds-input__icon sds-input__icon--left" aria-hidden="true">
+          <sds-icon><${renderable(iconLeft)}/></sds-icon>
+        </span>
+      </else-if>
+
+      <div class="sds-input__field" data-label=label>
+        <sds-text as="label" variant="bodyMd" for=id
+          class=`sds-input__label ${required && !disabled ? "sds-input__label--required" : ""}`.trim()>
+          ${label}
+        </sds-text>
+
+        <if(isTextarea)>
+          <textarea
+            class="sds-input__native sds-input__native--textarea sds-scroll sds-scroll--thin"
+            rows=rows
+            value=displayValue
+            autofocus=(autoFocus || null)
+            tabindex=tabIndex
+            on-input("handleInput")
+            on-blur("handleBlur")
+            on-keydown(onKeyDown)
+            on-focus(onFocus)
+            ...nativeAttrs
+          />
+        </if>
+        <else>
+          <input
+            key="native"
+            class="sds-input__native"
+            type=nativeTypeFor(type, state.showPassword)
+            inputmode=inputModeFor(type)
+            value=displayValue
+            min=(type === "number" ? min : null)
+            max=(type === "number" ? max : null)
+            step=(type === "number" ? step : null)
+            autofocus=(autoFocus || null)
+            tabindex=tabIndex
+            on-input("handleInput")
+            on-blur("handleBlur")
+            on-keydown(onKeyDown)
+            on-focus(onFocus)
+            ...nativeAttrs
+          />
+        </else>
+      </div>
+
+      <if(type === "password")>
+        <button
+          type="button"
+          class="sds-input__password-toggle"
+          aria-label=(state.showPassword ? "Ocultar senha" : "Exibir senha")
+          aria-pressed=(state.showPassword ? "true" : "false")
+          on-click("togglePassword")
+        >
+          <sds-icon size="md">
+            <if(state.showPassword)><fluent-eye-off-regular/></if>
+            <else><fluent-eye-regular/></else>
+          </sds-icon>
+        </button>
+      </if>
+
+      <if(showsIncrementer)>
+        <div class="sds-input__spinner">
+          <button type="button" class="sds-input__spinner-btn" tabindex="-1"
+            aria-label="Aumentar"
+            disabled=((disabled || (max !== undefined && parseFloat(value || "0") >= max)) || null)
+            on-click("stepUp")>
+            <sds-icon size="xs"><fluent-chevron-up-regular/></sds-icon>
+          </button>
+          <button type="button" class="sds-input__spinner-btn" tabindex="-1"
+            aria-label="Diminuir"
+            disabled=((disabled || (min !== undefined && parseFloat(value || "0") <= min)) || null)
+            on-click("stepDown")>
+            <sds-icon size="xs"><fluent-chevron-down-regular/></sds-icon>
+          </button>
+        </div>
+      </if>
+
+      <if(notificationCount !== undefined && notificationCount > 0)>
+        <!-- No wrapper: KDLS renders it as a direct flex child of the field box, and a
+             wrapper with no rule behind it is an unstyled block in the middle of a row. -->
+        <sds-notification count=notificationCount size=24 showPlus/>
+      </if>
+
+      <if(loading)>
+        <span class="sds-input__icon sds-input__icon--right">
+          <sds-spinner size="sm" label="Carregando"/>
+        </span>
+      </if>
+      <else-if(iconRight)>
+        <span class="sds-input__icon sds-input__icon--right" aria-hidden=(onClickIconRight ? null : "true")>
+          <if(onClickIconRight)>
+            <!-- KDLS hung the handler on the icon itself, which rendered a clickable
+                 <span>: no focus, no Enter, no name. An action inside a field is a
+                 button. -->
+            <sds-icon-button
+              variant="neutral"
+              size="sm"
+              aria-label=(input.iconRightLabel ?? "Ação do campo")
+              disabled=(disabled || null)
+              onClick=onClickIconRight
+            >
+              <@icon><${renderable(iconRight)}/></@icon>
+            </sds-icon-button>
+          </if>
+          <else>
+            <sds-icon><${renderable(iconRight)}/></sds-icon>
+          </else>
+        </span>
+      </else-if>
+    </div>
+
+    <if(effectiveHint)>
+      <div class="sds-input__hint-row">
+        <!-- The feedback modifier is what colours it, and it was never written: the hint
+             carried `color="inherit"` and inherited the body's ink, so every hint read as
+             ordinary text and an error hint read as an ordinary hint. -->
+        <sds-text as="span" id=hintId variant="labelRegular" class=`sds-input__hint sds-input__hint--${effectiveFeedback}`>
+          ${effectiveHint}
+        </sds-text>
+      </div>
+    </if>
+  </div>
+</div>