@latty-ds/web 0.2.0

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

@@ -0,0 +1,168 @@
+import { PropertyValues } from 'lit';
+import { ThemeableElement } from '../../base';
+import { HelperText, TextfieldSize, TextfieldType, TextfieldVariant } from './textfield.types';
+import '@latty-ds/icons';
+import '../text/text';
+/**
+ * A customizable text input component with support for multiple variants, sizes, and input types.
+ * Supports both single-line inputs and multi-line textareas.
+ *
+ * @element lt-textfield
+ *
+ * @fires {CustomEvent<{value: string}>} input - Dispatched when the input value changes
+ * @fires {CustomEvent<{value: string}>} change - Dispatched when the input loses focus after a value change
+ *
+ * @example
+ * ```html
+ * <lt-textfield
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   required
+ * ></lt-textfield>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-textfield
+ *   variant="error"
+ *   label="Password"
+ *   type="password"
+ *   helper-text="Password must be at least 8 characters"
+ * ></lt-textfield>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-textfield
+ *   type="multiline"
+ *   label="Description"
+ *   placeholder="Enter description..."
+ *   rows="5"
+ * ></lt-textfield>
+ * ```
+ */
+export declare class Textfield extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Visual variant that determines styling and automatic end icon.
+     * @default 'default'
+     */
+    variant: TextfieldVariant;
+    /**
+     * Size of the textfield (affects height, font size, and padding).
+     * @default 'md'
+     */
+    size: TextfieldSize;
+    /**
+     * HTML input type. Password type includes automatic visibility toggle.
+     * @default 'text'
+     */
+    type: TextfieldType;
+    /**
+     * Current value of the input.
+     * @default ''
+     */
+    value: string;
+    /**
+     * Placeholder text shown when input is empty.
+     * @default ''
+     */
+    placeholder: string;
+    /**
+     * Label text displayed above the input.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Helper text displayed below the input. Can be a static string or a function
+     * that receives the current error state and returns the string to display.
+     * Color changes based on variant or auto-error state.
+     * @default ''
+     */
+    helperText: HelperText;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is required. Shows asterisk in label when true.
+     * @default false
+     */
+    required: boolean;
+    /**
+     * Whether the input is readonly.
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Icon name to display at the start of the input.
+     * @default ''
+     */
+    iconStart: string;
+    /**
+     * Number of visible text lines for multiline type (textarea).
+     * Only applies when type="multiline".
+     * @default 3
+     */
+    rows: number;
+    /**
+     * For type="number": minimum allowed value.
+     * For all other types: minimum character length.
+     * @default null
+     */
+    min: number | null;
+    /**
+     * For type="number": maximum allowed value.
+     * For all other types: maximum character length.
+     * @default null
+     */
+    max: number | null;
+    /**
+     * Renders the label in small caps with wider letter spacing.
+     * @default false
+     */
+    uppercase: boolean;
+    private isPasswordVisible;
+    private _touched;
+    private _autoError;
+    private _onBlur;
+    /**
+     * 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
+     */
+    private _validate;
+    private handleInput;
+    /**
+     * 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
+     */
+    private handleChange;
+    /**
+     * Toggles password visibility for password-type inputs.
+     * Switches between showing plain text and masked password.
+     *
+     * @private
+     */
+    private togglePasswordVisibility;
+    /**
+     * 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
+     */
+    private getEndIconName;
+    updated(changed: PropertyValues): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1 @@
+export declare const textfieldStyles: import("lit").CSSResult;

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

@@ -0,0 +1,40 @@
+/**
+ * Visual variant of the textfield component.
+ * Determines the border color, focus state, and automatic end icon.
+ *
+ * - `default`: Standard neutral state with no end icon
+ * - `success`: Green styling with check-circle icon
+ * - `warning`: Yellow/orange styling with warning-triangle icon
+ * - `error`: Red styling with xmark-circle icon
+ */
+export type TextfieldVariant = 'default' | 'success' | 'warning' | 'error';
+/**
+ * Size variant of the textfield component.
+ * Affects height, font size, and padding.
+ *
+ * - `sm`: 32px height, 0.875rem font size
+ * - `md`: 40px height, 1rem font size
+ * - `lg`: 48px height, 1.0625rem font size
+ */
+export type TextfieldSize = 'sm' | 'md' | 'lg';
+/**
+ * HTML input type for the textfield.
+ * Password type includes automatic visibility toggle with eye icon.
+ * Multiline type renders a textarea element instead of input.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+ */
+export type TextfieldType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'multiline';
+/**
+ * Helper text value — either a static string or a function that receives the
+ * current error state and returns the string to display.
+ *
+ * @example
+ * // Static
+ * helperText="Minimum 8 characters"
+ *
+ * @example
+ * // Dynamic — different message when invalid
+ * helperText={(error) => error ? 'Enter a valid email' : 'We\'ll never share your email'}
+ */
+export type HelperText = string | ((error: boolean) => string);

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './tooltip';
+export type { TooltipPlacement } from './tooltip.types';

package/dist/components/tooltip/index.js

@@ -0,0 +1,379 @@
+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/tooltip/tooltip.ts
+import { html as html2 } from "lit";
+
+// 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/tooltip/tooltip.ts
+import { customElement as customElement2, property as property3, query } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+// src/components/tooltip/tooltip.styles.ts
+import { css } from "lit";
+var tooltipStyles = css`
+  :host {
+    display: inline-block;
+    position: relative;
+    --lt-tooltip-offset: 8px;
+  }
+
+  .tooltip {
+    background: var(--lt-tooltip-bg, var(--lt-bg-inverse));
+    border-radius: 4px;
+    color: var(--lt-tooltip-color, var(--lt-text-inverse));
+    opacity: 0;
+    padding: var(--lt-spacing-1) var(--lt-spacing-2);
+    pointer-events: none;
+    position: absolute;
+    transition:
+      opacity 150ms ease,
+      visibility 150ms ease;
+    visibility: hidden;
+    white-space: nowrap;
+    z-index: 1000;
+  }
+
+  .arrow {
+    border: 5px solid transparent;
+    height: 0;
+    position: absolute;
+    width: 0;
+  }
+
+  :host(:hover) .tooltip,
+  :host(:focus-within) .tooltip {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  :host([disabled]) .tooltip,
+  :host(:not([content])) .tooltip,
+  :host([content='']) .tooltip {
+    display: none;
+  }
+
+  /* ── Top (default) ──────────────────────────── */
+
+  :host(:not([placement])) .tooltip,
+  :host([placement='top']) .tooltip {
+    bottom: calc(100% + var(--lt-tooltip-offset));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  :host(:not([placement])) .arrow,
+  :host([placement='top']) .arrow {
+    border-top-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
+    left: 50%;
+    top: 100%;
+    transform: translateX(-50%);
+  }
+
+  /* ── Bottom ─────────────────────────────────── */
+
+  :host([placement='bottom']) .tooltip {
+    left: 50%;
+    top: calc(100% + var(--lt-tooltip-offset));
+    transform: translateX(-50%);
+  }
+
+  :host([placement='bottom']) .arrow {
+    border-bottom-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  /* ── Left ───────────────────────────────────── */
+
+  :host([placement='left']) .tooltip {
+    right: calc(100% + var(--lt-tooltip-offset));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  :host([placement='left']) .arrow {
+    border-left-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  /* ── Right ──────────────────────────────────── */
+
+  :host([placement='right']) .tooltip {
+    left: calc(100% + var(--lt-tooltip-offset));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  :host([placement='right']) .arrow {
+    border-right-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`;
+
+// src/utils/color.ts
+var resolveColorValue = (value) => value.startsWith("--") ? `var(${value})` : value;
+
+// 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/tooltip/tooltip.ts
+var _tooltipIdCounter = 0;
+var Tooltip = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this._tooltipId = `lt-tooltip-${++_tooltipIdCounter}`;
+    this.content = "";
+    this.placement = "top";
+    this.disabled = false;
+    this.background = "";
+    this.color = "";
+  }
+  firstUpdated() {
+    const trigger = this._slot?.assignedElements()[0];
+    if (trigger) {
+      trigger.setAttribute("aria-describedby", this._tooltipId);
+    }
+  }
+  render() {
+    const tooltipStyle = styleMap({
+      ...this.background ? { "--_tooltip-bg": resolveColorValue(this.background) } : {},
+      ...this.color ? { "--_tooltip-color": resolveColorValue(this.color) } : {}
+    });
+    return html2`
+      <slot></slot>
+      <div class="tooltip" id=${this._tooltipId} role="tooltip" part="tooltip" aria-hidden="true" style=${tooltipStyle}>
+        <lt-text variant="caption" as="span">${this.content}</lt-text>
+        <span class="arrow" part="arrow"></span>
+      </div>
+    `;
+  }
+};
+Tooltip.styles = tooltipStyles;
+__decorateClass([
+  query("slot")
+], Tooltip.prototype, "_slot", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Tooltip.prototype, "content", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Tooltip.prototype, "placement", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Tooltip.prototype, "disabled", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Tooltip.prototype, "background", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Tooltip.prototype, "color", 2);
+Tooltip = __decorateClass([
+  customElement2("lt-tooltip")
+], Tooltip);
+export {
+  Tooltip
+};

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,42 @@
+import { ThemeableElement } from '../../base';
+import type { TooltipPlacement } from './tooltip.types';
+import '../text/text';
+/**
+ * Floating label that appears on hover or focus of its trigger element.
+ *
+ * @element lt-tooltip
+ *
+ * @slot - The trigger element the tooltip is anchored to.
+ *
+ * @example
+ * ```html
+ * <lt-tooltip content="Save document">
+ *   <lt-button>Save</lt-button>
+ * </lt-tooltip>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-tooltip content="Opens in a new tab" placement="bottom"
+ *   background="--lt-color-primary-600" color="#fff">
+ *   <a href="#">Learn more</a>
+ * </lt-tooltip>
+ * ```
+ */
+export declare class Tooltip extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    private _tooltipId;
+    private _slot;
+    /** Tooltip label text. */
+    content: string;
+    /** Placement of the tooltip relative to the trigger: top, bottom, left, or right. */
+    placement: TooltipPlacement;
+    /** Prevent the tooltip from showing. */
+    disabled: boolean;
+    /** Background color override. Accepts a hex value (#1a1a2e) or a CSS token name (--lt-color-primary-600). */
+    background: string;
+    /** Text color override. Accepts a hex value (#ffffff) or a CSS token name (--lt-color-neutral-50). */
+    color: string;
+    protected firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/tooltip/tooltip.styles.d.ts

@@ -0,0 +1 @@
+export declare const tooltipStyles: import("lit").CSSResult;

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

@@ -0,0 +1 @@
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';

package/dist/css/font-face.css

@@ -0,0 +1,22 @@
+/* Hanken Grotesk - Latin */
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/HankenGrotesk-Variable.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/HankenGrotesk-VariableItalic.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}