@latty-ds/web 0.2.0

package/dist/components/tab/index.js

@@ -0,0 +1,252 @@
+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/tab.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/tab/tab.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/tab/tab.styles.ts
+import { css } from "lit";
+var tabStyles = css`
+  :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 css2 } from "lit";
+var tabPanelStyles = css2`
+  :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);
+export {
+  Tab,
+  TabPanel
+};

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

@@ -0,0 +1,28 @@
+import { ThemeableElement } from '../../base';
+/**
+ * A panel associated with a tab. Shown when the matching tab is active.
+ * Place inside `lt-tab-group` using `slot="panel"`.
+ *
+ * @element lt-tab-panel
+ *
+ * @slot - Panel content
+ *
+ * @example
+ * ```html
+ * <lt-tab-group value="overview">
+ *   <lt-tab value="overview" label="Overview"></lt-tab>
+ *   <lt-tab value="settings" label="Settings"></lt-tab>
+ *
+ *   <lt-tab-panel slot="panel" value="overview">Overview content</lt-tab-panel>
+ *   <lt-tab-panel slot="panel" value="settings">Settings content</lt-tab-panel>
+ * </lt-tab-group>
+ * ```
+ */
+export declare class TabPanel extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /** Value that matches the corresponding `lt-tab`. */
+    value: string;
+    /** Set by `lt-tab-group` when this panel's tab is active. */
+    active: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,59 @@
+import { ThemeableElement } from '../../base';
+import { TabSize } from './tab.types';
+import '@latty-ds/icons';
+/**
+ * A tab component that represents a single tab within a tab group.
+ *
+ * @element lt-tab
+ *
+ * @slot - The label/content of the tab
+ *
+ * @example
+ * ```html
+ * <lt-tab value="profile" active>Profile</lt-tab>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-tab value="settings" icon-start="settings">Settings</lt-tab>
+ * ```
+ */
+export declare class Tab extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Label text for the tab.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Value identifier for the tab.
+     * @default ''
+     */
+    value: string;
+    /**
+     * Icon name to display at the start of the tab.
+     * @default ''
+     */
+    iconStart: string;
+    /**
+     * Whether this tab is currently active.
+     * @default false
+     */
+    active: boolean;
+    /**
+     * Whether the tab is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Size of the tab.
+     * @default 'md'
+     */
+    size: TabSize;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    private _handleHostClick;
+    private _handleHostKeydown;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * Tab component type definitions.
+ */
+/**
+ * Valid sizes for a tab.
+ */
+export type TabSize = 'sm' | 'md' | 'lg';

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

@@ -0,0 +1,8 @@
+/**
+ * Tab group component module.
+ * Exports the TabGroup web component and related type definitions.
+ *
+ * @module components/tab-group
+ */
+export { TabGroup } from './tab-group';
+export type { TabGroupAppearance, TabGroupSize } from './tab-group.types';