@elurjs/ionic 2.0.7

package/dist/lib/tabs-DjD1_PTM.js

@@ -0,0 +1,178 @@
+import { ElurComponent as e, effect as t, elurRouter as n, html as r, nextTick as i, ref as a } from "@elurjs/core";
+import { initialize as o } from "@ionic/core/components";
+import { defineCustomElement as s } from "@ionic/core/components/ion-app.js";
+import { defineCustomElement as c } from "@ionic/core/components/ion-router-outlet.js";
+import { defineCustomElement as l } from "@ionic/core/components/ion-back-button.js";
+import { defineCustomElement as u } from "@ionic/core/components/ion-buttons.js";
+import { defineCustomElement as d } from "ionicons/components/ion-icon.js";
+import { addIcons as f, setAssetPath as p } from "ionicons";
+import { arrowBack as m, arrowBackSharp as h, chevronBack as g, chevronBackSharp as _ } from "ionicons/icons";
+//#region src/setup.ts
+var v = [
+	s,
+	c,
+	l,
+	u,
+	d
+], y = {
+	"arrow-back": m,
+	"arrow-back-sharp": h,
+	"chevron-back": g,
+	"chevron-back-sharp": _
+}, b = !1, x = /* @__PURE__ */ new Set();
+function S() {
+	return typeof window < "u";
+}
+function C() {
+	return typeof customElements < "u";
+}
+function w(e = {}) {
+	let t = [];
+	if (!S()) return {
+		initialized: !1,
+		diagnostics: ["SSR: window unavailable, skipping init"]
+	};
+	if (b) return e.mode && t.push("mode cannot be changed after initialization; ignoring"), {
+		initialized: !1,
+		diagnostics: t
+	};
+	let n = e.icons ?? "inline";
+	if (n === "inline") p("");
+	else if (typeof n == "object" && n.mode === "assets") p(n.path);
+	else if (n === "assets") {
+		let e = document.baseURI || "/";
+		p(new URL("assets/icons/", e).href);
+	}
+	o();
+	for (let e of v) e();
+	f(y);
+	for (let e of Object.keys(y)) x.add(e);
+	return b = !0, {
+		initialized: !0,
+		diagnostics: t
+	};
+}
+function T(...e) {
+	if (!C()) {
+		S() && console.warn("[elur-ionic] customElements unavailable; cannot register components");
+		return;
+	}
+	for (let t of e) try {
+		t();
+	} catch (e) {
+		e instanceof Error && !e.message.includes("already been registered") && console.warn(`[elur-ionic] Component registration error: ${e.message}`);
+	}
+}
+function E(e) {
+	if (!S()) return;
+	let t = {};
+	for (let [n, r] of Object.entries(e)) x.has(n) && console.warn(`[elur-ionic] Icon "${n}" already registered; overwriting.`), t[n] = r, x.add(n);
+	Object.keys(t).length > 0 && f(t);
+}
+function D(e = {}) {
+	if (!S()) return;
+	let t = {};
+	e.iconAssetPath && (t.icons = {
+		mode: "assets",
+		path: e.iconAssetPath
+	}), w(t), e.components && T(...e.components), e.icons && E(e.icons);
+}
+//#endregion
+//#region src/tabs.ts
+function O(e) {
+	return !e || e === "/" ? "/" : e.endsWith("/") ? e.slice(0, -1) : e;
+}
+function k(e, t) {
+	let n = O(t), r = O(e.path);
+	return e.exact ? n === r : r === "/" ? n === "/" : n === r || n.startsWith(`${r}/`);
+}
+function A(e, t) {
+	if (!t?.length) return !1;
+	let n = O(e);
+	return t.some((e) => {
+		let t = O(e);
+		if (t.endsWith("/*")) {
+			let e = t.slice(0, -2);
+			return n === e || n.startsWith(`${e}/`);
+		}
+		return n === t;
+	});
+}
+function j(e) {
+	return e ? Object.entries(e).map(([e, t]) => `${e}: ${t}`).join("; ") : "";
+}
+function M(e, o = {}) {
+	let s = n(), c = o.slot ?? "bottom", l = o.className ?? "elur-ion-tab-bar", u = o.navigationDirection ?? "none", d = o.layout ?? "icon-top", p = o.cssVars;
+	o.icons && f(o.icons);
+	let m = a(), h = !1;
+	return t(() => {
+		let t = s.current.value, n = m.el;
+		if (!n) {
+			h || i(() => {
+				h = !0;
+				let t = m.el;
+				t && t.querySelectorAll("ion-tab-button").forEach((t, n) => {
+					let r = e[n];
+					r && (t.selected = k(r, s.current.value));
+				});
+			});
+			return;
+		}
+		n.querySelectorAll("ion-tab-button").forEach((n, r) => {
+			let i = e[r];
+			i && (n.selected = k(i, t));
+		});
+	}), r`
+    <ion-tab-bar
+      slot=${c}
+      class=${l}
+      ref=${m}
+      style=${() => {
+		let e = s.current.value, t = o.hideWhen ? o.hideWhen(e) : A(e, o.hiddenPaths);
+		return [j(p), t ? "display:none" : ""].filter(Boolean).join("; ");
+	}}
+    >
+      ${e.map((e) => {
+		let t = e.path === "/" ? "root" : O(e.path).replace(/^\//, "").replace(/\//g, "-"), n = e.tabId ?? t;
+		return r`
+          <ion-tab-button
+            tab=${n}
+            layout=${d}
+            @click.prevent.stop=${() => {
+			k(e, s.current.value) ? s.replace(e.path, { direction: "none" }) : s.navigate(e.path, { direction: u });
+		}}
+          >
+            ${e.icon ? r`
+                  <ion-icon
+                    name=${() => k(e, s.current.value) && e.activeIcon ? e.activeIcon : e.icon}
+                  ></ion-icon>
+                ` : ""}
+            <ion-label>${e.label}</ion-label>
+            ${e.badge == null ? "" : r`<ion-badge color=${e.badgeColor ?? "danger"}>${e.badge}</ion-badge>`}
+          </ion-tab-button>
+        `;
+	})}
+    </ion-tab-bar>
+  `;
+}
+function N(t, n) {
+	F();
+	let i = t instanceof e ? t.render() : t;
+	return r`
+        <ion-tabs>
+            ${i}
+            ${n}
+        </ion-tabs>
+    `;
+}
+var P = !1;
+function F() {
+	if (P || typeof document > "u") return;
+	P = !0;
+	let e = document.createElement("style");
+	e.id = "elur-ionic-tabs-layout", e.textContent = "\nion-tabs {\n    display: flex !important;\n    flex-direction: column !important;\n    height: 100% !important;\n    width: 100% !important;\n    position: relative !important;\n}\nion-tabs > ion-router-outlet {\n    flex: 1 1 0 !important;\n    min-height: 0 !important;\n    position: relative !important;\n    top: auto !important;\n    bottom: auto !important;\n    left: auto !important;\n    right: auto !important;\n}\nion-tabs > ion-tab-bar {\n    flex-shrink: 0 !important;\n}\n", document.head.appendChild(e);
+}
+//#endregion
+export { T as a, D as c, w as i, N as n, E as o, f as r, p as s, M as t };
+
+//# sourceMappingURL=tabs-DjD1_PTM.js.map

package/dist/lib/tabs-DjD1_PTM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-DjD1_PTM.js","names":[],"sources":["../../src/setup.ts","../../src/tabs.ts"],"sourcesContent":["/**\n * @elurjs/ionic / setup.ts — v2 modular setup\n *\n * Architecture (Elur Ionic 2):\n *\n *   initializeElurIonic(options)   — configures Ionic Core once; returns a\n *                                    handle with status/diagnostics. Safe to\n *                                    call again (no-op after first init, but\n *                                    validates incompatible config changes).\n *\n *   registerIonicComponents(...definers)  — incremental & idempotent. Always\n *                                    registers new definers, skips already-\n *                                    registered custom elements. Works for\n *                                    lazy route loading.\n *\n *   registerIonicons(map)         — incremental with collision diagnostics.\n *                                    Merges new icons into the global set;\n *                                    warns on name collisions.\n *\n *   setupElurIonic(options)        — backward-compatible facade that calls all\n *                                    three. Existing apps work unchanged.\n *\n * Key changes vs v1.x:\n *   - No more `isInitialized` blocking: `registerIonicComponents` and\n *     `registerIonicons` are always incremental.\n *   - No `unpkg@latest` default asset path: uses official `setAssetPath` from\n *     ionicons. CDN is opt-in only.\n *   - SSR-safe: no `window` access at module load; guards in each function.\n *   - Returns a handle with diagnostics from `initializeElurIonic`.\n */\n\nimport { initialize } from \"@ionic/core/components\";\n\n// Minimal core components — the bare minimum any elur-ionic app needs.\nimport { defineCustomElement as defineIonApp } from \"@ionic/core/components/ion-app.js\";\nimport { defineCustomElement as defineIonRouterOutlet } from \"@ionic/core/components/ion-router-outlet.js\";\nimport { defineCustomElement as defineIonBackButton } from \"@ionic/core/components/ion-back-button.js\";\nimport { defineCustomElement as defineIonButtons } from \"@ionic/core/components/ion-buttons.js\";\n\n// Icons\nimport { defineCustomElement as defineIonIcon } from \"ionicons/components/ion-icon.js\";\nimport { addIcons, setAssetPath } from \"ionicons\";\nimport { arrowBack, arrowBackSharp, chevronBack, chevronBackSharp } from \"ionicons/icons\";\n\nexport type ComponentDefiner = () => void;\nexport type IconDefinitionMap = Record<string, string>;\n\nexport interface SetupElurIonicOptions {\n    /** @deprecated Use `icons` mode in `initializeElurIonic` instead. */\n    iconAssetPath?: string;\n    components?: ComponentDefiner[];\n    icons?: IconDefinitionMap;\n}\n\nexport interface InitializeOptions {\n    /**\n     * Icon asset strategy:\n     * - \"inline\" (default): icons are inlined via addIcons; no remote fetch.\n     * - \"assets\": use setAssetPath to a local URL; icons fetched on demand.\n     * - object with `mode: \"assets\"` and `path` for explicit local path.\n     */\n    icons?: \"inline\" | \"assets\" | { mode: \"assets\"; path: string };\n    /** Ionic mode override: \"ios\" | \"md\" | undefined (auto-detect). */\n    mode?: \"ios\" | \"md\";\n}\n\nexport interface SetupHandle {\n    /** True if this call performed the initialization; false if already init. */\n    readonly initialized: boolean;\n    /** Diagnostics collected during initialization. */\n    readonly diagnostics: string[];\n}\n\n// --- Internal registry state ---\n\nconst _coreDefiners: ComponentDefiner[] = [\n    defineIonApp,\n    defineIonRouterOutlet,\n    defineIonBackButton,\n    defineIonButtons,\n    defineIonIcon,\n];\n\nconst _defaultIcons: IconDefinitionMap = {\n    \"arrow-back\": arrowBack,\n    \"arrow-back-sharp\": arrowBackSharp,\n    \"chevron-back\": chevronBack,\n    \"chevron-back-sharp\": chevronBackSharp,\n};\n\nlet _initialized = false;\nconst _registeredIconNames = new Set<string>();\n\nfunction _hasWindow(): boolean {\n    return typeof window !== \"undefined\";\n}\n\nfunction _hasCustomElements(): boolean {\n    return typeof customElements !== \"undefined\";\n}\n\n/**\n * Initialize Ionic Core for Elur. Configures the runtime once.\n *\n * Subsequent calls are no-ops for the core init, but `registerIonicComponents`\n * and `registerIonicons` remain incremental regardless.\n *\n * Returns a handle with diagnostics.\n */\nexport function initializeElurIonic(options: InitializeOptions = {}): SetupHandle {\n    const diagnostics: string[] = [];\n\n    if (!_hasWindow()) {\n        // SSR/prerender: do not touch DOM. Module is import-safe.\n        return { initialized: false, diagnostics: [\"SSR: window unavailable, skipping init\"] };\n    }\n\n    if (_initialized) {\n        // Validate incompatible config changes after init.\n        if (options.mode) {\n            diagnostics.push(\"mode cannot be changed after initialization; ignoring\");\n        }\n        return { initialized: false, diagnostics };\n    }\n\n    // Icon asset strategy\n    const iconsCfg = options.icons ?? \"inline\";\n    if (iconsCfg === \"inline\") {\n        // Default: no remote asset path. Icons are inlined via addIcons.\n        // setAssetPath to empty string prevents any CDN fetch.\n        setAssetPath(\"\");\n    } else if (typeof iconsCfg === \"object\" && iconsCfg.mode === \"assets\") {\n        setAssetPath(iconsCfg.path);\n    } else if (iconsCfg === \"assets\") {\n        // \"assets\" mode without explicit path — use a sensible default\n        // relative to the document base.\n        const base = document.baseURI || \"/\";\n        setAssetPath(new URL(\"assets/icons/\", base).href);\n    }\n\n    // Initialize Ionic Core\n    initialize();\n\n    // Register minimal core components\n    for (const definer of _coreDefiners) {\n        definer();\n    }\n\n    // Register default back icons (used by IonBackButton)\n    addIcons(_defaultIcons);\n    for (const name of Object.keys(_defaultIcons)) {\n        _registeredIconNames.add(name);\n    }\n\n    _initialized = true;\n\n    return { initialized: true, diagnostics };\n}\n\n/**\n * Register additional Ionic custom element definers. Incremental and\n * idempotent — always processes new definers, safe to call from lazy routes.\n *\n * @example\n * ```ts\n * // In a lazy route module:\n * import { defineCustomElement as defineIonDatetime } from \"@ionic/core/components/ion-datetime.js\";\n * registerIonicComponents(defineIonDatetime);\n * ```\n */\nexport function registerIonicComponents(...definers: ComponentDefiner[]): void {\n    if (!_hasCustomElements()) {\n        if (_hasWindow()) {\n            console.warn(\"[elur-ionic] customElements unavailable; cannot register components\");\n        }\n        return;\n    }\n\n    for (const definer of definers) {\n        try {\n            definer();\n        } catch (e) {\n            // Ionic definers internally guard against double-registration,\n            // but we catch just in case.\n            if (e instanceof Error && !e.message.includes(\"already been registered\")) {\n                console.warn(`[elur-ionic] Component registration error: ${e.message}`);\n            }\n        }\n    }\n}\n\n/**\n * Register additional Ionicons by name → SVG string mapping. Incremental\n * with collision diagnostics.\n *\n * @example\n * ```ts\n * import { registerIonicons } from \"@elurjs/ionic\";\n * import { home, homeOutline } from \"ionicons/icons\";\n *\n * registerIonicons({ home, \"home-outline\": homeOutline });\n * ```\n */\nexport function registerIonicons(map: IconDefinitionMap): void {\n    if (!_hasWindow()) {\n        return;\n    }\n\n    const toAdd: IconDefinitionMap = {};\n    for (const [name, svg] of Object.entries(map)) {\n        if (_registeredIconNames.has(name)) {\n            // Overwriting is allowed (addIcons merges), but warn in dev.\n            console.warn(`[elur-ionic] Icon \"${name}\" already registered; overwriting.`);\n        }\n        toAdd[name] = svg;\n        _registeredIconNames.add(name);\n    }\n\n    if (Object.keys(toAdd).length > 0) {\n        addIcons(toAdd);\n    }\n}\n\n/**\n * Backward-compatible facade. Calls `initializeElurIonic`, then registers\n * any extra components and icons passed via options.\n *\n * Existing v1.x apps work unchanged. New apps should prefer the granular\n * functions (`initializeElurIonic` + `registerIonicComponents` + `registerIonicons`)\n * for lazy loading and HMR support.\n *\n * @deprecated Prefer `initializeElurIonic` + `registerIonicComponents` + `registerIonicons` for new code.\n */\nexport function setupElurIonic(options: SetupElurIonicOptions = {}): void {\n    if (!_hasWindow()) return;\n\n    // Map old options to new init\n    const initOpts: InitializeOptions = {};\n    if (options.iconAssetPath) {\n        initOpts.icons = { mode: \"assets\", path: options.iconAssetPath };\n    }\n\n    const handle = initializeElurIonic(initOpts);\n\n    // Register extra components (always incremental, even after init)\n    if (options.components) {\n        registerIonicComponents(...options.components);\n    }\n\n    // Register extra icons (always incremental, even after init)\n    if (options.icons) {\n        registerIonicons(options.icons);\n    }\n\n    void handle;\n}\n\nexport { addIcons, setAssetPath };\n","/**\n * @elurjs/ionic / tabs.ts  —  v2\n *\n * Bottom tab bar that drives navigation through the core router. The visual\n * \"active\" state is computed from `elurRouter().current` directly.\n *\n * Tab switches are intentionally direction:\"none\" — Ionic's convention is no\n * animation between tabs. Per-tab stacks (configured on IonRouterOutlet via\n * `tabs: [...]`) preserve each tab's deep view across switches.\n */\n\nimport { html, ElurComponent, effect, ref, nextTick } from \"@elurjs/core\";\nimport type { ElurTemplate } from \"@elurjs/core\";\nimport { elurRouter, type NavigationDirection } from \"@elurjs/core\";\nimport { addIcons, type IconDefinitionMap } from \"./setup.js\";\n\n/** Layout of icon and label inside each tab button. */\nexport type TabButtonLayout =\n    | \"icon-top\"\n    | \"icon-start\"\n    | \"icon-end\"\n    | \"icon-bottom\"\n    | \"icon-hide\"\n    | \"label-hide\";\n\nexport interface BottomTabItem {\n    path: string;\n    label: string;\n    icon?: string;\n    activeIcon?: string;\n    exact?: boolean;\n    tabId?: string;\n    /** Badge text or number (e.g. notification count). */\n    badge?: string | number;\n    /** Badge color (Ionic color name). Default: \"danger\". */\n    badgeColor?: string;\n}\n\nexport interface BottomTabBarOptions {\n    slot?: \"top\" | \"bottom\";\n    className?: string;\n    hiddenPaths?: string[];\n    /**\n     * Direction passed to the router on tab change.\n     * Default `\"none\"` — no animation, native Ionic feel.\n     */\n    navigationDirection?: NavigationDirection;\n    hideWhen?: (path: string) => boolean;\n    /**\n     * Icon SVG data to register for the tab bar icons.\n     *\n     * The Vite plugin can only detect static `name=\"icon-name\"` in html``\n     * templates. Tab bar icons are dynamic, so pass the data here.\n     */\n    icons?: IconDefinitionMap;\n    /**\n     * Layout of icon and label inside each tab button.\n     * Default: `\"icon-top\"`.\n     */\n    layout?: TabButtonLayout;\n    /**\n     * CSS custom properties to set on the `ion-tab-bar` element.\n     * Useful for theming: `--background`, `--color`, `--color-selected`, etc.\n     *\n     * @example\n     * ```ts\n     * createBottomTabBar(tabs, {\n     *   cssVars: {\n     *     \"--background\": \"#1a1a2e\",\n     *     \"--color-selected\": \"#00ff88\",\n     *   },\n     * });\n     * ```\n     */\n    cssVars?: Record<string, string>;\n}\n\nfunction _normalizePath(p: string): string {\n    if (!p || p === \"/\") return \"/\";\n    return p.endsWith(\"/\") ? p.slice(0, -1) : p;\n}\n\nfunction _isActive(tab: BottomTabItem, currentPath: string): boolean {\n    const cur = _normalizePath(currentPath);\n    const tgt = _normalizePath(tab.path);\n    if (tab.exact) return cur === tgt;\n    if (tgt === \"/\") return cur === \"/\";\n    return cur === tgt || cur.startsWith(`${tgt}/`);\n}\n\nfunction _isHidden(path: string, patterns?: string[]): boolean {\n    if (!patterns?.length) return false;\n    const cur = _normalizePath(path);\n    return patterns.some((pat) => {\n        const norm = _normalizePath(pat);\n        if (norm.endsWith(\"/*\")) {\n            const base = norm.slice(0, -2);\n            return cur === base || cur.startsWith(`${base}/`);\n        }\n        return cur === norm;\n    });\n}\n\n/** Convert a cssVars record to a CSS string for the style attribute. */\nfunction _cssVarsToString(vars: Record<string, string> | undefined): string {\n    if (!vars) return \"\";\n    return Object.entries(vars)\n        .map(([k, v]) => `${k}: ${v}`)\n        .join(\"; \");\n}\n\nexport function createBottomTabBar(\n    tabs: BottomTabItem[],\n    options: BottomTabBarOptions = {},\n): ElurTemplate {\n    const router = elurRouter();\n    const slot = options.slot ?? \"bottom\";\n    const className = options.className ?? \"elur-ion-tab-bar\";\n    const direction: NavigationDirection = options.navigationDirection ?? \"none\";\n    const layout: TabButtonLayout = options.layout ?? \"icon-top\";\n    const cssVars = options.cssVars;\n\n    // Register icons if provided.\n    if (options.icons) {\n        addIcons(options.icons);\n    }\n\n    // Stencil boolean props (like `selected`) cannot be set via HTML\n    // attributes with Elur. We use an effect to set the JS property\n    // directly on each ion-tab-button after it's in the DOM, and\n    // re-sync whenever the route changes.\n    const tabBarRef = ref<HTMLElement>();\n    let synced = false;\n    effect(() => {\n        const currentPath = router.current.value;\n        const tabBarEl = tabBarRef.el;\n        if (!tabBarEl) {\n            if (!synced) {\n                nextTick(() => {\n                    synced = true;\n                    const el = tabBarRef.el;\n                    if (!el) return;\n                    const btns = el.querySelectorAll(\"ion-tab-button\");\n                    btns.forEach((btn, i) => {\n                        const tab = tabs[i];\n                        if (!tab) return;\n                        (btn as any).selected = _isActive(tab, router.current.value);\n                    });\n                });\n            }\n            return;\n        }\n        const buttons = tabBarEl.querySelectorAll(\"ion-tab-button\");\n        buttons.forEach((btn, i) => {\n            const tab = tabs[i];\n            if (!tab) return;\n            const isActive = _isActive(tab, currentPath);\n            (btn as any).selected = isActive;\n        });\n    });\n\n    return html`\n    <ion-tab-bar\n      slot=${slot}\n      class=${className}\n      ref=${tabBarRef}\n      style=${() => {\n            const path = router.current.value;\n            const hidden = options.hideWhen\n                ? options.hideWhen(path)\n                : _isHidden(path, options.hiddenPaths);\n            const vars = _cssVarsToString(cssVars);\n            const display = hidden ? \"display:none\" : \"\";\n            return [vars, display].filter(Boolean).join(\"; \");\n        }}\n    >\n      ${tabs.map((tab) => {\n            const computedTabId = tab.path === \"/\"\n                ? \"root\"\n                : _normalizePath(tab.path).replace(/^\\//, \"\").replace(/\\//g, \"-\");\n            const tabId = tab.tabId ?? computedTabId;\n\n            return html`\n          <ion-tab-button\n            tab=${tabId}\n            layout=${layout}\n            @click.prevent.stop=${() => {\n                    // .prevent.stop prevents Ionic's internal tab selection\n                    // (which looks for <ion-tab> children we don't have).\n                    // We drive navigation through the Elur router instead.\n                    if (_isActive(tab, router.current.value)) {\n                        router.replace(tab.path, { direction: \"none\" });\n                    } else {\n                        router.navigate(tab.path, { direction });\n                    }\n                }}\n          >\n            ${tab.icon\n                    ? html`\n                  <ion-icon\n                    name=${() => {\n                            const active = _isActive(tab, router.current.value);\n                            return active && tab.activeIcon ? tab.activeIcon : tab.icon;\n                        }}\n                  ></ion-icon>\n                `\n                    : \"\"}\n            <ion-label>${tab.label}</ion-label>\n            ${tab.badge != null\n                    ? html`<ion-badge color=${tab.badgeColor ?? \"danger\"}>${tab.badge}</ion-badge>`\n                    : \"\"}\n          </ion-tab-button>\n        `;\n        })}\n    </ion-tab-bar>\n  `;\n}\n\n/**\n * Wraps an IonRouterOutlet and a tab bar in <ion-tabs>.\n *\n * <ion-tabs> provides the correct CSS layout context: the outlet fills\n * the available space and the tab bar sits at the bottom (or top).\n *\n * We use <ion-tabs> for layout only — navigation is driven by the\n * Elur router via the @click handler on each <ion-tab-button>, not\n * by Ionic's internal tab selection. The tab buttons have `tab` IDs\n * so Ionic doesn't warn, but there are no <ion-tab> children.\n *\n * A small CSS snippet is injected to ensure <ion-tabs> fills its\n * parent and the absolutely-positioned <ion-router-outlet> doesn't\n * collapse the layout.\n */\nexport function createTabsLayout(\n    outlet: ElurTemplate | ElurComponent,\n    tabBar: ElurTemplate,\n): ElurTemplate {\n    _injectTabsLayoutStyles();\n    const outletTemplate = outlet instanceof ElurComponent ? outlet.render() : outlet;\n    return html`\n        <ion-tabs>\n            ${outletTemplate}\n            ${tabBar}\n        </ion-tabs>\n    `;\n}\n\n/** Inject the tabs layout CSS once (idempotent). */\nlet _tabsStylesInjected = false;\nfunction _injectTabsLayoutStyles(): void {\n    if (_tabsStylesInjected) return;\n    if (typeof document === \"undefined\") return;\n    _tabsStylesInjected = true;\n    const style = document.createElement(\"style\");\n    style.id = \"elur-ionic-tabs-layout\";\n    // ion-tabs defaults to display:block with no explicit height, which\n    // collapses to the tab bar's height because ion-router-outlet is\n    // position:absolute. Force ion-tabs to fill its parent and use flexbox\n    // so the outlet takes the remaining space above the tab bar.\n    style.textContent = `\nion-tabs {\n    display: flex !important;\n    flex-direction: column !important;\n    height: 100% !important;\n    width: 100% !important;\n    position: relative !important;\n}\nion-tabs > ion-router-outlet {\n    flex: 1 1 0 !important;\n    min-height: 0 !important;\n    position: relative !important;\n    top: auto !important;\n    bottom: auto !important;\n    left: auto !important;\n    right: auto !important;\n}\nion-tabs > ion-tab-bar {\n    flex-shrink: 0 !important;\n}\n`;\n    document.head.appendChild(style);\n}\n"],"mappings":"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"}

package/dist/lib/tabs.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./tabs-ByPLrzax.cjs");require("./vite-plugin.cjs"),exports.createBottomTabBar=e.t,exports.createTabsLayout=e.n;

package/dist/lib/tabs.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @elurjs/ionic / tabs.ts  —  v2
+ *
+ * Bottom tab bar that drives navigation through the core router. The visual
+ * "active" state is computed from `elurRouter().current` directly.
+ *
+ * Tab switches are intentionally direction:"none" — Ionic's convention is no
+ * animation between tabs. Per-tab stacks (configured on IonRouterOutlet via
+ * `tabs: [...]`) preserve each tab's deep view across switches.
+ */
+import { ElurComponent } from "@elurjs/core";
+import type { ElurTemplate } from "@elurjs/core";
+import { type NavigationDirection } from "@elurjs/core";
+import { type IconDefinitionMap } from "./setup.js";
+/** Layout of icon and label inside each tab button. */
+export type TabButtonLayout = "icon-top" | "icon-start" | "icon-end" | "icon-bottom" | "icon-hide" | "label-hide";
+export interface BottomTabItem {
+    path: string;
+    label: string;
+    icon?: string;
+    activeIcon?: string;
+    exact?: boolean;
+    tabId?: string;
+    /** Badge text or number (e.g. notification count). */
+    badge?: string | number;
+    /** Badge color (Ionic color name). Default: "danger". */
+    badgeColor?: string;
+}
+export interface BottomTabBarOptions {
+    slot?: "top" | "bottom";
+    className?: string;
+    hiddenPaths?: string[];
+    /**
+     * Direction passed to the router on tab change.
+     * Default `"none"` — no animation, native Ionic feel.
+     */
+    navigationDirection?: NavigationDirection;
+    hideWhen?: (path: string) => boolean;
+    /**
+     * Icon SVG data to register for the tab bar icons.
+     *
+     * The Vite plugin can only detect static `name="icon-name"` in html``
+     * templates. Tab bar icons are dynamic, so pass the data here.
+     */
+    icons?: IconDefinitionMap;
+    /**
+     * Layout of icon and label inside each tab button.
+     * Default: `"icon-top"`.
+     */
+    layout?: TabButtonLayout;
+    /**
+     * CSS custom properties to set on the `ion-tab-bar` element.
+     * Useful for theming: `--background`, `--color`, `--color-selected`, etc.
+     *
+     * @example
+     * ```ts
+     * createBottomTabBar(tabs, {
+     *   cssVars: {
+     *     "--background": "#1a1a2e",
+     *     "--color-selected": "#00ff88",
+     *   },
+     * });
+     * ```
+     */
+    cssVars?: Record<string, string>;
+}
+export declare function createBottomTabBar(tabs: BottomTabItem[], options?: BottomTabBarOptions): ElurTemplate;
+/**
+ * Wraps an IonRouterOutlet and a tab bar in <ion-tabs>.
+ *
+ * <ion-tabs> provides the correct CSS layout context: the outlet fills
+ * the available space and the tab bar sits at the bottom (or top).
+ *
+ * We use <ion-tabs> for layout only — navigation is driven by the
+ * Elur router via the @click handler on each <ion-tab-button>, not
+ * by Ionic's internal tab selection. The tab buttons have `tab` IDs
+ * so Ionic doesn't warn, but there are no <ion-tab> children.
+ *
+ * A small CSS snippet is injected to ensure <ion-tabs> fills its
+ * parent and the absolutely-positioned <ion-router-outlet> doesn't
+ * collapse the layout.
+ */
+export declare function createTabsLayout(outlet: ElurTemplate | ElurComponent, tabBar: ElurTemplate): ElurTemplate;

package/dist/lib/tabs.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "./tabs-DjD1_PTM.js";
+export { t as createBottomTabBar, e as createTabsLayout };