@latty-ds/web 0.2.0

package/dist/base/index.d.ts

@@ -0,0 +1 @@
+export { ThemeableElement, type ComponentTheme } from './themeable-element';

package/dist/base/index.js

@@ -0,0 +1,35 @@
+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);
+export {
+  ThemeableElement
+};

package/dist/base/themeable-element.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, type PropertyValues } from 'lit';
+export type ComponentTheme = 'dark' | 'light';
+export declare class ThemeableElement extends LitElement {
+    /**
+     * Forces the component into a specific theme regardless of the page theme.
+     * `'dark'` | `'light'` — if unset, the component inherits the global scope theme.
+     *
+     * @example
+     * ```html
+     * <!-- Always dark, even on a light page -->
+     * <lt-surface theme="dark">…</lt-surface>
+     *
+     * <!-- Always light, even on a dark page -->
+     * <lt-button theme="light">Submit</lt-button>
+     * ```
+     */
+    theme?: ComponentTheme;
+    willUpdate(changed: PropertyValues<this>): void;
+    private _syncThemeAttribute;
+}

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,82 @@
+import { ThemeableElement } from '../../base';
+import { AccordionAppearance } from './accordion.types';
+import '@latty-ds/icons';
+import '../text/text';
+/**
+ * An accordion component using native details/summary elements.
+ * Provides collapsible content sections with smooth animations.
+ *
+ * @element lt-accordion
+ *
+ * @fires {CustomEvent<{open: boolean}>} toggle - Dispatched when the accordion is opened or closed
+ *
+ * @slot - Content to display when accordion is expanded
+ * @slot summary - Custom content for the summary/header (defaults to label property)
+ *
+ * @example
+ * ```html
+ * <lt-accordion label="What is Latty?">
+ *   Latty is a design system built with Web Components.
+ * </lt-accordion>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-accordion appearance="filled" label="Features" icon-start="settings" open>
+ *   <ul>
+ *     <li>Design tokens</li>
+ *     <li>Web Components</li>
+ *     <li>Accessible</li>
+ *   </ul>
+ * </lt-accordion>
+ * ```
+ */
+export declare class Accordion extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Label/title text for the accordion header.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Icon name to display at the start of the header.
+     * @default ''
+     */
+    iconStart: string;
+    /**
+     * Visual appearance of the accordion.
+     * @default 'default'
+     */
+    appearance: AccordionAppearance;
+    /**
+     * Whether the accordion is initially open.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Whether the accordion is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Renders the header label in small caps with wider letter spacing.
+     * @default false
+     */
+    uppercase: boolean;
+    private _details;
+    private _content;
+    private _contentInner;
+    private _animating;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Handles click on summary to animate the accordion.
+     * @private
+     */
+    private handleSummaryClick;
+    /**
+     * Handles the end of the transition to clear inline styles.
+     * @private
+     */
+    private handleTransitionEnd;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * Visual variant of the accordion component.
+ * Determines the styling of the accordion.
+ *
+ * - `default`: Standard appearance with border
+ * - `filled`: Filled background
+ * - `outlined`: Outlined with border only
+ * - `clean`: No border, no background — for embedding in sidebars or nested layouts
+ */
+export type AccordionAppearance = 'default' | 'filled' | 'outlined' | 'clean';

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

@@ -0,0 +1,8 @@
+/**
+ * Accordion component module.
+ * Exports the Accordion web component and related type definitions.
+ *
+ * @module components/accordion
+ */
+export { Accordion } from './accordion';
+export type { AccordionAppearance } from './accordion.types';

package/dist/components/accordion/index.js

@@ -0,0 +1,468 @@
+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/accordion/accordion.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/accordion/accordion.ts
+import { customElement as customElement2, property as property3, query } from "lit/decorators.js";
+
+// src/components/accordion/accordion.styles.ts
+import { css } from "lit";
+var accordionStyles = css`
+  :host {
+    display: block;
+    font-family: 'Hanken Grotesk', sans-serif;
+    width: 100%;
+  }
+
+  details {
+    border-radius: var(--lt-border-radius);
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease;
+  }
+
+  summary {
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+    border-radius: var(--lt-border-radius);
+    overflow: hidden;
+  }
+
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .summary-content {
+    align-items: center;
+    display: flex;
+    gap: var(--lt-spacing-3);
+    justify-content: space-between;
+    padding: var(--lt-accordion-summary-padding, var(--lt-spacing-4));
+  }
+
+  .start-icon {
+    color: var(--lt-text-subtle);
+    flex-shrink: 0;
+    font-size: 1.25rem;
+  }
+
+  .summary-text {
+    color: var(--lt-accordion-header-color, var(--lt-text-default));
+    flex: 1;
+  }
+
+  .summary-text::part(base) {
+    font-size: var(--lt-accordion-header-font-size, 1rem);
+    font-weight: var(--lt-accordion-header-font-weight, 600);
+  }
+
+  .chevron {
+    color: var(--lt-text-subtle);
+    flex-shrink: 0;
+    height: 20px;
+    transition: transform 200ms ease;
+    width: 20px;
+  }
+
+  details[open] .chevron {
+    transform: rotate(180deg);
+  }
+
+  summary:hover .chevron {
+    color: var(--lt-text-default);
+  }
+
+  summary:focus-visible {
+    outline: 2px solid var(--lt-border-focus);
+    outline-offset: 2px;
+    border-radius: var(--lt-border-radius);
+  }
+
+  .content {
+    height: 0;
+    overflow: hidden;
+    transition: height 200ms ease;
+  }
+
+  .content-inner {
+    color: var(--lt-text-subtle);
+    font-size: 0.9375rem;
+    line-height: 1.6;
+    padding: var(--lt-accordion-content-padding, 0 var(--lt-spacing-4) var(--lt-spacing-4));
+  }
+
+  /* Variant: default */
+  :host([appearance='default']) details {
+    background: var(--lt-bg-subtle);
+    border: 1px solid var(--lt-border-default);
+  }
+
+  :host([appearance='default']) details:hover {
+    border-color: var(--lt-border-strong);
+  }
+
+  /* Variant: filled */
+  :host([appearance='filled']) details {
+    background: var(--lt-bg-surface);
+    border: none;
+  }
+
+  :host([appearance='filled']) details:hover {
+    background: var(--lt-bg-overlay);
+  }
+
+  /* Variant: outlined */
+  :host([appearance='outlined']) details {
+    background: transparent;
+    border: 1px solid var(--lt-border-default);
+  }
+
+  :host([appearance='outlined']) details:hover {
+    border-color: var(--lt-border-strong);
+  }
+
+  /* Variant: clean */
+  :host([appearance='clean']) details {
+    background: transparent;
+    border: none;
+  }
+
+  /* Disabled state */
+  :host([disabled]) details {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  :host([uppercase]) .summary-text::part(base) {
+    font-variant-caps: small-caps;
+    letter-spacing: 0.05rem;
+    text-transform: lowercase;
+  }
+`;
+
+// src/components/accordion/accordion.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/accordion/accordion.ts
+var Accordion = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.iconStart = "";
+    this.appearance = "default";
+    this.open = false;
+    this.disabled = false;
+    this.uppercase = false;
+    this._animating = false;
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("open") && !this._animating) {
+      this._details.open = this.open;
+      this._content.style.height = this.open ? "auto" : "0px";
+    }
+  }
+  /**
+   * Handles click on summary to animate the accordion.
+   * @private
+   */
+  handleSummaryClick(e) {
+    e.preventDefault();
+    if (this.disabled) return;
+    this._animating = true;
+    if (this.open) {
+      const startHeight = this._contentInner.offsetHeight;
+      this.open = false;
+      this._content.style.height = `${startHeight}px`;
+      requestAnimationFrame(() => {
+        this._content.style.height = "0px";
+      });
+    } else {
+      this._details.open = true;
+      this.open = true;
+      const endHeight = this._contentInner.offsetHeight;
+      this._content.style.height = "0px";
+      requestAnimationFrame(() => {
+        this._content.style.height = `${endHeight}px`;
+      });
+    }
+    this.dispatchEvent(
+      new CustomEvent("toggle", {
+        detail: { open: this.open },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Handles the end of the transition to clear inline styles.
+   * @private
+   */
+  handleTransitionEnd() {
+    this._animating = false;
+    if (this.open) {
+      this._content.style.height = "auto";
+    } else {
+      this._details.open = false;
+    }
+  }
+  render() {
+    return html2`
+      <details>
+        <summary @click=${this.handleSummaryClick}>
+          <div class="summary-content">
+            ${this.iconStart ? html2`<lt-icon class="start-icon" name="${this.iconStart}"></lt-icon>` : ""}
+            <lt-text variant="h6" as="span" class="summary-text">
+              <slot name="summary">${this.label}</slot>
+            </lt-text>
+            <lt-icon class="chevron" name="caret-down" size="md"></lt-icon>
+          </div>
+        </summary>
+        <div class="content" @transitionend=${this.handleTransitionEnd}>
+          <div class="content-inner">
+            <slot></slot>
+          </div>
+        </div>
+      </details>
+    `;
+  }
+};
+Accordion.styles = accordionStyles;
+__decorateClass([
+  property3()
+], Accordion.prototype, "label", 2);
+__decorateClass([
+  property3({ attribute: "icon-start" })
+], Accordion.prototype, "iconStart", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Accordion.prototype, "appearance", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Accordion.prototype, "open", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Accordion.prototype, "disabled", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Accordion.prototype, "uppercase", 2);
+__decorateClass([
+  query("details")
+], Accordion.prototype, "_details", 2);
+__decorateClass([
+  query(".content")
+], Accordion.prototype, "_content", 2);
+__decorateClass([
+  query(".content-inner")
+], Accordion.prototype, "_contentInner", 2);
+Accordion = __decorateClass([
+  customElement2("lt-accordion")
+], Accordion);
+export {
+  Accordion
+};

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,51 @@
+import { ThemeableElement } from '../../base';
+import type { AlertVariant, AlertAppearance } from './alert.types';
+import '../icon-button/icon-button';
+import '../text/text';
+/**
+ * Inline notification for persistent contextual feedback.
+ *
+ * @element lt-alert
+ *
+ * @slot - Alert body. Accepts any HTML — bold, links, lists, etc.
+ *
+ * @fires close - Fired when the dismiss button is clicked, just before the element is removed.
+ *
+ * @example
+ * ```html
+ * <lt-alert variant="success" title="Upload complete">
+ *   Your file has been processed and is ready to download.
+ * </lt-alert>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-alert variant="error" closable>
+ *   Failed to save — <a href="#">retry</a>
+ * </lt-alert>
+ * ```
+ */
+export declare class Alert extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Visual style. */
+    variant: AlertVariant;
+    /** Visual treatment. `filled` uses a tinted background with border, `outlined` uses a white background with border, `solid` uses a solid color background with no border. */
+    appearance: AlertAppearance;
+    /** Optional bold heading above the body content. */
+    title: string;
+    /**
+     * Icon to show before the body. Leave empty for auto (shows variant icon for status variants),
+     * set to `"none"` to suppress, or pass any icon name to override.
+     */
+    icon: string;
+    /** Show a dismiss button. Clicking it fires lt-close and removes the element. */
+    closable: boolean;
+    /** Background color override. Accepts a hex value (#1a1a2e) or a CSS token name (--lt-color-primary-600). */
+    background: string;
+    /** Renders the title in small caps with wider letter spacing. */
+    uppercase: boolean;
+    private static readonly _iconMap;
+    private _handleClose;
+    private get _resolvedIcon();
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,2 @@
+export type AlertVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+export type AlertAppearance = 'filled' | 'outlined' | 'solid';

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

@@ -0,0 +1,2 @@
+export { Alert } from './alert';
+export type { AlertVariant, AlertAppearance } from './alert.types';