@latty-ds/web 0.2.0

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

@@ -0,0 +1,441 @@
+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/tab-group/tab-group.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/tab-group/tab-group.ts
+import { customElement as customElement3, property as property4, queryAssignedElements } from "lit/decorators.js";
+
+// src/components/tab-group/tab-group.styles.ts
+import { css } from "lit";
+var tabGroupStyles = css`
+  :host {
+    display: block;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  .tab-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tabs-container {
+    border-bottom: 1px solid var(--lt-border-default);
+    display: flex;
+    gap: var(--lt-spacing-1);
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  .tabs-container::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  .tabs-container::-webkit-scrollbar-track {
+    background: var(--lt-bg-surface);
+  }
+
+  .tabs-container::-webkit-scrollbar-thumb {
+    background: var(--lt-color-neutral-300);
+    border-radius: 2px;
+  }
+
+  .panels-container {
+    padding: var(--lt-spacing-4) 0;
+  }
+
+  ::slotted([slot='panel']) {
+    display: none;
+  }
+
+  ::slotted([slot='panel'][active]) {
+    display: block;
+  }
+
+  /* Pills variant */
+  :host([appearance='pills']) .tabs-container {
+    background: var(--lt-bg-surface);
+    border: none;
+    border-radius: var(--lt-border-radius);
+    gap: var(--lt-spacing-2);
+    padding: var(--lt-spacing-1);
+  }
+`;
+
+// src/components/tab/tab.ts
+import { html } from "lit";
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/tab/tab.styles.ts
+import { css as css2 } from "lit";
+var tabStyles = css2`
+  :host {
+    display: inline-block;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  .tab {
+    align-items: center;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--lt-text-subtle);
+    cursor: pointer;
+    display: flex;
+    font-family: inherit;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    gap: var(--lt-spacing-2);
+    outline: none;
+    padding: var(--lt-spacing-3) var(--lt-spacing-4);
+    transition:
+      color 150ms ease,
+      border-color 150ms ease;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  :host(:not([disabled])):hover .tab {
+    color: var(--lt-text-default);
+  }
+
+  :host(:focus-visible) .tab {
+    color: var(--lt-text-primary);
+    outline: 2px solid var(--lt-border-focus);
+    outline-offset: 2px;
+  }
+
+  :host([active]) .tab {
+    border-color: var(--lt-border-primary-strong);
+    color: var(--lt-text-primary);
+  }
+
+  :host([disabled]) .tab {
+    color: var(--lt-color-neutral-300);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .icon {
+    font-size: 1.125rem;
+  }
+
+  /* Size variants */
+  :host([size='sm']) .tab {
+    font-size: 0.875rem;
+    padding: var(--lt-spacing-2) var(--lt-spacing-3);
+  }
+
+  :host([size='sm']) .icon {
+    font-size: 1rem;
+  }
+
+  :host([size='lg']) .tab {
+    font-size: 1rem;
+    padding: var(--lt-spacing-4) var(--lt-spacing-5);
+  }
+
+  :host([size='lg']) .icon {
+    font-size: 1.25rem;
+  }
+
+  /* Pills variant (applied by parent tab-group) */
+  :host([data-variant='pills']) .tab {
+    border-bottom: none;
+    border-radius: var(--lt-border-radius);
+    transition:
+      color 150ms ease,
+      background-color 150ms ease,
+      box-shadow 150ms ease;
+  }
+
+  :host([data-variant='pills'][active]) .tab {
+    background: var(--lt-bg-default);
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+    color: var(--lt-text-primary);
+  }
+`;
+
+// src/components/tab/tab.ts
+import "@latty-ds/icons";
+var Tab = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.value = "";
+    this.iconStart = "";
+    this.active = false;
+    this.disabled = false;
+    this.size = "md";
+    this._handleHostClick = () => {
+      if (this.disabled) return;
+      this.dispatchEvent(
+        new CustomEvent("tab-click", {
+          detail: { value: this.value },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this._handleHostKeydown = (e) => {
+      if (this.disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this._handleHostClick();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tab");
+    this.tabIndex = 0;
+    this.addEventListener("click", this._handleHostClick);
+    this.addEventListener("keydown", this._handleHostKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._handleHostClick);
+    this.removeEventListener("keydown", this._handleHostKeydown);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("active")) {
+      this.setAttribute("aria-selected", String(this.active));
+    }
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+    }
+  }
+  render() {
+    return html`
+      <span class="tab">
+        ${this.iconStart ? html`<lt-icon class="icon" name="${this.iconStart}"></lt-icon>` : ""}
+        <span class="label"><slot>${this.label}</slot></span>
+      </span>
+    `;
+  }
+};
+Tab.styles = tabStyles;
+__decorateClass([
+  property2()
+], Tab.prototype, "label", 2);
+__decorateClass([
+  property2()
+], Tab.prototype, "value", 2);
+__decorateClass([
+  property2({ attribute: "icon-start" })
+], Tab.prototype, "iconStart", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Tab.prototype, "active", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Tab.prototype, "disabled", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Tab.prototype, "size", 2);
+Tab = __decorateClass([
+  customElement("lt-tab")
+], Tab);
+
+// src/components/tab/tab-panel.ts
+import { html as html2 } from "lit";
+import { customElement as customElement2, property as property3 } from "lit/decorators.js";
+
+// src/components/tab/tab-panel.styles.ts
+import { css as css3 } from "lit";
+var tabPanelStyles = css3`
+  :host {
+    display: none;
+  }
+
+  :host([active]) {
+    display: block;
+  }
+`;
+
+// src/components/tab/tab-panel.ts
+var TabPanel = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.active = false;
+  }
+  render() {
+    return html2`<slot></slot>`;
+  }
+};
+TabPanel.styles = tabPanelStyles;
+__decorateClass([
+  property3({ reflect: true })
+], TabPanel.prototype, "value", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], TabPanel.prototype, "active", 2);
+TabPanel = __decorateClass([
+  customElement2("lt-tab-panel")
+], TabPanel);
+
+// src/components/tab-group/tab-group.ts
+var TabGroup = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.appearance = "default";
+    this.size = "md";
+    /**
+     * Handles click events from tabs.
+     * @private
+     */
+    this.handleTabClick = (e) => {
+      const tab = e.target;
+      if (tab.disabled) return;
+      this.value = tab.value;
+      this.updateTabs();
+      this.updatePanels();
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: this.value },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  /**
+   * Lifecycle: Called after the element's DOM has been updated.
+   */
+  firstUpdated() {
+    this.updateTabs();
+    this.updatePanels();
+  }
+  /**
+   * Updates all tabs with the correct active state and size.
+   * @private
+   */
+  updateTabs() {
+    if (!this.tabs) return;
+    this.tabs.forEach((tab) => {
+      tab.size = this.size;
+      tab.active = tab.value === this.value;
+      if (this.appearance === "pills") {
+        tab.setAttribute("data-variant", "pills");
+      } else {
+        tab.removeAttribute("data-variant");
+      }
+      tab.addEventListener("tab-click", this.handleTabClick);
+    });
+  }
+  /**
+   * Updates panel visibility based on selected value.
+   * @private
+   */
+  updatePanels() {
+    if (!this.panels) return;
+    this.panels.forEach((panel) => {
+      const panelValue = panel.getAttribute("value") ?? panel.getAttribute("data-value");
+      if (panelValue === this.value) {
+        panel.setAttribute("active", "");
+      } else {
+        panel.removeAttribute("active");
+      }
+    });
+  }
+  /**
+   * Handles slot changes.
+   * @private
+   */
+  handleSlotChange() {
+    this.updateTabs();
+    this.updatePanels();
+  }
+  /**
+   * Cleanup event listeners when component is removed.
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.tabs) {
+      this.tabs.forEach((tab) => {
+        tab.removeEventListener("tab-click", this.handleTabClick);
+      });
+    }
+  }
+  /**
+   * Watch for value changes.
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("value")) {
+      this.updateTabs();
+      this.updatePanels();
+    }
+    if (changedProperties.has("size") || changedProperties.has("appearance")) {
+      this.updateTabs();
+    }
+  }
+  render() {
+    return html3`
+      <div class="tab-group">
+        <div class="tabs-container" role="tablist">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <div class="panels-container" part="panels-container">
+          <slot name="panel"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+TabGroup.styles = tabGroupStyles;
+__decorateClass([
+  property4()
+], TabGroup.prototype, "value", 2);
+__decorateClass([
+  property4({ reflect: true })
+], TabGroup.prototype, "appearance", 2);
+__decorateClass([
+  property4({ reflect: true })
+], TabGroup.prototype, "size", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "lt-tab" })
+], TabGroup.prototype, "tabs", 2);
+__decorateClass([
+  queryAssignedElements({ slot: "panel" })
+], TabGroup.prototype, "panels", 2);
+TabGroup = __decorateClass([
+  customElement3("lt-tab-group")
+], TabGroup);
+export {
+  TabGroup
+};

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

@@ -0,0 +1,99 @@
+import { ThemeableElement } from '../../base';
+import { TabGroupSize, TabGroupAppearance } from './tab-group.types';
+import '../tab/tab';
+import '../tab/tab-panel';
+/**
+ * A container component that manages a group of tabs.
+ *
+ * @element lt-tab-group
+ *
+ * @fires {CustomEvent<{value: string}>} change - Dispatched when a tab is selected
+ *
+ * @slot - Tab elements
+ * @slot panel - Tab panel content (use multiple panels with matching values)
+ *
+ * @example
+ * ```html
+ * <lt-tab-group value="profile">
+ *   <lt-tab value="profile" label="Profile"></lt-tab>
+ *   <lt-tab value="settings" label="Settings"></lt-tab>
+ *
+ *   <div slot="panel" data-value="profile">Profile content</div>
+ *   <div slot="panel" data-value="settings">Settings content</div>
+ * </lt-tab-group>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-tab-group appearance="pills" value="home">
+ *   <lt-tab value="home" icon-start="home" label="Home"></lt-tab>
+ *   <lt-tab value="search" icon-start="search" label="Search"></lt-tab>
+ *   <lt-tab value="settings" icon-start="settings" label="Settings"></lt-tab>
+ *
+ *   <div slot="panel" data-value="home">Home content</div>
+ *   <div slot="panel" data-value="search">Search content</div>
+ *   <div slot="panel" data-value="settings">Settings content</div>
+ * </lt-tab-group>
+ * ```
+ */
+export declare class TabGroup extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Currently selected tab value.
+     * @default ''
+     */
+    value: string;
+    /**
+     * Visual appearance of the tab group.
+     * @default 'default'
+     */
+    appearance: TabGroupAppearance;
+    /**
+     * Size of the tabs.
+     * @default 'md'
+     */
+    size: TabGroupSize;
+    /**
+     * Reference to all slotted tab elements.
+     * @private
+     */
+    private tabs;
+    /**
+     * Reference to all slotted panel elements.
+     * @private
+     */
+    private panels;
+    /**
+     * Lifecycle: Called after the element's DOM has been updated.
+     */
+    firstUpdated(): void;
+    /**
+     * Updates all tabs with the correct active state and size.
+     * @private
+     */
+    private updateTabs;
+    /**
+     * Updates panel visibility based on selected value.
+     * @private
+     */
+    private updatePanels;
+    /**
+     * Handles click events from tabs.
+     * @private
+     */
+    private handleTabClick;
+    /**
+     * Handles slot changes.
+     * @private
+     */
+    private handleSlotChange;
+    /**
+     * Cleanup event listeners when component is removed.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Watch for value changes.
+     */
+    protected updated(changedProperties: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,11 @@
+/**
+ * Tab group component type definitions.
+ */
+/**
+ * Valid variants for a tab group.
+ */
+export type TabGroupAppearance = 'default' | 'pills';
+/**
+ * Valid sizes for a tab group.
+ */
+export type TabGroupSize = 'sm' | 'md' | 'lg';

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

@@ -0,0 +1,2 @@
+export { Table } from './table';
+export type { TableColumn, TableDensity, TableResponsiveMode, SortDirection, CellAlign, SortState, SortChangeDetail } from './table.types';