@hypoth-ui/wc 0.1.1

package/dist/data-display.d.ts

@@ -0,0 +1,872 @@
+import * as lit from 'lit';
+import { TemplateResult } from 'lit';
+import { D as DSElement } from './ds-element-Db0LMfxI.js';
+export { D as DsProgress, b as DsSkeleton, a as ProgressSize, P as ProgressVariant, e as SkeletonAnimation, c as SkeletonSize, S as SkeletonVariant, d as SkeletonWidth } from './skeleton-MUdd2029.js';
+
+type TableSize = "compact" | "default" | "spacious";
+/**
+ * Table root component.
+ *
+ * @element ds-table
+ *
+ * @slot - Table content (thead, tbody, tfoot)
+ *
+ * @cssprop --ds-table-border - Border style
+ * @cssprop --ds-table-radius - Border radius
+ * @cssprop --ds-table-bg - Background color
+ */
+declare class DsTable extends DSElement {
+    static styles: never[];
+    /**
+     * Size variant.
+     */
+    size: TableSize;
+    /**
+     * Whether to show striped rows.
+     */
+    striped: boolean;
+    /**
+     * Whether to remove borders.
+     */
+    borderless: boolean;
+    /**
+     * Whether to use fixed layout.
+     */
+    fixed: boolean;
+    /**
+     * Whether header is sticky.
+     */
+    stickyHeader: boolean;
+    /**
+     * Accessible caption for screen readers.
+     */
+    caption: string;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-table": DsTable;
+    }
+}
+
+/**
+ * Table header component (thead).
+ *
+ * @element ds-table-header
+ *
+ * @slot - TableRow elements for header
+ */
+declare class DsTableHeader extends DSElement {
+    static styles: never[];
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-table-header": DsTableHeader;
+    }
+}
+
+/**
+ * Table body component (tbody).
+ *
+ * @element ds-table-body
+ *
+ * @slot - TableRow elements for body
+ */
+declare class DsTableBody extends DSElement {
+    static styles: never[];
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-table-body": DsTableBody;
+    }
+}
+
+/**
+ * Table row component (tr).
+ *
+ * @element ds-table-row
+ *
+ * @slot - TableHead or TableCell elements
+ */
+declare class DsTableRow extends DSElement {
+    static styles: never[];
+    /**
+     * Row ID for selection tracking.
+     */
+    rowId: string;
+    /**
+     * Whether this row is selected.
+     */
+    selected: boolean;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-table-row": DsTableRow;
+    }
+}
+
+type TableAlign = "left" | "center" | "right";
+type SortDirection = "asc" | "desc" | "none";
+/**
+ * Table header cell component (th).
+ *
+ * @element ds-table-head
+ *
+ * @slot - Header content
+ *
+ * @fires ds-sort - When sortable header is clicked
+ */
+declare class DsTableHead extends DSElement {
+    static styles: never[];
+    /**
+     * Column key for sorting.
+     */
+    column: string;
+    /**
+     * Text alignment.
+     */
+    align: TableAlign;
+    /**
+     * Whether this column is sortable.
+     */
+    sortable: boolean;
+    /**
+     * Current sort direction.
+     */
+    sortDirection: SortDirection;
+    /**
+     * Column width (CSS value).
+     */
+    width: string;
+    private handleClick;
+    private handleKeyDown;
+    private getNextDirection;
+    /**
+     * Get the aria-sort attribute value.
+     * Per APG, sortable columns should always have aria-sort:
+     * - "ascending" for A-Z or low-high sort
+     * - "descending" for Z-A or high-low sort
+     * - "none" when sortable but not currently sorted
+     */
+    private getAriaSort;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-table-head": DsTableHead;
+    }
+}
+
+/**
+ * Table cell component (td).
+ *
+ * @element ds-table-cell
+ *
+ * @slot - Cell content
+ */
+declare class DsTableCell extends DSElement {
+    static styles: never[];
+    /**
+     * Text alignment.
+     */
+    align: TableAlign;
+    /**
+     * Column span.
+     */
+    colspan: number;
+    /**
+     * Row span.
+     */
+    rowspan: number;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-table-cell": DsTableCell;
+    }
+}
+
+type DataTableSortDirection = "asc" | "desc" | "none";
+interface DataTableColumn {
+    id: string;
+    header: string;
+    accessor?: string;
+    sortable?: boolean;
+    resizable?: boolean;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    align?: "left" | "center" | "right";
+}
+interface DataTableSort {
+    column: string;
+    direction: DataTableSortDirection;
+}
+interface DataTablePagination {
+    page: number;
+    pageSize: number;
+    total: number;
+}
+/**
+ * DataTable component for large dataset display with virtualization,
+ * filtering, pagination, and column features.
+ *
+ * @element ds-data-table
+ *
+ * @slot - Table content (use Table sub-components)
+ *
+ * @fires ds-sort - When sort changes
+ * @fires ds-page-change - When page changes
+ * @fires ds-page-size-change - When page size changes
+ * @fires ds-selection-change - When row selection changes
+ *
+ * @cssprop --ds-data-table-border - Border style
+ */
+declare class DsDataTable extends DSElement {
+    static styles: never[];
+    /**
+     * Enable virtualization for large datasets.
+     */
+    virtualized: boolean;
+    /**
+     * Row height for virtualization (in pixels).
+     */
+    rowHeight: number;
+    /**
+     * Number of overscan rows for virtualization.
+     */
+    overscan: number;
+    /**
+     * Total number of rows (for server-side pagination).
+     */
+    totalRows: number;
+    /**
+     * Current page (1-indexed).
+     */
+    page: number;
+    /**
+     * Page size.
+     */
+    pageSize: number;
+    /**
+     * Available page sizes.
+     */
+    pageSizes: string;
+    /**
+     * Enable row selection.
+     */
+    selectable: boolean;
+    /**
+     * Selection mode.
+     */
+    selectionMode: "single" | "multiple";
+    /**
+     * Show loading state.
+     */
+    loading: boolean;
+    /**
+     * Sort column ID.
+     */
+    sortColumn: string;
+    /**
+     * Sort direction.
+     */
+    sortDirection: DataTableSortDirection;
+    /**
+     * Filter/search query.
+     */
+    filter: string;
+    /**
+     * Empty state message.
+     */
+    emptyMessage: string;
+    private selectedRows;
+    private sortAnnouncement;
+    private get pageSizeOptions();
+    private get totalPages();
+    private get startRow();
+    private get endRow();
+    handleSort(column: string): void;
+    /**
+     * Announce sort state changes to screen readers.
+     * Uses a live region to provide immediate feedback.
+     */
+    private announceSortChange;
+    handlePageChange(newPage: number): void;
+    handlePageSizeChange(event: Event): void;
+    toggleRowSelection(rowId: string): void;
+    clearSelection(): void;
+    isRowSelected(rowId: string): boolean;
+    private renderPagination;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-data-table": DsDataTable;
+    }
+}
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type AvatarShape = "circle" | "square";
+type AvatarStatus = "online" | "offline" | "away" | "busy";
+/**
+ * Avatar component for user representation.
+ *
+ * @element ds-avatar
+ *
+ * @csspart image - The avatar image element
+ * @csspart initials - The initials fallback element
+ * @csspart icon - The icon fallback element
+ * @csspart status - The status indicator element
+ *
+ * @cssprop --ds-avatar-size - Avatar dimensions
+ * @cssprop --ds-avatar-radius - Border radius
+ * @cssprop --ds-avatar-bg - Background color for fallback
+ * @cssprop --ds-avatar-color - Text color for initials/icon
+ */
+declare class DsAvatar extends DSElement {
+    static styles: never[];
+    /**
+     * Image source URL.
+     */
+    src: string;
+    /**
+     * Alt text for image.
+     */
+    alt: string;
+    /**
+     * User's name (used for initials fallback).
+     */
+    name: string;
+    /**
+     * Size variant.
+     */
+    size: AvatarSize;
+    /**
+     * Shape variant.
+     */
+    shape: AvatarShape;
+    /**
+     * Status indicator.
+     */
+    status?: AvatarStatus;
+    /**
+     * Whether to show status indicator.
+     */
+    showStatus: boolean;
+    private imageError;
+    private get initials();
+    private get showImage();
+    private get showInitials();
+    private get showIcon();
+    private handleImageError;
+    private handleImageLoad;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-avatar": DsAvatar;
+    }
+}
+
+/**
+ * Avatar group component for displaying multiple avatars with overflow.
+ *
+ * @element ds-avatar-group
+ *
+ * @slot - Avatar elements to display
+ *
+ * @csspart overflow - The overflow indicator element
+ *
+ * @cssprop --ds-avatar-size - Avatar dimensions (inherited by children)
+ */
+declare class DsAvatarGroup extends DSElement {
+    static styles: never[];
+    /**
+     * Maximum number of avatars to display before showing overflow.
+     */
+    max: number;
+    /**
+     * Size variant (inherited by child avatars).
+     */
+    size: AvatarSize;
+    private overflowCount;
+    private visibleAvatars;
+    connectedCallback(): void;
+    private updateAvatarVisibility;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-avatar-group": DsAvatarGroup;
+    }
+}
+
+type BadgeVariant = "neutral" | "primary" | "secondary" | "success" | "warning" | "error" | "info";
+type BadgeSize = "sm" | "md" | "lg";
+type BadgePosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+/**
+ * Badge component for counts, notifications, and status indicators.
+ *
+ * @element ds-badge
+ *
+ * @cssprop --ds-badge-bg - Background color
+ * @cssprop --ds-badge-color - Text color
+ */
+declare class DsBadge extends DSElement {
+    static styles: never[];
+    /**
+     * Badge content/count.
+     */
+    content: string;
+    /**
+     * Maximum count to show. Displays "{max}+" if exceeded.
+     */
+    max?: number;
+    /**
+     * Color variant.
+     */
+    variant: BadgeVariant;
+    /**
+     * Size variant.
+     */
+    size: BadgeSize;
+    /**
+     * Use outline style.
+     */
+    outline: boolean;
+    /**
+     * Show as dot (no content).
+     */
+    dot: boolean;
+    /**
+     * Position when used in wrapper.
+     */
+    position: BadgePosition;
+    /**
+     * Show pulse animation.
+     */
+    pulse: boolean;
+    private get displayContent();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-badge": DsBadge;
+    }
+}
+
+type TagVariant = "neutral" | "primary" | "secondary" | "success" | "warning" | "error" | "info";
+type TagSize = "sm" | "md" | "lg";
+/**
+ * Tag component for categorization with optional remove action.
+ *
+ * @element ds-tag
+ *
+ * @slot - Tag content
+ * @slot icon - Optional leading icon
+ *
+ * @fires ds-remove - When the remove button is clicked
+ * @fires ds-click - When the tag is clicked (if clickable)
+ *
+ * @cssprop --ds-tag-bg - Background color
+ * @cssprop --ds-tag-color - Text color
+ */
+declare class DsTag extends DSElement {
+    static styles: never[];
+    /**
+     * Color variant.
+     */
+    variant: TagVariant;
+    /**
+     * Size variant.
+     */
+    size: TagSize;
+    /**
+     * Use solid (filled) style instead of subtle.
+     */
+    solid: boolean;
+    /**
+     * Show remove button.
+     */
+    removable: boolean;
+    /**
+     * Make tag clickable/interactive.
+     */
+    clickable: boolean;
+    /**
+     * Disable the tag.
+     */
+    disabled: boolean;
+    /**
+     * Value for identification in events.
+     */
+    value: string;
+    private handleRemove;
+    private handleClick;
+    private handleKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-tag": DsTag;
+    }
+}
+
+type CalendarSize = "default" | "compact";
+/**
+ * Calendar component for date selection.
+ *
+ * @element ds-calendar
+ *
+ * @fires ds-change - When a date is selected
+ * @fires ds-month-change - When the displayed month changes
+ *
+ * @cssprop --ds-calendar-width - Calendar width
+ * @cssprop --ds-calendar-cell-size - Day cell size
+ */
+declare class DsCalendar extends DSElement {
+    static styles: never[];
+    /**
+     * Selected date (ISO format: YYYY-MM-DD).
+     */
+    value: string;
+    /**
+     * Minimum selectable date (ISO format).
+     */
+    min: string;
+    /**
+     * Maximum selectable date (ISO format).
+     */
+    max: string;
+    /**
+     * Disabled dates (comma-separated ISO format).
+     */
+    disabledDates: string;
+    /**
+     * Locale for month/day names.
+     */
+    locale: string;
+    /**
+     * Size variant.
+     */
+    size: CalendarSize;
+    /**
+     * First day of week (0 = Sunday, 1 = Monday).
+     */
+    firstDayOfWeek: number;
+    private viewDate;
+    private get selectedDate();
+    private get minDate();
+    private get maxDate();
+    private get disabledDateSet();
+    private get weekdayNames();
+    private get monthYearLabel();
+    private get calendarDays();
+    private isToday;
+    private isSelected;
+    private isDisabled;
+    private formatDateISO;
+    private handlePrevMonth;
+    private handleNextMonth;
+    private handleDateSelect;
+    private handleKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-calendar": DsCalendar;
+    }
+}
+
+type TreeSelectionMode = "single" | "multiple" | "none";
+type TreeSize = "default" | "compact";
+/**
+ * Tree root component for hierarchical data display.
+ *
+ * @element ds-tree
+ *
+ * @slot - TreeItem elements
+ *
+ * @fires ds-selection-change - When selection changes
+ *
+ * @cssprop --ds-tree-indent - Indentation for nested items
+ */
+declare class DsTree extends DSElement {
+    static styles: never[];
+    /**
+     * Selection mode.
+     */
+    selectionMode: TreeSelectionMode;
+    /**
+     * Size variant.
+     */
+    size: TreeSize;
+    /**
+     * Show connecting lines.
+     */
+    lines: boolean;
+    /**
+     * Accessible label.
+     */
+    label: string;
+    /**
+     * Whether the tree is in a loading state.
+     * When true, sets aria-busy and disables keyboard navigation.
+     */
+    loading: boolean;
+    /**
+     * Text to display/announce during loading.
+     */
+    loadingText: string;
+    /**
+     * Node IDs that are currently loading children.
+     * Allows for node-level loading indicators.
+     */
+    loadingNodes: Set<string> | string[];
+    private selectedItems;
+    /**
+     * Checks if a specific node is currently loading.
+     */
+    isNodeLoading(nodeId: string): boolean;
+    handleItemSelect(itemId: string): void;
+    isItemSelected(itemId: string): boolean;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-tree": DsTree;
+    }
+}
+
+/**
+ * Tree item component for hierarchical nodes.
+ *
+ * @element ds-tree-item
+ *
+ * @slot - Item content (label)
+ * @slot icon - Optional leading icon
+ * @slot children - Nested TreeItem elements
+ *
+ * @fires ds-expand - When expand state changes
+ * @fires ds-select - When item is selected
+ * @fires ds-activate - When item is activated (Enter/double-click)
+ */
+declare class DsTreeItem extends DSElement {
+    static styles: never[];
+    /**
+     * Unique item ID.
+     */
+    itemId: string;
+    /**
+     * Whether item is expanded.
+     */
+    expanded: boolean;
+    /**
+     * Whether item is selected.
+     */
+    selected: boolean;
+    /**
+     * Whether item is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether this item is loading (e.g., fetching children).
+     * Can be set directly or inherited from tree's loadingNodes.
+     */
+    loading: boolean;
+    private hasChildren;
+    private _level;
+    private _setSize;
+    private _posInSet;
+    private get treeRoot();
+    /**
+     * Returns true if this item is loading (either directly or via tree's loadingNodes).
+     */
+    private get isLoading();
+    /**
+     * Returns true if the tree root is in a loading state.
+     */
+    private get isTreeLoading();
+    connectedCallback(): void;
+    /**
+     * Update ARIA position attributes for APG compliance.
+     * Provides screen readers with context like "Item 3 of 5, level 2".
+     */
+    private updateAriaPosition;
+    private updateHasChildren;
+    private handleExpandClick;
+    private handleContentClick;
+    private handleKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-tree-item": DsTreeItem;
+    }
+}
+
+type ListSelectionMode = "single" | "multiple" | "none";
+type ListOrientation = "vertical" | "horizontal";
+type ListSize = "default" | "compact" | "spacious";
+/**
+ * List root component for collection display.
+ *
+ * @element ds-list
+ *
+ * @slot - ListItem elements
+ *
+ * @fires ds-selection-change - When selection changes
+ *
+ * @cssprop --ds-list-gap - Gap between items
+ */
+declare class DsList extends DSElement {
+    static styles: never[];
+    /**
+     * Selection mode.
+     */
+    selectionMode: ListSelectionMode;
+    /**
+     * List orientation.
+     */
+    orientation: ListOrientation;
+    /**
+     * Size variant.
+     */
+    size: ListSize;
+    /**
+     * Show border around list.
+     */
+    bordered: boolean;
+    /**
+     * Accessible label.
+     */
+    label: string;
+    private selectedItems;
+    handleItemSelect(itemId: string): void;
+    isItemSelected(itemId: string): boolean;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-list": DsList;
+    }
+}
+
+/**
+ * List item component for collection items.
+ *
+ * @element ds-list-item
+ *
+ * @slot - Item content
+ * @slot leading - Optional leading element (icon, avatar)
+ * @slot secondary - Optional secondary text
+ * @slot trailing - Optional trailing element (action, badge)
+ *
+ * @fires ds-select - When item is selected
+ * @fires ds-activate - When item is activated (Enter/double-click)
+ */
+declare class DsListItem extends DSElement {
+    static styles: never[];
+    /**
+     * Unique item ID.
+     */
+    itemId: string;
+    /**
+     * Whether item is selected.
+     */
+    selected: boolean;
+    /**
+     * Whether item is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Value for identification.
+     */
+    value: string;
+    private get listRoot();
+    private handleClick;
+    private handleKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-list-item": DsListItem;
+    }
+}
+
+declare class DsCard extends DSElement {
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-card": DsCard;
+    }
+}
+
+declare class DsCardHeader extends DSElement {
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-card-header": DsCardHeader;
+    }
+}
+
+declare class DsCardContent extends DSElement {
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-card-content": DsCardContent;
+    }
+}
+
+declare class DsCardFooter extends DSElement {
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-card-footer": DsCardFooter;
+    }
+}
+
+type SeparatorOrientation = "horizontal" | "vertical";
+declare class DsSeparator extends DSElement {
+    /** Visual orientation of the separator */
+    orientation: SeparatorOrientation;
+    /** Whether the separator is purely decorative (no semantic meaning) */
+    decorative: boolean;
+    connectedCallback(): void;
+    updated(): void;
+    private updateAccessibility;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-separator": DsSeparator;
+    }
+}
+
+declare class DsAspectRatio extends DSElement {
+    /**
+     * Aspect ratio as width/height (e.g., "16/9", "4/3", "1/1").
+     * Can also be a number (e.g., 1.777 for 16:9).
+     */
+    ratio: string;
+    updated(): void;
+    connectedCallback(): void;
+    private updateCssVariable;
+    private parseRatio;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-aspect-ratio": DsAspectRatio;
+    }
+}
+
+export { type AvatarShape, type AvatarSize, type AvatarStatus, type BadgePosition, type BadgeSize, type BadgeVariant, type CalendarSize, type DataTableColumn, type DataTablePagination, type DataTableSort, type DataTableSortDirection, DsAspectRatio, DsAvatar, DsAvatarGroup, DsBadge, DsCalendar, DsCard, DsCardContent, DsCardFooter, DsCardHeader, DsDataTable, DsList, DsListItem, DsSeparator, DsTable, DsTableBody, DsTableCell, DsTableHead, DsTableHeader, DsTableRow, DsTag, DsTree, DsTreeItem, type ListOrientation, type ListSelectionMode, type ListSize, type SeparatorOrientation, type SortDirection, type TableAlign, type TableSize, type TagSize, type TagVariant, type TreeSelectionMode, type TreeSize };