atomicuilibrary 0.0.1

package/dist/collection/utils/aria-live.js

@@ -0,0 +1,60 @@
+/**
+ * Utility for managing ARIA live regions to announce dynamic content to screen readers.
+ */
+class AriaLiveManager {
+    container;
+    politeRegion;
+    assertiveRegion;
+    constructor() {
+        this.init();
+    }
+    init() {
+        const existing = document.getElementById('aria-live-regions');
+        if (existing) {
+            this.container = existing;
+            this.politeRegion = document.getElementById('aria-live-polite');
+            this.assertiveRegion = document.getElementById('aria-live-assertive');
+            return;
+        }
+        this.container = document.createElement('div');
+        this.container.id = 'aria-live-regions';
+        this.container.style.position = 'absolute';
+        this.container.style.width = '1px';
+        this.container.style.height = '1px';
+        this.container.style.padding = '0';
+        this.container.style.margin = '-1px';
+        this.container.style.overflow = 'hidden';
+        this.container.style.clip = 'rect(0, 0, 0, 0)';
+        this.container.style.whiteSpace = 'nowrap';
+        this.container.style.border = '0';
+        this.politeRegion = this.createRegion('polite');
+        this.assertiveRegion = this.createRegion('assertive');
+        this.container.appendChild(this.politeRegion);
+        this.container.appendChild(this.assertiveRegion);
+        document.body.appendChild(this.container);
+    }
+    createRegion(politeness) {
+        const el = document.createElement('div');
+        el.id = `aria-live-${politeness}`;
+        el.setAttribute('aria-live', politeness);
+        el.setAttribute('aria-atomic', 'true');
+        return el;
+    }
+    /**
+     * Announce a message to screen readers.
+     * @param message The text to announce.
+     * @param politeness 'polite' (default) waits for the user to pause, 'assertive' interrupts.
+     */
+    announce(message, politeness = 'polite') {
+        if (!this.container)
+            this.init();
+        const region = politeness === 'assertive' ? this.assertiveRegion : this.politeRegion;
+        // Clear and reset content to ensure announcement triggers even if same message
+        region.textContent = '';
+        // Tiny delay to ensure the clearing is registered
+        setTimeout(() => {
+            region.textContent = message;
+        }, 50);
+    }
+}
+export const ariaLive = new AriaLiveManager();

package/dist/collection/utils/component-size.js

@@ -0,0 +1,25 @@
+export const COMPONENT_SIZE_ALIAS_MAP = {
+    xxxs: 'xxxs',
+    xxs: 'xxs',
+    xs: 'xs',
+    sm: 'sm',
+    small: 'sm',
+    md: 'md',
+    medium: 'md',
+    lg: 'lg',
+    large: 'lg',
+    xl: 'xl',
+    xlarge: 'xl',
+    'extra-large': 'xl',
+    extralarge: 'xl',
+    xxl: 'xxl',
+    xxxl: 'xxxl',
+    default: 'md',
+};
+export function normalizeComponentSize(size, fallback = 'md') {
+    const rawSize = String(size ?? fallback).trim();
+    if (!rawSize) {
+        return fallback;
+    }
+    return COMPONENT_SIZE_ALIAS_MAP[rawSize.toLowerCase()] ?? rawSize;
+}

package/dist/collection/utils/dom.js

@@ -0,0 +1,260 @@
+/**
+ * Finds the nearest ancestor that creates a new containing block for position:fixed elements.
+ * This function is fully Shadow DOM and Flat Tree aware, accounting for slots and shadow boundaries.
+ */
+export function getTransformedAncestor(element) {
+    let el = element;
+    while (el && el !== document.documentElement) {
+        // If it's not a standard element (e.g. ShadowRoot), jump to its host
+        if (el.nodeType !== 1) {
+            el = el.host || el.parentNode;
+            continue;
+        }
+        const style = window.getComputedStyle(el);
+        if (!style) {
+            // Move up the tree (Flat Tree aware)
+            el = el.assignedSlot || el.parentElement || el.getRootNode().host;
+            continue;
+        }
+        const s = style;
+        const transform = s.transform || s.webkitTransform || s.mozTransform || s.msTransform || s.oTransform;
+        const translate = s.translate || '';
+        const rotate = s.rotate || '';
+        const scale = s.scale || '';
+        const filter = s.filter || s.webkitFilter || s.mozFilter || s.msFilter || s.oFilter;
+        const backdropFilter = s.backdropFilter || s.webkitBackdropFilter || s.mozBackdropFilter || s.msBackdropFilter || s.oBackdropFilter;
+        const perspective = s.perspective || s.webkitPerspective || s.mozPerspective || s.msPerspective || s.oPerspective;
+        const mask = s.mask || s.webkitMask || '';
+        const clipPath = s.clipPath || s.webkitClipPath || '';
+        const willChange = s.willChange || '';
+        const hasTransform = (transform && transform !== 'none') || (translate && translate !== 'none') || (rotate && rotate !== 'none') || (scale && scale !== 'none');
+        const hasFilter = filter && filter !== 'none';
+        const hasBackdropFilter = backdropFilter && backdropFilter !== 'none';
+        const hasPerspective = perspective && perspective !== 'none';
+        const hasMask = mask && mask !== 'none';
+        const hasClipPath = clipPath && clipPath !== 'none';
+        const hasWillChange = willChange &&
+            (willChange.includes('transform') ||
+                willChange.includes('perspective') ||
+                willChange.includes('filter') ||
+                willChange.includes('backdrop-filter') ||
+                willChange.includes('translate') ||
+                willChange.includes('rotate') ||
+                willChange.includes('scale') ||
+                willChange.includes('mask') ||
+                willChange.includes('clip-path') ||
+                willChange.includes('contain'));
+        // contain: layout, paint, strict, or content also creates a containing block
+        const contain = style.contain;
+        const hasContain = contain && (contain.includes('layout') || contain.includes('paint') || contain.includes('strict') || contain.includes('content'));
+        if (hasTransform || hasFilter || hasBackdropFilter || hasPerspective || hasMask || hasClipPath || hasWillChange || hasContain) {
+            return el;
+        }
+        // Move up (Flat Tree aware)
+        // Priority: 1. Assigned Slot (for projected content) 2. Parent Element 3. Shadow Host
+        el = el.assignedSlot || el.parentElement || el.getRootNode().host;
+    }
+    return null;
+}
+/**
+ * Returns the viewport-relative offset of the nearest transformed ancestor.
+ */
+export function getTransformedAncestorOffset(element) {
+    const ancestor = getTransformedAncestor(element);
+    if (ancestor) {
+        const rect = ancestor.getBoundingClientRect();
+        return { x: rect.left, y: rect.top, el: ancestor };
+    }
+    return { x: 0, y: 0, el: null };
+}
+/**
+ * Calculates a robust, environment-proof position for floating elements (dropdowns, menus).
+ * It automatically handles:
+ * 1. Nested CSS transforms (containing blocks)
+ * 2. Viewport boundary detection (clamping)
+ * 3. Vertical space detection (flipping top/bottom)
+ * 4. Aligning to trigger element
+ */
+/**
+ * Modern auto-update utility that tracks element positions and re-triggers placement logic.
+ */
+export function autoUpdate(reference, floating, update, options = {}) {
+    const { animationFrame = false } = options;
+    let frameId = null;
+    const handleUpdate = () => {
+        update();
+        if (animationFrame) {
+            frameId = requestAnimationFrame(handleUpdate);
+        }
+    };
+    if (animationFrame) {
+        frameId = requestAnimationFrame(handleUpdate);
+    }
+    else {
+        update(); // Initial update
+    }
+    window.addEventListener('scroll', update, { capture: true, passive: true });
+    window.addEventListener('resize', update, { passive: true });
+    const resizeObserver = new ResizeObserver(() => update());
+    resizeObserver.observe(reference);
+    resizeObserver.observe(floating);
+    const cleanup = () => {
+        if (frameId !== null)
+            cancelAnimationFrame(frameId);
+        window.removeEventListener('scroll', update, { capture: true });
+        window.removeEventListener('resize', update);
+        resizeObserver.disconnect();
+    };
+    return cleanup;
+}
+/**
+ * Calculates a robust, environment-proof position for floating elements (popovers, dropdowns, menus).
+ * Supports all 4 sides, alignment, and boundary detection.
+ */
+export function calculateUniversalPlacement(trigger, options) {
+    const { menuWidth, menuHeight, gap = 4, placement = 'auto', align = 'center', padding = 8, useTransformedAncestorOffset = true } = options;
+    if (!trigger) {
+        return { left: 0, top: 0, width: 0, availableWidth: 0, availableHeight: 0, placement: 'bottom', isClamped: false };
+    }
+    const triggerRect = trigger.getBoundingClientRect();
+    const screenW = window.innerWidth;
+    const screenH = window.innerHeight;
+    const ancestorOffset = useTransformedAncestorOffset
+        ? getTransformedAncestorOffset(trigger)
+        : { x: 0, y: 0, el: null };
+    // 1. Determine Vertical/Horizontal Placement
+    const requestedPlacement = placement === 'auto' ? 'bottom' : placement;
+    let finalPlacement = requestedPlacement;
+    if (placement === 'auto') {
+        const spaceBelow = screenH - triggerRect.bottom - gap - padding;
+        const spaceAbove = triggerRect.top - gap - padding;
+        const spaceRight = screenW - triggerRect.right - gap - padding;
+        const spaceLeft = triggerRect.left - gap - padding;
+        // Preference: If requestedPlacement is blocked, try opposite, then try other axis if both blocked
+        if (requestedPlacement === 'bottom' && spaceBelow < menuHeight && spaceAbove > spaceBelow) {
+            finalPlacement = 'top';
+        }
+        else if (requestedPlacement === 'top' && spaceAbove < menuHeight && spaceBelow > spaceAbove) {
+            finalPlacement = 'bottom';
+        }
+        else if (requestedPlacement === 'right' && spaceRight < menuWidth && spaceLeft > spaceRight) {
+            finalPlacement = 'left';
+        }
+        else if (requestedPlacement === 'left' && spaceLeft < menuWidth && spaceRight > spaceLeft) {
+            finalPlacement = 'right';
+        }
+        // Secondary: If still not enough space on the main axis, pick the one with most space
+        if (finalPlacement === 'top' || finalPlacement === 'bottom') {
+            if (Math.max(spaceAbove, spaceBelow) < menuHeight) {
+                if (spaceRight >= menuWidth || spaceLeft >= menuWidth) {
+                    finalPlacement = spaceRight > spaceLeft ? 'right' : 'left';
+                }
+            }
+        }
+        else {
+            if (Math.max(spaceLeft, spaceRight) < menuWidth) {
+                if (spaceAbove >= menuHeight || spaceBelow >= menuHeight) {
+                    finalPlacement = spaceAbove > spaceBelow ? 'top' : 'bottom';
+                }
+            }
+        }
+    }
+    // 2. Calculate initial coordinates and available dimensions
+    let left = 0;
+    let top = 0;
+    let availableWidth = screenW - (padding * 2);
+    let availableHeight = screenH - (padding * 2);
+    switch (finalPlacement) {
+        case 'top':
+            top = triggerRect.top - menuHeight - gap;
+            availableHeight = triggerRect.top - gap - padding;
+            break;
+        case 'bottom':
+            top = triggerRect.bottom + gap;
+            availableHeight = screenH - triggerRect.bottom - gap - padding;
+            break;
+        case 'left':
+            left = triggerRect.left - menuWidth - gap;
+            availableWidth = triggerRect.left - gap - padding;
+            break;
+        case 'right':
+            left = triggerRect.right + gap;
+            availableWidth = screenW - triggerRect.right - gap - padding;
+            break;
+    }
+    // Handle alignment for the cross-axis
+    if (finalPlacement === 'top' || finalPlacement === 'bottom') {
+        // Horizontal alignment
+        if (align === 'start')
+            left = triggerRect.left;
+        else if (align === 'end')
+            left = triggerRect.right - menuWidth;
+        else
+            left = triggerRect.left + (triggerRect.width / 2) - (menuWidth / 2);
+        availableWidth = screenW - (padding * 2);
+    }
+    else {
+        // Vertical alignment
+        if (align === 'start')
+            top = triggerRect.top;
+        else if (align === 'end')
+            top = triggerRect.bottom - menuHeight;
+        else
+            top = triggerRect.top + (triggerRect.height / 2) - (menuHeight / 2);
+        availableHeight = screenH - (padding * 2);
+    }
+    // Apply ancestor offset
+    left -= ancestorOffset.x;
+    top -= ancestorOffset.y;
+    // 3. Clamping to viewport (account for transform ancestors)
+    const containerWidth = ancestorOffset.el ? ancestorOffset.el.getBoundingClientRect().width : screenW;
+    const containerHeight = ancestorOffset.el ? ancestorOffset.el.getBoundingClientRect().height : screenH;
+    const originalLeft = left;
+    const originalTop = top;
+    // Cross-axis clamping
+    if (finalPlacement === 'top' || finalPlacement === 'bottom') {
+        left = Math.max(padding, Math.min(left, containerWidth - menuWidth - padding));
+    }
+    else {
+        top = Math.max(padding, Math.min(top, containerHeight - menuHeight - padding));
+    }
+    const isClamped = left !== originalLeft || top !== originalTop;
+    // 4. Calculate arrow position (local to the floating element)
+    let arrowX = 0;
+    let arrowY = 0;
+    const arrowPadding = 12; // Minimum distance from corners
+    if (finalPlacement === 'top' || finalPlacement === 'bottom') {
+        const triggerCenter = triggerRect.left + (triggerRect.width / 2);
+        const menuAbsoluteLeft = left + ancestorOffset.x;
+        arrowX = triggerCenter - menuAbsoluteLeft;
+        arrowX = Math.max(arrowPadding, Math.min(arrowX, menuWidth - arrowPadding));
+    }
+    else {
+        const triggerCenter = triggerRect.top + (triggerRect.height / 2);
+        const menuAbsoluteTop = top + ancestorOffset.y;
+        arrowY = triggerCenter - menuAbsoluteTop;
+        arrowY = Math.max(arrowPadding, Math.min(arrowY, menuHeight - arrowPadding));
+    }
+    return {
+        left,
+        top,
+        width: menuWidth,
+        availableWidth,
+        availableHeight,
+        placement: finalPlacement,
+        isClamped,
+        arrowX,
+        arrowY
+    };
+}
+/**
+ * Corrects viewport-relative coordinates (e.g., from MouseEvent.clientX/Y)
+ * to work correctly when the target element is inside a transformed container.
+ */
+export function correctViewportCoordinates(x, y, element) {
+    const offset = getTransformedAncestorOffset(element);
+    return {
+        x: x - offset.x,
+        y: y - offset.y,
+    };
+}

package/dist/collection/utils/focus-trap.js

@@ -0,0 +1,135 @@
+export class FocusTrap {
+    container;
+    options;
+    originalFocusedElement = null;
+    firstFocusable = null;
+    lastFocusable = null;
+    isActive = false;
+    focusableSelectors = [
+        'a[href]',
+        'area[href]',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        'button:not([disabled])',
+        'iframe',
+        'object',
+        'embed',
+        '[contenteditable]',
+        '[tabindex]:not([tabindex="-1"])',
+        'ui-terminal',
+        'ui-code-editor'
+    ];
+    constructor(container, options = {}) {
+        this.container = container;
+        this.options = {
+            escapeDeactivates: true,
+            clickOutsideDeactivates: false,
+            returnFocus: true,
+            ...options
+        };
+    }
+    activate() {
+        if (this.isActive)
+            return;
+        this.originalFocusedElement = document.activeElement;
+        this.isActive = true;
+        // Add event listeners
+        this.container.addEventListener('keydown', this.handleKeyDown);
+        if (this.options.clickOutsideDeactivates) {
+            document.addEventListener('click', this.handleClickOutside);
+        }
+        // Find focusable elements
+        this.updateFocusableElements();
+        // Set initial focus
+        if (this.options.initialFocus) {
+            const initial = typeof this.options.initialFocus === 'string'
+                ? this.container.querySelector(this.options.initialFocus)
+                : this.options.initialFocus;
+            if (initial) {
+                initial.focus();
+            }
+            else if (this.firstFocusable) {
+                this.firstFocusable.focus();
+            }
+        }
+        else if (this.firstFocusable) {
+            this.firstFocusable.focus();
+        }
+        // Add visual indicator class
+        this.container.classList.add('focus-trap-active');
+    }
+    deactivate() {
+        if (!this.isActive)
+            return;
+        this.isActive = false;
+        this.container.removeEventListener('keydown', this.handleKeyDown);
+        document.removeEventListener('click', this.handleClickOutside);
+        this.container.classList.remove('focus-trap-active');
+        if (this.options.returnFocus && this.originalFocusedElement && document.contains(this.originalFocusedElement)) {
+            if (typeof this.options.returnFocus === 'boolean') {
+                this.originalFocusedElement.focus();
+            }
+            else {
+                this.options.returnFocus.focus();
+            }
+        }
+    }
+    updateFocusableElements = () => {
+        const focusableElements = Array.from(this.container.querySelectorAll(this.focusableSelectors.join(',')));
+        const visibleFocusable = focusableElements.filter(el => {
+            return el.offsetParent !== null && !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1';
+        });
+        this.firstFocusable = visibleFocusable[0] || null;
+        this.lastFocusable = visibleFocusable[visibleFocusable.length - 1] || null;
+    };
+    handleKeyDown = (e) => {
+        if (this.options.escapeDeactivates && e.key === 'Escape') {
+            this.deactivate();
+            return;
+        }
+        if (e.key === 'Tab') {
+            this.updateFocusableElements(); // Re-scan in case contents changed
+            if (!this.firstFocusable || !this.lastFocusable) {
+                e.preventDefault();
+                return;
+            }
+            const activeElement = this.getActiveElement();
+            if (e.shiftKey) { // Shift + Tab
+                if (activeElement === this.firstFocusable || !this.containsPierce(this.container, activeElement)) {
+                    e.preventDefault();
+                    this.lastFocusable?.focus();
+                }
+            }
+            else { // Tab
+                if (activeElement === this.lastFocusable || !this.containsPierce(this.container, activeElement)) {
+                    e.preventDefault();
+                    this.firstFocusable?.focus();
+                }
+            }
+        }
+    };
+    getActiveElement() {
+        let el = document.activeElement;
+        while (el && el.shadowRoot && el.shadowRoot.activeElement) {
+            el = el.shadowRoot.activeElement;
+        }
+        return el;
+    }
+    containsPierce(container, target) {
+        if (!target)
+            return false;
+        let curr = target;
+        while (curr) {
+            if (curr === container)
+                return true;
+            curr = curr.parentNode || curr.host;
+        }
+        return false;
+    }
+    handleClickOutside = (e) => {
+        if (!this.containsPierce(this.container, e.target)) {
+            this.deactivate();
+        }
+    };
+}

package/dist/collection/utils/security.js

@@ -0,0 +1,10 @@
+import DOMPurify from "dompurify";
+/**
+ * Sanitizes HTML to prevent XSS attacks.
+ * Use this when rendering dynamic HTML via innerHTML.
+ */
+export function sanitizeHTML(html) {
+    if (!html)
+        return '';
+    return DOMPurify.sanitize(html);
+}

package/dist/collection/utils/test/setup-component-test-env.js

@@ -0,0 +1,92 @@
+export const createMockElementInternals = () => ({
+    form: null,
+    labels: [],
+    shadowRoot: null,
+    validity: {},
+    validationMessage: '',
+    willValidate: true,
+    states: new Set(),
+    setFormValue: jest.fn(),
+    setValidity: jest.fn(),
+    checkValidity: jest.fn(() => true),
+    reportValidity: jest.fn(() => true),
+});
+export const setupComponentTestEnv = () => {
+    const safeAssign = (target, name, value) => {
+        try {
+            target[name] = value;
+        }
+        catch {
+            Object.defineProperty(target, name, {
+                configurable: true,
+                writable: true,
+                value,
+            });
+        }
+    };
+    const assignGlobal = (name, value) => {
+        safeAssign(globalThis, name, value);
+        if (typeof global !== 'undefined') {
+            safeAssign(global, name, value);
+        }
+        if (typeof window !== 'undefined') {
+            safeAssign(window, name, value);
+        }
+    };
+    if (!globalThis.Window && typeof window !== 'undefined') {
+        globalThis.Window = window.constructor;
+    }
+    if (!globalThis.ResizeObserver) {
+        assignGlobal('ResizeObserver', class {
+            observe() { }
+            unobserve() { }
+            disconnect() { }
+        });
+    }
+    if (!globalThis.IntersectionObserver) {
+        assignGlobal('IntersectionObserver', class {
+            callback;
+            constructor(callback) {
+                this.callback = callback;
+            }
+            observe(target) {
+                if (this.callback) {
+                    this.callback([{ isIntersecting: true, target }]);
+                }
+            }
+            unobserve() { }
+            disconnect() { }
+            takeRecords() { return []; }
+        });
+    }
+    if (!globalThis.MutationObserver) {
+        assignGlobal('MutationObserver', class {
+            observe() { }
+            disconnect() { }
+            takeRecords() { return []; }
+        });
+    }
+    if (typeof window !== 'undefined' && !window.matchMedia) {
+        window.matchMedia = jest.fn().mockImplementation(query => ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        }));
+    }
+    const elementInternalsProto = globalThis.ElementInternals?.prototype;
+    if (elementInternalsProto) {
+        elementInternalsProto.setFormValue = elementInternalsProto.setFormValue || jest.fn();
+        elementInternalsProto.setValidity = elementInternalsProto.setValidity || jest.fn();
+        elementInternalsProto.checkValidity = elementInternalsProto.checkValidity || jest.fn(() => true);
+        elementInternalsProto.reportValidity = elementInternalsProto.reportValidity || jest.fn(() => true);
+    }
+    Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
+        configurable: true,
+        value: jest.fn(() => createMockElementInternals()),
+    });
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,21 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+/**
+ * Converts a hex color to RGB string
+ * @param hex Hex color string
+ * @returns RGB string e.g. "255, 255, 255"
+ */
+export function hexToRgb(hex) {
+    if (!hex)
+        return '0, 0, 0';
+    let cleanHex = hex.replace('#', '');
+    if (cleanHex.length === 3) {
+        cleanHex = cleanHex.split('').map(char => char + char).join('');
+    }
+    const bigInt = parseInt(cleanHex, 16);
+    const r = (bigInt >> 16) & 255;
+    const g = (bigInt >> 8) & 255;
+    const b = bigInt & 255;
+    return `${r}, ${g}, ${b}`;
+}

package/dist/collection/utils/validation.js

@@ -0,0 +1,74 @@
+/**
+ * App UI Validation Utility
+ * Comprehensive validation functions for numbers, colors, and character sets.
+ */
+export const Validation = {
+    /**
+     * Validates if a string is a valid number
+     */
+    isNumber: (value) => {
+        if (typeof value === 'number')
+            return !isNaN(value);
+        return !isNaN(parseFloat(value)) && isFinite(Number(value));
+    },
+    /**
+     * Validates alphanumeric characters (letters and numbers only)
+     */
+    isAlphanumeric: (value) => {
+        return /^[a-zA-Z0-9]+$/.test(value);
+    },
+    /**
+     * Validates alphabet characters only
+     */
+    isAlpha: (value) => {
+        return /^[a-zA-Z]+$/.test(value);
+    },
+    /**
+     * Validates symbols and special characters (non-alphanumeric)
+     */
+    isSymbol: (value) => {
+        return /^[^\w\s]+$/.test(value);
+    },
+    /**
+     * Color Validations
+     */
+    Colors: {
+        /**
+         * Validates Hex color codes (#FFF, #FFFFFF, with or without #)
+         */
+        isHex: (value) => {
+            return /^#?([A-Fa-f0-9]{3}){1,2}$/.test(value);
+        },
+        /**
+         * Validates RGB color format (rgb(255, 255, 255) or just "255, 255, 255")
+         */
+        isRGB: (value) => {
+            const rgbRegex = /^(rgb\()?(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(\))?$/;
+            const match = value.match(rgbRegex);
+            if (!match)
+                return false;
+            const [, , r, g, b] = match.map(Number);
+            return [r, g, b].every(v => v >= 0 && v <= 255);
+        },
+        /**
+         * Validates HSL color format (hsl(360, 100%, 100%) or "360, 100, 100")
+         */
+        isHSL: (value) => {
+            const hslRegex = /^(hsl\()?(\d{1,3}),\s*(\d{1,3})(%?),\s*(\d{1,3})(%?)(\))?$/;
+            const match = value.match(hslRegex);
+            if (!match)
+                return false;
+            const h = Number(match[2]);
+            const s = Number(match[3]);
+            const l = Number(match[5]);
+            return h >= 0 && h <= 360 && s >= 0 && s <= 100 && l >= 0 && l <= 100;
+        },
+        /**
+         * Validates OKLCH color format (oklch(0.65, 0.21, 33))
+         */
+        isOKLCH: (value) => {
+            const oklchRegex = /^oklch\((0?\.\d+|1(\.0+)?),\s*(0?\.\d+|1(\.0+)?),\s*(\d{1,3}(\.\d+)?)\)$/;
+            return oklchRegex.test(value);
+        }
+    }
+};