@latty-ds/web 0.2.0

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,113 @@
+import { ThemeableElement } from '../../base';
+import { CheckboxSize, CheckboxVariant, CheckboxLabelPosition } from './checkbox.types';
+import '@latty-ds/icons';
+/**
+ * A customizable checkbox component with support for multiple variants and sizes.
+ *
+ * @element lt-checkbox
+ *
+ * @fires {CustomEvent<{checked: boolean, indeterminate: boolean}>} change - Dispatched when the checked state changes
+ *
+ * @example
+ * ```html
+ * <lt-checkbox label="Accept terms and conditions"></lt-checkbox>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-checkbox
+ *   variant="success"
+ *   label="Enable notifications"
+ *   checked
+ * ></lt-checkbox>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-checkbox
+ *   variant="error"
+ *   label="I agree to the privacy policy"
+ *   required
+ * ></lt-checkbox>
+ * ```
+ */
+export declare class Checkbox extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Visual variant that determines the color when checked.
+     * @default 'primary'
+     */
+    variant: CheckboxVariant;
+    /**
+     * Size of the checkbox.
+     * @default 'md'
+     */
+    size: CheckboxSize;
+    /**
+     * Whether the checkbox is checked.
+     * @default false
+     */
+    checked: boolean;
+    /**
+     * Whether the checkbox is in indeterminate state.
+     * Used for "select all" checkboxes when some items are selected.
+     * @default false
+     */
+    indeterminate: boolean;
+    /**
+     * Whether the checkbox is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether the checkbox is required.
+     * @default false
+     */
+    required: boolean;
+    /**
+     * Label text displayed next to the checkbox.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Position of the label relative to the checkbox.
+     * @default 'right'
+     */
+    labelPosition: CheckboxLabelPosition;
+    /**
+     * Name attribute for form submission.
+     * @default ''
+     */
+    name: string;
+    /**
+     * Value attribute for form submission.
+     * @default 'on'
+     */
+    value: string;
+    /**
+     * Reference to the native input element.
+     * @private
+     */
+    private input;
+    /**
+     * Handles changes to the indeterminate property.
+     * Updates the native input's indeterminate state.
+     */
+    updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Handles checkbox change events.
+     * Updates the checked state and dispatches a custom change event.
+     *
+     * @param e - The native change event
+     * @private
+     */
+    private handleChange;
+    /**
+     * Renders the checkbox icon based on state.
+     * Shows checkmark when checked, minus when indeterminate.
+     *
+     * @private
+     */
+    private renderCheckmark;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,21 @@
+/**
+ * Size variant of the checkbox component.
+ * Affects the checkbox size and label font size.
+ *
+ * - `sm`: 16px checkbox, 0.875rem label
+ * - `md`: 20px checkbox, 1rem label (default)
+ * - `lg`: 24px checkbox, 1.0625rem label
+ */
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+/**
+ * Visual variant of the checkbox 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 CheckboxVariant = 'primary' | 'secondary' | 'success' | 'error' | 'info';
+export type CheckboxLabelPosition = 'left' | 'right';

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

@@ -0,0 +1,8 @@
+/**
+ * Checkbox component module.
+ * Exports the Checkbox web component and related type definitions.
+ *
+ * @module components/checkbox
+ */
+export { Checkbox } from './checkbox';
+export type { CheckboxSize, CheckboxVariant, CheckboxLabelPosition } from './checkbox.types';

package/dist/components/checkbox/index.js

@@ -0,0 +1,320 @@
+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/checkbox/checkbox.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/checkbox/checkbox.ts
+import { customElement, property as property2, query } from "lit/decorators.js";
+
+// src/components/checkbox/checkbox.styles.ts
+import { css } from "lit";
+var checkboxStyles = css`
+  :host {
+    display: inline-block;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  .checkbox-wrapper {
+    align-items: center;
+    cursor: pointer;
+    display: inline-flex;
+    gap: var(--lt-spacing-2);
+  }
+
+  .box {
+    display: inline-flex;
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  :host([label-position='left']) .checkbox-wrapper {
+    flex-direction: row-reverse;
+  }
+
+  :host([disabled]) .checkbox-wrapper {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  input[type='checkbox'] {
+    appearance: none;
+    border-radius: calc(var(--lt-border-radius) * 0.5);
+    border: 2px solid var(--lt-border-strong);
+    cursor: pointer;
+    margin: 0;
+    position: relative;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease;
+  }
+
+  input[type='checkbox']:hover:not(:disabled) {
+    border-color: var(--lt-color-neutral-600);
+  }
+
+  input[type='checkbox']:focus-visible {
+    outline: 3px solid var(--lt-border-focus);
+    outline-offset: 2px;
+  }
+
+  input[type='checkbox']:disabled {
+    cursor: not-allowed;
+  }
+
+  .checkmark {
+    align-items: center;
+    color: white;
+    display: none;
+    inset: 0;
+    justify-content: center;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  input[type='checkbox']:checked ~ .checkmark,
+  input[type='checkbox']:indeterminate ~ .checkmark {
+    display: flex;
+  }
+
+  .label {
+    color: var(--lt-text-default);
+    user-select: none;
+  }
+
+  /* Size variants */
+  :host([size='sm']) input[type='checkbox'] {
+    height: 16px;
+    width: 16px;
+  }
+
+  :host([size='sm']) .label {
+    font-size: 0.875rem;
+  }
+
+  :host([size='md']) input[type='checkbox'] {
+    height: 20px;
+    width: 20px;
+  }
+
+  :host([size='md']) .label {
+    font-size: 1rem;
+  }
+
+  :host([size='lg']) input[type='checkbox'] {
+    height: 24px;
+    width: 24px;
+  }
+
+  :host([size='lg']) .label {
+    font-size: 1.0625rem;
+  }
+
+  /* Variant styles */
+  :host([variant='primary']) input[type='checkbox']:checked,
+  :host([variant='primary']) input[type='checkbox']:indeterminate {
+    background: var(--lt-interactive-primary-bg);
+    border-color: var(--lt-interactive-primary-bg);
+  }
+  :host([variant='primary']) input[type='checkbox']:checked:hover:not(:disabled),
+  :host([variant='primary']) input[type='checkbox']:indeterminate:hover:not(:disabled) {
+    background: var(--lt-interactive-primary-bg-hover);
+    border-color: var(--lt-interactive-primary-bg-hover);
+  }
+
+  :host([variant='secondary']) input[type='checkbox']:checked,
+  :host([variant='secondary']) input[type='checkbox']:indeterminate {
+    background: var(--lt-interactive-secondary-bg);
+    border-color: var(--lt-interactive-secondary-bg);
+  }
+  :host([variant='secondary']) input[type='checkbox']:checked:hover:not(:disabled),
+  :host([variant='secondary']) input[type='checkbox']:indeterminate:hover:not(:disabled) {
+    background: var(--lt-interactive-secondary-bg-hover);
+    border-color: var(--lt-interactive-secondary-bg-hover);
+  }
+
+  :host([variant='success']) input[type='checkbox']:checked,
+  :host([variant='success']) input[type='checkbox']:indeterminate {
+    background: var(--lt-interactive-success-bg);
+    border-color: var(--lt-interactive-success-bg);
+  }
+  :host([variant='success']) input[type='checkbox']:checked:hover:not(:disabled),
+  :host([variant='success']) input[type='checkbox']:indeterminate:hover:not(:disabled) {
+    background: var(--lt-interactive-success-bg-hover);
+    border-color: var(--lt-interactive-success-bg-hover);
+  }
+
+  :host([variant='error']) input[type='checkbox']:checked,
+  :host([variant='error']) input[type='checkbox']:indeterminate {
+    background: var(--lt-interactive-error-bg);
+    border-color: var(--lt-interactive-error-bg);
+  }
+  :host([variant='error']) input[type='checkbox']:checked:hover:not(:disabled),
+  :host([variant='error']) input[type='checkbox']:indeterminate:hover:not(:disabled) {
+    background: var(--lt-interactive-error-bg-hover);
+    border-color: var(--lt-interactive-error-bg-hover);
+  }
+
+  :host([variant='info']) input[type='checkbox']:checked,
+  :host([variant='info']) input[type='checkbox']:indeterminate {
+    background: var(--lt-interactive-info-bg);
+    border-color: var(--lt-interactive-info-bg);
+  }
+  :host([variant='info']) input[type='checkbox']:checked:hover:not(:disabled),
+  :host([variant='info']) input[type='checkbox']:indeterminate:hover:not(:disabled) {
+    background: var(--lt-interactive-info-bg-hover);
+    border-color: var(--lt-interactive-info-bg-hover);
+  }
+`;
+
+// src/components/checkbox/checkbox.ts
+import "@latty-ds/icons";
+var Checkbox = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+    this.size = "md";
+    this.checked = false;
+    this.indeterminate = false;
+    this.disabled = false;
+    this.required = false;
+    this.label = "";
+    this.labelPosition = "right";
+    this.name = "";
+    this.value = "on";
+  }
+  /**
+   * Handles changes to the indeterminate property.
+   * Updates the native input's indeterminate state.
+   */
+  updated(changedProperties) {
+    if (changedProperties.has("indeterminate") && this.input) {
+      this.input.indeterminate = this.indeterminate;
+    }
+  }
+  /**
+   * Handles checkbox 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.indeterminate = false;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { checked: this.checked, indeterminate: this.indeterminate },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Renders the checkbox icon based on state.
+   * Shows checkmark when checked, minus when indeterminate.
+   *
+   * @private
+   */
+  renderCheckmark() {
+    if (this.indeterminate) {
+      return html`<lt-icon class="checkmark" name="minus"></lt-icon>`;
+    }
+    if (this.checked) {
+      return html`<lt-icon class="checkmark" name="check"></lt-icon>`;
+    }
+    return html``;
+  }
+  render() {
+    return html`
+      <label class="checkbox-wrapper">
+        <span class="box">
+          <input
+            type="checkbox"
+            .checked=${this.checked}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            name=${this.name}
+            value=${this.value}
+            @change=${this.handleChange}
+            aria-label=${this.label || "checkbox"}
+            aria-checked=${this.indeterminate ? "mixed" : this.checked ? "true" : "false"}
+          />
+          ${this.renderCheckmark()}
+        </span>
+        ${this.label ? html`<span class="label">${this.label}</span>` : ""}
+      </label>
+    `;
+  }
+};
+Checkbox.styles = checkboxStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Checkbox.prototype, "variant", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Checkbox.prototype, "size", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Checkbox.prototype, "checked", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Checkbox.prototype, "indeterminate", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Checkbox.prototype, "disabled", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Checkbox.prototype, "required", 2);
+__decorateClass([
+  property2()
+], Checkbox.prototype, "label", 2);
+__decorateClass([
+  property2({ attribute: "label-position", reflect: true })
+], Checkbox.prototype, "labelPosition", 2);
+__decorateClass([
+  property2()
+], Checkbox.prototype, "name", 2);
+__decorateClass([
+  property2()
+], Checkbox.prototype, "value", 2);
+__decorateClass([
+  query('input[type="checkbox"]')
+], Checkbox.prototype, "input", 2);
+Checkbox = __decorateClass([
+  customElement("lt-checkbox")
+], Checkbox);
+export {
+  Checkbox
+};

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,35 @@
+import { ThemeableElement } from '../../base';
+import '@latty-ds/icons';
+import type { ChipVariant, ChipSize, ChipAppearance } from './chip.types';
+/**
+ * Compact label element for tags, filters, and attributes.
+ *
+ * @element lt-chip
+ * @slot - Label content
+ * @slot icon - Leading icon or avatar
+ * @fires delete - Fires when the delete button is clicked (only when `deletable`)
+ *
+ * @example
+ * ```html
+ * <lt-chip variant="primary">Design</lt-chip>
+ * <lt-chip variant="success" deletable>Active</lt-chip>
+ * ```
+ */
+export declare class Chip extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Visual appearance (filled tinted background or outlined border only). */
+    appearance: ChipAppearance;
+    /** Color scheme. */
+    variant: ChipVariant;
+    /** Size (affects height, font, and padding). */
+    size: ChipSize;
+    /** Disables the chip and its delete button. */
+    disabled: boolean;
+    /** Shows a delete/dismiss button that fires `lt-delete` when clicked. */
+    deletable: boolean;
+    /** Background color override. Accepts a hex value (#1a1a2e) or a CSS token name (--lt-color-primary-600). */
+    background: string;
+    private get _deleteIconSize();
+    private _handleDelete;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,3 @@
+export type ChipVariant = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+export type ChipSize = 'sm' | 'md' | 'lg';
+export type ChipAppearance = 'filled' | 'outlined';

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

@@ -0,0 +1,2 @@
+export { Chip } from './chip';
+export type { ChipVariant, ChipSize, ChipAppearance } from './chip.types';