npm - @sekiui/elements - Versions diffs - 0.0.80 → 0.0.81 - Mend

@sekiui/elements 0.0.80 → 0.0.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1681) hide show

package/dist/types/components/breadcrumb/seki-breadcrumb-link.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@
  * @component BreadcrumbLink
  */
 export declare class SekiBreadcrumbLink {
+    el: HTMLElement;
     /**
      * URL for the breadcrumb link
      */
@@ -12,5 +13,7 @@ export declare class SekiBreadcrumbLink {
      * Target for the link
      */
     target?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/breadcrumb/seki-breadcrumb-list.d.ts CHANGED Viewed

@@ -4,5 +4,8 @@
  * @component BreadcrumbList
  */
 export declare class SekiBreadcrumbList {
+    el: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/breadcrumb/seki-breadcrumb-page.d.ts CHANGED Viewed

@@ -4,5 +4,8 @@
  * @component BreadcrumbPage
  */
 export declare class SekiBreadcrumbPage {
+    el: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/breadcrumb/seki-breadcrumb-separator.d.ts CHANGED Viewed

@@ -6,5 +6,7 @@
 export declare class SekiBreadcrumbSeparator {
     el: HTMLElement;
     private hasCustomContent;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/breadcrumb/seki-breadcrumb.d.ts CHANGED Viewed

@@ -16,10 +16,13 @@
  * </seki-breadcrumb>
  */
 export declare class SekiBreadcrumb {
+    el: HTMLElement;
     /**
      * Accessible label for the breadcrumb navigation
      * @default 'breadcrumb'
      */
     label?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/button/seki-button.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 export declare class SekiButton {
+    el: HTMLElement;
     /**
      * Visual style variant of the button
      */
@@ -20,5 +21,7 @@ export declare class SekiButton {
      */
     ariaLabel?: string;
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/button-group/seki-button-group.d.ts CHANGED Viewed

@@ -15,5 +15,7 @@ export declare class SekiButtonGroup {
     componentDidLoad(): void;
     componentDidUpdate(): void;
     private updateChildButtons;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/calendar/seki-calendar.d.ts CHANGED Viewed

@@ -94,5 +94,7 @@ export declare class SekiCalendar {
     private handleDayClick;
     private handleKeyDown;
     private getDayClasses;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/card/seki-card-action.d.ts CHANGED Viewed

@@ -8,9 +8,12 @@
  * </seki-card-action>
  */
 export declare class CardAction {
+    el: HTMLElement;
     /**
      * Optional CSS class
      */
     class?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/card/seki-card-content.d.ts CHANGED Viewed

@@ -9,9 +9,12 @@
  * </seki-card-content>
  */
 export declare class CardContent {
+    el: HTMLElement;
     /**
      * Optional CSS class
      */
     class?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/card/seki-card-description.d.ts CHANGED Viewed

@@ -6,9 +6,12 @@
  * <seki-card-description>Description text</seki-card-description>
  */
 export declare class CardDescription {
+    el: HTMLElement;
     /**
      * Optional CSS class
      */
     class?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/card/seki-card-footer.d.ts CHANGED Viewed

@@ -10,6 +10,7 @@ type Alignment = 'flex-start' | 'center' | 'flex-end';
  * </seki-card-footer>
  */
 export declare class CardFooter {
+    el: HTMLElement;
     /**
      * Flex alignment for footer items. Default: flex-start
      * Options: flex-start, center, flex-end
@@ -19,6 +20,8 @@ export declare class CardFooter {
      * Optional CSS class
      */
     class?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }
 export {};

package/dist/types/components/card/seki-card-header.d.ts CHANGED Viewed

@@ -12,9 +12,12 @@
  * </seki-card-header>
  */
 export declare class CardHeader {
+    el: HTMLElement;
     /**
      * Optional CSS class for custom styling
      */
     class?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/card/seki-card-title.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  * <seki-card-title level="h2">My Card Title</seki-card-title>
  */
 export declare class CardTitle {
+    el: HTMLElement;
     /**
      * Semantic heading level (h1-h6). Default: h2
      */
@@ -15,6 +16,8 @@ export declare class CardTitle {
      * Optional CSS class
      */
     class?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }
 export {};

package/dist/types/components/card/seki-card.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@
  * </seki-card>
  */
 export declare class Card {
+    el: HTMLElement;
     /**
      * Optional CSS class for custom styling hooks
      */
@@ -19,5 +20,7 @@ export declare class Card {
      * Optional data attribute for testing
      */
     dataTestid?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/carousel/seki-carousel-content.d.ts CHANGED Viewed

@@ -5,5 +5,8 @@
  * @slot - Carousel items (seki-carousel-item)
  */
 export declare class SekiCarouselContent {
+    el: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/carousel/seki-carousel-dots.d.ts CHANGED Viewed

@@ -10,6 +10,7 @@ export declare class SekiCarouselDots {
     private unsubscribe;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private findParentCarousel;
     private subscribeToCarousel;

package/dist/types/components/carousel/seki-carousel-item.d.ts CHANGED Viewed

@@ -4,10 +4,13 @@
  * @slot - Slide content (images, cards, any content)
  */
 export declare class SekiCarouselItem {
+    el: HTMLElement;
     /**
      * Width of the item as CSS flex-basis.
      * Examples: '100%' (full width), '50%' (half), '33.33%' (third)
      */
     basis: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/carousel/seki-carousel-next.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export declare class SekiCarouselNext {
     private unsubscribe;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private findParentCarousel;
     private subscribeToCarousel;

package/dist/types/components/carousel/seki-carousel-previous.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export declare class SekiCarouselPrevious {
     private unsubscribe;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private findParentCarousel;
     private subscribeToCarousel;

package/dist/types/components/carousel/seki-carousel.d.ts CHANGED Viewed

@@ -63,6 +63,7 @@ export declare class SekiCarousel {
     private autoplayInterval;
     private viewportEl;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     handleAutoplayChange(newValue: boolean): void;
     handleOptionsChange(): void;

package/dist/types/components/chart/chart-tooltip.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import type { Chart, TooltipModel } from 'chart.js';
+/**
+ * Creates a Chart.js external tooltip handler that renders a styled tooltip
+ * inside the component's Shadow DOM.
+ *
+ * Uses SekiUI design tokens for consistent styling with the rest of the library.
+ * The tooltip displays the category label, dataset name, colored indicator dot,
+ * and formatted value.
+ *
+ * @param shadowRoot - The Shadow DOM root where the tooltip element will be created
+ * @returns A function matching Chart.js's `tooltip.external` callback signature
+ */
+export declare function createExternalTooltipHandler(shadowRoot: ShadowRoot): (context: {
+    chart: Chart;
+    tooltip: TooltipModel<"line" | "bar" | "doughnut" | "pie" | "radar" | "polarArea" | "scatter">;
+}) => void;

package/dist/types/components/chart/chart-types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { ChartData, ChartOptions } from 'chart.js';
-export type ChartType = 'line' | 'bar' | 'area' | 'doughnut';
+export type ChartType = 'line' | 'bar' | 'area' | 'doughnut' | 'pie' | 'radar' | 'polarArea' | 'scatter';
 export type { ChartData, ChartOptions };
 export interface ChartDataset {
     label?: string;

package/dist/types/components/chart/seki-chart.d.ts CHANGED Viewed

@@ -8,6 +8,22 @@ export declare class SekiChart {
     height: string;
     dataJson?: string;
     optionsJson?: string;
+    /** Stack datasets on top of each other (bar/line/area charts) */
+    stacked: boolean;
+    /** Display bar charts horizontally (sets indexAxis to 'y') */
+    horizontal: boolean;
+    /** Apply a gradient fill to line/area chart datasets */
+    gradient: boolean;
+    /** Display pie/doughnut charts with a cutout (donut style) */
+    donut: boolean;
+    /** Hide grid lines on x and y axes */
+    hideGrid: boolean;
+    /** Hide tick labels on x and y axes */
+    hideAxes: boolean;
+    /** Hide the chart legend */
+    hideLegend: boolean;
+    /** Hide tooltips on hover */
+    hideTooltip: boolean;
     private chartInstance?;
     private canvasRef?;
     private updateTimeout?;
@@ -17,9 +33,12 @@ export declare class SekiChart {
     private parseDataJson;
     private parseOptionsJson;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     handlePropsChange(): void;
     private renderChart;
+    private applyVariantOptions;
+    private applyGradientFill;
     private getColors;
     private applyThemeColors;
 }

package/dist/types/components/chart-legend/seki-chart-legend.d.ts ADDED Viewed

@@ -0,0 +1,44 @@
+/**
+ * Configuration for chart legend items.
+ */
+export interface ChartLegendItem {
+    /** Display label for the legend entry */
+    label: string;
+    /** CSS color value for the indicator dot */
+    color: string;
+}
+/**
+ * Configuration object for the chart legend component.
+ */
+export interface ChartLegendConfig {
+    /** Array of legend items to display */
+    items: ChartLegendItem[];
+}
+/**
+ * seki-chart-legend: A standalone legend component for charts.
+ *
+ * Renders a list of colored dot indicators paired with labels.
+ * Designed to complement the seki-chart component but can be used independently.
+ *
+ * @component ChartLegend
+ * @example
+ * <seki-chart-legend></seki-chart-legend>
+ * // Set config via JS:
+ * legend.config = { items: [{ label: 'Revenue', color: '#3b82f6' }] };
+ */
+export declare class SekiChartLegend {
+    el: HTMLElement;
+    /**
+     * Legend configuration containing an array of items with label and color.
+     * Must be set via JavaScript property (not HTML attribute).
+     */
+    config?: ChartLegendConfig;
+    /**
+     * Layout orientation of the legend items.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' | 'vertical';
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/checkbox/seki-checkbox.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * <seki-checkbox indeterminate></seki-checkbox>
  */
 export declare class SekiCheckbox {
+    el: HTMLElement;
     internals: ElementInternals;
     /**
      * Controlled checked state. When provided, component operates in controlled mode.
@@ -82,5 +83,7 @@ export declare class SekiCheckbox {
      */
     handleKeyDown(event: KeyboardEvent): void;
     formResetCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/collapsible/seki-collapsible-content.d.ts CHANGED Viewed

@@ -17,6 +17,7 @@ export declare class SekiCollapsibleContent {
     componentDidLoad(): void;
     private setupObserver;
     private syncWithContext;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/collapsible/seki-collapsible-trigger.d.ts CHANGED Viewed

@@ -14,5 +14,7 @@ export declare class SekiCollapsibleTrigger {
     private getContext;
     handleClick(): void;
     handleKeyDown(event: KeyboardEvent): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/collapsible/seki-collapsible.d.ts CHANGED Viewed

@@ -58,5 +58,7 @@ export declare class SekiCollapsible {
     componentDidLoad(): void;
     componentDidUpdate(): void;
     private getContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/combobox/seki-combobox.d.ts CHANGED Viewed

@@ -57,6 +57,7 @@ export declare class SekiCombobox {
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     handleValuePropChange(newValue: ComboboxValue): void;
     handleOpenPropChange(newOpen: boolean): void;

package/dist/types/components/combobox-content/seki-combobox-content.d.ts CHANGED Viewed

@@ -11,5 +11,7 @@ export declare class SekiComboboxContent {
     componentDidLoad(): void;
     private observeParent;
     private updateState;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/combobox-empty/seki-combobox-empty.d.ts CHANGED Viewed

@@ -20,11 +20,14 @@ import { ComboboxEmptyReason } from '../../utils/combobox';
  * </seki-combobox-empty>
  */
 export declare class SekiComboboxEmpty {
+    el: HTMLElement;
     /**
      * The reason why the combobox is showing an empty state
      * @default 'no-results'
      */
     reason: ComboboxEmptyReason;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
     /**
      * Renders the appropriate named slot based on the current reason

package/dist/types/components/combobox-group/seki-combobox-group.d.ts CHANGED Viewed

@@ -2,8 +2,11 @@
  * @slot - Group items
  */
 export declare class SekiComboboxGroup {
+    el: HTMLElement;
     /** Group label */
     label: string;
     private groupId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/combobox-input/seki-combobox-input.d.ts CHANGED Viewed

@@ -23,5 +23,7 @@ export declare class SekiComboboxInput {
     private renderCount;
     private renderText;
     private renderSelectedDisplay;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/combobox-item/seki-combobox-item.d.ts CHANGED Viewed

@@ -13,6 +13,7 @@ export declare class SekiComboboxItem {
     private getContext;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     handlePropsChange(): void;
     private registerWithContext;

package/dist/types/components/command/seki-command-empty.d.ts CHANGED Viewed

@@ -12,6 +12,7 @@ export declare class SekiCommandEmpty {
     private getContext;
     componentWillRender(): void;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/command/seki-command-group.d.ts CHANGED Viewed

@@ -32,5 +32,7 @@ export declare class SekiCommandGroup {
      */
     updateVisibility(): void;
     componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/command/seki-command-input.d.ts CHANGED Viewed

@@ -25,5 +25,7 @@ export declare class SekiCommandInput {
     componentDidLoad(): void;
     private handleInput;
     private handleKeyDown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/command/seki-command-item.d.ts CHANGED Viewed

@@ -61,5 +61,7 @@ export declare class SekiCommandItem {
      */
     isVisible(): boolean;
     private handleClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/command/seki-command-list.d.ts CHANGED Viewed

@@ -6,5 +6,8 @@
  * @part list - The list container
  */
 export declare class SekiCommandList {
+    el: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/command/seki-command-separator.d.ts CHANGED Viewed

@@ -4,5 +4,8 @@
  * @part separator - The separator line
  */
 export declare class SekiCommandSeparator {
+    el: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/command/seki-command.d.ts CHANGED Viewed

@@ -45,5 +45,7 @@ export declare class SekiCommand {
     private updateHighlight;
     private getContext;
     private updateContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/context-menu/seki-context-menu-content.d.ts CHANGED Viewed

@@ -35,5 +35,7 @@ export declare class SekiContextMenuContent {
     handleKeyDown(event: KeyboardEvent): void;
     private focusItem;
     private updatePosition;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/context-menu/seki-context-menu-trigger.d.ts CHANGED Viewed

@@ -6,6 +6,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @slot - The content that triggers the context menu
  */
 export declare class SekiContextMenuTrigger {
+    el: HTMLElement;
     /**
      * Whether the trigger is disabled
      */
@@ -48,6 +49,7 @@ export declare class SekiContextMenuTrigger {
      * Cancel the long-press timer
      */
     private cancelLongPress;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/context-menu/seki-context-menu.d.ts CHANGED Viewed

@@ -76,6 +76,7 @@ export declare class SekiContextMenu {
     private getContext;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/data-table/seki-data-table.d.ts CHANGED Viewed

@@ -69,6 +69,7 @@ export declare class SekiDataTable {
     private resizeObserver?;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     columnsChanged(): void;
     pageSizeChanged(newValue: number): void;

package/dist/types/components/date-picker/seki-date-picker.d.ts CHANGED Viewed

@@ -105,5 +105,7 @@ export declare class SekiDatePicker {
      * Toggle the date picker popover
      */
     toggle(): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/dialog/seki-dialog-close.d.ts CHANGED Viewed

@@ -7,7 +7,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @part close - The close button
  */
 export declare class SekiDialogClose {
+    el: HTMLElement;
     closeDialog: EventEmitter<void>;
     handleClick(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/dialog/seki-dialog-content.d.ts CHANGED Viewed

@@ -21,5 +21,7 @@ export declare class SekiDialogContent {
     componentDidRender(): void;
     componentDidLoad(): void;
     handleKeyDown(event: KeyboardEvent): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/dialog/seki-dialog-description.d.ts CHANGED Viewed

@@ -8,5 +8,7 @@
 export declare class SekiDialogDescription {
     el: HTMLElement;
     private getContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/dialog/seki-dialog-footer.d.ts CHANGED Viewed

@@ -6,5 +6,8 @@
  * @part footer - The footer container
  */
 export declare class SekiDialogFooter {
+    el: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/dialog/seki-dialog-header.d.ts CHANGED Viewed

@@ -6,5 +6,8 @@
  * @part header - The header container
  */
 export declare class SekiDialogHeader {
+    el: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/dialog/seki-dialog-overlay.d.ts CHANGED Viewed

@@ -16,5 +16,7 @@ export declare class SekiDialogOverlay {
     componentWillRender(): void;
     componentDidLoad(): void;
     private handleClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }