@rdlabo/ionic-theme-ios27 1.2.1 → 2.0.0-beta.pr303.shaf4f5ca16816f

package/src/native/components/index.ts

@@ -1,53 +0,0 @@
-import type { VerticalControlAreaOptions } from '../definitions';
-import * as button from './ion-button';
-import * as buttons from './ion-buttons';
-import * as backButton from './ion-back-button';
-import * as menuButton from './ion-menu-button';
-import * as tabBar from './ion-tab-bar';
-import * as segment from './ion-segment';
-import * as fab from './ion-fab';
-import { isDisabledButtonGroupChild, isVerticalBarsSource, visible, withoutPrehide } from '../shared/dom';
-import type { Candidate, Identify } from '../shared/candidate';
-
-// Static composition only. Each component declares its own tag, discovery and reader.
-export const components = [button, buttons, backButton, menuButton, tabBar, segment, fab] as const;
-export type NativeUIShellComponent = (typeof components)[number]['tag'];
-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: HTMLElement, id: Identify, options: VerticalControlAreaOptions = {}): Candidate | undefined => {
-  const verticalBars = isVerticalBarsCandidate(element);
-  if (
-    (!element.classList.contains('ios') && !verticalBars) ||
-    !visible(element, verticalBars) ||
-    element.closest('ion-popover') ||
-    (element.closest('ion-modal') && !verticalBars)
-  )
-    return;
-  const style = getComputedStyle(element);
-  if (
-    !isDisabledButtonGroupChild(element) &&
-    !style.getPropertyValue('--ios-theme-glass-background-rgb').trim() &&
-    !style.getPropertyValue('--ios26-glass-background-rgb').trim() &&
-    !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/src/native/components/ion-back-button.ts

@@ -1,19 +0,0 @@
-import { createCandidate, appendItem } from '../shared/candidate';
-import type { Candidate, Identify } from '../shared/candidate';
-import { inFixedToolbar, isVerticalBarsSource } from '../shared/dom';
-
-export const tag = 'ion-back-button';
-
-export const read = (element: HTMLElement, id: Identify): Candidate | undefined => {
-  const button = element as HTMLIonBackButtonElement;
-  if (
-    !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/src/native/components/ion-button.ts

@@ -1,24 +0,0 @@
-import type { VerticalControlAreaOptions } from '../definitions';
-import { modalUsesVerticalBars } from '../shared/modal';
-import { createCandidate, appendItem } from '../shared/candidate';
-import type { Candidate, Identify } from '../shared/candidate';
-import { inFixedToolbar, isVerticalBarsToolbarAction, isVerticalBarsToolbarGroup } from '../shared/dom';
-
-export const tag = 'ion-button';
-
-export const read = (element: HTMLElement, id: Identify, options: VerticalControlAreaOptions = {}): Candidate | undefined => {
-  const button = element as HTMLIonButtonElement;
-  const verticalBars =
-    !element.closest('ion-menu, ion-popover') && modalUsesVerticalBars(element) && !!element.closest('ion-app.ios-theme-vertical-bars');
-  if (verticalBars && element.parentElement && isVerticalBarsToolbarGroup(element.parentElement)) return;
-  const fill = button.fill ?? 'default';
-  if (
-    !inFixedToolbar(element) ||
-    (verticalBars && !isVerticalBarsToolbarAction(element)) ||
-    (!verticalBars && fill !== 'default') ||
-    (!verticalBars && button.classList.contains('ion-color'))
-  )
-    return;
-  const candidate = createCandidate(element, tag, id, options);
-  return appendItem(candidate, element, id) ? candidate : undefined;
-};

package/src/native/components/ion-buttons.ts

@@ -1,38 +0,0 @@
-import type { VerticalControlAreaOptions } from '../definitions';
-import { modalUsesVerticalBars } from '../shared/modal';
-import { createCandidate, appendItem } from '../shared/candidate';
-import type { Candidate, Identify } from '../shared/candidate';
-import { childElements, verticalBarsToolbarActions, inFixedToolbar, isVerticalBarsToolbarGroup } from '../shared/dom';
-import * as menuButton from './ion-menu-button';
-
-export const tag = 'ion-buttons';
-export const tracksMotion = true;
-
-export const read = (element: HTMLElement, id: Identify, options: VerticalControlAreaOptions = {}): Candidate | undefined => {
-  if (!inFixedToolbar(element)) return;
-  let children = childElements(element);
-  if (children.length === 1) return menuButton.read(element, id, options);
-  const verticalBars =
-    !element.closest('ion-menu, ion-popover') && modalUsesVerticalBars(element) && !!element.closest('ion-app.ios-theme-vertical-bars');
-  if (verticalBars && !isVerticalBarsToolbarGroup(element)) return;
-  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 as HTMLIonButtonElement).fill !== '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 as HTMLIonMenuButtonElement, id)
-      : appendItem(candidate, child, id);
-    if (!supported) return;
-  }
-  return candidate;
-};

package/src/native/components/ion-fab.ts

@@ -1,151 +0,0 @@
-import type { Candidate } from '../shared/candidate';
-import { childElements, excluded, isDark, text } from '../shared/dom';
-import { iconSource } from '../shared/icons';
-import type { ShellItem } from '../definitions';
-
-export const tag = 'ion-fab';
-export const shadowSelector = 'ion-fab-button, ion-fab-list';
-
-const hasHostMotion = (style: CSSStyleDeclaration): boolean =>
-  style.animationName !== 'none' || style.transitionDuration.split(',').some((value) => parseFloat(value) > 0);
-
-// FAB owns the batch; only its buttons draw glass. Closed lists keep their IDs
-// and resolved artwork, without inventing layout for display:none descendants.
-export const read = (fab: HTMLElement, id: (element: HTMLElement) => string): Candidate | undefined => {
-  if (fab.slot !== 'fixed' || !fab.parentElement?.matches('ion-content') || fab.contains(fab.ownerDocument.activeElement)) return;
-  const children = childElements(fab);
-  const main = children.filter((child) => child.matches('ion-fab-button'));
-  const lists = children.filter((child) => child.matches('ion-fab-list'));
-  if (main.length !== 1 || main.length + lists.length !== children.length) return;
-  if (lists.some((list) => list.closest(excluded) || childElements(list).some((child) => !child.matches('ion-fab-button')))) return;
-  const buttons = [main[0], ...lists.flatMap((list) => childElements(list))] as HTMLIonFabButtonElement[];
-  const style = getComputedStyle(fab);
-  if (hasHostMotion(style)) return;
-  const transform = new DOMMatrixReadOnly(style.transform);
-  if (!transform.is2D || transform.a !== 1 || transform.d !== 1 || transform.b || transform.c) return;
-  const candidate: Candidate = {
-    element: fab,
-    control: {
-      id: id(fab),
-      kind: tag,
-      x: 0,
-      y: 0,
-      width: innerWidth,
-      height: innerHeight,
-      dark: isDark(style),
-      rtl: style.direction === 'rtl',
-      items: [],
-    },
-    actions: new Map(),
-    icons: [],
-  };
-  for (const button of buttons) {
-    if (!button.classList.contains('ios') || button.closest(excluded) || button.color || button.type !== 'button' || button.href) return;
-    if (button.querySelector('input, button, a, img, canvas, video, ion-spinner, ion-avatar, ion-badge')) return;
-    const native = button.shadowRoot?.querySelector<HTMLElement>('[part=native]');
-    if (!native) return;
-    const s = getComputedStyle(button),
-      n = getComputedStyle(native);
-    // An opaque custom host/background or custom shape cannot be discarded.
-    const alpha = n.backgroundColor.startsWith('rgba(') ? Number(n.backgroundColor.slice(5, -1).split(',')[3]) : 1;
-    if (
-      s.backgroundColor !== 'rgba(0, 0, 0, 0)' ||
-      s.backgroundImage !== 'none' ||
-      n.backgroundImage.includes('url(') ||
-      !n.backdropFilter.includes('blur') ||
-      !(alpha > 0 && alpha < 1)
-    )
-      return;
-    const width = parseFloat(s.width),
-      height = parseFloat(s.height);
-    if (!(width > 0 && height > 0) || Math.abs(width - height) > 0.5 || !n.borderRadius.includes('50%')) return;
-    const list = button.parentElement?.matches('ion-fab-list') ? (button.parentElement as HTMLIonFabListElement) : undefined;
-    const listStyle = list && getComputedStyle(list);
-    const laidOut = s.display !== 'none' && (!listStyle || listStyle.display !== 'none');
-    const visible =
-      laidOut &&
-      (!list || (list.activated && button.show && listStyle!.visibility === 'visible' && Number(listStyle!.opacity) > 0)) &&
-      s.visibility === 'visible' &&
-      Number(s.opacity) > 0;
-    // Standard scale is centered: even scale(0) retains its actual layout center.
-    // Static list translation is already included in the DOM rect (including RTL).
-    const matrix = new DOMMatrixReadOnly(s.transform);
-    if (!matrix.is2D || matrix.b || matrix.c || matrix.e || matrix.f || matrix.a !== matrix.d || matrix.a < 0) return;
-    // Only Ionic's hidden list child may use scale(0). Custom static scaling
-    // changes the actual glass/hit area and must retain its Web rendering.
-    // Stencil updates show before rendering its host class. Judge the rendered
-    // scale against that class so this normal one-frame gap keeps its cover.
-    if (matrix.a !== 1 && (matrix.a !== 0 || !list || button.classList.contains('fab-button-show'))) return;
-    if (laidOut && !matrix.isIdentity) {
-      const origin = s.transformOrigin.split(' ').map(parseFloat);
-      if (Math.abs(origin[0] - width / 2) > 0.5 || Math.abs(origin[1] - height / 2) > 0.5) return;
-    }
-    // Ionic's list appearance is staggered show changes, without a host CSS
-    // transition. Custom host animations keep their complete Web rendering.
-    if (hasHostMotion(s)) return;
-    if (listStyle) {
-      if (hasHostMotion(listStyle)) return;
-      const transform = new DOMMatrixReadOnly(listStyle.transform);
-      if (!transform.is2D || transform.a !== 1 || transform.d !== 1 || transform.b || transform.c) return;
-    }
-    const rect = button.getBoundingClientRect();
-    const x = laidOut ? rect.x + rect.width / 2 - width / 2 : 0;
-    const y = laidOut ? rect.y + rect.height / 2 - height / 2 : 0;
-    if (visible && (x < -1 || y < -1 || x + width > innerWidth + 1 || y + height > innerHeight + 1)) return;
-    const label = text(button);
-    const item: ShellItem = {
-      id: id(button),
-      x,
-      y,
-      width,
-      height,
-      label,
-      accessibilityLabel: button.getAttribute('aria-label') ?? native.getAttribute('aria-label') ?? label,
-      disabled: button.disabled || s.pointerEvents === 'none',
-      selected: button.activated,
-      visible,
-      fontSize: parseFloat(s.fontSize),
-      fontWeight: parseInt(s.fontWeight, 10) || 400,
-      color: n.color,
-    };
-    const normal = Array.from(button.querySelectorAll('ion-icon, svg'));
-    if (normal.length > 1) return;
-    const close = button.shadowRoot?.querySelector<HTMLElement>('ion-icon[part=close-icon]');
-    for (const [index, icon] of [normal[0], close].entries()) {
-      if (!icon) {
-        if (index === 1 || !label) return;
-        else continue;
-      }
-      const svg = icon.matches('svg') ? (icon as SVGElement) : icon.shadowRoot?.querySelector<SVGElement>('svg');
-      if (!svg) return;
-      const iconStyle = getComputedStyle(icon);
-      const inner = icon.shadowRoot?.querySelector('.icon-inner');
-      if (index === 0 && inner && !new DOMMatrixReadOnly(iconStyle.transform).isIdentity) return;
-      const transform = new DOMMatrixReadOnly(inner ? getComputedStyle(inner).transform : iconStyle.transform);
-      const mirrored =
-        transform.is2D && transform.a === -1 && transform.d === 1 && !transform.b && !transform.c && !transform.e && !transform.f;
-      if (index === 0 && !transform.isIdentity && !mirrored) return;
-      const source = iconSource(svg, index === 0 && mirrored);
-      const iconWidth = parseFloat(iconStyle.width),
-        iconHeight = parseFloat(iconStyle.height);
-      // The internal close-icon fills the button vertically; its glyph uses font-size.
-      const size = index === 1 ? parseFloat(iconStyle.fontSize) : iconWidth;
-      const h = index === 1 ? size : iconHeight;
-      if (!source || !(size > 0 && h > 0)) return;
-      if (index === 0) {
-        item.iconWidth = size;
-        item.iconHeight = h;
-      } else {
-        item.closeIconWidth = size;
-        item.closeIconHeight = h;
-        item.iconTransition =
-          parseFloat(iconStyle.transitionDuration) * (iconStyle.transitionDuration.split(',')[0].trim().endsWith('ms') ? 0.001 : 1);
-      }
-      candidate.icons.push({ item, source, ...(index === 1 ? { field: 'closeIcon' as const } : {}) });
-    }
-    if (!visible && !list) return;
-    candidate.control.items.push(item);
-    if (visible) candidate.actions.set(item.id, button);
-  }
-  return candidate;
-};

package/src/native/components/ion-menu-button.ts

@@ -1,24 +0,0 @@
-import { createCandidate, appendItem } from '../shared/candidate';
-import type { Candidate, Identify } from '../shared/candidate';
-import type { VerticalControlAreaOptions } from '../definitions';
-import { childElements, inFixedToolbar } from '../shared/dom';
-
-export const tag = 'ion-menu-button';
-// The glass and projection ownership belong to ion-buttons, even for one menu button.
-export const selector = '';
-export const shadowSelector = tag;
-
-export const append = (candidate: Candidate, button: HTMLIonMenuButtonElement, id: Identify): boolean => {
-  if (button.type !== 'button') return false;
-  const content = !button.shadowRoot?.querySelector('slot')?.assignedNodes().length ? button.shadowRoot : button;
-  return !!content && !!appendItem(candidate, button, id, content);
-};
-
-export const read = (group: HTMLElement, id: Identify, options: VerticalControlAreaOptions = {}): Candidate | undefined => {
-  const children = group.matches('ion-buttons') ? childElements(group) : [];
-  if (!inFixedToolbar(group) || children.length !== 1) return;
-  const button = children[0];
-  if (!button?.matches(`${tag}${group.closest('ion-app.ios-theme-vertical-bars') ? '' : '.ios'}`)) return;
-  const candidate = createCandidate(group, tag, id, options);
-  return append(candidate, button as HTMLIonMenuButtonElement, id) ? candidate : undefined;
-};

package/src/native/components/ion-segment.ts

@@ -1,27 +0,0 @@
-import { createCandidate, appendItem } from '../shared/candidate';
-import type { Candidate, Identify } from '../shared/candidate';
-import { inFixedToolbar } from '../shared/dom';
-
-export const tag = 'ion-segment';
-export const shadowSelector = 'ion-segment-button';
-export const tracksMotion = true;
-
-export const read = (element: HTMLElement, id: Identify): Candidate | undefined => {
-  const segment = element as HTMLIonSegmentElement;
-  if (
-    !inFixedToolbar(element) ||
-    segment.scrollable ||
-    element.classList.contains('segment-expand') ||
-    element.querySelector('ion-segment-button[content-id]')
-  )
-    return;
-  const children = Array.from(element.querySelectorAll<HTMLIonSegmentButtonElement>(':scope > ion-segment-button'));
-  if (!children.length) return;
-  const candidate = createCandidate(element, tag, id);
-  for (const child of children) {
-    const item = appendItem(candidate, child, id);
-    if (!item || (item.label && item.iconWidth)) return;
-    item.selected = segment.value === child.value;
-  }
-  return candidate;
-};

package/src/native/components/ion-tab-bar.ts

@@ -1,50 +0,0 @@
-import { createCandidate, appendItem } from '../shared/candidate';
-import type { Candidate, Identify } from '../shared/candidate';
-
-export const tag = 'ion-tab-bar';
-export const shadowSelector = 'ion-tab-button';
-export const tracksMotion = true;
-
-export const read = (element: HTMLElement, id: Identify): Candidate | undefined => {
-  if (element.closest('ion-content')) return;
-  const children = Array.from(element.querySelectorAll<HTMLElement>(':scope > ion-tab-button:not(.ion-cloned-element)'));
-  if (!children.length) return;
-  // Only equal items with Ionic's default layout map to UIKit's adaptive tabs.
-  const width = children[0].getBoundingClientRect().width;
-  if (
-    children.some(
-      (child) =>
-        ((child as HTMLIonTabButtonElement).layout ?? 'icon-top') !== 'icon-top' ||
-        Math.abs(child.getBoundingClientRect().width - width) > 1,
-    )
-  )
-    return undefined;
-
-  const candidate = createCandidate(element, tag, id);
-  const style = getComputedStyle(element);
-  const rtl = style.direction === 'rtl';
-  const position = ['start', 'center', 'end'].find((value) => element.classList.contains(`tab-bar-position-${value}`));
-  candidate.control.tabBarAnchor = {
-    x: position === 'center' ? 0.5 : position ? ((position === 'start') !== rtl ? 0 : 1) : style.left !== 'auto' ? 0 : 1,
-    y: element.slot === 'bottom' ? 1 : 0,
-  };
-
-  for (const child of children) {
-    const item = appendItem(candidate, child, id);
-    if (!item) return;
-    const svg = child.querySelector<SVGElement>('svg') ?? child.querySelector('ion-icon')?.shadowRoot?.querySelector<SVGElement>('svg');
-    if (svg) {
-      item.iconPosition = 'top';
-      const color = getComputedStyle(svg).color;
-      const shapes = Array.from(svg.querySelectorAll('path, rect, circle, ellipse, line, polygon, polyline'));
-      // Only text-colored SVGs follow UIKit selection tint; preserve explicit artwork colors.
-      item.iconTemplate =
-        shapes.length > 0 &&
-        shapes.every((shape) => {
-          const paint = getComputedStyle(shape);
-          return [paint.fill, paint.stroke].every((value) => value === 'none' || value === color);
-        });
-    }
-  }
-  return candidate;
-};