@latty-ds/web 0.2.0

package/dist/components/header/header.d.ts

@@ -0,0 +1,19 @@
+import { ThemeableElement } from '../../base';
+import type { HeaderBackground } from './header.types';
+/**
+ * A layout component that organises content into a sticky app bar.
+ * Renders a native `<header>` element for semantics and the ARIA `banner` landmark.
+ *
+ * @element lt-header
+ *
+ * @slot before - Far-left area, typically a hamburger menu or back button
+ * @slot logo - Logo or brand mark, placed to the right of `before`
+ * @slot content - Main content area (nav links, search…); stretches to fill available space
+ * @slot after - Far-right area, typically user actions or icons
+ */
+export declare class Header extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Background surface that controls the header's background and text colours. */
+    background: HeaderBackground;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1 @@
+export type HeaderBackground = 'primary' | 'surface';

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

@@ -0,0 +1,2 @@
+export { Header } from './header';
+export type { HeaderBackground } from './header.types';

package/dist/components/header/index.js

@@ -0,0 +1,104 @@
+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/header/header.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/header/header.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/header/header.styles.ts
+import { css } from "lit";
+var headerStyles = css`
+  :host {
+    display: block;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--lt-elevation-1);
+  }
+
+  :host([background='primary']) {
+    background: var(--lt-bg-primary);
+    color: var(--lt-text-inverse);
+  }
+
+  :host([background='surface']) {
+    background: var(--lt-bg-default);
+    color: var(--lt-text-default);
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    gap: var(--lt-spacing-2);
+    padding: 0 var(--lt-spacing-4);
+    min-height: var(--lt-spacing-px-16);
+    box-sizing: border-box;
+    color: inherit;
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+`;
+
+// src/components/header/header.ts
+var Header = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.background = "primary";
+  }
+  render() {
+    return html`
+      <header part="inner">
+        <slot name="before"></slot>
+        <slot name="logo"></slot>
+        <div class="content"><slot name="content"></slot></div>
+        <slot name="after"></slot>
+      </header>
+    `;
+  }
+};
+Header.styles = headerStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Header.prototype, "background", 2);
+Header = __decorateClass([
+  customElement("lt-header")
+], Header);
+export {
+  Header
+};

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,52 @@
+import { ThemeableElement } from '../../base';
+import type { IconButtonVariant, IconButtonAppearance, IconButtonSize } from './icon-button.types';
+import '@latty-ds/icons';
+/**
+ * Icon-only button. Requires `label` for screen readers since there is no visible text.
+ *
+ * @element lt-icon-button
+ *
+ * @example
+ * ```html
+ * <lt-icon-button icon="xmark" label="Close dialog"></lt-icon-button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-icon-button icon="plus" label="Add item" variant="primary" appearance="filled"></lt-icon-button>
+ * ```
+ */
+export declare class IconButton extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Icon name from the icon library. */
+    icon: string;
+    /** Accessible label for screen readers. Required when there is no visible text. */
+    label: string;
+    /**
+     * Visual variant that determines the icon/background color.
+     * @default 'neutral'
+     */
+    variant: IconButtonVariant;
+    /**
+     * Visual treatment.
+     * @default 'ghost'
+     */
+    appearance: IconButtonAppearance;
+    /**
+     * Size of the button.
+     * @default 'md'
+     */
+    size: IconButtonSize;
+    /** Whether the button is disabled. */
+    disabled: boolean;
+    /** When set, renders an `<a>` tag instead of `<button>`. */
+    href: string;
+    /** Forwarded to the anchor's `target` attribute when `href` is set. */
+    target: string;
+    /** Forwarded to the anchor's `rel` attribute when `href` is set. */
+    rel: string;
+    /** Renders as a circle instead of rounded-rectangle. */
+    round: boolean;
+    private _inner;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/icon-button/icon-button.styles.d.ts

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

package/dist/components/icon-button/icon-button.types.d.ts

@@ -0,0 +1,8 @@
+export type IconButtonVariant = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * - `filled`: Solid background with the variant color
+ * - `outlined`: Transparent background with colored border
+ * - `ghost`: No border, subtle hover background — for close/dismiss buttons
+ */
+export type IconButtonAppearance = 'filled' | 'outlined' | 'ghost';
+export type IconButtonSize = 'sm' | 'md' | 'lg';

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1 @@
+export { IconButton } from './icon-button';

package/dist/components/icon-button/index.js

@@ -0,0 +1,342 @@
+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/icon-button/icon-button.ts
+import { html, nothing } from "lit";
+import { customElement, property as property2 } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.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/icon-button/icon-button.styles.ts
+import { css } from "lit";
+var iconButtonStyles = css`
+  :host {
+    display: inline-flex;
+
+    /* Internal state props — set per variant/appearance below */
+    --_color: var(--lt-text-subtle);
+    --_bg: transparent;
+    --_border-color: transparent;
+    --_hover-bg: var(--lt-bg-subtle);
+    --_hover-color: var(--lt-text-default);
+    --_active-bg: var(--lt-bg-subtle);
+  }
+
+  [part='base'] {
+    align-items: center;
+    background: var(--lt-icon-button-bg, var(--_bg));
+    border-radius: var(--lt-border-radius);
+    border: 1px solid var(--lt-icon-button-border-color, var(--_border-color));
+    box-sizing: border-box;
+    color: var(--lt-icon-button-color, var(--_color));
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    padding: 0;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease,
+      transform 50ms ease;
+    user-select: none;
+  }
+
+  [part='base']:hover:not([disabled]) {
+    background: var(--lt-icon-button-hover-bg, var(--_hover-bg));
+    color: var(--lt-icon-button-hover-color, var(--lt-icon-button-color, var(--_hover-color)));
+  }
+
+  [part='base']:active {
+    transform: translateY(1px);
+  }
+
+  [part='base']:active:not([disabled]) {
+    background: var(--lt-icon-button-hover-bg, var(--_active-bg));
+  }
+
+  [part='base']:focus-visible {
+    outline: 3px solid var(--lt-border-focus);
+    outline-offset: 2px;
+  }
+
+  [part='base'][disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+    transform: none;
+  }
+
+  a[part='base'] {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  /* sizes */
+  :host([size='sm']) [part='base'] {
+    height: 28px;
+    width: 28px;
+  }
+
+  :host([size='md']) [part='base'] {
+    height: 36px;
+    width: 36px;
+  }
+
+  :host([size='lg']) [part='base'] {
+    height: 44px;
+    width: 44px;
+  }
+
+  /* ── ghost ────────────────────────────────────────────────── */
+  :host([appearance='ghost'][variant='primary']) {
+    --_color: var(--lt-text-primary);
+    --_hover-bg: var(--lt-bg-primary-subtle);
+    --_hover-color: var(--lt-text-primary);
+    --_active-bg: var(--lt-bg-primary-subtle);
+  }
+  :host([appearance='ghost'][variant='secondary']) {
+    --_color: var(--lt-text-secondary);
+    --_hover-bg: var(--lt-bg-secondary-subtle);
+    --_hover-color: var(--lt-text-secondary);
+    --_active-bg: var(--lt-bg-secondary-subtle);
+  }
+  :host([appearance='ghost'][variant='success']) {
+    --_color: var(--lt-text-success);
+    --_hover-bg: var(--lt-bg-success-subtle);
+    --_hover-color: var(--lt-text-success);
+    --_active-bg: var(--lt-bg-success-subtle);
+  }
+  :host([appearance='ghost'][variant='warning']) {
+    --_color: var(--lt-text-warning);
+    --_hover-bg: var(--lt-bg-warning-subtle);
+    --_hover-color: var(--lt-text-warning);
+    --_active-bg: var(--lt-bg-warning-subtle);
+  }
+  :host([appearance='ghost'][variant='error']) {
+    --_color: var(--lt-text-error);
+    --_hover-bg: var(--lt-bg-error-subtle);
+    --_hover-color: var(--lt-text-error);
+    --_active-bg: var(--lt-bg-error-subtle);
+  }
+  :host([appearance='ghost'][variant='info']) {
+    --_color: var(--lt-text-info);
+    --_hover-bg: var(--lt-bg-info-subtle);
+    --_hover-color: var(--lt-text-info);
+    --_active-bg: var(--lt-bg-info-subtle);
+  }
+
+  /* ── filled ───────────────────────────────────────────────── */
+  :host([appearance='filled'][variant='primary']) {
+    --_bg: var(--lt-interactive-primary-bg);
+    --_color: var(--lt-text-on-primary);
+    --_hover-bg: var(--lt-interactive-primary-bg-hover);
+    --_hover-color: var(--lt-text-on-primary);
+    --_active-bg: var(--lt-interactive-primary-bg-active);
+  }
+  :host([appearance='filled'][variant='secondary']) {
+    --_bg: var(--lt-interactive-secondary-bg);
+    --_color: var(--lt-text-on-secondary);
+    --_hover-bg: var(--lt-interactive-secondary-bg-hover);
+    --_hover-color: var(--lt-text-on-secondary);
+    --_active-bg: var(--lt-interactive-secondary-bg-active);
+  }
+  :host([appearance='filled'][variant='neutral']) {
+    --_bg: var(--lt-color-neutral-500);
+    --_color: var(--lt-color-neutral-50);
+    --_hover-bg: var(--lt-color-neutral-700);
+    --_hover-color: var(--lt-color-neutral-50);
+    --_active-bg: var(--lt-color-neutral-800);
+  }
+  :host([appearance='filled'][variant='success']) {
+    --_bg: var(--lt-interactive-success-bg);
+    --_color: var(--lt-text-on-success);
+    --_hover-bg: var(--lt-interactive-success-bg-hover);
+    --_hover-color: var(--lt-text-on-success);
+    --_active-bg: var(--lt-interactive-success-bg-active);
+  }
+  :host([appearance='filled'][variant='warning']) {
+    --_bg: var(--lt-interactive-warning-bg);
+    --_color: var(--lt-text-on-warning);
+    --_hover-bg: var(--lt-interactive-warning-bg-hover);
+    --_hover-color: var(--lt-text-on-warning);
+    --_active-bg: var(--lt-interactive-warning-bg-active);
+  }
+  :host([appearance='filled'][variant='error']) {
+    --_bg: var(--lt-interactive-error-bg);
+    --_color: var(--lt-text-on-error);
+    --_hover-bg: var(--lt-interactive-error-bg-hover);
+    --_hover-color: var(--lt-text-on-error);
+    --_active-bg: var(--lt-interactive-error-bg-active);
+  }
+  :host([appearance='filled'][variant='info']) {
+    --_bg: var(--lt-interactive-info-bg);
+    --_color: var(--lt-text-on-info);
+    --_hover-bg: var(--lt-interactive-info-bg-hover);
+    --_hover-color: var(--lt-text-on-info);
+    --_active-bg: var(--lt-interactive-info-bg-active);
+  }
+
+  /* ── outlined ─────────────────────────────────────────────── */
+  :host([appearance='outlined'][variant='primary']) {
+    --_color: var(--lt-text-primary);
+    --_border-color: var(--lt-border-primary-strong);
+    --_hover-bg: var(--lt-bg-primary-subtle);
+    --_hover-color: var(--lt-text-primary);
+    --_active-bg: var(--lt-bg-primary-subtle);
+  }
+  :host([appearance='outlined'][variant='secondary']) {
+    --_color: var(--lt-text-secondary);
+    --_border-color: var(--lt-border-secondary-strong);
+    --_hover-bg: var(--lt-bg-secondary-subtle);
+    --_hover-color: var(--lt-text-secondary);
+    --_active-bg: var(--lt-bg-secondary-subtle);
+  }
+  :host([appearance='outlined'][variant='neutral']) {
+    --_color: var(--lt-text-neutral);
+    --_border-color: var(--lt-border-strong);
+    --_hover-bg: var(--lt-bg-subtle);
+    --_hover-color: var(--lt-text-default);
+    --_active-bg: var(--lt-bg-subtle);
+  }
+  :host([appearance='outlined'][variant='success']) {
+    --_color: var(--lt-text-success);
+    --_border-color: var(--lt-border-success-strong);
+    --_hover-bg: var(--lt-bg-success-subtle);
+    --_hover-color: var(--lt-text-success);
+    --_active-bg: var(--lt-bg-success-subtle);
+  }
+  :host([appearance='outlined'][variant='warning']) {
+    --_color: var(--lt-text-warning);
+    --_border-color: var(--lt-border-warning-strong);
+    --_hover-bg: var(--lt-bg-warning-subtle);
+    --_hover-color: var(--lt-text-warning);
+    --_active-bg: var(--lt-bg-warning-subtle);
+  }
+  :host([appearance='outlined'][variant='error']) {
+    --_color: var(--lt-text-error);
+    --_border-color: var(--lt-border-error-strong);
+    --_hover-bg: var(--lt-bg-error-subtle);
+    --_hover-color: var(--lt-text-error);
+    --_active-bg: var(--lt-bg-error-subtle);
+  }
+  :host([appearance='outlined'][variant='info']) {
+    --_color: var(--lt-text-info);
+    --_border-color: var(--lt-border-info-strong);
+    --_hover-bg: var(--lt-bg-info-subtle);
+    --_hover-color: var(--lt-text-info);
+    --_active-bg: var(--lt-bg-info-subtle);
+  }
+
+  /* round shape */
+  :host([round]) [part='base'] {
+    border-radius: 50%;
+  }
+`;
+
+// src/components/icon-button/icon-button.ts
+import "@latty-ds/icons";
+var IconButton = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.icon = "";
+    this.label = "";
+    this.variant = "neutral";
+    this.appearance = "ghost";
+    this.size = "md";
+    this.disabled = false;
+    this.href = "";
+    this.target = "";
+    this.rel = "";
+    this.round = false;
+  }
+  _inner() {
+    return this.icon ? html`<lt-icon name=${this.icon}></lt-icon>` : html`<slot></slot>`;
+  }
+  render() {
+    const label = this.label || void 0;
+    if (this.href) {
+      const rel = this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0);
+      return html`
+        <a
+          part="base"
+          href=${this.href}
+          target=${ifDefined(this.target || void 0)}
+          rel=${ifDefined(rel)}
+          aria-label=${ifDefined(label)}
+          aria-disabled=${this.disabled ? "true" : nothing}
+          tabindex=${this.disabled ? "-1" : nothing}
+        >
+          ${this._inner()}
+        </a>
+      `;
+    }
+    return html`
+      <button part="base" ?disabled=${this.disabled} aria-label=${ifDefined(label)}>${this._inner()}</button>
+    `;
+  }
+};
+IconButton.styles = iconButtonStyles;
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "icon", 2);
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "label", 2);
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "variant", 2);
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "appearance", 2);
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "size", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], IconButton.prototype, "disabled", 2);
+__decorateClass([
+  property2()
+], IconButton.prototype, "href", 2);
+__decorateClass([
+  property2()
+], IconButton.prototype, "target", 2);
+__decorateClass([
+  property2()
+], IconButton.prototype, "rel", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], IconButton.prototype, "round", 2);
+IconButton = __decorateClass([
+  customElement("lt-icon-button")
+], IconButton);
+export {
+  IconButton
+};

package/dist/components/image/image.d.ts

@@ -0,0 +1,26 @@
+import { ThemeableElement } from '../../base';
+/**
+ * A thin wrapper around `<img>` with rounded corners and responsive fill support.
+ *
+ * @element lt-image
+ * @part image - The underlying `<img>` element
+ */
+export declare class Image extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Image source URL. */
+    src: string;
+    /** Alt text for the image. */
+    alt: string;
+    /**
+     * Border radius. Present with no value uses the design system default (`--lt-border-radius`).
+     * Accepts any valid CSS `border-radius` shorthand (e.g. `"8px"`, `"50%"`, `"4px 8px"`).
+     */
+    rounded: string | null;
+    /**
+     * Makes the image fill its container using `object-fit: cover`.
+     * Size the `lt-image` element externally to define the crop box.
+     */
+    responsive: boolean;
+    private get _borderRadius();
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1 @@
+export { Image } from './image';

package/dist/components/image/index.js

@@ -0,0 +1,105 @@
+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/image/image.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/image/image.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/image/image.styles.ts
+import { css } from "lit";
+var imageStyles = css`
+  :host {
+    display: inline-block;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  /* ── Responsive ─────────────────────────────────────────────────────────── */
+
+  :host([responsive]) {
+    display: block;
+    width: 100%;
+  }
+
+  :host([responsive]) img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+// src/components/image/image.ts
+var Image = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.alt = "";
+    this.rounded = null;
+    this.responsive = false;
+  }
+  get _borderRadius() {
+    if (this.rounded === null) return void 0;
+    return this.rounded || "var(--lt-border-radius)";
+  }
+  render() {
+    const radius = this._borderRadius;
+    return html`
+      <img part="image" src=${this.src} alt=${this.alt} style=${radius ? `border-radius: ${radius}` : ""} />
+    `;
+  }
+};
+Image.styles = imageStyles;
+__decorateClass([
+  property2()
+], Image.prototype, "src", 2);
+__decorateClass([
+  property2()
+], Image.prototype, "alt", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Image.prototype, "rounded", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Image.prototype, "responsive", 2);
+Image = __decorateClass([
+  customElement("lt-image")
+], Image);
+export {
+  Image
+};

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

@@ -0,0 +1 @@
+export { Link } from './link';