@latty-ds/web 0.2.0

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,27 @@
+import { ThemeableElement } from '../../base';
+import type { AvatarSize, AvatarShape, AvatarColor } from './avatar.types';
+import '@latty-ds/icons';
+/**
+ * Displays a user avatar — image, initials fallback, or icon fallback.
+ *
+ * @element lt-avatar
+ */
+export declare class Avatar extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** URL of the avatar image. */
+    src: string;
+    /** Full name used to derive initials when no image is available. */
+    name: string;
+    /** Accessible label for the image (defaults to `name`). */
+    alt: string;
+    /** Size of the avatar. */
+    size: AvatarSize;
+    /** Shape of the avatar. */
+    shape: AvatarShape;
+    /** Background color used for the initials and icon fallback states. */
+    color: AvatarColor;
+    private _imgError;
+    private get _initials();
+    private _handleImgError;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,3 @@
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'circle' | 'square';
+export type AvatarColor = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';

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

@@ -0,0 +1,2 @@
+export { Avatar } from './avatar';
+export type { AvatarSize, AvatarShape, AvatarColor } from './avatar.types';

package/dist/components/avatar/index.js

@@ -0,0 +1,222 @@
+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/avatar/avatar.ts
+import { html } 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/avatar/avatar.ts
+import { customElement, property as property2, state } from "lit/decorators.js";
+
+// src/components/avatar/avatar.styles.ts
+import { css } from "lit";
+var avatarStyles = css`
+  :host {
+    display: inline-flex;
+    flex-shrink: 0;
+    vertical-align: middle;
+  }
+
+  span[part='base'] {
+    align-items: center;
+    background: var(--lt-avatar-bg, var(--lt-bg-overlay));
+    box-sizing: border-box;
+    color: var(--lt-avatar-color, var(--lt-color-neutral-700));
+    display: inline-flex;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+  }
+
+  img[part='image'] {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  .initials {
+    font-family: 'Hanken Grotesk', sans-serif;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    line-height: 1;
+    user-select: none;
+  }
+
+  /* ── Colors (fallback bg + text) ────────────────────────────────────── */
+  :host([color='neutral']) span[part='base'] {
+    background: var(--lt-bg-overlay);
+    color: var(--lt-text-neutral);
+  }
+
+  :host([color='primary']) span[part='base'] {
+    background: var(--lt-bg-primary-subtle);
+    color: var(--lt-text-primary);
+  }
+
+  :host([color='secondary']) span[part='base'] {
+    background: var(--lt-bg-secondary-subtle);
+    color: var(--lt-text-secondary);
+  }
+
+  :host([color='success']) span[part='base'] {
+    background: var(--lt-bg-success-subtle);
+    color: var(--lt-text-success);
+  }
+
+  :host([color='warning']) span[part='base'] {
+    background: var(--lt-bg-warning-subtle);
+    color: var(--lt-text-warning);
+  }
+
+  :host([color='error']) span[part='base'] {
+    background: var(--lt-bg-error-subtle);
+    color: var(--lt-text-error);
+  }
+
+  :host([color='info']) span[part='base'] {
+    background: var(--lt-bg-info-subtle);
+    color: var(--lt-text-info);
+  }
+
+  /* ── Shape ───────────────────────────────────────────────────────────── */
+  :host([shape='circle']) span[part='base'] {
+    border-radius: 999px;
+  }
+
+  :host([shape='square']) span[part='base'] {
+    border-radius: var(--lt-border-radius);
+  }
+
+  /* ── Sizes ───────────────────────────────────────────────────────────── */
+  :host([size='xs']) span[part='base'] {
+    height: 24px;
+    width: 24px;
+  }
+
+  :host([size='xs']) .initials {
+    font-size: 0.625rem;
+  }
+
+  :host([size='sm']) span[part='base'] {
+    height: 32px;
+    width: 32px;
+  }
+
+  :host([size='sm']) .initials {
+    font-size: 0.75rem;
+  }
+
+  :host([size='md']) span[part='base'] {
+    height: 40px;
+    width: 40px;
+  }
+
+  :host([size='md']) .initials {
+    font-size: 0.9375rem;
+  }
+
+  :host([size='lg']) span[part='base'] {
+    height: 52px;
+    width: 52px;
+  }
+
+  :host([size='lg']) .initials {
+    font-size: 1.125rem;
+  }
+
+  :host([size='xl']) span[part='base'] {
+    height: 68px;
+    width: 68px;
+  }
+
+  :host([size='xl']) .initials {
+    font-size: 1.5rem;
+  }
+`;
+
+// src/components/avatar/avatar.ts
+import "@latty-ds/icons";
+var Avatar = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.name = "";
+    this.alt = "";
+    this.size = "md";
+    this.shape = "circle";
+    this.color = "neutral";
+    this._imgError = false;
+  }
+  get _initials() {
+    return this.name.trim().split(/\s+/).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
+  }
+  _handleImgError() {
+    this._imgError = true;
+  }
+  render() {
+    const showImage = this.src && !this._imgError;
+    const showInitials = !showImage && this.name;
+    return html`
+      <span part="base" aria-label=${this.alt || this.name || "avatar"} role="img">
+        ${showImage ? html`<img part="image" src=${this.src} alt=${this.alt || this.name} @error=${this._handleImgError} />` : showInitials ? html`<span part="initials" class="initials">${this._initials}</span>` : html`<lt-icon part="icon" name="user" size="sm"></lt-icon>`}
+      </span>
+    `;
+  }
+};
+Avatar.styles = avatarStyles;
+__decorateClass([
+  property2()
+], Avatar.prototype, "src", 2);
+__decorateClass([
+  property2()
+], Avatar.prototype, "name", 2);
+__decorateClass([
+  property2()
+], Avatar.prototype, "alt", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Avatar.prototype, "size", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Avatar.prototype, "shape", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Avatar.prototype, "color", 2);
+__decorateClass([
+  state()
+], Avatar.prototype, "_imgError", 2);
+Avatar = __decorateClass([
+  customElement("lt-avatar")
+], Avatar);
+export {
+  Avatar
+};

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,29 @@
+import { ThemeableElement } from '../../base';
+import type { BadgeVariant, BadgeSize, BadgeAppearance } from './badge.types';
+/**
+ * A compact status label for categories, counts, and states.
+ *
+ * @element lt-badge
+ *
+ * @example
+ * ```html
+ * <lt-badge variant="success" content="Active" />
+ * <lt-badge variant="error" appearance="solid" content="Failed" />
+ * <lt-badge variant="primary" content="New" dot />
+ * <lt-badge variant="warning" />
+ * ```
+ */
+export declare class Badge extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Visual style: tinted fill, outline only, or full-color solid. */
+    appearance: BadgeAppearance;
+    /** Color scheme. */
+    variant: BadgeVariant;
+    /** Size. */
+    size: BadgeSize;
+    /** Label text. When empty the badge renders as a circle indicator. */
+    content: string;
+    /** Show a leading status dot (only visible when content is set). */
+    dot: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,3 @@
+export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeAppearance = 'filled' | 'outlined' | 'solid';

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

@@ -0,0 +1,2 @@
+export { Badge } from './badge';
+export type { BadgeVariant, BadgeSize, BadgeAppearance } from './badge.types';

package/dist/components/badge/index.js

@@ -0,0 +1,277 @@
+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/badge/badge.ts
+import { html } 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/badge/badge.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/badge/badge.styles.ts
+import { css } from "lit";
+var badgeStyles = css`
+  :host {
+    display: inline-flex;
+    font-family: 'Hanken Grotesk', sans-serif;
+    vertical-align: middle;
+  }
+
+  span[part='base'] {
+    align-items: center;
+    background: var(--lt-badge-bg);
+    border-radius: 999px;
+    border: 1px solid var(--lt-badge-border-color, transparent);
+    color: var(--lt-badge-color);
+    box-sizing: border-box;
+    display: inline-flex;
+    font-weight: 600;
+    gap: var(--lt-spacing-1);
+    line-height: 1;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .dot {
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  /* ── Sizes ──────────────────────────────────────────────────────────── */
+
+  :host([size='sm']) span[part='base'] {
+    font-size: 0.6875rem;
+    height: 18px;
+    padding-inline: var(--lt-spacing-2);
+  }
+
+  :host([size='sm']) .dot {
+    height: 6px;
+    width: 6px;
+  }
+
+  :host([size='md']) span[part='base'] {
+    font-size: 0.75rem;
+    height: 22px;
+    padding-inline: var(--lt-spacing-2);
+  }
+
+  :host([size='md']) .dot {
+    height: 7px;
+    width: 7px;
+  }
+
+  :host([size='lg']) span[part='base'] {
+    font-size: 0.8125rem;
+    height: 26px;
+    padding-inline: var(--lt-spacing-3);
+  }
+
+  :host([size='lg']) .dot {
+    height: 8px;
+    width: 8px;
+  }
+
+  /* When dot is the only content, fill it to the circle size */
+  :host([dot][content='']) .dot,
+  :host([dot]:not([content])) .dot {
+    height: 40%;
+    width: 40%;
+  }
+
+  /* ── Empty = perfect circle (covers content="" and absent attribute) */
+
+  :host([content='']) span[part='base'],
+  :host(:not([content])) span[part='base'] {
+    aspect-ratio: 1;
+    justify-content: center;
+    padding: 0;
+  }
+
+  /* ── Filled (tinted bg, colored border, dark text) ───────────────── */
+
+  :host([appearance='filled'][variant='primary']) span[part='base'] {
+    background: var(--lt-bg-primary-subtle);
+    border-color: var(--lt-border-primary);
+    color: var(--lt-text-primary);
+  }
+
+  :host([appearance='filled'][variant='secondary']) span[part='base'] {
+    background: var(--lt-bg-secondary-subtle);
+    border-color: var(--lt-border-secondary);
+    color: var(--lt-text-secondary);
+  }
+
+  :host([appearance='filled'][variant='success']) span[part='base'] {
+    background: var(--lt-bg-success-subtle);
+    border-color: var(--lt-border-success);
+    color: var(--lt-text-success);
+  }
+
+  :host([appearance='filled'][variant='warning']) span[part='base'] {
+    background: var(--lt-bg-warning-subtle);
+    border-color: var(--lt-border-warning);
+    color: var(--lt-text-warning);
+  }
+
+  :host([appearance='filled'][variant='error']) span[part='base'] {
+    background: var(--lt-bg-error-subtle);
+    border-color: var(--lt-border-error);
+    color: var(--lt-text-error);
+  }
+
+  :host([appearance='filled'][variant='neutral']) span[part='base'] {
+    background: var(--lt-bg-surface);
+    border-color: var(--lt-border-default);
+    color: var(--lt-text-neutral);
+  }
+
+  /* ── Outlined (transparent bg, colored border and text) ──────────── */
+
+  :host([appearance='outlined'][variant='primary']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-primary-strong);
+    color: var(--lt-text-primary);
+  }
+
+  :host([appearance='outlined'][variant='secondary']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-secondary-strong);
+    color: var(--lt-text-secondary);
+  }
+
+  :host([appearance='outlined'][variant='success']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-success-strong);
+    color: var(--lt-text-success);
+  }
+
+  :host([appearance='outlined'][variant='warning']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-warning-strong);
+    color: var(--lt-text-warning);
+  }
+
+  :host([appearance='outlined'][variant='error']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-error-strong);
+    color: var(--lt-text-error);
+  }
+
+  :host([appearance='outlined'][variant='neutral']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-strong);
+    color: var(--lt-text-neutral);
+  }
+
+  /* ── Solid (full-color bg, white text) ───────────────────────────── */
+
+  :host([appearance='solid'][variant='primary']) span[part='base'] {
+    background: var(--lt-interactive-primary-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-primary);
+  }
+
+  :host([appearance='solid'][variant='secondary']) span[part='base'] {
+    background: var(--lt-interactive-secondary-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-secondary);
+  }
+
+  :host([appearance='solid'][variant='success']) span[part='base'] {
+    background: var(--lt-interactive-success-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-success);
+  }
+
+  :host([appearance='solid'][variant='warning']) span[part='base'] {
+    background: var(--lt-interactive-warning-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-warning);
+  }
+
+  :host([appearance='solid'][variant='error']) span[part='base'] {
+    background: var(--lt-interactive-error-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-error);
+  }
+
+  :host([appearance='solid'][variant='neutral']) span[part='base'] {
+    background: var(--lt-color-neutral-500);
+    border-color: transparent;
+    color: var(--lt-color-white);
+  }
+
+  /* ── Dot color inherits text color ───────────────────────────────── */
+  .dot {
+    background: currentColor;
+  }
+`;
+
+// src/components/badge/badge.ts
+var Badge = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.appearance = "filled";
+    this.variant = "primary";
+    this.size = "md";
+    this.content = "";
+    this.dot = false;
+  }
+  render() {
+    return html`
+      <span part="base"> ${this.dot ? html`<span class="dot" part="dot"></span>` : ""} ${this.content} </span>
+    `;
+  }
+};
+Badge.styles = badgeStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Badge.prototype, "appearance", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Badge.prototype, "variant", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Badge.prototype, "size", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Badge.prototype, "content", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Badge.prototype, "dot", 2);
+Badge = __decorateClass([
+  customElement("lt-badge")
+], Badge);
+export {
+  Badge
+};

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,53 @@
+import { type PropertyValues } from 'lit';
+import { ThemeableElement } from '../../base';
+/**
+ * Navigation breadcrumb trail container.
+ * Place `lt-breadcrumb-item` elements inside as direct children.
+ *
+ * @element lt-breadcrumb
+ *
+ * @example
+ * ```html
+ * <lt-breadcrumb separator=">">
+ *   <lt-breadcrumb-item href="/">Home</lt-breadcrumb-item>
+ *   <lt-breadcrumb-item href="/components">Components</lt-breadcrumb-item>
+ *   <lt-breadcrumb-item current>Button</lt-breadcrumb-item>
+ * </lt-breadcrumb>
+ * ```
+ */
+export declare class Breadcrumb extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The character or element to use as a separator between breadcrumb items.
+     * This is passed down to all children items via CSS variables.
+     * @default '/'
+     */
+    separator: string;
+    updated(changed: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+/**
+ * A single step in a breadcrumb trail.
+ * Renders as a link when `href` is provided, or as plain text when `current`.
+ *
+ * @element lt-breadcrumb-item
+ */
+export declare class BreadcrumbItem extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * URL this item links to. Omit for the current (last) item.
+     * @default ''
+     */
+    href: string;
+    /**
+     * Marks this item as the current page. Renders as non-linked text with `aria-current="page"`.
+     * @default false
+     */
+    current: boolean;
+    /**
+     * Custom separator for this specific item. Overrides the parent's separator.
+     * @default ''
+     */
+    separator: string;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1 @@
+export type BreadcrumbSeparator = string;

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

@@ -0,0 +1,2 @@
+export { Breadcrumb, BreadcrumbItem } from './breadcrumb';
+export type { BreadcrumbSeparator } from './breadcrumb.types';