@latty-ds/web 0.2.0

package/dist/components/table/table.d.ts

@@ -0,0 +1,160 @@
+import { type PropertyValues } from 'lit';
+import { ThemeableElement } from '../../base';
+import { TableColumn, TableDensity, TableResponsiveMode, SortState } from './table.types';
+import '@latty-ds/icons';
+/**
+ * Table component with sorting, responsive modes, and extensive customization.
+ *
+ * @element lt-table
+ *
+ * Features:
+ * - Sortable columns with visual indicators
+ * - Two responsive modes: scroll (horizontal) and stack (cards on mobile)
+ * - Three density options: compact, normal, comfortable
+ * - Sticky columns support
+ * - Custom cell renderers
+ * - Hover and stripe effects
+ * - Loading and empty states
+ * - Column alignment and sizing
+ * - Hide columns on mobile
+ * - Accessible with keyboard navigation
+ *
+ * @fires sort-change - Fired when sort changes
+ *
+ * @example
+ * ```typescript
+ * const columns = [
+ *   { key: 'name', label: 'Name', sortable: true },
+ *   { key: 'email', label: 'Email', sortable: true },
+ *   { key: 'age', label: 'Age', sortable: true, align: 'right' }
+ * ];
+ *
+ * const data = [
+ *   { name: 'John Doe', email: 'john@example.com', age: 30 },
+ *   { name: 'Jane Smith', email: 'jane@example.com', age: 25 }
+ * ];
+ * ```
+ *
+ * Via JS property assignment (supports `render` and `sortFn`):
+ * ```javascript
+ * const table = document.querySelector('lt-table');
+ * table.columns = columns;
+ * table.data = data;
+ * ```
+ *
+ * Via JSON string attributes (SSR / Astro templates, no render/sortFn):
+ * ```html
+ * <lt-table
+ *   columns='[{"key":"name","label":"Name","sortable":true}]'
+ *   data='[{"name":"John Doe"}]'
+ *   density="normal"
+ *   responsive-mode="scroll"
+ *   hoverable
+ *   striped
+ * ></lt-table>
+ * ```
+ */
+export declare class Table<T = Record<string, unknown>> extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Column definitions for the table.
+     * Accepts a JS array (`.columns = [...]`) or a JSON string attribute (`columns='[...]'`).
+     * When passed as JSON, only serializable fields are supported (no `render` or `sortFn`).
+     * @default []
+     */
+    columns: TableColumn<T>[];
+    /**
+     * Data rows for the table.
+     * Accepts a JS array (`.data = [...]`) or a JSON string attribute (`data='[...]'`).
+     * @default []
+     */
+    data: T[];
+    /**
+     * Density/spacing of the table.
+     * @default 'normal'
+     */
+    density: TableDensity;
+    /**
+     * Responsive behavior on small screens.
+     * @default 'scroll'
+     */
+    responsiveMode: TableResponsiveMode;
+    /**
+     * Whether rows have a hover effect.
+     * @default false
+     */
+    hoverable: boolean;
+    /**
+     * Whether to show alternating row colors.
+     * @default false
+     */
+    striped: boolean;
+    /**
+     * Whether to show borders around cells.
+     * @default false
+     */
+    bordered: boolean;
+    /**
+     * Whether the table is in a loading state.
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * Message to display when there is no data.
+     * @default 'No data available'
+     */
+    emptyMessage: string;
+    /**
+     * Field name to use as a stable row identity key for efficient DOM reuse during sorts/updates.
+     * When omitted, falls back to the row's JSON representation.
+     * @default ''
+     */
+    rowKey: string;
+    /**
+     * Current sort state (controlled externally).
+     * If not provided, sorting is managed internally.
+     */
+    sort?: SortState;
+    /**
+     * Internal sort state (when not controlled externally).
+     */
+    private internalSort;
+    /**
+     * Sorted data based on current sort state.
+     */
+    private sortedData;
+    /**
+     * Gets the current effective sort state.
+     */
+    private get currentSort();
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    /**
+     * Updates the sorted data based on current sort state.
+     */
+    private updateSortedData;
+    /**
+     * Handles header click for sorting.
+     */
+    private handleHeaderClick;
+    /**
+     * Gets a cell value from a row using a key (supports nested keys).
+     */
+    private getCellValue;
+    /**
+     * Renders a cell's content.
+     */
+    private renderCell;
+    /**
+     * Renders the sort icon for a column header.
+     */
+    private renderSortIcon;
+    /**
+     * Renders the table header.
+     */
+    private renderHeader;
+    /**
+     * Renders the table body.
+     */
+    private renderBody;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,106 @@
+/**
+ * Responsive behavior of the table on small screens.
+ *
+ * - `scroll`: Horizontal scroll (default)
+ * - `stack`: Stack columns vertically as cards
+ */
+export type TableResponsiveMode = 'scroll' | 'stack';
+/**
+ * Density/size variant of the table.
+ *
+ * - `compact`: Reduced padding for dense data
+ * - `normal`: Standard padding (default)
+ * - `comfortable`: Increased padding for better readability
+ */
+export type TableDensity = 'compact' | 'normal' | 'comfortable';
+/**
+ * Sort direction for a column.
+ */
+export type SortDirection = 'asc' | 'desc' | null;
+/**
+ * Alignment for cell content.
+ */
+export type CellAlign = 'left' | 'center' | 'right';
+/**
+ * Configuration for a table column.
+ */
+export interface TableColumn<T = Record<string, unknown>> {
+    /**
+     * Unique key for this column (used to access data).
+     */
+    key: string;
+    /**
+     * Header label displayed in the table header.
+     */
+    label: string;
+    /**
+     * Whether this column is sortable.
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Custom sort function for this column.
+     * If not provided, default sorting (string/number comparison) is used.
+     */
+    sortFn?: (a: T, b: T, direction: 'asc' | 'desc') => number;
+    /**
+     * Width of the column (e.g., '200px', '20%', 'auto').
+     * @default 'auto'
+     */
+    width?: string;
+    /**
+     * Minimum width of the column (e.g., '100px').
+     */
+    minWidth?: string;
+    /**
+     * Text alignment for this column.
+     * @default 'left'
+     */
+    align?: CellAlign;
+    /**
+     * Whether to hide this column on mobile devices.
+     * @default false
+     */
+    hideOnMobile?: boolean;
+    /**
+     * Custom renderer function for cell content.
+     * Return a Lit TemplateResult (html`...`) or an HTMLElement for safe rendering.
+     * If not provided, the value is displayed as-is.
+     */
+    render?: (value: unknown, row: T, index: number) => unknown;
+    /**
+     * Whether this column should be sticky (fixed) when scrolling.
+     * @default false
+     */
+    sticky?: boolean;
+}
+/**
+ * Current sort state of the table.
+ */
+export interface SortState {
+    /**
+     * Key of the column being sorted.
+     */
+    key: string;
+    /**
+     * Direction of the sort.
+     */
+    direction: 'asc' | 'desc';
+}
+/**
+ * Event detail for sort change events.
+ */
+export interface SortChangeDetail {
+    /**
+     * Key of the column being sorted.
+     */
+    key: string;
+    /**
+     * New sort direction.
+     */
+    direction: 'asc' | 'desc';
+    /**
+     * Previous sort state (null if no previous sort).
+     */
+    previousSort: SortState | null;
+}

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

@@ -0,0 +1 @@
+export { Text } from './text';

package/dist/components/text/index.js

@@ -0,0 +1,207 @@
+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/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/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 } from "lit";
+var textStyles = css`
+  :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);
+export {
+  Text
+};

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

@@ -0,0 +1,32 @@
+import { ThemeableElement } from '../../base';
+import type { TextVariant, TextTag } from './text.types';
+/**
+ * Renders text with a predefined typographic style. Display and heading variants
+ * (display-2xl → h3) use fluid `clamp()` font sizes that scale between a mobile
+ * minimum and a desktop maximum. The rendered HTML tag matches the variant by
+ * default but can be overridden with the `as` attribute.
+ *
+ * Override font-weight on any variant with `--lt-text-weight`:
+ * ```css
+ * lt-text { --lt-text-weight: 700; }
+ * ```
+ *
+ * @element lt-text
+ * @cssprop [--lt-text-weight] - Overrides the default font-weight for the variant.
+ *
+ * @example
+ * ```html
+ * <lt-text variant="display-lg" as="h1">Hero heading</lt-text>
+ * <lt-text variant="h2" as="h3">Visually h2, semantically h3</lt-text>
+ * <lt-text variant="lead">Introductory paragraph.</lt-text>
+ * <lt-text variant="overline">Category</lt-text>
+ * ```
+ */
+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. */
+    as: TextTag | '';
+    render(): import("lit").TemplateResult;
+}

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

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

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

@@ -0,0 +1,2 @@
+export type TextVariant = 'display-2xl' | 'display-xl' | 'display-lg' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'lead' | 'body' | 'body-sm' | 'caption' | 'overline' | 'label';
+export type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label' | 'strong' | 'em';

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

@@ -0,0 +1,8 @@
+/**
+ * Textfield component module.
+ * Exports the Textfield web component and related type definitions.
+ *
+ * @module components/textfield
+ */
+export { Textfield } from './textfield';
+export type { HelperText, TextfieldSize, TextfieldType, TextfieldVariant } from './textfield.types';