kenikool-ui 1.0.0

package/dist/types/utils/accessibility.d.ts

@@ -0,0 +1,345 @@
+/**
+ * Accessibility utilities for ARIA attributes, keyboard navigation, and screen reader support
+ *
+ * Provides comprehensive accessibility features including:
+ * - ARIA attribute management
+ * - Focus management and focus trapping
+ * - Keyboard navigation helpers
+ * - Screen reader announcements
+ * - Live region management
+ */
+import type { AccessibilityConfig, KeyboardConfig, FocusTrap } from '../types/index.js';
+export declare class AriaManager {
+    /**
+     * Apply ARIA attributes to an element based on configuration
+     */
+    static applyAriaAttributes(element: HTMLElement, config: AccessibilityConfig): void;
+    /**
+     * Update ARIA expanded state
+     */
+    static setExpanded(element: HTMLElement, expanded: boolean): void;
+    /**
+     * Update ARIA selected state
+     */
+    static setSelected(element: HTMLElement, selected: boolean): void;
+    /**
+     * Update ARIA pressed state for toggle buttons
+     */
+    static setPressed(element: HTMLElement, pressed: boolean): void;
+    /**
+     * Update ARIA checked state for checkboxes and radio buttons
+     */
+    static setChecked(element: HTMLElement, checked: boolean | 'mixed'): void;
+    /**
+     * Update ARIA disabled state
+     */
+    static setDisabled(element: HTMLElement, disabled: boolean): void;
+    /**
+     * Set ARIA describedby relationship
+     */
+    static setDescribedBy(element: HTMLElement, describedByIds: string | string[]): void;
+    /**
+     * Set ARIA labelledby relationship
+     */
+    static setLabelledBy(element: HTMLElement, labelledByIds: string | string[]): void;
+    /**
+     * Set ARIA controls relationship
+     */
+    static setControls(element: HTMLElement, controlsIds: string | string[]): void;
+    /**
+     * Set ARIA owns relationship
+     */
+    static setOwns(element: HTMLElement, ownsIds: string | string[]): void;
+}
+export declare class FocusManager {
+    private static focusableSelectors;
+    private static focusableCache;
+    private static cacheTimeout;
+    private static domObserver;
+    /**
+     * Get all focusable elements within a container
+     * Results are cached for 5 seconds to improve performance
+     */
+    static getFocusableElements(container: Element): HTMLElement[];
+    /**
+     * Set up mutation observer to invalidate cache on DOM changes
+     */
+    private static setupCacheInvalidation;
+    /**
+     * Manually invalidate the cache
+     */
+    static invalidateCache(): void;
+    /**
+     * Disconnect the cache invalidation observer
+     */
+    static disconnectCacheObserver(): void;
+    /**
+     * Get the first focusable element in a container
+     */
+    static getFirstFocusable(container: Element): HTMLElement | null;
+    /**
+     * Get the last focusable element in a container
+     */
+    static getLastFocusable(container: Element): HTMLElement | null;
+    /**
+     * Focus the first focusable element in a container
+     */
+    static focusFirst(container: Element): boolean;
+    /**
+     * Focus the last focusable element in a container
+     */
+    static focusLast(container: Element): boolean;
+    /**
+     * Move focus to the next focusable element
+     */
+    static focusNext(container: Element, currentElement?: Element): boolean;
+    /**
+     * Move focus to the previous focusable element
+     */
+    static focusPrevious(container: Element, currentElement?: Element): boolean;
+    /**
+     * Check if an element is focusable
+     */
+    static isFocusable(element: Element): boolean;
+    /**
+     * Save the currently focused element
+     */
+    static saveFocus(): Element | null;
+    /**
+     * Restore focus to a previously saved element
+     */
+    static restoreFocus(element: Element | null): boolean;
+}
+export declare class FocusTrapImpl implements FocusTrap {
+    private container;
+    private previouslyFocused;
+    private isActive;
+    private isPaused;
+    private keydownHandler;
+    constructor(container: Element);
+    activate(): void;
+    deactivate(): void;
+    pause(): void;
+    unpause(): void;
+    private handleKeydown;
+}
+export declare class KeyboardNavigation {
+    /**
+     * Standard keyboard navigation keys
+     */
+    static readonly Keys: {
+        readonly ENTER: "Enter";
+        readonly SPACE: " ";
+        readonly TAB: "Tab";
+        readonly ESCAPE: "Escape";
+        readonly ARROW_UP: "ArrowUp";
+        readonly ARROW_DOWN: "ArrowDown";
+        readonly ARROW_LEFT: "ArrowLeft";
+        readonly ARROW_RIGHT: "ArrowRight";
+        readonly HOME: "Home";
+        readonly END: "End";
+        readonly PAGE_UP: "PageUp";
+        readonly PAGE_DOWN: "PageDown";
+    };
+    /**
+     * Create a keyboard event handler for common navigation patterns
+     */
+    static createHandler(config: {
+        onEnter?: (event: KeyboardEvent) => void;
+        onSpace?: (event: KeyboardEvent) => void;
+        onEscape?: (event: KeyboardEvent) => void;
+        onArrowUp?: (event: KeyboardEvent) => void;
+        onArrowDown?: (event: KeyboardEvent) => void;
+        onArrowLeft?: (event: KeyboardEvent) => void;
+        onArrowRight?: (event: KeyboardEvent) => void;
+        onHome?: (event: KeyboardEvent) => void;
+        onEnd?: (event: KeyboardEvent) => void;
+        preventDefault?: string[];
+        stopPropagation?: string[];
+    }): (event: KeyboardEvent) => void;
+    /**
+     * Handle arrow key navigation in a list or menu
+     */
+    static handleListNavigation(event: KeyboardEvent, container: Element, options?: {
+        orientation?: 'vertical' | 'horizontal' | 'both';
+        wrap?: boolean;
+        activateOnFocus?: boolean;
+    }): boolean;
+}
+export declare class ScreenReaderAnnouncer {
+    private static liveRegion;
+    private static politeRegion;
+    private static assertiveRegion;
+    /**
+     * Initialize live regions for screen reader announcements
+     */
+    static initialize(): void;
+    /**
+     * Announce a message to screen readers (polite)
+     */
+    static announce(message: string, priority?: 'polite' | 'assertive'): void;
+    /**
+     * Announce an urgent message to screen readers (assertive)
+     */
+    static announceUrgent(message: string): void;
+    /**
+     * Announce status changes (e.g., loading, success, error)
+     */
+    static announceStatus(status: string, message?: string): void;
+    /**
+     * Announce navigation changes
+     */
+    static announceNavigation(location: string): void;
+    /**
+     * Announce form validation errors
+     */
+    static announceError(error: string): void;
+    /**
+     * Announce successful actions
+     */
+    static announceSuccess(message: string): void;
+    /**
+     * Clear all live regions
+     */
+    static clear(): void;
+}
+/**
+ * AccessibilityUtils provides comprehensive accessibility features for Web Components
+ *
+ * Features:
+ * - ARIA attribute management
+ * - Keyboard navigation support
+ * - Focus management and focus traps
+ * - Screen reader announcements
+ * - Accessibility feature initialization
+ *
+ * @example
+ * // Apply accessibility features to a component
+ * AccessibilityUtils.applyAccessibilityFeatures(element, {
+ *   role: 'button',
+ *   ariaLabel: 'Submit form',
+ *   focusable: true,
+ *   keyboardSupport: {
+ *     keys: ['Enter', ' '],
+ *     handler: (event, component) => {
+ *       component.click();
+ *     }
+ *   }
+ * });
+ *
+ * @example
+ * // Create a focus trap for a modal
+ * const focusTrap = AccessibilityUtils.createFocusTrap(modalElement);
+ * focusTrap.activate();
+ * // ... modal is open
+ * focusTrap.deactivate();
+ */
+export declare class AccessibilityUtils {
+    /**
+     * Apply comprehensive accessibility features to a component
+     *
+     * @param element - The HTML element to apply accessibility features to
+     * @param config - Accessibility configuration object
+     *
+     * @example
+     * AccessibilityUtils.applyAccessibilityFeatures(button, {
+     *   role: 'button',
+     *   ariaLabel: 'Click me',
+     *   focusable: true
+     * });
+     */
+    /**
+     * Apply comprehensive accessibility features to a component
+     */
+    static applyAccessibilityFeatures(element: HTMLElement, config: AccessibilityConfig): void;
+    /**
+     * Add keyboard event handling to an element
+     *
+     * @param element - The HTML element to add keyboard support to
+     * @param config - Keyboard configuration with keys to listen for and handler function
+     *
+     * @example
+     * AccessibilityUtils.addKeyboardSupport(button, {
+     *   keys: ['Enter', ' '],
+     *   handler: (event, element) => {
+     *     element.click();
+     *   },
+     *   preventDefault: true
+     * });
+     */
+    static addKeyboardSupport(element: HTMLElement, config: KeyboardConfig): void;
+    /**
+     * Create a focus trap for modal dialogs and dropdowns
+     *
+     * A focus trap ensures that keyboard focus stays within a container,
+     * preventing users from tabbing outside of modals or dropdowns.
+     *
+     * @param container - The container element to trap focus within
+     * @returns A FocusTrap object with activate/deactivate methods
+     *
+     * @example
+     * const focusTrap = AccessibilityUtils.createFocusTrap(modalElement);
+     * focusTrap.activate();
+     * // User can only tab within the modal
+     * focusTrap.deactivate();
+     */
+    static createFocusTrap(container: Element): FocusTrap;
+    /**
+     * Generate a unique ID for accessibility relationships
+     *
+     * Used for aria-labelledby, aria-describedby, and other ARIA relationships
+     *
+     * @param prefix - Optional prefix for the ID (default: 'kn')
+     * @returns A unique ID string
+     *
+     * @example
+     * const id = AccessibilityUtils.generateId('label');
+     * // Returns something like 'label-a1b2c3d4e'
+     */
+    static generateId(prefix?: string): string;
+    /**
+     * Check if reduced motion is preferred
+     *
+     * Respects the user's prefers-reduced-motion media query preference
+     *
+     * @returns true if the user prefers reduced motion, false otherwise
+     *
+     * @example
+     * if (AccessibilityUtils.prefersReducedMotion()) {
+     *   // Skip animations
+     * }
+     */
+    static prefersReducedMotion(): boolean;
+    /**
+     * Check if high contrast is preferred
+     */
+    static prefersHighContrast(): boolean;
+    /**
+     * Initialize accessibility features globally
+     *
+     * Sets up:
+     * - Screen reader announcements
+     * - Global keyboard event handling (Escape key for modals/dropdowns)
+     * - Accessibility utilities
+     *
+     * Should be called once when the application starts
+     *
+     * @example
+     * // In your app initialization
+     * AccessibilityUtils.initialize();
+     */
+    static initialize(): void;
+    /**
+     * Clean up accessibility resources
+     *
+     * Disconnects observers and clears screen reader announcements.
+     * Should be called when the application is shutting down or when
+     * accessibility features are no longer needed.
+     *
+     * @example
+     * // In your app cleanup
+     * AccessibilityUtils.cleanup();
+     */
+    static cleanup(): void;
+}
+//# sourceMappingURL=accessibility.d.ts.map

package/dist/types/utils/accessibility.d.ts.map

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

package/dist/types/utils/accessibility.example.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Examples demonstrating how to use the accessibility utilities
+ * These examples show common patterns for implementing accessible components
+ */
+import { BaseComponent } from '../core/base-component.js';
+import type { AccessibilityConfig } from '../types/index.js';
+declare class ExampleButton extends BaseComponent {
+    static get observedAttributes(): string[];
+    render(): void;
+    getDefaultStyles(): CSSStyleSheet;
+    getAccessibilityConfig(): AccessibilityConfig;
+}
+declare class ExampleModal extends BaseComponent {
+    private focusTrap;
+    private previouslyFocused;
+    static get observedAttributes(): string[];
+    render(): void;
+    private openModal;
+    private closeModal;
+    close(): void;
+    getDefaultStyles(): CSSStyleSheet;
+    getAccessibilityConfig(): AccessibilityConfig;
+}
+declare class ExampleDropdown extends BaseComponent {
+    private isOpen;
+    private selectedIndex;
+    private options;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    private parseOptions;
+    render(): void;
+    private setupEventListeners;
+    private toggle;
+    private open;
+    private close;
+    private selectOption;
+    getDefaultStyles(): CSSStyleSheet;
+    getAccessibilityConfig(): AccessibilityConfig;
+}
+declare class ExampleForm extends BaseComponent {
+    private validationMessages;
+    render(): void;
+    private setupFormValidation;
+    private validateEmail;
+    private validatePassword;
+    getDefaultStyles(): CSSStyleSheet;
+    getAccessibilityConfig(): AccessibilityConfig;
+}
+export { ExampleButton, ExampleModal, ExampleDropdown, ExampleForm };
+//# sourceMappingURL=accessibility.example.d.ts.map

package/dist/types/utils/accessibility.example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility.example.d.ts","sourceRoot":"","sources":["../../../src/utils/accessibility.example.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAQ1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAM7D,cAAM,aAAc,SAAQ,aAAa;IACvC,MAAM,KAAK,kBAAkB,aAE5B;IAED,MAAM,IAAI,IAAI;IA8Dd,gBAAgB,IAAI,aAAa;IAIjC,sBAAsB,IAAI,mBAAmB;CAe9C;AAMD,cAAM,YAAa,SAAQ,aAAa;IACtC,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,MAAM,KAAK,kBAAkB,aAE5B;IAED,MAAM,IAAI,IAAI;IAyEd,OAAO,CAAC,SAAS;IAuBjB,OAAO,CAAC,UAAU;IAkBlB,KAAK,IAAI,IAAI;IAKb,gBAAgB,IAAI,aAAa;IAIjC,sBAAsB,IAAI,mBAAmB;CAY9C;AAMD,cAAM,eAAgB,SAAQ,aAAa;IACzC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,OAAO,CAAgB;IAE/B,MAAM,KAAK,kBAAkB,aAE5B;IAED,iBAAiB,IAAI,IAAI;IAOzB,OAAO,CAAC,YAAY;IAQpB,MAAM,IAAI,IAAI;IAwGd,OAAO,CAAC,mBAAmB;IAmC3B,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,IAAI;IAeZ,OAAO,CAAC,KAAK;IAYb,OAAO,CAAC,YAAY;IAuBpB,gBAAgB,IAAI,aAAa;IAIjC,sBAAsB,IAAI,mBAAmB;CA8B9C;AAMD,cAAM,WAAY,SAAQ,aAAa;IACrC,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,MAAM,IAAI,IAAI;IAyFd,OAAO,CAAC,mBAAmB;IA8B3B,OAAO,CAAC,aAAa;IA6BrB,OAAO,CAAC,gBAAgB;IA6BxB,gBAAgB,IAAI,aAAa;IAIjC,sBAAsB,IAAI,mBAAmB;CAM9C;AAUD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC"}

package/dist/types/utils/css-variables.d.ts

@@ -0,0 +1,278 @@
+/**
+ * CSS Variable Naming Utilities for Kenikool UI
+ *
+ * This module provides utilities for generating and managing CSS variables
+ * according to Kenikool UI naming conventions.
+ *
+ * All CSS variables use the --kn- prefix for namespacing.
+ *
+ * Requirements: 3.3
+ */
+import type { ThemeConfiguration, ColorPalette, CSSVariableName, CSSVariableMap } from '../types/theme-config';
+/**
+ * Generates a CSS variable name with the Kenikool UI namespace
+ */
+export declare function createCSSVariable<T extends string>(name: T): CSSVariableName<T>;
+/**
+ * Generates CSS variable names for a color palette
+ */
+export declare function createColorPaletteVariables(paletteName: string): CSSVariableMap<ColorPalette>;
+/**
+ * Standard CSS variable names for color palettes
+ */
+export declare const COLOR_PALETTE_VARIABLES: {
+    readonly primary: CSSVariableMap<ColorPalette>;
+    readonly secondary: CSSVariableMap<ColorPalette>;
+    readonly success: CSSVariableMap<ColorPalette>;
+    readonly warning: CSSVariableMap<ColorPalette>;
+    readonly error: CSSVariableMap<ColorPalette>;
+    readonly info: CSSVariableMap<ColorPalette>;
+    readonly neutral: CSSVariableMap<ColorPalette>;
+};
+/**
+ * Surface color CSS variable names
+ */
+export declare const SURFACE_COLOR_VARIABLES: {
+    readonly background: "--kn-surface-background";
+    readonly surface: "--kn-surface-surface";
+    readonly surfaceVariant: "--kn-surface-variant";
+    readonly surfaceElevated: "--kn-surface-elevated";
+    readonly surfaceHover: "--kn-surface-hover";
+    readonly surfaceActive: "--kn-surface-active";
+    readonly surfaceDisabled: "--kn-surface-disabled";
+};
+/**
+ * Text color CSS variable names
+ */
+export declare const TEXT_COLOR_VARIABLES: {
+    readonly primary: "--kn-text-primary";
+    readonly secondary: "--kn-text-secondary";
+    readonly muted: "--kn-text-muted";
+    readonly inverse: "--kn-text-inverse";
+    readonly onPrimary: "--kn-text-on-primary";
+    readonly onSecondary: "--kn-text-on-secondary";
+    readonly onSurface: "--kn-text-on-surface";
+    readonly onBackground: "--kn-text-on-background";
+    readonly disabled: "--kn-text-disabled";
+};
+/**
+ * Border color CSS variable names
+ */
+export declare const BORDER_COLOR_VARIABLES: {
+    readonly default: "--kn-border-default";
+    readonly subtle: "--kn-border-subtle";
+    readonly muted: "--kn-border-muted";
+    readonly hover: "--kn-border-hover";
+    readonly focus: "--kn-border-focus";
+    readonly active: "--kn-border-active";
+    readonly error: "--kn-border-error";
+    readonly success: "--kn-border-success";
+    readonly warning: "--kn-border-warning";
+};
+/**
+ * State color CSS variable names
+ */
+export declare const STATE_COLOR_VARIABLES: {
+    readonly hover: "--kn-state-hover";
+    readonly focus: "--kn-state-focus";
+    readonly active: "--kn-state-active";
+    readonly disabled: "--kn-state-disabled";
+    readonly selected: "--kn-state-selected";
+    readonly pressed: "--kn-state-pressed";
+};
+/**
+ * Overlay color CSS variable names
+ */
+export declare const OVERLAY_COLOR_VARIABLES: {
+    readonly backdrop: "--kn-overlay-backdrop";
+    readonly dropdown: "--kn-overlay-dropdown";
+    readonly tooltip: "--kn-overlay-tooltip";
+    readonly popover: "--kn-overlay-popover";
+    readonly loading: "--kn-overlay-loading";
+};
+/**
+ * Typography CSS variable names
+ */
+export declare const TYPOGRAPHY_VARIABLES: {
+    readonly fontFamily: {
+        readonly sans: "--kn-font-sans";
+        readonly serif: "--kn-font-serif";
+        readonly mono: "--kn-font-mono";
+        readonly display: "--kn-font-display";
+    };
+    readonly fontSize: {
+        readonly xs: "--kn-text-xs";
+        readonly sm: "--kn-text-sm";
+        readonly base: "--kn-text-base";
+        readonly lg: "--kn-text-lg";
+        readonly xl: "--kn-text-xl";
+        readonly '2xl': "--kn-text-2xl";
+        readonly '3xl': "--kn-text-3xl";
+        readonly '4xl': "--kn-text-4xl";
+        readonly '5xl': "--kn-text-5xl";
+        readonly '6xl': "--kn-text-6xl";
+        readonly '7xl': "--kn-text-7xl";
+        readonly '8xl': "--kn-text-8xl";
+        readonly '9xl': "--kn-text-9xl";
+    };
+    readonly fontWeight: {
+        readonly thin: "--kn-font-thin";
+        readonly extralight: "--kn-font-extralight";
+        readonly light: "--kn-font-light";
+        readonly normal: "--kn-font-normal";
+        readonly medium: "--kn-font-medium";
+        readonly semibold: "--kn-font-semibold";
+        readonly bold: "--kn-font-bold";
+        readonly extrabold: "--kn-font-extrabold";
+        readonly black: "--kn-font-black";
+    };
+    readonly lineHeight: {
+        readonly none: "--kn-leading-none";
+        readonly tight: "--kn-leading-tight";
+        readonly snug: "--kn-leading-snug";
+        readonly normal: "--kn-leading-normal";
+        readonly relaxed: "--kn-leading-relaxed";
+        readonly loose: "--kn-leading-loose";
+    };
+    readonly letterSpacing: {
+        readonly tighter: "--kn-tracking-tighter";
+        readonly tight: "--kn-tracking-tight";
+        readonly normal: "--kn-tracking-normal";
+        readonly wide: "--kn-tracking-wide";
+        readonly wider: "--kn-tracking-wider";
+        readonly widest: "--kn-tracking-widest";
+    };
+};
+/**
+ * Spacing CSS variable names
+ */
+export declare const SPACING_VARIABLES: {
+    readonly 0: "--kn-space-0";
+    readonly px: "--kn-space-px";
+    readonly 0.5: "--kn-space-0.5";
+    readonly 1: "--kn-space-1";
+    readonly 1.5: "--kn-space-1.5";
+    readonly 2: "--kn-space-2";
+    readonly 2.5: "--kn-space-2.5";
+    readonly 3: "--kn-space-3";
+    readonly 3.5: "--kn-space-3.5";
+    readonly 4: "--kn-space-4";
+    readonly 5: "--kn-space-5";
+    readonly 6: "--kn-space-6";
+    readonly 7: "--kn-space-7";
+    readonly 8: "--kn-space-8";
+    readonly 9: "--kn-space-9";
+    readonly 10: "--kn-space-10";
+    readonly 11: "--kn-space-11";
+    readonly 12: "--kn-space-12";
+    readonly 14: "--kn-space-14";
+    readonly 16: "--kn-space-16";
+    readonly 20: "--kn-space-20";
+    readonly 24: "--kn-space-24";
+    readonly 28: "--kn-space-28";
+    readonly 32: "--kn-space-32";
+    readonly 36: "--kn-space-36";
+    readonly 40: "--kn-space-40";
+    readonly 44: "--kn-space-44";
+    readonly 48: "--kn-space-48";
+    readonly 52: "--kn-space-52";
+    readonly 56: "--kn-space-56";
+    readonly 60: "--kn-space-60";
+    readonly 64: "--kn-space-64";
+    readonly 72: "--kn-space-72";
+    readonly 80: "--kn-space-80";
+    readonly 96: "--kn-space-96";
+};
+/**
+ * Border radius CSS variable names
+ */
+export declare const BORDER_RADIUS_VARIABLES: {
+    readonly none: "--kn-radius-none";
+    readonly sm: "--kn-radius-sm";
+    readonly base: "--kn-radius-base";
+    readonly md: "--kn-radius-md";
+    readonly lg: "--kn-radius-lg";
+    readonly xl: "--kn-radius-xl";
+    readonly '2xl': "--kn-radius-2xl";
+    readonly '3xl': "--kn-radius-3xl";
+    readonly full: "--kn-radius-full";
+};
+/**
+ * Shadow CSS variable names
+ */
+export declare const SHADOW_VARIABLES: {
+    readonly none: "--kn-shadow-none";
+    readonly sm: "--kn-shadow-sm";
+    readonly base: "--kn-shadow-base";
+    readonly md: "--kn-shadow-md";
+    readonly lg: "--kn-shadow-lg";
+    readonly xl: "--kn-shadow-xl";
+    readonly '2xl': "--kn-shadow-2xl";
+    readonly inner: "--kn-shadow-inner";
+};
+/**
+ * Transition CSS variable names
+ */
+export declare const TRANSITION_VARIABLES: {
+    readonly none: "--kn-transition-none";
+    readonly all: "--kn-transition-all";
+    readonly fast: "--kn-transition-fast";
+    readonly normal: "--kn-transition-normal";
+    readonly slow: "--kn-transition-slow";
+    readonly colors: "--kn-transition-colors";
+    readonly opacity: "--kn-transition-opacity";
+    readonly shadow: "--kn-transition-shadow";
+    readonly transform: "--kn-transition-transform";
+};
+/**
+ * Breakpoint CSS variable names
+ */
+export declare const BREAKPOINT_VARIABLES: {
+    readonly xs: "--kn-screen-xs";
+    readonly sm: "--kn-screen-sm";
+    readonly md: "--kn-screen-md";
+    readonly lg: "--kn-screen-lg";
+    readonly xl: "--kn-screen-xl";
+    readonly '2xl': "--kn-screen-2xl";
+};
+/**
+ * Generates CSS variables from a theme configuration
+ */
+export declare function generateCSSVariables(theme: ThemeConfiguration): Record<string, string>;
+/**
+ * Generates CSS string from CSS variables
+ */
+export declare function generateCSSString(variables: Record<string, string>, selector?: string): string;
+/**
+ * Generates theme-specific CSS string
+ */
+export declare function generateThemeCSS(theme: ThemeConfiguration): string;
+/**
+ * Gets a CSS variable value from the document
+ */
+export declare function getCSSVariableValue(variableName: string, element?: Element): string;
+/**
+ * Sets a CSS variable value on an element
+ */
+export declare function setCSSVariableValue(variableName: string, value: string, element?: Element): void;
+/**
+ * Removes a CSS variable from an element
+ */
+export declare function removeCSSVariable(variableName: string, element?: Element): void;
+/**
+ * Checks if a CSS variable is defined
+ */
+export declare function isCSSVariableDefined(variableName: string, element?: Element): boolean;
+/**
+ * Gets all CSS variables with a specific prefix
+ */
+export declare function getCSSVariablesWithPrefix(prefix: string, element?: Element): Record<string, string>;
+/**
+ * Validates CSS variable name format
+ */
+export declare function isValidCSSVariableName(name: string): boolean;
+/**
+ * Normalizes CSS variable name to Kenikool UI format
+ */
+export declare function normalizeCSSVariableName(name: string): string;
+//# sourceMappingURL=css-variables.d.ts.map

package/dist/types/utils/css-variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-variables.d.ts","sourceRoot":"","sources":["../../../src/utils/css-variables.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EACV,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,cAAc,EACf,MAAM,uBAAuB,CAAC;AAM/B;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAChD,IAAI,EAAE,CAAC,GACN,eAAe,CAAC,CAAC,CAAC,CAEpB;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,WAAW,EAAE,MAAM,GAClB,cAAc,CAAC,YAAY,CAAC,CAc9B;AAMD;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;CAQ1B,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;CAQ1B,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;CAUvB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;CAUzB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;;;;CAOxB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;;;CAM1B,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDvB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;CAU1B,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;CASnB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;CAUvB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;;CAOvB,CAAC;AAMX;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,kBAAkB,GACxB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAyJxB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACjC,QAAQ,SAAU,GACjB,MAAM,CAMR;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,kBAAkB,GAAG,MAAM,CAIlE;AAMD;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,OAAO,GAChB,MAAM,CAGR;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,EACpB,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,OAAO,GAChB,IAAI,CAGN;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,OAAO,GAChB,IAAI,CAGN;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,OAAO,GAChB,OAAO,CAGT;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,OAAO,GAChB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAiBxB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAE5D;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAW7D"}