@latty-ds/web 0.2.0

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

@@ -0,0 +1,34 @@
+import { ThemeableElement } from '../../base';
+import type { PaginationSize } from './pagination.types';
+import '@latty-ds/icons';
+/**
+ * Page navigation control for paged data sets.
+ *
+ * @element lt-pagination
+ *
+ * @fires {CustomEvent<{page: number}>} change - Fired when the user navigates to a different page.
+ *
+ * @example
+ * ```html
+ * <lt-pagination page="1" total-pages="10"></lt-pagination>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-pagination page="5" total-pages="20" size="sm"></lt-pagination>
+ * ```
+ */
+export declare class Pagination extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Currently active page (1-indexed). */
+    page: number;
+    /** Total number of pages. */
+    totalPages: number;
+    /** Visual size. */
+    size: PaginationSize;
+    /** Disable all controls. */
+    disabled: boolean;
+    private _go;
+    private _pages;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1 @@
+export type PaginationSize = 'sm' | 'md' | 'lg';

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

@@ -0,0 +1,2 @@
+export { Progress } from './progress';
+export type { ProgressVariant, ProgressSize } from './progress.types';

package/dist/components/progress/index.js

@@ -0,0 +1,167 @@
+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/progress/progress.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/progress/progress.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/progress/progress.styles.ts
+import { css } from "lit";
+var progressStyles = css`
+  :host {
+    display: block;
+  }
+
+  :host {
+    --_fill-color: var(--lt-interactive-primary-bg);
+  }
+
+  :host([variant='primary']) {
+    --_fill-color: var(--lt-interactive-primary-bg);
+  }
+  :host([variant='success']) {
+    --_fill-color: var(--lt-interactive-success-bg);
+  }
+  :host([variant='warning']) {
+    --_fill-color: var(--lt-interactive-warning-bg);
+  }
+  :host([variant='error']) {
+    --_fill-color: var(--lt-interactive-error-bg);
+  }
+  :host([variant='neutral']) {
+    --_fill-color: var(--lt-color-neutral-600);
+  }
+
+  [part='track'] {
+    background: var(--lt-progress-track-color, var(--lt-color-neutral-200));
+    border-radius: 999px;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  [part='fill'] {
+    background: var(--lt-progress-color, var(--_fill-color));
+    border-radius: 999px;
+    height: 100%;
+    transition: width 300ms ease;
+  }
+
+  /* ── Sizes ──────────────────────────────────────────────────────────────── */
+
+  :host([size='sm']) [part='track'] {
+    height: var(--lt-progress-height, 4px);
+  }
+  :host([size='md']) [part='track'] {
+    height: var(--lt-progress-height, 8px);
+  }
+  :host([size='lg']) [part='track'] {
+    height: var(--lt-progress-height, 12px);
+  }
+
+  /* ── Indeterminate ──────────────────────────────────────────────────────── */
+
+  :host([indeterminate]) [part='fill'] {
+    animation: indeterminate 1.5s ease-in-out infinite;
+    width: 40%;
+  }
+
+  @keyframes indeterminate {
+    0% {
+      transform: translateX(-250%);
+    }
+    100% {
+      transform: translateX(350%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='fill'] {
+      transition: none;
+    }
+    :host([indeterminate]) [part='fill'] {
+      animation: none;
+      width: 100%;
+    }
+  }
+`;
+
+// src/components/progress/progress.ts
+var Progress = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.value = 0;
+    this.variant = "primary";
+    this.size = "md";
+    this.label = "";
+    this.indeterminate = false;
+  }
+  render() {
+    const pct = Math.min(100, Math.max(0, this.value));
+    return html`
+      <div
+        part="track"
+        role="progressbar"
+        aria-label=${this.label || nothing}
+        aria-valuenow=${this.indeterminate ? nothing : pct}
+        aria-valuemin="0"
+        aria-valuemax="100"
+      >
+        <div part="fill" style=${this.indeterminate ? nothing : `width:${pct}%`}></div>
+      </div>
+    `;
+  }
+};
+Progress.styles = progressStyles;
+__decorateClass([
+  property2({ type: Number })
+], Progress.prototype, "value", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Progress.prototype, "variant", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Progress.prototype, "size", 2);
+__decorateClass([
+  property2()
+], Progress.prototype, "label", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Progress.prototype, "indeterminate", 2);
+Progress = __decorateClass([
+  customElement("lt-progress")
+], Progress);
+export {
+  Progress
+};

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,44 @@
+import { ThemeableElement } from '../../base';
+import type { ProgressSize, ProgressVariant } from './progress.types';
+/**
+ * A horizontal bar that shows how far along a process is.
+ * Supports determinate (0–100 value) and indeterminate modes.
+ *
+ * @element lt-progress
+ *
+ * @example
+ * ```html
+ * <lt-progress value="40"></lt-progress>
+ * <lt-progress value="75" variant="success"></lt-progress>
+ * <lt-progress indeterminate></lt-progress>
+ * ```
+ */
+export declare class Progress extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Current progress value (0–100). Ignored when `indeterminate` is true.
+     * @default 0
+     */
+    value: number;
+    /**
+     * Color variant of the progress bar.
+     * @default 'primary'
+     */
+    variant: ProgressVariant;
+    /**
+     * Height of the track.
+     * @default 'md'
+     */
+    size: ProgressSize;
+    /**
+     * Accessible label for screen readers.
+     * @default ''
+     */
+    label: string;
+    /**
+     * When true the bar animates continuously without a set value.
+     * @default false
+     */
+    indeterminate: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,2 @@
+export type ProgressVariant = 'primary' | 'success' | 'warning' | 'error' | 'neutral';
+export type ProgressSize = 'sm' | 'md' | 'lg';

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

@@ -0,0 +1,8 @@
+/**
+ * Radio component module.
+ * Exports the Radio web component and related type definitions.
+ *
+ * @module components/radio
+ */
+export { Radio } from './radio';
+export type { RadioSize, RadioVariant, RadioLabelPosition } from './radio.types';

package/dist/components/radio/index.js

@@ -0,0 +1,294 @@
+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/radio/radio.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/radio/radio.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/radio/radio.styles.ts
+import { css } from "lit";
+var radioStyles = css`
+  :host {
+    display: inline-block;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  .radio-wrapper {
+    align-items: center;
+    cursor: pointer;
+    display: inline-flex;
+    gap: var(--lt-spacing-2);
+  }
+
+  .radio-container {
+    display: inline-flex;
+    position: relative;
+  }
+
+  :host([label-position='left']) .radio-wrapper {
+    flex-direction: row-reverse;
+  }
+
+  :host([disabled]) .radio-wrapper {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  input[type='radio'] {
+    appearance: none;
+    border-radius: 50%;
+    border: 2px solid var(--lt-border-strong);
+    cursor: pointer;
+    flex-shrink: 0;
+    margin: 0;
+    position: relative;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease;
+  }
+
+  input[type='radio']:hover:not(:disabled) {
+    border-color: var(--lt-color-neutral-600);
+  }
+
+  input[type='radio']:focus-visible {
+    outline: 3px solid var(--lt-border-focus);
+    outline-offset: 2px;
+  }
+
+  input[type='radio']:disabled {
+    cursor: not-allowed;
+  }
+
+  .dot {
+    background: white;
+    border-radius: 50%;
+    display: none;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  input[type='radio']:checked ~ .dot {
+    display: block;
+  }
+
+  .label {
+    color: var(--lt-text-default);
+    user-select: none;
+  }
+
+  /* Size variants */
+  :host([size='sm']) input[type='radio'] {
+    height: 16px;
+    width: 16px;
+  }
+
+  :host([size='sm']) .dot {
+    height: 8px;
+    width: 8px;
+    left: 4px;
+    top: 4px;
+  }
+
+  :host([size='sm']) .label {
+    font-size: 0.875rem;
+  }
+
+  :host([size='md']) input[type='radio'] {
+    height: 20px;
+    width: 20px;
+  }
+
+  :host([size='md']) .dot {
+    height: 10px;
+    width: 10px;
+    left: 5px;
+    top: 5px;
+  }
+
+  :host([size='md']) .label {
+    font-size: 1rem;
+  }
+
+  :host([size='lg']) input[type='radio'] {
+    height: 24px;
+    width: 24px;
+  }
+
+  :host([size='lg']) .dot {
+    height: 12px;
+    width: 12px;
+    left: 6px;
+    top: 6px;
+  }
+
+  :host([size='lg']) .label {
+    font-size: 1.0625rem;
+  }
+
+  /* Variant styles */
+  :host([variant='primary']) input[type='radio']:checked {
+    background: var(--lt-interactive-primary-bg);
+    border-color: var(--lt-interactive-primary-bg);
+  }
+  :host([variant='primary']) input[type='radio']:checked:hover:not(:disabled) {
+    background: var(--lt-interactive-primary-bg-hover);
+    border-color: var(--lt-interactive-primary-bg-hover);
+  }
+
+  :host([variant='secondary']) input[type='radio']:checked {
+    background: var(--lt-interactive-secondary-bg);
+    border-color: var(--lt-interactive-secondary-bg);
+  }
+  :host([variant='secondary']) input[type='radio']:checked:hover:not(:disabled) {
+    background: var(--lt-interactive-secondary-bg-hover);
+    border-color: var(--lt-interactive-secondary-bg-hover);
+  }
+
+  :host([variant='success']) input[type='radio']:checked {
+    background: var(--lt-interactive-success-bg);
+    border-color: var(--lt-interactive-success-bg);
+  }
+  :host([variant='success']) input[type='radio']:checked:hover:not(:disabled) {
+    background: var(--lt-interactive-success-bg-hover);
+    border-color: var(--lt-interactive-success-bg-hover);
+  }
+
+  :host([variant='error']) input[type='radio']:checked {
+    background: var(--lt-interactive-error-bg);
+    border-color: var(--lt-interactive-error-bg);
+  }
+  :host([variant='error']) input[type='radio']:checked:hover:not(:disabled) {
+    background: var(--lt-interactive-error-bg-hover);
+    border-color: var(--lt-interactive-error-bg-hover);
+  }
+
+  :host([variant='info']) input[type='radio']:checked {
+    background: var(--lt-interactive-info-bg);
+    border-color: var(--lt-interactive-info-bg);
+  }
+  :host([variant='info']) input[type='radio']:checked:hover:not(:disabled) {
+    background: var(--lt-interactive-info-bg-hover);
+    border-color: var(--lt-interactive-info-bg-hover);
+  }
+`;
+
+// src/components/radio/radio.ts
+var Radio = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+    this.size = "md";
+    this.checked = false;
+    this.disabled = false;
+    this.required = false;
+    this.label = "";
+    this.labelPosition = "right";
+    this.name = "";
+    this.value = "";
+  }
+  /**
+   * Handles radio change events.
+   * Updates the checked state and dispatches a custom change event.
+   *
+   * @param e - The native change event
+   * @private
+   */
+  handleChange(e) {
+    const target = e.target;
+    this.checked = target.checked;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value, checked: this.checked },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html`
+      <label class="radio-wrapper">
+        <div class="radio-container">
+          <input
+            type="radio"
+            .checked=${this.checked}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            name=${this.name}
+            value=${this.value}
+            @change=${this.handleChange}
+            aria-label=${this.label || "radio"}
+          />
+          <span class="dot"></span>
+        </div>
+        ${this.label ? html`<span class="label">${this.label}</span>` : ""}
+      </label>
+    `;
+  }
+};
+Radio.styles = radioStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Radio.prototype, "variant", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Radio.prototype, "size", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Radio.prototype, "checked", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Radio.prototype, "disabled", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Radio.prototype, "required", 2);
+__decorateClass([
+  property2()
+], Radio.prototype, "label", 2);
+__decorateClass([
+  property2({ attribute: "label-position", reflect: true })
+], Radio.prototype, "labelPosition", 2);
+__decorateClass([
+  property2()
+], Radio.prototype, "name", 2);
+__decorateClass([
+  property2()
+], Radio.prototype, "value", 2);
+Radio = __decorateClass([
+  customElement("lt-radio")
+], Radio);
+export {
+  Radio
+};

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,96 @@
+import { ThemeableElement } from '../../base';
+import { RadioSize, RadioVariant, RadioLabelPosition } from './radio.types';
+/**
+ * A customizable radio button component with support for multiple variants and sizes.
+ *
+ * @element lt-radio
+ *
+ * @fires {CustomEvent<{value: string, checked: boolean}>} change - Dispatched when the radio is selected
+ *
+ * @example
+ * ```html
+ * <lt-radio name="size" value="small" label="Small"></lt-radio>
+ * <lt-radio name="size" value="medium" label="Medium" checked></lt-radio>
+ * <lt-radio name="size" value="large" label="Large"></lt-radio>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-radio
+ *   variant="success"
+ *   name="option"
+ *   value="yes"
+ *   label="Yes, I agree"
+ *   checked
+ * ></lt-radio>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-radio
+ *   variant="error"
+ *   name="delete"
+ *   value="confirm"
+ *   label="Confirm deletion"
+ *   required
+ * ></lt-radio>
+ * ```
+ */
+export declare class Radio extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Visual variant that determines the color when checked.
+     * @default 'primary'
+     */
+    variant: RadioVariant;
+    /**
+     * Size of the radio button.
+     * @default 'md'
+     */
+    size: RadioSize;
+    /**
+     * Whether the radio is checked.
+     * @default false
+     */
+    checked: boolean;
+    /**
+     * Whether the radio is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether the radio is required.
+     * @default false
+     */
+    required: boolean;
+    /**
+     * Label text displayed next to the radio button.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Position of the label relative to the radio button.
+     * @default 'right'
+     */
+    labelPosition: RadioLabelPosition;
+    /**
+     * Name attribute for radio group.
+     * All radios with the same name belong to the same group.
+     * @default ''
+     */
+    name: string;
+    /**
+     * Value attribute for form submission.
+     * @default ''
+     */
+    value: string;
+    /**
+     * Handles radio change events.
+     * Updates the checked state and dispatches a custom change event.
+     *
+     * @param e - The native change event
+     * @private
+     */
+    private handleChange;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,21 @@
+/**
+ * Size variant of the radio component.
+ * Affects the radio button size and label font size.
+ *
+ * - `sm`: 16px radio, 0.875rem label
+ * - `md`: 20px radio, 1rem label (default)
+ * - `lg`: 24px radio, 1.0625rem label
+ */
+export type RadioSize = 'sm' | 'md' | 'lg';
+/**
+ * Visual variant of the radio component.
+ * Determines the color when checked.
+ *
+ * - `primary`: Primary brand color (default)
+ * - `secondary`: Secondary brand color
+ * - `success`: Green color
+ * - `error`: Red color
+ * - `info`: Blue color
+ */
+export type RadioVariant = 'primary' | 'secondary' | 'success' | 'error' | 'info';
+export type RadioLabelPosition = 'left' | 'right';

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * RadioGroup component module.
+ * Exports the RadioGroup web component and related type definitions.
+ *
+ * @module components/radio-group
+ */
+export { RadioGroup } from './radio-group';
+export type { RadioGroupOrientation } from './radio-group.types';