@latty-ds/web 0.2.0

package/dist/components/snackbar/index.js

@@ -0,0 +1,358 @@
+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/snackbar/snackbar.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/snackbar/snackbar.ts
+import { customElement as customElement2, property as property3 } from "lit/decorators.js";
+
+// src/components/snackbar/snackbar.styles.ts
+import { css } from "lit";
+var snackbarStyles = css`
+  :host {
+    display: block;
+    bottom: 24px;
+    left: 50%;
+    max-width: calc(100vw - 48px);
+    opacity: 0;
+    position: fixed;
+    transform: translateX(-50%) translateY(8px);
+    transition:
+      opacity 200ms ease,
+      transform 200ms ease,
+      visibility 200ms ease;
+    visibility: hidden;
+    width: max-content;
+    z-index: 9000;
+  }
+
+  :host([open]) {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+    visibility: visible;
+  }
+
+  /* ── Layout ──────────────────────────────────────────────── */
+
+  .inner {
+    align-items: center;
+    color: var(--lt-text-inverse);
+    display: flex;
+    font-family: 'Hanken Grotesk', sans-serif;
+    font-size: 0.875rem;
+    gap: var(--lt-spacing-2);
+    line-height: 1.4;
+    padding: var(--lt-spacing-3) var(--lt-spacing-4);
+  }
+
+  /* ── Variant text colors ─────────────────────────────────── */
+
+  :host([variant='success']) .inner {
+    color: var(--lt-text-on-success);
+  }
+  :host([variant='warning']) .inner {
+    color: var(--lt-text-on-warning);
+  }
+  :host([variant='error']) .inner {
+    color: var(--lt-text-on-error);
+  }
+  :host([variant='info']) .inner {
+    color: var(--lt-text-on-info);
+  }
+
+  /* ── Variant icon ────────────────────────────────────────── */
+
+  .variant-icon {
+    flex-shrink: 0;
+    font-size: 1.125rem;
+  }
+
+  /* ── Message ─────────────────────────────────────────────── */
+
+  .message {
+    flex: 1;
+  }
+
+  /* ── Action button ───────────────────────────────────────── */
+
+  .action {
+    background: transparent;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    opacity: 0.85;
+    padding: 0 var(--lt-spacing-1);
+    text-transform: uppercase;
+  }
+
+  .action:hover {
+    opacity: 1;
+  }
+
+  /* ── Close button ────────────────────────────────────────── */
+
+  .close {
+    align-items: center;
+    background: transparent;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    opacity: 0.7;
+    padding: 0;
+  }
+
+  .close:hover {
+    opacity: 1;
+  }
+`;
+
+// src/utils/dispatch.ts
+var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, ...init }));
+
+// src/utils/color.ts
+var resolveColorValue = (value) => value.startsWith("--") ? `var(${value})` : value;
+
+// src/components/snackbar/snackbar.ts
+import "@latty-ds/icons";
+
+// src/components/surface/surface.ts
+import { html } from "lit";
+import { customElement, property as property2 } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+// src/components/surface/surface.styles.ts
+import { css as css2 } from "lit";
+var surfaceStyles = css2`
+  :host {
+    display: block;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  .surface {
+    background: var(--lt-surface-bg, var(--lt-bg-subtle));
+    border-radius: var(--lt-border-radius);
+    box-sizing: border-box;
+    transition:
+      box-shadow 120ms ease,
+      border-color 120ms ease;
+  }
+
+  /* Elevation variants */
+  :host([elevation='0']) .surface {
+    box-shadow: var(--lt-elevation-0);
+  }
+  :host([elevation='1']) .surface {
+    box-shadow: var(--lt-elevation-1);
+  }
+  :host([elevation='2']) .surface {
+    box-shadow: var(--lt-elevation-2);
+  }
+  :host([elevation='3']) .surface {
+    box-shadow: var(--lt-elevation-3);
+  }
+  :host([elevation='4']) .surface {
+    box-shadow: var(--lt-elevation-4);
+  }
+  :host([elevation='5']) .surface {
+    box-shadow: var(--lt-elevation-5);
+  }
+
+  /* Visual appearances */
+  :host([appearance='filled']) .surface {
+    border: none;
+  }
+
+  :host([appearance='outlined']) .surface {
+    background: var(--lt-surface-bg, transparent);
+    border: 1px solid var(--lt-border-default);
+  }
+
+  :host([appearance='outlined']:hover) .surface {
+    border-color: var(--lt-border-strong);
+  }
+`;
+
+// src/components/surface/surface.ts
+var Surface = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.elevation = "1";
+    this.appearance = "filled";
+    this.background = "";
+  }
+  render() {
+    const style = this.background ? { "--_surface-bg": resolveColorValue(this.background) } : {};
+    return html`
+      <div class="surface" part="surface" style=${styleMap(style)}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+Surface.styles = surfaceStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Surface.prototype, "elevation", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Surface.prototype, "appearance", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Surface.prototype, "background", 2);
+Surface = __decorateClass([
+  customElement("lt-surface")
+], Surface);
+
+// src/components/snackbar/snackbar.ts
+var Snackbar = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "default";
+    this.duration = 4e3;
+    this.open = false;
+    this.closable = true;
+    this.actionLabel = "";
+    this.icon = "";
+  }
+  /** Shows the snackbar and starts the auto-dismiss timer. */
+  show() {
+    this.open = true;
+  }
+  /** Dismisses the snackbar. */
+  hide() {
+    this.open = false;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("open")) {
+      if (this.open) {
+        this._startTimer();
+        dispatch(this, "show");
+      } else {
+        this._clearTimer();
+        dispatch(this, "hide");
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._clearTimer();
+  }
+  _startTimer() {
+    this._clearTimer();
+    if (this.duration > 0) {
+      this._timer = setTimeout(() => this.hide(), this.duration);
+    }
+  }
+  _clearTimer() {
+    if (this._timer !== void 0) {
+      clearTimeout(this._timer);
+      this._timer = void 0;
+    }
+  }
+  _handleClose() {
+    this.hide();
+  }
+  _handleAction() {
+    dispatch(this, "action");
+    this.hide();
+  }
+  get _resolvedIcon() {
+    if (this.icon === "none") return "";
+    if (this.icon) return this.icon;
+    if (this.variant === "default") return "";
+    return Snackbar._iconMap[this.variant] ?? "";
+  }
+  render() {
+    const iconName = this._resolvedIcon;
+    return html2`
+      <lt-surface elevation="5" background=${Snackbar._bgMap[this.variant]}>
+        <div class="inner" role="status" aria-live="polite" part="base">
+          ${iconName ? html2`<lt-icon class="variant-icon" name=${iconName} part="icon"></lt-icon>` : ""}
+          <span class="message" part="message">
+            <slot></slot>
+          </span>
+          ${this.actionLabel ? html2`<button class="action" @click=${this._handleAction} part="action">${this.actionLabel}</button>` : ""}
+          ${this.closable ? html2`<button class="close" @click=${this._handleClose} aria-label="Dismiss" part="close">
+                <lt-icon name="xmark"></lt-icon>
+              </button>` : ""}
+        </div>
+      </lt-surface>
+    `;
+  }
+};
+Snackbar.styles = snackbarStyles;
+Snackbar._iconMap = {
+  success: "check-circle",
+  warning: "warning-triangle",
+  error: "xmark-circle",
+  info: "info-circle"
+};
+Snackbar._bgMap = {
+  default: "--lt-bg-inverse",
+  success: "--lt-interactive-success-bg",
+  warning: "--lt-interactive-warning-bg",
+  error: "--lt-interactive-error-bg",
+  info: "--lt-interactive-info-bg"
+};
+__decorateClass([
+  property3({ reflect: true })
+], Snackbar.prototype, "variant", 2);
+__decorateClass([
+  property3({ type: Number, reflect: true })
+], Snackbar.prototype, "duration", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Snackbar.prototype, "open", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Snackbar.prototype, "closable", 2);
+__decorateClass([
+  property3({ attribute: "action-label", reflect: true })
+], Snackbar.prototype, "actionLabel", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Snackbar.prototype, "icon", 2);
+Snackbar = __decorateClass([
+  customElement2("lt-snackbar")
+], Snackbar);
+export {
+  Snackbar
+};

package/dist/components/snackbar/snackbar.d.ts

@@ -0,0 +1,63 @@
+import { ThemeableElement } from '../../base';
+import type { SnackbarVariant } from './snackbar.types';
+import '@latty-ds/icons';
+import '../surface/surface';
+/**
+ * Brief notification that appears temporarily at the bottom of the viewport.
+ *
+ * @element lt-snackbar
+ *
+ * @slot - Notification content. Accepts any HTML — bold, links, etc.
+ *
+ * @fires show - Fired when the snackbar becomes visible.
+ * @fires hide - Fired when the snackbar is dismissed.
+ * @fires action - Fired when the action button is clicked.
+ *
+ * @example
+ * ```html
+ * <lt-snackbar id="sb" variant="success">Changes saved</lt-snackbar>
+ * <script type="module">
+ *   document.getElementById('sb').show();
+ * </script>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-snackbar action-label="Undo" duration="6000">
+ *   File <strong>report.pdf</strong> deleted
+ * </lt-snackbar>
+ * ```
+ */
+export declare class Snackbar extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Visual style. */
+    variant: SnackbarVariant;
+    /** Auto-dismiss delay in milliseconds. Set to 0 to disable auto-dismiss. */
+    duration: number;
+    /** Whether the snackbar is visible. */
+    open: boolean;
+    /** Show a dismiss button. */
+    closable: boolean;
+    /** Label for the optional action button. */
+    actionLabel: string;
+    /**
+     * Icon to show before the message. Leave empty for auto (shows variant icon for status variants),
+     * set to `"none"` to suppress, or pass any icon name to override.
+     */
+    icon: string;
+    private _timer?;
+    /** Shows the snackbar and starts the auto-dismiss timer. */
+    show(): void;
+    /** Dismisses the snackbar. */
+    hide(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _startTimer;
+    private _clearTimer;
+    private _handleClose;
+    private _handleAction;
+    private static readonly _iconMap;
+    private static readonly _bgMap;
+    private get _resolvedIcon();
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1 @@
+export type SnackbarVariant = 'default' | 'success' | 'warning' | 'error' | 'info';

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

@@ -0,0 +1,8 @@
+/**
+ * Spinner component module.
+ * Exports the Spinner web component and related type definitions.
+ *
+ * @module components/spinner
+ */
+export { Spinner } from './spinner';
+export type { SpinnerSize, SpinnerVariant } from './spinner.types';

package/dist/components/spinner/index.js

@@ -0,0 +1,131 @@
+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/spinner/spinner.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/spinner/spinner.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/spinner/spineer.styles.ts
+import { css } from "lit";
+var spinnerStyles = css`
+  :host {
+    --lt-spinner-size: var(--lt-spacing-4, 1rem);
+    --lt-spinner-color: currentColor;
+
+    display: inline-block;
+    line-height: 0;
+  }
+
+  /* Sizes */
+  :host([size='sm']) {
+    --lt-spinner-size: var(--lt-spacing-3, 0.75rem);
+  }
+  :host([size='md']) {
+    --lt-spinner-size: var(--lt-spacing-4, 1rem);
+  }
+  :host([size='lg']) {
+    --lt-spinner-size: var(--lt-spacing-6, 1.5rem);
+  }
+
+  /* Color */
+  :host([variant='primary']) {
+    --lt-spinner-color: var(--lt-interactive-primary-bg);
+  }
+  :host([variant='secondary']) {
+    --lt-spinner-color: var(--lt-interactive-secondary-bg);
+  }
+  :host([variant='neutral']) {
+    --lt-spinner-color: var(--lt-color-neutral-500);
+  }
+  :host([variant='current']) {
+    --lt-spinner-color: currentColor;
+  }
+
+  .spinner {
+    animation: spin 700ms linear infinite;
+    border-bottom-color: var(--lt-spinner-color);
+    border-left-color: var(--lt-spinner-color);
+    border-radius: 999px;
+    border-right-color: transparent;
+    border-style: solid;
+    border-top-color: var(--lt-spinner-color);
+    border-width: 2px;
+    box-sizing: border-box;
+    display: block;
+    height: var(--lt-spinner-size);
+    width: var(--lt-spinner-size);
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation: none;
+    }
+  }
+`;
+
+// src/components/spinner/spinner.ts
+var Spinner = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+    this.variant = "current";
+  }
+  /**
+   * Renders the spinner element.
+   * Hidden from assistive technologies with aria-hidden.
+   */
+  render() {
+    return html`<span class="spinner" aria-hidden="true"></span>`;
+  }
+};
+Spinner.styles = spinnerStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Spinner.prototype, "size", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Spinner.prototype, "variant", 2);
+Spinner = __decorateClass([
+  customElement("lt-spinner")
+], Spinner);
+export {
+  Spinner
+};

package/dist/components/spinner/spineer.styles.d.ts

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

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,52 @@
+import { ThemeableElement } from '../../base';
+import type { SpinnerSize, SpinnerVariant } from './spinner.types';
+/**
+ * Spinner component for indicating loading states.
+ *
+ * @element lt-spinner
+ *
+ * Features:
+ * - Smooth rotating animation
+ * - Multiple size options (sm, md, lg)
+ * - Color variants or inherits parent color
+ * - Respects reduced motion preferences
+ * - Hidden from screen readers (aria-hidden)
+ *
+ * @example
+ * ```html
+ * <lt-spinner size="md" variant="primary"></lt-spinner>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Inherits text color from parent -->
+ * <div style="color: blue;">
+ *   <lt-spinner variant="current"></lt-spinner>
+ * </div>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Large spinner with success color -->
+ * <lt-spinner size="lg" variant="primary"></lt-spinner>
+ * ```
+ */
+export declare class Spinner extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Size of the spinner.
+     * @default 'md'
+     */
+    size: SpinnerSize;
+    /**
+     * Color variant of the spinner.
+     * 'current' inherits color from parent element.
+     * @default 'current'
+     */
+    variant: SpinnerVariant;
+    /**
+     * Renders the spinner element.
+     * Hidden from assistive technologies with aria-hidden.
+     */
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Size variant of the spinner component.
+ * Determines the diameter of the spinner.
+ *
+ * - `sm`: 0.75rem (12px)
+ * - `md`: 1rem (16px) - default
+ * - `lg`: 1.5rem (24px)
+ */
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+/**
+ * Color variant of the spinner component.
+ *
+ * - `primary`: Primary brand color
+ * - `secondary`: Secondary brand color
+ * - `neutral`: Neutral gray color
+ * - `current`: Inherits color from parent (default)
+ */
+export type SpinnerVariant = 'primary' | 'secondary' | 'neutral' | 'current';

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

@@ -0,0 +1,8 @@
+/**
+ * Surface component module.
+ * Exports the Surface web component and related type definitions.
+ *
+ * @module components/surface
+ */
+export { Surface } from './surface';
+export type { SurfaceElevation, SurfaceAppearance } from './surface.types';