@abydahana/aksara-ui 0.1.0

package/dist/aksara.esm.js

@@ -0,0 +1,1604 @@
+/*! Aksara UI v0.1.0 | Static CSS, no JIT, vanilla JS */
+const registry = new Map();
+const instances = new Set();
+const focusableSelector = [
+    "a[href]",
+    "area[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "iframe",
+    "object",
+    "embed",
+    "[contenteditable]",
+    "[tabindex]:not([tabindex='-1'])"
+].join(",");
+function toElements(target) {
+    if (!target)
+        return [];
+    if (typeof target === "string")
+        return Array.from(document.querySelectorAll(target));
+    if (target instanceof HTMLElement)
+        return [target];
+    if (target instanceof Element)
+        return [target];
+    if (target instanceof NodeList || Array.isArray(target)) {
+        return Array.from(target).filter((item) => item instanceof HTMLElement);
+    }
+    return [];
+}
+function resolveArgs(target, options, defaultSelector) {
+    if (target &&
+        typeof target === "object" &&
+        !(target instanceof Element) &&
+        !(target instanceof NodeList) &&
+        !Array.isArray(target)) {
+        const opts = target;
+        const resolvedTarget = opts.target || opts.selector || defaultSelector;
+        return { target: resolvedTarget, options: opts };
+    }
+    return { target: target || defaultSelector, options: (options || {}) };
+}
+function dataName(name) {
+    return name.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+function getData(element, component, name) {
+    return element?.getAttribute(`data-${component}-${dataName(name)}`) ?? null;
+}
+function getOption(options, element, component, name, fallback) {
+    if (options[name] !== undefined)
+        return options[name];
+    const value = getData(element, component, name);
+    return value !== null ? value : fallback;
+}
+function getBooleanOption(options, element, component, name, fallback) {
+    const value = getOption(options, element, component, name, fallback);
+    if (value === "true" || value === true)
+        return true;
+    if (value === "false" || value === false)
+        return false;
+    return Boolean(value);
+}
+function getNumberOption(options, element, component, name, fallback) {
+    const value = getOption(options, element, component, name, fallback);
+    const number = Number(value);
+    return Number.isNaN(number) ? fallback : number;
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function emit(element, name, detail = {}) {
+    element.dispatchEvent(new CustomEvent(`aksara:${name}`, { bubbles: true, detail }));
+}
+function getInstance(element, Type, options = {}) {
+    const key = Type.componentName;
+    let map = registry.get(key);
+    if (!map) {
+        map = new WeakMap();
+        registry.set(key, map);
+    }
+    if (!map.has(element)) {
+        const instance = new Type(element, options);
+        map.set(element, instance);
+        instances.add(instance);
+    }
+    else if (options && Object.keys(options).length) {
+        const instance = map.get(element);
+        if (instance && typeof instance.updateOptions === "function") {
+            instance.updateOptions(options);
+        }
+    }
+    return map.get(element);
+}
+function createInstanceList(instanceArray) {
+    return new Proxy(instanceArray, {
+        get(target, prop) {
+            if (prop in target) {
+                const val = target[prop];
+                return typeof val === "function" ? val.bind(target) : val;
+            }
+            return (...args) => {
+                target.forEach((inst) => {
+                    const fn = inst[prop];
+                    if (typeof fn === "function") {
+                        fn(...args);
+                    }
+                });
+                return createInstanceList(target);
+            };
+        }
+    });
+}
+function createAll(target, Type, options = {}) {
+    const items = toElements(target);
+    const insts = items.map((element) => getInstance(element, Type, options));
+    if (insts.length === 1)
+        return insts[0];
+    return createInstanceList(insts);
+}
+export class Component {
+    element;
+    options;
+    cleanups;
+    constructor(element, options = {}) {
+        this.element = element;
+        this.options = options;
+        this.cleanups = [];
+    }
+    updateOptions(options = {}) {
+        this.options = { ...this.options, ...options };
+        return this;
+    }
+    on(target, type, handler, options) {
+        target.addEventListener(type, handler, options);
+        this.cleanups.push(() => target.removeEventListener(type, handler, options));
+    }
+    destroy() {
+        this.cleanups.splice(0).forEach((cleanup) => cleanup());
+        instances.delete(this);
+        const ctor = this.constructor;
+        emit(this.element, `${ctor.componentName || "component"}:destroy`, { instance: this });
+    }
+}
+export class Modal extends Component {
+    static componentName = "modal";
+    isOpen;
+    previousFocus = null;
+    dialog;
+    dragState = null;
+    backdrop;
+    keyboard;
+    focus;
+    scrollLock;
+    draggable;
+    constructor(element, options = {}) {
+        super(element, options);
+        this.isOpen = element.classList.contains("modal-open");
+        this.dialog = element.querySelector(".modal-dialog");
+        this.updateOptions(options);
+        this.element.setAttribute("role", this.element.getAttribute("role") || "dialog");
+        this.element.setAttribute("aria-modal", "true");
+        this.element.setAttribute("aria-hidden", this.isOpen ? "false" : "true");
+        this.on(this.element, "click", (event) => {
+            if (event.target === this.element) {
+                if (this.backdrop === "static") {
+                    const staticClass = `${this.constructor.componentName}-static`;
+                    this.element.classList.add(staticClass);
+                    setTimeout(() => this.element.classList.remove(staticClass), 150);
+                }
+                else if (this.backdrop) {
+                    this.hide();
+                }
+            }
+        });
+        this.on(document, "keydown", (event) => this.onKeydown(event));
+        this.bindDrag();
+    }
+    updateOptions(options = {}) {
+        super.updateOptions(options);
+        const component = this.constructor.componentName;
+        const backdrop = getOption(this.options, this.element, component, "backdrop", true);
+        this.backdrop = backdrop === "static" ? "static" : !(backdrop === false || backdrop === "false");
+        this.keyboard = getBooleanOption(this.options, this.element, component, "keyboard", true);
+        this.focus = getBooleanOption(this.options, this.element, component, "focus", true);
+        this.scrollLock = getBooleanOption(this.options, this.element, component, "scrollLock", true);
+        this.draggable = getBooleanOption(this.options, this.element, component, "draggable", true);
+        return this;
+    }
+    bindDrag() {
+        if (!this.dialog)
+            return;
+        const header = this.dialog.querySelector(".modal-header");
+        if (!header)
+            return;
+        this.on(header, "pointerdown", (event) => this.startDrag(event));
+    }
+    startDrag(event) {
+        if (!this.isOpen || !this.draggable || !this.dialog || event.button !== 0)
+            return;
+        const target = event.target instanceof Element ? event.target : null;
+        if (target?.closest("button,a,input,select,textarea,label,[data-modal-close],[data-no-drag]"))
+            return;
+        const originX = Number.parseFloat(this.dialog.style.getPropertyValue("--aksara-modal-x")) || 0;
+        const originY = Number.parseFloat(this.dialog.style.getPropertyValue("--aksara-modal-y")) || 0;
+        const rect = this.dialog.getBoundingClientRect();
+        const baseLeft = rect.left - originX;
+        const baseTop = rect.top - originY;
+        const padding = 8;
+        const move = (moveEvent) => this.drag(moveEvent);
+        const end = () => {
+            document.removeEventListener("pointermove", move);
+            document.removeEventListener("pointerup", end);
+            document.removeEventListener("pointercancel", end);
+            this.dialog?.classList.remove("is-dragging");
+            this.dragState = null;
+        };
+        this.dragState = {
+            originX,
+            originY,
+            pointerX: event.clientX,
+            pointerY: event.clientY,
+            minX: padding - baseLeft,
+            maxX: window.innerWidth - padding - rect.width - baseLeft,
+            minY: padding - baseTop,
+            maxY: window.innerHeight - padding - rect.height - baseTop
+        };
+        this.dialog.classList.add("is-dragging");
+        document.addEventListener("pointermove", move);
+        document.addEventListener("pointerup", end);
+        document.addEventListener("pointercancel", end);
+        event.preventDefault();
+    }
+    drag(event) {
+        if (!this.dialog || !this.dragState)
+            return;
+        const nextX = clamp(this.dragState.originX + event.clientX - this.dragState.pointerX, this.dragState.minX, this.dragState.maxX);
+        const nextY = clamp(this.dragState.originY + event.clientY - this.dragState.pointerY, this.dragState.minY, this.dragState.maxY);
+        this.dialog.style.setProperty("--aksara-modal-x", `${nextX}px`);
+        this.dialog.style.setProperty("--aksara-modal-y", `${nextY}px`);
+    }
+    resetPosition() {
+        if (!this.dialog)
+            return;
+        this.dialog.style.removeProperty("--aksara-modal-x");
+        this.dialog.style.removeProperty("--aksara-modal-y");
+        this.dialog.classList.remove("is-dragging");
+    }
+    show() {
+        if (this.isOpen)
+            return this;
+        this.previousFocus = document.activeElement;
+        this.isOpen = true;
+        this.element.classList.add("modal-open");
+        this.element.setAttribute("aria-hidden", "false");
+        if (this.scrollLock)
+            document.documentElement.style.overflow = "hidden";
+        if (this.focus)
+            this.focusFirst();
+        emit(this.element, "modal:show", { instance: this });
+        return this;
+    }
+    hide() {
+        if (!this.isOpen)
+            return this;
+        this.isOpen = false;
+        this.element.classList.remove("modal-open");
+        this.element.setAttribute("aria-hidden", "true");
+        this.resetPosition();
+        if (this.scrollLock)
+            document.documentElement.style.overflow = "";
+        if (this.previousFocus && typeof this.previousFocus.focus === "function")
+            this.previousFocus.focus();
+        emit(this.element, "modal:hide", { instance: this });
+        return this;
+    }
+    toggle() {
+        return this.isOpen ? this.hide() : this.show();
+    }
+    focusFirst() {
+        const focusable = Array.from(this.element.querySelectorAll(focusableSelector));
+        const first = focusable[0] || this.element;
+        if (!this.element.hasAttribute("tabindex"))
+            this.element.setAttribute("tabindex", "-1");
+        first.focus({ preventScroll: true });
+    }
+    onKeydown(event) {
+        if (!this.isOpen)
+            return;
+        if (event.key === "Escape") {
+            if (this.keyboard) {
+                event.preventDefault();
+                this.hide();
+            }
+            else if (this.backdrop === "static") {
+                const staticClass = `${this.constructor.componentName}-static`;
+                this.element.classList.add(staticClass);
+                setTimeout(() => this.element.classList.remove(staticClass), 150);
+            }
+            return;
+        }
+        if (event.key !== "Tab")
+            return;
+        const focusable = Array.from(this.element.querySelectorAll(focusableSelector));
+        if (!focusable.length) {
+            event.preventDefault();
+            this.element.focus();
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey && document.activeElement === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && document.activeElement === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+}
+export class Dropdown extends Component {
+    static componentName = "dropdown";
+    trigger;
+    menu;
+    isOpen;
+    originalParent;
+    originalSibling;
+    scrollHandler;
+    placement;
+    container;
+    offset;
+    keyboard;
+    closeOnSelect;
+    closeOnOutside;
+    constructor(element, options = {}) {
+        super(element, options);
+        let trigger;
+        let menu = null;
+        if (element.matches("[data-dropdown]")) {
+            trigger = element;
+        }
+        else if (element.classList.contains("dropdown")) {
+            trigger =
+                element.querySelector("[data-dropdown]") || element.querySelector("button, a");
+            menu = element.querySelector(".dropdown-menu");
+        }
+        else {
+            trigger = element;
+        }
+        this.trigger = trigger;
+        if (!menu) {
+            const menuSelector = options.menu ||
+                options.target ||
+                (trigger && (trigger.getAttribute("data-dropdown") || trigger.getAttribute("data-target")));
+            if (menuSelector && typeof menuSelector === "string") {
+                menu = document.querySelector(menuSelector);
+            }
+            else if (menuSelector instanceof HTMLElement) {
+                menu = menuSelector;
+            }
+            if (!menu && trigger) {
+                if (trigger.nextElementSibling && trigger.nextElementSibling.classList.contains("dropdown-menu")) {
+                    menu = trigger.nextElementSibling;
+                }
+                else {
+                    menu = trigger.parentElement?.querySelector(".dropdown-menu") || null;
+                }
+            }
+        }
+        this.menu = menu;
+        this.isOpen = false;
+        this.originalParent = null;
+        this.originalSibling = null;
+        this.scrollHandler = null;
+        this.updateOptions(options);
+        if (this.trigger?.matches(".btn-sm, .input-sm, .form-control-sm, .form-select-sm") ||
+            this.element.classList.contains("dropdown-sm")) {
+            this.menu?.classList.add("dropdown-menu-sm");
+        }
+        if (this.trigger) {
+            this.trigger.setAttribute("aria-haspopup", "true");
+            this.trigger.setAttribute("aria-expanded", "false");
+            this.on(this.trigger, "click", (event) => {
+                const customEvent = event;
+                if (customEvent.__aksaraDropdownHandled)
+                    return;
+                customEvent.__aksaraDropdownHandled = true;
+                event.preventDefault();
+                this.toggle(event);
+            });
+        }
+        this.on(document, "click", (event) => {
+            if (!this.closeOnOutside)
+                return;
+            const target = event.target;
+            if (!this.element.contains(target) && !this.menu?.contains(target)) {
+                this.hide();
+            }
+        });
+        this.on(document, "keydown", (event) => {
+            if (this.keyboard && event.key === "Escape")
+                this.hide();
+        });
+        if (this.menu) {
+            this.on(this.menu, "click", (event) => {
+                const target = event.target;
+                const item = target.closest(".dropdown-item");
+                if (this.closeOnSelect &&
+                    item &&
+                    !item.disabled &&
+                    !item.classList.contains("disabled")) {
+                    this.hide();
+                }
+            });
+        }
+    }
+    updateOptions(options = {}) {
+        super.updateOptions(options);
+        this.placement = getOption(this.options, this.trigger, "dropdown", "placement", getData(this.element, "dropdown", "placement") || "bottom");
+        this.container = getOption(this.options, this.trigger, "dropdown", "container", getData(this.element, "dropdown", "container") || "body");
+        this.offset = getNumberOption(this.options, this.trigger, "dropdown", "offset", getNumberOption({}, this.element, "dropdown", "offset", 4));
+        this.keyboard = getBooleanOption(this.options, this.trigger, "dropdown", "keyboard", getBooleanOption({}, this.element, "dropdown", "keyboard", true));
+        this.closeOnSelect = getBooleanOption(this.options, this.trigger, "dropdown", "closeOnSelect", getBooleanOption({}, this.element, "dropdown", "closeOnSelect", true));
+        this.closeOnOutside = getBooleanOption(this.options, this.trigger, "dropdown", "closeOnOutside", getBooleanOption({}, this.element, "dropdown", "closeOnOutside", true));
+        return this;
+    }
+    position() {
+        if (!this.menu || !this.isOpen || !this.trigger)
+            return;
+        this.menu.style.display = "block";
+        this.menu.style.position = "absolute";
+        this.menu.style.zIndex = "1000";
+        const triggerRect = this.trigger.getBoundingClientRect();
+        const menuRect = this.menu.getBoundingClientRect();
+        const gap = this.offset;
+        let top;
+        let left;
+        let placement = this.placement;
+        if (placement === "auto") {
+            const spaceBelow = window.innerHeight - triggerRect.bottom;
+            const spaceAbove = triggerRect.top;
+            placement = spaceBelow >= menuRect.height || spaceBelow >= spaceAbove ? "bottom" : "top";
+        }
+        this.menu.classList.remove("dropdown-top", "dropdown-bottom", "dropdown-start", "dropdown-end");
+        this.menu.classList.add(`dropdown-${placement}`);
+        const isRtl = document.documentElement.getAttribute("dir") === "rtl" || document.body?.getAttribute("dir") === "rtl";
+        if (placement === "top") {
+            top = triggerRect.top - menuRect.height - gap;
+            left = isRtl ? triggerRect.right - menuRect.width : triggerRect.left;
+        }
+        else if (placement === "start") {
+            top = triggerRect.top;
+            left = isRtl ? triggerRect.right + gap : triggerRect.left - menuRect.width - gap;
+        }
+        else if (placement === "end") {
+            top = triggerRect.top;
+            left = isRtl ? triggerRect.left - menuRect.width - gap : triggerRect.right + gap;
+        }
+        else {
+            top = triggerRect.bottom + gap;
+            left = isRtl ? triggerRect.right - menuRect.width : triggerRect.left;
+        }
+        const viewportWidth = window.innerWidth;
+        left = Math.max(8, Math.min(left, viewportWidth - menuRect.width - 8));
+        this.menu.style.top = `${top + window.scrollY}px`;
+        this.menu.style.left = `${left + window.scrollX}px`;
+        this.menu.style.bottom = "auto";
+        this.menu.style.right = "auto";
+    }
+    show() {
+        if (!this.menu || this.isOpen)
+            return this;
+        this.isOpen = true;
+        this.originalParent = this.menu.parentNode;
+        this.originalSibling = this.menu.nextSibling;
+        let containerEl = document.body;
+        if (typeof this.container === "string" && this.container !== "body") {
+            containerEl = document.querySelector(this.container) || document.body;
+        }
+        else if (this.container instanceof HTMLElement) {
+            containerEl = this.container;
+        }
+        containerEl.appendChild(this.menu);
+        this.menu.classList.add("dropdown-open");
+        this.trigger?.setAttribute("aria-expanded", "true");
+        this.position();
+        this.scrollHandler = () => this.position();
+        window.addEventListener("scroll", this.scrollHandler, { passive: true });
+        window.addEventListener("resize", this.scrollHandler);
+        emit(this.element, "dropdown:show", { instance: this });
+        return this;
+    }
+    hide() {
+        if (!this.menu || !this.isOpen)
+            return this;
+        this.isOpen = false;
+        if (this.scrollHandler) {
+            window.removeEventListener("scroll", this.scrollHandler);
+            window.removeEventListener("resize", this.scrollHandler);
+            this.scrollHandler = null;
+        }
+        this.menu.classList.remove("dropdown-open", "dropdown-top", "dropdown-bottom", "dropdown-start", "dropdown-end");
+        this.trigger?.setAttribute("aria-expanded", "false");
+        if (this.originalParent) {
+            this.originalParent.insertBefore(this.menu, this.originalSibling);
+        }
+        this.menu.style.display = "";
+        this.menu.style.position = "";
+        this.menu.style.top = "";
+        this.menu.style.left = "";
+        this.menu.style.zIndex = "";
+        emit(this.element, "dropdown:hide", { instance: this });
+        return this;
+    }
+    toggle(event) {
+        const clickEvent = (event || window.event);
+        if (clickEvent && clickEvent.type === "click") {
+            if (clickEvent.__aksaraDropdownHandled && !event) {
+                return this;
+            }
+            clickEvent.__aksaraDropdownHandled = true;
+        }
+        return this.isOpen ? this.hide() : this.show();
+    }
+    destroy() {
+        this.hide();
+        super.destroy();
+    }
+}
+export class FloatingText extends Component {
+    static dataAttribute = "data-floating";
+    static role = "tooltip";
+    static componentName = "floating";
+    tip;
+    showTimeout;
+    hideTimeout;
+    container;
+    html;
+    content;
+    placement;
+    trigger;
+    offset;
+    showDelay;
+    hideDelay;
+    keyboard;
+    constructor(element, options = {}) {
+        super(element, options);
+        this.tip = null;
+        this.showTimeout = null;
+        this.hideTimeout = null;
+        this.updateOptions(options);
+        this.bindTriggers();
+        this.on(document, "keydown", (event) => {
+            if (this.keyboard && event.key === "Escape")
+                this.hide();
+        });
+    }
+    updateOptions(options = {}) {
+        super.updateOptions(options);
+        const ctor = this.constructor;
+        const component = ctor.componentName;
+        const rawContent = (this.options.content ??
+            this.options.text ??
+            getData(this.element, component, "content") ??
+            this.element.getAttribute(ctor.dataAttribute) ??
+            "");
+        this.container = getOption(this.options, this.element, component, "container", this.element.getAttribute("data-container") || "body");
+        this.html = getBooleanOption(this.options, this.element, component, "html", this.element.getAttribute("data-html") === "true");
+        this.content = rawContent;
+        this.placement = getOption(this.options, this.element, component, "placement", this.element.getAttribute("data-placement") || "top");
+        this.trigger = getOption(this.options, this.element, component, "trigger", "hover focus");
+        this.offset = getNumberOption(this.options, this.element, component, "offset", 8);
+        this.showDelay = getNumberOption(this.options, this.element, component, "showDelay", 0);
+        this.hideDelay = getNumberOption(this.options, this.element, component, "hideDelay", 0);
+        this.keyboard = getBooleanOption(this.options, this.element, component, "keyboard", true);
+        if (this.tip) {
+            if (this.html) {
+                this.tip.innerHTML = this.content;
+            }
+            else {
+                this.tip.textContent = this.content;
+            }
+            this.position();
+        }
+        return this;
+    }
+    bindTriggers() {
+        const triggers = String(this.trigger).split(/\s+/).filter(Boolean);
+        if (triggers.includes("hover")) {
+            this.on(this.element, "mouseenter", () => this.scheduleShow());
+            this.on(this.element, "mouseleave", () => this.scheduleHide());
+        }
+        if (triggers.includes("focus")) {
+            this.on(this.element, "focus", () => this.scheduleShow());
+            this.on(this.element, "blur", () => this.scheduleHide());
+        }
+        if (triggers.includes("click")) {
+            this.on(this.element, "click", (event) => {
+                event.preventDefault();
+                this.toggle();
+            });
+        }
+    }
+    scheduleShow() {
+        if (this.hideTimeout)
+            clearTimeout(this.hideTimeout);
+        if (this.showTimeout)
+            clearTimeout(this.showTimeout);
+        this.showTimeout = setTimeout(() => this.show(), this.showDelay);
+    }
+    scheduleHide() {
+        if (this.showTimeout)
+            clearTimeout(this.showTimeout);
+        if (this.hideTimeout)
+            clearTimeout(this.hideTimeout);
+        this.hideTimeout = setTimeout(() => this.hide(), this.hideDelay);
+    }
+    show() {
+        if (this.tip || !this.content)
+            return this;
+        const ctor = this.constructor;
+        this.tip = document.createElement("div");
+        this.tip.className = ctor.componentName;
+        if (this.html) {
+            this.tip.innerHTML = this.content;
+        }
+        else {
+            this.tip.textContent = this.content;
+        }
+        this.tip.setAttribute("role", ctor.role);
+        let containerEl = document.body;
+        if (typeof this.container === "string" && this.container !== "body") {
+            containerEl = document.querySelector(this.container) || document.body;
+        }
+        else if (this.container instanceof HTMLElement) {
+            containerEl = this.container;
+        }
+        containerEl.append(this.tip);
+        this.position();
+        emit(this.element, `${ctor.componentName}:show`, { instance: this });
+        return this;
+    }
+    toggle() {
+        return this.tip ? this.hide() : this.show();
+    }
+    hide() {
+        if (!this.tip)
+            return this;
+        const ctor = this.constructor;
+        this.tip.remove();
+        this.tip = null;
+        emit(this.element, `${ctor.componentName}:hide`, { instance: this });
+        return this;
+    }
+    position() {
+        if (!this.tip)
+            return;
+        const rect = this.element.getBoundingClientRect();
+        const tipRect = this.tip.getBoundingClientRect();
+        const gap = this.offset;
+        const isRtl = document.documentElement.getAttribute("dir") === "rtl" || document.body?.getAttribute("dir") === "rtl";
+        let placement = this.placement;
+        if (placement === "auto") {
+            const spaceBelow = window.innerHeight - rect.bottom;
+            const spaceAbove = rect.top;
+            placement = spaceAbove >= tipRect.height || spaceAbove >= spaceBelow ? "top" : "bottom";
+        }
+        let physicalPlacement = placement;
+        if (placement === "start") {
+            physicalPlacement = isRtl ? "right" : "left";
+        }
+        else if (placement === "end") {
+            physicalPlacement = isRtl ? "left" : "right";
+        }
+        const ctor = this.constructor;
+        this.tip.className = `${ctor.componentName} ${ctor.componentName}-${placement}`;
+        const topMap = {
+            top: rect.top - tipRect.height - gap,
+            bottom: rect.bottom + gap,
+            left: rect.top + rect.height / 2 - tipRect.height / 2,
+            right: rect.top + rect.height / 2 - tipRect.height / 2
+        };
+        const top = topMap[physicalPlacement] ?? rect.top - tipRect.height - gap;
+        const leftMap = {
+            top: rect.left + rect.width / 2 - tipRect.width / 2,
+            bottom: rect.left + rect.width / 2 - tipRect.width / 2,
+            left: rect.left - tipRect.width - gap,
+            right: rect.right + gap
+        };
+        const left = leftMap[physicalPlacement] ?? rect.left;
+        this.tip.style.top = `${Math.max(4, top + window.scrollY)}px`;
+        this.tip.style.left = `${Math.max(4, left + window.scrollX)}px`;
+    }
+    destroy() {
+        if (this.showTimeout)
+            clearTimeout(this.showTimeout);
+        if (this.hideTimeout)
+            clearTimeout(this.hideTimeout);
+        this.hide();
+        super.destroy();
+    }
+}
+export class Tooltip extends FloatingText {
+    static componentName = "tooltip";
+    static dataAttribute = "data-tooltip";
+    static role = "tooltip";
+}
+export class Popover extends FloatingText {
+    static componentName = "popover";
+    static dataAttribute = "data-popover";
+    static role = "dialog";
+}
+function collapsePanel(panel, duration = 250) {
+    const animatedPanel = panel;
+    if (animatedPanel._aksaraCollapseTimer) {
+        clearTimeout(animatedPanel._aksaraCollapseTimer);
+        delete animatedPanel._aksaraCollapseTimer;
+    }
+    if (animatedPanel._aksaraCollapseEnd) {
+        panel.removeEventListener("transitionend", animatedPanel._aksaraCollapseEnd);
+        delete animatedPanel._aksaraCollapseEnd;
+    }
+    if (duration <= 0 ||
+        (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)) {
+        panel.hidden = true;
+        panel.style.removeProperty("height");
+        panel.style.removeProperty("overflow");
+        panel.style.removeProperty("padding-top");
+        panel.style.removeProperty("padding-bottom");
+        panel.style.removeProperty("opacity");
+        panel.style.removeProperty("transition");
+        return;
+    }
+    const computed = window.getComputedStyle(panel);
+    const currentHeight = panel.getBoundingClientRect().height;
+    const currentPaddingTop = computed.paddingTop;
+    const currentPaddingBottom = computed.paddingBottom;
+    panel.style.overflow = "hidden";
+    panel.style.height = `${currentHeight}px`;
+    panel.style.paddingTop = currentPaddingTop;
+    panel.style.paddingBottom = currentPaddingBottom;
+    panel.style.opacity = "1";
+    panel.style.transition = `height ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), padding-top ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), padding-bottom ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${Math.round(duration * 0.7)}ms ease`;
+    void panel.offsetHeight;
+    panel.style.height = "0px";
+    panel.style.paddingTop = "0px";
+    panel.style.paddingBottom = "0px";
+    panel.style.opacity = "0";
+    const cleanup = () => {
+        panel.hidden = true;
+        panel.style.removeProperty("height");
+        panel.style.removeProperty("overflow");
+        panel.style.removeProperty("padding-top");
+        panel.style.removeProperty("padding-bottom");
+        panel.style.removeProperty("opacity");
+        panel.style.removeProperty("transition");
+        if (animatedPanel._aksaraCollapseEnd) {
+            panel.removeEventListener("transitionend", animatedPanel._aksaraCollapseEnd);
+            delete animatedPanel._aksaraCollapseEnd;
+        }
+        delete animatedPanel._aksaraCollapseTimer;
+    };
+    const onEnd = (e) => {
+        if (e.target === panel && e.propertyName === "height") {
+            cleanup();
+        }
+    };
+    animatedPanel._aksaraCollapseEnd = onEnd;
+    panel.addEventListener("transitionend", onEnd);
+    animatedPanel._aksaraCollapseTimer = setTimeout(cleanup, duration + 60);
+}
+function expandPanel(panel, duration = 250) {
+    const animatedPanel = panel;
+    if (animatedPanel._aksaraCollapseTimer) {
+        clearTimeout(animatedPanel._aksaraCollapseTimer);
+        delete animatedPanel._aksaraCollapseTimer;
+    }
+    if (animatedPanel._aksaraCollapseEnd) {
+        panel.removeEventListener("transitionend", animatedPanel._aksaraCollapseEnd);
+        delete animatedPanel._aksaraCollapseEnd;
+    }
+    if (duration <= 0 ||
+        (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)) {
+        panel.hidden = false;
+        panel.style.removeProperty("height");
+        panel.style.removeProperty("overflow");
+        panel.style.removeProperty("padding-top");
+        panel.style.removeProperty("padding-bottom");
+        panel.style.removeProperty("opacity");
+        panel.style.removeProperty("transition");
+        return;
+    }
+    panel.hidden = false;
+    panel.style.removeProperty("height");
+    panel.style.removeProperty("padding-top");
+    panel.style.removeProperty("padding-bottom");
+    panel.style.removeProperty("opacity");
+    panel.style.removeProperty("transition");
+    const computed = window.getComputedStyle(panel);
+    const targetPaddingTop = computed.paddingTop;
+    const targetPaddingBottom = computed.paddingBottom;
+    const targetHeight = panel.getBoundingClientRect().height;
+    panel.style.overflow = "hidden";
+    panel.style.height = "0px";
+    panel.style.paddingTop = "0px";
+    panel.style.paddingBottom = "0px";
+    panel.style.opacity = "0";
+    void panel.offsetHeight;
+    panel.style.transition = `height ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), padding-top ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), padding-bottom ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${duration}ms ease`;
+    panel.style.height = `${targetHeight}px`;
+    panel.style.paddingTop = targetPaddingTop;
+    panel.style.paddingBottom = targetPaddingBottom;
+    panel.style.opacity = "1";
+    const cleanup = () => {
+        panel.style.removeProperty("height");
+        panel.style.removeProperty("overflow");
+        panel.style.removeProperty("padding-top");
+        panel.style.removeProperty("padding-bottom");
+        panel.style.removeProperty("opacity");
+        panel.style.removeProperty("transition");
+        if (animatedPanel._aksaraCollapseEnd) {
+            panel.removeEventListener("transitionend", animatedPanel._aksaraCollapseEnd);
+            delete animatedPanel._aksaraCollapseEnd;
+        }
+        delete animatedPanel._aksaraCollapseTimer;
+    };
+    const onEnd = (e) => {
+        if (e.target === panel && e.propertyName === "height") {
+            cleanup();
+        }
+    };
+    animatedPanel._aksaraCollapseEnd = onEnd;
+    panel.addEventListener("transitionend", onEnd);
+    animatedPanel._aksaraCollapseTimer = setTimeout(cleanup, duration + 60);
+}
+export class Accordion extends Component {
+    static componentName = "accordion";
+    parent;
+    collapsible;
+    buttonSelector;
+    duration;
+    constructor(element, options = {}) {
+        super(element, options);
+        this.updateOptions(options);
+        this.on(element, "click", (event) => {
+            const target = event.target;
+            const button = target.closest(this.buttonSelector);
+            if (!button || !element.contains(button))
+                return;
+            const panelSelector = button.getAttribute("data-accordion");
+            if (!panelSelector)
+                return;
+            const panel = document.querySelector(panelSelector);
+            if (!panel)
+                return;
+            const expanded = button.getAttribute("aria-expanded") === "true";
+            if (expanded && !this.collapsible)
+                return;
+            const parentScope = this.getParentScope();
+            if (!expanded && parentScope) {
+                parentScope.querySelectorAll(this.buttonSelector).forEach((otherButton) => {
+                    if (otherButton === button)
+                        return;
+                    otherButton.setAttribute("aria-expanded", "false");
+                    const otherPanelSelector = otherButton.getAttribute("data-accordion");
+                    if (otherPanelSelector) {
+                        const otherPanel = document.querySelector(otherPanelSelector);
+                        if (otherPanel && (!otherPanel.hidden || otherPanel.offsetHeight > 0)) {
+                            collapsePanel(otherPanel, this.duration);
+                        }
+                    }
+                });
+            }
+            button.setAttribute("aria-expanded", String(!expanded));
+            if (expanded) {
+                collapsePanel(panel, this.duration);
+            }
+            else {
+                expandPanel(panel, this.duration);
+            }
+            emit(element, "accordion:toggle", { button, panel, expanded: !expanded });
+        });
+    }
+    updateOptions(options = {}) {
+        super.updateOptions(options);
+        const parentVal = getOption(this.options, this.element, "accordion", "parent", true);
+        if (parentVal === "true")
+            this.parent = true;
+        else if (parentVal === "false")
+            this.parent = false;
+        else
+            this.parent = parentVal;
+        this.collapsible = getBooleanOption(this.options, this.element, "accordion", "collapsible", true);
+        this.buttonSelector = getOption(this.options, this.element, "accordion", "buttonSelector", "[data-accordion]");
+        this.duration = getNumberOption(this.options, this.element, "accordion", "duration", 250);
+        return this;
+    }
+    getParentScope() {
+        if (this.parent === false)
+            return null;
+        if (this.parent === true)
+            return this.element;
+        if (this.parent instanceof Element)
+            return this.parent;
+        if (typeof this.parent === "string")
+            return document.querySelector(this.parent) || this.element;
+        return this.element;
+    }
+}
+export class Tabs extends Component {
+    static componentName = "tabs";
+    tabSelector;
+    panelSelector;
+    active;
+    activeIndex;
+    keyboard;
+    loop;
+    orientation;
+    constructor(element, options = {}) {
+        super(element, options);
+        this.updateOptions(options);
+        this.on(element, "click", (event) => {
+            const target = event.target;
+            const tab = target.closest(this.tabSelector);
+            if (!tab || !element.contains(tab))
+                return;
+            event.preventDefault();
+            this.show(tab);
+        });
+        this.on(element, "keydown", (event) => {
+            if (!this.keyboard)
+                return;
+            const keyEvent = event;
+            const keys = this.orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+            if (!keys.includes(keyEvent.key))
+                return;
+            const tabs = Array.from(element.querySelectorAll(this.tabSelector));
+            const index = tabs.indexOf(document.activeElement);
+            if (index < 0)
+                return;
+            event.preventDefault();
+            const isNext = keyEvent.key === "ArrowRight" || keyEvent.key === "ArrowDown";
+            const fallback = this.loop ? (isNext ? tabs[0] : tabs[tabs.length - 1]) : tabs[index];
+            const next = isNext ? tabs[index + 1] || fallback : tabs[index - 1] || fallback;
+            if (next) {
+                next.focus();
+                this.show(next);
+            }
+        });
+        this.activateInitial();
+    }
+    updateOptions(options = {}) {
+        const shouldActivate = (options.active !== undefined || options.activeIndex !== undefined) && this.cleanups.length > 0;
+        super.updateOptions(options);
+        this.tabSelector = getOption(this.options, this.element, "tabs", "tabSelector", "[data-tabs]");
+        this.panelSelector = getOption(this.options, this.element, "tabs", "panelSelector", null);
+        this.active = getOption(this.options, this.element, "tabs", "active", null);
+        this.activeIndex = getNumberOption(this.options, this.element, "tabs", "activeIndex", -1);
+        this.keyboard = getBooleanOption(this.options, this.element, "tabs", "keyboard", true);
+        this.loop = getBooleanOption(this.options, this.element, "tabs", "loop", true);
+        this.orientation = getOption(this.options, this.element, "tabs", "orientation", this.element.getAttribute("aria-orientation") || "horizontal");
+        this.element.setAttribute("role", this.element.getAttribute("role") || "tablist");
+        this.element.setAttribute("aria-orientation", this.orientation);
+        if (shouldActivate)
+            this.activateInitial();
+        return this;
+    }
+    activateInitial() {
+        const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+        if (!tabs.length)
+            return;
+        let initial = null;
+        if (this.active instanceof HTMLElement) {
+            initial = this.active;
+        }
+        else if (typeof this.active === "string") {
+            initial =
+                this.element.querySelector(this.active) || document.querySelector(this.active);
+        }
+        if (!initial && this.activeIndex >= 0) {
+            initial = tabs[this.activeIndex] || null;
+        }
+        if (!initial) {
+            initial = tabs.find((tab) => tab.getAttribute("aria-selected") === "true") || tabs[0];
+        }
+        if (initial)
+            this.show(initial);
+    }
+    show(tab) {
+        const selector = tab.getAttribute("data-tabs");
+        const panel = selector ? document.querySelector(selector) : null;
+        if (!panel)
+            return this;
+        this.element.querySelectorAll(this.tabSelector).forEach((item) => {
+            const selected = item === tab;
+            item.setAttribute("role", item.getAttribute("role") || "tab");
+            item.setAttribute("aria-selected", String(selected));
+            item.tabIndex = selected ? 0 : -1;
+            const targetSelector = item.getAttribute("data-tabs");
+            const target = targetSelector ? document.querySelector(targetSelector) : null;
+            if (target)
+                target.hidden = !selected;
+        });
+        if (this.panelSelector) {
+            document.querySelectorAll(this.panelSelector).forEach((item) => {
+                if (item !== panel)
+                    item.hidden = true;
+            });
+        }
+        panel.setAttribute("role", panel.getAttribute("role") || "tabpanel");
+        emit(this.element, "tabs:show", { tab, panel, instance: this });
+        return this;
+    }
+}
+export class Toast extends Component {
+    static componentName = "toast";
+    timeout = null;
+    delay;
+    autohide;
+    constructor(element, options = {}) {
+        super(element, options);
+        this.updateOptions(options);
+        element.setAttribute("role", element.getAttribute("role") || "status");
+        element.setAttribute("aria-live", element.getAttribute("aria-live") || "polite");
+    }
+    updateOptions(options = {}) {
+        super.updateOptions(options);
+        this.delay = getNumberOption(this.options, this.element, "toast", "delay", 5000);
+        this.autohide = getBooleanOption(this.options, this.element, "toast", "autohide", true);
+        return this;
+    }
+    show() {
+        this.element.classList.add("toast-show");
+        if (this.timeout)
+            clearTimeout(this.timeout);
+        if (this.autohide && this.delay > 0)
+            this.timeout = setTimeout(() => this.hide(), this.delay);
+        emit(this.element, "toast:show", { instance: this });
+        return this;
+    }
+    hide() {
+        this.element.classList.remove("toast-show");
+        if (this.timeout)
+            clearTimeout(this.timeout);
+        emit(this.element, "toast:hide", { instance: this });
+        return this;
+    }
+    destroy() {
+        if (this.timeout)
+            clearTimeout(this.timeout);
+        super.destroy();
+    }
+}
+export class Carousel extends Component {
+    static componentName = "carousel";
+    timeout = null;
+    items;
+    index;
+    interval;
+    autoplay;
+    pauseOnHover;
+    keyboard;
+    loop;
+    constructor(element, options = {}) {
+        super(element, options);
+        this.items = Array.from(element.querySelectorAll("[data-carousel-item]"));
+        this.index = this.resolveInitialIndex();
+        this.updateOptions(options);
+        this.show(this.index);
+        this.on(element, "click", (event) => {
+            const target = event.target;
+            const action = target.closest("[data-carousel]");
+            if (!action)
+                return;
+            const value = action.getAttribute("data-carousel");
+            if (value === "next")
+                this.next();
+            if (value === "prev")
+                this.prev();
+            if (value !== "next" && value !== "prev" && value !== "")
+                this.show(Number(value));
+        });
+        this.on(element, "keydown", (event) => {
+            const keyEvent = event;
+            if (!this.keyboard || !["ArrowLeft", "ArrowRight"].includes(keyEvent.key))
+                return;
+            event.preventDefault();
+            if (keyEvent.key === "ArrowRight")
+                this.next();
+            if (keyEvent.key === "ArrowLeft")
+                this.prev();
+        });
+        if (this.pauseOnHover) {
+            this.on(element, "mouseenter", () => this.pause());
+            this.on(element, "mouseleave", () => this.play());
+        }
+        if (this.autoplay)
+            this.play();
+    }
+    updateOptions(options = {}) {
+        super.updateOptions(options);
+        this.interval = getNumberOption(this.options, this.element, "carousel", "interval", 5000);
+        this.autoplay = getBooleanOption(this.options, this.element, "carousel", "autoplay", false);
+        this.pauseOnHover = getBooleanOption(this.options, this.element, "carousel", "pauseOnHover", true);
+        this.keyboard = getBooleanOption(this.options, this.element, "carousel", "keyboard", true);
+        this.loop = getBooleanOption(this.options, this.element, "carousel", "loop", true);
+        const activeIndex = getNumberOption(this.options, this.element, "carousel", "activeIndex", -1);
+        if (activeIndex >= 0)
+            this.show(activeIndex);
+        if (this.autoplay)
+            this.play();
+        if (!this.autoplay)
+            this.pause();
+        return this;
+    }
+    resolveInitialIndex() {
+        const configured = getNumberOption(this.options, this.element, "carousel", "activeIndex", -1);
+        if (configured >= 0)
+            return configured;
+        return Math.max(0, this.items.findIndex((item) => !item.hidden));
+    }
+    show(index) {
+        if (!this.items.length)
+            return this;
+        if (!this.loop && (index < 0 || index >= this.items.length))
+            return this;
+        this.index = (index + this.items.length) % this.items.length;
+        this.items.forEach((item, itemIndex) => {
+            item.hidden = itemIndex !== this.index;
+        });
+        emit(this.element, "carousel:show", { index: this.index, instance: this });
+        return this;
+    }
+    next() {
+        return this.show(this.index + 1);
+    }
+    prev() {
+        return this.show(this.index - 1);
+    }
+    play() {
+        if (this.timeout)
+            clearInterval(this.timeout);
+        if (this.autoplay && this.interval > 0) {
+            this.timeout = setInterval(() => this.next(), this.interval);
+        }
+        return this;
+    }
+    pause() {
+        if (this.timeout)
+            clearInterval(this.timeout);
+        this.timeout = null;
+        return this;
+    }
+    destroy() {
+        this.pause();
+        super.destroy();
+    }
+}
+export class Offcanvas extends Modal {
+    static componentName = "offcanvas";
+    show() {
+        if (this.isOpen)
+            return this;
+        this.previousFocus = document.activeElement;
+        this.isOpen = true;
+        this.element.classList.add("offcanvas-open");
+        this.element.setAttribute("aria-hidden", "false");
+        if (this.scrollLock)
+            document.documentElement.style.overflow = "hidden";
+        if (this.focus)
+            this.focusFirst();
+        emit(this.element, "offcanvas:show", { instance: this });
+        return this;
+    }
+    hide() {
+        if (!this.isOpen)
+            return this;
+        this.isOpen = false;
+        this.element.classList.remove("offcanvas-open");
+        this.element.setAttribute("aria-hidden", "true");
+        if (this.scrollLock)
+            document.documentElement.style.overflow = "";
+        if (this.previousFocus && typeof this.previousFocus.focus === "function")
+            this.previousFocus.focus();
+        emit(this.element, "offcanvas:hide", { instance: this });
+        return this;
+    }
+}
+function readTriggerOptions(trigger, component, names) {
+    return names.reduce((options, name) => {
+        const value = getData(trigger, component, name);
+        if (value !== null)
+            options[name] = value;
+        return options;
+    }, {});
+}
+function dismissTarget(target) {
+    if (!target)
+        return;
+    if (target.classList.contains("modal")) {
+        getInstance(target, Modal).hide();
+    }
+    else if (target.classList.contains("offcanvas")) {
+        getInstance(target, Offcanvas).hide();
+    }
+    else if (target.classList.contains("toast")) {
+        getInstance(target, Toast).hide();
+    }
+    else if (target.classList.contains("dropdown") || target.matches("[data-dropdown]")) {
+        getInstance(target, Dropdown).hide();
+    }
+    else {
+        target.remove();
+    }
+}
+function resolveDismissTargets(trigger) {
+    const selector = trigger.getAttribute("data-dismiss");
+    if (selector) {
+        try {
+            return Array.from(document.querySelectorAll(selector));
+        }
+        catch {
+            return [];
+        }
+    }
+    const localTarget = trigger.closest(".alert,.toast,.modal,.offcanvas,.dropdown,.popover,.tooltip");
+    return localTarget ? [localTarget] : [];
+}
+function bindDataApi() {
+    document.querySelectorAll("[data-dismiss]").forEach((trigger) => {
+        const customTrigger = trigger;
+        if (customTrigger.__aksaraDismissTrigger)
+            return;
+        customTrigger.__aksaraDismissTrigger = true;
+        trigger.addEventListener("click", (event) => {
+            event.preventDefault();
+            resolveDismissTargets(trigger).forEach((target) => dismissTarget(target));
+        });
+    });
+    document.querySelectorAll("[data-modal-close]").forEach((trigger) => {
+        const customTrigger = trigger;
+        if (customTrigger.__aksaraModalCloseTrigger)
+            return;
+        customTrigger.__aksaraModalCloseTrigger = true;
+        trigger.addEventListener("click", (event) => {
+            event.preventDefault();
+            const targetSelector = trigger.getAttribute("data-modal-close");
+            const modal = targetSelector
+                ? document.querySelector(targetSelector)
+                : trigger.closest(".modal");
+            if (modal)
+                getInstance(modal, Modal).hide();
+        });
+    });
+    document.querySelectorAll("[data-modal]").forEach((trigger) => {
+        const customTrigger = trigger;
+        if (customTrigger.__aksaraModalTrigger)
+            return;
+        customTrigger.__aksaraModalTrigger = true;
+        trigger.addEventListener("click", (event) => {
+            event.preventDefault();
+            const targetSelector = trigger.getAttribute("data-modal");
+            if (targetSelector) {
+                const target = document.querySelector(targetSelector);
+                if (target) {
+                    const options = readTriggerOptions(trigger, "modal", [
+                        "backdrop",
+                        "keyboard",
+                        "focus",
+                        "scrollLock",
+                        "draggable"
+                    ]);
+                    getInstance(target, Modal, options).show();
+                }
+            }
+        });
+    });
+    document.querySelectorAll("[data-offcanvas-close]").forEach((trigger) => {
+        const customTrigger = trigger;
+        if (customTrigger.__aksaraOffcanvasCloseTrigger)
+            return;
+        customTrigger.__aksaraOffcanvasCloseTrigger = true;
+        trigger.addEventListener("click", (event) => {
+            event.preventDefault();
+            const targetSelector = trigger.getAttribute("data-offcanvas-close");
+            const panel = targetSelector
+                ? document.querySelector(targetSelector)
+                : trigger.closest(".offcanvas");
+            if (panel)
+                getInstance(panel, Offcanvas).hide();
+        });
+    });
+    document.querySelectorAll("[data-offcanvas]").forEach((trigger) => {
+        const customTrigger = trigger;
+        if (customTrigger.__aksaraOffcanvasTrigger)
+            return;
+        customTrigger.__aksaraOffcanvasTrigger = true;
+        trigger.addEventListener("click", (event) => {
+            event.preventDefault();
+            const targetSelector = trigger.getAttribute("data-offcanvas");
+            if (targetSelector) {
+                const target = document.querySelector(targetSelector);
+                if (target) {
+                    const options = readTriggerOptions(trigger, "offcanvas", ["backdrop", "keyboard", "focus", "scrollLock"]);
+                    getInstance(target, Offcanvas, options).show();
+                }
+            }
+        });
+    });
+    document.querySelectorAll("[data-toast]").forEach((trigger) => {
+        const customTrigger = trigger;
+        if (customTrigger.__aksaraToastTrigger)
+            return;
+        customTrigger.__aksaraToastTrigger = true;
+        trigger.addEventListener("click", (event) => {
+            event.preventDefault();
+            const targetSelector = trigger.getAttribute("data-toast");
+            if (targetSelector) {
+                const target = document.querySelector(targetSelector);
+                if (target) {
+                    const options = readTriggerOptions(trigger, "toast", ["delay", "autohide"]);
+                    getInstance(target, Toast, options).show();
+                }
+            }
+        });
+    });
+}
+const injectedArbitraryRules = new Set();
+let arbitrarySheet = null;
+let arbitraryRuleIndex = 0;
+function getArbitrarySheet() {
+    if (typeof document === "undefined")
+        return null;
+    if (!arbitrarySheet) {
+        if ("adoptedStyleSheets" in document && typeof CSSStyleSheet !== "undefined") {
+            arbitrarySheet = new CSSStyleSheet();
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, arbitrarySheet];
+        }
+    }
+    return arbitrarySheet;
+}
+function escapeArbitraryClass(className) {
+    return Array.from(className)
+        .map((char, index) => {
+        if (/^[a-zA-Z_-]$/.test(char))
+            return char;
+        if (/^[0-9]$/.test(char)) {
+            return index === 0 ? `\\${char.charCodeAt(0).toString(16).padStart(6, "0")}` : char;
+        }
+        return `\\${char}`;
+    })
+        .join("");
+}
+const runtimeArbitraryPropertyMap = {
+    m: (v) => `margin:${v}`,
+    mt: (v) => `margin-block-start:${v}`,
+    mb: (v) => `margin-block-end:${v}`,
+    ms: (v) => `margin-inline-start:${v}`,
+    me: (v) => `margin-inline-end:${v}`,
+    mx: (v) => `margin-inline:${v}`,
+    my: (v) => `margin-block:${v}`,
+    p: (v) => `padding:${v}`,
+    pt: (v) => `padding-block-start:${v}`,
+    pb: (v) => `padding-block-end:${v}`,
+    ps: (v) => `padding-inline-start:${v}`,
+    pe: (v) => `padding-inline-end:${v}`,
+    px: (v) => `padding-inline:${v}`,
+    py: (v) => `padding-block:${v}`,
+    gap: (v) => `gap:${v}`,
+    "row-gap": (v) => `row-gap:${v}`,
+    "col-gap": (v) => `column-gap:${v}`,
+    g: (v) => `--aksara-gutter-x:${v};--aksara-gutter-y:${v}`,
+    gx: (v) => `--aksara-gutter-x:${v}`,
+    gy: (v) => `--aksara-gutter-y:${v}`,
+    w: (v) => `width:${v}`,
+    h: (v) => `height:${v}`,
+    "min-w": (v) => `min-width:${v}`,
+    "max-w": (v) => `max-width:${v}`,
+    "min-h": (v) => `min-height:${v}`,
+    "max-h": (v) => `max-height:${v}`,
+    top: (v) => `inset-block-start:${v}`,
+    bottom: (v) => `inset-block-end:${v}`,
+    start: (v) => `inset-inline-start:${v}`,
+    end: (v) => `inset-inline-end:${v}`,
+    inset: (v) => `inset:${v}`,
+    "inset-x": (v) => `inset-inline:${v}`,
+    "inset-y": (v) => `inset-block:${v}`,
+    "translate-x": (v) => `transform:translateX(${v})`,
+    "translate-y": (v) => `transform:translateY(${v})`,
+    rotate: (v) => `transform:rotate(${v})`,
+    scale: (v) => `transform:scale(${v})`,
+    rounded: (v) => `border-radius:${v}`,
+    border: (v) => `border-width:${v}`,
+    opacity: (v) => `opacity:${v}`,
+    z: (v) => `z-index:${v}`,
+    leading: (v) => `line-height:${v}`,
+    tracking: (v) => `letter-spacing:${v}`,
+    text: (v) => (/^(#[0-9a-fA-F]+|rgb|hsl)/.test(v) ? `color:${v}` : `font-size:${v}`),
+    bg: (v) => `background-color:${v}`,
+    overscroll: (v) => `overscroll-behavior:${v}`,
+    "overscroll-x": (v) => `overscroll-behavior-x:${v}`,
+    "overscroll-y": (v) => `overscroll-behavior-y:${v}`
+};
+const runtimeBreakpoints = {
+    sm: "36rem",
+    md: "48rem",
+    lg: "62rem",
+    xl: "75rem",
+    "2xl": "87.5rem",
+    "3xl": "100rem"
+};
+const runtimeStateSelectors = {
+    hover: ":hover",
+    focus: ":focus",
+    active: ":active",
+    disabled: ":disabled",
+    checked: ":checked",
+    selected: '[aria-selected="true"]',
+    visited: ":visited",
+    first: ":first-child",
+    last: ":last-child",
+    odd: ":nth-child(odd)",
+    even: ":nth-child(even)"
+};
+function injectArbitraryClass(className) {
+    if (injectedArbitraryRules.has(className))
+        return;
+    injectedArbitraryRules.add(className);
+    const parts = className.split(":");
+    const utility = parts.pop();
+    if (!utility)
+        return;
+    const match = utility.match(/^(-)?([a-zA-Z0-9_-]+)-\[(.+)\]$/);
+    if (!match)
+        return;
+    const isNegative = Boolean(match[1]);
+    const prop = match[2];
+    let val = match[3];
+    const resolver = runtimeArbitraryPropertyMap[prop];
+    if (!resolver)
+        return;
+    if (isNegative && !val.startsWith("-")) {
+        val = `-${val}`;
+    }
+    const declarations = resolver(val);
+    const escaped = escapeArbitraryClass(className);
+    let selector = `.${escaped}`;
+    let stateSelector = "";
+    let themeVariant = "";
+    let breakpointVariant = "";
+    for (const v of parts) {
+        if (v === "dark" || v === "light")
+            themeVariant = v;
+        else if (runtimeBreakpoints[v])
+            breakpointVariant = v;
+        else if (runtimeStateSelectors[v])
+            stateSelector += runtimeStateSelectors[v];
+    }
+    selector += stateSelector;
+    let rule = `${selector}{${declarations}}`;
+    if (themeVariant) {
+        rule =
+            themeVariant === "dark"
+                ? `[data-theme="dark"] ${selector},.dark ${selector}{${declarations}}`
+                : `[data-theme="light"] ${selector},.light ${selector}{${declarations}}`;
+    }
+    if (breakpointVariant) {
+        rule = `@media (min-width:${runtimeBreakpoints[breakpointVariant]}){${rule}}`;
+    }
+    const sheet = getArbitrarySheet();
+    if (sheet) {
+        try {
+            sheet.insertRule(rule, arbitraryRuleIndex++);
+        }
+        catch {
+            // Ignore if browser rejects rule syntax
+        }
+    }
+}
+function processElementClasses(el) {
+    const classAttr = el.getAttribute("class");
+    if (!classAttr || !classAttr.includes("-["))
+        return;
+    const tokens = classAttr.split(/\s+/);
+    for (const token of tokens) {
+        if (token.includes("-[") && token.endsWith("]")) {
+            injectArbitraryClass(token);
+        }
+    }
+}
+function scanArbitraryDom(root = document) {
+    if (typeof document === "undefined")
+        return;
+    if (root instanceof Element) {
+        processElementClasses(root);
+    }
+    root.querySelectorAll('[class*="-["]').forEach(processElementClasses);
+}
+let mutationObserverStarted = false;
+function setupArbitraryObserver() {
+    if (mutationObserverStarted || typeof MutationObserver === "undefined" || typeof document === "undefined")
+        return;
+    mutationObserverStarted = true;
+    const observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+            if (m.type === "attributes" && m.target instanceof Element) {
+                processElementClasses(m.target);
+            }
+            else if (m.type === "childList") {
+                m.addedNodes.forEach((node) => {
+                    if (node instanceof Element) {
+                        scanArbitraryDom(node);
+                    }
+                });
+            }
+        }
+    });
+    observer.observe(document.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ["class"]
+    });
+}
+export const Aksara = {
+    Modal,
+    Tooltip,
+    Popover,
+    Accordion,
+    Dropdown,
+    Tabs,
+    Toast,
+    Carousel,
+    Offcanvas,
+    modal: (target, options) => {
+        const args = resolveArgs(target, options, "[data-modal], .modal");
+        return createAll(args.target, Modal, args.options);
+    },
+    tooltip: (target, options) => {
+        const args = resolveArgs(target, options, "[data-tooltip]");
+        return createAll(args.target, Tooltip, args.options);
+    },
+    popover: (target, options) => {
+        const args = resolveArgs(target, options, "[data-popover]");
+        return createAll(args.target, Popover, args.options);
+    },
+    accordion: (target, options) => {
+        const args = resolveArgs(target, options, ".accordion");
+        return createAll(args.target, Accordion, args.options);
+    },
+    dropdown: (target, options) => {
+        const args = resolveArgs(target, options, "[data-dropdown], .dropdown");
+        return createAll(args.target, Dropdown, args.options);
+    },
+    tabs: (target, options) => {
+        const args = resolveArgs(target, options, ".tabs");
+        return createAll(args.target, Tabs, args.options);
+    },
+    toast: (target, options) => {
+        const args = resolveArgs(target, options, ".toast");
+        return createAll(args.target, Toast, args.options);
+    },
+    carousel: (target, options) => {
+        const args = resolveArgs(target, options, ".carousel");
+        return createAll(args.target, Carousel, args.options);
+    },
+    offcanvas: (target, options) => {
+        const args = resolveArgs(target, options, ".offcanvas");
+        return createAll(args.target, Offcanvas, args.options);
+    },
+    init(root = document) {
+        scanArbitraryDom(root);
+        setupArbitraryObserver();
+        createAll(root.querySelectorAll("[data-tooltip]"), Tooltip);
+        createAll(root.querySelectorAll("[data-popover]"), Popover);
+        const dropdowns = new Set();
+        root.querySelectorAll(".dropdown").forEach((el) => dropdowns.add(el));
+        root.querySelectorAll("[data-dropdown]").forEach((el) => {
+            if (!el.closest(".dropdown")) {
+                dropdowns.add(el);
+            }
+        });
+        createAll(Array.from(dropdowns), Dropdown);
+        createAll(root.querySelectorAll(".accordion"), Accordion);
+        createAll(root.querySelectorAll(".tabs"), Tabs);
+        createAll(root.querySelectorAll(".toast"), Toast);
+        createAll(root.querySelectorAll(".carousel"), Carousel);
+        createAll(root.querySelectorAll(".modal"), Modal);
+        createAll(root.querySelectorAll(".offcanvas"), Offcanvas);
+        bindDataApi();
+        emit(document.documentElement, "init", { root });
+        return this;
+    },
+    destroy() {
+        Array.from(instances).forEach((instance) => instance.destroy());
+        registry.clear();
+        emit(document.documentElement, "destroy");
+        return this;
+    }
+};
+if (typeof document !== "undefined") {
+    document.addEventListener("DOMContentLoaded", () => Aksara.init());
+}
+export default Aksara;