@latty-ds/web 0.2.0

package/dist/components/slider/index.js

@@ -0,0 +1,635 @@
+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/slider/slider.ts
+import { html as html3 } 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/slider/slider.ts
+import { customElement as customElement3, property as property4, query as query2 } from "lit/decorators.js";
+
+// src/components/slider/slider.styles.ts
+import { css } from "lit";
+var sliderStyles = css`
+  :host {
+    display: block;
+    font-family: 'Hanken Grotesk', sans-serif;
+    width: 100%;
+  }
+
+  label {
+    color: var(--lt-text-default);
+    display: block;
+    margin-bottom: var(--lt-spacing-1);
+    user-select: none;
+  }
+
+  .track-wrap {
+    align-items: center;
+    display: flex;
+    width: 100%;
+  }
+
+  /* lt-tooltip fills the track-wrap so the input stays full-width */
+  .track-wrap lt-tooltip {
+    display: block;
+    width: 100%;
+  }
+
+  /* Position the tooltip above the thumb rather than the track center */
+  lt-tooltip::part(tooltip) {
+    left: var(--_thumb-left, 50%);
+  }
+
+  input[type='range'] {
+    appearance: none;
+    background: linear-gradient(
+      to right,
+      var(--lt-interactive-primary-bg) var(--lt-slider-fill, 0%),
+      var(--lt-border-strong) var(--lt-slider-fill, 0%)
+    );
+    border-radius: 9999px;
+    cursor: pointer;
+    display: block;
+    height: var(--lt-slider-track-height, 6px);
+    outline: none;
+    transition: background 0ms;
+    width: 100%;
+  }
+
+  input[type='range']:focus-visible {
+    outline: 3px solid var(--lt-border-focus);
+    outline-offset: 3px;
+  }
+
+  input[type='range']:hover:not(:disabled) {
+    --lt-interactive-primary-bg: var(--lt-interactive-primary-bg-hover);
+  }
+
+  input[type='range']:active:not(:disabled) {
+    --lt-interactive-primary-bg: var(--lt-interactive-primary-bg-active);
+  }
+
+  /* Thumb — WebKit */
+  input[type='range']::-webkit-slider-thumb {
+    appearance: none;
+    background: var(--lt-interactive-primary-bg);
+    border-radius: 50%;
+    border: 2px solid white;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    height: var(--lt-slider-thumb-size, 18px);
+    transition: transform 100ms ease;
+    width: var(--lt-slider-thumb-size, 18px);
+  }
+
+  input[type='range']::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+  }
+
+  input[type='range']:active::-webkit-slider-thumb {
+    transform: scale(1.05);
+  }
+
+  /* Thumb — Firefox */
+  input[type='range']::-moz-range-thumb {
+    appearance: none;
+    background: var(--lt-interactive-primary-bg);
+    border-radius: 50%;
+    border: 2px solid white;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    height: var(--lt-slider-thumb-size, 18px);
+    transition: transform 100ms ease;
+    width: var(--lt-slider-thumb-size, 18px);
+  }
+
+  /* Track — Firefox */
+  input[type='range']::-moz-range-track {
+    background: var(--lt-border-strong);
+    border-radius: 9999px;
+    height: var(--lt-slider-track-height, 6px);
+  }
+
+  input[type='range']::-moz-range-progress {
+    background: var(--lt-interactive-primary-bg);
+    border-radius: 9999px;
+    height: var(--lt-slider-track-height, 6px);
+  }
+
+  /* Sizes */
+  :host([size='sm']) {
+    --lt-slider-track-height: 4px;
+    --lt-slider-thumb-size: 14px;
+  }
+
+  :host([size='md']) {
+    --lt-slider-track-height: 6px;
+    --lt-slider-thumb-size: 18px;
+  }
+
+  :host([size='lg']) {
+    --lt-slider-track-height: 8px;
+    --lt-slider-thumb-size: 22px;
+  }
+
+  /* Disabled */
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  :host([disabled]) input[type='range'] {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+`;
+
+// src/components/tooltip/tooltip.ts
+import { html as html2 } from "lit";
+import { customElement as customElement2, property as property3, query } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+// src/components/tooltip/tooltip.styles.ts
+import { css as css2 } from "lit";
+var tooltipStyles = css2`
+  :host {
+    display: inline-block;
+    position: relative;
+    --lt-tooltip-offset: 8px;
+  }
+
+  .tooltip {
+    background: var(--lt-tooltip-bg, var(--lt-bg-inverse));
+    border-radius: 4px;
+    color: var(--lt-tooltip-color, var(--lt-text-inverse));
+    opacity: 0;
+    padding: var(--lt-spacing-1) var(--lt-spacing-2);
+    pointer-events: none;
+    position: absolute;
+    transition:
+      opacity 150ms ease,
+      visibility 150ms ease;
+    visibility: hidden;
+    white-space: nowrap;
+    z-index: 1000;
+  }
+
+  .arrow {
+    border: 5px solid transparent;
+    height: 0;
+    position: absolute;
+    width: 0;
+  }
+
+  :host(:hover) .tooltip,
+  :host(:focus-within) .tooltip {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  :host([disabled]) .tooltip,
+  :host(:not([content])) .tooltip,
+  :host([content='']) .tooltip {
+    display: none;
+  }
+
+  /* ── Top (default) ──────────────────────────── */
+
+  :host(:not([placement])) .tooltip,
+  :host([placement='top']) .tooltip {
+    bottom: calc(100% + var(--lt-tooltip-offset));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  :host(:not([placement])) .arrow,
+  :host([placement='top']) .arrow {
+    border-top-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
+    left: 50%;
+    top: 100%;
+    transform: translateX(-50%);
+  }
+
+  /* ── Bottom ─────────────────────────────────── */
+
+  :host([placement='bottom']) .tooltip {
+    left: 50%;
+    top: calc(100% + var(--lt-tooltip-offset));
+    transform: translateX(-50%);
+  }
+
+  :host([placement='bottom']) .arrow {
+    border-bottom-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  /* ── Left ───────────────────────────────────── */
+
+  :host([placement='left']) .tooltip {
+    right: calc(100% + var(--lt-tooltip-offset));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  :host([placement='left']) .arrow {
+    border-left-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  /* ── Right ──────────────────────────────────── */
+
+  :host([placement='right']) .tooltip {
+    left: calc(100% + var(--lt-tooltip-offset));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  :host([placement='right']) .arrow {
+    border-right-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`;
+
+// src/utils/color.ts
+var resolveColorValue = (value) => value.startsWith("--") ? `var(${value})` : value;
+
+// src/components/text/text.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+import { html, unsafeStatic } from "lit/static-html.js";
+
+// src/components/text/text.styles.ts
+import { css as css3 } from "lit";
+var textStyles = css3`
+  :host {
+    display: block;
+    color: inherit;
+  }
+
+  /* Inline variants sit in text flow */
+  :host([variant='caption']),
+  :host([variant='overline']),
+  :host([variant='label']) {
+    display: inline;
+  }
+
+  [part='base'] {
+    margin: 0;
+    color: inherit;
+    font-family: var(--lt-typography-fontfamily);
+  }
+
+  /* ── Display ─────────────────────────────────────────────────────────── */
+
+  :host([variant='display-2xl']) [part='base'] {
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='display-xl']) [part='base'] {
+    font-size: clamp(2rem, 5vw, 3.75rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='display-lg']) [part='base'] {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.15;
+    letter-spacing: -0.01em;
+  }
+
+  /* ── Headings ─────────────────────────────────────────────────────────── */
+
+  :host([variant='h1']) [part='base'] {
+    font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='h2']) [part='base'] {
+    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+  }
+
+  :host([variant='h3']) [part='base'] {
+    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.3;
+  }
+
+  :host([variant='h4']) [part='base'] {
+    font-size: 1.25rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.35;
+  }
+
+  :host([variant='h5']) [part='base'] {
+    font-size: 1.125rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+
+  :host([variant='h6']) [part='base'] {
+    font-size: 1rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+
+  /* ── Body ─────────────────────────────────────────────────────────────── */
+
+  :host([variant='lead']) [part='base'] {
+    font-size: 1.25rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  :host([variant='body']) [part='base'],
+  :host(:not([variant])) [part='base'] {
+    font-size: 1rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  :host([variant='body-sm']) [part='base'] {
+    font-size: 0.875rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  /* ── Inline ───────────────────────────────────────────────────────────── */
+
+  :host([variant='caption']) [part='base'] {
+    font-size: 0.75rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.5;
+  }
+
+  :host([variant='overline']) [part='base'] {
+    font-size: 0.6875rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.2;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  :host([variant='label']) [part='base'] {
+    font-size: 0.875rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+`;
+
+// src/components/text/text.ts
+var VARIANT_TAG = {
+  "display-2xl": "p",
+  "display-xl": "p",
+  "display-lg": "p",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  lead: "p",
+  body: "p",
+  "body-sm": "p",
+  caption: "span",
+  overline: "span",
+  label: "span"
+};
+var Text = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "body";
+    this.as = "";
+  }
+  render() {
+    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    return html`<${tag} part="base"><slot></slot></${tag}>`;
+  }
+};
+Text.styles = textStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Text.prototype, "variant", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Text.prototype, "as", 2);
+Text = __decorateClass([
+  customElement("lt-text")
+], Text);
+
+// src/components/tooltip/tooltip.ts
+var _tooltipIdCounter = 0;
+var Tooltip = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this._tooltipId = `lt-tooltip-${++_tooltipIdCounter}`;
+    this.content = "";
+    this.placement = "top";
+    this.disabled = false;
+    this.background = "";
+    this.color = "";
+  }
+  firstUpdated() {
+    const trigger = this._slot?.assignedElements()[0];
+    if (trigger) {
+      trigger.setAttribute("aria-describedby", this._tooltipId);
+    }
+  }
+  render() {
+    const tooltipStyle = styleMap({
+      ...this.background ? { "--_tooltip-bg": resolveColorValue(this.background) } : {},
+      ...this.color ? { "--_tooltip-color": resolveColorValue(this.color) } : {}
+    });
+    return html2`
+      <slot></slot>
+      <div class="tooltip" id=${this._tooltipId} role="tooltip" part="tooltip" aria-hidden="true" style=${tooltipStyle}>
+        <lt-text variant="caption" as="span">${this.content}</lt-text>
+        <span class="arrow" part="arrow"></span>
+      </div>
+    `;
+  }
+};
+Tooltip.styles = tooltipStyles;
+__decorateClass([
+  query("slot")
+], Tooltip.prototype, "_slot", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Tooltip.prototype, "content", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Tooltip.prototype, "placement", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], Tooltip.prototype, "disabled", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Tooltip.prototype, "background", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Tooltip.prototype, "color", 2);
+Tooltip = __decorateClass([
+  customElement2("lt-tooltip")
+], Tooltip);
+
+// src/components/slider/slider.ts
+var Slider = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+    this.disabled = false;
+    this.tooltip = false;
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.value = 0;
+    this.label = "";
+    this.name = "";
+  }
+  get _fillPercent() {
+    return (this.value - this.min) / (this.max - this.min) * 100;
+  }
+  _thumbSizePx() {
+    return { sm: 14, md: 18, lg: 22 }[this.size] ?? 18;
+  }
+  updated() {
+    const fill = this._fillPercent;
+    this.style.setProperty("--_fill", `${fill}%`);
+    const trackW = this.input?.offsetWidth ?? 0;
+    if (trackW) {
+      const thumbPx = this._thumbSizePx();
+      const centerPx = fill / 100 * (trackW - thumbPx) + thumbPx / 2;
+      this.style.setProperty("--_thumb-left", `${centerPx / trackW * 100}%`);
+    }
+  }
+  _onInput(e) {
+    e.stopPropagation();
+    const target = e.target;
+    this.value = Number(target.value);
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _onChange(e) {
+    e.stopPropagation();
+    const target = e.target;
+    this.value = Number(target.value);
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    const input = html3`
+      <input
+        id="input"
+        type="range"
+        min=${this.min}
+        max=${this.max}
+        step=${this.step}
+        .value=${String(this.value)}
+        ?disabled=${this.disabled}
+        name=${this.name}
+        aria-label=${this.label || "slider"}
+        aria-valuemin=${this.min}
+        aria-valuemax=${this.max}
+        aria-valuenow=${this.value}
+        @input=${this._onInput}
+        @change=${this._onChange}
+      />
+    `;
+    return html3`
+      ${this.label ? html3`<label for="input"><lt-text variant="label" as="span">${this.label}</lt-text></label>` : ""}
+      <div class="track-wrap">
+        <lt-tooltip content=${String(this.value)} ?disabled=${!this.tooltip} placement="top"> ${input} </lt-tooltip>
+      </div>
+    `;
+  }
+};
+Slider.styles = sliderStyles;
+__decorateClass([
+  property4({ reflect: true })
+], Slider.prototype, "size", 2);
+__decorateClass([
+  property4({ type: Boolean, reflect: true })
+], Slider.prototype, "disabled", 2);
+__decorateClass([
+  property4({ type: Boolean, reflect: true })
+], Slider.prototype, "tooltip", 2);
+__decorateClass([
+  property4({ type: Number })
+], Slider.prototype, "min", 2);
+__decorateClass([
+  property4({ type: Number })
+], Slider.prototype, "max", 2);
+__decorateClass([
+  property4({ type: Number })
+], Slider.prototype, "step", 2);
+__decorateClass([
+  property4({ type: Number })
+], Slider.prototype, "value", 2);
+__decorateClass([
+  property4()
+], Slider.prototype, "label", 2);
+__decorateClass([
+  property4()
+], Slider.prototype, "name", 2);
+__decorateClass([
+  query2("input")
+], Slider.prototype, "input", 2);
+Slider = __decorateClass([
+  customElement3("lt-slider")
+], Slider);
+export {
+  Slider
+};

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,33 @@
+import { ThemeableElement } from '../../base';
+import type { SliderSize } from './slider.types';
+import '../tooltip/tooltip';
+import '../text/text';
+/**
+ * A range slider component for selecting a numeric value within a range.
+ *
+ * @element lt-slider
+ * @fires {CustomEvent<{value: number}>} input - Dispatched on every value change while dragging
+ * @fires {CustomEvent<{value: number}>} change - Dispatched when the user commits a value (mouseup/keyup)
+ */
+export declare class Slider extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    size: SliderSize;
+    disabled: boolean;
+    /** Show the current value in a tooltip above the thumb. */
+    tooltip: boolean;
+    min: number;
+    max: number;
+    step: number;
+    value: number;
+    /** Label displayed above the track */
+    label: string;
+    /** Name attribute for form submission */
+    name: string;
+    private input;
+    private get _fillPercent();
+    private _thumbSizePx;
+    updated(): void;
+    private _onInput;
+    private _onChange;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+export { Snackbar } from './snackbar';
+export type { SnackbarVariant } from './snackbar.types';