@latty-ds/web 0.2.0

package/dist/components/radio-group/index.js

@@ -0,0 +1,384 @@
+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/radio-group/radio-group.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/radio-group/radio-group.ts
+import { customElement as customElement2, property as property3, queryAssignedElements } from "lit/decorators.js";
+
+// src/components/radio-group/radio-group.styles.ts
+import { css } from "lit";
+var radioGroupStyles = css`
+  :host {
+    display: block;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lt-spacing-2);
+  }
+
+  .label {
+    color: var(--lt-text-default);
+    margin-bottom: var(--lt-spacing-1);
+  }
+
+  .required-indicator {
+    color: var(--lt-color-error-500);
+    margin-left: var(--lt-spacing-1);
+  }
+
+  .radios-container {
+    display: flex;
+    gap: var(--lt-spacing-3);
+  }
+
+  :host([orientation='vertical']) .radios-container {
+    flex-direction: column;
+  }
+
+  :host([orientation='horizontal']) .radios-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .helper-text {
+    color: var(--lt-text-subtle);
+    margin-top: var(--lt-spacing-1);
+  }
+
+  .helper-text::part(base) {
+    font-weight: 200;
+  }
+
+  :host([error]) .helper-text {
+    color: var(--lt-text-error);
+  }
+`;
+
+// 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 css2 } from "lit";
+var textStyles = css2`
+  :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/radio-group/radio-group.ts
+var RadioGroup = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.name = "";
+    this.value = "";
+    this.orientation = "vertical";
+    this.helperText = "";
+    this.error = false;
+    this.required = false;
+    this._attached = /* @__PURE__ */ new WeakSet();
+    /**
+     * Handles change events from individual radio buttons.
+     * Updates the group value and ensures only one radio is checked.
+     *
+     * @param e - The change event from a radio button
+     * @private
+     */
+    this.handleRadioChange = (e) => {
+      const radio = e.target;
+      if (radio.checked) {
+        this.value = radio.value;
+        this.radios.forEach((r) => {
+          if (r !== radio) {
+            r.checked = false;
+          }
+        });
+        this.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
+  }
+  firstUpdated() {
+    this._syncRadios();
+    const checkedRadio = this.radios?.find((r) => r.checked);
+    if (checkedRadio && !this.value) {
+      this.value = checkedRadio.value;
+    }
+  }
+  _syncRadios() {
+    if (!this.radios) return;
+    this.radios.forEach((radio) => {
+      if (this.name) radio.name = this.name;
+      if (!this._attached.has(radio)) {
+        radio.addEventListener("change", this.handleRadioChange);
+        this._attached.add(radio);
+      }
+    });
+  }
+  /**
+   * Handles slot changes to update radios when content changes.
+   * @private
+   */
+  handleSlotChange() {
+    this._syncRadios();
+  }
+  /**
+   * Cleanup event listeners when component is removed.
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.radios) {
+      this.radios.forEach((radio) => {
+        radio.removeEventListener("change", this.handleRadioChange);
+      });
+    }
+  }
+  render() {
+    return html2`
+      <div class="radio-group" role="radiogroup" aria-label=${this.label || nothing}>
+        ${this.label ? html2`
+              <div class="label">
+                <lt-text variant="label" as="span">${this.label}</lt-text>
+                ${this.required ? html2`<span class="required-indicator">*</span>` : ""}
+              </div>
+            ` : ""}
+        <div class="radios-container">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        ${this.helperText ? html2`<lt-text variant="caption" as="span" class="helper-text">${this.helperText}</lt-text>` : ""}
+      </div>
+    `;
+  }
+};
+RadioGroup.styles = radioGroupStyles;
+__decorateClass([
+  property3()
+], RadioGroup.prototype, "label", 2);
+__decorateClass([
+  property3()
+], RadioGroup.prototype, "name", 2);
+__decorateClass([
+  property3()
+], RadioGroup.prototype, "value", 2);
+__decorateClass([
+  property3({ reflect: true })
+], RadioGroup.prototype, "orientation", 2);
+__decorateClass([
+  property3({ attribute: "helper-text" })
+], RadioGroup.prototype, "helperText", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], RadioGroup.prototype, "error", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], RadioGroup.prototype, "required", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "lt-radio" })
+], RadioGroup.prototype, "radios", 2);
+RadioGroup = __decorateClass([
+  customElement2("lt-radio-group")
+], RadioGroup);
+export {
+  RadioGroup
+};

package/dist/components/radio-group/radio-group.d.ts

@@ -0,0 +1,100 @@
+import { ThemeableElement } from '../../base';
+import { RadioGroupOrientation } from './radio-group.types';
+import '../text/text';
+/**
+ * A container component that manages a group of radio buttons.
+ *
+ * @element lt-radio-group
+ *
+ * @fires {CustomEvent<{value: string}>} change - Dispatched when a radio in the group is selected
+ *
+ * @slot - Radio buttons to be managed by this group
+ *
+ * @example
+ * ```html
+ * <lt-radio-group label="Choose a plan" name="plan">
+ *   <lt-radio value="free" label="Free"></lt-radio>
+ *   <lt-radio value="pro" label="Pro" checked></lt-radio>
+ *   <lt-radio value="enterprise" label="Enterprise"></lt-radio>
+ * </lt-radio-group>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-radio-group
+ *   label="Shipping method"
+ *   name="shipping"
+ *   orientation="horizontal"
+ *   helper-text="Choose your preferred shipping method"
+ * >
+ *   <lt-radio value="standard" label="Standard"></lt-radio>
+ *   <lt-radio value="express" label="Express"></lt-radio>
+ *   <lt-radio value="overnight" label="Overnight"></lt-radio>
+ * </lt-radio-group>
+ * ```
+ */
+export declare class RadioGroup extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Label for the radio group.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Name attribute applied to all radio buttons in the group.
+     * Ensures only one radio can be selected at a time.
+     * @default ''
+     */
+    name: string;
+    /**
+     * Currently selected value in the group.
+     * @default ''
+     */
+    value: string;
+    /**
+     * Layout orientation of the radio buttons.
+     * @default 'vertical'
+     */
+    orientation: RadioGroupOrientation;
+    /**
+     * Helper text displayed below the radio group.
+     * @default ''
+     */
+    helperText: string;
+    /**
+     * Whether the radio group is in an error state.
+     * @default false
+     */
+    error: boolean;
+    /**
+     * Whether selection is required.
+     * @default false
+     */
+    required: boolean;
+    /**
+     * Reference to all slotted radio elements.
+     * @private
+     */
+    private radios;
+    private _attached;
+    firstUpdated(): void;
+    private _syncRadios;
+    /**
+     * Handles change events from individual radio buttons.
+     * Updates the group value and ensures only one radio is checked.
+     *
+     * @param e - The change event from a radio button
+     * @private
+     */
+    private handleRadioChange;
+    /**
+     * Handles slot changes to update radios when content changes.
+     * @private
+     */
+    private handleSlotChange;
+    /**
+     * Cleanup event listeners when component is removed.
+     */
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/radio-group/radio-group.styles.d.ts

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

package/dist/components/radio-group/radio-group.types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Orientation of the radio group.
+ * Determines the layout direction of the radio buttons.
+ *
+ * - `vertical`: Stack radios vertically (default)
+ * - `horizontal`: Arrange radios horizontally
+ */
+export type RadioGroupOrientation = 'vertical' | 'horizontal';

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

@@ -0,0 +1,8 @@
+/**
+ * Select component module.
+ * Exports the Select web component and related type definitions.
+ *
+ * @module components/select
+ */
+export { Select } from './select';
+export type { SelectOption, SelectSize, SelectVariant } from './select.types';