@latty-ds/web 0.2.0

package/dist/components/surface/index.js

@@ -0,0 +1,128 @@
+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/surface/surface.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/surface/surface.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+// src/components/surface/surface.styles.ts
+import { css } from "lit";
+var surfaceStyles = css`
+  :host {
+    display: block;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  .surface {
+    background: var(--lt-surface-bg, var(--lt-bg-subtle));
+    border-radius: var(--lt-border-radius);
+    box-sizing: border-box;
+    transition:
+      box-shadow 120ms ease,
+      border-color 120ms ease;
+  }
+
+  /* Elevation variants */
+  :host([elevation='0']) .surface {
+    box-shadow: var(--lt-elevation-0);
+  }
+  :host([elevation='1']) .surface {
+    box-shadow: var(--lt-elevation-1);
+  }
+  :host([elevation='2']) .surface {
+    box-shadow: var(--lt-elevation-2);
+  }
+  :host([elevation='3']) .surface {
+    box-shadow: var(--lt-elevation-3);
+  }
+  :host([elevation='4']) .surface {
+    box-shadow: var(--lt-elevation-4);
+  }
+  :host([elevation='5']) .surface {
+    box-shadow: var(--lt-elevation-5);
+  }
+
+  /* Visual appearances */
+  :host([appearance='filled']) .surface {
+    border: none;
+  }
+
+  :host([appearance='outlined']) .surface {
+    background: var(--lt-surface-bg, transparent);
+    border: 1px solid var(--lt-border-default);
+  }
+
+  :host([appearance='outlined']:hover) .surface {
+    border-color: var(--lt-border-strong);
+  }
+`;
+
+// src/utils/color.ts
+var resolveColorValue = (value) => value.startsWith("--") ? `var(${value})` : value;
+
+// src/components/surface/surface.ts
+var Surface = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.elevation = "1";
+    this.appearance = "filled";
+    this.background = "";
+  }
+  render() {
+    const style = this.background ? { "--_surface-bg": resolveColorValue(this.background) } : {};
+    return html`
+      <div class="surface" part="surface" style=${styleMap(style)}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+Surface.styles = surfaceStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Surface.prototype, "elevation", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Surface.prototype, "appearance", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Surface.prototype, "background", 2);
+Surface = __decorateClass([
+  customElement("lt-surface")
+], Surface);
+export {
+  Surface
+};

package/dist/components/surface/surface.d.ts

@@ -0,0 +1,48 @@
+import { ThemeableElement } from '../../base';
+import { SurfaceElevation, SurfaceAppearance } from './surface.types';
+/**
+ * A container component that provides elevation and surface styling.
+ * Used for cards, dropdowns, modals, and other elevated UI elements.
+ *
+ * @element lt-surface
+ *
+ * @slot - Content to be displayed within the surface
+ *
+ * @example
+ * ```html
+ * <lt-surface elevation="2">
+ *   <p>This is a card with medium elevation</p>
+ * </lt-surface>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-surface appearance="outlined" elevation="0">
+ *   <p>This is an outlined surface with no shadow</p>
+ * </lt-surface>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-surface elevation="4">
+ *   <h3>Modal Dialog</h3>
+ *   <p>Content with high elevation for modals</p>
+ * </lt-surface>
+ * ```
+ */
+export declare class Surface extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Elevation level that determines shadow depth.
+     * @default '1'
+     */
+    elevation: SurfaceElevation;
+    /**
+     * Visual appearance that determines border and background.
+     * @default 'filled'
+     */
+    appearance: SurfaceAppearance;
+    /** Background color override. Accepts a hex value (#1a1a2e) or a CSS token name (--lt-color-primary-600). */
+    background: string;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * Elevation level for the surface component.
+ * Determines the shadow depth applied to the surface.
+ *
+ * - `0`: No shadow (flat surface)
+ * - `1`: Minimal shadow (slightly raised)
+ * - `2`: Medium shadow (card-like elevation)
+ * - `3`: High shadow (prominent elevation)
+ * - `4`: Very high shadow (floating elements)
+ * - `5`: Maximum shadow (modals, overlays)
+ */
+export type SurfaceElevation = '0' | '1' | '2' | '3' | '4' | '5';
+/**
+ * Visual appearance of the surface component.
+ * Determines the border and background styling.
+ *
+ * - `filled`: Solid background with no border
+ * - `outlined`: Transparent background with border
+ */
+export type SurfaceAppearance = 'filled' | 'outlined';

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

@@ -0,0 +1,8 @@
+/**
+ * Switch component module.
+ * Exports the Switch web component and related type definitions.
+ *
+ * @module components/switch
+ */
+export { Switch } from './switch';
+export type { SwitchSize, SwitchVariant, SwitchLabelPosition } from './switch.types';

package/dist/components/switch/index.js

@@ -0,0 +1,293 @@
+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/switch/switch.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/switch/switch.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/switch/switch.styles.ts
+import { css } from "lit";
+var switchStyles = css`
+  :host {
+    display: inline-block;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  .switch-wrapper {
+    align-items: center;
+    cursor: pointer;
+    display: inline-flex;
+    gap: var(--lt-spacing-2);
+  }
+
+  :host([label-position='left']) .switch-wrapper {
+    flex-direction: row-reverse;
+  }
+
+  :host([disabled]) .switch-wrapper {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .switch-container {
+    display: inline-flex;
+    position: relative;
+  }
+
+  input[type='checkbox'] {
+    appearance: none;
+    background: var(--lt-border-default);
+    border-radius: 999px;
+    cursor: pointer;
+    flex-shrink: 0;
+    margin: 0;
+    position: relative;
+    transition: background-color 200ms ease;
+  }
+
+  input[type='checkbox']:hover:not(:disabled) {
+    background: var(--lt-border-strong);
+  }
+
+  input[type='checkbox']:focus-visible {
+    outline: 3px solid var(--lt-border-focus);
+    outline-offset: 2px;
+  }
+
+  input[type='checkbox']:disabled {
+    cursor: not-allowed;
+  }
+
+  .thumb {
+    background: white;
+    border-radius: 50%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    pointer-events: none;
+    position: absolute;
+    transition: left 200ms ease;
+  }
+
+  .label {
+    color: var(--lt-text-default);
+    user-select: none;
+  }
+
+  /* Size variants */
+  :host([size='sm']) input[type='checkbox'] {
+    height: 18px;
+    width: 32px;
+  }
+
+  :host([size='sm']) .thumb {
+    height: 14px;
+    width: 14px;
+    left: 2px;
+    top: 2px;
+  }
+
+  :host([size='sm']) input[type='checkbox']:checked ~ .thumb {
+    left: 16px;
+  }
+
+  :host([size='sm']) .label {
+    font-size: 0.875rem;
+  }
+
+  :host([size='md']) input[type='checkbox'] {
+    height: 22px;
+    width: 40px;
+  }
+
+  :host([size='md']) .thumb {
+    height: 18px;
+    width: 18px;
+    left: 2px;
+    top: 2px;
+  }
+
+  :host([size='md']) input[type='checkbox']:checked ~ .thumb {
+    left: 20px;
+  }
+
+  :host([size='md']) .label {
+    font-size: 1rem;
+  }
+
+  :host([size='lg']) input[type='checkbox'] {
+    height: 26px;
+    width: 48px;
+  }
+
+  :host([size='lg']) .thumb {
+    height: 22px;
+    width: 22px;
+    left: 2px;
+    top: 2px;
+  }
+
+  :host([size='lg']) input[type='checkbox']:checked ~ .thumb {
+    left: 24px;
+  }
+
+  :host([size='lg']) .label {
+    font-size: 1.0625rem;
+  }
+
+  /* Variant styles */
+  :host([variant='primary']) input[type='checkbox']:checked {
+    background: var(--lt-interactive-primary-bg);
+  }
+  :host([variant='primary']) input[type='checkbox']:checked:hover:not(:disabled) {
+    background: var(--lt-interactive-primary-bg-hover);
+  }
+
+  :host([variant='secondary']) input[type='checkbox']:checked {
+    background: var(--lt-interactive-secondary-bg);
+  }
+  :host([variant='secondary']) input[type='checkbox']:checked:hover:not(:disabled) {
+    background: var(--lt-interactive-secondary-bg-hover);
+  }
+
+  :host([variant='success']) input[type='checkbox']:checked {
+    background: var(--lt-interactive-success-bg);
+  }
+  :host([variant='success']) input[type='checkbox']:checked:hover:not(:disabled) {
+    background: var(--lt-interactive-success-bg-hover);
+  }
+
+  :host([variant='error']) input[type='checkbox']:checked {
+    background: var(--lt-interactive-error-bg);
+  }
+  :host([variant='error']) input[type='checkbox']:checked:hover:not(:disabled) {
+    background: var(--lt-interactive-error-bg-hover);
+  }
+
+  :host([variant='info']) input[type='checkbox']:checked {
+    background: var(--lt-interactive-info-bg);
+  }
+  :host([variant='info']) input[type='checkbox']:checked:hover:not(:disabled) {
+    background: var(--lt-interactive-info-bg-hover);
+  }
+`;
+
+// src/components/switch/switch.ts
+var Switch = 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 = "on";
+  }
+  /**
+   * Handles switch 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: { checked: this.checked },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html`
+      <label class="switch-wrapper">
+        <div class="switch-container">
+          <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 || "switch"}
+            role="switch"
+            aria-checked=${this.checked ? "true" : "false"}
+          />
+          <span class="thumb"></span>
+        </div>
+        ${this.label ? html`<span class="label">${this.label}</span>` : ""}
+      </label>
+    `;
+  }
+};
+Switch.styles = switchStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Switch.prototype, "variant", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Switch.prototype, "size", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Switch.prototype, "checked", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Switch.prototype, "disabled", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Switch.prototype, "required", 2);
+__decorateClass([
+  property2()
+], Switch.prototype, "label", 2);
+__decorateClass([
+  property2({ attribute: "label-position", reflect: true })
+], Switch.prototype, "labelPosition", 2);
+__decorateClass([
+  property2()
+], Switch.prototype, "name", 2);
+__decorateClass([
+  property2()
+], Switch.prototype, "value", 2);
+Switch = __decorateClass([
+  customElement("lt-switch")
+], Switch);
+export {
+  Switch
+};

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,90 @@
+import { ThemeableElement } from '../../base';
+import { SwitchSize, SwitchVariant, SwitchLabelPosition } from './switch.types';
+/**
+ * A toggle switch component with sliding animation.
+ * Internally uses a checkbox input with custom toggle styling.
+ *
+ * @element lt-switch
+ *
+ * @fires {CustomEvent<{checked: boolean}>} change - Dispatched when the switch state changes
+ *
+ * @example
+ * ```html
+ * <lt-switch label="Enable notifications"></lt-switch>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-switch
+ *   variant="success"
+ *   label="Dark mode"
+ *   checked
+ * ></lt-switch>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-switch
+ *   variant="error"
+ *   label="Delete on exit"
+ *   disabled
+ * ></lt-switch>
+ * ```
+ */
+export declare class Switch extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Visual variant that determines the color when checked.
+     * @default 'primary'
+     */
+    variant: SwitchVariant;
+    /**
+     * Size of the switch.
+     * @default 'md'
+     */
+    size: SwitchSize;
+    /**
+     * Whether the switch is checked (on).
+     * @default false
+     */
+    checked: boolean;
+    /**
+     * Whether the switch is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether the switch is required.
+     * @default false
+     */
+    required: boolean;
+    /**
+     * Label text displayed next to the switch.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Position of the label relative to the switch.
+     * @default 'right'
+     */
+    labelPosition: SwitchLabelPosition;
+    /**
+     * Name attribute for form submission.
+     * @default ''
+     */
+    name: string;
+    /**
+     * Value attribute for form submission.
+     * @default 'on'
+     */
+    value: string;
+    /**
+     * Handles switch 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/switch/switch.styles.d.ts

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

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

@@ -0,0 +1,21 @@
+/**
+ * Size variant of the switch component.
+ * Affects the switch size and label font size.
+ *
+ * - `sm`: 32px width x 18px height, 0.875rem label
+ * - `md`: 40px width x 22px height, 1rem label (default)
+ * - `lg`: 48px width x 26px height, 1.0625rem label
+ */
+export type SwitchSize = 'sm' | 'md' | 'lg';
+/**
+ * Visual variant of the switch 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 SwitchVariant = 'primary' | 'secondary' | 'success' | 'error' | 'info';
+export type SwitchLabelPosition = 'left' | 'right';

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

@@ -0,0 +1,9 @@
+/**
+ * Tab component module.
+ * Exports the Tab web component and related type definitions.
+ *
+ * @module components/tab
+ */
+export { Tab } from './tab';
+export type { TabSize } from './tab.types';
+export { TabPanel } from './tab-panel';