@latty-ds/web 0.2.0

package/dist/components/link/index.js

@@ -0,0 +1,108 @@
+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/link/link.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/link/link.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+import "@latty-ds/icons";
+
+// src/components/link/link.styles.ts
+import { css } from "lit";
+var linkStyles = css`
+  :host {
+    display: inline;
+  }
+
+  a[part='base'] {
+    align-items: center;
+    color: var(--lt-text-primary);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    gap: 0.25em;
+    text-decoration: none;
+    vertical-align: baseline;
+  }
+
+  a[part='base']:hover {
+    color: var(--lt-text-primary);
+    text-decoration: underline;
+  }
+
+  a[part='base']:focus-visible {
+    border-radius: 2px;
+    outline: 2px solid var(--lt-border-focus);
+    outline-offset: 2px;
+  }
+
+  lt-icon[part='icon'] {
+    flex-shrink: 0;
+  }
+`;
+
+// src/components/link/link.ts
+var Link = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.href = "";
+    this.external = false;
+  }
+  render() {
+    return html`
+      <a
+        part="base"
+        href=${this.href || nothing}
+        target=${this.external ? "_blank" : nothing}
+        rel=${this.external ? "noopener noreferrer" : nothing}
+      >
+        <slot></slot>
+        ${this.external ? html`<lt-icon name="external" size="xs" part="icon"></lt-icon>` : nothing}
+      </a>
+    `;
+  }
+};
+Link.styles = linkStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Link.prototype, "href", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Link.prototype, "external", 2);
+Link = __decorateClass([
+  customElement("lt-link")
+], Link);
+export {
+  Link
+};

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

@@ -0,0 +1,22 @@
+import { ThemeableElement } from '../../base';
+import '@latty-ds/icons';
+/**
+ * A styled anchor element. Uses the primary color by default with an underline on hover.
+ * Set `external` to open in a new tab and display a trailing external-link icon.
+ *
+ * @element lt-link
+ *
+ * @example
+ * ```html
+ * <lt-link href="https://example.com">Visit site</lt-link>
+ * <lt-link href="https://example.com" external>Open in new tab</lt-link>
+ * ```
+ */
+export declare class Link extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Destination URL forwarded to the underlying `<a>` element. */
+    href: string;
+    /** Opens the link in a new tab and appends an external-link icon. */
+    external: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1 @@
+export type LinkTarget = '_blank' | '_self' | '_parent' | '_top';

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

@@ -0,0 +1,9 @@
+/**
+ * List component module.
+ * Exports the List web component and related type definitions.
+ *
+ * @module components/list
+ */
+export { List } from './list';
+export { ListItem } from './list-item';
+export type { ListType, ListSize } from './list.types';

package/dist/components/list/index.js

@@ -0,0 +1,254 @@
+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/list/list.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/list/list.ts
+import { customElement as customElement2, property as property3 } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+// src/components/list/list.styles.ts
+import { css } from "lit";
+var listStyles = css`
+  :host {
+    display: block;
+    font-family: 'Hanken Grotesk', sans-serif;
+    --list-marker-color: var(--lt-color-neutral-500);
+  }
+
+  ul,
+  ol {
+    margin: 0;
+    padding: 0;
+    list-style-position: outside;
+    color: var(--lt-text-default);
+  }
+
+  ul {
+    padding-left: var(--lt-spacing-5);
+  }
+
+  ol {
+    padding-left: var(--lt-spacing-5);
+  }
+
+  ::slotted(li),
+  ::slotted(lt-list-item) {
+    margin-bottom: var(--lt-spacing-2);
+  }
+
+  ::slotted(li:last-child),
+  ::slotted(lt-list-item:last-child) {
+    margin-bottom: 0;
+  }
+
+  ::slotted(lt-list) {
+    display: block;
+    margin-top: var(--lt-spacing-2);
+    margin-bottom: var(--lt-spacing-2);
+    padding-left: var(--lt-spacing-5);
+    font-size: 0.9em;
+  }
+
+  /* No marker */
+  :host([no-marker]) ul,
+  :host([no-marker]) ol {
+    list-style: none;
+    padding-left: 0;
+  }
+
+  /* Divider */
+  :host([divider]) ::slotted(lt-list-item) {
+    border-bottom: 1px solid var(--lt-border-default);
+    padding-bottom: var(--lt-spacing-2);
+  }
+
+  :host([divider]) ::slotted(lt-list-item:last-child) {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  ::slotted(lt-list:first-child) {
+    margin-top: var(--lt-spacing-2);
+  }
+
+  ::slotted(lt-list:last-child) {
+    margin-bottom: 0;
+  }
+
+  ul ::slotted(li)::marker {
+    color: var(--list-marker-color);
+  }
+
+  ol ::slotted(li)::marker {
+    color: var(--list-marker-color);
+  }
+
+  /* Size variants */
+  :host([size='sm']) ul,
+  :host([size='sm']) ol {
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+
+  :host([size='sm']) ::slotted(li),
+  :host([size='sm']) ::slotted(lt-list-item) {
+    margin-bottom: var(--lt-spacing-1);
+  }
+
+  :host([size='md']) ul,
+  :host([size='md']) ol {
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+
+  :host([size='md']) ::slotted(li),
+  :host([size='md']) ::slotted(lt-list-item) {
+    margin-bottom: var(--lt-spacing-2);
+  }
+
+  :host([size='lg']) ul,
+  :host([size='lg']) ol {
+    font-size: 1.125rem;
+    line-height: 1.7;
+  }
+
+  :host([size='lg']) ::slotted(li),
+  :host([size='lg']) ::slotted(lt-list-item) {
+    margin-bottom: var(--lt-spacing-3);
+  }
+`;
+
+// src/components/list/list-item.ts
+import { html, nothing } from "lit";
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/list/list-item.styles.ts
+import { css as css2 } from "lit";
+var listItemStyles = css2`
+  :host {
+    display: list-item;
+    margin: 0;
+    padding: 0;
+  }
+
+  .inner {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--lt-spacing-2);
+  }
+
+  lt-icon {
+    flex-shrink: 0;
+    color: var(--lt-color-neutral-500);
+    font-size: inherit;
+  }
+`;
+
+// src/components/list/list-item.ts
+import "@latty-ds/icons";
+var ListItem = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.iconStart = "";
+    this.iconEnd = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) this.setAttribute("role", "listitem");
+  }
+  render() {
+    return html`
+      <div class="inner">
+        ${this.iconStart ? html`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : nothing}
+        <slot></slot>
+        ${this.iconEnd ? html`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : nothing}
+      </div>
+    `;
+  }
+};
+ListItem.styles = listItemStyles;
+__decorateClass([
+  property2({ attribute: "icon-start" })
+], ListItem.prototype, "iconStart", 2);
+__decorateClass([
+  property2({ attribute: "icon-end" })
+], ListItem.prototype, "iconEnd", 2);
+ListItem = __decorateClass([
+  customElement("lt-list-item")
+], ListItem);
+
+// src/components/list/list.ts
+var List = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.type = "unordered";
+    this.size = "md";
+    this.markerColor = "";
+    this.divider = false;
+    this.noMarker = false;
+  }
+  render() {
+    const isOrdered = this.type === "ordered";
+    const styles = this.markerColor ? { "--list-marker-color": this.markerColor } : {};
+    return isOrdered ? html2`<ol part="list" style=${styleMap(styles)}>
+          <slot></slot>
+        </ol>` : html2`<ul part="list" style=${styleMap(styles)}>
+          <slot></slot>
+        </ul>`;
+  }
+};
+List.styles = listStyles;
+__decorateClass([
+  property3({ reflect: true })
+], List.prototype, "type", 2);
+__decorateClass([
+  property3({ reflect: true })
+], List.prototype, "size", 2);
+__decorateClass([
+  property3({ attribute: "marker-color" })
+], List.prototype, "markerColor", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], List.prototype, "divider", 2);
+__decorateClass([
+  property3({ type: Boolean, attribute: "no-marker", reflect: true })
+], List.prototype, "noMarker", 2);
+List = __decorateClass([
+  customElement2("lt-list")
+], List);
+export {
+  List,
+  ListItem
+};

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

@@ -0,0 +1,41 @@
+import { ThemeableElement } from '../../base';
+import '@latty-ds/icons';
+/**
+ * A list item component that renders a `<li>` element in shadow DOM.
+ *
+ * This component solves the HTML parser issue where nested `<lt-list>` components
+ * cannot contain plain `<li>` elements due to browser parsing rules. By wrapping
+ * the `<li>` in a custom element's shadow DOM, we can properly nest lists.
+ *
+ * @element lt-list-item
+ *
+ * @slot - Default slot for list item content
+ *
+ * @example
+ * ```html
+ * <lt-list>
+ *   <lt-list-item>First item</lt-list-item>
+ *   <lt-list-item>Second item</lt-list-item>
+ *   <lt-list-item>Third item</lt-list-item>
+ * </lt-list>
+ * ```
+ *
+ * @example
+ * With icons:
+ * ```html
+ * <lt-list>
+ *   <lt-list-item icon-start="check">Done</lt-list-item>
+ *   <lt-list-item icon-start="clock">Pending</lt-list-item>
+ *   <lt-list-item icon-start="info" icon-end="arrow-right">Details</lt-list-item>
+ * </lt-list>
+ * ```
+ */
+export declare class ListItem extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    /** Icon name to display before the item content. */
+    iconStart: string;
+    /** Icon name to display after the item content. */
+    iconEnd: string;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/list/list-item.styles.d.ts

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

package/dist/components/list/list.d.ts

@@ -0,0 +1,85 @@
+import { ThemeableElement } from '../../base';
+import { ListType, ListSize } from './list.types';
+import './list-item';
+/**
+ * A customizable list component supporting both ordered and unordered lists.
+ *
+ * @element lt-list
+ *
+ * @slot - Default slot for list items (`<li>` elements)
+ *
+ * @csspart list - The underlying `<ul>` or `<ol>` element
+ *
+ * @cssprop --list-marker-color - Color of the bullet points or numbers (default: neutral-500)
+ *
+ * @example
+ * ```html
+ * <lt-list>
+ *   <li>First item</li>
+ *   <li>Second item</li>
+ *   <li>Third item</li>
+ * </lt-list>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-list type="ordered" size="lg">
+ *   <li>Step one</li>
+ *   <li>Step two</li>
+ *   <li>Step three</li>
+ * </lt-list>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-list marker-color="var(--lt-color-primary-500)">
+ *   <li>Highlighted item</li>
+ *   <li>Another item</li>
+ * </lt-list>
+ * ```
+ *
+ * @example
+ * Nested lists:
+ * ```html
+ * <lt-list>
+ *   <li>
+ *     Main item
+ *     <lt-list type="ordered">
+ *       <li>Nested item 1</li>
+ *       <li>Nested item 2</li>
+ *     </lt-list>
+ *   </li>
+ * </lt-list>
+ * ```
+ */
+export declare class List extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Type of list to render.
+     * @default 'unordered'
+     */
+    type: ListType;
+    /**
+     * Size of the list items.
+     * @default 'md'
+     */
+    size: ListSize;
+    /**
+     * Custom color for the list markers (bullets or numbers).
+     * Accepts any valid CSS color value.
+     * @default ''
+     */
+    markerColor: string;
+    /**
+     * Whether to show a divider line between list items.
+     * @default false
+     */
+    divider: boolean;
+    /**
+     * Whether to hide the list markers (bullets or numbers).
+     * Also removes the left indent reserved for the marker.
+     * @default false
+     */
+    noMarker: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,16 @@
+/**
+ * Type of list to render.
+ *
+ * - `unordered`: Renders a `<ul>` element with bullet markers
+ * - `ordered`: Renders an `<ol>` element with number markers
+ */
+export type ListType = 'unordered' | 'ordered';
+/**
+ * Size variant of the list component.
+ * Affects font size and spacing.
+ *
+ * - `sm`: 0.875rem font size, compact spacing
+ * - `md`: 1rem font size, standard spacing
+ * - `lg`: 1.125rem font size, relaxed spacing
+ */
+export type ListSize = 'sm' | 'md' | 'lg';

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

@@ -0,0 +1,3 @@
+export { Nav } from './nav';
+export { NavItem } from './nav-item';
+export type { NavOrientation } from './nav.types';