@latty-ds/web 0.2.0

package/dist/components/button/index.js

@@ -0,0 +1,466 @@
+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/button/button.ts
+import { html as html2, 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/button/button.ts
+import { customElement as customElement2, property as property3 } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+// src/components/button/button.styles.ts
+import { css } from "lit";
+var buttonStyles = css`
+  :host {
+    display: inline-block;
+    font-family: 'Hanken Grotesk', sans-serif;
+
+    /* Internal state props — set per variant/appearance below */
+    --_color: var(--lt-text-on-primary);
+    --_bg: var(--lt-interactive-primary-bg);
+    --_border-color: transparent;
+    --_hover-bg: var(--lt-interactive-primary-bg-hover);
+    --_active-bg: var(--lt-interactive-primary-bg-active);
+  }
+
+  :host([full-width]) {
+    display: block;
+    width: 100%;
+  }
+
+  :host([full-width]) [part='base'] {
+    width: 100%;
+  }
+
+  [part='base'] {
+    align-items: center;
+    background: var(--lt-button-bg, var(--_bg));
+    border-radius: var(--lt-border-radius);
+    border: 1px solid var(--lt-button-border-color, var(--_border-color));
+    box-sizing: border-box;
+    color: var(--lt-button-color, var(--_color));
+    cursor: pointer;
+    display: inline-flex;
+    font-family: inherit;
+    font-weight: 400;
+    gap: var(--lt-spacing-2);
+    justify-content: center;
+    line-height: 1;
+    min-width: 88px;
+    user-select: none;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease,
+      transform 50ms ease;
+  }
+
+  [part='base']:active {
+    transform: translateY(1px);
+  }
+
+  [part='base']:focus-visible {
+    outline: 3px solid var(--lt-border-focus);
+    outline-offset: 2px;
+  }
+
+  [part='base'][disabled],
+  [part='base'][aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+    transform: none;
+  }
+
+  /* anchor reset — browsers apply link color + underline by default */
+  a[part='base'] {
+    text-decoration: none;
+  }
+
+  /* sizes */
+  :host([size='sm']) [part='base'] {
+    font-size: 0.875rem;
+    height: 32px;
+    padding-inline: var(--lt-spacing-3);
+  }
+
+  :host([size='md']) [part='base'] {
+    font-size: 1rem;
+    height: 40px;
+    padding-inline: var(--lt-spacing-4);
+  }
+
+  :host([size='lg']) [part='base'] {
+    font-size: 1.0625rem;
+    height: 48px;
+    padding-inline: var(--lt-spacing-5);
+  }
+
+  /* variants — solid */
+  :host([variant='primary']) {
+    --_bg: var(--lt-interactive-primary-bg);
+    --_color: var(--lt-text-on-primary);
+    --_hover-bg: var(--lt-interactive-primary-bg-hover);
+    --_active-bg: var(--lt-interactive-primary-bg-active);
+  }
+  :host([variant='secondary']) {
+    --_bg: var(--lt-interactive-secondary-bg);
+    --_color: var(--lt-text-on-secondary);
+    --_hover-bg: var(--lt-interactive-secondary-bg-hover);
+    --_active-bg: var(--lt-interactive-secondary-bg-active);
+  }
+  :host([variant='neutral']) {
+    --_bg: var(--lt-color-neutral-500);
+    --_color: var(--lt-color-neutral-50);
+    --_hover-bg: var(--lt-color-neutral-700);
+    --_active-bg: var(--lt-color-neutral-800);
+  }
+  :host([variant='success']) {
+    --_bg: var(--lt-interactive-success-bg);
+    --_color: var(--lt-text-on-success);
+    --_hover-bg: var(--lt-interactive-success-bg-hover);
+    --_active-bg: var(--lt-interactive-success-bg-active);
+  }
+  :host([variant='warning']) {
+    --_bg: var(--lt-interactive-warning-bg);
+    --_color: var(--lt-text-on-warning);
+    --_hover-bg: var(--lt-interactive-warning-bg-hover);
+    --_active-bg: var(--lt-interactive-warning-bg-active);
+  }
+  :host([variant='error']) {
+    --_bg: var(--lt-interactive-error-bg);
+    --_color: var(--lt-text-on-error);
+    --_hover-bg: var(--lt-interactive-error-bg-hover);
+    --_active-bg: var(--lt-interactive-error-bg-active);
+  }
+  :host([variant='info']) {
+    --_bg: var(--lt-interactive-info-bg);
+    --_color: var(--lt-text-on-info);
+    --_hover-bg: var(--lt-interactive-info-bg-hover);
+    --_active-bg: var(--lt-interactive-info-bg-active);
+  }
+
+  [part='base']:hover:not([disabled]):not([aria-disabled='true']) {
+    background: var(--lt-button-bg, var(--_hover-bg));
+  }
+
+  [part='base']:active:not([disabled]):not([aria-disabled='true']) {
+    background: var(--lt-button-bg, var(--_active-bg));
+  }
+
+  /* outlined appearance */
+  :host([appearance='outlined'][variant='primary']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-primary);
+    --_border-color: var(--lt-border-primary-strong);
+    --_hover-bg: var(--lt-bg-primary-subtle);
+    --_active-bg: var(--lt-bg-primary-subtle);
+  }
+  :host([appearance='outlined'][variant='secondary']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-secondary);
+    --_border-color: var(--lt-border-secondary-strong);
+    --_hover-bg: var(--lt-bg-secondary-subtle);
+    --_active-bg: var(--lt-bg-secondary-subtle);
+  }
+  :host([appearance='outlined'][variant='neutral']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-neutral);
+    --_border-color: var(--lt-border-strong);
+    --_hover-bg: var(--lt-bg-subtle);
+    --_active-bg: var(--lt-bg-surface);
+  }
+  :host([appearance='outlined'][variant='success']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-success);
+    --_border-color: var(--lt-border-success-strong);
+    --_hover-bg: var(--lt-bg-success-subtle);
+    --_active-bg: var(--lt-bg-success-subtle);
+  }
+  :host([appearance='outlined'][variant='warning']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-warning);
+    --_border-color: var(--lt-border-warning-strong);
+    --_hover-bg: var(--lt-bg-warning-subtle);
+    --_active-bg: var(--lt-bg-warning-subtle);
+  }
+  :host([appearance='outlined'][variant='error']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-error);
+    --_border-color: var(--lt-border-error-strong);
+    --_hover-bg: var(--lt-bg-error-subtle);
+    --_active-bg: var(--lt-bg-error-subtle);
+  }
+  :host([appearance='outlined'][variant='info']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-info);
+    --_border-color: var(--lt-border-info-strong);
+    --_hover-bg: var(--lt-bg-info-subtle);
+    --_active-bg: var(--lt-bg-info-subtle);
+  }
+
+  :host([appearance='outlined']) [part='base']:active:not([disabled]):not([aria-disabled='true']) {
+    opacity: 0.8;
+  }
+
+  /* loading */
+  .spinner {
+    animation: spin 700ms linear infinite;
+    border-radius: 999px;
+    border-right-color: transparent;
+    border: 2px solid currentColor;
+    height: 1em;
+    width: 1em;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .icon,
+  .end {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+  }
+
+  :host([uppercase]) [part='base'] {
+    font-variant-caps: small-caps;
+    letter-spacing: 0.05rem;
+    text-transform: lowercase;
+  }
+`;
+
+// src/components/spinner/spinner.ts
+import { html } from "lit";
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/spinner/spineer.styles.ts
+import { css as css2 } from "lit";
+var spinnerStyles = css2`
+  :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);
+
+// src/components/button/button.ts
+import "@latty-ds/icons";
+var Button = class extends ThemeableElement {
+  constructor() {
+    super();
+    this.variant = "primary";
+    this.appearance = "filled";
+    this.size = "md";
+    this.disabled = false;
+    this.loading = false;
+    this.iconStart = "";
+    this.iconEnd = "";
+    this.fullWidth = false;
+    this.uppercase = false;
+    this.href = "";
+    this.target = "";
+    this.rel = "";
+    this.type = "button";
+    this._internals = this.attachInternals();
+  }
+  _handleClick() {
+    if (this.disabled || this.loading) return;
+    const form = this.closest("form");
+    if (!form) return;
+    if (this.type === "submit") form.requestSubmit();
+    else if (this.type === "reset") form.reset();
+  }
+  render() {
+    const isDisabled = this.disabled || this.loading;
+    const inner = this.loading ? html2`<lt-spinner></lt-spinner>` : html2`
+          ${this.iconStart ? html2`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : ""}
+          <slot></slot>
+          ${this.iconEnd ? html2`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : ""}
+        `;
+    if (this.href) {
+      const rel = this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0);
+      return html2`
+        <a
+          part="base"
+          href=${this.href}
+          target=${ifDefined(this.target || void 0)}
+          rel=${ifDefined(rel)}
+          aria-disabled=${isDisabled ? "true" : nothing}
+          tabindex=${isDisabled ? "-1" : nothing}
+          >${inner}</a
+        >
+      `;
+    }
+    return html2`
+      <button
+        part="base"
+        type="button"
+        @click=${this._handleClick}
+        ?disabled=${isDisabled}
+        aria-busy=${this.loading ? "true" : "false"}
+      >
+        ${inner}
+      </button>
+    `;
+  }
+};
+Button.styles = buttonStyles;
+Button.formAssociated = true;
+__decorateClass([
+  property3({ reflect: true })
+], Button.prototype, "variant", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Button.prototype, "appearance", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Button.prototype, "size", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Button.prototype, "disabled", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Button.prototype, "loading", 2);
+__decorateClass([
+  property3({ attribute: "icon-start" })
+], Button.prototype, "iconStart", 2);
+__decorateClass([
+  property3({ attribute: "icon-end" })
+], Button.prototype, "iconEnd", 2);
+__decorateClass([
+  property3({ type: Boolean, attribute: "full-width", reflect: true })
+], Button.prototype, "fullWidth", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Button.prototype, "uppercase", 2);
+__decorateClass([
+  property3()
+], Button.prototype, "href", 2);
+__decorateClass([
+  property3()
+], Button.prototype, "target", 2);
+__decorateClass([
+  property3()
+], Button.prototype, "rel", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Button.prototype, "type", 2);
+Button = __decorateClass([
+  customElement2("lt-button")
+], Button);
+export {
+  Button
+};

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,84 @@
+import { type PropertyValues } from 'lit';
+import { ThemeableElement } from '../../base';
+import '@latty-ds/icons';
+import type { CalendarMode, CalendarWeekStart } from './calendar.types';
+/**
+ * A visual calendar grid for single-date or date-range selection.
+ *
+ * @element lt-calendar
+ *
+ * @fires {CustomEvent<{value: string}>} change - Fired when a single date is selected (mode="single").
+ * @fires {CustomEvent<{valueStart: string, valueEnd: string}>} change - Fired when a full range is selected (mode="range").
+ * @fires {CustomEvent<{year: number, month: number}>} month-change - Fired when the viewed month changes.
+ *
+ * @example
+ * ```html
+ * <lt-calendar value="2026-05-19"></lt-calendar>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-calendar mode="range" value-start="2026-05-10" value-end="2026-05-20"></lt-calendar>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-calendar locale="fr-FR" week-start="1" min="2026-01-01" max="2026-12-31"></lt-calendar>
+ * ```
+ */
+export declare class Calendar extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Selection mode. "single" selects one date; "range" selects a start and end date. */
+    mode: CalendarMode;
+    /** Selected date in ISO format (YYYY-MM-DD). Used in mode="single". */
+    value: string;
+    /** Range start date in ISO format. Used in mode="range". */
+    valueStart: string;
+    /** Range end date in ISO format. Used in mode="range". */
+    valueEnd: string;
+    /** Minimum selectable date (ISO format). Dates before this are disabled. */
+    min: string;
+    /** Maximum selectable date (ISO format). Dates after this are disabled. */
+    max: string;
+    /** BCP 47 locale used for day and month names. */
+    locale: string;
+    /** First day of the week. 0 = Sunday, 1 = Monday. */
+    weekStart: CalendarWeekStart;
+    /** Whether to render filler days from the previous and next month. */
+    showOutsideDays: boolean;
+    /** Disables all interaction. */
+    disabled: boolean;
+    /** Number of month panels to display side-by-side. */
+    months: number;
+    /** Specific dates to disable, as an array of Date objects. Not reflected as an attribute. */
+    disabledDates: Date[];
+    private _viewYear;
+    private _viewMonth;
+    private _focusedDate;
+    private _hoverDate;
+    private _pickingMonthYear;
+    private _pickerYear;
+    willUpdate(changed: PropertyValues<this>): void;
+    private _monthAtOffset;
+    private _parseDate;
+    private _toIso;
+    private _isSameDay;
+    private _isDisabled;
+    private _buildDays;
+    private _getWeekdayLabels;
+    private _navigate;
+    private _openPicker;
+    private _closePicker;
+    private _selectPickerMonth;
+    private _selectDay;
+    private _goToToday;
+    private _dayAriaLabel;
+    private _focusCell;
+    private _handleCalendarKeyDown;
+    private _handleGridMouseOver;
+    private _handleGridMouseLeave;
+    private _handleKeyDown;
+    private _renderDay;
+    private _renderMonthGrid;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,15 @@
+export type CalendarWeekStart = '0' | '1';
+export type CalendarMode = 'single' | 'range';
+export interface CalendarDay {
+    date: Date;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+    isInRange: boolean;
+    isRangeHoverStart: boolean;
+    isRangeHoverEnd: boolean;
+    isInHoverRange: boolean;
+}

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

@@ -0,0 +1 @@
+export { Calendar } from './calendar';