@webview-native-ui/engine 1.0.1 → 1.0.2-0

package/README.md

@@ -50,6 +50,18 @@ The Engine supports **iOS and Android**. Ionic and Angular are optional. Start w
 
 Use matching Engine versions across npm and native dependencies, and retain dependency lockfiles for reproducible builds. Android placement requires API 23+, with composited snapshots available from API 26+.
 
+## Optional Ionic integration
+
+For Ionic applications using an Engine-enabled plugin, the `@webview-native-ui/engine/ionic` entry point connects Ionic overlay lifecycle events to native projection:
+
+```ts
+import { enableSupportIonicOverlays } from '@webview-native-ui/engine/ionic';
+
+enableSupportIonicOverlays();
+```
+
+Call it once during application startup unless your plugin already enables it. Applications importing it directly need `@webview-native-ui/engine` as a direct dependency. This shared framework integration coordinates coverage across plugins; each plugin retains control of its own presentation API. See [Ionic overlay support](docs/configuration/ionic-overlays.md) for setup, supported overlays and renderer helpers.
+
 ## Contributing
 
 For repository development, verification and publishing, see [development and releases](docs/maintenance.md).
@@ -57,3 +69,5 @@ For repository development, verification and publishing, see [development and re
 ## License
 
 [MIT](LICENSE). Commercial use, modification and redistribution are permitted with the license's notice and attribution requirements. The Engine's license does not change the licenses of applications or plugins that depend on it.
+
+For the optional shared control runtime and adapter boundaries, see [shared controls](docs/controls.md).

package/WebViewNativeUIControls.podspec

@@ -0,0 +1,17 @@
+require 'json'
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+Pod::Spec.new do |s|
+ s.name = 'WebViewNativeUIControls'
+ s.version = package['version']
+ s.summary = 'Native UI infrastructure for Capacitor and Cordova plugin maintainers.'
+ s.homepage = 'https://github.com/webview-native-ui/engine'
+ s.license = { :type => 'MIT', :file => 'LICENSE' }
+ s.preserve_paths = 'LICENSE'
+ s.author = { 'rdlabo' => 'sakakibara@rdlabo.jp' }
+ s.source = { :git => 'https://github.com/webview-native-ui/engine.git', :tag => "v#{s.version}" }
+ s.source_files = 'ios/Sources/WebViewNativeUIControls/**/*.swift'
+ s.ios.deployment_target = '15.0'
+ s.swift_version = '5.9'
+ s.frameworks = 'UIKit', 'WebKit', 'SwiftUI'
+ s.dependency 'WebViewNativeUIEngine', s.version.to_s
+end

package/dist/controls/activation.d.ts

@@ -0,0 +1,15 @@
+import type { NativeUITransport } from './transport.js';
+import type { NativeUIRuntimeHandle, NativeUIRuntimeOptions, NativeUIPlugin, WebViewMetrics } from './definitions.js';
+import { type NativeUIConnection } from './shared/connection.js';
+export interface OverlayController {
+    suspend(): Promise<() => void>;
+    destroy(): Promise<void>;
+}
+type OverlayFactory = (doc: Document, plugin: NativeUIPlugin, options: NativeUIRuntimeOptions, retain: (deferActivation?: (id: string) => boolean) => () => void, nativeRail: () => boolean, connection?: NativeUIConnection) => Promise<OverlayController>;
+export { defineNativeUI } from './extensions.js';
+export type { NativeUIExtension, NativeUIValue } from './extensions.js';
+export type { NativeUIComponent, NativeUIControls, NativeUIRuntimeHandle, NativeUIRuntimeOptions, NativeUIStatus, NativeUISuspension, VerticalBarEdge, WebViewMetrics, } from './definitions.js';
+export declare const createNativeUIActivation: (transport: NativeUITransport) => {
+    enableNativeUI: (options?: NativeUIRuntimeOptions, overlayFactory?: OverlayFactory) => Promise<NativeUIRuntimeHandle>;
+    configureNativeTransition: () => Promise<WebViewMetrics>;
+};

package/dist/controls/activation.js

@@ -0,0 +1,370 @@
+import { controlDefault } from './shared/control-options.js';
+import { toolbarOptions } from './shared/toolbar-options.js';
+import { createDiagnostics } from './shared/diagnostics.js';
+import { createHTMLWebProjection } from './html.js';
+import { validateExtensions } from './extensions.js';
+import { nativeWebViewMetrics } from '../integration/index.js';
+import { createRuntime } from './runtime.js';
+import { bounded, boundedListener } from './shared/bridge.js';
+import { createNativeConnection } from './shared/connection.js';
+import { createVerticalBarsWebProjection } from './vertical-bars-web.js';
+import { prehideVerticalBarsToolbarSources } from './prehide.js';
+import { observeVerticalBarsModals, topModal, modalPreparing, modalPresentation } from './shared/modal.js';
+export { defineNativeUI } from './extensions.js';
+export const createNativeUIActivation = (transport) => {
+    const plugin = transport.plugin;
+    let active;
+    let activeFailed = false;
+    let activeRoot;
+    let activeRailHost;
+    let activeConfiguration;
+    let activeExtensions = [];
+    let stopping;
+    // Every stop entry point releases the activation immediately but reserves the
+    // shared native/DOM resources until its teardown has settled.
+    const stopActivation = (owner, destruction) => {
+        if (active !== owner)
+            return;
+        active = undefined;
+        activeFailed = false;
+        activeConfiguration = undefined;
+        activeRoot = undefined;
+        activeRailHost = undefined;
+        activeExtensions = [];
+        stopping = destruction;
+        const release = () => {
+            if (stopping === destruction)
+                stopping = undefined;
+        };
+        void destruction.then(release, release);
+    };
+    const web = (reason) => ({
+        markForCheck: () => { },
+        getStatus: () => ({ state: 'web', projected: 0, updates: 0, reason }),
+        suspend: async () => ({ resume: async () => { } }),
+        destroy: async () => { },
+    });
+    const combine = (native, fallback) => ({
+        markForCheck() {
+            native.markForCheck();
+            fallback.markForCheck();
+        },
+        getStatus() {
+            const nativeStatus = native.getStatus();
+            const fallbackStatus = fallback.getStatus();
+            return {
+                ...nativeStatus,
+                state: nativeStatus.state === 'stopped' && fallbackStatus.state === 'stopped'
+                    ? 'stopped'
+                    : nativeStatus.projected > 0
+                        ? 'native'
+                        : 'web',
+                projected: nativeStatus.projected + fallbackStatus.projected,
+                updates: nativeStatus.updates + fallbackStatus.updates,
+            };
+        },
+        async suspend(options) {
+            const [nativeLease, fallbackLease] = await Promise.all([native.suspend(options), fallback.suspend(options)]);
+            return { resume: async () => void (await Promise.all([nativeLease.resume(), fallbackLease.resume()])) };
+        },
+        async destroy() {
+            await Promise.all([native.destroy(), fallback.destroy()]);
+        },
+    });
+    /** Wraps a runtime handle with the shared enable-lifecycle: reason, suspend hooks and idempotent destroy. */
+    const manage = (handle, lifecycle = {}) => {
+        let destruction;
+        return {
+            markForCheck: () => {
+                if (!destruction)
+                    handle.markForCheck();
+            },
+            getStatus: () => (lifecycle.reason ? { ...handle.getStatus(), reason: lifecycle.reason } : handle.getStatus()),
+            async suspend(options) {
+                const lease = await handle.suspend(options);
+                const resume = await lifecycle.suspend?.();
+                return {
+                    async resume() {
+                        await lease.resume();
+                        resume?.();
+                    },
+                };
+            },
+            destroy() {
+                if (!destruction) {
+                    destruction = Promise.resolve().then(async () => {
+                        try {
+                            await handle.destroy();
+                        }
+                        finally {
+                            await lifecycle.destroy?.();
+                        }
+                    });
+                    lifecycle.stopping?.(destruction);
+                }
+                return destruction;
+            },
+        };
+    };
+    /** Reads the current native WebView geometry and applies it to page transitions. */
+    const configureNativeTransition = async () => {
+        const metrics = typeof document !== 'undefined' && transport.getPlatform() === 'ios' && transport.isAvailable()
+            ? await bounded(plugin.getWebViewMetrics())
+            : { radius: 0 };
+        nativeWebViewMetrics.radius = metrics.radius;
+        return metrics;
+    };
+    /** Resolves a logical vertical-bar edge to the physical side for the given direction. */
+    const physicalVerticalBarEdge = (edge, rtl) => (edge === 'leading') !== rtl ? 'left' : 'right';
+    const elementRtl = (element) => element.closest('[dir]')?.getAttribute('dir') === 'rtl';
+    const webProjection = (doc, options, enabled = () => true) => {
+        const ionic = () => createVerticalBarsWebProjection(doc, options, () => options.verticalBars?.enabled !== false && enabled());
+        if (options.source === 'html')
+            return createHTMLWebProjection(doc, options);
+        if (options.source === 'auto')
+            return combine(ionic(), createHTMLWebProjection(doc, options));
+        return ionic();
+    };
+    /** Call once at application startup. Ionic markup remains the source of truth. */
+    const enableNativeUI = (options = {}, overlayFactory) => {
+        if (typeof document === 'undefined')
+            return Promise.resolve(web('Requires a document'));
+        const extensions = [...(options.extensions ?? [])];
+        const nativeState = (options.nativeState = {});
+        try {
+            validateExtensions(extensions, document);
+        }
+        catch (error) {
+            return Promise.reject(error);
+        }
+        const configuration = JSON.stringify([
+            options.source ?? 'ionic',
+            options.debug === true,
+            options.ionic?.auto !== false,
+            options.verticalBars?.enabled !== false,
+            options.verticalBars?.placement?.edge,
+            options.rail?.edge,
+            toolbarOptions(options, false),
+            toolbarOptions(options, true),
+            options.ionic?.verticalBars?.buttonProjection ?? 'system',
+            // Local source overrides can use this even when the startup projection is system.
+            options.ionic?.verticalBars?.buttonDefaultFill ?? 'glass',
+            ...['tabs', 'segment', 'fab'].flatMap((kind) => [
+                controlDefault(options, kind, false),
+                controlDefault(options, kind, true),
+            ]),
+            options.ionic?.verticalBars?.popover === true,
+        ]);
+        if (active && activeFailed) {
+            const previous = active;
+            stopActivation(previous, previous.then((handle) => handle.destroy()));
+        }
+        if (active &&
+            (activeConfiguration !== configuration ||
+                activeRoot !== options.root ||
+                activeRailHost !== options.rail?.host ||
+                extensions.length !== activeExtensions.length ||
+                extensions.some((extension, index) => extension !== activeExtensions[index])))
+            return Promise.reject(new Error('Native UI is already running with different controls or extensions; destroy it before changing configuration.'));
+        if (active)
+            return active;
+        activeConfiguration = configuration;
+        activeRoot = options.root;
+        activeRailHost = options.rail?.host;
+        activeExtensions = extensions;
+        const previousStop = stopping;
+        let start;
+        const stop = (destruction) => stopActivation(start, destruction);
+        let releaseNative = async () => { };
+        let retired = false;
+        const pagehide = () => runtimeStopped('pagehide');
+        const runtimeStopped = (cause) => {
+            if (cause === 'failure') {
+                // Keep the Web rail usable, but replace this degraded activation on the next enable.
+                if (active === start)
+                    activeFailed = true;
+                void start
+                    .then(async () => {
+                    if (!retired)
+                        document.defaultView?.addEventListener('pagehide', pagehide, { once: true });
+                    await releaseNative();
+                })
+                    .catch(() => { });
+                return;
+            }
+            const destruction = start.then((handle) => handle.destroy());
+            stop(destruction);
+            void destruction.catch(() => { });
+        };
+        return (start = active =
+            (async () => {
+                // Native controls and DOM ownership are shared. A replacement activation
+                // must wait until the old handle has finished clearing both surfaces.
+                if (previousStop)
+                    await previousStop.catch(() => { });
+                const platform = transport.getPlatform();
+                const diagnose = createDiagnostics(options.debug);
+                let nativeModalAnimations = () => false;
+                const stopModals = options.source === 'html' ? () => { } : observeVerticalBarsModals(document, () => nativeModalAnimations());
+                const prehide = platform !== 'android' && options.source !== 'html' && options.ionic?.auto !== false
+                    ? prehideVerticalBarsToolbarSources(document, () => options.verticalBars?.enabled !== false, options.root, options)
+                    : undefined;
+                const fallback = (reason) => {
+                    diagnose(`web-fallback: ${reason}`);
+                    return manage(webProjection(document, options), {
+                        reason,
+                        suspend: () => prehide?.suspend(),
+                        destroy: () => {
+                            retired = true;
+                            document.defaultView?.removeEventListener('pagehide', pagehide);
+                            prehide?.stop();
+                            stopModals();
+                        },
+                        stopping: stop,
+                    });
+                };
+                if (platform !== 'ios' && platform !== 'android')
+                    return fallback('Requires an iOS or Android native host');
+                if (!transport.isAvailable())
+                    return fallback('Native UI plugin is not registered');
+                let runtime;
+                let overlays;
+                let connection;
+                let metricsListener;
+                let nativeRelease;
+                releaseNative = () => (nativeRelease ??= (async () => {
+                    try {
+                        connection?.stop();
+                        await overlays?.destroy();
+                    }
+                    finally {
+                        if (metricsListener)
+                            await bounded(metricsListener.remove()).catch(() => { });
+                    }
+                })());
+                const cleanup = async () => {
+                    retired = true;
+                    try {
+                        await releaseNative();
+                    }
+                    finally {
+                        document.defaultView?.removeEventListener('pagehide', pagehide);
+                        prehide?.stop();
+                        stopModals();
+                    }
+                };
+                try {
+                    const ordinaryControls = ['button', 'backButton', 'tabs', 'segment', 'fab'].some((kind) => controlDefault(options, kind, false));
+                    const capabilities = await bounded(plugin.configure({ suppressScrollEdgeEffect: ordinaryControls }));
+                    if (!capabilities.supported)
+                        return fallback('Native UI is unavailable on this device');
+                    if (capabilities.connectionState)
+                        connection = createNativeConnection(document, plugin);
+                    const listen = connection?.listen ?? plugin.addListener.bind(plugin);
+                    const unavailableExtensions = new Map();
+                    for (const extension of extensions) {
+                        if (platform === 'android' && extension.placement === 'tab-accessory')
+                            unavailableExtensions.set(extension.name, 'unsupported-placement: tab-accessory requires a supported iOS tab host.');
+                        else if (!capabilities.extensions?.includes(extension.name))
+                            unavailableExtensions.set(extension.name, 'unregistered-extension: register this name in the native app before enabling the shell, then rebuild.');
+                    }
+                    if (platform === 'android') {
+                        runtime = await createRuntime(document, plugin, {
+                            ...options,
+                            source: 'extensions',
+                            coveredSnapshots: capabilities.coveredSnapshots === true,
+                            extensions,
+                            unavailableExtensions,
+                        }, () => false, runtimeStopped, connection);
+                        runtime = combine(runtime, webProjection(document, options));
+                        metricsListener = await boundedListener(listen('webViewMetricsChange', () => {
+                            document.defaultView?.dispatchEvent(new Event('nativeUIRefresh'));
+                        }));
+                        connection?.start();
+                        return manage(runtime, {
+                            stopping: stop,
+                            destroy: cleanup,
+                        });
+                    }
+                    let deviceEdge = null;
+                    const ionicRoot = () => {
+                        if (options.source === 'html')
+                            return null;
+                        const root = options.root ?? document.body;
+                        return root.closest('ion-app') ?? root.querySelector('ion-app');
+                    };
+                    const updateNativeEdge = () => {
+                        const requested = options.verticalBars?.placement?.edge;
+                        const root = ionicRoot() ?? options.root ?? document.body;
+                        nativeState.edge =
+                            deviceEdge && (!requested || requested === deviceEdge) ? physicalVerticalBarEdge(deviceEdge, elementRtl(root)) : undefined;
+                    };
+                    // Ionic layout is read-only input; device metrics determine native availability.
+                    const nativeVerticalBars = () => {
+                        updateNativeEdge();
+                        if (options.verticalBars?.enabled === false)
+                            return false;
+                        const app = ionicRoot();
+                        if (!app?.classList.contains('ios-theme-vertical-bars'))
+                            return !!nativeState.edge;
+                        const physicalEdge = app.classList.contains('ios-theme-vertical-bars-left') ? 'left' : 'right';
+                        return physicalEdge === nativeState.edge;
+                    };
+                    nativeModalAnimations = () => capabilities.modalAnimation === true && nativeVerticalBars();
+                    const applyMetrics = (metrics) => {
+                        if (ordinaryControls)
+                            nativeWebViewMetrics.radius = metrics.radius;
+                        deviceEdge = metrics.verticalBarEdge ?? null;
+                        updateNativeEdge();
+                        document.defaultView?.dispatchEvent(new Event('nativeUIRefresh'));
+                    };
+                    metricsListener = await boundedListener(listen('webViewMetricsChange', applyMetrics));
+                    await bounded(Promise.resolve().then(() => plugin.getWebViewMetrics()))
+                        .then(applyMetrics)
+                        .catch(() => undefined);
+                    connection?.observe(async (_, restored) => {
+                        if (restored)
+                            await bounded(plugin.getWebViewMetrics())
+                                .then(applyMetrics)
+                                .catch(() => undefined);
+                    });
+                    const native = await createRuntime(document, plugin, {
+                        ...options,
+                        extensions,
+                        unavailableExtensions,
+                        coveredSnapshots: capabilities.coveredSnapshots === true,
+                        nativeScroll: capabilities.nativeScroll === true,
+                    }, nativeVerticalBars, runtimeStopped, connection);
+                    runtime = combine(native, webProjection(document, options, () => {
+                        const modal = topModal(document);
+                        return (!(modal && (modalPreparing(modal) || modalPresentation(modal))) &&
+                            (!nativeVerticalBars() || native.getStatus().projected === 0));
+                    }));
+                    if (options.ionic?.verticalBars?.popover === true && overlayFactory)
+                        overlays = await overlayFactory(document, plugin, options, native.retain, nativeVerticalBars, connection);
+                    connection?.start();
+                    return manage(runtime, {
+                        suspend: async () => {
+                            const restorePrehide = prehide?.suspend();
+                            const resumeOverlays = await overlays?.suspend();
+                            return () => {
+                                restorePrehide?.();
+                                resumeOverlays?.();
+                            };
+                        },
+                        stopping: stop,
+                        destroy: cleanup,
+                    });
+                }
+                catch (error) {
+                    connection?.stop();
+                    await overlays?.destroy().catch(() => { });
+                    await runtime?.destroy().catch(() => { });
+                    if (metricsListener)
+                        await bounded(metricsListener.remove()).catch(() => { });
+                    return fallback(error instanceof Error ? error.message : String(error));
+                }
+            })());
+    };
+    return { enableNativeUI, configureNativeTransition };
+};

package/dist/controls/components/index.d.ts

@@ -0,0 +1,16 @@
+import type { VerticalControlAreaOptions } from '../definitions.js';
+import * as button from './ion-button.js';
+import * as buttons from './ion-buttons.js';
+import * as backButton from './ion-back-button.js';
+import * as menuButton from './ion-menu-button.js';
+import * as tabBar from './ion-tab-bar.js';
+import * as segment from './ion-segment.js';
+import * as fab from './ion-fab.js';
+import type { Candidate, Identify } from '../shared/candidate.js';
+export declare const components: readonly [typeof button, typeof buttons, typeof backButton, typeof menuButton, typeof tabBar, typeof segment, typeof fab];
+export type NativeUIComponent = (typeof components)[number]['tag'];
+export declare const selector: string;
+export declare const shadowSelector: string;
+export declare const motionSelector: string;
+export declare const isVerticalBarsCandidate: (element: HTMLElement) => boolean;
+export declare const readCandidate: (element: HTMLElement, id: Identify, options?: VerticalControlAreaOptions) => Candidate | undefined;

package/dist/controls/components/index.js

@@ -0,0 +1,38 @@
+import * as button from './ion-button.js';
+import * as buttons from './ion-buttons.js';
+import * as backButton from './ion-back-button.js';
+import * as menuButton from './ion-menu-button.js';
+import * as tabBar from './ion-tab-bar.js';
+import * as segment from './ion-segment.js';
+import * as fab from './ion-fab.js';
+import { isVerticalBarsSource, visible, withoutPrehide } from '../shared/dom.js';
+// Static composition only. Each component declares its own tag, discovery and reader.
+export const components = [button, buttons, backButton, menuButton, tabBar, segment, fab];
+export const selector = components
+    .map((component) => ('selector' in component ? component.selector : component.tag))
+    .filter(Boolean)
+    .join(', ');
+export const shadowSelector = [
+    'ion-icon',
+    ...components.flatMap((component) => ('shadowSelector' in component ? [component.shadowSelector] : [])),
+].join(', ');
+export const motionSelector = [
+    '.ion-page',
+    'ion-header',
+    'ion-footer',
+    'ion-toolbar',
+    ...components.filter((component) => 'tracksMotion' in component && component.tracksMotion).map((component) => component.tag),
+].join(', ');
+export const isVerticalBarsCandidate = isVerticalBarsSource;
+export const readCandidate = (element, id, options = {}) => {
+    const verticalBars = isVerticalBarsCandidate(element);
+    if ((!element.classList.contains('ios') && !verticalBars) ||
+        !visible(element, verticalBars) ||
+        element.closest('ion-popover') ||
+        (element.closest('ion-modal') && !verticalBars))
+        return;
+    if (element.contains(element.ownerDocument.activeElement))
+        return;
+    // Read icon and control geometry before restoring prehide, which can collapse the toolbar.
+    return withoutPrehide(element, () => components.find((component) => component.tag === element.localName)?.read(element, id, options));
+};

package/dist/controls/components/ion-back-button.d.ts

@@ -0,0 +1,4 @@
+import type { VerticalControlAreaOptions } from '../definitions.js';
+import type { Candidate, Identify } from '../shared/candidate.js';
+export declare const tag = "ion-back-button";
+export declare const read: (element: HTMLElement, id: Identify, options?: VerticalControlAreaOptions) => Candidate | undefined;

package/dist/controls/components/ion-back-button.js

@@ -0,0 +1,16 @@
+import { horizontalSelected, inVerticalToolbarLayout } from '../shared/toolbar-options.js';
+import { createCandidate, appendItem } from '../shared/candidate.js';
+import { inFixedToolbar, isVerticalBarsSource } from '../shared/dom.js';
+export const tag = 'ion-back-button';
+export const read = (element, id, options = {}) => {
+    const button = element;
+    if ((inVerticalToolbarLayout(element) ? !isVerticalBarsSource(element) : !horizontalSelected(element, options)) ||
+        !button.shadowRoot ||
+        button.icon !== undefined ||
+        button.color !== undefined ||
+        (!isVerticalBarsSource(element) && !inFixedToolbar(element)))
+        return;
+    const candidate = createCandidate(element, tag, id);
+    const label = button.shadowRoot.querySelector('[part="text"]')?.textContent?.trim() ?? '';
+    return appendItem(candidate, element, id, button.shadowRoot, label) ? candidate : undefined;
+};

package/dist/controls/components/ion-button.d.ts

@@ -0,0 +1,4 @@
+import type { VerticalControlAreaOptions } from '../definitions.js';
+import type { Candidate, Identify } from '../shared/candidate.js';
+export declare const tag = "ion-button";
+export declare const read: (element: HTMLElement, id: Identify, options?: VerticalControlAreaOptions) => Candidate | undefined;

package/dist/controls/components/ion-button.js

@@ -0,0 +1,26 @@
+import { horizontalSelected, horizontalToolbarGroup, inVerticalToolbarLayout } from '../shared/toolbar-options.js';
+import { createCandidate, appendItem } from '../shared/candidate.js';
+import { inFixedToolbar, isVerticalBarsToolbarAction, isVerticalBarsToolbarGroup } from '../shared/dom.js';
+export const tag = 'ion-button';
+export const read = (element, id, options = {}) => {
+    const button = element;
+    const verticalBars = inVerticalToolbarLayout(element);
+    if (verticalBars && element.parentElement && isVerticalBarsToolbarGroup(element.parentElement))
+        return;
+    const fill = button.fill ?? 'default';
+    const group = element.parentElement?.matches('ion-buttons') ? element.parentElement : undefined;
+    if (!verticalBars && (!horizontalSelected(element, options) || (group && horizontalToolbarGroup(group, options))))
+        return;
+    if (!inFixedToolbar(element) ||
+        (verticalBars && !isVerticalBarsToolbarAction(element)) ||
+        (!verticalBars && fill !== 'default' && !(group && fill === 'clear')) ||
+        (!verticalBars && button.classList.contains('ion-color')))
+        return;
+    const candidate = createCandidate(element, tag, id, options);
+    const item = appendItem(candidate, element, id);
+    if (!item)
+        return;
+    if (!verticalBars && (fill === 'clear' || (group && button.fill === undefined)))
+        item.buttonFill = 'clear';
+    return candidate;
+};

package/dist/controls/components/ion-buttons.d.ts

@@ -0,0 +1,5 @@
+import type { VerticalControlAreaOptions } from '../definitions.js';
+import type { Candidate, Identify } from '../shared/candidate.js';
+export declare const tag = "ion-buttons";
+export declare const tracksMotion = true;
+export declare const read: (element: HTMLElement, id: Identify, options?: VerticalControlAreaOptions) => Candidate | undefined;

package/dist/controls/components/ion-buttons.js

@@ -0,0 +1,34 @@
+import { horizontalToolbarGroup, inVerticalToolbarLayout } from '../shared/toolbar-options.js';
+import { createCandidate, appendItem } from '../shared/candidate.js';
+import { childElements, verticalBarsToolbarActions, inFixedToolbar, isVerticalBarsToolbarGroup } from '../shared/dom.js';
+import * as menuButton from './ion-menu-button.js';
+export const tag = 'ion-buttons';
+export const tracksMotion = true;
+export const read = (element, id, options = {}) => {
+    if (!inFixedToolbar(element))
+        return;
+    let children = childElements(element);
+    const verticalBars = inVerticalToolbarLayout(element);
+    if (verticalBars ? !isVerticalBarsToolbarGroup(element) : !horizontalToolbarGroup(element, options))
+        return;
+    if (children.length === 1 && (!verticalBars || children[0].matches(menuButton.tag)))
+        return menuButton.read(element, id, options);
+    if (verticalBars)
+        children = verticalBarsToolbarActions(element);
+    if (!children.length ||
+        children.some((child) => !child.matches(`${menuButton.tag}${verticalBars ? '' : '.ios'}`) &&
+            (!child.matches(`ion-button${verticalBars ? '' : '.ios.button-clear'}`) ||
+                (!verticalBars && (child.fill ?? 'clear') !== 'clear'))))
+        return;
+    const candidate = createCandidate(element, tag, id, options);
+    if (verticalBars && children.length !== childElements(element).length)
+        candidate.sources = children;
+    for (const child of children) {
+        const supported = child.matches(menuButton.tag)
+            ? menuButton.append(candidate, child, id)
+            : appendItem(candidate, child, id);
+        if (!supported)
+            return;
+    }
+    return candidate;
+};

package/dist/controls/components/ion-fab.d.ts

@@ -0,0 +1,4 @@
+import type { Candidate } from '../shared/candidate.js';
+export declare const tag = "ion-fab";
+export declare const shadowSelector = "ion-fab-button, ion-fab-list";
+export declare const read: (fab: HTMLElement, id: (element: HTMLElement) => string) => Candidate | undefined;