@latty-ds/web 0.2.0

package/dist/components/nav/index.js

@@ -0,0 +1,345 @@
+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/nav/nav.ts
+import { html as html2, nothing as nothing2 } 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/nav/nav.ts
+import { customElement as customElement2, property as property3 } from "lit/decorators.js";
+
+// src/components/nav/nav.styles.ts
+import { css } from "lit";
+var navStyles = css`
+  :host {
+    display: block;
+  }
+
+  nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  :host([orientation='horizontal']) nav {
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+`;
+var navItemStyles = css`
+  :host {
+    display: contents;
+  }
+
+  .item-root {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Trigger row: link + optional chevron */
+  .item-trigger {
+    display: flex;
+    align-items: center;
+    gap: var(--lt-spacing-2);
+    width: 100%;
+    padding: var(--lt-nav-item-padding, var(--lt-spacing-2) var(--lt-spacing-3));
+    border-radius: 6px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: inherit;
+    font-size: var(--lt-nav-item-font-size, 0.9375rem);
+    font-family: inherit;
+    text-decoration: none;
+    text-align: left;
+    transition: background 120ms;
+    white-space: nowrap;
+  }
+
+  .item-trigger:hover {
+    background: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .item-trigger:active {
+    background: color-mix(in srgb, currentColor 18%, transparent);
+  }
+
+  :host([active]) .item-trigger {
+    background: var(--lt-nav-item-active-bg, color-mix(in srgb, currentColor 15%, transparent));
+    color: var(--lt-nav-item-active-color, inherit);
+    font-weight: 600;
+  }
+
+  :host([disabled]) .item-trigger {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .label {
+    flex: 1;
+  }
+
+  .icon-start {
+    flex-shrink: 0;
+    color: inherit;
+  }
+
+  /* Chevron rotates when open */
+  .chevron {
+    flex-shrink: 0;
+    color: inherit;
+    opacity: 0.6;
+    transition: transform 180ms ease;
+  }
+
+  :host([open]) .chevron {
+    transform: rotate(180deg);
+  }
+
+  /* Collapsible children */
+  .children {
+    overflow: hidden;
+    height: 0;
+    transition: height 200ms ease;
+  }
+
+  .children-inner {
+    padding-left: var(--lt-spacing-4);
+    padding-top: var(--lt-spacing-1);
+    padding-bottom: var(--lt-spacing-1);
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* In horizontal nav, top-level items lay out row-style */
+  :host([orientation='horizontal']) .item-root {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  /* Horizontal children drop down as a popover-style panel */
+  :host([orientation='horizontal']) .children {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 160px;
+    background: var(--lt-bg-default);
+    color: var(--lt-color-neutral-700);
+    border: 1px solid var(--lt-color-neutral-200);
+    border-radius: 8px;
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.08),
+      0 2px 4px -2px rgb(0 0 0 / 0.05);
+    z-index: 100;
+    height: auto !important;
+    display: none;
+  }
+
+  :host([orientation='horizontal'][open]) .children {
+    display: block;
+  }
+
+  :host([orientation='horizontal']) .children-inner {
+    padding: var(--lt-spacing-2);
+  }
+`;
+
+// src/components/nav/nav-item.ts
+import { html, nothing } from "lit";
+import { customElement, property as property2, query } from "lit/decorators.js";
+import "@latty-ds/icons";
+var NavItem = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.href = "";
+    this.label = "";
+    this.iconStart = "";
+    this.active = false;
+    this.disabled = false;
+    this.open = false;
+    this.orientation = "vertical";
+    this._hasChildren = false;
+  }
+  _onSlotChange(e) {
+    const slot = e.target;
+    const nodes = slot.assignedElements();
+    this._hasChildren = nodes.length > 0;
+    nodes.forEach((el) => {
+      if (el.tagName.toLowerCase() === "lt-nav-item") {
+        el.removeAttribute("orientation");
+      }
+    });
+    this.requestUpdate();
+  }
+  updated(changed) {
+    if (changed.has("open") && this._childrenEl && this._childrenInnerEl && this.orientation === "vertical") {
+      const inner = this._childrenInnerEl;
+      const container = this._childrenEl;
+      if (this.open) {
+        container.style.height = `${inner.offsetHeight}px`;
+      } else {
+        container.style.height = `${inner.offsetHeight}px`;
+        requestAnimationFrame(() => {
+          container.style.height = "0px";
+        });
+      }
+    }
+  }
+  _handleTransitionEnd() {
+    if (this.open && this._childrenEl) {
+      this._childrenEl.style.height = "auto";
+    }
+  }
+  _handleTriggerClick(e) {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent("nav-item-click", {
+        detail: { href: this.href, label: this.label },
+        bubbles: true,
+        composed: true
+      })
+    );
+    if (this._hasChildren) {
+      e.preventDefault();
+      this.open = !this.open;
+      this.dispatchEvent(
+        new CustomEvent("nav-collapse", {
+          detail: { open: this.open },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  _renderTrigger() {
+    const showChevron = this._hasChildren;
+    const inner = html`
+      ${this.iconStart ? html`<lt-icon class="icon-start" name=${this.iconStart} size="sm"></lt-icon>` : nothing}
+      <span class="label">${this.label}</span>
+      ${showChevron ? html`<lt-icon class="chevron" name="caret-down" size="sm"></lt-icon>` : nothing}
+    `;
+    if (this.href && !this._hasChildren) {
+      return html`<a class="item-trigger" href=${this.href} @click=${this._handleTriggerClick}>${inner}</a>`;
+    }
+    return html`<button class="item-trigger" @click=${this._handleTriggerClick} ?disabled=${this.disabled}>
+      ${inner}
+    </button>`;
+  }
+  render() {
+    return html`
+      <div class="item-root">
+        ${this._renderTrigger()}
+        ${this._hasChildren ? html`
+              <div class="children" @transitionend=${this._handleTransitionEnd}>
+                <div class="children-inner">
+                  <slot @slotchange=${this._onSlotChange}></slot>
+                </div>
+              </div>
+            ` : html`<slot @slotchange=${this._onSlotChange} style="display:none"></slot>`}
+      </div>
+    `;
+  }
+};
+NavItem.styles = navItemStyles;
+__decorateClass([
+  property2()
+], NavItem.prototype, "href", 2);
+__decorateClass([
+  property2()
+], NavItem.prototype, "label", 2);
+__decorateClass([
+  property2({ attribute: "icon-start" })
+], NavItem.prototype, "iconStart", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], NavItem.prototype, "active", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], NavItem.prototype, "disabled", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], NavItem.prototype, "open", 2);
+__decorateClass([
+  property2({ reflect: true })
+], NavItem.prototype, "orientation", 2);
+__decorateClass([
+  query(".children")
+], NavItem.prototype, "_childrenEl", 2);
+__decorateClass([
+  query(".children-inner")
+], NavItem.prototype, "_childrenInnerEl", 2);
+NavItem = __decorateClass([
+  customElement("lt-nav-item")
+], NavItem);
+
+// src/components/nav/nav.ts
+var Nav = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.orientation = "vertical";
+  }
+  _propagateOrientation() {
+    this.querySelectorAll(":scope > lt-nav-item").forEach((item) => {
+      item.setAttribute("orientation", this.orientation);
+    });
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("orientation")) this._propagateOrientation();
+  }
+  render() {
+    return html2`
+      <nav role="navigation" aria-label=${this.label || nothing2}>
+        <slot @slotchange=${this._propagateOrientation}></slot>
+      </nav>
+    `;
+  }
+};
+Nav.styles = navStyles;
+__decorateClass([
+  property3()
+], Nav.prototype, "label", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Nav.prototype, "orientation", 2);
+Nav = __decorateClass([
+  customElement2("lt-nav")
+], Nav);
+export {
+  Nav,
+  NavItem
+};

package/dist/components/nav/nav-item.d.ts

@@ -0,0 +1,73 @@
+import { ThemeableElement } from '../../base';
+import { NavOrientation } from './nav.types';
+import '@latty-ds/icons';
+/**
+ * A single navigation item. Can render as an anchor link or a collapsible group header
+ * when children are slotted.
+ *
+ * When slotted inside `<lt-nav orientation="horizontal">`, top-level items lay out in a row
+ * and nested children appear as a dropdown panel. In vertical mode, nested children
+ * collapse/expand inline.
+ *
+ * @element lt-nav-item
+ *
+ * @fires {CustomEvent<{ href: string; label: string }>} nav-item-click - Fired when the item
+ *   is clicked (even when it has no href).
+ * @fires {CustomEvent<{ open: boolean }>} nav-collapse - Fired when a collapsible item
+ *   is opened or closed.
+ *
+ * @slot - Nested `<lt-nav-item>` children (makes this item a collapsible group)
+ *
+ * @example
+ * ```html
+ * <!-- Simple link -->
+ * <lt-nav-item href="/dashboard" label="Dashboard" icon-start="home"></lt-nav-item>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Collapsible group -->
+ * <lt-nav-item label="Settings" icon-start="settings">
+ *   <lt-nav-item href="/settings/profile" label="Profile"></lt-nav-item>
+ *   <lt-nav-item href="/settings/security" label="Security"></lt-nav-item>
+ * </lt-nav-item>
+ * ```
+ */
+export declare class NavItem extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Destination URL. If omitted, the item acts as a group header. */
+    href: string;
+    /** Label text shown in the item. */
+    label: string;
+    /**
+     * Icon name (from the built-in Latty icon set) shown before the label.
+     * @default ''
+     */
+    iconStart: string;
+    /**
+     * Whether this item is currently the active/selected page.
+     * @default false
+     */
+    active: boolean;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether nested children are expanded. Only relevant when children are slotted.
+     * @default false
+     */
+    open: boolean;
+    /** Set by the parent `<lt-nav>` — do not set manually. */
+    orientation: NavOrientation;
+    private _childrenEl?;
+    private _childrenInnerEl?;
+    private _hasChildren;
+    private _onSlotChange;
+    protected updated(changed: Map<string, unknown>): void;
+    private _handleTransitionEnd;
+    private _handleTriggerClick;
+    private _renderTrigger;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/nav/nav.d.ts

@@ -0,0 +1,49 @@
+import { ThemeableElement } from '../../base';
+import { NavOrientation } from './nav.types';
+import './nav-item';
+/**
+ * Navigation container. Renders a `<nav>` element wrapping a list of `<lt-nav-item>` links.
+ * Supports horizontal or vertical orientation and propagates the orientation to all
+ * `<lt-nav-item>` children so nested items behave correctly.
+ *
+ * @element lt-nav
+ *
+ * @slot - Slot for `<lt-nav-item>` elements
+ *
+ * @example
+ * ```html
+ * <!-- Vertical (default) -->
+ * <lt-nav>
+ *   <lt-nav-item href="/" label="Home" icon-start="home"></lt-nav-item>
+ *   <lt-nav-item href="/about" label="About"></lt-nav-item>
+ * </lt-nav>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Horizontal with nested dropdown -->
+ * <lt-nav orientation="horizontal">
+ *   <lt-nav-item href="/" label="Home"></lt-nav-item>
+ *   <lt-nav-item label="Products">
+ *     <lt-nav-item href="/products/a" label="Product A"></lt-nav-item>
+ *     <lt-nav-item href="/products/b" label="Product B"></lt-nav-item>
+ *   </lt-nav-item>
+ * </lt-nav>
+ * ```
+ */
+export declare class Nav extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Accessible label for the navigation region. Required when multiple nav elements appear on one page.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Layout direction of the navigation.
+     * @default 'vertical'
+     */
+    orientation: NavOrientation;
+    private _propagateOrientation;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1 @@
+export type NavOrientation = 'horizontal' | 'vertical';

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

@@ -0,0 +1,2 @@
+export { Pagination } from './pagination';
+export type { PaginationSize } from './pagination.types';

package/dist/components/pagination/index.js

@@ -0,0 +1,210 @@
+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/pagination/pagination.ts
+import { html, nothing } 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/pagination/pagination.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/pagination/pagination.styles.ts
+import { css } from "lit";
+var paginationStyles = css`
+  :host {
+    display: inline-flex;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  nav {
+    align-items: center;
+    display: flex;
+    gap: var(--lt-spacing-1);
+  }
+
+  button {
+    align-items: center;
+    background: transparent;
+    border-radius: var(--lt-border-radius);
+    border: 1px solid transparent;
+    color: var(--lt-text-default);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: inherit;
+    font-weight: 500;
+    justify-content: center;
+    line-height: 1;
+    transition:
+      background 120ms ease,
+      border-color 120ms ease,
+      color 120ms ease;
+    user-select: none;
+  }
+
+  /* Sizes */
+  :host([size='sm']) button {
+    font-size: 0.75rem;
+    height: 28px;
+    min-width: 28px;
+    padding: 0 var(--lt-spacing-1);
+  }
+  :host([size='md']) button,
+  :host(:not([size])) button {
+    font-size: 0.8125rem;
+    height: 36px;
+    min-width: 36px;
+    padding: 0 var(--lt-spacing-2);
+  }
+  :host([size='lg']) button {
+    font-size: 0.9375rem;
+    height: 44px;
+    min-width: 44px;
+    padding: 0 var(--lt-spacing-3);
+  }
+
+  button:hover:not(:disabled) {
+    background: var(--lt-bg-neutral-subtle);
+    border-color: var(--lt-border-default);
+  }
+
+  button[aria-current='page'] {
+    background: var(--lt-bg-primary-subtle);
+    border-color: var(--lt-border-primary);
+    color: var(--lt-color-primary-700);
+    font-weight: 600;
+  }
+
+  button.ellipsis {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  button:disabled {
+    color: var(--lt-color-neutral-400);
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) button {
+    color: var(--lt-color-neutral-400);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+`;
+
+// src/utils/dispatch.ts
+var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, ...init }));
+
+// src/components/pagination/pagination.ts
+import "@latty-ds/icons";
+var Pagination = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.page = 1;
+    this.totalPages = 1;
+    this.size = "md";
+    this.disabled = false;
+  }
+  _go(page) {
+    if (this.disabled || page < 1 || page > this.totalPages || page === this.page) return;
+    this.page = page;
+    dispatch(this, "change", { page });
+  }
+  _pages() {
+    const total = this.totalPages;
+    const current = this.page;
+    if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+    const pages = [1];
+    if (current > 3) pages.push("\u2026");
+    const start = Math.max(2, current - 1);
+    const end = Math.min(total - 1, current + 1);
+    for (let i = start; i <= end; i++) pages.push(i);
+    if (current < total - 2) pages.push("\u2026");
+    pages.push(total);
+    return pages;
+  }
+  render() {
+    const pages = this._pages();
+    const atFirst = this.page <= 1;
+    const atLast = this.page >= this.totalPages;
+    return html`
+      <nav aria-label="Pagination">
+        <button aria-label="First page" ?disabled=${atFirst || this.disabled} @click=${() => this._go(1)}>
+          <lt-icon name="double-nav-arrow-left" size="sm"></lt-icon>
+        </button>
+        <button
+          aria-label="Previous page"
+          ?disabled=${atFirst || this.disabled}
+          @click=${() => this._go(this.page - 1)}
+        >
+          <lt-icon name="nav-arrow-left" size="sm"></lt-icon>
+        </button>
+
+        ${pages.map(
+      (p) => p === "\u2026" ? html`<button class="ellipsis" aria-hidden="true" tabindex="-1">…</button>` : html`<button
+                aria-label="Page ${p}"
+                aria-current=${p === this.page ? "page" : nothing}
+                ?disabled=${this.disabled}
+                @click=${() => this._go(p)}
+              >
+                ${p}
+              </button>`
+    )}
+
+        <button aria-label="Next page" ?disabled=${atLast || this.disabled} @click=${() => this._go(this.page + 1)}>
+          <lt-icon name="nav-arrow-right" size="sm"></lt-icon>
+        </button>
+        <button aria-label="Last page" ?disabled=${atLast || this.disabled} @click=${() => this._go(this.totalPages)}>
+          <lt-icon name="double-nav-arrow-right" size="sm"></lt-icon>
+        </button>
+      </nav>
+    `;
+  }
+};
+Pagination.styles = paginationStyles;
+__decorateClass([
+  property2({ type: Number, reflect: true })
+], Pagination.prototype, "page", 2);
+__decorateClass([
+  property2({ type: Number, attribute: "total-pages", reflect: true })
+], Pagination.prototype, "totalPages", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Pagination.prototype, "size", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Pagination.prototype, "disabled", 2);
+Pagination = __decorateClass([
+  customElement("lt-pagination")
+], Pagination);
+export {
+  Pagination
+};