@latty-ds/web 0.2.0

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,166 @@
+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/breadcrumb/breadcrumb.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/breadcrumb/breadcrumb.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/breadcrumb/breadcrumb.styles.ts
+import { css } from "lit";
+var breadcrumbStyles = css`
+  :host {
+    display: block;
+  }
+
+  [part='list'] {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+`;
+var breadcrumbItemStyles = css`
+  :host {
+    align-items: center;
+    display: inline-flex;
+    font-family: var(--lt-typography-fontfamily);
+    font-size: 0.875rem;
+  }
+
+  [part='link'] {
+    color: var(--lt-interactive-primary-bg);
+    text-decoration: none;
+    transition: color 120ms ease;
+  }
+
+  [part='link']:hover {
+    color: var(--lt-interactive-primary-bg-hover);
+    text-decoration: underline;
+  }
+
+  [part='text'] {
+    color: var(--lt-text-default);
+    font-weight: 600;
+  }
+
+  [part='separator'] {
+    color: var(--lt-text-muted);
+    margin-inline: var(--lt-spacing-2);
+    user-select: none;
+  }
+
+  [part='separator']::after {
+    content: var(--lt-breadcrumb-separator, '/');
+  }
+
+  :host(:last-child) [part='separator'] {
+    display: none;
+  }
+`;
+
+// src/components/breadcrumb/breadcrumb.ts
+var Breadcrumb = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.separator = "/";
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("separator")) {
+      if (this.separator !== null && this.separator !== void 0) {
+        this.style.setProperty("--lt-breadcrumb-separator", `"${this.separator}"`);
+      } else {
+        this.style.removeProperty("--lt-breadcrumb-separator");
+      }
+    }
+  }
+  render() {
+    return html`
+      <nav aria-label="breadcrumb">
+        <ol part="list">
+          <slot></slot>
+        </ol>
+      </nav>
+    `;
+  }
+};
+Breadcrumb.styles = breadcrumbStyles;
+__decorateClass([
+  property2()
+], Breadcrumb.prototype, "separator", 2);
+Breadcrumb = __decorateClass([
+  customElement("lt-breadcrumb")
+], Breadcrumb);
+var BreadcrumbItem = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.href = "";
+    this.current = false;
+    this.separator = "";
+  }
+  render() {
+    const hasSeparatorOverride = this.separator !== null && this.separator !== void 0 && this.separator !== "";
+    return html`
+      <li part="item">
+        ${this.current || !this.href ? html`<span part="text" aria-current=${this.current ? "page" : "false"}><slot></slot></span>` : html`<a part="link" href=${this.href}><slot></slot></a>`}
+        <span
+          part="separator"
+          aria-hidden="true"
+          style=${hasSeparatorOverride ? `--lt-breadcrumb-separator: "${this.separator}"` : ""}
+        ></span>
+      </li>
+    `;
+  }
+};
+BreadcrumbItem.styles = breadcrumbItemStyles;
+__decorateClass([
+  property2()
+], BreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], BreadcrumbItem.prototype, "current", 2);
+__decorateClass([
+  property2()
+], BreadcrumbItem.prototype, "separator", 2);
+BreadcrumbItem = __decorateClass([
+  customElement("lt-breadcrumb-item")
+], BreadcrumbItem);
+export {
+  Breadcrumb,
+  BreadcrumbItem
+};

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

@@ -0,0 +1,111 @@
+import { ThemeableElement } from '../../base';
+import { ButtonAppearance, ButtonSize, ButtonType, ButtonVariant } from './button.types';
+import '../spinner/';
+import '@latty-ds/icons';
+/**
+ * Button component with multiple variants, sizes, appearances, and loading state support.
+ *
+ * @element lt-button
+ *
+ * Features:
+ * - Multiple visual variants (primary, secondary, neutral, success, warning, error, info)
+ * - Two appearance styles (filled, outlined)
+ * - Three size options (sm, md, lg)
+ * - Loading state with spinner
+ * - Icon support at start and end positions
+ * - Disabled state
+ * - Accessible with aria-busy for loading state
+ * - Renders as `<a>` when `href` is provided (link button)
+ * - Form-associated: `type="submit"` submits the containing form, `type="reset"` resets it
+ *
+ * @slot - Button label/content
+ *
+ * @example
+ * ```html
+ * <lt-button variant="primary" size="md">Click me</lt-button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-button href="/dashboard" variant="primary">Go to dashboard</lt-button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-button href="https://example.com" target="_blank" variant="secondary">Open link</lt-button>
+ * ```
+ */
+export declare class Button extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
+    /**
+     * Visual variant that determines the button's color scheme.
+     * @default 'primary'
+     */
+    variant: ButtonVariant;
+    /**
+     * Appearance style (filled or outlined).
+     * @default 'filled'
+     */
+    appearance: ButtonAppearance;
+    /**
+     * Size of the button (affects height, font size, and padding).
+     * @default 'md'
+     */
+    size: ButtonSize;
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether the button is in loading state.
+     * Shows a spinner and disables interaction.
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * Icon name to display at the start of the button.
+     * @default ''
+     */
+    iconStart: string;
+    /**
+     * Icon name to display at the end of the button.
+     * @default ''
+     */
+    iconEnd: string;
+    /**
+     * Whether the button stretches to fill its container's width.
+     * @default false
+     */
+    fullWidth: boolean;
+    /**
+     * Renders the button label in small caps with wider letter spacing.
+     * @default false
+     */
+    uppercase: boolean;
+    /**
+     * When set, renders an `<a>` tag instead of `<button>`.
+     * All visual styles and states are preserved.
+     */
+    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.
+     * Defaults to `noopener noreferrer` when `target="_blank"` and `rel` is not specified.
+     */
+    rel: string;
+    /**
+     * Form behaviour when the button is inside a `<form>`.
+     * `submit` triggers form validation and submission; `reset` restores initial values.
+     * @default 'button'
+     */
+    type: ButtonType;
+    private _handleClick;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,38 @@
+/**
+ * Visual variant of the button component.
+ * Determines the color scheme.
+ *
+ * - `primary`: Primary brand color (default for main actions)
+ * - `secondary`: Secondary brand color
+ * - `neutral`: Neutral gray color
+ * - `success`: Green color for positive actions
+ * - `warning`: Yellow/orange color for caution
+ * - `error`: Red color for destructive actions
+ * - `info`: Blue color for informational actions
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * Appearance style of the button component.
+ * Determines whether the button is filled or outlined.
+ *
+ * - `filled`: Solid background with the variant color (default)
+ * - `outlined`: Transparent background with colored border and text
+ */
+export type ButtonAppearance = 'filled' | 'outlined';
+/**
+ * Size variant of the button component.
+ * Affects height, font size, and padding.
+ *
+ * - `sm`: 32px height, 0.875rem font size
+ * - `md`: 40px height, 1rem font size (default)
+ * - `lg`: 48px height, 1.0625rem font size
+ */
+export type ButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * Form behaviour of the button component.
+ *
+ * - `button`: No form interaction (default)
+ * - `submit`: Submits the associated form (runs constraint validation)
+ * - `reset`: Resets all controls in the associated form to their initial values
+ */
+export type ButtonType = 'button' | 'submit' | 'reset';

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

@@ -0,0 +1,8 @@
+/**
+ * Button component module.
+ * Exports the Button web component and related type definitions.
+ *
+ * @module components/button
+ */
+export { Button } from './button';
+export type { ButtonAppearance, ButtonSize, ButtonType, ButtonVariant } from './button.types';