@latty-ds/web 0.2.0

package/dist/components/color-input/index.js

@@ -0,0 +1,489 @@
+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/color-input/color-input.ts
+import { html as html2 } from "lit";
+import { customElement as customElement2, property as property3 } from "lit/decorators.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/color-input/color-input.styles.ts
+import { css } from "lit";
+var colorInputStyles = 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%;
+    cursor: pointer;
+  }
+
+  :host([disabled]) .wrapper {
+    cursor: not-allowed;
+  }
+
+  .label {
+    color: var(--lt-text-subtle);
+  }
+
+  .input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: var(--lt-bg-subtle);
+    border: 1px solid var(--lt-border-default);
+    border-radius: var(--lt-border-radius);
+    box-sizing: border-box;
+    transition:
+      border-color 120ms ease,
+      box-shadow 120ms ease;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .input-container:hover:not(:has(.native-picker:disabled)) {
+    border-color: var(--lt-border-strong);
+  }
+
+  .input-container:focus-within {
+    border-color: var(--lt-interactive-primary-bg);
+    box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle);
+    outline: none;
+  }
+
+  :host([disabled]) .input-container {
+    background: var(--lt-bg-surface);
+  }
+
+  .color-swatch {
+    flex-shrink: 0;
+    border-radius: 50%;
+    border: 1.5px solid rgb(0 0 0 / 0.15);
+    box-sizing: border-box;
+  }
+
+  .color-swatch.empty {
+    border-style: dashed;
+    border-color: var(--lt-border-default);
+    background: repeating-conic-gradient(var(--lt-bg-muted) 0% 25%, transparent 0% 50%) 0 0 / 8px 8px;
+  }
+
+  .display-value {
+    flex: 1;
+    color: var(--lt-text-default);
+    font-family: inherit;
+    font-weight: 400;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .display-value.is-placeholder {
+    color: var(--lt-text-muted);
+  }
+
+  :host([disabled]) .display-value {
+    color: var(--lt-text-muted);
+  }
+
+  .icon-end {
+    flex-shrink: 0;
+    color: var(--lt-text-muted);
+    pointer-events: none;
+  }
+
+  /* The native picker is invisible but covers the entire container to handle all click/keyboard events */
+  .native-picker {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+  }
+
+  .native-picker:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ── sizes ───────────────────────────────────────────────────────────────── */
+
+  :host([size='sm']) .input-container {
+    height: 32px;
+    padding-inline: var(--lt-spacing-3);
+    gap: var(--lt-spacing-2);
+    font-size: 0.875rem;
+  }
+
+  :host([size='sm']) .color-swatch {
+    width: 14px;
+    height: 14px;
+  }
+
+  :host([size='md']) .input-container {
+    height: 40px;
+    padding-inline: var(--lt-spacing-4);
+    gap: var(--lt-spacing-2);
+    font-size: 1rem;
+  }
+
+  :host([size='md']) .color-swatch {
+    width: 16px;
+    height: 16px;
+  }
+
+  :host([size='lg']) .input-container {
+    height: 48px;
+    padding-inline: var(--lt-spacing-5);
+    gap: var(--lt-spacing-3);
+    font-size: 1.0625rem;
+  }
+
+  :host([size='lg']) .color-swatch {
+    width: 20px;
+    height: 20px;
+  }
+
+  :host([size='lg']) .icon-end {
+    width: 24px;
+    height: 24px;
+  }
+`;
+
+// src/components/color-input/color-input.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/color-input/color-input.ts
+function hexToRgbTuple(hex) {
+  const m = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return m ? [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)] : null;
+}
+function hexToHslTuple(hex) {
+  const rgb = hexToRgbTuple(hex);
+  if (!rgb) return null;
+  const [r, g, b] = rgb.map((v) => v / 255);
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, Math.round(l * 100)];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) h = ((b - r) / d + 2) / 6;
+  else h = ((r - g) / d + 4) / 6;
+  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+}
+function hslToHex(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const k = (n) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  const toHexByte = (x) => Math.round(x * 255).toString(16).padStart(2, "0");
+  return `#${toHexByte(f(0))}${toHexByte(f(8))}${toHexByte(f(4))}`;
+}
+function toHex(value) {
+  value = value.trim();
+  if (!value) return "";
+  if (/^#[0-9a-f]{6}$/i.test(value)) return value.toLowerCase();
+  if (/^#[0-9a-f]{3}$/i.test(value)) {
+    const [, r, g, b] = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(value);
+    return `#${r}${r}${g}${g}${b}${b}`;
+  }
+  const rgb = value.match(/^rgb\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)\s*\)$/i);
+  if (rgb) {
+    const toB = (n) => Number(n).toString(16).padStart(2, "0");
+    return `#${toB(rgb[1])}${toB(rgb[2])}${toB(rgb[3])}`;
+  }
+  const hsl = value.match(/^hsl\(\s*(\d+)[,\s]+(\d+)%[,\s]+(\d+)%\s*\)$/i);
+  if (hsl) return hslToHex(Number(hsl[1]), Number(hsl[2]), Number(hsl[3]));
+  return "";
+}
+function formatColor(hex, format) {
+  if (format === "rgb") {
+    const t = hexToRgbTuple(hex);
+    return t ? `rgb(${t[0]}, ${t[1]}, ${t[2]})` : hex;
+  }
+  if (format === "hsl") {
+    const t = hexToHslTuple(hex);
+    return t ? `hsl(${t[0]}, ${t[1]}%, ${t[2]}%)` : hex;
+  }
+  return hex;
+}
+var ColorInput = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.format = "hex";
+    this.label = "";
+    this.placeholder = "Pick a color";
+    this.disabled = false;
+    this.size = "md";
+  }
+  _handleChange(e) {
+    const pickerHex = e.target.value;
+    this.value = formatColor(pickerHex, this.format);
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    const hex = toHex(this.value);
+    return html2`
+      <label class="wrapper">
+        ${this.label ? html2`<span class="label"><lt-text variant="label" as="span">${this.label}</lt-text></span>` : ""}
+        <span class="input-container">
+          <span class="color-swatch ${hex ? "" : "empty"}" style="background: ${hex || "transparent"}"></span>
+          <span class="display-value ${hex ? "" : "is-placeholder"}"> ${this.value || this.placeholder} </span>
+          <lt-icon class="icon-end" name="color-palette"></lt-icon>
+          <input
+            type="color"
+            class="native-picker"
+            .value=${hex || "#000000"}
+            ?disabled=${this.disabled}
+            aria-label=${this.label || this.placeholder}
+            @change=${this._handleChange}
+          />
+        </span>
+      </label>
+    `;
+  }
+};
+ColorInput.styles = colorInputStyles;
+__decorateClass([
+  property3()
+], ColorInput.prototype, "value", 2);
+__decorateClass([
+  property3({ reflect: true })
+], ColorInput.prototype, "format", 2);
+__decorateClass([
+  property3()
+], ColorInput.prototype, "label", 2);
+__decorateClass([
+  property3()
+], ColorInput.prototype, "placeholder", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], ColorInput.prototype, "disabled", 2);
+__decorateClass([
+  property3({ reflect: true })
+], ColorInput.prototype, "size", 2);
+ColorInput = __decorateClass([
+  customElement2("lt-color-input")
+], ColorInput);
+export {
+  ColorInput
+};

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,59 @@
+import { ThemeableElement } from '../../base';
+import type { ComboboxOption, ComboboxSize, ComboboxVariant } from './combobox.types';
+import '@latty-ds/icons';
+import '../text/text';
+/**
+ * Searchable single-select combobox. The user types to filter options; selecting an option sets the value.
+ *
+ * @element lt-combobox
+ *
+ * @fires {CustomEvent<{value: string, label: string}>} change - Fired when the selected value changes.
+ *
+ * @example
+ * ```html
+ * <lt-combobox
+ *   label="Country"
+ *   placeholder="Search countries…"
+ *   .options=${[{ value: 'us', label: 'United States' }, { value: 'ca', label: 'Canada' }]}
+ * ></lt-combobox>
+ * ```
+ */
+export declare class Combobox extends ThemeableElement {
+    static styles: import("lit").CSSResult[];
+    /** Array of selectable options. Set as a JS property (`.options`). */
+    options: ComboboxOption[];
+    /** Currently selected value. */
+    value: string;
+    /** Field label displayed above the input. */
+    label: string;
+    /** Placeholder text shown when nothing is typed. */
+    placeholder: string;
+    /** Helper or error text displayed below the input. */
+    helperText: string;
+    /** Visual state variant. */
+    variant: ComboboxVariant;
+    /** Visual size. */
+    size: ComboboxSize;
+    /** Whether the field is disabled. */
+    disabled: boolean;
+    /** Whether the field is required. */
+    required: boolean;
+    /** Name used in form submission. */
+    name: string;
+    private query;
+    private open;
+    private activeIndex;
+    private _cleanupClickOutside;
+    private _floatingCleanup;
+    private get selectedLabel();
+    private get filtered();
+    private openDropdown;
+    private closeDropdown;
+    private selectOption;
+    private handleInput;
+    private handleFocus;
+    private handleKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,7 @@
+export type ComboboxSize = 'sm' | 'md' | 'lg';
+export type ComboboxVariant = 'default' | 'success' | 'warning' | 'error';
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { Combobox } from './combobox';
+export type { ComboboxOption, ComboboxSize, ComboboxVariant } from './combobox.types';