atomicuilibrary 0.1.0 → 0.1.3

package/dist/cjs/category-section.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
 const categorySectionCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;margin-bottom:32px}.category{background:linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));border:1px solid rgba(255, 255, 255, 0.08);border-radius:24px;overflow:hidden;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.category:hover{border-color:rgba(99, 102, 241, 0.3)}.category-header{display:flex;align-items:center;gap:16px;padding:24px 28px;background:transparent;border:none;width:100%;cursor:pointer;text-align:left;color:inherit;font-family:inherit;transition:background 0.2s ease}.category-header:hover{background:rgba(255, 255, 255, 0.03)}.category-icon{font-size:1.8rem;width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.15));border-radius:14px;flex-shrink:0}.category-title{margin:0;font-size:1.4rem;font-weight:700;color:#f1f5f9;flex:1;letter-spacing:-0.02em}.category-count{font-size:0.85rem;font-weight:600;padding:6px 14px;background:rgba(99, 102, 241, 0.15);color:#a5b4fc;border-radius:20px}.chevron{color:#64748b;transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.chevron.rotated{transform:rotate(-90deg)}.category-content{padding:0 24px 24px;max-height:2000px;overflow:hidden;transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);opacity:1}.category.collapsed .category-content{max-height:0;padding-top:0;padding-bottom:0;opacity:0}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:16px}@media (max-width: 768px){.cards-grid{grid-template-columns:1fr}.category-header{padding:16px 20px}.category-content{padding:0 16px 16px}.category-title{font-size:1.2rem}}:host-context(.light) .category{background:linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));border-color:rgba(0, 0, 0, 0.08)}:host-context(.light) .category-title{color:#1e293b}:host-context(.light) .chevron{color:#94a3b8}`;
 
@@ -22,7 +22,7 @@ const CategorySection = class {
         this.expanded = !this.expanded;
     };
     render() {
-        return (index.h(index.Host, { key: 'cbf8ccd3007f98bb7e60a16df0bc5e2297ca6169' }, index.h("div", { key: '26e8b469d968c65d6d3b27c9beebd41877e92ad8', class: { 'category': true, 'collapsed': !this.expanded } }, index.h("ui-button", { key: '7310a57de6db671d7cfabec3627fdb1bc350723c', class: "category-header", onButtonClick: this.toggleExpanded, variant: "plain", fullWidth: true, align: "start" }, index.h("span", { key: '5505829b31f4d0bd69c063159b056a8ba3403c2f', class: "category-icon" }, this.categoryIcon), index.h("h2", { key: 'bfead7dba3a483a23a2971747b31ff0466cb11af', class: "category-title" }, this.categoryName), index.h("span", { key: 'bb3017b79b6abf090af4589c79ee03738ecfc10f', class: "category-count" }, this.components.length), index.h("svg", { key: 'bb7785342b89e9e571707abc2b0c0637037eb0b2', class: { 'chevron': true, 'rotated': !this.expanded }, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("polyline", { key: '625fc1dac9dffc486edf86dc3d5862e7e15e0fb1', points: "6,9 12,15 18,9" }))), index.h("div", { key: '8a4a7c7f42ac74396853b44e57fc7aaa38ddaf7d', class: "category-content" }, index.h("div", { key: '924bef66650d575f4cbfaf69d06b9e1ed76bcf08', class: "cards-grid" }, this.components.map(comp => (index.h("library-card", { key: comp.id, "component-id": comp.id, "card-title": comp.name, description: comp.description, icon: comp.icon, badge: comp.badge, docs: comp.docs, mode: this.mode }))))))));
+        return (index.h(index.Host, { key: '0416a668691cac54fcb40a81043c011864528f56' }, index.h("div", { key: '2597565c47c72e3b0841619c73078db790d47d52', class: { 'category': true, 'collapsed': !this.expanded } }, index.h("ui-button", { key: '677186fb712e1d2bdae4bf8381bc123cb396fab8', class: "category-header", onButtonClick: this.toggleExpanded, variant: "plain", fullWidth: true, align: "start" }, index.h("span", { key: '8f46d202777d2df4d74a88bb01ecb76d35c6415d', class: "category-icon" }, this.categoryIcon), index.h("h2", { key: '51247e2c6def99ab123592bedaf88d3696ece4c6', class: "category-title" }, this.categoryName), index.h("span", { key: 'cc616b7292cd1562b26c1d5eff04e9c0c7cc48c0', class: "category-count" }, this.components.length), index.h("svg", { key: '0054711645043b37f2f1ed61bf7d7b7b8caa98ad', class: { 'chevron': true, 'rotated': !this.expanded }, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("polyline", { key: '3a7a0b22c5d9ac8f5080b5af44320d08ad6040cb', points: "6,9 12,15 18,9" }))), index.h("div", { key: 'd727e08e615a6aa899c0fd416e58799de0f305f4', class: "category-content" }, index.h("div", { key: '732f248ac911b2e7a8daae6b8db94a39bed6545f', class: "cards-grid" }, this.components.map(comp => (index.h("library-card", { key: comp.id, "component-id": comp.id, "card-title": comp.name, description: comp.description, icon: comp.icon, badge: comp.badge, docs: comp.docs, mode: this.mode }))))))));
     }
 };
 CategorySection.style = categorySectionCss();

package/dist/cjs/dom-BvBb0kmW.js

@@ -0,0 +1,267 @@
+'use strict';
+
+/**
+ * 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.
+ */
+function getFlatTreeParent(node) {
+    return node?.assignedSlot || node?.parentElement || node?.getRootNode()?.host || null;
+}
+function isStandardElement(node) {
+    return Boolean(node) && node.nodeType === 1;
+}
+function styleCreatesContainingBlock(style) {
+    const transform = style.transform || '';
+    const filter = style.filter || '';
+    const backdropFilter = style.backdropFilter || '';
+    const perspective = style.perspective || '';
+    const mask = style.mask || '';
+    const clipPath = style.clipPath || '';
+    const contain = style.contain || '';
+    const willChange = style.willChange || '';
+    const hasTransform = [transform, style.translate || '', style.rotate || '', style.scale || ''].some((value) => value && value !== 'none');
+    const hasWillChange = ['transform', 'perspective', 'filter', 'backdrop-filter', 'translate', 'rotate', 'scale', 'mask', 'clip-path', 'contain']
+        .some((token) => willChange.includes(token));
+    const hasContain = ['layout', 'paint', 'strict', 'content'].some((token) => contain.includes(token));
+    return hasTransform
+        || Boolean(filter && filter !== 'none')
+        || Boolean(backdropFilter && backdropFilter !== 'none')
+        || Boolean(perspective && perspective !== 'none')
+        || Boolean(mask && mask !== 'none')
+        || Boolean(clipPath && clipPath !== 'none')
+        || hasWillChange
+        || hasContain;
+}
+function getTransformedAncestor(element) {
+    let el = element;
+    while (el && el !== document.documentElement) {
+        if (!isStandardElement(el)) {
+            el = el.host || el.parentNode;
+            continue;
+        }
+        const style = globalThis.getComputedStyle(el);
+        if (!style) {
+            el = getFlatTreeParent(el);
+            continue;
+        }
+        if (styleCreatesContainingBlock(style)) {
+            return el;
+        }
+        el = getFlatTreeParent(el);
+    }
+    return null;
+}
+function getOppositePlacement(requestedPlacement, space, menuWidth, menuHeight) {
+    if (requestedPlacement === 'bottom' && space.below < menuHeight && space.above > space.below)
+        return 'top';
+    if (requestedPlacement === 'top' && space.above < menuHeight && space.below > space.above)
+        return 'bottom';
+    if (requestedPlacement === 'right' && space.right < menuWidth && space.left > space.right)
+        return 'left';
+    if (requestedPlacement === 'left' && space.left < menuWidth && space.right > space.left)
+        return 'right';
+    return requestedPlacement;
+}
+function resolvePlacement(requestedPlacement, space, menuWidth, menuHeight) {
+    const finalPlacement = getOppositePlacement(requestedPlacement, space, menuWidth, menuHeight);
+    const verticalPlacement = finalPlacement === 'top' || finalPlacement === 'bottom';
+    const verticalSpace = Math.max(space.above, space.below);
+    const horizontalSpace = Math.max(space.left, space.right);
+    if (verticalPlacement && verticalSpace < menuHeight && (space.right >= menuWidth || space.left >= menuWidth)) {
+        return space.right > space.left ? 'right' : 'left';
+    }
+    if (!verticalPlacement && horizontalSpace < menuWidth && (space.above >= menuHeight || space.below >= menuHeight)) {
+        return space.above > space.below ? 'top' : 'bottom';
+    }
+    return finalPlacement;
+}
+function getBasePlacementCoordinates(placement, triggerRect, size, screen, gap, padding) {
+    switch (placement) {
+        case 'top':
+            return {
+                left: 0,
+                top: triggerRect.top - size.height - gap,
+                availableWidth: screen.width - (padding * 2),
+                availableHeight: triggerRect.top - gap - padding,
+            };
+        case 'bottom':
+            return {
+                left: 0,
+                top: triggerRect.bottom + gap,
+                availableWidth: screen.width - (padding * 2),
+                availableHeight: screen.height - triggerRect.bottom - gap - padding,
+            };
+        case 'left':
+            return {
+                left: triggerRect.left - size.width - gap,
+                top: 0,
+                availableWidth: triggerRect.left - gap - padding,
+                availableHeight: screen.height - (padding * 2),
+            };
+        case 'right':
+        default:
+            return {
+                left: triggerRect.right + gap,
+                top: 0,
+                availableWidth: screen.width - triggerRect.right - gap - padding,
+                availableHeight: screen.height - (padding * 2),
+            };
+    }
+}
+function applyCrossAxisAlignment(placement, align, triggerRect, size, coords, screen, padding) {
+    if (placement === 'top' || placement === 'bottom') {
+        let alignedLeft = triggerRect.left + (triggerRect.width / 2) - (size.width / 2);
+        if (align === 'start')
+            alignedLeft = triggerRect.left;
+        if (align === 'end')
+            alignedLeft = triggerRect.right - size.width;
+        coords.left = alignedLeft;
+        coords.availableWidth = screen.width - (padding * 2);
+        return coords;
+    }
+    let alignedTop = triggerRect.top + (triggerRect.height / 2) - (size.height / 2);
+    if (align === 'start')
+        alignedTop = triggerRect.top;
+    if (align === 'end')
+        alignedTop = triggerRect.bottom - size.height;
+    coords.top = alignedTop;
+    coords.availableHeight = screen.height - (padding * 2);
+    return coords;
+}
+function getArrowCoordinates(placement, triggerRect, top, left, ancestorOffset, actualMenuWidth, actualMenuHeight) {
+    const arrowPadding = 12;
+    if (placement === 'top' || placement === 'bottom') {
+        const triggerCenter = triggerRect.left + (triggerRect.width / 2);
+        const menuAbsoluteLeft = left + ancestorOffset.x;
+        const arrowX = Math.max(arrowPadding, Math.min(triggerCenter - menuAbsoluteLeft, actualMenuWidth - arrowPadding));
+        return { arrowX, arrowY: 0 };
+    }
+    const triggerCenter = triggerRect.top + (triggerRect.height / 2);
+    const menuAbsoluteTop = top + ancestorOffset.y;
+    const arrowY = Math.max(arrowPadding, Math.min(triggerCenter - menuAbsoluteTop, actualMenuHeight - arrowPadding));
+    return { arrowX: 0, arrowY };
+}
+/**
+ * Returns the viewport-relative offset of the nearest transformed ancestor.
+ */
+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.
+ */
+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
+    }
+    globalThis.addEventListener('scroll', update, { capture: true, passive: true });
+    globalThis.addEventListener('resize', update, { passive: true });
+    const resizeObserver = new ResizeObserver(() => update());
+    resizeObserver.observe(reference);
+    resizeObserver.observe(floating);
+    const cleanup = () => {
+        if (frameId !== null)
+            cancelAnimationFrame(frameId);
+        globalThis.removeEventListener('scroll', update, { capture: true });
+        globalThis.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.
+ */
+function calculateUniversalPlacement(trigger, options) {
+    const { menuWidth, menuHeight, actualMenuWidth = menuWidth, actualMenuHeight = menuHeight, gap = 4, placement = 'auto', align = 'center', padding = 8, useTransformedAncestorOffset = true, flip = true, shift = true } = options;
+    if (!trigger) {
+        return { left: 0, top: 0, width: 0, availableWidth: 0, availableHeight: 0, placement: 'bottom', isClamped: false };
+    }
+    const triggerRect = trigger.getBoundingClientRect();
+    const screen = { width: globalThis.innerWidth, height: globalThis.innerHeight };
+    const ancestorOffset = useTransformedAncestorOffset
+        ? getTransformedAncestorOffset(trigger)
+        : { x: 0, y: 0};
+    const requestedPlacement = placement === 'auto' ? 'bottom' : placement;
+    let finalPlacement = requestedPlacement;
+    if (placement === 'auto' || flip) {
+        finalPlacement = resolvePlacement(requestedPlacement, {
+            below: screen.height - triggerRect.bottom - gap - padding,
+            above: triggerRect.top - gap - padding,
+            right: screen.width - triggerRect.right - gap - padding,
+            left: triggerRect.left - gap - padding,
+        }, menuWidth, menuHeight);
+    }
+    const baseCoords = getBasePlacementCoordinates(finalPlacement, triggerRect, { width: actualMenuWidth, height: actualMenuHeight }, screen, gap, padding);
+    const alignedCoords = applyCrossAxisAlignment(finalPlacement, align, triggerRect, { width: actualMenuWidth, height: actualMenuHeight }, baseCoords, screen, padding);
+    let { left, top, availableWidth, availableHeight } = alignedCoords;
+    left -= ancestorOffset.x;
+    top -= ancestorOffset.y;
+    const originalLeft = left;
+    const originalTop = top;
+    const minLeft = padding - ancestorOffset.x;
+    const maxLeft = screen.width - actualMenuWidth - padding - ancestorOffset.x;
+    const minTop = padding - ancestorOffset.y;
+    const maxTop = screen.height - actualMenuHeight - padding - ancestorOffset.y;
+    if (shift) {
+        if (finalPlacement === 'top' || finalPlacement === 'bottom') {
+            left = Math.max(minLeft, Math.min(left, maxLeft));
+        }
+        else {
+            top = Math.max(minTop, Math.min(top, maxTop));
+        }
+    }
+    const isClamped = left !== originalLeft || top !== originalTop;
+    const { arrowX, arrowY } = getArrowCoordinates(finalPlacement, triggerRect, top, left, ancestorOffset, actualMenuWidth, actualMenuHeight);
+    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.
+ */
+function correctViewportCoordinates(x, y, element) {
+    const offset = getTransformedAncestorOffset(element);
+    return {
+        x: x - offset.x,
+        y: y - offset.y,
+    };
+}
+
+exports.autoUpdate = autoUpdate;
+exports.calculateUniversalPlacement = calculateUniversalPlacement;
+exports.correctViewportCoordinates = correctViewportCoordinates;
+exports.getTransformedAncestorOffset = getTransformedAncestorOffset;