@latty-ds/web 0.2.0

package/dist/components/chip/index.js

@@ -0,0 +1,282 @@
+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/chip/chip.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/chip/chip.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+// src/components/chip/chip.styles.ts
+import { css } from "lit";
+var chipStyles = css`
+  :host {
+    display: inline-flex;
+    font-family: 'Hanken Grotesk', sans-serif;
+    vertical-align: middle;
+  }
+
+  span[part='base'] {
+    align-items: center;
+    background: var(--lt-chip-bg);
+    border-radius: 999px;
+    border: 1px solid var(--lt-chip-border-color, transparent);
+    color: var(--lt-chip-color);
+    box-sizing: border-box;
+    display: inline-flex;
+    font-weight: 400;
+    line-height: 1;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  ::slotted([slot='icon']) {
+    flex-shrink: 0;
+  }
+
+  .delete {
+    align-items: center;
+    background: none;
+    border-radius: 999px;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+    opacity: 0.6;
+    padding: 0;
+    transition:
+      opacity 120ms ease,
+      background-color 120ms ease;
+  }
+
+  .delete:hover:not(:disabled) {
+    opacity: 1;
+  }
+
+  .delete:disabled {
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) span[part='base'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /* ── Sizes ────────────────────────────────────────────────────────────── */
+  :host([size='sm']) span[part='base'] {
+    font-size: 0.75rem;
+    gap: var(--lt-spacing-1);
+    height: 20px;
+    padding-inline: var(--lt-spacing-2);
+  }
+
+  :host([size='md']) span[part='base'] {
+    font-size: 0.8125rem;
+    gap: var(--lt-spacing-1);
+    height: 26px;
+    padding-inline: var(--lt-spacing-3);
+  }
+
+  :host([size='lg']) span[part='base'] {
+    font-size: 0.9375rem;
+    gap: var(--lt-spacing-2);
+    height: 32px;
+    padding-inline: var(--lt-spacing-4);
+  }
+
+  /* ── Filled (tinted bg, colored border, dark text) ───────────────────── */
+  :host([appearance='filled'][variant='primary']) span[part='base'] {
+    background: var(--lt-bg-primary-subtle);
+    border-color: var(--lt-border-primary);
+    color: var(--lt-text-primary);
+  }
+
+  :host([appearance='filled'][variant='secondary']) span[part='base'] {
+    background: var(--lt-bg-secondary-subtle);
+    border-color: var(--lt-border-secondary);
+    color: var(--lt-text-secondary);
+  }
+
+  :host([appearance='filled'][variant='neutral']) span[part='base'] {
+    background: var(--lt-bg-surface);
+    border-color: var(--lt-border-default);
+    color: var(--lt-text-neutral);
+  }
+
+  :host([appearance='filled'][variant='success']) span[part='base'] {
+    background: var(--lt-bg-success-subtle);
+    border-color: var(--lt-border-success);
+    color: var(--lt-text-success);
+  }
+
+  :host([appearance='filled'][variant='warning']) span[part='base'] {
+    background: var(--lt-bg-warning-subtle);
+    border-color: var(--lt-border-warning);
+    color: var(--lt-text-warning);
+  }
+
+  :host([appearance='filled'][variant='error']) span[part='base'] {
+    background: var(--lt-bg-error-subtle);
+    border-color: var(--lt-border-error);
+    color: var(--lt-text-error);
+  }
+
+  :host([appearance='filled'][variant='info']) span[part='base'] {
+    background: var(--lt-bg-info-subtle);
+    border-color: var(--lt-border-info);
+    color: var(--lt-text-info);
+  }
+
+  /* ── Outlined (transparent bg, colored border and text) ──────────────── */
+  :host([appearance='outlined'][variant='primary']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-primary-strong);
+    color: var(--lt-text-primary);
+  }
+
+  :host([appearance='outlined'][variant='secondary']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-secondary-strong);
+    color: var(--lt-text-secondary);
+  }
+
+  :host([appearance='outlined'][variant='neutral']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-strong);
+    color: var(--lt-text-neutral);
+  }
+
+  :host([appearance='outlined'][variant='success']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-success-strong);
+    color: var(--lt-text-success);
+  }
+
+  :host([appearance='outlined'][variant='warning']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-warning-strong);
+    color: var(--lt-text-warning);
+  }
+
+  :host([appearance='outlined'][variant='error']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-error-strong);
+    color: var(--lt-text-error);
+  }
+
+  :host([appearance='outlined'][variant='info']) span[part='base'] {
+    background: transparent;
+    border-color: var(--lt-border-info-strong);
+    color: var(--lt-text-info);
+  }
+`;
+
+// src/components/chip/chip.ts
+import "@latty-ds/icons";
+
+// src/utils/dispatch.ts
+var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, ...init }));
+
+// src/utils/color.ts
+var resolveColorValue = (value) => value.startsWith("--") ? `var(${value})` : value;
+
+// src/components/chip/chip.ts
+var Chip = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.appearance = "filled";
+    this.variant = "primary";
+    this.size = "md";
+    this.disabled = false;
+    this.deletable = false;
+    this.background = "";
+  }
+  get _deleteIconSize() {
+    return this.size === "lg" ? "sm" : "xs";
+  }
+  _handleDelete() {
+    dispatch(this, "delete");
+  }
+  render() {
+    const bgStyle = styleMap(this.background ? { background: resolveColorValue(this.background) } : {});
+    return html`
+      <span part="base" style=${bgStyle}>
+        <slot name="icon"></slot>
+        <slot></slot>
+        ${this.deletable ? html`
+              <button
+                class="delete"
+                part="delete-button"
+                ?disabled=${this.disabled}
+                aria-label="Remove"
+                @click=${this._handleDelete}
+              >
+                <lt-icon name="xmark" size=${this._deleteIconSize}></lt-icon>
+              </button>
+            ` : ""}
+      </span>
+    `;
+  }
+};
+Chip.styles = chipStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Chip.prototype, "appearance", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Chip.prototype, "variant", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Chip.prototype, "size", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Chip.prototype, "disabled", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Chip.prototype, "deletable", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Chip.prototype, "background", 2);
+Chip = __decorateClass([
+  customElement("lt-chip")
+], Chip);
+export {
+  Chip
+};

package/dist/components/color-input/color-input.d.ts

@@ -0,0 +1,55 @@
+import { ThemeableElement } from '../../base';
+import { ColorInputFormat, ColorInputSize } from './color-input.types';
+import '@latty-ds/icons';
+import '../text/text';
+/**
+ * A read-only textfield that opens the native browser color picker on click.
+ * Displays the selected color value and a live color swatch preview.
+ * Accepts and emits colors in hex, rgb, or hsl format via the `format` prop.
+ *
+ * @element lt-color-input
+ *
+ * @fires {CustomEvent<{value: string}>} change - Dispatched when the user picks a new color
+ *
+ * @example
+ * ```html
+ * <lt-color-input label="Brand color" value="#7c3aed"></lt-color-input>
+ * <lt-color-input label="Background" value="rgb(124, 58, 237)" format="rgb"></lt-color-input>
+ * ```
+ */
+export declare class ColorInput extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The current color value. Accepts hex (`#7c3aed`), rgb (`rgb(124, 58, 237)`),
+     * or hsl (`hsl(263, 70%, 58%)`). Emitted values match the `format` prop.
+     * @default ''
+     */
+    value: string;
+    /**
+     * Output format for the displayed value and emitted `change` events.
+     * @default 'hex'
+     */
+    format: ColorInputFormat;
+    /**
+     * Label text displayed above the input.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Placeholder shown when no color is selected.
+     * @default 'Pick a color'
+     */
+    placeholder: string;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Size of the input — affects height and padding.
+     * @default 'md'
+     */
+    size: ColorInputSize;
+    private _handleChange;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/color-input/color-input.styles.d.ts

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

package/dist/components/color-input/color-input.types.d.ts

@@ -0,0 +1,2 @@
+export type ColorInputSize = 'sm' | 'md' | 'lg';
+export type ColorInputFormat = 'hex' | 'rgb' | 'hsl';

package/dist/components/color-input/index.d.ts

@@ -0,0 +1 @@
+export { ColorInput } from './color-input';