@ankhorage/zora 21.0.0 → 21.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 21.0.2
+
+### Patch Changes
+
+- 1108e6a: Update Ankhorage dependencies: `@ankhorage/surface`.
+
+## 21.0.1
+
+### Patch Changes
+
+- a9b8d75: Forward constrained layout props through Tabs and TabPanel to the released Surface owner contract.
+
 ## 21.0.0
 
 ### Major Changes

package/README.md

@@ -3,7 +3,7 @@
 
 # @ankhorage/zora
 
-![license: MIT](././paradox/badges/license.svg) ![npm: v21.0.0](././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: v21.0.2](././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)
 
 Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.
 

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

@@ -3,9 +3,7 @@ import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThem
 /*** Renders content associated with one selected Tab. */
 export const TabPanel = withZoraThemeScope(TabPanelInner);
 /*** Delegates tabpanel visibility and accessibility linkage to Surface. */
-function TabPanelInner({ themeId: _themeId, mode: _mode, interactionPolicy: _interactionPolicy, children, value, testID, }) {
-    return (<SurfaceTabPanel testID={testID} value={value}>
-      {children}
-    </SurfaceTabPanel>);
+function TabPanelInner({ themeId: _themeId, mode: _mode, interactionPolicy: _interactionPolicy, ...props }) {
+    return <SurfaceTabPanel {...props}/>;
 }
 //# sourceMappingURL=TabPanel.js.map

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,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAGjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AAExF,yDAAyD;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC;AAE1D,2EAA2E;AAC3E,SAAS,aAAa,CAAC,EACrB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,iBAAiB,EAAE,kBAAkB,EACrC,QAAQ,EACR,KAAK,EACL,MAAM,GACQ;IACd,OAAO,CACL,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAC5C;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC","sourcesContent":["import { TabPanel as SurfaceTabPanel } from '@ankhorage/surface';\n\nimport type { TabPanelProps } from '../../../../types/tabs';\nimport { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';\n\n/*** Renders content associated with one selected Tab. */\nexport const TabPanel = withZoraThemeScope(TabPanelInner);\n\n/*** Delegates tabpanel visibility and accessibility linkage to Surface. */\nfunction TabPanelInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy: _interactionPolicy,\n  children,\n  value,\n  testID,\n}: TabPanelProps) {\n  return (\n    <SurfaceTabPanel testID={testID} value={value}>\n      {children}\n    </SurfaceTabPanel>\n  );\n}\n"]}
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAGjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AAExF,yDAAyD;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC;AAE1D,2EAA2E;AAC3E,SAAS,aAAa,CAAC,EACrB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,iBAAiB,EAAE,kBAAkB,EACrC,GAAG,KAAK,EACM;IACd,OAAO,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACxC,CAAC","sourcesContent":["import { TabPanel as SurfaceTabPanel } from '@ankhorage/surface';\n\nimport type { TabPanelProps } from '../../../../types/tabs';\nimport { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';\n\n/*** Renders content associated with one selected Tab. */\nexport const TabPanel = withZoraThemeScope(TabPanelInner);\n\n/*** Delegates tabpanel visibility and accessibility linkage to Surface. */\nfunction TabPanelInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy: _interactionPolicy,\n  ...props\n}: TabPanelProps) {\n  return <SurfaceTabPanel {...props} />;\n}\n"]}

package/dist/features/tabs/tabPanelMeta.d.ts

@@ -10,6 +10,66 @@ export declare const tabPanelMeta: {
             readonly category: "State";
             readonly label: "Value";
         };
+        readonly p: {
+            readonly type: "spacing";
+            readonly category: "Spacing";
+        };
+        readonly px: {
+            readonly type: "spacing";
+            readonly category: "Spacing";
+        };
+        readonly py: {
+            readonly type: "spacing";
+            readonly category: "Spacing";
+        };
+        readonly pt: {
+            readonly type: "spacing";
+            readonly category: "Spacing";
+        };
+        readonly pb: {
+            readonly type: "spacing";
+            readonly category: "Spacing";
+        };
+        readonly m: {
+            readonly type: "spacing";
+            readonly category: "Spacing";
+        };
+        readonly width: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly height: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly minWidth: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly maxWidth: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly minHeight: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly maxHeight: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly flex: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly radius: {
+            readonly type: "radius";
+            readonly category: "Style";
+        };
+        readonly accessibilityLabel: {
+            readonly type: "string";
+            readonly category: "Accessibility";
+        };
     };
 };
 //# sourceMappingURL=tabPanelMeta.d.ts.map

package/dist/features/tabs/tabPanelMeta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabPanelMeta.d.ts","sourceRoot":"","sources":["../../../src/features/tabs/tabPanelMeta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;;;;;;;;;;;CASa,CAAC"}
+{"version":3,"file":"tabPanelMeta.d.ts","sourceRoot":"","sources":["../../../src/features/tabs/tabPanelMeta.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUa,CAAC"}

package/dist/features/tabs/tabPanelMeta.js

@@ -1,4 +1,5 @@
 import { CONTAINER_ALLOWED_CHILDREN } from '../authoring/allowedChildren';
+import { LAYOUT_PROPS } from '../layout/constants';
 export const tabPanelMeta = {
     name: 'TabPanel',
     category: 'component',
@@ -6,6 +7,7 @@ export const tabPanelMeta = {
     allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
     description: 'Content panel associated with one Tab value.',
     props: {
+        ...LAYOUT_PROPS,
         value: { type: 'string', category: 'State', label: 'Value' },
     },
 };

package/dist/features/tabs/tabPanelMeta.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabPanelMeta.js","sourceRoot":"","sources":["../../../src/features/tabs/tabPanelMeta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAE1E,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,CAAC,GAAG,0BAA0B,CAAC;IAChD,WAAW,EAAE,8CAA8C;IAC3D,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;KAC7D;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../types/authoring';\nimport { CONTAINER_ALLOWED_CHILDREN } from '../authoring/allowedChildren';\n\nexport const tabPanelMeta = {\n  name: 'TabPanel',\n  category: 'component',\n  directManifestNode: true,\n  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],\n  description: 'Content panel associated with one Tab value.',\n  props: {\n    value: { type: 'string', category: 'State', label: 'Value' },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}
+{"version":3,"file":"tabPanelMeta.js","sourceRoot":"","sources":["../../../src/features/tabs/tabPanelMeta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,CAAC,GAAG,0BAA0B,CAAC;IAChD,WAAW,EAAE,8CAA8C;IAC3D,KAAK,EAAE;QACL,GAAG,YAAY;QACf,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;KAC7D;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../types/authoring';\nimport { CONTAINER_ALLOWED_CHILDREN } from '../authoring/allowedChildren';\nimport { LAYOUT_PROPS } from '../layout/constants';\n\nexport const tabPanelMeta = {\n  name: 'TabPanel',\n  category: 'component',\n  directManifestNode: true,\n  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],\n  description: 'Content panel associated with one Tab value.',\n  props: {\n    ...LAYOUT_PROPS,\n    value: { type: 'string', category: 'State', label: 'Value' },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/features/tabs/tabsMeta.d.ts

@@ -43,6 +43,11 @@ export declare const tabsMeta: {
         };
     };
     readonly props: {
+        readonly overflow: {
+            readonly type: "enum";
+            readonly category: "Layout";
+            readonly enum: readonly ["visible", "hidden"];
+        };
         readonly value: {
             readonly type: "string";
             readonly category: "State";
@@ -53,6 +58,66 @@ export declare const tabsMeta: {
             readonly category: "State";
             readonly label: "Default value";
         };
+        readonly p: {
+            readonly type: "spacing";
+            readonly category: "Spacing";
+        };
+        readonly px: {
+            readonly type: "spacing";
+            readonly category: "Spacing";
+        };
+        readonly py: {
+            readonly type: "spacing";
+            readonly category: "Spacing";
+        };
+        readonly pt: {
+            readonly type: "spacing";
+            readonly category: "Spacing";
+        };
+        readonly pb: {
+            readonly type: "spacing";
+            readonly category: "Spacing";
+        };
+        readonly m: {
+            readonly type: "spacing";
+            readonly category: "Spacing";
+        };
+        readonly width: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly height: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly minWidth: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly maxWidth: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly minHeight: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly maxHeight: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly flex: {
+            readonly type: "number";
+            readonly category: "Layout";
+        };
+        readonly radius: {
+            readonly type: "radius";
+            readonly category: "Style";
+        };
+        readonly accessibilityLabel: {
+            readonly type: "string";
+            readonly category: "Accessibility";
+        };
     };
 };
 //# sourceMappingURL=tabsMeta.d.ts.map

package/dist/features/tabs/tabsMeta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabsMeta.d.ts","sourceRoot":"","sources":["../../../src/features/tabs/tabsMeta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCiB,CAAC"}
+{"version":3,"file":"tabsMeta.d.ts","sourceRoot":"","sources":["../../../src/features/tabs/tabsMeta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCiB,CAAC"}

package/dist/features/tabs/tabsMeta.js

@@ -1,3 +1,4 @@
+import { LAYOUT_PROPS } from '../layout/constants';
 export const tabsMeta = {
     name: 'Tabs',
     category: 'component',
@@ -33,6 +34,8 @@ export const tabsMeta = {
         },
     },
     props: {
+        ...LAYOUT_PROPS,
+        overflow: { type: 'enum', category: 'Layout', enum: ['visible', 'hidden'] },
         value: { type: 'string', category: 'State', label: 'Value' },
         defaultValue: { type: 'string', category: 'State', label: 'Default value' },
     },

package/dist/features/tabs/tabsMeta.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabsMeta.js","sourceRoot":"","sources":["../../../src/features/tabs/tabsMeta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC;IACxC,WAAW,EAAE,iEAAiE;IAC9E,MAAM,EAAE;QACN,WAAW,EAAE;YACX,KAAK,EAAE,cAAc;YACrB,SAAS,EAAE,kBAAkB;YAC7B,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;SACnE;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,KAAK,EAAE,OAAO;gBACd,WAAW,EAAE,2BAA2B;gBACxC,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;gBACzB,eAAe,EAAE,IAAI;gBACrB,iBAAiB,EAAE,IAAI;aACxB;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE;gBACX,KAAK,EAAE,cAAc;gBACrB,WAAW,EAAE,mCAAmC;gBAChD,OAAO,EAAE;oBACP,SAAS,EAAE,kBAAkB;oBAC7B,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;iBAC5D;aACF;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAC5D,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE;KAC5E;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../types/authoring';\n\nexport const tabsMeta = {\n  name: 'Tabs',\n  category: 'component',\n  directManifestNode: true,\n  allowedChildren: ['TabList', 'TabPanel'],\n  description: 'Owns the active value for an accessible tablist and its panels.',\n  events: {\n    valueChange: {\n      label: 'Value change',\n      eventType: 'tabs.valueChange',\n      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],\n    },\n  },\n  bindings: {\n    props: {\n      value: {\n        label: 'Value',\n        description: 'Current active tab value.',\n        value: { type: 'string' },\n        acceptsFallback: true,\n        acceptsTransforms: true,\n      },\n    },\n    events: {\n      valueChange: {\n        label: 'Value change',\n        description: 'Runs when the active tab changes.',\n        payload: {\n          eventType: 'tabs.valueChange',\n          fields: [{ path: 'value', type: 'string', label: 'Value' }],\n        },\n      },\n    },\n  },\n  props: {\n    value: { type: 'string', category: 'State', label: 'Value' },\n    defaultValue: { type: 'string', category: 'State', label: 'Default value' },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}
+{"version":3,"file":"tabsMeta.js","sourceRoot":"","sources":["../../../src/features/tabs/tabsMeta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC;IACxC,WAAW,EAAE,iEAAiE;IAC9E,MAAM,EAAE;QACN,WAAW,EAAE;YACX,KAAK,EAAE,cAAc;YACrB,SAAS,EAAE,kBAAkB;YAC7B,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;SACnE;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,KAAK,EAAE,OAAO;gBACd,WAAW,EAAE,2BAA2B;gBACxC,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;gBACzB,eAAe,EAAE,IAAI;gBACrB,iBAAiB,EAAE,IAAI;aACxB;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE;gBACX,KAAK,EAAE,cAAc;gBACrB,WAAW,EAAE,mCAAmC;gBAChD,OAAO,EAAE;oBACP,SAAS,EAAE,kBAAkB;oBAC7B,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;iBAC5D;aACF;SACF;KACF;IACD,KAAK,EAAE;QACL,GAAG,YAAY;QACf,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE;QAC3E,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAC5D,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE;KAC5E;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../types/authoring';\nimport { LAYOUT_PROPS } from '../layout/constants';\n\nexport const tabsMeta = {\n  name: 'Tabs',\n  category: 'component',\n  directManifestNode: true,\n  allowedChildren: ['TabList', 'TabPanel'],\n  description: 'Owns the active value for an accessible tablist and its panels.',\n  events: {\n    valueChange: {\n      label: 'Value change',\n      eventType: 'tabs.valueChange',\n      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],\n    },\n  },\n  bindings: {\n    props: {\n      value: {\n        label: 'Value',\n        description: 'Current active tab value.',\n        value: { type: 'string' },\n        acceptsFallback: true,\n        acceptsTransforms: true,\n      },\n    },\n    events: {\n      valueChange: {\n        label: 'Value change',\n        description: 'Runs when the active tab changes.',\n        payload: {\n          eventType: 'tabs.valueChange',\n          fields: [{ path: 'value', type: 'string', label: 'Value' }],\n        },\n      },\n    },\n  },\n  props: {\n    ...LAYOUT_PROPS,\n    overflow: { type: 'enum', category: 'Layout', enum: ['visible', 'hidden'] },\n    value: { type: 'string', category: 'State', label: 'Value' },\n    defaultValue: { type: 'string', category: 'State', label: 'Default value' },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/types/tabs.d.ts

@@ -1,10 +1,7 @@
+import type { TabPanelProps as SurfaceTabPanelProps, TabsProps as SurfaceTabsProps } from '@ankhorage/surface';
 import type React from 'react';
 import type { ZoraBaseProps } from './base';
-export interface TabsProps extends ZoraBaseProps {
-    children?: React.ReactNode;
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
+export interface TabsProps extends ZoraBaseProps, Omit<SurfaceTabsProps, 'testID'> {
 }
 export interface TabListProps extends ZoraBaseProps {
     children?: React.ReactNode;
@@ -14,8 +11,6 @@ export interface TabProps extends ZoraBaseProps {
     label: string;
     disabled?: boolean;
 }
-export interface TabPanelProps extends ZoraBaseProps {
-    value: string;
-    children?: React.ReactNode;
+export interface TabPanelProps extends ZoraBaseProps, Omit<SurfaceTabPanelProps, 'testID'> {
 }
 //# sourceMappingURL=tabs.d.ts.map

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,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,QAAS,SAAQ,aAAa;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/types/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,IAAI,oBAAoB,EACrC,SAAS,IAAI,gBAAgB,EAC9B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,WAAW,SAAU,SAAQ,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC;CAAG;AAErF,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,QAAS,SAAQ,aAAa;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC;CAAG"}

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 { ZoraBaseProps } from './base';\n\nexport interface TabsProps extends ZoraBaseProps {\n  children?: React.ReactNode;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n}\n\nexport interface TabListProps extends ZoraBaseProps {\n  children?: React.ReactNode;\n}\n\nexport interface TabProps extends ZoraBaseProps {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface TabPanelProps extends ZoraBaseProps {\n  value: string;\n  children?: React.ReactNode;\n}\n"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/types/tabs.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  TabPanelProps as SurfaceTabPanelProps,\n  TabsProps as SurfaceTabsProps,\n} from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraBaseProps } from './base';\n\nexport interface TabsProps extends ZoraBaseProps, Omit<SurfaceTabsProps, 'testID'> {}\n\nexport interface TabListProps extends ZoraBaseProps {\n  children?: React.ReactNode;\n}\n\nexport interface TabProps extends ZoraBaseProps {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface TabPanelProps extends ZoraBaseProps, Omit<SurfaceTabPanelProps, 'testID'> {}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "21.0.0",
+  "version": "21.0.2",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -42,7 +42,7 @@
   "dependencies": {
     "@ankhorage/color-theory": "^0.3.1",
     "@ankhorage/contracts": "^22.2.0",
-    "@ankhorage/surface": "^9.0.11",
+    "@ankhorage/surface": "^9.0.12",
     "@ankhorage/utility": "^1.4.0",
     "expo-document-picker": "~57.0.1",
     "expo-image-picker": "~57.0.16"

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

@@ -11,13 +11,7 @@ function TabPanelInner({
   themeId: _themeId,
   mode: _mode,
   interactionPolicy: _interactionPolicy,
-  children,
-  value,
-  testID,
+  ...props
 }: TabPanelProps) {
-  return (
-    <SurfaceTabPanel testID={testID} value={value}>
-      {children}
-    </SurfaceTabPanel>
-  );
+  return <SurfaceTabPanel {...props} />;
 }

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

@@ -0,0 +1,57 @@
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+import { expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import type { ScrollView as ScrollViewComponent } from '../../../layout/adapters/inbound/ScrollView';
+import type { ZoraProvider as ZoraProviderComponent } from '../../../theme/adapters/inbound/ZoraProvider';
+import type { TabPanel as TabPanelComponent } from './TabPanel';
+import type { Tabs as TabsComponent } from './Tabs';
+
+const webDistRoot = join(import.meta.dir, '../../../../../web-dist');
+const load = (path: string) => import(pathToFileURL(join(webDistRoot, path)).href);
+
+test('renders a bounded generated Tabs panel containing the canonical ScrollView', async () => {
+  const { ZoraProvider } = (await load('runtime/ZoraProvider.js')) as {
+    ZoraProvider: typeof ZoraProviderComponent;
+  };
+  const { Tabs, TabPanel } = (await load('components/tabs/index.js')) as {
+    Tabs: typeof TabsComponent;
+    TabPanel: typeof TabPanelComponent;
+  };
+  const { ScrollView } = (await load('components/scroll-view/index.js')) as {
+    ScrollView: typeof ScrollViewComponent;
+  };
+  const markup = renderToStaticMarkup(
+    <ZoraProvider mode="light">
+      <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>
+    </ZoraProvider>,
+  );
+  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(scroll?.parentElement).toBe(panel);
+  expect(browserWindow.document.body.textContent).not.toContain('Hidden rules');
+  browserWindow.close();
+});

package/src/features/tabs/tabPanelMeta.ts

@@ -1,5 +1,6 @@
 import type { ZoraComponentMeta } from '../../types/authoring';
 import { CONTAINER_ALLOWED_CHILDREN } from '../authoring/allowedChildren';
+import { LAYOUT_PROPS } from '../layout/constants';
 
 export const tabPanelMeta = {
   name: 'TabPanel',
@@ -8,6 +9,7 @@ export const tabPanelMeta = {
   allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
   description: 'Content panel associated with one Tab value.',
   props: {
+    ...LAYOUT_PROPS,
     value: { type: 'string', category: 'State', label: 'Value' },
   },
 } as const satisfies ZoraComponentMeta;

package/src/features/tabs/tabsMeta.ts

@@ -1,4 +1,5 @@
 import type { ZoraComponentMeta } from '../../types/authoring';
+import { LAYOUT_PROPS } from '../layout/constants';
 
 export const tabsMeta = {
   name: 'Tabs',
@@ -35,6 +36,8 @@ export const tabsMeta = {
     },
   },
   props: {
+    ...LAYOUT_PROPS,
+    overflow: { type: 'enum', category: 'Layout', enum: ['visible', 'hidden'] },
     value: { type: 'string', category: 'State', label: 'Value' },
     defaultValue: { type: 'string', category: 'State', label: 'Default value' },
   },

package/src/types/tabs.ts

@@ -1,13 +1,12 @@
+import type {
+  TabPanelProps as SurfaceTabPanelProps,
+  TabsProps as SurfaceTabsProps,
+} from '@ankhorage/surface';
 import type React from 'react';
 
 import type { ZoraBaseProps } from './base';
 
-export interface TabsProps extends ZoraBaseProps {
-  children?: React.ReactNode;
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-}
+export interface TabsProps extends ZoraBaseProps, Omit<SurfaceTabsProps, 'testID'> {}
 
 export interface TabListProps extends ZoraBaseProps {
   children?: React.ReactNode;
@@ -19,7 +18,4 @@ export interface TabProps extends ZoraBaseProps {
   disabled?: boolean;
 }
 
-export interface TabPanelProps extends ZoraBaseProps {
-  value: string;
-  children?: React.ReactNode;
-}
+export interface TabPanelProps extends ZoraBaseProps, Omit<SurfaceTabPanelProps, 'testID'> {}

package/web-dist/chunks/{Accordion-earnm712.js → Accordion-0807vg3c.js}

@@ -7,16 +7,16 @@ import {
 } from "./Accordion-grfbz6f2.js";
 import {
   View2
-} from "./Accordion-h1p1d5nx.js";
+} from "./Accordion-96cqeekv.js";
 import {
   Text2
 } from "./Accordion-0exp2200.js";
 import {
   Avatar2
-} from "./Accordion-cb6hgp6x.js";
+} from "./Accordion-v1t7m5kk.js";
 import {
   Badge2
-} from "./Accordion-tdz13qk6.js";
+} from "./Accordion-1pp37dtg.js";
 import {
   useZoraTheme
 } from "./Accordion-jftka3t5.js";

package/web-dist/chunks/{Accordion-tdz13qk6.js → Accordion-1pp37dtg.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   View3
-} from "./Accordion-snc40rxk.js";
+} from "./Accordion-ars389m1.js";
 import {
   useTheme
 } from "./Accordion-49gf1zb8.js";

package/web-dist/chunks/{Accordion-x48sh6na.js → Accordion-1vewf8aa.js}

@@ -2,7 +2,7 @@
 import {
   Toast3,
   ToastProvider3
-} from "./Accordion-62bx9kq5.js";
+} from "./Accordion-2dws3778.js";
 import {
   withZoraThemeScope
 } from "./Accordion-grfbz6f2.js";

package/web-dist/chunks/{Accordion-tprgp3ne.js → Accordion-1xv7q28g.js}

@@ -8,7 +8,7 @@ import {
 } from "./Accordion-t6sdgmbz.js";
 import {
   IconButton2
-} from "./Accordion-6w99typx.js";
+} from "./Accordion-n2vxcm6e.js";
 import {
   withZoraThemeScope
 } from "./Accordion-grfbz6f2.js";

package/web-dist/chunks/{Accordion-62bx9kq5.js → Accordion-2dws3778.js}

@@ -1,14 +1,14 @@
 'use client';
 import {
   View3
-} from "./Accordion-snc40rxk.js";
+} from "./Accordion-ars389m1.js";
 import {
   require_cjs,
   useTheme
 } from "./Accordion-49gf1zb8.js";
 import {
   Surface3
-} from "./Accordion-8y70qgch.js";
+} from "./Accordion-r4c9k9y7.js";
 import {
   Text3
 } from "./Accordion-0jkm3y3w.js";

package/web-dist/chunks/{Accordion-vmq17qkr.js → Accordion-395r3wra.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   View3
-} from "./Accordion-snc40rxk.js";
+} from "./Accordion-ars389m1.js";
 import {
   Text3
 } from "./Accordion-0jkm3y3w.js";

package/web-dist/chunks/{Accordion-3n317mm0.js → Accordion-3tmvwk1n.js}

@@ -2,23 +2,23 @@
 import {
   View3,
   Divider3
-} from "./Accordion-snc40rxk.js";
+} from "./Accordion-ars389m1.js";
 import {
   require_cjs,
   useTheme
 } from "./Accordion-49gf1zb8.js";
 import {
   IconButton2
-} from "./Accordion-6w99typx.js";
+} from "./Accordion-n2vxcm6e.js";
 import {
   withZoraThemeScope
 } from "./Accordion-grfbz6f2.js";
 import {
   View2
-} from "./Accordion-h1p1d5nx.js";
+} from "./Accordion-96cqeekv.js";
 import {
   PopoverMenu2
-} from "./Accordion-wsdjkagv.js";
+} from "./Accordion-w9xmhjv6.js";
 import {
   Heading2,
   Text2

package/web-dist/chunks/{Accordion-9hrrswp6.js → Accordion-42tn3yha.js}

@@ -4,16 +4,16 @@ import {
 } from "./Accordion-grfbz6f2.js";
 import {
   View2
-} from "./Accordion-h1p1d5nx.js";
+} from "./Accordion-96cqeekv.js";
 import {
   ButtonGroup2
-} from "./Accordion-6w99typx.js";
+} from "./Accordion-n2vxcm6e.js";
 import {
   Card2
-} from "./Accordion-h2cpw18y.js";
+} from "./Accordion-xctsc2hx.js";
 import {
   List2
-} from "./Accordion-sz84xmfw.js";
+} from "./Accordion-gf3hxf5v.js";
 import {
   useZoraTheme
 } from "./Accordion-jftka3t5.js";

package/web-dist/chunks/{Accordion-wz3dm2f6.js → Accordion-4cpnj7mw.js}

@@ -1,16 +1,16 @@
 'use client';
 import {
   Button2
-} from "./Accordion-6w99typx.js";
+} from "./Accordion-n2vxcm6e.js";
 import {
   withZoraThemeScope
 } from "./Accordion-grfbz6f2.js";
 import {
   View2
-} from "./Accordion-h1p1d5nx.js";
+} from "./Accordion-96cqeekv.js";
 import {
   Card2
-} from "./Accordion-h2cpw18y.js";
+} from "./Accordion-xctsc2hx.js";
 
 // src/features/empty-state/adapters/inbound/EmptyState.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/web-dist/chunks/{Accordion-qf2t54he.js → Accordion-4nnxzn40.js}

@@ -1,13 +1,13 @@
 'use client';
 import {
   Field3
-} from "./Accordion-vmq17qkr.js";
+} from "./Accordion-395r3wra.js";
 import {
   withZoraThemeScope
 } from "./Accordion-grfbz6f2.js";
 import {
   View2
-} from "./Accordion-h1p1d5nx.js";
+} from "./Accordion-96cqeekv.js";
 import {
   Text2
 } from "./Accordion-0exp2200.js";

package/web-dist/chunks/{Accordion-vyxa1802.js → Accordion-6g3bqvf5.js}

@@ -7,7 +7,7 @@ import {
 } from "./Accordion-grfbz6f2.js";
 import {
   View2
-} from "./Accordion-h1p1d5nx.js";
+} from "./Accordion-96cqeekv.js";
 import {
   Text2
 } from "./Accordion-0exp2200.js";

package/web-dist/chunks/{Accordion-h1p1d5nx.js → Accordion-96cqeekv.js}

@@ -6,7 +6,7 @@ import {
 import {
   View3,
   Divider3
-} from "./Accordion-snc40rxk.js";
+} from "./Accordion-ars389m1.js";
 import {
   require_cjs,
   useTheme