@ankhorage/zora 23.2.4 → 23.3.0

package/src/features/registry/authoringMeta.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from 'bun:test';
 
+import { INVERTED_POLARITY_PROP } from '../../constants/authoring';
 import { ZORA_COMPONENT_META, type ZoraComponentPropAuthoring } from '.';
 
 const componentMetaByName = new Map(Object.entries(ZORA_COMPONENT_META));
@@ -43,4 +44,14 @@ describe('ZORA component prop authoring authority', () => {
   test('does not introduce a system authority', () => {
     expect(JSON.stringify(ZORA_COMPONENT_META)).not.toContain('"authority":"system"');
   });
+
+  test('describes inherited surface polarity for every direct manifest component', () => {
+    for (const [name, meta] of componentMetaByName) {
+      if (!meta.directManifestNode) continue;
+      expect(meta.props.inverted, name).toEqual(INVERTED_POLARITY_PROP);
+      expect(meta.bindings?.props?.inverted?.value.type, name).toBe('boolean');
+    }
+    expect(ZORA_COMPONENT_META.AppBar.props.inverted).toEqual(INVERTED_POLARITY_PROP);
+    expect(ZORA_COMPONENT_META.AppHeader.props.inverted).toEqual(INVERTED_POLARITY_PROP);
+  });
 });

package/src/features/registry/bindableComponentMeta.ts

@@ -1,5 +1,6 @@
 import type { UiComponentMetaRegistry } from '@ankhorage/contracts';
 
+import { INVERTED_POLARITY_PROP } from '../../constants/authoring';
 import { imageMeta } from '../image/imageMeta';
 import { readerSurfaceMeta } from '../reader/meta';
 
@@ -22,6 +23,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
       },
     },
     props: {
+      inverted: INVERTED_POLARITY_PROP,
       text: {
         type: 'string',
         category: 'Content',
@@ -47,6 +49,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
       },
     },
     props: {
+      inverted: INVERTED_POLARITY_PROP,
       text: {
         type: 'string',
         category: 'Content',
@@ -97,6 +100,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
       },
     },
     props: {
+      inverted: INVERTED_POLARITY_PROP,
       children: {
         type: 'string',
         category: 'Content',
@@ -111,6 +115,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
   },
   Image: {
     ...imageMeta,
+    props: { ...imageMeta.props, inverted: INVERTED_POLARITY_PROP },
     bindings: {
       props: {
         source: {
@@ -174,6 +179,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
       },
     },
     props: {
+      inverted: INVERTED_POLARITY_PROP,
       value: {
         type: 'string',
         category: 'Content',
@@ -229,6 +235,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
       },
     },
     props: {
+      inverted: INVERTED_POLARITY_PROP,
       value: {
         type: 'string',
         category: 'Content',
@@ -284,6 +291,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
       },
     },
     props: {
+      inverted: INVERTED_POLARITY_PROP,
       checked: {
         type: 'boolean',
         category: 'State',
@@ -339,6 +347,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
       },
     },
     props: {
+      inverted: INVERTED_POLARITY_PROP,
       checked: { type: 'boolean', category: 'State', label: 'Checked' },
       disabled: { type: 'boolean', category: 'State', label: 'Disabled' },
     },
@@ -364,6 +373,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
       },
     },
     props: {
+      inverted: INVERTED_POLARITY_PROP,
       items: {
         type: 'array',
         category: 'Data',
@@ -392,6 +402,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
       },
     },
     props: {
+      inverted: INVERTED_POLARITY_PROP,
       rows: {
         type: 'array',
         category: 'Data',
@@ -401,6 +412,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
   },
   ReaderSurface: {
     ...readerSurfaceMeta,
+    props: { ...readerSurfaceMeta.props, inverted: INVERTED_POLARITY_PROP },
     bindings: {
       props: {
         location: {

package/src/features/registry/componentMeta.ts

@@ -3,6 +3,7 @@ import { accordionItemMeta } from '../accordion/accordionItemMeta';
 import { accordionMeta } from '../accordion/accordionMeta';
 import { activityIndicatorMeta } from '../activity-indicator/activityIndicatorMeta';
 import { appBarMeta } from '../app-bar/appBarMeta';
+import { appHeaderMeta } from '../app-header/appHeaderMeta';
 import { authScreenMeta } from '../auth/authScreenMeta';
 import { forgotPasswordFormMeta } from '../auth/forgotPasswordFormMeta';
 import { oauthProviderButtonMeta } from '../auth/oauthProviderButtonMeta';
@@ -115,6 +116,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   Divider: dividerMeta,
   Surface: surfaceMeta,
   AppBar: appBarMeta,
+  AppHeader: appHeaderMeta,
   Avatar: avatarMeta,
   AvatarGroup: avatarGroupMeta,
   Badge: badgeMeta,

package/src/features/registry/finalizeFeatureMetadata.ts

@@ -1,20 +1,21 @@
-import { FEATURE_MANIFEST_ELEMENTS } from '../../constants/authoring';
-import type { ZoraComponentMetaRegistry } from '../../types/authoring';
+import { INVERTED_POLARITY_PROP } from '../../constants/authoring';
+import type { ZoraComponentMeta, ZoraComponentMetaRegistry } from '../../types/authoring';
 import { createManifestBindings } from './createManifestBindings';
 
 /*** Completes feature bindings while preserving each component's explicit value contracts. */
 export function finalizeFeatureMetadata(
   registry: ZoraComponentMetaRegistry,
 ): ZoraComponentMetaRegistry {
-  const names: ReadonlySet<string> = new Set(Object.values(FEATURE_MANIFEST_ELEMENTS).flat());
   return Object.fromEntries(
-    Object.entries(registry).map(([name, meta]) => {
-      if (!names.has(name)) return [name, meta];
-      const bindings = createManifestBindings(meta.props, meta.events);
+    Object.entries(registry).map(([name, meta]): [string, ZoraComponentMeta] => {
+      if (!meta.directManifestNode) return [name, meta];
+      const props = { ...meta.props, inverted: INVERTED_POLARITY_PROP };
+      const bindings = createManifestBindings(props, meta.events);
       return [
         name,
         {
           ...meta,
+          props,
           bindings: {
             props: { ...bindings.props, ...meta.bindings?.props },
             events: { ...bindings.events, ...meta.bindings?.events },

package/src/features/registry/registry.test.ts

@@ -76,6 +76,7 @@ describe('ZORA_COMPONENT_REGISTRY', () => {
     expect(registry).toEqual({});
     expect(registryEntries).toContain('Screen');
     expect(registryEntries).toContain('View');
+    expect(registryEntries).toContain('AppHeader');
     expect(source).toContain("export type { ZoraComponentRegistry } from './types/registry';");
     expect(source).toContain(
       "export { ZORA_COMPONENT_REGISTRY } from './features/registry/public';",

package/src/features/selection/adapters/inbound/SelectableItem.tsx

@@ -8,6 +8,7 @@ import type {
   SelectableItemState,
   SelectionTrigger,
 } from '../../../../types/selection';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import { resolveSelectionEventIntent } from '../../application/resolveSelectionEventIntent';
 import { useSelection } from './SelectionProvider';
 
@@ -24,7 +25,10 @@ function isRenderProp(
 }
 
 /*** Adds selection behavior to arbitrary child content via render props. */
-export function SelectableItem({
+export const SelectableItem = withZoraThemeScope(SelectableItemInner);
+
+/*** Render a selectable item inside the inherited ZORA theme scope. */
+function SelectableItemInner({
   id,
   trigger,
   disabled = false,

package/src/features/theme/adapters/inbound/ThemeModeToggle.tsx

@@ -2,8 +2,13 @@ import type { ThemeModeToggleProps } from '../../../../types/theme-mode-toggle';
 import { IconButton } from '../../../button/public';
 import { useZoraTheme } from '../../composition/useZoraTheme';
 import { resolveThemeModeToggleState } from '../../utils/resolveThemeModeToggleState';
+import { withZoraThemeScope } from './withZoraThemeScope';
 
-export function ThemeModeToggle({
+/*** Provide a theme mode control with inherited surface polarity. */
+export const ThemeModeToggle = withZoraThemeScope(ThemeModeToggleInner);
+
+/*** Render the control from the active theme mode. */
+function ThemeModeToggleInner({
   disabled,
   interactionPolicy,
   size = 'm',

package/src/features/theme/adapters/inbound/ZoraThemeScope.tsx

@@ -12,20 +12,21 @@ export interface ZoraThemeScopeProps {
   children: React.ReactNode;
   themeId?: ZoraThemeId;
   mode?: ZoraThemeMode;
+  inverted?: boolean;
 }
 
 /*** Applies nested ZORA theme overrides through the public Surface theme scope. */
-export function ZoraThemeScope({ children, themeId, mode }: ZoraThemeScopeProps) {
-  if (mode === undefined && themeId === undefined) return children;
+export function ZoraThemeScope({ children, themeId, mode, inverted }: ZoraThemeScopeProps) {
+  if (mode === undefined && themeId === undefined && inverted === undefined) return children;
   return (
-    <ZoraThemeScopeInner mode={mode} themeId={themeId}>
+    <ZoraThemeScopeInner mode={mode} themeId={themeId} inverted={inverted}>
       {children}
     </ZoraThemeScopeInner>
   );
 }
 
 /*** Resolves and provides the scoped Surface and ZORA theme runtime values. */
-function ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {
+function ZoraThemeScopeInner({ children, themeId, mode, inverted }: ZoraThemeScopeProps) {
   const parentRuntime = useZoraThemeRuntime();
   const scopedThemeId = resolveZoraScopedThemeId({
     desiredThemeId: themeId,
@@ -33,7 +34,13 @@ function ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {
   });
   const scopedRuntimeValue = useMemo(() => ({ themeId: scopedThemeId }), [scopedThemeId]);
   const scopedChildren =
-    mode === undefined ? children : <ThemeScope mode={mode}>{children}</ThemeScope>;
+    mode === undefined && inverted === undefined ? (
+      children
+    ) : (
+      <ThemeScope mode={mode} inverted={inverted}>
+        {children}
+      </ThemeScope>
+    );
 
   return (
     <ZoraThemeRuntimeContext value={scopedRuntimeValue}>{scopedChildren}</ZoraThemeRuntimeContext>

package/src/features/theme/adapters/inbound/withZoraThemeScope.tsx

@@ -3,17 +3,22 @@ import React from 'react';
 import type { ZoraBaseProps } from '../../../../types/base';
 import { ZoraThemeScope } from './ZoraThemeScope';
 
+/*** Applies optional theme and polarity overrides to any ZORA component. */
 export function withZoraThemeScope<P extends ZoraBaseProps>(
   Component: (props: P) => React.ReactElement | null,
 ): (props: P) => React.ReactElement | null {
   const Wrapped = (props: P) => {
-    if (props.mode === undefined && props.themeId === undefined) {
-      return React.createElement(Component, props);
+    const componentProps = { ...props };
+    delete componentProps.themeId;
+    delete componentProps.mode;
+    delete componentProps.inverted;
+    if (props.mode === undefined && props.themeId === undefined && props.inverted === undefined) {
+      return React.createElement(Component, componentProps);
     }
 
     return (
-      <ZoraThemeScope mode={props.mode} themeId={props.themeId}>
-        {React.createElement(Component, props)}
+      <ZoraThemeScope mode={props.mode} themeId={props.themeId} inverted={props.inverted}>
+        {React.createElement(Component, componentProps)}
       </ZoraThemeScope>
     );
   };

package/src/features/theme/themeConfigScope.test.ts

@@ -27,7 +27,7 @@ describe('canonical ThemeConfig scope propagation', () => {
   test('nested scopes delegate Surface config and mode ownership to ThemeScope', () => {
     const scope = readFileSync(join(themeDir, 'adapters', 'inbound', 'ZoraThemeScope.tsx'), 'utf8');
     expect(scope).toContain("import { ThemeScope } from '@ankhorage/surface';");
-    expect(scope).toContain('<ThemeScope mode={mode}>');
+    expect(scope).toContain('<ThemeScope mode={mode} inverted={inverted}>');
     expect(scope).not.toContain('parentSurface');
     expect(scope).not.toContain('sourceConfig');
     expect(scope).not.toContain('createTheme');

package/src/features/theme/themeScopeStructure.test.ts

@@ -178,6 +178,7 @@ describe('theme scope structure', () => {
   it('delegates nested Surface runtime ownership to the public ThemeScope boundary', () => {
     expect(themeScopeSource).toMatch(/import \{ ThemeScope \} from '@ankhorage\/surface'/u);
     expect(themeScopeSource).toMatch(/<ThemeScope\s+mode=/u);
+    expect(themeScopeSource).toMatch(/inverted=\{inverted\}/u);
     expect(themeScopeSource).not.toMatch(/ThemeContext/u);
     expect(themeScopeSource).not.toMatch(/useFontContext/u);
     expect(themeScopeSource).not.toMatch(/createTheme\(/u);
@@ -185,9 +186,13 @@ describe('theme scope structure', () => {
     expect(themeScopeSource).not.toMatch(/<ThemeProvider\b/u);
   });
 
-  it('wraps components only when mode/themeId overrides are present', () => {
+  it('wraps components only when mode/themeId/inverted overrides are present', () => {
     expect(hocSource).toMatch(/props\.mode === undefined/u);
     expect(hocSource).toMatch(/props\.themeId === undefined/u);
+    expect(hocSource).toMatch(/props\.inverted === undefined/u);
+    expect(hocSource).toMatch(/delete componentProps\.themeId/u);
+    expect(hocSource).toMatch(/delete componentProps\.mode/u);
+    expect(hocSource).toMatch(/delete componentProps\.inverted/u);
     expect(hocSource).toMatch(/<ZoraThemeScope/u);
   });
 

package/src/index.ts

@@ -13,6 +13,7 @@ export {
 } from './features/activity-indicator/public';
 export type { AppBarMode, AppBarOverflowMenu, AppBarProps } from './features/app-bar/public';
 export { AppBar } from './features/app-bar/public';
+export { AppHeader, type AppHeaderProps } from './features/app-header/public';
 export type {
   AuthFormBaseProps,
   AuthIdentifierKind,

package/src/invertedThemeAcceptance.test.tsx

@@ -0,0 +1,177 @@
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+import { getContrastRatio, parseHexColorOrThrow } from '@ankhorage/color-theory';
+import type { SurfaceTheme, ThemeMode } from '@ankhorage/surface';
+import { expect, test } from 'bun:test';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import type { AppHeader as AppHeaderComponent } from './features/app-header/public';
+import type { Breadcrumbs as BreadcrumbsComponent } from './features/breadcrumbs/public';
+import type {
+  Button as ButtonComponent,
+  IconButton as IconButtonComponent,
+} from './features/button/public';
+import type { GameField as GameFieldComponent } from './features/game/public';
+import type { View as ViewComponent } from './features/layout/public';
+import type { useZoraTheme as useZoraThemeHook } from './features/theme/composition/useZoraTheme';
+import type { ZoraProvider as ZoraProviderComponent } from './features/theme/runtime';
+import type { Text as TextComponent } from './features/typography/public';
+
+const webDist = join(import.meta.dir, '..', 'web-dist');
+
+test('web materialization exposes the public AppHeader component', async () => {
+  const manifest = (await Bun.file(join(webDist, 'manifest.json')).json()) as {
+    artifacts: readonly { component: string; exportName: string; files: readonly string[] }[];
+  };
+  const appHeader = manifest.artifacts.find((entry) => entry.component === 'app-header');
+  expect(appHeader?.exportName).toBe('AppHeader');
+  expect(appHeader?.files).toContain('components/app-header/index.js');
+  expect(appHeader?.files).toContain('components/app-header/AppHeader.d.ts');
+});
+
+test.each(['light', 'dark'] as const)(
+  '%s mode composes inherited inversion, reset, and AppHeader without changing mode',
+  async (mode) => {
+    const { ZoraProvider, useZoraTheme } = (await import(
+      pathToFileURL(join(webDist, 'runtime/ZoraProvider.js')).href
+    )) as { ZoraProvider: typeof ZoraProviderComponent; useZoraTheme: typeof useZoraThemeHook };
+    const { View } = (await import(
+      pathToFileURL(join(webDist, 'components/view/index.js')).href
+    )) as {
+      View: typeof ViewComponent;
+    };
+    const { Text } = (await import(
+      pathToFileURL(join(webDist, 'components/text/index.js')).href
+    )) as {
+      Text: typeof TextComponent;
+    };
+    const { Breadcrumbs } = (await import(
+      pathToFileURL(join(webDist, 'components/breadcrumbs/index.js')).href
+    )) as { Breadcrumbs: typeof BreadcrumbsComponent };
+    const { Button } = (await import(
+      pathToFileURL(join(webDist, 'components/button/index.js')).href
+    )) as { Button: typeof ButtonComponent };
+    const { IconButton } = (await import(
+      pathToFileURL(join(webDist, 'components/icon-button/index.js')).href
+    )) as { IconButton: typeof IconButtonComponent };
+    const { GameField } = (await import(
+      pathToFileURL(join(webDist, 'components/game-field/index.js')).href
+    )) as { GameField: typeof GameFieldComponent };
+    const { AppHeader } = (await import(
+      pathToFileURL(join(webDist, 'components/app-header/index.js')).href
+    )) as { AppHeader: typeof AppHeaderComponent };
+    const observed = new Map<
+      string,
+      { mode: ThemeMode; inverted: boolean | undefined; theme: SurfaceTheme }
+    >();
+
+    function Probe({ id }: { id: string }) {
+      const { mode: activeMode, inverted, theme } = useZoraTheme();
+      observed.set(id, { mode: activeMode, inverted, theme });
+      return <span data-probe={id} />;
+    }
+
+    const markup = renderToStaticMarkup(
+      <ZoraProvider initialMode={mode}>
+        <Probe id="root" />
+        <View inverted>
+          <Probe id="outer" />
+          <Text>Inherited text</Text>
+          <Breadcrumbs items={[{ id: 'home', label: 'Home', icon: { name: 'home-outline' } }]} />
+          <IconButton iconName="add-outline" label="Add" variant="ghost" />
+          <Button color="primary" variant="solid">
+            Save
+          </Button>
+          <GameField inverted={false}>
+            <Probe id="gameReset" />
+          </GameField>
+          <View inverted={false}>
+            <Probe id="reset" />
+            <Text>Reset text</Text>
+            <IconButton iconName="close-outline" label="Reset action" variant="ghost" />
+            <View inverted>
+              <Probe id="reinverted" />
+            </View>
+          </View>
+        </View>
+        <AppHeader
+          inverted
+          title="Workspace"
+          actions={
+            <>
+              <IconButton iconName="add-outline" label="Header action" variant="ghost" />
+              <Button color="primary" variant="solid">
+                Header save
+              </Button>
+            </>
+          }
+        >
+          <Probe id="header" />
+          <Breadcrumbs
+            items={[{ id: 'header-home', label: 'Header home', icon: { name: 'home-outline' } }]}
+          />
+          <IconButton
+            inverted={false}
+            iconName="close-outline"
+            label="Header reset"
+            variant="ghost"
+          />
+        </AppHeader>
+        <AppHeader>
+          <Probe id="normalHeader" />
+        </AppHeader>
+        <AppHeader title="Workspace title" />
+      </ZoraProvider>,
+    );
+
+    expect([...observed.keys()].sort()).toEqual([
+      'gameReset',
+      'header',
+      'normalHeader',
+      'outer',
+      'reinverted',
+      'reset',
+      'root',
+    ]);
+    expect([...observed.values()].every((entry) => entry.mode === mode)).toBe(true);
+    expect(observed.get('root')?.inverted).toBe(false);
+    expect(observed.get('outer')?.inverted).toBe(true);
+    expect(observed.get('reset')?.inverted).toBe(false);
+    expect(observed.get('gameReset')?.inverted).toBe(false);
+    expect(observed.get('reinverted')?.inverted).toBe(true);
+    expect(observed.get('header')?.inverted).toBe(true);
+    expect(observed.get('normalHeader')?.inverted).toBe(false);
+    expect(observed.get('outer')?.theme.semantics.surface.default).toBe(
+      observed.get('header')?.theme.semantics.surface.default,
+    );
+    expect(observed.get('reset')?.theme.semantics.surface.default).toBe(
+      observed.get('root')?.theme.semantics.surface.default,
+    );
+    expect(observed.get('outer')?.theme.semantics.surface.default).not.toBe(
+      observed.get('root')?.theme.semantics.surface.default,
+    );
+    const theme = observed.get('outer')?.theme;
+    expect(theme).toBeDefined();
+    if (theme === undefined) return;
+    expect(
+      getContrastRatio(
+        parseHexColorOrThrow(theme.semantics.content.muted),
+        parseHexColorOrThrow(theme.semantics.surface.default),
+      ),
+    ).toBeGreaterThanOrEqual(4.5);
+    expect(theme.semantics.action.primary.onSolidText).toBe(
+      observed.get('root')?.theme.semantics.action.primary.onSolidText,
+    );
+    expect(markup).toContain('Inherited text');
+    expect(markup).toContain('Reset text');
+    expect(markup).toContain('Home');
+    expect(markup).toContain('Save');
+    expect(markup).toContain('Workspace title');
+    expect(markup).toContain('Header home');
+    expect(markup).toContain('Header save');
+    expect(markup).toContain('data-probe="header"');
+    expect(markup).not.toContain('inverted=');
+  },
+);

package/src/types/app-header.ts

@@ -0,0 +1,3 @@
+import type { AppBarProps } from './app-bar';
+
+export type AppHeaderProps = AppBarProps;

package/src/types/base.ts

@@ -18,6 +18,9 @@ export interface ZoraBaseProps {
    */
   mode?: ZoraThemeMode;
 
+  /** Inherits the nearest surface polarity unless explicitly inverted or reset to normal. */
+  inverted?: boolean;
+
   testID?: string;
 
   /**

package/src/types/gamePresentation.ts

@@ -1,7 +1,8 @@
 import type { GameDefinition, GameInput, GameOutput } from '@ankhorage/game';
-import type { InteractionPolicyProps } from '@ankhorage/surface';
 import type React from 'react';
 
+import type { ZoraBaseProps } from './base';
+
 type GameOverlayCornerPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
 export type GamePointerEvents = 'auto' | 'box-none' | 'box-only' | 'none';
@@ -26,7 +27,7 @@ export interface GameEntityMotionProps {
 export type GameOverlayPlacement =
   'fill' | 'center' | 'top' | 'bottom' | GameOverlayCornerPlacement;
 
-export interface GameFieldProps extends InteractionPolicyProps {
+export interface GameFieldProps extends ZoraBaseProps {
   readonly children?: React.ReactNode;
   readonly aspectRatio?: number;
   readonly minHeight?: number;
@@ -36,7 +37,7 @@ export interface GameFieldProps extends InteractionPolicyProps {
   readonly testID?: string;
 }
 
-export interface GameEntityProps extends GameEntityMotionProps, InteractionPolicyProps {
+export interface GameEntityProps extends GameEntityMotionProps, ZoraBaseProps {
   readonly children?: React.ReactNode;
   readonly x?: number;
   readonly y?: number;
@@ -60,7 +61,7 @@ export interface GameKeyboardBinding {
   readonly preventDefault?: boolean;
 }
 
-export interface GameInputZoneProps extends InteractionPolicyProps {
+export interface GameInputZoneProps extends ZoraBaseProps {
   readonly eventType: string;
   readonly entityId?: string;
   readonly x?: number;
@@ -75,7 +76,7 @@ export interface GameInputZoneProps extends InteractionPolicyProps {
   readonly testID?: string;
 }
 
-export interface GameMeasurementProbeProps extends InteractionPolicyProps {
+export interface GameMeasurementProbeProps extends ZoraBaseProps {
   readonly sourceId: string;
   readonly targetId: string;
   readonly eventType?: string;
@@ -84,7 +85,7 @@ export interface GameMeasurementProbeProps extends InteractionPolicyProps {
   readonly enabled?: boolean;
 }
 
-export interface GameOverlayProps extends InteractionPolicyProps {
+export interface GameOverlayProps extends ZoraBaseProps {
   readonly children?: React.ReactNode;
   readonly placement?: GameOverlayPlacement;
   readonly blocking?: boolean;

package/src/types/selection.ts

@@ -2,6 +2,8 @@ import type { InteractionPolicy } from '@ankhorage/surface';
 import type { SelectionIntent } from '@ankhorage/utility/selection';
 import type React from 'react';
 
+import type { ZoraBaseProps } from './base';
+
 export type SelectionMode = 'single' | 'multi';
 
 export type SelectionTrigger = 'press' | 'longPress' | 'manual';
@@ -40,7 +42,7 @@ export interface SelectableItemState {
   clear: () => void;
 }
 
-export interface SelectableItemProps {
+export interface SelectableItemProps extends ZoraBaseProps {
   id: string;
   trigger?: SelectionTrigger;
   disabled?: boolean;

package/src/types/theme-mode-toggle.ts

@@ -1,6 +1,5 @@
+import type { ZoraBaseProps } from './base';
 import type { IconButtonProps } from './icon-button';
 
-export type ThemeModeToggleProps = Pick<
-  IconButtonProps,
-  'disabled' | 'interactionPolicy' | 'size' | 'testID'
->;
+export type ThemeModeToggleProps = ZoraBaseProps &
+  Pick<IconButtonProps, 'disabled' | 'interactionPolicy' | 'size' | 'testID'>;

package/web-dist/chunks/{Accordion-5pskbqss.js → Accordion-0047zyx7.js}

@@ -1,16 +1,16 @@
 'use client';
 import {
   Field3
-} from "./Accordion-qb8ppq9t.js";
+} from "./Accordion-q9zge7kd.js";
 import {
   withZoraThemeScope
-} from "./Accordion-13y3zx87.js";
+} from "./Accordion-8z7naxj2.js";
 import {
   View2
-} from "./Accordion-01e56hb5.js";
+} from "./Accordion-0yvepteg.js";
 import {
   Text3
-} from "./Accordion-46vwm9xv.js";
+} from "./Accordion-e2kr1z3g.js";
 
 // src/features/form/field/adapters/inbound/Field.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/web-dist/chunks/{Accordion-99cj85ez.js → Accordion-0gfsj9qh.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   resolveOverlayZIndex
-} from "./Accordion-2d8xn32m.js";
+} from "./Accordion-n7y08rz5.js";
 
 // node_modules/@ankhorage/surface/src/internal/overlay/Portal.tsx
 import React2 from "react";