@g9tm/lynxcontrols 0.0.0-stage → 1.4.2

package/dist/tabs/model.jsx

@@ -0,0 +1,113 @@
+import { formatNumber } from "@g9tm/lynxcontrols-foundation";
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+const g9TabViewMetrics = Object.freeze({
+    tabHeight: 52,
+    barInnerPadding: 4,
+    barRadius: 26,
+    pillVerticalInset: 2,
+    pillRadius: 18,
+    barToContentGap: 8,
+    underlineThickness: 2.5,
+    edgeLineThickness: 1,
+    separatorVerticalInset: 12,
+    indicatorMoveMs: 240,
+    contentTransitionMs: 160,
+    contentSlidePx: 6,
+    lazyRealizeDelayMs: 240,
+    contentPadding: Object.freeze([
+        10,
+        10,
+        10,
+        0
+    ])
+});
+function effectiveTabIndex(selectedIndex, count) {
+    if (count <= 0) return -1;
+    if (!Number.isFinite(selectedIndex)) return 0;
+    return Math.min(Math.max(Math.trunc(selectedIndex), 0), count - 1);
+}
+function tabKey(item, index) {
+    var _item_key;
+    return null != (_item_key = item.key) ? _item_key : `#${index}`;
+}
+function tabBadge(item, numberingSystem) {
+    var _item_badgeCount;
+    if (null != item.badgeText && '' !== item.badgeText.trim()) return item.badgeText;
+    const count = null != (_item_badgeCount = item.badgeCount) ? _item_badgeCount : 0;
+    if (Number.isFinite(count) && count > 0) return formatNumber(Math.trunc(count), {
+        numberingSystem
+    });
+    return item.badgeDot ? 'dot' : null;
+}
+function tabVisualOrder(count, rtl) {
+    const order = [];
+    for(let i = 0; i < count; i++)order.push(rtl ? count - 1 - i : i);
+    return order;
+}
+function tabContentSlideFrom(previous, next, rtl) {
+    const forward = previous < 0 || next > previous;
+    const sign = (forward ? 1 : -1) * (rtl ? -1 : 1);
+    return g9TabViewMetrics.contentSlidePx * sign;
+}
+function thicknessCss(value) {
+    const parts = 'number' == typeof value ? [
+        value
+    ] : value;
+    const [l = 0, t = l, r = l, b = t] = 2 === parts.length ? [
+        parts[0],
+        parts[1],
+        parts[0],
+        parts[1]
+    ] : parts;
+    return `${t}px ${r}px ${b}px ${l}px`;
+}
+class G9TabRealizer {
+    isRealized(key) {
+        return this.eager() || this.realized.has(key);
+    }
+    activate(key) {
+        if (this.isRealized(key)) {
+            this.pending = null;
+            return 'shown';
+        }
+        this.pending = key;
+        this.generation += 1;
+        return this.generation;
+    }
+    realize(token) {
+        if (token !== this.generation || null === this.pending) return false;
+        this.realized.add(this.pending);
+        this.pending = null;
+        return true;
+    }
+    retain(keys) {
+        const live = new Set(keys);
+        for (const key of Array.from(this.realized))if (!live.has(key)) this.realized.delete(key);
+        if (null !== this.pending && !live.has(this.pending)) this.pending = null;
+    }
+    get pendingKey() {
+        return this.pending;
+    }
+    constructor(eager){
+        _define_property(this, "eager", void 0);
+        _define_property(this, "realized", void 0);
+        _define_property(this, "pending", void 0);
+        _define_property(this, "generation", void 0);
+        this.eager = eager;
+        this.realized = new Set();
+        this.pending = null;
+        this.generation = 0;
+    }
+}
+export { G9TabRealizer, effectiveTabIndex, g9TabViewMetrics, tabBadge, tabContentSlideFrom, tabKey, tabVisualOrder, thicknessCss };
+
+//# sourceMappingURL=model.jsx.map

package/dist/tabs/model.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs/model.jsx","sources":["../../src/tabs/model.ts"],"sourcesContent":["import { formatNumber, type G9ImageSource, type G9NumberingSystem } from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport type { G9IconInput } from '../icon/icon';\n\n/** Visual treatment of the bar (MAUI `G9TabStyle`). */\nexport type G9TabStyle = 'underlined' | 'pill';\n/** Cell sizing (MAUI `G9TabMode`): equal full-width cells, or auto-width cells in a horizontal scroller. */\nexport type G9TabMode = 'fixed' | 'scrollable';\n/** Where the bar sits relative to the content (MAUI `G9TabBarPosition`). */\nexport type G9TabBarPosition = 'top' | 'bottom';\n\n/**\n * One tab (MAUI `G9TabItem`). A plain descriptor: change a field and re-render, and only that cell updates (MAUI\n * `VisualChanged` + in-place `UpdateCellContent`). Icon slot precedence as everywhere: emoji → icon → image path →\n * image source.\n */\nexport interface G9TabItem {\n  /** Stable identity; keeps a realized body (and its state) with its tab across reorders. Default: the index. */\n  readonly key?: string;\n  readonly text?: string | null;\n  readonly emoji?: string | null;\n  readonly icon?: G9IconInput;\n  readonly imagePath?: string | null;\n  readonly image?: G9ImageSource | null;\n  /** Inline pill badge with the formatted count; 0 = none. */\n  readonly badgeCount?: number;\n  /** Inline pill badge with custom text; wins over `badgeCount`. */\n  readonly badgeText?: string | null;\n  /** A 7×7 dot instead of a pill. */\n  readonly badgeDot?: boolean;\n  /** Badge fill. Default `var(--g9-error)`. */\n  readonly badgeColor?: string | null;\n  /** The body shown while this tab is active (MAUI `TabContent`); a function is called when the tab realizes. */\n  readonly content?: ReactNode | (() => ReactNode);\n}\n\n/** Tab view metrics (MAUI `G9Metrics` tab constants and `G9TabView` private constants). */\nexport const g9TabViewMetrics = Object.freeze({\n  tabHeight: 52,\n  barInnerPadding: 4,\n  barRadius: 26,\n  pillVerticalInset: 2,\n  pillRadius: 18,\n  barToContentGap: 8,\n  underlineThickness: 2.5,\n  edgeLineThickness: 1,\n  separatorVerticalInset: 12,\n  indicatorMoveMs: 240,\n  contentTransitionMs: 160,\n  contentSlidePx: 6,\n  lazyRealizeDelayMs: 240,\n  contentPadding: Object.freeze([10, 10, 10, 0] as const),\n});\n\n/** The index actually shown: the selection clamped into the items (MAUI `EffectiveIndex`); -1 with no items. */\nexport function effectiveTabIndex(selectedIndex: number, count: number): number {\n  if (count <= 0) return -1;\n  if (!Number.isFinite(selectedIndex)) return 0;\n  return Math.min(Math.max(Math.trunc(selectedIndex), 0), count - 1);\n}\n\n/** The identity of a tab: its `key`, else its index. */\nexport function tabKey(item: G9TabItem, index: number): string {\n  return item.key ?? `#${index}`;\n}\n\n/** The inline badge of a tab: `null`, `'dot'`, or the pill text (custom text wins; counts are `N0`-grouped). */\nexport function tabBadge(item: G9TabItem, numberingSystem: G9NumberingSystem): 'dot' | string | null {\n  if (item.badgeText != null && item.badgeText.trim() !== '') return item.badgeText;\n  const count = item.badgeCount ?? 0;\n  if (Number.isFinite(count) && count > 0) return formatNumber(Math.trunc(count), { numberingSystem });\n  return item.badgeDot ? 'dot' : null;\n}\n\n/** Visual (left-to-right) order of the cells: reversed in RTL so the first tab sits at the reading start. */\nexport function tabVisualOrder(count: number, rtl: boolean): number[] {\n  const order: number[] = [];\n  for (let i = 0; i < count; i++) order.push(rtl ? count - 1 - i : i);\n  return order;\n}\n\n/** Content slide start offset: forward arrives from the trailing edge, back from the leading edge; RTL mirrors. */\nexport function tabContentSlideFrom(previous: number, next: number, rtl: boolean): number {\n  const forward = previous < 0 || next > previous;\n  const sign = (forward ? 1 : -1) * (rtl ? -1 : 1);\n  return g9TabViewMetrics.contentSlidePx * sign;\n}\n\n/** CSS padding from a MAUI-style thickness: one value, `[h, v]` or `[l, t, r, b]`. */\nexport function thicknessCss(value: number | readonly number[]): string {\n  const parts = typeof value === 'number' ? [value] : value;\n  const [l = 0, t = l, r = l, b = t] = parts.length === 2 ? [parts[0], parts[1], parts[0], parts[1]] : parts;\n  return `${t}px ${r}px ${b}px ${l}px`;\n}\n\n/**\n * Lazy-once realization (MAUI \"Lazy tab-body rendering\"): a body is built on its first activation, after\n * `lazyRealizeDelayMs` (a spinner meanwhile), and then stays built, hidden while inactive, so its state survives. A\n * pending token makes rapid switches realize only the latest selection. `eager` builds everything up front.\n */\nexport class G9TabRealizer {\n  private readonly realized = new Set<string>();\n  private pending: string | null = null;\n  private generation = 0;\n\n  constructor(private readonly eager: () => boolean) {}\n\n  isRealized(key: string): boolean {\n    return this.eager() || this.realized.has(key);\n  }\n\n  /** Marks `key` active: returns `'shown'` when it is already built, else a token to pass to {@link realize}. */\n  activate(key: string): 'shown' | number {\n    if (this.isRealized(key)) {\n      this.pending = null;\n      return 'shown';\n    }\n    this.pending = key;\n    this.generation += 1;\n    return this.generation;\n  }\n\n  /** Realizes the pending key when `token` is still the latest activation; returns whether it did. */\n  realize(token: number): boolean {\n    if (token !== this.generation || this.pending === null) return false;\n    this.realized.add(this.pending);\n    this.pending = null;\n    return true;\n  }\n\n  /** Drops keys that are no longer in the items (a removed tab's body is released). */\n  retain(keys: readonly string[]): void {\n    const live = new Set(keys);\n    for (const key of Array.from(this.realized)) if (!live.has(key)) this.realized.delete(key);\n    if (this.pending !== null && !live.has(this.pending)) this.pending = null;\n  }\n\n  get pendingKey(): string | null {\n    return this.pending;\n  }\n}\n"],"names":["g9TabViewMetrics","Object","effectiveTabIndex","selectedIndex","count","Number","Math","tabKey","item","index","_item_key","tabBadge","numberingSystem","_item_badgeCount","formatNumber","tabVisualOrder","rtl","order","i","tabContentSlideFrom","previous","next","forward","sign","thicknessCss","value","parts","l","t","r","b","G9TabRealizer","key","token","keys","live","Set","Array","eager"],"mappings":"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"}

package/dist/tabs/tab-view.d.ts

@@ -0,0 +1,47 @@
+import './tabs.css';
+import { type ReactNode } from '@lynx-js/react';
+import { type G9TabBarPosition, type G9TabItem, type G9TabMode, type G9TabStyle } from './model.js';
+/** Props of {@link G9TabView}. */
+export interface G9TabViewProps {
+    /** The tabs (MAUI `Items`). Add, remove or reorder freely; give tabs a `key` so their bodies follow them. */
+    readonly items: readonly G9TabItem[];
+    /** Controlled selection (MAUI `SelectedIndex`, two-way). Out-of-range values show the nearest tab. */
+    readonly selectedIndex?: number;
+    /** Initial selection while uncontrolled. Default 0. */
+    readonly defaultSelectedIndex?: number;
+    /** A tab was chosen by a tap or a swipe (MAUI `SelectionChanged`). */
+    readonly onSelectionChange?: (index: number) => void;
+    /** Bar height (MAUI `TabHeight`). Default 52. */
+    readonly tabHeight?: number;
+    /** Bar background (MAUI `TabBarBackground`). Default transparent (underlined) / surface-container-low (pill). */
+    readonly tabBarBackground?: string | null;
+    /** Underline colour (underlined) or active text colour (pill) (MAUI `IndicatorColor`). Default primary. */
+    readonly indicatorColor?: string | null;
+    /** `'fixed'` (default): equal full-width cells. `'scrollable'`: auto-width cells that scroll. */
+    readonly mode?: G9TabMode;
+    /** `'top'` (default) or `'bottom'`. */
+    readonly barPosition?: G9TabBarPosition;
+    /** `'underlined'` (default) or `'pill'` (MAUI `Style`). */
+    readonly tabStyle?: G9TabStyle;
+    /** Only the bar: no content panel; drive your own host from `onSelectionChange` (MAUI `HeaderOnly`). */
+    readonly headerOnly?: boolean;
+    /** Border and rounded corners around the content (MAUI `ShowFrame`). Default false. */
+    readonly showFrame?: boolean;
+    /** Content border radius when `showFrame` (MAUI `FrameCornerRadius`). Default 0. */
+    readonly frameCornerRadius?: number;
+    /** Inset around the active body (MAUI `ContentPadding`): one value, `[h, v]` or `[l, t, r, b]`. Default 10,10,10,0. */
+    readonly contentPadding?: number | readonly number[];
+    /** Build every body up front instead of lazily on first activation (MAUI `EagerContent`). Default false. */
+    readonly eagerContent?: boolean;
+    /** Swipe between bodies (lynx-ui ViewPager). A Lynx addition; default false, as in MAUI. */
+    readonly swipeEnabled?: boolean;
+    readonly className?: string;
+}
+/**
+ * Tabs with a bar and lazily realized bodies (MAUI `G9TabView`). Underlined (default) or pill style, fixed or
+ * scrollable cells, bar on top or bottom, header-only; the indicator slides between cells; bodies are built on first
+ * activation (spinner, then {@link g9TabViewMetrics} `lazyRealizeDelayMs`) and kept, hidden, so scroll and form state
+ * survive; RTL reverses the cell order. With `swipeEnabled` the bodies sit in a lynx-ui ViewPager.
+ */
+export declare function G9TabView(props: G9TabViewProps): ReactNode;
+//# sourceMappingURL=tab-view.d.ts.map

package/dist/tabs/tab-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-view.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-view.tsx"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,KAAK,SAAS,EAAwC,MAAM,gBAAgB,CAAC;AAQtF,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,SAAS,EAEd,KAAK,UAAU,EAOhB,MAAM,SAAS,CAAC;AAEjB,kCAAkC;AAClC,MAAM,WAAW,cAAc;IAC7B,6GAA6G;IAC7G,QAAQ,CAAC,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;IACrC,sGAAsG;IACtG,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,uDAAuD;IACvD,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IACvC,sEAAsE;IACtE,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,iDAAiD;IACjD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,iHAAiH;IACjH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,2GAA2G;IAC3G,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,iGAAiG;IACjG,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IACxC,2DAA2D;IAC3D,QAAQ,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IAC/B,wGAAwG;IACxG,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,uFAAuF;IACvF,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,oFAAoF;IACpF,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACpC,uHAAuH;IACvH,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;IACrD,4GAA4G;IAC5G,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,4FAA4F;IAC5F,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,CAsK1D"}

package/dist/tabs/tab-view.jsx

@@ -0,0 +1,227 @@
+import "./tabs.css";
+import { ViewPager } from "@lynx-js/lynx-ui-view-pager";
+import { useEffect, useMemo, useRef, useState } from "@lynx-js/react";
+import { g9RowStyle } from "../base/control.jsx";
+import { startTimer, stopTimer } from "../base/timers.jsx";
+import { useControllableState } from "../base/use-controllable-state.jsx";
+import { G9ActivityIndicator } from "../display/activity-indicator.jsx";
+import { invokeNodeWhenReady } from "../fields/use-text-input.jsx";
+import { G9IconSlot } from "../icon/slot.jsx";
+import { useG9Culture, useG9Direction } from "../provider/hooks.jsx";
+import { G9TabRealizer, effectiveTabIndex, g9TabViewMetrics, tabBadge, tabContentSlideFrom, tabKey, tabVisualOrder, thicknessCss } from "./model.jsx";
+function G9TabView(props) {
+    var _props_tabStyle, _props_mode, _props_barPosition, _props_tabHeight, _props_defaultSelectedIndex, _props_tabBarBackground, _props_indicatorColor, _props_frameCornerRadius, _props_contentPadding, _props_className;
+    const items = props.items;
+    const tabStyle = null != (_props_tabStyle = props.tabStyle) ? _props_tabStyle : 'underlined';
+    const mode = null != (_props_mode = props.mode) ? _props_mode : 'fixed';
+    const barPosition = null != (_props_barPosition = props.barPosition) ? _props_barPosition : 'top';
+    const tabHeight = null != (_props_tabHeight = props.tabHeight) ? _props_tabHeight : g9TabViewMetrics.tabHeight;
+    const rtl = 'rtl' === useG9Direction();
+    const culture = useG9Culture();
+    const [selected, setSelected] = useControllableState({
+        value: props.selectedIndex,
+        defaultValue: null != (_props_defaultSelectedIndex = props.defaultSelectedIndex) ? _props_defaultSelectedIndex : 0,
+        onChange: props.onSelectionChange,
+        name: 'G9TabView.selectedIndex'
+    });
+    const count = items.length;
+    const effective = effectiveTabIndex(selected, count);
+    const keys = items.map((item, i)=>tabKey(item, i));
+    const activeKey = effective >= 0 ? keys[effective] : null;
+    const eager = true === props.eagerContent;
+    const eagerRef = useRef(eager);
+    eagerRef.current = eager;
+    const realizer = useMemo(()=>new G9TabRealizer(()=>eagerRef.current), []);
+    realizer.retain(keys);
+    const [, setVersion] = useState(0);
+    const [pending, setPending] = useState(null);
+    useEffect(()=>{
+        if (null === activeKey || props.headerOnly) return void setPending(null);
+        const token = realizer.activate(activeKey);
+        if ('shown' === token) return void setPending(null);
+        setPending(activeKey);
+        const t = startTimer(()=>{
+            if (realizer.realize(token)) {
+                setPending(null);
+                setVersion((v)=>v + 1);
+            }
+        }, g9TabViewMetrics.lazyRealizeDelayMs);
+        return ()=>stopTimer(t);
+    }, [
+        activeKey,
+        props.headerOnly
+    ]);
+    const previous = useRef(-1);
+    const [reveal, setReveal] = useState({
+        key: activeKey,
+        from: 0,
+        settled: true
+    });
+    useEffect(()=>{
+        const prev = previous.current;
+        previous.current = effective;
+        if (prev === effective || prev < 0) return;
+        setReveal({
+            key: activeKey,
+            from: tabContentSlideFrom(prev, effective, rtl),
+            settled: false
+        });
+        const t = startTimer(()=>setReveal((r)=>({
+                    ...r,
+                    settled: true
+                })), 16);
+        return ()=>stopTimer(t);
+    }, [
+        effective
+    ]);
+    const select = (index)=>{
+        if (index !== effective) setSelected(index);
+    };
+    const pager = useRef(null);
+    const swipe = true === props.swipeEnabled && !props.headerOnly;
+    const order = tabVisualOrder(count, rtl);
+    const visualIndex = order.indexOf(effective);
+    useEffect(()=>{
+        if (!swipe || visualIndex < 0) return;
+        try {
+            var _pager_current;
+            null == (_pager_current = pager.current) || _pager_current.scrollToPage(visualIndex, true);
+        } catch  {}
+    }, [
+        visualIndex,
+        swipe
+    ]);
+    const bar = <TabBarStrip items={items} order={order} effective={effective} tabStyle={tabStyle} mode={mode} tabHeight={tabHeight} background={null != (_props_tabBarBackground = props.tabBarBackground) ? _props_tabBarBackground : null} indicatorColor={null != (_props_indicatorColor = props.indicatorColor) ? _props_indicatorColor : null} numbering={culture.numberingSystem} onSelect={select}/>;
+    const bodyOf = (index)=>{
+        const item = items[index];
+        const key = keys[index];
+        const active = index === effective;
+        if (!realizer.isRealized(key)) return active && pending === key ? <Spinner/> : null;
+        const revealing = active && reveal.key === key && !reveal.settled;
+        const style = {
+            display: active || swipe ? 'flex' : 'none',
+            transform: `translateX(${revealing ? reveal.from : 0}px)`,
+            opacity: revealing ? 0 : 1,
+            transition: revealing || swipe ? 'none' : `transform ${g9TabViewMetrics.contentTransitionMs}ms ease-out, opacity ${g9TabViewMetrics.contentTransitionMs}ms ease-out`
+        };
+        const content = 'function' == typeof item.content ? item.content() : item.content;
+        return <view key={key} className={`g9-tabs__panel${active ? ' g9-tabs__panel--active' : ''}`} style={style}>
+        {content}
+      </view>;
+    };
+    const frame = props.showFrame ? {
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'var(--g9-outline-variant)',
+        borderRadius: `${null != (_props_frameCornerRadius = props.frameCornerRadius) ? _props_frameCornerRadius : 0}px`
+    } : {};
+    const content = props.headerOnly ? null : <view className="g9-tabs__content" style={{
+        padding: thicknessCss(null != (_props_contentPadding = props.contentPadding) ? _props_contentPadding : g9TabViewMetrics.contentPadding),
+        ...frame
+    }}>
+      {swipe ? <ViewPager ref={pager} className="g9-tabs__pager" data={order} getItemKey={(index)=>keys[index]} initialSelectIndex={Math.max(visualIndex, 0)} onPageChange={(event)=>{
+        const next = order[Number(event.detail.index)];
+        if (void 0 !== next) select(next);
+    }}>
+          {(index)=><view className="g9-tabs__page">{bodyOf(index)}</view>}
+        </ViewPager> : <>
+          {items.map((_, i)=>bodyOf(i))}
+          {null !== pending && pending === activeKey ? <Spinner/> : null}
+        </>}
+    </view>;
+    return <view className={`g9-tabs g9-tabs--${tabStyle} g9-tabs--${barPosition}${props.headerOnly ? ' g9-tabs--header-only' : ''} ${null != (_props_className = props.className) ? _props_className : ''}`}>
+      {'bottom' === barPosition ? content : null}
+      {bar}
+      {'top' === barPosition ? content : null}
+    </view>;
+}
+function Spinner() {
+    return <view className="g9-tabs__spinner">
+      <G9ActivityIndicator running size={24}/>
+    </view>;
+}
+function TabBarStrip(props) {
+    var _props_indicatorColor, _props_background;
+    const { items, order, effective, tabStyle, mode } = props;
+    const count = order.length;
+    const pill = 'pill' === tabStyle;
+    const direction = useG9Direction();
+    const indicator = null != (_props_indicatorColor = props.indicatorColor) ? _props_indicatorColor : 'var(--g9-primary)';
+    const fixed = 'fixed' === mode;
+    const cellRefs = useRef([]);
+    useEffect(()=>{
+        var _cellRefs_current_effective;
+        if (fixed || effective < 0) return;
+        invokeNodeWhenReady({
+            current: null != (_cellRefs_current_effective = cellRefs.current[effective]) ? _cellRefs_current_effective : null
+        }, 'scrollIntoView', {
+            scrollIntoViewOptions: {
+                behavior: 'smooth',
+                block: 'center',
+                inline: 'center'
+            }
+        });
+    }, [
+        effective,
+        fixed
+    ]);
+    const cells = order.map((index, position)=>{
+        var _props_indicatorColor, _item_text, _item_badgeColor, _item_badgeColor1;
+        const item = items[index];
+        const active = index === effective;
+        const badge = tabBadge(item, props.numbering);
+        const textColor = active ? pill ? null != (_props_indicatorColor = props.indicatorColor) ? _props_indicatorColor : 'var(--g9-on-primary-container)' : 'var(--g9-on-surface)' : 'var(--g9-on-surface-variant)';
+        return <view key={tabKey(item, index)} ref={(node)=>{
+            cellRefs.current[index] = node;
+        }} className={`g9-tabs__cell${active ? ' g9-tabs__cell--active' : ''}`} style={fixed ? {
+            flex: '1'
+        } : {}} accessibility-element accessibility-traits="button" accessibility-label={null != (_item_text = item.text) ? _item_text : ''} bindtap={()=>props.onSelect(index)}>
+        {}
+        {!fixed && active ? <view className={pill ? 'g9-tabs__cell-pill' : 'g9-tabs__cell-underline'} style={pill ? {} : {
+            backgroundColor: indicator
+        }}/> : null}
+        {position > 0 && !pill ? <view className="g9-tabs__separator"/> : null}
+        <view className="g9-tabs__cell-row" style={g9RowStyle(direction)}>
+          <G9IconSlot emoji={item.emoji} icon={item.icon} imagePath={item.imagePath} image={item.image} size={18} color={textColor}/>
+          {item.text ? <text className="g9-tabs__label" style={{
+            color: textColor,
+            fontWeight: active ? '600' : '400'
+        }}>
+              {item.text}
+            </text> : null}
+          {'dot' === badge ? <view className="g9-tabs__badge-dot" style={{
+            backgroundColor: null != (_item_badgeColor = item.badgeColor) ? _item_badgeColor : 'var(--g9-error)'
+        }}/> : null !== badge ? <view className="g9-tabs__badge" style={{
+            backgroundColor: null != (_item_badgeColor1 = item.badgeColor) ? _item_badgeColor1 : 'var(--g9-error)'
+        }}>
+              <text className="g9-tabs__badge-text">{badge}</text>
+            </view> : null}
+        </view>
+      </view>;
+    });
+    const position = order.indexOf(effective);
+    const slider = fixed && position >= 0 ? <view className={pill ? 'g9-tabs__pill' : 'g9-tabs__underline'} style={{
+        left: `${100 * position / count}%`,
+        width: `${100 / count}%`,
+        transition: `left ${g9TabViewMetrics.indicatorMoveMs}ms cubic-bezier(0.215, 0.61, 0.355, 1)`
+    }}>
+        <view className={pill ? 'g9-tabs__pill-fill' : 'g9-tabs__underline-fill'} style={pill ? {} : {
+        backgroundColor: indicator
+    }}/>
+      </view> : null;
+    const barStyle = {
+        height: `${props.tabHeight}px`,
+        backgroundColor: null != (_props_background = props.background) ? _props_background : pill ? 'var(--g9-surface-container-low)' : 'transparent'
+    };
+    return <view className="g9-tabs__bar" style={barStyle}>
+      {fixed ? <view className="g9-tabs__cells">
+          {slider}
+          {cells}
+        </view> : <scroll-view className="g9-tabs__scroller" scroll-orientation="horizontal">
+          <view className="g9-tabs__cells g9-tabs__cells--scrollable">{cells}</view>
+        </scroll-view>}
+    </view>;
+}
+export { G9TabView };
+
+//# sourceMappingURL=tab-view.jsx.map

package/dist/tabs/tab-view.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs/tab-view.jsx","sources":["../../src/tabs/tab-view.tsx"],"sourcesContent":["import './tabs.css';\nimport { ViewPager, type ViewPagerRef } from '@lynx-js/lynx-ui-view-pager';\nimport { type ReactNode, useEffect, useMemo, useRef, useState } from '@lynx-js/react';\nimport { g9RowStyle } from '../base/control';\nimport { startTimer, stopTimer } from '../base/timers';\nimport { useControllableState } from '../base/use-controllable-state';\nimport { G9ActivityIndicator } from '../display/activity-indicator';\nimport { type G9NodeRef, invokeNodeWhenReady } from '../fields/use-text-input';\nimport { G9IconSlot } from '../icon/slot';\nimport { useG9Culture, useG9Direction } from '../provider/hooks';\nimport {\n  effectiveTabIndex,\n  type G9TabBarPosition,\n  type G9TabItem,\n  type G9TabMode,\n  G9TabRealizer,\n  type G9TabStyle,\n  g9TabViewMetrics,\n  tabBadge,\n  tabContentSlideFrom,\n  tabKey,\n  tabVisualOrder,\n  thicknessCss,\n} from './model';\n\n/** Props of {@link G9TabView}. */\nexport interface G9TabViewProps {\n  /** The tabs (MAUI `Items`). Add, remove or reorder freely; give tabs a `key` so their bodies follow them. */\n  readonly items: readonly G9TabItem[];\n  /** Controlled selection (MAUI `SelectedIndex`, two-way). Out-of-range values show the nearest tab. */\n  readonly selectedIndex?: number;\n  /** Initial selection while uncontrolled. Default 0. */\n  readonly defaultSelectedIndex?: number;\n  /** A tab was chosen by a tap or a swipe (MAUI `SelectionChanged`). */\n  readonly onSelectionChange?: (index: number) => void;\n  /** Bar height (MAUI `TabHeight`). Default 52. */\n  readonly tabHeight?: number;\n  /** Bar background (MAUI `TabBarBackground`). Default transparent (underlined) / surface-container-low (pill). */\n  readonly tabBarBackground?: string | null;\n  /** Underline colour (underlined) or active text colour (pill) (MAUI `IndicatorColor`). Default primary. */\n  readonly indicatorColor?: string | null;\n  /** `'fixed'` (default): equal full-width cells. `'scrollable'`: auto-width cells that scroll. */\n  readonly mode?: G9TabMode;\n  /** `'top'` (default) or `'bottom'`. */\n  readonly barPosition?: G9TabBarPosition;\n  /** `'underlined'` (default) or `'pill'` (MAUI `Style`). */\n  readonly tabStyle?: G9TabStyle;\n  /** Only the bar: no content panel; drive your own host from `onSelectionChange` (MAUI `HeaderOnly`). */\n  readonly headerOnly?: boolean;\n  /** Border and rounded corners around the content (MAUI `ShowFrame`). Default false. */\n  readonly showFrame?: boolean;\n  /** Content border radius when `showFrame` (MAUI `FrameCornerRadius`). Default 0. */\n  readonly frameCornerRadius?: number;\n  /** Inset around the active body (MAUI `ContentPadding`): one value, `[h, v]` or `[l, t, r, b]`. Default 10,10,10,0. */\n  readonly contentPadding?: number | readonly number[];\n  /** Build every body up front instead of lazily on first activation (MAUI `EagerContent`). Default false. */\n  readonly eagerContent?: boolean;\n  /** Swipe between bodies (lynx-ui ViewPager). A Lynx addition; default false, as in MAUI. */\n  readonly swipeEnabled?: boolean;\n  readonly className?: string;\n}\n\n/**\n * Tabs with a bar and lazily realized bodies (MAUI `G9TabView`). Underlined (default) or pill style, fixed or\n * scrollable cells, bar on top or bottom, header-only; the indicator slides between cells; bodies are built on first\n * activation (spinner, then {@link g9TabViewMetrics} `lazyRealizeDelayMs`) and kept, hidden, so scroll and form state\n * survive; RTL reverses the cell order. With `swipeEnabled` the bodies sit in a lynx-ui ViewPager.\n */\nexport function G9TabView(props: G9TabViewProps): ReactNode {\n  const items = props.items;\n  const tabStyle = props.tabStyle ?? 'underlined';\n  const mode = props.mode ?? 'fixed';\n  const barPosition = props.barPosition ?? 'top';\n  const tabHeight = props.tabHeight ?? g9TabViewMetrics.tabHeight;\n  const rtl = useG9Direction() === 'rtl';\n  const culture = useG9Culture();\n  const [selected, setSelected] = useControllableState<number>({\n    value: props.selectedIndex,\n    defaultValue: props.defaultSelectedIndex ?? 0,\n    onChange: props.onSelectionChange,\n    name: 'G9TabView.selectedIndex',\n  });\n  const count = items.length;\n  const effective = effectiveTabIndex(selected, count);\n  const keys = items.map((item, i) => tabKey(item, i));\n  const activeKey = effective >= 0 ? (keys[effective] as string) : null;\n\n  const eager = props.eagerContent === true;\n  const eagerRef = useRef(eager);\n  eagerRef.current = eager;\n  const realizer = useMemo(() => new G9TabRealizer(() => eagerRef.current), []);\n  realizer.retain(keys);\n  const [, setVersion] = useState(0);\n  const [pending, setPending] = useState<string | null>(null);\n\n  // Lazy-once realization of the active body; rapid switches realize only the latest.\n  useEffect(() => {\n    if (activeKey === null || props.headerOnly) {\n      setPending(null);\n      return;\n    }\n    const token = realizer.activate(activeKey);\n    if (token === 'shown') {\n      setPending(null);\n      return;\n    }\n    setPending(activeKey);\n    const t = startTimer(() => {\n      if (realizer.realize(token)) {\n        setPending(null);\n        setVersion((v) => v + 1);\n      }\n    }, g9TabViewMetrics.lazyRealizeDelayMs);\n    return () => stopTimer(t);\n  }, [activeKey, props.headerOnly]);\n\n  // Directional reveal of the newly active body (6 px slide + fade, 160 ms CubicOut).\n  const previous = useRef(-1);\n  const [reveal, setReveal] = useState<{ key: string | null; from: number; settled: boolean }>({\n    key: activeKey,\n    from: 0,\n    settled: true,\n  });\n  useEffect(() => {\n    const prev = previous.current;\n    previous.current = effective;\n    if (prev === effective || prev < 0) return;\n    setReveal({ key: activeKey, from: tabContentSlideFrom(prev, effective, rtl), settled: false });\n    const t = startTimer(() => setReveal((r) => ({ ...r, settled: true })), 16);\n    return () => stopTimer(t);\n  }, [effective]);\n\n  const select = (index: number) => {\n    if (index !== effective) setSelected(index);\n  };\n\n  const pager = useRef<ViewPagerRef | null>(null);\n  const swipe = props.swipeEnabled === true && !props.headerOnly;\n  const order = tabVisualOrder(count, rtl);\n  const visualIndex = order.indexOf(effective);\n  useEffect(() => {\n    if (!swipe || visualIndex < 0) return;\n    try {\n      pager.current?.scrollToPage(visualIndex, true);\n    } catch {\n      // The pager is gone (unmounted mid-switch).\n    }\n  }, [visualIndex, swipe]);\n\n  const bar = (\n    <TabBarStrip\n      items={items}\n      order={order}\n      effective={effective}\n      tabStyle={tabStyle}\n      mode={mode}\n      tabHeight={tabHeight}\n      background={props.tabBarBackground ?? null}\n      indicatorColor={props.indicatorColor ?? null}\n      numbering={culture.numberingSystem}\n      onSelect={select}\n    />\n  );\n\n  const bodyOf = (index: number): ReactNode => {\n    const item = items[index] as G9TabItem;\n    const key = keys[index] as string;\n    const active = index === effective;\n    if (!realizer.isRealized(key)) {\n      return active && pending === key ? <Spinner /> : null;\n    }\n    const revealing = active && reveal.key === key && !reveal.settled;\n    const style = {\n      display: (active || swipe ? 'flex' : 'none') as 'flex' | 'none',\n      transform: `translateX(${revealing ? reveal.from : 0}px)`,\n      opacity: revealing ? 0 : 1,\n      transition:\n        revealing || swipe\n          ? 'none'\n          : `transform ${g9TabViewMetrics.contentTransitionMs}ms ease-out, opacity ${g9TabViewMetrics.contentTransitionMs}ms ease-out`,\n    };\n    const content = typeof item.content === 'function' ? (item.content as () => ReactNode)() : item.content;\n    return (\n      <view key={key} className={`g9-tabs__panel${active ? ' g9-tabs__panel--active' : ''}`} style={style}>\n        {content}\n      </view>\n    );\n  };\n\n  const frame = props.showFrame\n    ? {\n        borderWidth: '1px',\n        borderStyle: 'solid',\n        borderColor: 'var(--g9-outline-variant)',\n        borderRadius: `${props.frameCornerRadius ?? 0}px`,\n      }\n    : {};\n  const content = props.headerOnly ? null : (\n    <view\n      className=\"g9-tabs__content\"\n      style={{ padding: thicknessCss(props.contentPadding ?? g9TabViewMetrics.contentPadding), ...frame }}\n    >\n      {swipe ? (\n        <ViewPager\n          ref={pager}\n          className=\"g9-tabs__pager\"\n          data={order}\n          getItemKey={(index: number) => keys[index] as string}\n          initialSelectIndex={Math.max(visualIndex, 0)}\n          onPageChange={(event) => {\n            const next = order[Number(event.detail.index)];\n            if (next !== undefined) select(next);\n          }}\n        >\n          {(index: number) => <view className=\"g9-tabs__page\">{bodyOf(index)}</view>}\n        </ViewPager>\n      ) : (\n        <>\n          {items.map((_, i) => bodyOf(i))}\n          {pending !== null && pending === activeKey ? <Spinner /> : null}\n        </>\n      )}\n    </view>\n  );\n\n  return (\n    <view\n      className={`g9-tabs g9-tabs--${tabStyle} g9-tabs--${barPosition}${props.headerOnly ? ' g9-tabs--header-only' : ''} ${props.className ?? ''}`}\n    >\n      {barPosition === 'bottom' ? content : null}\n      {bar}\n      {barPosition === 'top' ? content : null}\n    </view>\n  );\n}\n\nfunction Spinner(): ReactNode {\n  return (\n    <view className=\"g9-tabs__spinner\">\n      <G9ActivityIndicator running size={24} />\n    </view>\n  );\n}\n\ninterface StripProps {\n  readonly items: readonly G9TabItem[];\n  readonly order: readonly number[];\n  readonly effective: number;\n  readonly tabStyle: G9TabStyle;\n  readonly mode: G9TabMode;\n  readonly tabHeight: number;\n  readonly background: string | null;\n  readonly indicatorColor: string | null;\n  readonly numbering: Parameters<typeof tabBadge>[1];\n  readonly onSelect: (index: number) => void;\n}\n\nfunction TabBarStrip(props: StripProps): ReactNode {\n  const { items, order, effective, tabStyle, mode } = props;\n  const count = order.length;\n  const pill = tabStyle === 'pill';\n  const direction = useG9Direction();\n  const indicator = props.indicatorColor ?? 'var(--g9-primary)';\n  const fixed = mode === 'fixed';\n  const cellRefs = useRef<Array<G9NodeRef | null>>([]);\n  useEffect(() => {\n    if (fixed || effective < 0) return;\n    invokeNodeWhenReady({ current: cellRefs.current[effective] ?? null }, 'scrollIntoView', {\n      scrollIntoViewOptions: { behavior: 'smooth', block: 'center', inline: 'center' },\n    });\n  }, [effective, fixed]);\n\n  const cells = order.map((index, position) => {\n    const item = items[index] as G9TabItem;\n    const active = index === effective;\n    const badge = tabBadge(item, props.numbering);\n    const textColor = active\n      ? pill\n        ? (props.indicatorColor ?? 'var(--g9-on-primary-container)')\n        : 'var(--g9-on-surface)'\n      : 'var(--g9-on-surface-variant)';\n    return (\n      <view\n        key={tabKey(item, index)}\n        ref={(node: G9NodeRef | null) => {\n          cellRefs.current[index] = node;\n        }}\n        className={`g9-tabs__cell${active ? ' g9-tabs__cell--active' : ''}`}\n        style={fixed ? { flex: '1' } : {}}\n        accessibility-element\n        accessibility-traits=\"button\"\n        accessibility-label={item.text ?? ''}\n        bindtap={() => props.onSelect(index)}\n      >\n        {/* Sibling order is paint order in Lynx: the active pill goes first, behind the label. */}\n        {!fixed && active ? (\n          <view\n            className={pill ? 'g9-tabs__cell-pill' : 'g9-tabs__cell-underline'}\n            style={pill ? {} : { backgroundColor: indicator }}\n          />\n        ) : null}\n        {position > 0 && !pill ? <view className=\"g9-tabs__separator\" /> : null}\n        <view className=\"g9-tabs__cell-row\" style={g9RowStyle(direction)}>\n          <G9IconSlot\n            emoji={item.emoji}\n            icon={item.icon}\n            imagePath={item.imagePath}\n            image={item.image}\n            size={18}\n            color={textColor}\n          />\n          {item.text ? (\n            <text className=\"g9-tabs__label\" style={{ color: textColor, fontWeight: active ? '600' : '400' }}>\n              {item.text}\n            </text>\n          ) : null}\n          {badge === 'dot' ? (\n            <view className=\"g9-tabs__badge-dot\" style={{ backgroundColor: item.badgeColor ?? 'var(--g9-error)' }} />\n          ) : badge !== null ? (\n            <view className=\"g9-tabs__badge\" style={{ backgroundColor: item.badgeColor ?? 'var(--g9-error)' }}>\n              <text className=\"g9-tabs__badge-text\">{badge}</text>\n            </view>\n          ) : null}\n        </view>\n      </view>\n    );\n  });\n\n  const position = order.indexOf(effective);\n  const slider =\n    fixed && position >= 0 ? (\n      <view\n        className={pill ? 'g9-tabs__pill' : 'g9-tabs__underline'}\n        style={{\n          left: `${(position * 100) / count}%`,\n          width: `${100 / count}%`,\n          transition: `left ${g9TabViewMetrics.indicatorMoveMs}ms cubic-bezier(0.215, 0.61, 0.355, 1)`,\n        }}\n      >\n        <view\n          className={pill ? 'g9-tabs__pill-fill' : 'g9-tabs__underline-fill'}\n          style={pill ? {} : { backgroundColor: indicator }}\n        />\n      </view>\n    ) : null;\n\n  const barStyle = {\n    height: `${props.tabHeight}px`,\n    backgroundColor: props.background ?? (pill ? 'var(--g9-surface-container-low)' : 'transparent'),\n  };\n  return (\n    <view className=\"g9-tabs__bar\" style={barStyle}>\n      {fixed ? (\n        <view className=\"g9-tabs__cells\">\n          {slider}\n          {cells}\n        </view>\n      ) : (\n        <scroll-view className=\"g9-tabs__scroller\" scroll-orientation=\"horizontal\">\n          <view className=\"g9-tabs__cells g9-tabs__cells--scrollable\">{cells}</view>\n        </scroll-view>\n      )}\n    </view>\n  );\n}\n"],"names":["G9TabView","props","_props_tabStyle","_props_mode","_props_barPosition","_props_tabHeight","_props_defaultSelectedIndex","_props_tabBarBackground","_props_indicatorColor","_props_frameCornerRadius","_props_contentPadding","_props_className","items","tabStyle","mode","barPosition","tabHeight","g9TabViewMetrics","rtl","useG9Direction","culture","useG9Culture","selected","setSelected","useControllableState","count","effective","effectiveTabIndex","keys","item","i","tabKey","activeKey","eager","eagerRef","useRef","realizer","useMemo","G9TabRealizer","setVersion","useState","pending","setPending","useEffect","token","t","startTimer","v","stopTimer","previous","reveal","setReveal","prev","tabContentSlideFrom","r","select","index","pager","swipe","order","tabVisualOrder","visualIndex","_pager_current","bar","TabBarStrip","bodyOf","key","active","Spinner","revealing","style","content","view","frame","thicknessCss","ViewPager","Math","event","next","Number","undefined","_","G9ActivityIndicator","_props_background","pill","direction","indicator","fixed","cellRefs","_cellRefs_current_effective","invokeNodeWhenReady","cells","position","_item_text","_item_badgeColor","_item_badgeColor1","badge","tabBadge","textColor","node","g9RowStyle","G9IconSlot","text","slider","barStyle","scroll-view"],"mappings":"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"}

package/dist/tabs/tabs.css

@@ -0,0 +1,182 @@
+.g9-tabs {
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.g9-tabs--header-only {
+  flex: none;
+}
+
+.g9-tabs__bar {
+  flex-shrink: 0;
+  width: 100%;
+  position: relative;
+}
+
+.g9-tabs__content {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.g9-tabs--underlined .g9-tabs__bar {
+  border-top: 1px solid var(--g9-divider);
+  border-bottom: 1px solid var(--g9-divider);
+}
+
+.g9-tabs--pill .g9-tabs__bar {
+  border-radius: 26px;
+  padding: 4px;
+}
+
+.g9-tabs--pill.g9-tabs--top .g9-tabs__content {
+  margin-top: 8px;
+}
+
+.g9-tabs--pill.g9-tabs--bottom .g9-tabs__content {
+  margin-bottom: 8px;
+}
+
+.g9-tabs__cells {
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+
+.g9-tabs__cells--scrollable {
+  width: auto;
+}
+
+.g9-tabs__scroller {
+  width: 100%;
+  height: 100%;
+}
+
+.g9-tabs__cell {
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 0 14px;
+  display: flex;
+  position: relative;
+}
+
+.g9-tabs__cell-row {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  display: flex;
+}
+
+.g9-tabs__label {
+  font-size: 14px;
+}
+
+.g9-tabs__separator {
+  background-color: var(--g9-divider);
+  width: 1px;
+  position: absolute;
+  top: 12px;
+  bottom: 12px;
+  left: 0;
+}
+
+.g9-tabs__badge {
+  border-radius: 9px;
+  justify-content: center;
+  align-items: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  display: flex;
+}
+
+.g9-tabs__badge-text {
+  color: var(--g9-on-error);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.g9-tabs__badge-dot {
+  border-radius: 3.5px;
+  width: 7px;
+  height: 7px;
+}
+
+.g9-tabs__underline {
+  flex-direction: row;
+  justify-content: center;
+  height: 2.5px;
+  display: flex;
+  position: absolute;
+  bottom: 0;
+}
+
+.g9-tabs__underline-fill, .g9-tabs__cell-underline {
+  width: 100%;
+  height: 2.5px;
+}
+
+.g9-tabs__cell-underline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.g9-tabs__pill {
+  display: flex;
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+}
+
+.g9-tabs__pill-fill, .g9-tabs__cell-pill {
+  background-color: var(--g9-primary-container);
+  border: 1px solid var(--g9-primary-border);
+  border-radius: 18px;
+  width: 100%;
+  height: 100%;
+}
+
+.g9-tabs__cell-pill {
+  height: auto;
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 0;
+}
+
+.g9-tabs__panel {
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+}
+
+.g9-tabs__pager {
+  flex: 1;
+  height: 100%;
+}
+
+.g9-tabs__page {
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  display: flex;
+}
+
+.g9-tabs__spinner {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 72px;
+  display: flex;
+}
+
+
+/*# sourceMappingURL=tabs.css.map */

package/dist/tabs/tabs.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./src/tabs/tabs.css"],"names":[],"mappings":"AACA;EAAE,sBAAsB;EACtB,WAAW;EACX,aAAa;AACf;;AAGA;EAAE,UAAU;AACZ;;AAGA;EAAE,cAAc;EACd,WAAW;EACX,kBAAkB;AACpB;;AAGA;EAAE,sBAAsB;EACtB,OAAO;EACP,aAAa;EACb,kBAAkB;EAClB,gBAAgB;AAClB;;AAGA;EAAE,uCAAuC;EACvC,0CAA0C;AAC5C;;AAGA;EAAE,mBAAmB;EACnB,YAAY;AACd;;AAGA;EAAE,eAAe;AACjB;;AAGA;EAAE,kBAAkB;AACpB;;AAGA;EAAE,mBAAmB;EACnB,WAAW;EACX,YAAY;EACZ,aAAa;EACb,kBAAkB;AACpB;;AAGA;EAAE,WAAW;AACb;;AAGA;EAAE,WAAW;EACX,YAAY;AACd;;AAGA;EAAE,uBAAuB;EACvB,mBAAmB;EACnB,YAAY;EACZ,eAAe;EACf,aAAa;EACb,kBAAkB;AACpB;;AAGA;EAAE,mBAAmB;EACnB,uBAAuB;EACvB,mBAAmB;EACnB,QAAQ;EACR,aAAa;AACf;;AAGA;EAAE,eAAe;AACjB;;AAGA;EAAE,mCAAmC;EACnC,UAAU;EACV,kBAAkB;EAClB,SAAS;EACT,YAAY;EACZ,OAAO;AACT;;AAGA;EAAE,kBAAkB;EAClB,uBAAuB;EACvB,mBAAmB;EACnB,eAAe;EACf,YAAY;EACZ,cAAc;EACd,aAAa;AACf;;AAGA;EAAE,yBAAyB;EACzB,eAAe;EACf,gBAAgB;AAClB;;AAGA;EAAE,oBAAoB;EACpB,UAAU;EACV,WAAW;AACb;;AAGA;EAAE,mBAAmB;EACnB,uBAAuB;EACvB,aAAa;EACb,aAAa;EACb,kBAAkB;EAClB,SAAS;AACX;;AAGA;EAAE,WAAW;EACX,aAAa;AACf;;AAIA;EADE,kBAAkB;EAClB,SAAS;EACT,OAAO;AACT;;AAIA;EADE,aAAa;EACb,kBAAkB;EAClB,QAAQ;EACR,WAAW;AACb;;AAIA;EADE,6CAA6C;EAC7C,0CAA0C;EAC1C,mBAAmB;EACnB,WAAW;EACX,YAAY;AACd;;AAKA;EAFE,YAAY;EACZ,kBAAkB;EAClB,QAAQ;EACR,WAAW;EACX,OAAO;AACT;;AAKA;EAFE,sBAAsB;EACtB,OAAO;EACP,WAAW;AACb;;AAKA;EAFE,OAAO;EACP,YAAY;AACd;;AAKA;EAFE,sBAAsB;EACtB,OAAO;EACP,WAAW;EACX,aAAa;AACf;;AAKA;EAFE,uBAAuB;EACvB,mBAAmB;EACnB,WAAW;EACX,gBAAgB;EAChB,aAAa;AACf","sourcesContent":["/* G9TabView (MAUI G9TabView): bar, sliding indicator, lazily realized bodies. No shadows (plan/specs/02 §2). */\n.g9-tabs {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.g9-tabs--header-only {\n  flex: 0 0 auto;\n}\n\n.g9-tabs__bar {\n  position: relative;\n  width: 100%;\n  flex-shrink: 0;\n}\n\n.g9-tabs__content {\n  position: relative;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.g9-tabs--underlined .g9-tabs__bar {\n  border-top: 1px solid var(--g9-divider);\n  border-bottom: 1px solid var(--g9-divider);\n}\n\n.g9-tabs--pill .g9-tabs__bar {\n  border-radius: 26px;\n  padding: 4px;\n}\n\n.g9-tabs--pill.g9-tabs--top .g9-tabs__content {\n  margin-top: 8px;\n}\n\n.g9-tabs--pill.g9-tabs--bottom .g9-tabs__content {\n  margin-bottom: 8px;\n}\n\n.g9-tabs__cells {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  width: 100%;\n}\n\n.g9-tabs__cells--scrollable {\n  width: auto;\n}\n\n.g9-tabs__scroller {\n  height: 100%;\n  width: 100%;\n}\n\n.g9-tabs__cell {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 14px;\n}\n\n.g9-tabs__cell-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n\n.g9-tabs__label {\n  font-size: 14px;\n}\n\n.g9-tabs__separator {\n  position: absolute;\n  left: 0;\n  top: 12px;\n  bottom: 12px;\n  width: 1px;\n  background-color: var(--g9-divider);\n}\n\n.g9-tabs__badge {\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.g9-tabs__badge-text {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--g9-on-error);\n}\n\n.g9-tabs__badge-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 3.5px;\n}\n\n.g9-tabs__underline {\n  position: absolute;\n  bottom: 0;\n  height: 2.5px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n}\n\n.g9-tabs__underline-fill,\n.g9-tabs__cell-underline {\n  height: 2.5px;\n  width: 100%;\n}\n\n.g9-tabs__cell-underline {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n}\n\n.g9-tabs__pill {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  display: flex;\n}\n\n.g9-tabs__pill-fill,\n.g9-tabs__cell-pill {\n  width: 100%;\n  height: 100%;\n  border-radius: 18px;\n  background-color: var(--g9-primary-container);\n  border: 1px solid var(--g9-primary-border);\n}\n\n.g9-tabs__cell-pill {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  left: 0;\n  height: auto;\n}\n\n.g9-tabs__panel {\n  flex: 1;\n  flex-direction: column;\n  width: 100%;\n}\n\n.g9-tabs__pager {\n  flex: 1;\n  height: 100%;\n}\n\n.g9-tabs__page {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.g9-tabs__spinner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 72px;\n  width: 100%;\n}\n"],"sourceRoot":""}