@latty-ds/web 0.2.0

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,35 @@
+import { ThemeableElement } from '../../base';
+import type { DividerOrientation, DividerAppearance } from './divider.types';
+/**
+ * A visual separator between content sections.
+ * Supports horizontal and vertical orientations, an optional centered label, and line styles.
+ *
+ * @element lt-divider
+ *
+ * @example
+ * ```html
+ * <lt-divider></lt-divider>
+ * <lt-divider label="or"></lt-divider>
+ * <lt-divider appearance="dashed"></lt-divider>
+ * <lt-divider orientation="vertical"></lt-divider>
+ * ```
+ */
+export declare class Divider extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Layout orientation of the divider line.
+     * @default 'horizontal'
+     */
+    orientation: DividerOrientation;
+    /**
+     * Line appearance of the divider.
+     * @default 'solid'
+     */
+    appearance: DividerAppearance;
+    /**
+     * Optional label text centered within the divider line.
+     * @default ''
+     */
+    label: string;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,2 @@
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerAppearance = 'solid' | 'dashed' | 'dotted';

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

@@ -0,0 +1,2 @@
+export { Divider } from './divider';
+export type { DividerOrientation, DividerAppearance } from './divider.types';

package/dist/components/divider/index.js

@@ -0,0 +1,149 @@
+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/divider/divider.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/divider/divider.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+
+// src/components/divider/divider.styles.ts
+import { css } from "lit";
+var dividerStyles = css`
+  :host {
+    display: block;
+  }
+
+  :host([orientation='vertical']) {
+    align-self: stretch;
+    display: inline-flex;
+    width: auto;
+  }
+
+  /* ── Horizontal ─────────────────────────────────────────────────────────── */
+
+  :host([orientation='horizontal']) [part='base'],
+  :host(:not([orientation])) [part='base'] {
+    align-items: center;
+    display: flex;
+    width: 100%;
+  }
+
+  :host([orientation='horizontal']) [part='base']::before,
+  :host(:not([orientation])) [part='base']::before,
+  :host([orientation='horizontal']) [part='base']::after,
+  :host(:not([orientation])) [part='base']::after {
+    border-top: 1px solid var(--lt-border-default);
+    border-top-style: var(--_divider-style, solid);
+    content: '';
+    flex: 1;
+  }
+
+  /* ── Vertical ───────────────────────────────────────────────────────────── */
+
+  :host([orientation='vertical']) [part='base'] {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) [part='base']::before,
+  :host([orientation='vertical']) [part='base']::after {
+    border-left: 1px solid var(--lt-border-default);
+    border-left-style: var(--_divider-style, solid);
+    content: '';
+    flex: 1;
+  }
+
+  /* ── Label ──────────────────────────────────────────────────────────────── */
+
+  [part='label'] {
+    color: var(--lt-text-subtle);
+    font-family: var(--lt-typography-fontfamily);
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding-inline: var(--lt-spacing-3);
+    white-space: nowrap;
+  }
+
+  :host([orientation='vertical']) [part='label'] {
+    padding-block: var(--lt-spacing-3);
+    padding-inline: 0;
+  }
+
+  /* ── Appearances ────────────────────────────────────────────────────────── */
+
+  :host([appearance='solid']) {
+    --_divider-style: solid;
+  }
+  :host([appearance='dashed']) {
+    --_divider-style: dashed;
+  }
+  :host([appearance='dotted']) {
+    --_divider-style: dotted;
+  }
+`;
+
+// src/components/divider/divider.ts
+var Divider = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.appearance = "solid";
+    this.label = "";
+  }
+  render() {
+    return html`
+      <div part="base" role="separator" aria-orientation=${this.orientation}>
+        ${this.label ? html`<span part="label">${this.label}</span>` : ""}
+      </div>
+    `;
+  }
+};
+Divider.styles = dividerStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Divider.prototype, "orientation", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Divider.prototype, "appearance", 2);
+__decorateClass([
+  property2()
+], Divider.prototype, "label", 2);
+Divider = __decorateClass([
+  customElement("lt-divider")
+], Divider);
+export {
+  Divider
+};

package/dist/components/dropdown/dropdown-item.d.ts

@@ -0,0 +1,24 @@
+import { ThemeableElement } from '../../base';
+/**
+ * A menu item for use inside lt-dropdown.
+ *
+ * @element lt-dropdown-item
+ * @slot - Item label / content
+ * @fires {CustomEvent} select - Fired when the item is activated (click or Enter/Space)
+ */
+export declare class DropdownItem extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    disabled: boolean;
+    selected: boolean;
+    href: string;
+    private _onActivate;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/dropdown/dropdown-item.styles.d.ts

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

package/dist/components/dropdown/dropdown.d.ts

@@ -0,0 +1,30 @@
+import { ThemeableElement } from '../../base';
+import type { DropdownPlacement } from './dropdown.types';
+import './dropdown-item';
+import '../surface/surface';
+/**
+ * A floating menu anchored to a trigger element.
+ *
+ * @element lt-dropdown
+ * @slot trigger - The element that opens/closes the menu (e.g. lt-button)
+ * @slot - Menu items (lt-dropdown-item elements)
+ * @fires {CustomEvent} open - Fired when the menu opens
+ * @fires {CustomEvent} close - Fired when the menu closes
+ */
+export declare class Dropdown extends ThemeableElement {
+    static styles: import("lit").CSSResult[];
+    open: boolean;
+    placement: DropdownPlacement;
+    private _cleanupClickOutside;
+    private _floatingCleanup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    private _triggerEl;
+    private _items;
+    private _onKeydown;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1 @@
+export type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top';

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

@@ -0,0 +1,3 @@
+export { Dropdown } from './dropdown';
+export { DropdownItem } from './dropdown-item';
+export type { DropdownPlacement } from './dropdown.types';