@latty-ds/web 0.2.0

package/dist/components/datepicker/datepicker.d.ts

@@ -0,0 +1,52 @@
+import { ThemeableElement } from '../../base';
+import type { DatepickerType, DatepickerSize, DatepickerVariant } from './datepicker.types';
+import '../text/text';
+/**
+ * Date and time picker wrapping the native browser date/time input with design-system styling.
+ *
+ * @element lt-datepicker
+ *
+ * @fires {CustomEvent<{value: string}>} change - Fired when the value changes (on blur).
+ * @fires {CustomEvent<{value: string}>} input - Fired on every keystroke / picker selection.
+ *
+ * @example
+ * ```html
+ * <lt-datepicker label="Start date" type="date"></lt-datepicker>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-datepicker label="Meeting time" type="datetime-local" required></lt-datepicker>
+ * ```
+ */
+export declare class Datepicker extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Native input type. */
+    type: DatepickerType;
+    /** Current value in the format required by the native input (`YYYY-MM-DD`, `HH:MM`, or `YYYY-MM-DDTHH:MM`). */
+    value: string;
+    /** Minimum allowed value. */
+    min: string;
+    /** Maximum allowed value. */
+    max: string;
+    /** Field label displayed above the input. */
+    label: string;
+    /** Helper or error text displayed below the input. */
+    helperText: string;
+    /** Visual state variant. */
+    variant: DatepickerVariant;
+    /** Visual size. */
+    size: DatepickerSize;
+    /** Whether the field is disabled. */
+    disabled: boolean;
+    /** Whether the field is required. */
+    required: boolean;
+    /** Whether the field is read-only. */
+    readonly: boolean;
+    /** Name used in form submission. */
+    name: string;
+    private input;
+    private handleChange;
+    private handleInput;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,3 @@
+export type DatepickerType = 'date' | 'time' | 'datetime-local';
+export type DatepickerSize = 'sm' | 'md' | 'lg';
+export type DatepickerVariant = 'default' | 'success' | 'warning' | 'error';

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

@@ -0,0 +1,2 @@
+export { Datepicker } from './datepicker';
+export type { DatepickerType, DatepickerSize, DatepickerVariant } from './datepicker.types';

package/dist/components/datepicker/index.js

@@ -0,0 +1,416 @@
+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/datepicker/datepicker.ts
+import { html as html2, nothing } 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/datepicker/datepicker.ts
+import { customElement as customElement2, property as property3, query } from "lit/decorators.js";
+
+// src/components/datepicker/datepicker.styles.ts
+import { css } from "lit";
+var datepickerStyles = css`
+  :host {
+    display: block;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lt-spacing-1);
+  }
+
+  label {
+    color: var(--lt-text-default);
+    display: flex;
+    flex-direction: column;
+    gap: var(--lt-spacing-1);
+  }
+
+  .required-indicator {
+    color: var(--lt-color-error-500);
+  }
+
+  input {
+    background: var(--lt-bg-surface);
+    border-radius: var(--lt-border-radius);
+    border: 1px solid var(--lt-border-default);
+    color: var(--lt-text-default);
+    font-family: inherit;
+    font-size: 0.9375rem;
+    outline: none;
+    transition:
+      border-color 150ms ease,
+      box-shadow 150ms ease;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  input:focus {
+    border-color: var(--lt-border-primary);
+    box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle);
+  }
+
+  input:disabled {
+    background: var(--lt-bg-neutral-subtle);
+    color: var(--lt-text-subtle);
+    cursor: not-allowed;
+  }
+
+  /* Sizes */
+  :host([size='sm']) input {
+    font-size: 0.8125rem;
+    height: 32px;
+    padding: 0 var(--lt-spacing-2);
+  }
+  :host([size='md']) input,
+  :host(:not([size])) input {
+    font-size: 0.9375rem;
+    height: 40px;
+    padding: 0 var(--lt-spacing-3);
+  }
+  :host([size='lg']) input {
+    font-size: 1rem;
+    height: 48px;
+    padding: 0 var(--lt-spacing-4);
+  }
+
+  /* Variants */
+  :host([variant='success']) input {
+    border-color: var(--lt-color-success-500);
+  }
+  :host([variant='success']) input:focus {
+    box-shadow: 0 0 0 3px var(--lt-bg-success-subtle);
+  }
+  :host([variant='warning']) input {
+    border-color: var(--lt-color-warning-500);
+  }
+  :host([variant='warning']) input:focus {
+    box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle);
+  }
+  :host([variant='error']) input {
+    border-color: var(--lt-color-error-500);
+  }
+  :host([variant='error']) input:focus {
+    box-shadow: 0 0 0 3px var(--lt-bg-error-subtle);
+  }
+
+  .helper-text {
+    color: var(--lt-text-subtle);
+    font-size: 0.8125rem;
+  }
+
+  :host([variant='error']) .helper-text {
+    color: var(--lt-color-error-600);
+  }
+  :host([variant='success']) .helper-text {
+    color: var(--lt-color-success-600);
+  }
+  :host([variant='warning']) .helper-text {
+    color: var(--lt-color-warning-700);
+  }
+`;
+
+// src/utils/dispatch.ts
+var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, ...init }));
+
+// 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/datepicker/datepicker.ts
+var Datepicker = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.type = "date";
+    this.value = "";
+    this.min = "";
+    this.max = "";
+    this.label = "";
+    this.helperText = "";
+    this.variant = "default";
+    this.size = "md";
+    this.disabled = false;
+    this.required = false;
+    this.readonly = false;
+    this.name = "";
+  }
+  handleChange() {
+    this.value = this.input.value;
+    dispatch(this, "change", { value: this.value });
+  }
+  handleInput() {
+    this.value = this.input.value;
+    dispatch(this, "input", { value: this.value });
+  }
+  render() {
+    const inputEl = html2`
+      <input
+        type=${this.type}
+        .value=${this.value}
+        min=${this.min || nothing}
+        max=${this.max || nothing}
+        name=${this.name || nothing}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ?readonly=${this.readonly}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+      />
+    `;
+    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>` : nothing} ${inputEl}
+            </label>` : inputEl}
+        ${this.helperText ? html2`<span class="helper-text">${this.helperText}</span>` : nothing}
+      </div>
+    `;
+  }
+};
+Datepicker.styles = datepickerStyles;
+__decorateClass([
+  property3({ reflect: true })
+], Datepicker.prototype, "type", 2);
+__decorateClass([
+  property3()
+], Datepicker.prototype, "value", 2);
+__decorateClass([
+  property3()
+], Datepicker.prototype, "min", 2);
+__decorateClass([
+  property3()
+], Datepicker.prototype, "max", 2);
+__decorateClass([
+  property3()
+], Datepicker.prototype, "label", 2);
+__decorateClass([
+  property3({ attribute: "helper-text" })
+], Datepicker.prototype, "helperText", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Datepicker.prototype, "variant", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Datepicker.prototype, "size", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Datepicker.prototype, "disabled", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Datepicker.prototype, "required", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Datepicker.prototype, "readonly", 2);
+__decorateClass([
+  property3()
+], Datepicker.prototype, "name", 2);
+__decorateClass([
+  query("input")
+], Datepicker.prototype, "input", 2);
+Datepicker = __decorateClass([
+  customElement2("lt-datepicker")
+], Datepicker);
+export {
+  Datepicker
+};

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,114 @@
+import { ThemeableElement } from '../../base';
+import { DialogSize } from './dialog.types';
+import '../icon-button/icon-button';
+import '../surface/surface';
+import '../text/text';
+/**
+ * Dialog component (modal) with backdrop, animations, and accessibility features.
+ *
+ * @element lt-dialog
+ *
+ * Features:
+ * - Multiple size options (sm, md, lg, xl, fullscreen)
+ * - Backdrop overlay with configurable click-to-close
+ * - Close on Escape key
+ * - Header with optional title and close button
+ * - Scrollable body content
+ * - Optional footer for actions
+ * - Focus trap and restoration
+ * - Custom open/close events
+ * - Accessible with aria-modal and role="dialog"
+ *
+ * @slot - Dialog body content
+ * @slot header - Custom header content (overrides title prop)
+ * @slot footer - Footer content (typically for action buttons)
+ *
+ * @fires dialog-open - Fired when dialog opens
+ * @fires dialog-close - Fired when dialog closes
+ *
+ * @example
+ * ```html
+ * <lt-dialog open title="Confirm Action">
+ *   <p>Are you sure you want to proceed?</p>
+ *   <div slot="footer">
+ *     <lt-button variant="neutral">Cancel</lt-button>
+ *     <lt-button variant="primary">Confirm</lt-button>
+ *   </div>
+ * </lt-dialog>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-dialog size="lg" open title="Settings" no-close-button>
+ *   <p>Dialog content here...</p>
+ * </lt-dialog>
+ * ```
+ */
+export declare class Dialog extends ThemeableElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Size of the dialog (affects max width).
+     * @default 'md'
+     */
+    size: DialogSize;
+    /**
+     * Whether the dialog is open.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Dialog title displayed in the header.
+     * @default ''
+     */
+    title: string;
+    /**
+     * Suppress the built-in close button in the header.
+     * @default false
+     */
+    noCloseButton: boolean;
+    /**
+     * Whether clicking the backdrop closes the dialog.
+     * @default true
+     */
+    closeOnBackdropClick: boolean;
+    /**
+     * Whether pressing Escape closes the dialog.
+     * @default true
+     */
+    closeOnEscape: boolean;
+    /**
+     * Renders the dialog title in small caps with wider letter spacing.
+     * @default false
+     */
+    uppercase: boolean;
+    /**
+     * Apply a frosted-glass blur effect to the backdrop.
+     * @default false
+     */
+    backdropBlur: boolean;
+    private dialogElement?;
+    private previouslyFocusedElement?;
+    /**
+     * Opens the dialog.
+     */
+    show(): void;
+    /**
+     * Closes the dialog.
+     */
+    hide(): void;
+    /**
+     * Toggles the dialog open/closed state.
+     */
+    toggle(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private handleOpen;
+    private handleClose;
+    private restoreFocus;
+    private handleKeydown;
+    private handleBackdropClick;
+    private handleCloseClick;
+    render(): import("lit").TemplateResult<1>;
+    private hasSlot;
+}

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

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

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

@@ -0,0 +1,11 @@
+/**
+ * Size variant of the dialog component.
+ * Determines the width and overall size of the dialog.
+ *
+ * - `sm`: 400px max width
+ * - `md`: 600px max width (default)
+ * - `lg`: 800px max width
+ * - `xl`: 1000px max width
+ * - `fullscreen`: Full viewport width and height
+ */
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';

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

@@ -0,0 +1,2 @@
+export { Dialog } from './dialog';
+export type { DialogSize } from './dialog.types';