@ankhorage/surface 9.0.10 → 9.0.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ankhorage/surface
 
+## 9.0.12
+
+### Patch Changes
+
+- 3dad165: Forward canonical View layout props through Tabs and TabPanel so bounded tab content can host a scrolling child.
+
+## 9.0.11
+
+### Patch Changes
+
+- 7a6cd3f: Update Ankhorage dependencies: `@ankhorage/contracts`.
+
 ## 9.0.10
 
 ### Patch Changes

package/README.md

@@ -3,7 +3,7 @@
 
 # @ankhorage/surface
 
-![license: MIT](././paradox/badges/license.svg) ![npm: v9.0.10](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)
+![license: MIT](././paradox/badges/license.svg) ![npm: v9.0.12](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)
 
 Cross-platform UI foundation for React Native and React Native Web. Provides theming, layout primitives, and core building blocks for modern apps.
 

package/dist/features/layout/adapters/inbound/View.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { ViewProps } from '../../../../types/layout';
 /*** Renders the token-aware responsive Surface adapter for React Native View. */
-export declare function View({ accessible, accessibilityLabel, accessibilityRole, accessibilityState, children, pointerEvents, style, testID, ...props }: ViewProps): React.JSX.Element;
+export declare function View({ accessible, accessibilityLabel, accessibilityLabelledBy, accessibilityRole, accessibilityState, children, nativeID, pointerEvents, style, testID, ...props }: ViewProps): React.JSX.Element;
 //# sourceMappingURL=View.d.ts.map

package/dist/features/layout/adapters/inbound/View.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/View.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAI1D,iFAAiF;AACjF,wBAAgB,IAAI,CAAC,EACnB,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBAmBX"}
+{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/View.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAI1D,iFAAiF;AACjF,wBAAgB,IAAI,CAAC,EACnB,UAAU,EACV,kBAAkB,EAClB,uBAAuB,EACvB,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBAqBX"}

package/dist/features/layout/adapters/inbound/View.js

@@ -5,12 +5,12 @@ import { resolvePointerEvents } from '../../../../internal/resolvePointerEvents'
 import { resolveViewStyles } from '../../../../utils/resolveViewStyles';
 import { useTheme } from '../../../theme/runtime';
 /*** Renders the token-aware responsive Surface adapter for React Native View. */
-export function View({ accessible, accessibilityLabel, accessibilityRole, accessibilityState, children, pointerEvents, style, testID, ...props }) {
+export function View({ accessible, accessibilityLabel, accessibilityLabelledBy, accessibilityRole, accessibilityState, children, nativeID, pointerEvents, style, testID, ...props }) {
     const { theme } = useTheme();
     const { breakpoint } = useResponsiveRuntime();
     const resolved = resolveViewStyles(theme, breakpoint, props);
     const resolvedPointerEvents = pointerEvents ? resolvePointerEvents(pointerEvents) : null;
-    return (<ReactNativeView {...resolvedPointerEvents?.props} accessible={accessible} accessibilityLabel={accessibilityLabel} accessibilityRole={accessibilityRole} accessibilityState={accessibilityState} testID={testID} style={[resolved, resolvedPointerEvents?.style, style]}>
+    return (<ReactNativeView {...resolvedPointerEvents?.props} accessible={accessible} accessibilityLabel={accessibilityLabel} accessibilityLabelledBy={accessibilityLabelledBy} accessibilityRole={accessibilityRole} accessibilityState={accessibilityState} nativeID={nativeID} testID={testID} style={[resolved, resolvedPointerEvents?.style, style]}>
       {children}
     </ReactNativeView>);
 }

package/dist/features/layout/adapters/inbound/View.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/View.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAEjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,iFAAiF;AACjF,MAAM,UAAU,IAAI,CAAC,EACnB,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACE;IACV,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;IAC7D,MAAM,qBAAqB,GAAG,aAAa,CAAC,CAAC,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEzF,OAAO,CACL,CAAC,eAAe,CACd,IAAI,qBAAqB,EAAE,KAAK,CAAC,CACjC,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,qBAAqB,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAEvD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { View as ReactNativeView } from 'react-native';\n\nimport { useResponsiveRuntime } from '../../../../core/responsive';\nimport { resolvePointerEvents } from '../../../../internal/resolvePointerEvents';\nimport type { ViewProps } from '../../../../types/layout';\nimport { resolveViewStyles } from '../../../../utils/resolveViewStyles';\nimport { useTheme } from '../../../theme/runtime';\n\n/*** Renders the token-aware responsive Surface adapter for React Native View. */\nexport function View({\n  accessible,\n  accessibilityLabel,\n  accessibilityRole,\n  accessibilityState,\n  children,\n  pointerEvents,\n  style,\n  testID,\n  ...props\n}: ViewProps) {\n  const { theme } = useTheme();\n  const { breakpoint } = useResponsiveRuntime();\n  const resolved = resolveViewStyles(theme, breakpoint, props);\n  const resolvedPointerEvents = pointerEvents ? resolvePointerEvents(pointerEvents) : null;\n\n  return (\n    <ReactNativeView\n      {...resolvedPointerEvents?.props}\n      accessible={accessible}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={accessibilityState}\n      testID={testID}\n      style={[resolved, resolvedPointerEvents?.style, style]}\n    >\n      {children}\n    </ReactNativeView>\n  );\n}\n"]}
+{"version":3,"file":"View.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/View.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAEjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,iFAAiF;AACjF,MAAM,UAAU,IAAI,CAAC,EACnB,UAAU,EACV,kBAAkB,EAClB,uBAAuB,EACvB,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACE;IACV,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;IAC7D,MAAM,qBAAqB,GAAG,aAAa,CAAC,CAAC,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEzF,OAAO,CACL,CAAC,eAAe,CACd,IAAI,qBAAqB,EAAE,KAAK,CAAC,CACjC,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,uBAAuB,CAAC,CAAC,uBAAuB,CAAC,CACjD,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,qBAAqB,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAEvD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { View as ReactNativeView } from 'react-native';\n\nimport { useResponsiveRuntime } from '../../../../core/responsive';\nimport { resolvePointerEvents } from '../../../../internal/resolvePointerEvents';\nimport type { ViewProps } from '../../../../types/layout';\nimport { resolveViewStyles } from '../../../../utils/resolveViewStyles';\nimport { useTheme } from '../../../theme/runtime';\n\n/*** Renders the token-aware responsive Surface adapter for React Native View. */\nexport function View({\n  accessible,\n  accessibilityLabel,\n  accessibilityLabelledBy,\n  accessibilityRole,\n  accessibilityState,\n  children,\n  nativeID,\n  pointerEvents,\n  style,\n  testID,\n  ...props\n}: ViewProps) {\n  const { theme } = useTheme();\n  const { breakpoint } = useResponsiveRuntime();\n  const resolved = resolveViewStyles(theme, breakpoint, props);\n  const resolvedPointerEvents = pointerEvents ? resolvePointerEvents(pointerEvents) : null;\n\n  return (\n    <ReactNativeView\n      {...resolvedPointerEvents?.props}\n      accessible={accessible}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityLabelledBy={accessibilityLabelledBy}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={accessibilityState}\n      nativeID={nativeID}\n      testID={testID}\n      style={[resolved, resolvedPointerEvents?.style, style]}\n    >\n      {children}\n    </ReactNativeView>\n  );\n}\n"]}

package/dist/features/tabs/adapters/inbound/TabPanel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { TabPanelProps } from '../../../../types/tabs';
-/*** Renders the content panel associated with the active tab value. */
-export declare function TabPanel({ value, children, testID }: TabPanelProps): React.JSX.Element | null;
+/*** Renders the active content panel with the supplied View layout and tab accessibility linkage. */
+export declare function TabPanel({ value, children, testID, ...layoutProps }: TabPanelProps): React.JSX.Element | null;
 //# sourceMappingURL=TabPanel.d.ts.map

package/dist/features/tabs/adapters/inbound/TabPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAK5D,uEAAuE;AACvE,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,aAAa,4BAelE"}
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAM5D,qGAAqG;AACrG,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,EAAE,aAAa,4BAgBlF"}

package/dist/features/tabs/adapters/inbound/TabPanel.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View } from '../../../layout/public';
 import { useTabsContext } from '../../composition/useTabsContext';
 const TAB_PANEL_ROLE = 'tabpanel';
-/*** Renders the content panel associated with the active tab value. */
-export function TabPanel({ value, children, testID }) {
+/*** Renders the active content panel with the supplied View layout and tab accessibility linkage. */
+export function TabPanel({ value, children, testID, ...layoutProps }) {
     const { activeValue, getPanelId, getTabId } = useTabsContext();
     if (activeValue !== value)
         return null;
-    return (<View accessibilityLabelledBy={getTabId(value)} accessibilityRole={TAB_PANEL_ROLE} nativeID={getPanelId(value)} testID={testID}>
+    return (<View {...layoutProps} accessibilityLabelledBy={getTabId(value)} accessibilityRole={TAB_PANEL_ROLE} nativeID={getPanelId(value)} testID={testID}>
       {children}
     </View>);
 }

package/dist/features/tabs/adapters/inbound/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,MAAM,cAAc,GAAG,UAAoE,CAAC;AAE5F,uEAAuE;AACvE,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAiB;IACjE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAE/D,IAAI,WAAW,KAAK,KAAK;QAAE,OAAO,IAAI,CAAC;IAEvC,OAAO,CACL,CAAC,IAAI,CACH,uBAAuB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CACzC,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAClC,QAAQ,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAC5B,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport type { TabPanelProps } from '../../../../types/tabs';\nimport { useTabsContext } from '../../composition/useTabsContext';\n\nconst TAB_PANEL_ROLE = 'tabpanel' as React.ComponentProps<typeof View>['accessibilityRole'];\n\n/*** Renders the content panel associated with the active tab value. */\nexport function TabPanel({ value, children, testID }: TabPanelProps) {\n  const { activeValue, getPanelId, getTabId } = useTabsContext();\n\n  if (activeValue !== value) return null;\n\n  return (\n    <View\n      accessibilityLabelledBy={getTabId(value)}\n      accessibilityRole={TAB_PANEL_ROLE}\n      nativeID={getPanelId(value)}\n      testID={testID}\n    >\n      {children}\n    </View>\n  );\n}\n"]}
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,MAAM,cAAc,GAAG,UAAoE,CAAC;AAE5F,qGAAqG;AACrG,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,EAAiB;IACjF,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAE/D,IAAI,WAAW,KAAK,KAAK;QAAE,OAAO,IAAI,CAAC;IAEvC,OAAO,CACL,CAAC,IAAI,CACH,IAAI,WAAW,CAAC,CAChB,uBAAuB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CACzC,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAClC,QAAQ,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAC5B,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport type { TabPanelProps } from '../../../../types/tabs';\nimport { View } from '../../../layout/public';\nimport { useTabsContext } from '../../composition/useTabsContext';\n\nconst TAB_PANEL_ROLE = 'tabpanel' as React.ComponentProps<typeof View>['accessibilityRole'];\n\n/*** Renders the active content panel with the supplied View layout and tab accessibility linkage. */\nexport function TabPanel({ value, children, testID, ...layoutProps }: TabPanelProps) {\n  const { activeValue, getPanelId, getTabId } = useTabsContext();\n\n  if (activeValue !== value) return null;\n\n  return (\n    <View\n      {...layoutProps}\n      accessibilityLabelledBy={getTabId(value)}\n      accessibilityRole={TAB_PANEL_ROLE}\n      nativeID={getPanelId(value)}\n      testID={testID}\n    >\n      {children}\n    </View>\n  );\n}\n"]}

package/dist/features/tabs/adapters/inbound/Tabs.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { TabsProps } from '../../../../types/tabs';
-/*** Provides accessible tab selection state to TabList, Tab, and TabPanel children. */
-export declare function Tabs({ children, ...props }: TabsProps): React.JSX.Element;
+/*** Provides accessible tab selection and forwards View layout to the tab container. */
+export declare function Tabs({ children, defaultValue, onValueChange, testID, value, ...layoutProps }: TabsProps): React.JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

package/dist/features/tabs/adapters/inbound/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAKxD,uFAAuF;AACvF,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAQrD"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAKxD,wFAAwF;AACxF,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,EACL,GAAG,WAAW,EACf,EAAE,SAAS,qBAUX"}

package/dist/features/tabs/adapters/inbound/Tabs.js

@@ -2,11 +2,13 @@ import React from 'react';
 import { View } from '../../../layout/public';
 import { TabsContext } from '../../composition/TabsContext';
 import { useTabsController } from '../../composition/useTabsController';
-/*** Provides accessible tab selection state to TabList, Tab, and TabPanel children. */
-export function Tabs({ children, ...props }) {
-    const contextValue = useTabsController(props);
+/*** Provides accessible tab selection and forwards View layout to the tab container. */
+export function Tabs({ children, defaultValue, onValueChange, testID, value, ...layoutProps }) {
+    const contextValue = useTabsController({ defaultValue, onValueChange, testID, value });
     return (<TabsContext value={contextValue}>
-      <View testID={props.testID}>{children}</View>
+      <View {...layoutProps} testID={testID}>
+        {children}
+      </View>
     </TabsContext>);
 }
 //# sourceMappingURL=Tabs.js.map

package/dist/features/tabs/adapters/inbound/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE,uFAAuF;AACvF,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa;IACpD,MAAM,YAAY,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAC/B;MAAA,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAC9C;IAAA,EAAE,WAAW,CAAC,CACf,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport type { TabsProps } from '../../../../types/tabs';\nimport { View } from '../../../layout/public';\nimport { TabsContext } from '../../composition/TabsContext';\nimport { useTabsController } from '../../composition/useTabsController';\n\n/*** Provides accessible tab selection state to TabList, Tab, and TabPanel children. */\nexport function Tabs({ children, ...props }: TabsProps) {\n  const contextValue = useTabsController(props);\n\n  return (\n    <TabsContext value={contextValue}>\n      <View testID={props.testID}>{children}</View>\n    </TabsContext>\n  );\n}\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE,wFAAwF;AACxF,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,EACL,GAAG,WAAW,EACJ;IACV,MAAM,YAAY,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAEvF,OAAO,CACL,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAC/B;MAAA,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CACpC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,WAAW,CAAC,CACf,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport type { TabsProps } from '../../../../types/tabs';\nimport { View } from '../../../layout/public';\nimport { TabsContext } from '../../composition/TabsContext';\nimport { useTabsController } from '../../composition/useTabsController';\n\n/*** Provides accessible tab selection and forwards View layout to the tab container. */\nexport function Tabs({\n  children,\n  defaultValue,\n  onValueChange,\n  testID,\n  value,\n  ...layoutProps\n}: TabsProps) {\n  const contextValue = useTabsController({ defaultValue, onValueChange, testID, value });\n\n  return (\n    <TabsContext value={contextValue}>\n      <View {...layoutProps} testID={testID}>\n        {children}\n      </View>\n    </TabsContext>\n  );\n}\n"]}

package/dist/types/layout.d.ts

@@ -57,10 +57,12 @@ export interface ViewStyleProps {
 }
 export interface ViewProps extends ViewStyleProps {
     accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];
+    accessibilityLabelledBy?: ReactNativeViewProps['accessibilityLabelledBy'];
     accessibilityRole?: ReactNativeViewProps['accessibilityRole'];
     accessibilityState?: ReactNativeViewProps['accessibilityState'];
     accessible?: ReactNativeViewProps['accessible'];
     children?: React.ReactNode;
+    nativeID?: ReactNativeViewProps['nativeID'];
     pointerEvents?: ReactNativeViewProps['pointerEvents'];
     testID?: string;
 }

package/dist/types/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"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"}

package/dist/types/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type {\n  ScrollViewProps as ReactNativeScrollViewProps,\n  StyleProp,\n  ViewProps as ReactNativeViewProps,\n  ViewStyle,\n} from 'react-native';\n\nimport type { Responsive } from '../core/responsive';\nimport type { SurfaceTheme } from './theme';\n\ntype SpaceToken = keyof SurfaceTheme['spacing'];\ntype RadiusToken = keyof SurfaceTheme['radii'];\ntype ColorToken = keyof SurfaceTheme['colors'];\ntype RadiusValue = number | RadiusToken;\n\nexport type SpaceValue = number | SpaceToken;\nexport type ColorValue = string | ColorToken;\n\nexport interface ViewStyleProps {\n  p?: Responsive<SpaceValue>;\n  px?: Responsive<SpaceValue>;\n  py?: Responsive<SpaceValue>;\n  pt?: Responsive<SpaceValue>;\n  pb?: Responsive<SpaceValue>;\n  pl?: Responsive<SpaceValue>;\n  pr?: Responsive<SpaceValue>;\n  m?: Responsive<SpaceValue>;\n  mx?: Responsive<SpaceValue>;\n  my?: Responsive<SpaceValue>;\n  mt?: Responsive<SpaceValue>;\n  mb?: Responsive<SpaceValue>;\n  ml?: Responsive<SpaceValue>;\n  mr?: Responsive<SpaceValue>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  columnGap?: Responsive<SpaceValue>;\n  bg?: Responsive<ColorValue>;\n  radius?: Responsive<RadiusValue>;\n  borderWidth?: Responsive<number>;\n  borderColor?: Responsive<ColorValue>;\n  width?: Responsive<number | string>;\n  height?: Responsive<number | string>;\n  minWidth?: Responsive<number | string>;\n  maxWidth?: Responsive<number | string>;\n  minHeight?: Responsive<number | string>;\n  maxHeight?: Responsive<number | string>;\n  flex?: Responsive<number>;\n  flexGrow?: Responsive<number>;\n  flexShrink?: Responsive<number>;\n  flexBasis?: Responsive<number | string>;\n  direction?: Responsive<'row' | 'column'>;\n  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n  justify?: Responsive<\n    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'\n  >;\n  wrap?: Responsive<'nowrap' | 'wrap'>;\n  alignSelf?: Responsive<ViewStyle['alignSelf']>;\n  position?: Responsive<ViewStyle['position']>;\n  top?: Responsive<number>;\n  bottom?: Responsive<number>;\n  left?: Responsive<number>;\n  right?: Responsive<number>;\n  overflow?: Responsive<ViewStyle['overflow']>;\n  zIndex?: Responsive<number>;\n  opacity?: Responsive<number>;\n  style?: StyleProp<ViewStyle>;\n}\n\nexport interface ViewProps extends ViewStyleProps {\n  accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];\n  accessibilityRole?: ReactNativeViewProps['accessibilityRole'];\n  accessibilityState?: ReactNativeViewProps['accessibilityState'];\n  accessible?: ReactNativeViewProps['accessible'];\n  children?: React.ReactNode;\n  pointerEvents?: ReactNativeViewProps['pointerEvents'];\n  testID?: string;\n}\n\nexport interface DividerProps extends Omit<ViewProps, 'bg' | 'height' | 'width'> {\n  orientation?: 'horizontal' | 'vertical';\n  color?: ColorValue;\n  thickness?: number;\n}\n\nexport interface GridProps extends Omit<ViewProps, 'children'> {\n  children?: React.ReactNode;\n  cols?: Responsive<number>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  colGap?: Responsive<SpaceValue>;\n  minItemWidth?: Responsive<number>;\n}\n\nexport interface ScrollViewProps\n  extends\n    ViewStyleProps,\n    Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {\n  children?: React.ReactNode;\n  contentContainerStyle?: StyleProp<ViewStyle>;\n}\n"]}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type {\n  ScrollViewProps as ReactNativeScrollViewProps,\n  StyleProp,\n  ViewProps as ReactNativeViewProps,\n  ViewStyle,\n} from 'react-native';\n\nimport type { Responsive } from '../core/responsive';\nimport type { SurfaceTheme } from './theme';\n\ntype SpaceToken = keyof SurfaceTheme['spacing'];\ntype RadiusToken = keyof SurfaceTheme['radii'];\ntype ColorToken = keyof SurfaceTheme['colors'];\ntype RadiusValue = number | RadiusToken;\n\nexport type SpaceValue = number | SpaceToken;\nexport type ColorValue = string | ColorToken;\n\nexport interface ViewStyleProps {\n  p?: Responsive<SpaceValue>;\n  px?: Responsive<SpaceValue>;\n  py?: Responsive<SpaceValue>;\n  pt?: Responsive<SpaceValue>;\n  pb?: Responsive<SpaceValue>;\n  pl?: Responsive<SpaceValue>;\n  pr?: Responsive<SpaceValue>;\n  m?: Responsive<SpaceValue>;\n  mx?: Responsive<SpaceValue>;\n  my?: Responsive<SpaceValue>;\n  mt?: Responsive<SpaceValue>;\n  mb?: Responsive<SpaceValue>;\n  ml?: Responsive<SpaceValue>;\n  mr?: Responsive<SpaceValue>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  columnGap?: Responsive<SpaceValue>;\n  bg?: Responsive<ColorValue>;\n  radius?: Responsive<RadiusValue>;\n  borderWidth?: Responsive<number>;\n  borderColor?: Responsive<ColorValue>;\n  width?: Responsive<number | string>;\n  height?: Responsive<number | string>;\n  minWidth?: Responsive<number | string>;\n  maxWidth?: Responsive<number | string>;\n  minHeight?: Responsive<number | string>;\n  maxHeight?: Responsive<number | string>;\n  flex?: Responsive<number>;\n  flexGrow?: Responsive<number>;\n  flexShrink?: Responsive<number>;\n  flexBasis?: Responsive<number | string>;\n  direction?: Responsive<'row' | 'column'>;\n  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n  justify?: Responsive<\n    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'\n  >;\n  wrap?: Responsive<'nowrap' | 'wrap'>;\n  alignSelf?: Responsive<ViewStyle['alignSelf']>;\n  position?: Responsive<ViewStyle['position']>;\n  top?: Responsive<number>;\n  bottom?: Responsive<number>;\n  left?: Responsive<number>;\n  right?: Responsive<number>;\n  overflow?: Responsive<ViewStyle['overflow']>;\n  zIndex?: Responsive<number>;\n  opacity?: Responsive<number>;\n  style?: StyleProp<ViewStyle>;\n}\n\nexport interface ViewProps extends ViewStyleProps {\n  accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];\n  accessibilityLabelledBy?: ReactNativeViewProps['accessibilityLabelledBy'];\n  accessibilityRole?: ReactNativeViewProps['accessibilityRole'];\n  accessibilityState?: ReactNativeViewProps['accessibilityState'];\n  accessible?: ReactNativeViewProps['accessible'];\n  children?: React.ReactNode;\n  nativeID?: ReactNativeViewProps['nativeID'];\n  pointerEvents?: ReactNativeViewProps['pointerEvents'];\n  testID?: string;\n}\n\nexport interface DividerProps extends Omit<ViewProps, 'bg' | 'height' | 'width'> {\n  orientation?: 'horizontal' | 'vertical';\n  color?: ColorValue;\n  thickness?: number;\n}\n\nexport interface GridProps extends Omit<ViewProps, 'children'> {\n  children?: React.ReactNode;\n  cols?: Responsive<number>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  colGap?: Responsive<SpaceValue>;\n  minItemWidth?: Responsive<number>;\n}\n\nexport interface ScrollViewProps\n  extends\n    ViewStyleProps,\n    Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {\n  children?: React.ReactNode;\n  contentContainerStyle?: StyleProp<ViewStyle>;\n}\n"]}

package/dist/types/tabs.d.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 import type { InteractionPolicy } from './interactionPolicy';
-export interface TabsProps {
+import type { ViewStyleProps } from './layout';
+export interface TabsProps extends ViewStyleProps {
     children?: React.ReactNode;
     value?: string;
     defaultValue?: string;
@@ -18,7 +19,7 @@ export interface TabProps {
     interactionPolicy?: InteractionPolicy;
     testID?: string;
 }
-export interface TabPanelProps {
+export interface TabPanelProps extends ViewStyleProps {
     value: string;
     children?: React.ReactNode;
     testID?: string;

package/dist/types/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/types/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,WAAW,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,IAAI,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,MAAM,gBAAgB,GAC1B,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,KAAK,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/types/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,WAAW,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,IAAI,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,MAAM,gBAAgB,GAC1B,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,KAAK,CAAC"}

package/dist/types/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/types/tabs.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { InteractionPolicy } from './interactionPolicy';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: ((value: string) => void) | undefined;\n  testID?: string;\n}\n\nexport interface TabListProps {\n  children?: React.ReactNode;\n  testID?: string;\n}\n\nexport interface TabProps {\n  value: string;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  interactionPolicy?: InteractionPolicy;\n  testID?: string;\n}\n\nexport interface TabPanelProps {\n  value: string;\n  children?: React.ReactNode;\n  testID?: string;\n}\n\nexport interface TabRegistration {\n  disabled: boolean;\n  focus: () => void;\n  value: string;\n}\n\nexport interface TabsContextValue {\n  activeValue: string | undefined;\n  focusedValue: string | undefined;\n  getPanelId: (value: string) => string;\n  getTabId: (value: string) => string;\n  registerTab: (tab: TabRegistration) => void;\n  setActiveValue: (value: string) => void;\n  setFocusedValue: (value: string | undefined) => void;\n  tabs: readonly TabRegistration[];\n  unregisterTab: (value: string) => void;\n}\n\nexport type TabNavigationKey =\n  'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End';\n"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/types/tabs.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { InteractionPolicy } from './interactionPolicy';\nimport type { ViewStyleProps } from './layout';\n\nexport interface TabsProps extends ViewStyleProps {\n  children?: React.ReactNode;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: ((value: string) => void) | undefined;\n  testID?: string;\n}\n\nexport interface TabListProps {\n  children?: React.ReactNode;\n  testID?: string;\n}\n\nexport interface TabProps {\n  value: string;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  interactionPolicy?: InteractionPolicy;\n  testID?: string;\n}\n\nexport interface TabPanelProps extends ViewStyleProps {\n  value: string;\n  children?: React.ReactNode;\n  testID?: string;\n}\n\nexport interface TabRegistration {\n  disabled: boolean;\n  focus: () => void;\n  value: string;\n}\n\nexport interface TabsContextValue {\n  activeValue: string | undefined;\n  focusedValue: string | undefined;\n  getPanelId: (value: string) => string;\n  getTabId: (value: string) => string;\n  registerTab: (tab: TabRegistration) => void;\n  setActiveValue: (value: string) => void;\n  setFocusedValue: (value: string | undefined) => void;\n  tabs: readonly TabRegistration[];\n  unregisterTab: (value: string) => void;\n}\n\nexport type TabNavigationKey =\n  'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End';\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "9.0.10",
+  "version": "9.0.12",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@ankhorage/color-theory": "^0.3.1",
-    "@ankhorage/contracts": "^22.1.2",
+    "@ankhorage/contracts": "^22.2.0",
     "@ankhorage/utility": "^1.4.0",
     "@gorhom/bottom-sheet": "^5.2.13"
   },
@@ -107,7 +107,7 @@
     "version-packages": "ankhorage-changeset version"
   },
   "devDependencies": {
-    "@ankhorage/devtools": "^1.18.2",
+    "@ankhorage/devtools": "^1.18.5",
     "@ankhorage/paradox": "^0.1.26",
     "@react-native-vector-icons/fontawesome": "^13.1.3",
     "@react-native-vector-icons/fontawesome5": "^13.1.3",

package/src/features/layout/adapters/inbound/View.tsx

@@ -11,9 +11,11 @@ import { useTheme } from '../../../theme/runtime';
 export function View({
   accessible,
   accessibilityLabel,
+  accessibilityLabelledBy,
   accessibilityRole,
   accessibilityState,
   children,
+  nativeID,
   pointerEvents,
   style,
   testID,
@@ -29,8 +31,10 @@ export function View({
       {...resolvedPointerEvents?.props}
       accessible={accessible}
       accessibilityLabel={accessibilityLabel}
+      accessibilityLabelledBy={accessibilityLabelledBy}
       accessibilityRole={accessibilityRole}
       accessibilityState={accessibilityState}
+      nativeID={nativeID}
       testID={testID}
       style={[resolved, resolvedPointerEvents?.style, style]}
     >

package/src/features/tabs/adapters/inbound/TabPanel.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
-import { View } from 'react-native';
 
 import type { TabPanelProps } from '../../../../types/tabs';
+import { View } from '../../../layout/public';
 import { useTabsContext } from '../../composition/useTabsContext';
 
 const TAB_PANEL_ROLE = 'tabpanel' as React.ComponentProps<typeof View>['accessibilityRole'];
 
-/*** Renders the content panel associated with the active tab value. */
-export function TabPanel({ value, children, testID }: TabPanelProps) {
+/*** Renders the active content panel with the supplied View layout and tab accessibility linkage. */
+export function TabPanel({ value, children, testID, ...layoutProps }: TabPanelProps) {
   const { activeValue, getPanelId, getTabId } = useTabsContext();
 
   if (activeValue !== value) return null;
 
   return (
     <View
+      {...layoutProps}
       accessibilityLabelledBy={getTabId(value)}
       accessibilityRole={TAB_PANEL_ROLE}
       nativeID={getPanelId(value)}

package/src/features/tabs/adapters/inbound/Tabs.layout.test.tsx

@@ -0,0 +1,46 @@
+import { expect, mock, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import * as ReactNativeWeb from 'react-native-web';
+
+await mock.module('react-native', () => ReactNativeWeb);
+
+const { ThemeProvider } = await import('../../../theme/runtime');
+const { ScrollView } = await import('../../../layout/public');
+const { TabPanel } = await import('./TabPanel');
+const { Tabs } = await import('./Tabs');
+
+test('forwards bounded layout to the active panel around a scrolling child', () => {
+  const markup = renderToStaticMarkup(
+    <ThemeProvider>
+      <Tabs defaultValue="tree" flex={1} minHeight={0} overflow="hidden" testID="sidebar">
+        <TabPanel flex={1} minHeight={0} testID="tree-panel" value="tree">
+          <ScrollView flex={1} minHeight={0} testID="tree-scroll">
+            <span>Deep tree</span>
+          </ScrollView>
+        </TabPanel>
+        <TabPanel value="rules">
+          <span>Hidden rules</span>
+        </TabPanel>
+      </Tabs>
+    </ThemeProvider>,
+  );
+
+  const browserWindow = new Window();
+  browserWindow.document.body.innerHTML = markup;
+  const shell = browserWindow.document.querySelector('[data-testid="sidebar"]');
+  const panel = browserWindow.document.querySelector('[data-testid="tree-panel"]');
+  const scroll = browserWindow.document.querySelector('[data-testid="tree-scroll"]');
+
+  expect(shell?.getAttribute('style')).toContain('flex:1');
+  expect(shell?.getAttribute('style')).toContain('min-height:0px');
+  expect(shell?.getAttribute('style')).toContain('overflow-y:hidden');
+  expect(panel?.getAttribute('style')).toContain('flex:1');
+  expect(panel?.getAttribute('style')).toContain('min-height:0px');
+  expect(panel?.getAttribute('role')).toBe('tabpanel');
+  expect(panel?.getAttribute('aria-labelledby')).toBe('sidebar-tabs-tab-tree');
+  expect(scroll?.parentElement).toBe(panel);
+  expect(browserWindow.document.body.textContent).not.toContain('Hidden rules');
+  browserWindow.close();
+});

package/src/features/tabs/adapters/inbound/Tabs.tsx

@@ -5,13 +5,22 @@ import { View } from '../../../layout/public';
 import { TabsContext } from '../../composition/TabsContext';
 import { useTabsController } from '../../composition/useTabsController';
 
-/*** Provides accessible tab selection state to TabList, Tab, and TabPanel children. */
-export function Tabs({ children, ...props }: TabsProps) {
-  const contextValue = useTabsController(props);
+/*** Provides accessible tab selection and forwards View layout to the tab container. */
+export function Tabs({
+  children,
+  defaultValue,
+  onValueChange,
+  testID,
+  value,
+  ...layoutProps
+}: TabsProps) {
+  const contextValue = useTabsController({ defaultValue, onValueChange, testID, value });
 
   return (
     <TabsContext value={contextValue}>
-      <View testID={props.testID}>{children}</View>
+      <View {...layoutProps} testID={testID}>
+        {children}
+      </View>
     </TabsContext>
   );
 }

package/src/types/layout.ts

@@ -69,10 +69,12 @@ export interface ViewStyleProps {
 
 export interface ViewProps extends ViewStyleProps {
   accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];
+  accessibilityLabelledBy?: ReactNativeViewProps['accessibilityLabelledBy'];
   accessibilityRole?: ReactNativeViewProps['accessibilityRole'];
   accessibilityState?: ReactNativeViewProps['accessibilityState'];
   accessible?: ReactNativeViewProps['accessible'];
   children?: React.ReactNode;
+  nativeID?: ReactNativeViewProps['nativeID'];
   pointerEvents?: ReactNativeViewProps['pointerEvents'];
   testID?: string;
 }

package/src/types/tabs.ts

@@ -1,8 +1,9 @@
 import type React from 'react';
 
 import type { InteractionPolicy } from './interactionPolicy';
+import type { ViewStyleProps } from './layout';
 
-export interface TabsProps {
+export interface TabsProps extends ViewStyleProps {
   children?: React.ReactNode;
   value?: string;
   defaultValue?: string;
@@ -23,7 +24,7 @@ export interface TabProps {
   testID?: string;
 }
 
-export interface TabPanelProps {
+export interface TabPanelProps extends ViewStyleProps {
   value: string;
   children?: React.ReactNode;
   testID?: string;