@latty-ds/web 0.2.0

package/dist/components/textfield/index.js

@@ -0,0 +1,718 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/components/textfield/textfield.ts
+import { html as html2 } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+// src/base/themeable-element.ts
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+var ThemeableElement = class extends LitElement {
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("theme")) {
+      this._syncThemeAttribute();
+    }
+  }
+  _syncThemeAttribute() {
+    if (this.theme === "dark" || this.theme === "light") {
+      this.setAttribute("data-theme", this.theme);
+    } else {
+      this.removeAttribute("data-theme");
+    }
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], ThemeableElement.prototype, "theme", 2);
+
+// src/components/textfield/textfield.ts
+import { customElement as customElement2, property as property3, state } from "lit/decorators.js";
+
+// src/components/textfield/textfield.styles.ts
+import { css } from "lit";
+var textfieldStyles = css`
+  :host {
+    display: inline-block;
+    font-family: 'Hanken Grotesk', sans-serif;
+    width: 100%;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lt-spacing-1);
+    width: 100%;
+  }
+
+  label {
+    color: var(--lt-text-subtle);
+  }
+
+  .input-container {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: var(--lt-spacing-2);
+  }
+
+  .icon-start,
+  .icon-end {
+    color: var(--lt-text-muted);
+    flex-shrink: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .icon-start {
+    left: var(--lt-spacing-3);
+  }
+
+  .icon-end {
+    right: var(--lt-spacing-3);
+  }
+
+  .password-toggle {
+    pointer-events: auto;
+    cursor: pointer;
+    transition: color 120ms ease;
+  }
+
+  .password-toggle:hover {
+    color: var(--lt-text-default);
+  }
+
+  .variant-icon {
+    pointer-events: none;
+  }
+
+  :host([variant='success']) .variant-icon {
+    color: var(--lt-interactive-success-bg);
+  }
+
+  :host([variant='warning']) .variant-icon {
+    color: var(--lt-interactive-warning-bg);
+  }
+
+  :host([variant='error']) .variant-icon,
+  :host([data-invalid]) .variant-icon {
+    color: var(--lt-interactive-error-bg);
+  }
+
+  input,
+  textarea {
+    background: var(--lt-bg-subtle);
+    border-radius: var(--lt-border-radius);
+    border: 1px solid var(--lt-border-default);
+    box-sizing: border-box;
+    color: var(--lt-text-default);
+    font-family: inherit;
+    font-weight: 400;
+    transition:
+      border-color 120ms ease,
+      box-shadow 120ms ease;
+    width: 100%;
+  }
+
+  textarea {
+    min-height: 80px;
+    padding-block: var(--lt-spacing-3);
+    resize: vertical;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--lt-text-muted);
+  }
+
+  input:hover:not(:disabled),
+  textarea:hover:not(:disabled) {
+    border-color: var(--lt-border-strong);
+  }
+
+  input:focus,
+  textarea:focus {
+    border-color: var(--lt-interactive-primary-bg);
+    box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle);
+    outline: none;
+  }
+
+  input:disabled,
+  textarea:disabled {
+    background: var(--lt-bg-surface);
+    color: var(--lt-text-muted);
+    cursor: not-allowed;
+  }
+
+  /* sizes */
+  :host([size='sm']) input,
+  :host([size='sm']) textarea {
+    font-size: 0.875rem;
+    height: 32px;
+    padding-inline: var(--lt-spacing-3);
+  }
+
+  :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));
+  }
+
+  :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));
+  }
+
+  :host([size='md']) input,
+  :host([size='md']) textarea {
+    font-size: 1rem;
+    height: 40px;
+    padding-inline: var(--lt-spacing-4);
+  }
+
+  :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));
+  }
+
+  :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));
+  }
+
+  :host([size='lg']) input,
+  :host([size='lg']) textarea {
+    font-size: 1.0625rem;
+    height: 48px;
+    padding-inline: var(--lt-spacing-5);
+  }
+
+  :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));
+  }
+
+  :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));
+  }
+
+  :host([size='lg']) .icon-start,
+  :host([size='lg']) .icon-end {
+    width: 24px;
+    height: 24px;
+  }
+
+  /* variants */
+  :host([variant='success']) input,
+  :host([variant='success']) textarea {
+    border-color: var(--lt-border-success-strong);
+  }
+
+  :host([variant='success']) input:focus,
+  :host([variant='success']) textarea:focus {
+    border-color: var(--lt-interactive-success-bg-hover);
+    box-shadow: 0 0 0 3px var(--lt-bg-success-subtle);
+  }
+
+  :host([variant='warning']) input,
+  :host([variant='warning']) textarea {
+    border-color: var(--lt-border-warning-strong);
+  }
+
+  :host([variant='warning']) input:focus,
+  :host([variant='warning']) textarea:focus {
+    border-color: var(--lt-interactive-warning-bg-hover);
+    box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle);
+  }
+
+  :host([variant='error']) input,
+  :host([variant='error']) textarea,
+  :host([data-invalid]) input,
+  :host([data-invalid]) textarea {
+    border-color: var(--lt-border-error-strong);
+  }
+
+  :host([variant='error']) input:focus,
+  :host([variant='error']) textarea:focus,
+  :host([data-invalid]) input:focus,
+  :host([data-invalid]) textarea:focus {
+    border-color: var(--lt-interactive-error-bg-hover);
+    box-shadow: 0 0 0 3px var(--lt-bg-error-subtle);
+  }
+
+  .helper-text {
+    color: var(--lt-text-subtle);
+  }
+
+  .helper-text::part(base) {
+    font-weight: 200;
+  }
+
+  :host([variant='success']) .helper-text {
+    color: var(--lt-text-success);
+  }
+
+  :host([variant='warning']) .helper-text {
+    color: var(--lt-text-warning);
+  }
+
+  :host([variant='error']) .helper-text,
+  :host([data-invalid]) .helper-text {
+    color: var(--lt-text-error);
+  }
+
+  .required-indicator {
+    color: var(--lt-color-error-500);
+  }
+
+  :host([uppercase]) label lt-text::part(base) {
+    font-variant-caps: small-caps;
+    letter-spacing: 0.05rem;
+    text-transform: lowercase;
+  }
+`;
+
+// src/components/textfield/textfield.ts
+import "@latty-ds/icons";
+
+// src/components/text/text.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+import { html, unsafeStatic } from "lit/static-html.js";
+
+// src/components/text/text.styles.ts
+import { css as css2 } from "lit";
+var textStyles = css2`
+  :host {
+    display: block;
+    color: inherit;
+  }
+
+  /* Inline variants sit in text flow */
+  :host([variant='caption']),
+  :host([variant='overline']),
+  :host([variant='label']) {
+    display: inline;
+  }
+
+  [part='base'] {
+    margin: 0;
+    color: inherit;
+    font-family: var(--lt-typography-fontfamily);
+  }
+
+  /* ── Display ─────────────────────────────────────────────────────────── */
+
+  :host([variant='display-2xl']) [part='base'] {
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='display-xl']) [part='base'] {
+    font-size: clamp(2rem, 5vw, 3.75rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='display-lg']) [part='base'] {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.15;
+    letter-spacing: -0.01em;
+  }
+
+  /* ── Headings ─────────────────────────────────────────────────────────── */
+
+  :host([variant='h1']) [part='base'] {
+    font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='h2']) [part='base'] {
+    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+  }
+
+  :host([variant='h3']) [part='base'] {
+    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.3;
+  }
+
+  :host([variant='h4']) [part='base'] {
+    font-size: 1.25rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.35;
+  }
+
+  :host([variant='h5']) [part='base'] {
+    font-size: 1.125rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+
+  :host([variant='h6']) [part='base'] {
+    font-size: 1rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+
+  /* ── Body ─────────────────────────────────────────────────────────────── */
+
+  :host([variant='lead']) [part='base'] {
+    font-size: 1.25rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  :host([variant='body']) [part='base'],
+  :host(:not([variant])) [part='base'] {
+    font-size: 1rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  :host([variant='body-sm']) [part='base'] {
+    font-size: 0.875rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  /* ── Inline ───────────────────────────────────────────────────────────── */
+
+  :host([variant='caption']) [part='base'] {
+    font-size: 0.75rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.5;
+  }
+
+  :host([variant='overline']) [part='base'] {
+    font-size: 0.6875rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.2;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  :host([variant='label']) [part='base'] {
+    font-size: 0.875rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+`;
+
+// src/components/text/text.ts
+var VARIANT_TAG = {
+  "display-2xl": "p",
+  "display-xl": "p",
+  "display-lg": "p",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  lead: "p",
+  body: "p",
+  "body-sm": "p",
+  caption: "span",
+  overline: "span",
+  label: "span"
+};
+var Text = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "body";
+    this.as = "";
+  }
+  render() {
+    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    return html`<${tag} part="base"><slot></slot></${tag}>`;
+  }
+};
+Text.styles = textStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Text.prototype, "variant", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Text.prototype, "as", 2);
+Text = __decorateClass([
+  customElement("lt-text")
+], Text);
+
+// src/components/textfield/textfield.ts
+var Textfield = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "default";
+    this.size = "md";
+    this.type = "text";
+    this.value = "";
+    this.placeholder = "";
+    this.label = "";
+    this.helperText = "";
+    this.disabled = false;
+    this.required = false;
+    this.readonly = false;
+    this.iconStart = "";
+    this.rows = 3;
+    this.min = null;
+    this.max = null;
+    this.uppercase = false;
+    this.isPasswordVisible = false;
+    this._touched = false;
+    this._autoError = false;
+    this._onBlur = (e) => {
+      const native = e.target;
+      this.value = native.value;
+      this._touched = true;
+      this._autoError = !this._validate();
+    };
+  }
+  /**
+   * Handles input events from the native input or textarea element.
+   * Updates the component's value property and dispatches a custom input event.
+   *
+   * @param e - The native input event
+   * @private
+   */
+  _validate() {
+    const v = this.value;
+    if (!v) return true;
+    if (this.type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) return false;
+    if (this.type === "url") {
+      try {
+        new URL(v);
+      } catch {
+        return false;
+      }
+    }
+    if (this.type === "tel" && !/^[+\d][\d\s()\-.]{2,}$/.test(v)) return false;
+    if (this.type === "number") {
+      const n = Number(v);
+      if (isNaN(n)) return false;
+      if (this.min !== null && n < this.min) return false;
+      if (this.max !== null && n > this.max) return false;
+    } else {
+      if (this.min !== null && v.length < this.min) return false;
+      if (this.max !== null && v.length > this.max) return false;
+    }
+    return true;
+  }
+  handleInput(e) {
+    const input = e.target;
+    this.value = input.value;
+    if (this._touched) this._autoError = !this._validate();
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Handles change events from the native input or textarea element.
+   * Updates the component's value property and dispatches a custom change event.
+   *
+   * @param e - The native change event
+   * @private
+   */
+  handleChange(e) {
+    const input = e.target;
+    this.value = input.value;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Toggles password visibility for password-type inputs.
+   * Switches between showing plain text and masked password.
+   *
+   * @private
+   */
+  togglePasswordVisibility() {
+    this.isPasswordVisible = !this.isPasswordVisible;
+  }
+  /**
+   * Determines the appropriate end icon based on input type and variant.
+   *
+   * Password inputs show eye/eye-off toggle icon.
+   * Non-default variants show their respective state icons.
+   * Default variant shows no end icon.
+   *
+   * @returns The icon name to display, or empty string if no icon should be shown
+   * @private
+   */
+  getEndIconName() {
+    if (this.type === "password") return this.isPasswordVisible ? "eye-off" : "eye";
+    const effectiveVariant = this._autoError ? "error" : this.variant;
+    switch (effectiveVariant) {
+      case "success":
+        return "check-circle";
+      case "warning":
+        return "warning-triangle";
+      case "error":
+        return "xmark-circle";
+      default:
+        return "";
+    }
+  }
+  updated(changed) {
+    super.updated(changed);
+    this.toggleAttribute("data-invalid", this._autoError);
+  }
+  render() {
+    const hasStartIcon = Boolean(this.iconStart);
+    const isPasswordField = this.type === "password";
+    const isMultiline = this.type === "multiline";
+    const isNumber = this.type === "number";
+    const endIconName = this.getEndIconName();
+    const hasEndIcon = Boolean(endIconName);
+    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;
+    return html2`
+      <div class="wrapper">
+        ${this.label ? html2`
+              <label>
+                <lt-text variant="label" as="span">${this.label}</lt-text>
+                ${this.required ? html2`<span class="required-indicator">*</span>` : ""}
+              </label>
+            ` : ""}
+        <div class="input-container">
+          ${hasStartIcon ? html2`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : ""}
+          ${isMultiline ? html2`
+                <textarea
+                  .value=${this.value}
+                  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}
+                  ?required=${this.required}
+                  ?readonly=${this.readonly}
+                  @input=${this.handleInput}
+                  @change=${this.handleChange}
+                  @blur=${this._onBlur}
+                  aria-label=${this.label || this.placeholder}
+                  aria-invalid=${isInvalid ? "true" : "false"}
+                  class=${hasStartIcon ? "has-start-icon" : ""}
+                  ${hasEndIcon ? "has-end-icon" : ""}
+                ></textarea>
+              ` : html2`
+                <input
+                  type=${actualInputType}
+                  .value=${this.value}
+                  placeholder=${this.placeholder}
+                  min=${ifDefined(isNumber && this.min !== null ? this.min : void 0)}
+                  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}
+                  ?required=${this.required}
+                  ?readonly=${this.readonly}
+                  @input=${this.handleInput}
+                  @change=${this.handleChange}
+                  @blur=${this._onBlur}
+                  aria-label=${this.label || this.placeholder}
+                  aria-invalid=${isInvalid ? "true" : "false"}
+                  class=${hasStartIcon ? "has-start-icon" : ""}
+                  ${hasEndIcon ? "has-end-icon" : ""}
+                />
+              `}
+          ${hasEndIcon ? html2`
+                <lt-icon
+                  class="icon-end ${isPasswordField ? "password-toggle" : "variant-icon"}"
+                  name=${endIconName}
+                  @click=${isPasswordField ? this.togglePasswordVisibility : null}
+                ></lt-icon>
+              ` : ""}
+        </div>
+        ${resolvedHelperText ? html2`<lt-text variant="caption" as="span" class="helper-text">${resolvedHelperText}</lt-text>` : ""}
+      </div>
+    `;
+  }
+};
+Textfield.styles = textfieldStyles;
+__decorateClass([
+  property3({ reflect: true })
+], Textfield.prototype, "variant", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Textfield.prototype, "size", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Textfield.prototype, "type", 2);
+__decorateClass([
+  property3()
+], Textfield.prototype, "value", 2);
+__decorateClass([
+  property3()
+], Textfield.prototype, "placeholder", 2);
+__decorateClass([
+  property3()
+], Textfield.prototype, "label", 2);
+__decorateClass([
+  property3({ attribute: "helper-text" })
+], Textfield.prototype, "helperText", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Textfield.prototype, "disabled", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Textfield.prototype, "required", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Textfield.prototype, "readonly", 2);
+__decorateClass([
+  property3({ attribute: "icon-start" })
+], Textfield.prototype, "iconStart", 2);
+__decorateClass([
+  property3({ type: Number })
+], Textfield.prototype, "rows", 2);
+__decorateClass([
+  property3({ type: Number })
+], Textfield.prototype, "min", 2);
+__decorateClass([
+  property3({ type: Number })
+], Textfield.prototype, "max", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Textfield.prototype, "uppercase", 2);
+__decorateClass([
+  state()
+], Textfield.prototype, "isPasswordVisible", 2);
+__decorateClass([
+  state()
+], Textfield.prototype, "_touched", 2);
+__decorateClass([
+  state()
+], Textfield.prototype, "_autoError", 2);
+Textfield = __decorateClass([
+  customElement2("lt-textfield")
+], Textfield);
+export {
+  Textfield
+};