bromcom-ui-next 0.1.0

package/dist/types/components/accordion-group/accordion-group.component.d.ts

@@ -0,0 +1,95 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { AccordionChangeEventType } from '../accordion/types';
+import { AccordionGroupChangeEventType } from './types';
+/**
+* @component BcmAccordionGroup
+* @description A container component that manages a group of accordions. Provides single/multiple expansion
+* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.
+*
+* @example Basic usage - Single expansion mode
+* <bcm-accordion-group>
+*   <bcm-accordion>
+*     <div slot="title">Section 1</div>
+*     <div>Content 1</div>
+*   </bcm-accordion>
+*   <bcm-accordion>
+*     <div slot="title">Section 2</div>
+*     <div>Content 2</div>
+*   </bcm-accordion>
+* </bcm-accordion-group>
+*
+* @example Multiple expansion mode
+* <bcm-accordion-group multi={true}>
+*   <bcm-accordion>...</bcm-accordion>
+*   <bcm-accordion>...</bcm-accordion>
+* </bcm-accordion-group>
+*
+* @example Event handling
+* // Listen to accordion group changes
+* const accordionGroup = document.querySelector('bcm-accordion-group');
+* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {
+*   const { expanded, changed, expandedItems, expandedCount } = event.detail;
+*   console.log('Accordion expanded state:', expanded);
+*   console.log('Changed accordion:', changed);
+*   console.log('Currently expanded accordions:', expandedItems);
+*   console.log('Number of expanded accordions:', expandedCount);
+* });
+*
+* // Using methods
+* await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)
+* await accordionGroup.collapseAll(); // Collapses all accordions
+* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions
+*
+* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)
+*
+* @slot default - Container slot for bcm-accordion components
+*
+* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes
+* @eventProperty {boolean} expanded - Current expanded state of the changed accordion
+* @eventProperty {HTMLElement} changed - The accordion element that triggered the change
+* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements
+* @eventProperty {number} expandedCount - Number of currently expanded accordions
+*
+* @method expandAll() - Expands all accordions (only available in multi mode)
+* @method collapseAll() - Collapses all accordions
+* @method getExpandedItems() - Returns array of currently expanded accordions
+*
+* @csspart container - The accordion group container element
+*
+* @css {string} --bcm-accordion-border - Border color of the accordion group
+* @css {string} --bcm-accordion-radius - Border radius of the accordion group
+*/
+export declare class BcmAccordionGroup implements ComponentInterface {
+    /** Reference to the host element */
+    host: HTMLElement;
+    /** Controls whether multiple accordions can be expanded simultaneously */
+    multi: boolean;
+    /** Array of accordion elements within the group */
+    accordionItems: HTMLBcmAccordionElement[];
+    /** Event emitted when any accordion's expanded state changes */
+    bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;
+    /**
+     * Expands all accordions in the group
+     * Only available when multi=true
+     */
+    expandAll(): Promise<void>;
+    /**
+     * Collapses all accordions in the group
+     */
+    collapseAll(): Promise<void>;
+    /**
+     * Returns an array of currently expanded accordion elements
+     */
+    getExpandedItems(): Promise<HTMLBcmAccordionElement[]>;
+    componentWillLoad(): void;
+    private setGroupBehavior;
+    /**
+     * Updates the accordion items array when slot content changes
+     */
+    private handleSlotChange;
+    /**
+     * Handles state changes of individual accordions
+     */
+    handleAccordionChange(event: CustomEvent<AccordionChangeEventType>): void;
+    render(): any;
+}

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

@@ -0,0 +1,13 @@
+import { BaseAccordionChangeEventType } from '../accordion/types';
+/**
+ * Type for accordion group change events
+ * @extends BaseAccordionChangeEventType
+ */
+export type AccordionGroupChangeEventType = BaseAccordionChangeEventType & {
+    /** The accordion element that triggered the change */
+    changed?: HTMLElement;
+    /** List of currently expanded accordion elements */
+    expandedItems?: HTMLElement[];
+    /** Number of currently expanded accordions */
+    expandedCount?: number;
+};

package/dist/types/components/alert/alert.component.d.ts

@@ -0,0 +1,28 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { AlertKind, AlertSize, AlertStatus } from './types';
+/**
+ * Alert component that displays messages with different statuses and styles
+ * @class BcmAlert
+ */
+export declare class BcmAlert implements ComponentInterface {
+    /** Alert status type */
+    status?: AlertStatus;
+    /** Alert size variant */
+    size?: AlertSize;
+    /** Alert style variant */
+    kind?: AlertKind;
+    /** Whether alert can be dismissed */
+    dismissible?: boolean;
+    /** Whether to show status icon */
+    showStatusIcon?: boolean;
+    bcmDismiss: EventEmitter<void>;
+    /**
+     * Handles alert dismissal
+     * @private
+     */
+    private onDismiss;
+    private getStatusIcon;
+    private get alertClass();
+    private get alertStyles();
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+export type AlertSize = 'small' | 'medium' | 'large';
+export type AlertKind = 'filled' | 'text';
+export type AlertStatus = 'info' | 'error' | 'warning' | 'success' | 'default';

package/dist/types/components/avatar/avatar.component.d.ts

@@ -0,0 +1,24 @@
+import { AvatarShape, AvatarSize, AvatarStatus } from './types';
+export declare class BcmAvatar {
+    /** Source URL for avatar image */
+    image: string;
+    /** Alternative text for image */
+    alt: string;
+    /**  Shape of the avatar (ellipse/square) */
+    shape: AvatarShape;
+    /** Size of the avatar */
+    size: AvatarSize;
+    /** Custom background color */
+    color: string;
+    /** Fallback icon class */
+    icon: string;
+    /**  Status indicator type */
+    status: AvatarStatus;
+    /**  Status indicator animation */
+    blink: boolean;
+    /**  Display name (used for initials) */
+    name: string;
+    isFallback: boolean;
+    private getFirstLetters;
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+export type AvatarShape = 'ellipse' | 'square';
+export type AvatarSize = 'small' | 'medium' | 'large';
+export type AvatarStatus = 'info' | 'error' | 'warning' | 'success' | 'default';

package/dist/types/components/button/button.component.d.ts

@@ -0,0 +1,52 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ButtonKind, ButtonSize, ButtonType, ButtonStatus, ButtonVariant, IconPosition } from './types';
+export declare class BcmButton {
+    /** Defines the main visual style of the button */
+    kind: ButtonKind;
+    /** Controls the button size */
+    size: ButtonSize;
+    /** Defines the button's status/state color */
+    status: ButtonStatus;
+    /** Predefined button variants */
+    variant?: ButtonVariant;
+    /** Icon class name */
+    icon?: string;
+    /** Icon placement (prefix/suffix) */
+    iconPosition: IconPosition;
+    /** Icon-only button mode */
+    iconOnly: boolean;
+    /** Full width button */
+    fullWidth: boolean;
+    /** HTML button type */
+    type: ButtonType;
+    /** Loading state */
+    loading: boolean;
+    /** Disabled state */
+    disabled: boolean;
+    /** Button text content */
+    text?: string;
+    /** Active state */
+    active: boolean;
+    /** Form association */
+    form: string;
+    value: string;
+    name: string;
+    /** Screen reader label */
+    label: string;
+    /** Expanded state for expandable content */
+    expanded?: string;
+    /** ID of controlled element */
+    controls: string;
+    bcmClick: EventEmitter<MouseEvent>;
+    bcmFocus: EventEmitter<FocusEvent>;
+    bcmBlur: EventEmitter<FocusEvent>;
+    private handleClick;
+    private handleFocus;
+    private handleBlur;
+    private get buttonText();
+    private get buttonIcon();
+    private get buttonStatus();
+    private get buttonStyles();
+    private buttonClass;
+    render(): any;
+}

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

@@ -0,0 +1,15 @@
+export type ButtonKind = 'primary' | 'ghost' | 'text' | 'outline';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonType = 'button' | 'reset' | 'submit';
+export type ButtonStatus = 'default' | 'success' | 'error' | 'warning' | 'info';
+export type IconPosition = 'prefix' | 'suffix';
+interface ButtonVariantConfig {
+    text: string;
+    status: ButtonStatus;
+    icon?: string;
+    iconPosition?: IconPosition;
+    kind?: ButtonKind;
+}
+export declare const variantOptions: Record<string, ButtonVariantConfig>;
+export type ButtonVariant = keyof typeof variantOptions;
+export {};

package/dist/types/components/chip/chip.component.d.ts

@@ -0,0 +1,48 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { ChipKind, ChipSize, ChipStatus } from './types';
+/**
+ * @component BcmChip
+ * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.
+ * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.
+ *
+ * @example
+ * <bcm-chip size="medium" kind="filled" status="success">
+ *   Success Chip
+ * </bcm-chip>
+ *
+ * @example Dismissible chip
+ * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>
+ *   Dismissible Chip
+ * </bcm-chip>
+ *
+ * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'
+ * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'
+ * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'
+ * @prop {boolean} dismissible - Whether the chip can be dismissed
+ * @prop {boolean} disabled - Whether the chip is disabled
+ * @prop {string} color - Custom color override for the chip
+ *
+ * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked
+ *
+ * @csspart chip - The root chip element
+ * @csspart dismiss-icon - The dismiss button icon
+ */
+export declare class BcmChip implements ComponentInterface {
+    /** Chip size variant */
+    size?: ChipSize;
+    /** Chip style variant */
+    kind?: ChipKind;
+    /** Chip status */
+    status?: ChipStatus;
+    /** Whether chip can be dismissed */
+    dismissible?: boolean;
+    /** Whether chip is disabled */
+    disabled?: boolean;
+    /** Chip color variant */
+    color?: string;
+    bcmDismiss: EventEmitter<void>;
+    private chipClass;
+    private get chipStyle();
+    private handleDismiss;
+    render(): any;
+}

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

@@ -0,0 +1,9 @@
+export type ChipSize = 'small' | 'medium' | 'large';
+export type ChipKind = 'filled' | 'outlined' | 'text';
+export type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default';
+export declare const STATUS_COLORS: {
+    readonly info: "blue";
+    readonly error: "red";
+    readonly warning: "amber";
+    readonly success: "green";
+};

package/dist/types/components/text/text.component.d.ts

@@ -0,0 +1,12 @@
+import { TextVariant, TextSize } from './text.types';
+export declare class BcmText {
+    /** Text content */
+    text: string;
+    /** Text variant */
+    variant: TextVariant;
+    /** Text size */
+    size: TextSize;
+    private readonly variantClassMap;
+    private getTextClass;
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+export type TextVariant = 'display' | 'heading1' | 'heading2' | 'title1' | 'title2' | 'title3' | 'body' | 'bodyAccent' | 'helper' | 'caption' | 'link' | 'label' | 'placeholder' | 'info' | 'infoAccent';
+export type TextSize = 'small' | 'medium' | 'large';
+export type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'label' | 'a';

package/dist/types/components/text/text.utils.d.ts

@@ -0,0 +1,2 @@
+import { TextVariant, TextTag } from './text.types';
+export declare const variantTagMap: Record<TextVariant, TextTag>;