atomicuilibrary 0.0.1 → 0.1.3

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

@@ -0,0 +1,290 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { LabelSize, LabelWeight, LabelTransform, LabelVariant, LabelOrientation, LabelAlign, LabelDir, LabelTooltipPosition, LabelAriaLive, LabelClickEvent, LabelCopyEvent } from './types';
+/**
+ * `ui-label` — Enterprise-grade, fully accessible form label component.
+ *
+ * @slot           - Primary label text / rich content.
+ * @slot start     - Content placed before the label text (e.g. leading icon).
+ * @slot end       - Content placed after the label text (e.g. trailing icon or action).
+ * @slot hint      - Helper / hint text below the label.
+ * @slot tooltip   - Rich tooltip content triggered by the info icon.
+ * @slot required-indicator - Custom required-indicator markup (overrides built-in asterisk).
+ *
+ * @cssvar --ui-label-color              Label text colour.
+ * @cssvar --ui-label-font-size          Label font size.
+ * @cssvar --ui-label-font-weight        Label font weight.
+ * @cssvar --ui-label-gap                Gap between label and associated control direction.
+ * @cssvar --ui-label-required-color     Colour of the required asterisk.
+ * @cssvar --ui-label-disabled-opacity   Opacity when disabled.
+ * @cssvar --ui-label-error-color        Colour used for error / invalid state.
+ * @cssvar --ui-label-success-color      Colour used for success state.
+ * @cssvar --ui-label-hint-color         Colour of hint / helper text.
+ */
+export declare class UILabel {
+    el: HTMLElement;
+    /** Tracks whether the associated control is currently focused (managed externally or via the focused prop). */
+    private _isFocused;
+    /** Toggle state for tooltip open/close. */
+    private _tooltipOpen;
+    /**
+     * ID of the form control this label is associated with.
+     * Renders as a native `for` attribute on the underlying `<label>` element.
+     * Supports all standard form controls as well as custom web components.
+     */
+    htmlFor: string;
+    /**
+     * Alias for `htmlFor`.  `controlId` takes precedence if both are supplied.
+     */
+    controlId: string;
+    /**
+     * Deprecated alias kept for back-compat.  Prefer `htmlFor`.
+     */
+    target: string;
+    /**
+     * Plain-text label.  Use the default slot for rich/HTML content instead.
+     */
+    label: string;
+    /**
+     * Semantic size token.
+     * @default 'md'
+     */
+    size: LabelSize;
+    /**
+     * Font-weight scale.
+     * @default 'medium'
+     */
+    weight: LabelWeight;
+    /**
+     * CSS text-transform value.
+     * @default 'none'
+     */
+    transform: LabelTransform;
+    /**
+     * Single-line truncation with ellipsis.
+     */
+    truncate: boolean;
+    /**
+     * Allow text to wrap across multiple lines (disables truncation).
+     */
+    multiline: boolean;
+    /**
+     * Clamp to N visible lines (CSS `line-clamp`).  Requires `multiline` to be true.
+     */
+    lineClamp: number;
+    /**
+     * Colour variant.
+     * @default 'default'
+     */
+    variant: LabelVariant;
+    /**
+     * Marks the associated field as required.
+     * Shows a required indicator (asterisk by default) and sets `aria-required` on the
+     * linked control if possible.
+     */
+    required: boolean;
+    /**
+     * Shows "(optional)" hint text next to the label.
+     * Mutually exclusive with `required` — `required` wins if both are set.
+     */
+    optional: boolean;
+    /**
+     * Applies disabled styling and prevents interaction.
+     */
+    disabled: boolean;
+    /**
+     * Applies read-only styling (dimmed, no pointer events).
+     */
+    readonly: boolean;
+    /**
+     * Applies invalid / error styling to the label.
+     */
+    invalid: boolean;
+    /**
+     * Mirrors the focused state of the associated control so the label can react visually.
+     */
+    focused: boolean;
+    /**
+     * Shows a loading skeleton overlaid on the label text.
+     */
+    loading: boolean;
+    /**
+     * Error message shown below the label when `invalid` is true.
+     */
+    errorText: string;
+    /**
+     * Success message shown below the label when the field is valid and this text is set.
+     */
+    successText: string;
+    /**
+     * Helper / hint text shown below the label.
+     */
+    helperText: string;
+    /**
+     * Sets `aria-label` on the root element.
+     */
+    ariaLabel: string;
+    /**
+     * IDs of elements that describe this label (space-separated).
+     */
+    ariaDescribedby: string;
+    /**
+     * Live-region politeness for dynamic content announcements.
+     * @default 'off'
+     */
+    ariaLive: LabelAriaLive;
+    /**
+     * Stack direction when used alongside a form control.
+     * @default 'vertical'
+     */
+    orientation: LabelOrientation;
+    /**
+     * Horizontal alignment of label content.
+     * @default 'start'
+     */
+    align: LabelAlign;
+    /**
+     * Renders as an inline-level element.
+     */
+    inline: boolean;
+    /**
+     * Forces 100 % width block layout (useful inside flex/grid parents).
+     */
+    block: boolean;
+    /**
+     * Gap between the label row and the hint / error message.
+     * Accepts any valid CSS length (e.g. `'4px'`, `'0.5rem'`).
+     * Maps to `--ui-label-gap`.
+     */
+    gap: string;
+    /**
+     * External margin override (CSS shorthand string).
+     */
+    margin: string;
+    /**
+     * External padding override (CSS shorthand string).
+     */
+    padding: string;
+    /**
+     * Icon name rendered before the label text.
+     * Uses the same icon library as the rest of the design system.
+     */
+    startIcon: string;
+    /**
+     * Icon name rendered after the label text.
+     */
+    endIcon: string;
+    /**
+     * When true, only icons are shown — label text is visually hidden.
+     */
+    iconOnly: boolean;
+    /**
+     * Icon name or URL for the tooltip trigger button.
+     * Defaults to an 'ⓘ' info glyph.
+     */
+    tooltipIcon: string;
+    /**
+     * Plain-text tooltip content.  Use the `tooltip` slot for rich markup.
+     */
+    tooltip: string;
+    /**
+     * Preferred position for the tooltip callout.
+     * @default 'top'
+     */
+    tooltipPosition: LabelTooltipPosition;
+    /**
+     * Makes the label itself clickable (fires `labelClick`).
+     */
+    clickable: boolean;
+    /**
+     * Enables text-selection on the label (disabled by default for form labels).
+     */
+    selectable: boolean;
+    /**
+     * Shows a copy-to-clipboard button on hover and fires `labelCopy`.
+     */
+    copyable: boolean;
+    /**
+     * Enable responsive font-size scaling via fluid typography.
+     */
+    responsive: boolean;
+    /**
+     * On narrow viewports, switches from `horizontal` to `vertical` orientation.
+     */
+    mobileStack: boolean;
+    /**
+     * Text direction.
+     * @default 'ltr'
+     */
+    labelDir: LabelDir;
+    /**
+     * BCP-47 language tag (e.g. `'en'`, `'ar'`, `'fr'`).
+     */
+    labelLang: string;
+    /**
+     * DOM `id` for the root element.  Auto-generated if not provided.
+     */
+    labelId: string;
+    /**
+     * Logical name (maps to `name` attribute on the inner label).
+     */
+    name: string;
+    /**
+     * `data-testid` attribute for automated testing.
+     */
+    testId: string;
+    /**
+     * `data-automation-id` attribute for RPA / automation tooling.
+     */
+    automationId: string;
+    /**
+     * Fired when the label element is clicked (requires `clickable` or naturally via `for`).
+     */
+    labelClick: EventEmitter<LabelClickEvent>;
+    /**
+     * Fired when the label receives focus (passes through from the native label).
+     */
+    labelFocus: EventEmitter<void>;
+    /**
+     * Fired when the label loses focus.
+     */
+    labelBlur: EventEmitter<void>;
+    /**
+     * Fired after text is successfully copied to the clipboard (`copyable` must be true).
+     */
+    labelCopy: EventEmitter<LabelCopyEvent>;
+    onFocusedChanged(val: boolean): void;
+    componentWillLoad(): void;
+    /**
+     * Programmatically focus the label element.
+     * Useful when the owning form-field component proxies focus behaviour.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Programmatically trigger the copy-to-clipboard action.
+     */
+    copyText(): Promise<void>;
+    /** Resolve the `for`/`htmlFor` target ID with fallback chain. */
+    private get _forId();
+    /** Build the `aria-describedby` string used by the inner label. */
+    private get _describedBy();
+    /** Resolved label text — prefer the `label` prop, child text is handled via slot. */
+    private get _text();
+    private _handleClick;
+    private _handleFocus;
+    private _handleBlur;
+    private _handleCopy;
+    private _toggleTooltip;
+    private _closeTooltip;
+    private _rootClasses;
+    private _renderRequiredIndicator;
+    private _renderOptionalBadge;
+    private _renderIcon;
+    private _renderTooltipTrigger;
+    private _renderTooltipCallout;
+    private _renderCopyButton;
+    private _renderSubText;
+    private _renderLoadingSkeleton;
+    private _hostStyle;
+    private _lineClampStyle;
+    render(): any;
+}

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

@@ -0,0 +1,39 @@
+/**
+ * Type definitions for the ui-label component.
+ * All types intentionally scoped to label concerns; shared library types re-exported through here
+ * so the label directory is self-contained.
+ */
+import { StatusColor, FourSidePosition } from '../../types/common.type';
+/** Semantic text-size scale */
+export type LabelSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'jumbo';
+/** Font-weight scale */
+export type LabelWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+/** CSS text-transform values */
+export type LabelTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+/**
+ * Visual colour variants.  Matches the StatusColor palette plus 'default' and 'muted'.
+ */
+export type LabelVariant = 'default' | 'muted' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+/** Stack direction */
+export type LabelOrientation = 'horizontal' | 'vertical';
+/** Horizontal alignment shorthand */
+export type LabelAlign = 'start' | 'center' | 'end' | 'between';
+/** Text direction – mirrors the HTML dir attribute */
+export type LabelDir = 'ltr' | 'rtl' | 'auto';
+export type LabelTooltipPosition = FourSidePosition;
+export type LabelAriaLive = 'off' | 'polite' | 'assertive';
+/** Payload emitted by labelClick */
+export interface LabelClickEvent {
+    /** Native pointer event that originated the click */
+    originalEvent: MouseEvent;
+    /** Current text content of the label */
+    text: string;
+    /** The htmlFor / controlId the label is associated with, if any */
+    targetId: string | undefined;
+}
+/** Payload emitted by labelCopy */
+export interface LabelCopyEvent {
+    /** The text that was copied to the clipboard */
+    text: string;
+}
+export { StatusColor, FourSidePosition };

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

@@ -156,13 +156,13 @@ export declare class AppList {
     private handleDragEnd;
     private handleItemSelection;
     private goToPage;
+    private getPaginationItems;
     private renderSearch;
     private renderLoading;
     private renderEmpty;
     private renderPagination;
     private renderVirtualList;
     private renderItem;
-    private renderGroupFooter;
     handleItemClick(event: CustomEvent<{
         value: string;
         selected: boolean;
@@ -175,6 +175,7 @@ export declare class AppList {
     private renderEKGWaveform;
     private renderConfetti;
     private renderGroupDashboard;
+    private renderGroupFooter;
     private renderGroupedItems;
     private renderCommandPalette;
     private renderMinimap;

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

@@ -22,6 +22,7 @@ export declare class AppListGroup {
         expanded: boolean;
     }>;
     private toggleExpanded;
+    private didToggleFromButton;
     private handleHeaderClick;
     renderSkeleton(): any;
     render(): any;

package/dist/types/components/list-item/list-item.d.ts

@@ -31,6 +31,7 @@ export declare class AppListItem {
     badge: string;
     badgeColor: StatusColor;
     counter: number | string;
+    counterColor: StatusColor;
     /** JSON string or array of tag objects */
     tags: string | any[];
     /** Image URL for a square/landscape thumbnail */
@@ -116,6 +117,7 @@ export declare class AppListItem {
     contextMenuY: number;
     swipeOffset: number;
     showStatusEditor: boolean;
+    ghostPopoverVariant: 'light' | 'dark';
     listItemClick: EventEmitter<{
         value: string;
         selected: boolean;
@@ -168,33 +170,60 @@ export declare class AppListItem {
         value: string;
         expanded: boolean;
     }>;
-    private contextMenuRef;
+    private contextMenuRef?;
     private touchStartX;
     private touchCurrentX;
     private isSwiping;
-    private longPressTimer;
+    private longPressTimer?;
+    private themeObserver?;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    private handleOutsideClick;
-    private handleClick;
-    private handleContextMenu;
-    private toggleContextMenu;
-    private openContextMenu;
-    private closeContextMenu;
-    private handleCheckboxChange;
-    private handleFocus;
-    private handleBlur;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private handleTouchStart;
-    private handleTouchMove;
-    private handleTouchEnd;
+    private observeThemeChanges;
+    private syncGhostPopoverTheme;
+    private resolveGhostPopoverVariant;
+    private parseColorToRgb;
+    private readonly handleOutsideClick;
+    private readonly handleClick;
+    private readonly handleContextMenu;
+    private readonly toggleContextMenu;
+    private readonly openContextMenu;
+    private readonly closeContextMenu;
+    private readonly handleCheckboxChange;
+    private readonly handleFocus;
+    private readonly handleBlur;
+    private readonly handleMouseEnter;
+    private readonly handleMouseLeave;
+    private readonly handleTouchStart;
+    private readonly handleTouchMove;
+    private getSwipeActionDefinitions;
+    private completeFullSwipe;
+    private readonly handleTouchEnd;
     focusItem(): Promise<void>;
-    private handleKeyDown;
+    private readonly handleKeyDown;
     private renderLabel;
     private renderPresenceCursors;
     private renderSparkline;
+    private getSkeletonMediaDimensions;
+    private renderSkeletonMedia;
+    private getSkeletonMediaKind;
+    private renderSkeletonLabel;
+    private getSkeletonTextWidths;
+    private hasGhostMetadata;
+    private shouldRenderGhostLayer;
     private renderGhostLayer;
     private parseTagsToItems;
+    private getCollaborators;
+    private getAriaExpanded;
+    private getContainerRole;
+    private getItemAriaLabel;
+    private renderPresenceHalos;
+    private renderSwipeActionButton;
+    private renderSwipeActions;
+    private renderMediaContent;
+    private renderMediaSection;
+    private renderTags;
+    private renderContent;
+    private renderContextMenu;
     render(): any;
 }

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

@@ -0,0 +1,145 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Loader {
+    element: HTMLElement;
+    /**
+     * Accessibility ARIA label
+     */
+    ariaLabel: string;
+    /**
+     * ARIA live region mode
+     */
+    ariaLive: 'polite' | 'assertive' | 'off';
+    /**
+     * Apply background blur (glassmorphic backdrop)
+     */
+    backdropBlur: boolean;
+    /**
+     * Alias for blur attribute used in demo configuration
+     */
+    enableBlur: boolean;
+    /**
+     * Semantic color variant ('primary', 'secondary', etc.) or custom hex/gradient string
+     */
+    color: string;
+    /**
+     * Displays the loader as a full viewport overlay
+     */
+    fullscreen: boolean;
+    /**
+     * Text label to display alongside the loader animation
+     */
+    label?: string;
+    /**
+     * Sub-label description text
+     */
+    description?: string;
+    /**
+     * Position of the label relative to the loading animation
+     */
+    labelPosition: 'bottom' | 'top' | 'left' | 'right';
+    /**
+     * Displays the loader as an absolute overlay over its relative parent container
+     */
+    overlay: boolean;
+    /**
+     * Opacity value of the overlay backdrop (0 to 1)
+     */
+    overlayOpacity: number;
+    /**
+     * Custom background color/gradient for overlay mode
+     */
+    overlayBackground?: string;
+    /**
+     * Size of the loader preset ('3xs'...'jumbo') or custom CSS value ('120px', '4rem')
+     */
+    size: string;
+    /**
+     * Speed of animation cycle
+     */
+    speed: 'slow' | 'normal' | 'fast';
+    /**
+     * Stroke width thickness for circular loaders (spinner, ring)
+     */
+    thickness: number;
+    /**
+     * The animation style variant type (34 total variants)
+     */
+    type: string;
+    /**
+     * Whether the loader is visible
+     */
+    visible: boolean;
+    /**
+     * Loader style theme variant
+     */
+    variant: 'standard' | 'glass' | 'neon' | 'minimal' | 'linear-strip';
+    /**
+     * Determinate state progress value (0 to 100)
+     */
+    value?: number;
+    /**
+     * Enables simulated predictive non-linear crawling progress up to 95%
+     */
+    predictive: boolean;
+    /**
+     * Array of status messages to rotate through automatically
+     */
+    messages?: string[] | string;
+    /**
+     * Rotation interval time in milliseconds
+     */
+    messageInterval: number;
+    /**
+     * Image URL when using type="image"
+     */
+    image?: string;
+    /**
+     * Letters pool for Matrix matrix-rain animation
+     */
+    rainText?: string;
+    /**
+     * Number of columns in Matrix digital rain
+     */
+    rainColumns: number;
+    /**
+     * Traps keyboard focus inside the loader overlay (useful for fullscreen modals)
+     */
+    trapFocus: boolean;
+    /**
+     * Current loading status state
+     */
+    status: 'loading' | 'success' | 'error';
+    activeLabel?: string;
+    currentProgress: number;
+    uiShow: EventEmitter<void>;
+    uiHide: EventEmitter<void>;
+    private messageTimer?;
+    private predictiveTimer?;
+    private activeMessageIndex;
+    private parsedMessages;
+    private originalFocusedElement;
+    private focusableElements;
+    private canvasElement?;
+    private canvasAnimationId?;
+    private canvasColumnsDrops;
+    handleVisibilityChange(newValue: boolean): void;
+    parseMessagesProp(): void;
+    handleStatusChange(newStatus: string): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    private startTimers;
+    private stopTimers;
+    private updateActiveLabel;
+    private setupFocusTrap;
+    private releaseFocusTrap;
+    private getFocusableElements;
+    private handleKeyDown;
+    private initMatrixRain;
+    private stopMatrixRain;
+    private getStyles;
+    render(): any;
+    private renderStatusIcon;
+    private renderAnimation;
+}

package/dist/types/components/pattern-input/pattern-input.d.ts

@@ -76,6 +76,12 @@ export declare class UIPatternInput {
     private isCharAllowed;
     private extractRawValue;
     private formatValue;
+    /**
+     * Builds a structural completion regex from the pattern.
+     * maskChar (#) → \d  |  A → [A-Za-z0-9]  |  other chars → escaped literals.
+     * Used as the fallback when no validationRegex prop is supplied.
+     */
+    private generateFallbackRegex;
     private validateInput;
     private handleInput;
     private handleKeyPress;

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

@@ -127,6 +127,8 @@ export declare class Popover {
     private resizeObserver;
     private latestSizeData;
     private updateRetries;
+    /** Guard flag: true for the brief window after a trigger click, prevents outside-click from firing on the same event */
+    private _justOpened;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
@@ -137,6 +139,7 @@ export declare class Popover {
     private handleClose;
     private updateAriaAttributes;
     private initFocusTrap;
+    private getLayoutAnchor;
     private setupTrigger;
     private handleTargetKeyDown;
     private cleanup;