kenikool-ui 1.0.0

package/dist/types/components/navigation/navbar.stories.d.ts

@@ -0,0 +1,37 @@
+import type { StoryObj } from '@storybook/web-components';
+import './navbar';
+declare const meta: {
+    title: string;
+    component: string;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        brand: {
+            control: string;
+            description: string;
+        };
+        sticky: {
+            control: string;
+            description: string;
+        };
+        dark: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithBrand: Story;
+export declare const Dark: Story;
+export declare const Sticky: Story;
+export declare const ManyItems: Story;
+export declare const WithButtons: Story;
+export declare const Responsive: Story;
+//# sourceMappingURL=navbar.stories.d.ts.map

package/dist/types/components/navigation/navbar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,UAAU,CAAC;AAElB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAyBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAclB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAkCpB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAezB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAoBxB,CAAC"}

package/dist/types/components/navigation/sidebar.d.ts

@@ -0,0 +1,72 @@
+import { BaseComponent } from '../../core/base-component.js';
+import type { AccessibilityConfig } from '../../types/index.js';
+import { KSidebarProps } from '../../types/components.js';
+/**
+ * KSidebar - Responsive sidebar navigation component
+ *
+ * Features:
+ * - Overlay and push modes
+ * - Keyboard navigation support
+ * - Focus trap when open
+ * - Accessibility with ARIA attributes
+ * - Theme integration
+ * - Mobile-first responsive design
+ *
+ * @example
+ * ```html
+ * <k-sidebar mode="overlay" position="left">
+ *   <k-sidebar-header>Navigation</k-sidebar-header>
+ *   <k-sidebar-nav>
+ *     <k-sidebar-item href="/dashboard">Dashboard</k-sidebar-item>
+ *     <k-sidebar-item href="/settings">Settings</k-sidebar-item>
+ *   </k-sidebar-nav>
+ * </k-sidebar>
+ * ```
+ */
+export declare class KSidebar extends BaseComponent implements KSidebarProps {
+    private sidebar;
+    private backdropElement;
+    private content;
+    private closeButton;
+    private focusTrap;
+    private previousFocus;
+    static get observedAttributes(): string[];
+    get open(): boolean;
+    set open(value: boolean);
+    get mode(): KSidebarProps['mode'];
+    set mode(value: KSidebarProps['mode']);
+    get position(): KSidebarProps['position'];
+    set position(value: KSidebarProps['position']);
+    get width(): KSidebarProps['width'];
+    set width(value: KSidebarProps['width']);
+    get variant(): KSidebarProps['variant'];
+    set variant(value: KSidebarProps['variant']);
+    get closable(): boolean;
+    set closable(value: boolean);
+    get backdrop(): boolean;
+    set backdrop(value: boolean);
+    render(): void;
+    private getTransformValue;
+    private getWidthValue;
+    private setupEventListeners;
+    private handleTabNavigation;
+    private getFocusableElements;
+    private focusNext;
+    private focusPrevious;
+    private focusFirst;
+    private focusLast;
+    private updateFocusManagement;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    getAccessibilityConfig(): AccessibilityConfig;
+    getDefaultStyles(): CSSStyleSheet;
+    protected onAttributeChange(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-sidebar': KSidebar;
+    }
+}
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/types/components/navigation/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAM1D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,QAAS,SAAQ,aAAc,YAAW,aAAa;IAClE,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,aAAa,CAAwB;IAE7C,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAWjD;IAGD,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAMtB;IAED,IAAI,IAAI,IAAI,aAAa,CAAC,MAAM,CAAC,CAEhC;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,EAMpC;IAED,IAAI,QAAQ,IAAI,aAAa,CAAC,UAAU,CAAC,CAIxC;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,EAM5C;IAED,IAAI,KAAK,IAAI,aAAa,CAAC,OAAO,CAAC,CAElC;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,EAMtC;IAED,IAAI,OAAO,IAAI,aAAa,CAAC,SAAS,CAAC,CAItC;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,EAM1C;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAM1B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAM1B;IAEe,MAAM,IAAI,IAAI;IAiN9B,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,mBAAmB;IAsC3B,OAAO,CAAC,mBAAmB;IAsB3B,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,qBAAqB;IA4BtB,IAAI,IAAI,IAAI;IAcZ,IAAI,IAAI,IAAI;IAiBZ,MAAM,IAAI,IAAI;IAQd,sBAAsB,IAAI,mBAAmB;IAgB7C,gBAAgB,IAAI,aAAa;cAcrB,iBAAiB,CAClC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,GACtB,IAAI;IAoBE,oBAAoB,IAAI,IAAI;CAOtC;AAOD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/types/components/navigation/sidebar.stories.d.ts

@@ -0,0 +1,43 @@
+import type { StoryObj } from '@storybook/web-components';
+import './sidebar';
+declare const meta: {
+    title: string;
+    component: string;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        mode: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        position: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        open: {
+            control: string;
+            description: string;
+        };
+        width: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Overlay: Story;
+export declare const Push: Story;
+export declare const Right: Story;
+export declare const Closed: Story;
+export declare const WithHeader: Story;
+export declare const WithFooter: Story;
+//# sourceMappingURL=sidebar.stories.d.ts.map

package/dist/types/components/navigation/sidebar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,WAAW,CAAC;AAEnB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA+BrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA+BrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KA+BlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA0BnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KA0BpB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA4BxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAmCxB,CAAC"}

package/dist/types/components/typography/index.d.ts

@@ -0,0 +1,3 @@
+export * from './text';
+export { KText } from './text';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/typography/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/index.ts"],"names":[],"mappings":"AAEA,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC"}

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

@@ -0,0 +1,111 @@
+/**
+ * KText - Typography component with heading and body variants
+ *
+ * Provides semantic HTML output (h1-h6, p, span) with responsive typography scaling.
+ * Supports both heading variants (h1-h6) and body text variants with consistent
+ * styling across all themes.
+ *
+ * Features:
+ * - Semantic HTML output based on variant
+ * - Responsive typography scaling
+ * - Theme-aware styling
+ * - Accessibility support
+ * - Smart defaults for typography
+ *
+ * Requirements validated:
+ * - 6.3: Typography components with heading and body variants
+ * - 13.5: Responsive typography scaling
+ */
+import { BaseComponent } from '../../core/base-component.js';
+import type { AccessibilityConfig } from '../../types/index.js';
+export interface KTextProps {
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'caption' | 'overline' | 'subtitle1' | 'subtitle2';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+    weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'muted' | 'inverse';
+    align?: 'left' | 'center' | 'right' | 'justify';
+    truncate?: boolean;
+    responsive?: boolean;
+    styles?: string;
+}
+export declare class KText extends BaseComponent {
+    static get observedAttributes(): string[];
+    constructor();
+    /**
+     * Get the semantic HTML element based on variant
+     */
+    private getSemanticElement;
+    /**
+     * Get font size based on variant and size attribute
+     */
+    private getFontSize;
+    /**
+     * Get font weight based on variant and weight attribute
+     */
+    private getFontWeight;
+    /**
+     * Get line height based on variant
+     */
+    private getLineHeight;
+    /**
+     * Get text color based on color attribute
+     */
+    private getTextColor;
+    /**
+     * Get responsive CSS for typography scaling
+     */
+    private getResponsiveCSS;
+    /**
+     * Render the component
+     */
+    render(): void;
+    /**
+     * Get default styles (required by BaseComponent)
+     */
+    getDefaultStyles(): CSSStyleSheet;
+    /**
+     * Get accessibility configuration
+     */
+    getAccessibilityConfig(): AccessibilityConfig;
+    /**
+     * Handle attribute changes
+     */
+    protected onAttributeChange(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Set the text variant
+     */
+    setVariant(variant: KTextProps['variant']): void;
+    /**
+     * Set the text size
+     */
+    setSize(size: KTextProps['size']): void;
+    /**
+     * Set the font weight
+     */
+    setWeight(weight: KTextProps['weight']): void;
+    /**
+     * Set the text color
+     */
+    setColor(color: KTextProps['color']): void;
+    /**
+     * Set text alignment
+     */
+    setAlign(align: KTextProps['align']): void;
+    /**
+     * Enable or disable text truncation
+     */
+    setTruncate(truncate: boolean): void;
+    /**
+     * Enable or disable responsive typography
+     */
+    setResponsive(responsive: boolean): void;
+    get variant(): KTextProps['variant'];
+    get size(): KTextProps['size'];
+    get weight(): KTextProps['weight'];
+    get color(): KTextProps['color'];
+    get align(): KTextProps['align'];
+    get truncate(): boolean;
+    get responsive(): boolean;
+}
+export default KText;
+//# sourceMappingURL=text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,SAAS,GACT,UAAU,GACV,WAAW,GACX,WAAW,CAAC;IAChB,IAAI,CAAC,EACD,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IAC7D,KAAK,CAAC,EACF,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,OAAO,GACP,OAAO,GACP,SAAS,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,qBAAa,KAAM,SAAQ,aAAa;IAEtC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAWxC;;IAOD;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAsB1B;;OAEG;IACH,OAAO,CAAC,WAAW;IA8BnB;;OAEG;IACH,OAAO,CAAC,aAAa;IA8BrB;;OAEG;IACH,OAAO,CAAC,aAAa;IAuBrB;;OAEG;IACH,OAAO,CAAC,YAAY;IAoBpB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAoCxB;;OAEG;IACH,MAAM,IAAI,IAAI;IAuGd;;OAEG;IACH,gBAAgB,IAAI,aAAa;IAWjC;;OAEG;IACH,sBAAsB,IAAI,mBAAmB;IAiB7C;;OAEG;IACH,SAAS,CAAC,iBAAiB,CACzB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,GACtB,IAAI;IAqBP;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,GAAG,IAAI;IAQhD;;OAEG;IACH,OAAO,CAAC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,IAAI;IAQvC;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,IAAI;IAQ7C;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI;IAQ1C;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI;IAQ1C;;OAEG;IACH,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQpC;;OAEG;IACH,aAAa,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;IAUxC,IAAI,OAAO,IAAI,UAAU,CAAC,SAAS,CAAC,CAEnC;IAED,IAAI,IAAI,IAAI,UAAU,CAAC,MAAM,CAAC,CAE7B;IAED,IAAI,MAAM,IAAI,UAAU,CAAC,QAAQ,CAAC,CAEjC;IAED,IAAI,KAAK,IAAI,UAAU,CAAC,OAAO,CAAC,CAE/B;IAED,IAAI,KAAK,IAAI,UAAU,CAAC,OAAO,CAAC,CAE/B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,UAAU,IAAI,OAAO,CAExB;CACF;AAOD,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,48 @@
+import type { StoryObj } from '@storybook/web-components';
+import './text';
+declare const meta: {
+    title: string;
+    component: string;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        variant: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        color: {
+            control: string;
+            description: string;
+        };
+        align: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        weight: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Heading1: Story;
+export declare const Heading2: Story;
+export declare const Heading3: Story;
+export declare const Body: Story;
+export declare const Caption: Story;
+export declare const Code: Story;
+export declare const AllHeadings: Story;
+export declare const FontWeights: Story;
+export declare const TextAlignment: Story;
+export declare const WithColor: Story;
+export declare const Paragraph: Story;
+//# sourceMappingURL=text.stories.d.ts.map

package/dist/types/components/typography/text.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/text.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,QAAQ,CAAC;AAEhB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAGlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC"}

package/dist/types/core/base-component.d.ts

@@ -0,0 +1,178 @@
+/**
+ * BaseComponent - Abstract base class for all Kenikool UI Web Components
+ *
+ * Provides core functionality including:
+ * - Shadow DOM management
+ * - Lifecycle methods (connectedCallback, disconnectedCallback, attributeChangedCallback)
+ * - Theme system integration
+ * - Styles parsing and application
+ * - Smart defaults system
+ * - Accessibility features
+ * - Event handling and state management
+ *
+ * All k- prefixed components extend this base class.
+ */
+import type { StylesConfig, SmartDefaultsConfig, AccessibilityConfig, KeyboardConfig, ValidationResult } from '../types/index.js';
+export declare abstract class BaseComponent extends HTMLElement {
+    protected shadow: ShadowRoot;
+    protected theme: string;
+    protected styles: StylesConfig;
+    protected smartDefaults: SmartDefaultsConfig;
+    protected _isConnected: boolean;
+    protected isRendered: boolean;
+    static get observedAttributes(): string[];
+    constructor();
+    /**
+     * Web Components lifecycle - called when element is added to DOM
+     */
+    connectedCallback(): void;
+    /**
+     * Web Components lifecycle - called when element is removed from DOM
+     */
+    disconnectedCallback(): void;
+    /**
+     * Web Components lifecycle - called when observed attributes change
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Handle attribute changes and update component accordingly
+     */
+    protected handleAttributeChange(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Get current theme from element or parent elements
+     */
+    protected getTheme(): string;
+    /**
+     * Parse styles attribute into StylesConfig object
+     */
+    protected parseStyles(): StylesConfig;
+    /**
+     * Generate smart defaults configuration
+     */
+    protected generateSmartDefaults(): SmartDefaultsConfig;
+    /**
+     * Apply smart defaults to the component
+     */
+    protected applySmartDefaults(): void;
+    /**
+     * Apply accessibility features to the component
+     */
+    protected applyAccessibility(): void;
+    /**
+     * Fallback basic accessibility implementation
+     */
+    private applyBasicAccessibility;
+    /**
+     * Add keyboard event handling
+     */
+    protected addKeyboardSupport(config: KeyboardConfig): void;
+    /**
+     * Announce a message to screen readers
+     */
+    protected announce(message: string, priority?: 'polite' | 'assertive'): void;
+    /**
+     * Update ARIA expanded state
+     */
+    protected setExpanded(expanded: boolean): void;
+    /**
+     * Update ARIA selected state
+     */
+    protected setSelected(selected: boolean): void;
+    /**
+     * Update ARIA pressed state for toggle buttons
+     */
+    protected setPressed(pressed: boolean): void;
+    /**
+     * Update ARIA disabled state
+     */
+    protected setDisabled(disabled: boolean): void;
+    /**
+     * Generate a unique ID for accessibility relationships
+     */
+    protected generateAccessibilityId(prefix?: string): string;
+    /**
+     * Attach component-specific event listeners
+     */
+    protected attachEventListeners(): void;
+    /**
+     * Observe theme changes on parent elements
+     */
+    protected observeThemeChanges(): void;
+    /**
+     * Create a debounced theme update function (300ms debounce)
+     */
+    private createDebouncedThemeUpdate;
+    /**
+     * Update component when theme changes
+     */
+    protected updateTheme(): void;
+    /**
+     * Update component when styles change
+     */
+    protected updateStyles(): void;
+    /**
+     * Generate CSS classes from styles configuration
+     */
+    protected generateStyleClasses(): string;
+    /**
+     * Get theme CSS variables for current theme
+     */
+    protected getThemeVariables(): Record<string, string>;
+    /**
+     * Clean up resources when component is disconnected
+     */
+    protected cleanup(): void;
+    /**
+     * Handle component-specific attribute changes
+     * Override in subclasses to handle custom attributes
+     */
+    protected onAttributeChange(_name: string, _oldValue: string | null, _newValue: string | null): void;
+    /**
+     * Emit a custom event from the component
+     */
+    protected emit(eventName: string, detail?: any): boolean;
+    /**
+     * Sanitize and validate attribute value before setting
+     */
+    protected setSecureAttribute(name: string, value: string): void;
+    /**
+     * Sanitize and validate HTML content
+     */
+    protected sanitizeHTMLContent(content: string): string;
+    /**
+     * Validate form input based on input type
+     */
+    protected validateFormInput(type: string, value: string): ValidationResult;
+    /**
+     * Apply secure defaults to the component
+     */
+    protected applySecurityDefaults(): void;
+    /**
+     * Check if a value is CSP compatible
+     */
+    protected isCSPCompatible(value: string): boolean;
+    /**
+     * Override setAttribute to add security validation
+     */
+    setAttribute(name: string, value: string): void;
+    /**
+     * Override setAttributeNS to add security validation
+     */
+    setAttributeNS(namespace: string | null, name: string, value: string): void;
+    /**
+     * Render the component's Shadow DOM content
+     * Must be implemented by each component
+     */
+    abstract render(): void;
+    /**
+     * Get default styles for the component
+     * Must be implemented by each component
+     */
+    abstract getDefaultStyles(): CSSStyleSheet;
+    /**
+     * Get accessibility configuration for the component
+     * Must be implemented by each component
+     */
+    abstract getAccessibilityConfig(): AccessibilityConfig;
+}
+//# sourceMappingURL=base-component.d.ts.map

package/dist/types/core/base-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-component.d.ts","sourceRoot":"","sources":["../../../src/core/base-component.ts"],"names":[],"mappings":"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"}

package/dist/types/core/base-component.example.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Example usage of BaseComponent
+ *
+ * This demonstrates how to create a custom Web Component
+ * by extending the BaseComponent class.
+ */
+import { BaseComponent } from './base-component.js';
+import type { AccessibilityConfig } from '../types/index.js';
+/**
+ * Example Button Component
+ *
+ * Usage:
+ * <k-example-button styles="large primary">Click me</k-example-button>
+ */
+export declare class ExampleButton extends BaseComponent {
+    static get observedAttributes(): string[];
+    render(): void;
+    getDefaultStyles(): CSSStyleSheet;
+    getAccessibilityConfig(): AccessibilityConfig;
+    click(): void;
+    focus(): void;
+    blur(): void;
+}
+//# sourceMappingURL=base-component.example.d.ts.map

package/dist/types/core/base-component.example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-component.example.d.ts","sourceRoot":"","sources":["../../../src/core/base-component.example.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D;;;;;GAKG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,MAAM,IAAI,IAAI;IAqGd,gBAAgB,IAAI,aAAa;IAUjC,sBAAsB,IAAI,mBAAmB;IAS7C,KAAK,IAAI,IAAI;IAKb,KAAK,IAAI,IAAI;IAKb,IAAI,IAAI,IAAI;CAIb"}

package/dist/types/core/registry.d.ts

@@ -0,0 +1,88 @@
+import type { ComponentDefinition } from '../types/index';
+/**
+ * ComponentRegistry manages the registration and lazy loading of Web Components
+ * Supports auto-definition when components are first used in the DOM
+ */
+export declare class ComponentRegistry {
+    private static components;
+    private static loaded;
+    private static observers;
+    private static dependencies;
+    private static loadingPromises;
+    private static globalObserver;
+    /**
+     * Register a component definition with optional lazy loading
+     */
+    static register(definition: ComponentDefinition): void;
+    /**
+     * Get a registered component definition
+     */
+    static get(tagName: string): ComponentDefinition | undefined;
+    /**
+     * Get all registered components
+     */
+    static getAll(): Map<string, ComponentDefinition>;
+    /**
+     * Check if a component is registered
+     */
+    static isRegistered(tagName: string): boolean;
+    /**
+     * Check if a component is loaded (defined in Custom Elements registry)
+     */
+    static isLoaded(tagName: string): boolean;
+    /**
+     * Unregister a component
+     */
+    static unregister(tagName: string): void;
+    /**
+     * Load a component and its dependencies
+     */
+    static load(tagName: string): Promise<void>;
+    /**
+     * Load all registered components
+     */
+    static loadAll(): Promise<void>;
+    /**
+     * Initialize the registry and set up global observers
+     */
+    static initialize(): void;
+    /**
+     * Define a component in the Custom Elements registry
+     */
+    private static defineComponent;
+    /**
+     * Load component with its dependencies in correct order
+     */
+    private static loadComponentWithDependencies;
+    /**
+     * Set up lazy loading for a component using MutationObserver
+     */
+    private static setupLazyLoading;
+    /**
+     * Set up global mutation observer for auto-loading any registered components
+     */
+    private static setupGlobalObserver;
+    /**
+     * Check if an element is a registered component and load it if needed
+     */
+    private static checkAndLoadElement;
+    /**
+     * Scan existing elements in the DOM and auto-load registered components
+     */
+    private static scanExistingElements;
+    /**
+     * Get registry statistics for debugging
+     */
+    static getStats(): {
+        registered: number;
+        loaded: number;
+        pending: number;
+        components: string[];
+        loadedComponents: string[];
+    };
+    /**
+     * Clear all registered components (for testing)
+     */
+    static clear(): void;
+}
+//# sourceMappingURL=registry.d.ts.map

package/dist/types/core/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../src/core/registry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE1D;;;GAGG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAAC,UAAU,CAA0C;IACnE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAqB;IAC1C,OAAO,CAAC,MAAM,CAAC,SAAS,CAAuC;IAC/D,OAAO,CAAC,MAAM,CAAC,YAAY,CAA+B;IAC1D,OAAO,CAAC,MAAM,CAAC,eAAe,CAAoC;IAClE,OAAO,CAAC,MAAM,CAAC,cAAc,CAAiC;IAE9D;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,UAAU,EAAE,mBAAmB,GAAG,IAAI;IAsBtD;;OAEG;IACH,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS;IAI5D;;OAEG;IACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAIjD;;OAEG;IACH,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;IAI7C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;IAIzC;;OAEG;IACH,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAcxC;;OAEG;WACU,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IA0BjD;;OAEG;WACU,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAOrC;;OAEG;IACH,MAAM,CAAC,UAAU,IAAI,IAAI;IAUzB;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,eAAe;IA2B9B;;OAEG;mBACkB,6BAA6B;IAelD;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IA0C/B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAyBlC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAelC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,oBAAoB;IAKnC;;OAEG;IACH,MAAM,CAAC,QAAQ,IAAI;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,EAAE,MAAM,EAAE,CAAC;QACrB,gBAAgB,EAAE,MAAM,EAAE,CAAC;KAC5B;IAUD;;OAEG;IACH,MAAM,CAAC,KAAK,IAAI,IAAI;CAiBrB"}