@latty-ds/web 0.10.3 → 1.0.0

package/dist/components/text/text.d.ts

@@ -27,7 +27,7 @@ export declare class Text extends ThemeableElement {
     static styles: import("lit").CSSResult;
     /** Typographic style to apply. */
     variant: TextVariant;
-    /** HTML tag to render. Defaults to the semantic tag for the chosen variant. */
+    /** HTML tag to render. Defaults to the semantic tag for the chosen variant; anything outside `TextTag` is ignored. */
     as: TextTag | '';
     render(): import("lit").TemplateResult;
 }

package/dist/components/textfield/index.js

@@ -10,7 +10,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/components/textfield/textfield.ts
-import { html as html2 } from "lit";
+import { html as html2, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 // src/base/themeable-element.ts
@@ -75,16 +76,25 @@ var textfieldStyles = css`
   }
 
   .icon-start {
-    left: var(--lt-spacing-3);
+    inset-inline-start: var(--lt-spacing-3);
   }
 
   .icon-end {
-    right: var(--lt-spacing-3);
+    inset-inline-end: var(--lt-spacing-3);
   }
 
+  /* Unlike .variant-icon (a decorative lt-icon), the password toggle is a real <button> — reset the native
+     chrome so it reads as an inline icon, and re-declare align-items since it's no longer a plain absolutely-
+     positioned element inheriting the .icon-start/.icon-end flex-adjacent layout by accident. */
   .password-toggle {
-    pointer-events: auto;
+    align-items: center;
+    background: none;
+    border: none;
     cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    padding: 0;
+    pointer-events: auto;
     transition: color 120ms ease;
   }
 
@@ -92,6 +102,16 @@ var textfieldStyles = css`
     color: var(--lt-text-default);
   }
 
+  .password-toggle:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .password-toggle:focus-visible {
+    outline: 2px solid var(--lt-border-focus);
+    outline-offset: 2px;
+  }
+
   .variant-icon {
     pointer-events: none;
   }
@@ -164,12 +184,12 @@ var textfieldStyles = css`
 
   :host([size='sm']) input.has-start-icon,
   :host([size='sm']) textarea.has-start-icon {
-    padding-left: calc(var(--lt-spacing-3) + 20px + var(--lt-spacing-2));
+    padding-inline-start: calc(var(--lt-spacing-3) + 20px + var(--lt-spacing-2));
   }
 
   :host([size='sm']) input.has-end-icon,
   :host([size='sm']) textarea.has-end-icon {
-    padding-right: calc(var(--lt-spacing-3) + 20px + var(--lt-spacing-2));
+    padding-inline-end: calc(var(--lt-spacing-3) + 20px + var(--lt-spacing-2));
   }
 
   :host([size='md']) input,
@@ -181,12 +201,12 @@ var textfieldStyles = css`
 
   :host([size='md']) input.has-start-icon,
   :host([size='md']) textarea.has-start-icon {
-    padding-left: calc(var(--lt-spacing-4) + 20px + var(--lt-spacing-2));
+    padding-inline-start: calc(var(--lt-spacing-4) + 20px + var(--lt-spacing-2));
   }
 
   :host([size='md']) input.has-end-icon,
   :host([size='md']) textarea.has-end-icon {
-    padding-right: calc(var(--lt-spacing-4) + 20px + var(--lt-spacing-2));
+    padding-inline-end: calc(var(--lt-spacing-4) + 20px + var(--lt-spacing-2));
   }
 
   :host([size='lg']) input,
@@ -198,12 +218,12 @@ var textfieldStyles = css`
 
   :host([size='lg']) input.has-start-icon,
   :host([size='lg']) textarea.has-start-icon {
-    padding-left: calc(var(--lt-spacing-5) + 24px + var(--lt-spacing-2));
+    padding-inline-start: calc(var(--lt-spacing-5) + 24px + var(--lt-spacing-2));
   }
 
   :host([size='lg']) input.has-end-icon,
   :host([size='lg']) textarea.has-end-icon {
-    padding-right: calc(var(--lt-spacing-5) + 24px + var(--lt-spacing-2));
+    padding-inline-end: calc(var(--lt-spacing-5) + 24px + var(--lt-spacing-2));
   }
 
   :host([size='lg']) .icon-start,
@@ -258,6 +278,25 @@ var textfieldStyles = css`
     font-weight: 200;
   }
 
+  /* .icon-end disables pointer events so decorative icons never swallow clicks; the clear button is the one real
+     control in that slot, so it opts back in and resets native button chrome. */
+  .clear-button {
+    align-items: center;
+    background: none;
+    border: 0;
+    border-radius: var(--lt-border-radius, 4px);
+    cursor: pointer;
+    display: flex;
+    padding: 0;
+    pointer-events: auto;
+  }
+
+  .counter {
+    color: var(--lt-text-subtle);
+    display: block;
+    text-align: end;
+  }
+
   :host([variant='success']) .helper-text {
     color: var(--lt-text-success);
   }
@@ -272,7 +311,7 @@ var textfieldStyles = css`
   }
 
   .required-indicator {
-    color: var(--lt-color-error-500);
+    color: var(--lt-text-error);
   }
 
   :host([uppercase]) label lt-text::part(base) {
@@ -280,8 +319,71 @@ var textfieldStyles = css`
     letter-spacing: 0.05rem;
     text-transform: lowercase;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .password-toggle,
+    input,
+    textarea {
+      transition: none;
+    }
+  }
 `;
 
+// src/components/shared/form-default.ts
+var FormDefaultController = class {
+  constructor(host, get) {
+    this._captured = false;
+    this._get = get;
+    host.addController(this);
+  }
+  hostConnected() {
+    if (this._captured) return;
+    this._captured = true;
+    this.value = this._get();
+  }
+};
+
+// src/components/shared/form-disabled.ts
+var FormDisabledController = class {
+  constructor(host) {
+    this._fieldsetDisabled = false;
+    this._host = host;
+    host.addController(this);
+  }
+  // No-op — this controller has no connect-time work of its own (formDisabledCallback drives it instead), but
+  // ReactiveController's members are all optional, and a class satisfying an all-optional interface with no
+  // members in common is a TS error (TS2559); this gives it one.
+  hostConnected() {
+  }
+  /** Whether an ancestor `<fieldset>` is currently disabled. */
+  get fieldsetDisabled() {
+    return this._fieldsetDisabled;
+  }
+  setFieldsetDisabled(disabled) {
+    if (this._fieldsetDisabled === disabled) return;
+    this._fieldsetDisabled = disabled;
+    this._host.requestUpdate();
+  }
+};
+
+// src/components/shared/form-validity.ts
+function toValidityFlags(validity) {
+  return {
+    valueMissing: validity.valueMissing,
+    typeMismatch: validity.typeMismatch,
+    patternMismatch: validity.patternMismatch,
+    tooLong: validity.tooLong,
+    tooShort: validity.tooShort,
+    rangeUnderflow: validity.rangeUnderflow,
+    rangeOverflow: validity.rangeOverflow,
+    stepMismatch: validity.stepMismatch,
+    badInput: validity.badInput,
+    customError: validity.customError
+  };
+}
+
 // src/components/textfield/textfield.ts
 import "@latty-ds/icons";
 
@@ -454,6 +556,20 @@ var textStyles = css2`
 `;
 
 // src/components/text/text.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "div",
+  "label",
+  "strong",
+  "em"
+]);
 var VARIANT_TAG = {
   "display-2xl": "p",
   "display-xl": "p",
@@ -478,7 +594,8 @@ var Text = class extends ThemeableElement {
     this.as = "";
   }
   render() {
-    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    const requested = this.as && ALLOWED_TAGS.has(this.as) ? this.as : "";
+    const tag = unsafeStatic(requested || VARIANT_TAG[this.variant] || "p");
     return html`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };
@@ -494,9 +611,23 @@ Text = __decorateClass([
 ], Text);
 
 // src/components/textfield/textfield.ts
+var textfieldCount = 0;
+var DEFAULT_LABELS = {
+  validationMessage: "Please match the requested format",
+  showPassword: "Show password",
+  hidePassword: "Hide password",
+  clear: "Clear"
+};
 var Textfield = class extends ThemeableElement {
   constructor() {
     super();
+    this._default = new FormDefaultController(this, () => this.value);
+    this._fieldsetDisabled = new FormDisabledController(this);
+    // Stable per-instance ids for `label for` and `aria-describedby` (TFD-4) — not the host's own `id` attribute,
+    // which a consumer may set for their own purposes (or leave unset).
+    this._uid = `lt-textfield-${textfieldCount++}`;
+    this._inputId = `${this._uid}-input`;
+    this._helperId = `${this._uid}-helper`;
     this.variant = "default";
     this.size = "md";
     this.type = "text";
@@ -513,6 +644,9 @@ var Textfield = class extends ThemeableElement {
     this.min = null;
     this.max = null;
     this.uppercase = false;
+    this.clearable = false;
+    this.counter = false;
+    this.labels = {};
     this.isPasswordVisible = false;
     this._touched = false;
     this._autoError = false;
@@ -522,8 +656,19 @@ var Textfield = class extends ThemeableElement {
       this._touched = true;
       this._autoError = !this._validate();
     };
+    // A native single-line <input> inside a <form> implicitly submits the form on Enter; the inner input here is
+    // in the shadow DOM, so the browser never wires that up on its own (TFD-2). Not on the multiline textarea —
+    // a native <textarea> never implicit-submits on Enter either, since Enter there means "new line".
+    this._onKeydown = (e) => {
+      if (e.key !== "Enter" || e.isComposing || this._isDisabled) return;
+      const form = this.closest("form");
+      form?.requestSubmit();
+    };
     this._internals = this.attachInternals();
   }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
   /**
    * Handles input events from the native input or textarea element.
    * Updates the component's value property and dispatches a custom input event.
@@ -574,6 +719,19 @@ var Textfield = class extends ThemeableElement {
    * @param e - The native change event
    * @private
    */
+  get _showClear() {
+    return this.clearable && !!this.value && !this._isDisabled && !this.readonly && this.type !== "password";
+  }
+  _clear() {
+    this.value = "";
+    if (this._touched) this._autoError = !this._validate();
+    const detail = { value: "" };
+    this.dispatchEvent(new CustomEvent("input", { detail, bubbles: true, composed: true }));
+    this.dispatchEvent(new CustomEvent("change", { detail, bubbles: true, composed: true }));
+    this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector("input, textarea")?.focus();
+    });
+  }
   handleChange(e) {
     e.stopPropagation();
     const input = e.target;
@@ -595,6 +753,12 @@ var Textfield = class extends ThemeableElement {
   togglePasswordVisibility() {
     this.isPasswordVisible = !this.isPasswordVisible;
   }
+  // Clicking the toggle would otherwise focus the button first (the default mousedown action), moving the
+  // caret out of the field. Suppressing just that default action leaves the click itself untouched, and the
+  // input stays focused throughout.
+  _preventFocusSteal(e) {
+    e.preventDefault();
+  }
   /**
    * Determines the appropriate end icon based on input type and variant.
    *
@@ -623,15 +787,27 @@ var Textfield = class extends ThemeableElement {
     super.updated(changed);
     this.toggleAttribute("data-invalid", this._autoError);
     this._internals.setFormValue(this.value || null);
-    const anchor = this.shadowRoot.querySelector("input") ?? this.shadowRoot.querySelector("textarea");
-    if (this.required && !this.value && anchor) {
-      this._internals.setValidity({ valueMissing: true }, "Please fill in this field", anchor);
+    const inner = this.shadowRoot.querySelector("input") ?? this.shadowRoot.querySelector("textarea");
+    if (!inner) return;
+    if (!inner.validity.valid) {
+      this._internals.setValidity(toValidityFlags(inner.validity), inner.validationMessage, inner);
+    } else if (!this._validate()) {
+      this._internals.setValidity({ customError: true }, this._labels.validationMessage, inner);
     } else {
       this._internals.setValidity({});
     }
   }
   formResetCallback() {
-    this.value = "";
+    this.value = this._default.value;
+    this._touched = false;
+    this._autoError = false;
+  }
+  formDisabledCallback(disabled) {
+    this._fieldsetDisabled.setFieldsetDisabled(disabled);
+  }
+  /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+  get _isDisabled() {
+    return this.disabled || this._fieldsetDisabled.fieldsetDisabled;
   }
   checkValidity() {
     return this._internals.checkValidity();
@@ -645,14 +821,16 @@ var Textfield = class extends ThemeableElement {
     const isMultiline = this.type === "multiline";
     const isNumber = this.type === "number";
     const endIconName = this.getEndIconName();
-    const hasEndIcon = Boolean(endIconName);
+    const showClear = this._showClear;
+    const hasEndIcon = Boolean(endIconName) || showClear;
     const actualInputType = isPasswordField && this.isPasswordVisible ? "text" : this.type;
     const isInvalid = this._autoError || this.variant === "error";
     const resolvedHelperText = typeof this.helperText === "function" ? this.helperText(isInvalid) : this.helperText;
+    const ariaLabel = this.label ? void 0 : this.placeholder || void 0;
     return html2`
       <div class="wrapper">
         ${this.label ? html2`
-              <label>
+              <label for=${this._inputId}>
                 <lt-text variant="label" as="span">${this.label}</lt-text>
                 ${this.required ? html2`<span class="required-indicator">*</span>` : ""}
               </label>
@@ -661,25 +839,27 @@ var Textfield = class extends ThemeableElement {
           ${hasStartIcon ? html2`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : ""}
           ${isMultiline ? html2`
                 <textarea
+                  id=${this._inputId}
                   .value=${this.value}
                   name=${ifDefined(this.name || void 0)}
                   placeholder=${this.placeholder}
                   rows=${this.rows}
                   minlength=${ifDefined(this.min !== null ? this.min : void 0)}
                   maxlength=${ifDefined(this.max !== null ? this.max : void 0)}
-                  ?disabled=${this.disabled}
+                  ?disabled=${this._isDisabled}
                   ?required=${this.required}
                   ?readonly=${this.readonly}
                   @input=${this.handleInput}
                   @change=${this.handleChange}
                   @blur=${this._onBlur}
-                  aria-label=${this.label || this.placeholder}
+                  aria-label=${ifDefined(ariaLabel)}
                   aria-invalid=${isInvalid ? "true" : "false"}
-                  class=${hasStartIcon ? "has-start-icon" : ""}
-                  ${hasEndIcon ? "has-end-icon" : ""}
+                  aria-describedby=${resolvedHelperText ? this._helperId : nothing}
+                  class=${classMap({ "has-start-icon": hasStartIcon, "has-end-icon": hasEndIcon })}
                 ></textarea>
               ` : html2`
                 <input
+                  id=${this._inputId}
                   type=${actualInputType}
                   .value=${this.value}
                   name=${ifDefined(this.name || void 0)}
@@ -688,27 +868,46 @@ var Textfield = class extends ThemeableElement {
                   max=${ifDefined(isNumber && this.max !== null ? this.max : void 0)}
                   minlength=${ifDefined(!isNumber && this.min !== null ? this.min : void 0)}
                   maxlength=${ifDefined(!isNumber && this.max !== null ? this.max : void 0)}
-                  ?disabled=${this.disabled}
+                  ?disabled=${this._isDisabled}
                   ?required=${this.required}
                   ?readonly=${this.readonly}
                   @input=${this.handleInput}
                   @change=${this.handleChange}
                   @blur=${this._onBlur}
-                  aria-label=${this.label || this.placeholder}
+                  @keydown=${this._onKeydown}
+                  aria-label=${ifDefined(ariaLabel)}
                   aria-invalid=${isInvalid ? "true" : "false"}
-                  class=${hasStartIcon ? "has-start-icon" : ""}
-                  ${hasEndIcon ? "has-end-icon" : ""}
+                  aria-describedby=${resolvedHelperText ? this._helperId : nothing}
+                  class=${classMap({ "has-start-icon": hasStartIcon, "has-end-icon": hasEndIcon })}
                 />
               `}
-          ${hasEndIcon ? html2`
-                <lt-icon
-                  class="icon-end ${isPasswordField ? "password-toggle" : "variant-icon"}"
-                  name=${endIconName}
-                  @click=${isPasswordField ? this.togglePasswordVisibility : null}
-                ></lt-icon>
-              ` : ""}
+          ${showClear ? html2`<button
+                type="button"
+                class="icon-end clear-button"
+                aria-label=${this._labels.clear}
+                @mousedown=${this._preventFocusSteal}
+                @click=${this._clear}
+              >
+                <lt-icon name="xmark"></lt-icon>
+              </button>` : ""}
+          ${endIconName ? isPasswordField ? html2`
+                  <button
+                    type="button"
+                    class="icon-end password-toggle"
+                    ?disabled=${this._isDisabled}
+                    aria-label=${this.isPasswordVisible ? this._labels.hidePassword : this._labels.showPassword}
+                    aria-pressed=${this.isPasswordVisible ? "true" : "false"}
+                    @mousedown=${this._preventFocusSteal}
+                    @click=${this.togglePasswordVisibility}
+                  >
+                    <lt-icon name=${endIconName}></lt-icon>
+                  </button>
+                ` : html2`<lt-icon class="icon-end variant-icon" name=${endIconName}></lt-icon>` : ""}
         </div>
-        ${resolvedHelperText ? html2`<lt-text variant="caption" as="span" class="helper-text">${resolvedHelperText}</lt-text>` : ""}
+        ${resolvedHelperText ? html2`<lt-text id=${this._helperId} variant="caption" as="span" class="helper-text"
+              >${resolvedHelperText}</lt-text
+            >` : ""}
+        ${this.counter && !isNumber && this.max !== null ? html2`<lt-text variant="caption" as="span" class="counter">${this.value.length} / ${this.max}</lt-text>` : ""}
       </div>
     `;
   }
@@ -725,7 +924,7 @@ __decorateClass([
   property3({ reflect: true })
 ], Textfield.prototype, "type", 2);
 __decorateClass([
-  property3({ reflect: true })
+  property3()
 ], Textfield.prototype, "value", 2);
 __decorateClass([
   property3({ reflect: true })
@@ -763,6 +962,15 @@ __decorateClass([
 __decorateClass([
   property3({ type: Boolean, reflect: true })
 ], Textfield.prototype, "uppercase", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Textfield.prototype, "clearable", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Textfield.prototype, "counter", 2);
+__decorateClass([
+  property3({ type: Object })
+], Textfield.prototype, "labels", 2);
 __decorateClass([
   state()
 ], Textfield.prototype, "isPasswordVisible", 2);

package/dist/components/textfield/textfield.d.ts

@@ -1,6 +1,6 @@
 import { PropertyValues } from 'lit';
 import { ThemeableElement } from '../../base';
-import { HelperText, TextfieldSize, TextfieldType, TextfieldVariant } from './textfield.types';
+import { HelperText, TextfieldSize, TextfieldType, TextfieldVariant, type TextfieldLabels } from './textfield.types';
 import '@latty-ds/icons';
 import '../text/text';
 /**
@@ -46,6 +46,11 @@ export declare class Textfield extends ThemeableElement {
     static styles: import("lit").CSSResult;
     static formAssociated: boolean;
     private _internals;
+    private _default;
+    private _fieldsetDisabled;
+    private readonly _uid;
+    private readonly _inputId;
+    private readonly _helperId;
     constructor();
     /**
      * Visual variant that determines styling and automatic end icon.
@@ -63,7 +68,10 @@ export declare class Textfield extends ThemeableElement {
      */
     type: TextfieldType;
     /**
-     * Current value of the input.
+     * Current value of the input. Not reflected as an attribute: for `type="password"` that would put whatever
+     * the user types in plain text in the DOM (`outerHTML`, DevTools, session-replay/DOM-mutation recorders) —
+     * visible via `getAttribute('value')`/`[value]` regardless of input type. Read the property, or the
+     * `input`/`change` event's `detail.value`, instead of an attribute selector.
      * @default ''
      */
     value: string;
@@ -132,6 +140,13 @@ export declare class Textfield extends ThemeableElement {
      * @default false
      */
     uppercase: boolean;
+    /** Overridable UI text (format validation message, password-toggle button labels), for i18n. English defaults — override only the keys you need. */
+    /** Shows a clear button while the field has a value. Not shown for password fields, which have their own toggle. */
+    clearable: boolean;
+    /** Shows the character count as `length / max` below the field. Uses `max` as the limit, which is also enforced natively. */
+    counter: boolean;
+    labels: Partial<TextfieldLabels>;
+    private get _labels();
     private isPasswordVisible;
     private _touched;
     private _autoError;
@@ -152,7 +167,10 @@ export declare class Textfield extends ThemeableElement {
      * @param e - The native change event
      * @private
      */
+    private get _showClear();
+    private _clear;
     private handleChange;
+    private _onKeydown;
     /**
      * Toggles password visibility for password-type inputs.
      * Switches between showing plain text and masked password.
@@ -160,6 +178,7 @@ export declare class Textfield extends ThemeableElement {
      * @private
      */
     private togglePasswordVisibility;
+    private _preventFocusSteal;
     /**
      * Determines the appropriate end icon based on input type and variant.
      *
@@ -173,6 +192,9 @@ export declare class Textfield extends ThemeableElement {
     private getEndIconName;
     updated(changed: PropertyValues): void;
     formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+    private get _isDisabled();
     checkValidity(): boolean;
     reportValidity(): boolean;
     render(): import("lit").TemplateResult<1>;

package/dist/components/textfield/textfield.types.d.ts

@@ -38,3 +38,14 @@ export type TextfieldType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'num
  * helperText={(error) => error ? 'Enter a valid email' : 'We\'ll never share your email'}
  */
 export type HelperText = string | ((error: boolean) => string);
+/** Overridable UI text for `lt-textfield`, for i18n. */
+export interface TextfieldLabels {
+    /** Validation message shown when the value fails a format rule HTML has no native constraint for (e.g. `tel`). */
+    validationMessage: string;
+    /** Accessible label for the password-visibility toggle when the password is hidden. */
+    showPassword: string;
+    /** Accessible label for the password-visibility toggle when the password is shown. */
+    hidePassword: string;
+    /** Accessible label for the clear button shown by `clearable`. */
+    clear: string;
+}