@webority/mobile-ui 0.101.1 → 0.101.3

package/canvas-kit.json

@@ -4,5 +4,5 @@
     "libraryPackage": "@webority/mobile-ui",
     "components": "lib/module/components/*/*.meta.js",
     "tokens": "node_modules/@webority/tokens/dist/canvas/webority-phone.json",
-    "rendererProtocolVersion": 8
+    "rendererProtocolVersion": 11
 }

package/dist/canvas-kit/kit.js

@@ -35509,9 +35509,9 @@ var LE = kt({
 		kind: "WeborityPhone",
 		library: {
 			name: "@webority/mobile-ui",
-			version: "0.101.1"
+			version: "0.101.3"
 		},
-		rendererProtocolVersion: 8,
+		rendererProtocolVersion: 11,
 		platform: "Phone",
 		kitModuleVersion: 2,
 		productKit: null,
@@ -36094,9 +36094,10 @@ var LE = kt({
 						default: "default"
 					}
 				],
-				itemsTakeAction: [],
-				takesAction: [],
+				itemsTakeAction: ["rightActions"],
+				takesAction: ["leftAction"],
 				source: "@webority/mobile-ui",
+				role: "navigation",
 				usage: {
 					when: ["Put a title, a back button and a few actions at the top of a screen.", "Use the large variant for a top-level screen whose title collapses as the list scrolls."],
 					whenNot: [{
@@ -37749,9 +37750,10 @@ var LE = kt({
 						default: "pill"
 					}
 				],
-				itemsTakeAction: [],
-				takesAction: [],
+				itemsTakeAction: ["tabs"],
+				takesAction: ["centerAction"],
 				source: "@webority/mobile-ui",
+				role: "navigation",
 				usage: {
 					when: [
 						"The app has three to five top-level places the person moves between often.",
@@ -50112,7 +50114,7 @@ var LE = kt({
 						default: "underline"
 					}
 				],
-				itemsTakeAction: [],
+				itemsTakeAction: ["tabs"],
 				takesAction: [],
 				source: "@webority/mobile-ui",
 				usage: {

package/dist/canvas-kit/manifest.json

@@ -2,9 +2,9 @@
   "kind": "WeborityPhone",
   "library": {
     "name": "@webority/mobile-ui",
-    "version": "0.101.1"
+    "version": "0.101.3"
   },
-  "rendererProtocolVersion": 8,
+  "rendererProtocolVersion": 11,
   "platform": "Phone",
   "kitModuleVersion": 2,
   "productKit": null,
@@ -704,9 +704,14 @@
           "default": "default"
         }
       ],
-      "itemsTakeAction": [],
-      "takesAction": [],
+      "itemsTakeAction": [
+        "rightActions"
+      ],
+      "takesAction": [
+        "leftAction"
+      ],
       "source": "@webority/mobile-ui",
+      "role": "navigation",
       "usage": {
         "when": [
           "Put a title, a back button and a few actions at the top of a screen.",
@@ -2657,9 +2662,14 @@
           "default": "pill"
         }
       ],
-      "itemsTakeAction": [],
-      "takesAction": [],
+      "itemsTakeAction": [
+        "tabs"
+      ],
+      "takesAction": [
+        "centerAction"
+      ],
       "source": "@webority/mobile-ui",
+      "role": "navigation",
       "usage": {
         "when": [
           "The app has three to five top-level places the person moves between often.",
@@ -17105,7 +17115,9 @@
           "default": "underline"
         }
       ],
-      "itemsTakeAction": [],
+      "itemsTakeAction": [
+        "tabs"
+      ],
       "takesAction": [],
       "source": "@webority/mobile-ui",
       "usage": {

package/dist/canvas-kit/release.json

@@ -1,21 +1,21 @@
 {
   "name": "webority-phone",
-  "version": "0.101.1",
+  "version": "0.101.3",
   "platform": "Phone",
   "kitModuleVersion": 2,
-  "rendererProtocolVersion": 8,
+  "rendererProtocolVersion": 11,
   "library": {
     "name": "@webority/mobile-ui",
-    "version": "0.101.1"
+    "version": "0.101.3"
   },
   "files": {
     "manifest.json": {
-      "sha256": "53845d4c670972f5f8551eb63597a7bec75b50647abbfdad5729f1a12caa615f",
-      "bytes": 613046
+      "sha256": "5b0d1a987e0e2eafacec38be340a61b5eaeb2d0fe9dcafb0fdf72549763fa3a5",
+      "bytes": 613235
     },
     "kit.js": {
-      "sha256": "2dd1fecb1f31cf44a655089f9f7db203aee0a6e0d4348929c32a1c1b109e7b0f",
-      "bytes": 5916562
+      "sha256": "18cdf11cc29ae8175f91add24563d6a76e8be4204b3192be37ece32bf4fcccf1",
+      "bytes": 5916663
     },
     "kit.css": {
       "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",

package/lib/commonjs/components/AppBar/AppBar.meta.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.meta=void 0;var _meta=require("../../canvasKit/meta.js");const meta=exports.meta=(0,_meta.definePhoneMeta)()({name:"AppBar",marker:"AppBar",platforms:["phone"],acceptsChildren:!1,props:{title:{type:"string",description:"The bar title."},subtitle:{type:"string",description:"A second line under the title."},titleAlignment:{type:"enum",values:["left","center"],default:"left",description:"Aligns the title and subtitle to the left or the centre."},leftAction:{type:"object",description:"The button at the left edge, drawn from an icon or a text label.",fields:{icon:{type:"icon",description:"The glyph of the button."},text:{type:"string",description:"A text label used instead of the glyph."},dot:{type:"boolean",description:"Draws a small unread dot on the button."},accessibilityLabel:{type:"string",description:"The spoken label of the button."}}},rightActions:{type:"array",description:"The buttons at the right edge, in order.",itemFields:{icon:{type:"icon",description:"The glyph of the button."},text:{type:"string",description:"A text label used instead of the glyph."},dot:{type:"boolean",description:"Draws a small unread dot on the button."},badge:{type:"stringOrNumber",description:"A count or short text drawn on the button; zero draws nothing."},accessibilityLabel:{type:"string",description:"The spoken label of the button."}}},leading:{type:"node",description:"Any element in the left slot, after the left action."},trailing:{type:"node",description:"Any element in the right slot, after the right actions."},gutter:{type:"number",description:"The distance in points from the screen edge to the visible edge of the outermost glyph."},titleVariant:{type:"string",description:"The text style of the title, a Text variant name or a variant the theme registers."},titleOffset:{type:"number",description:"The exact space in points between the left slot and the title."},height:{type:"number",description:"The bar height in points, without the top safe area; it overrides the variant height."},divider:{type:"boolean",description:"Draws a hairline under the bar; it shows unless the bar is transparent."},variant:{type:"enum",values:["default","large","compact"],default:"default",description:"The bar height and title weight."},transparent:{type:"boolean",default:!1,description:"Removes the background and the bottom line, for hero or tinted layouts."}},omit:["scrollY","haptic"],examples:[{id:"AppBar.default",title:"Title and subtitle",props:{title:"Inbox",subtitle:"3 unread",variant:"default"}},{id:"AppBar.compact",title:"Compact, centred title",props:{title:"Inbox",variant:"compact",titleAlignment:"center"}},{id:"AppBar.large",title:"Large title",props:{title:"Library",subtitle:"Scroll the list below",variant:"large"}},{id:"AppBar.transparent",title:"Transparent",props:{title:"Inbox",variant:"default",transparent:!0}}],usage:{when:["Put a title, a back button and a few actions at the top of a screen.","Use the large variant for a top-level screen whose title collapses as the list scrolls."],whenNot:[{text:"A search field is the main control of the screen.",instead:"Use SearchBar."},{text:"The page needs a custom header layout.",instead:"Compose it with the leading and trailing slots before building a new header."}],do:[{note:"Keep at most three actions on the right and give each an accessibility label.",example:[{component:"AppBar",props:{title:"Inbox",rightActions:[{icon:"search",accessibilityLabel:"Search messages"},{icon:"filter",accessibilityLabel:"Filter messages"},{icon:"more",accessibilityLabel:"More options"}]}}]},{note:"Use the compact variant on screens below the first level.",example:[{component:"AppBar",props:{title:"Settings",variant:"compact",rightActions:[{icon:"share",accessibilityLabel:"Share profile"}]}}]}],dont:[{note:"Do not put long text in the title; it truncates.",example:[{component:"AppBar",props:{title:"Inbox messages from all your accounts and folders",rightActions:[{icon:"search",accessibilityLabel:"Search messages"},{icon:"filter",accessibilityLabel:"Filter messages"},{icon:"more",accessibilityLabel:"More options"}]}}]},{note:"Do not give an action neither an icon nor a text label.",example:[{component:"AppBar",props:{title:"Settings",variant:"compact",rightActions:[{accessibilityLabel:"Share profile"}]}}]}],a11y:["Every action is at least 44 by 44 points and needs an accessibility label unless it has text.","The back arrow is announced as Back."]}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.meta=void 0;var _meta=require("../../canvasKit/meta.js");const meta=exports.meta=(0,_meta.definePhoneMeta)()({name:"AppBar",marker:"AppBar",platforms:["phone"],acceptsChildren:!1,props:{title:{type:"string",description:"The bar title."},subtitle:{type:"string",description:"A second line under the title."},titleAlignment:{type:"enum",values:["left","center"],default:"left",description:"Aligns the title and subtitle to the left or the centre."},leftAction:{type:"object",description:"The button at the left edge, drawn from an icon or a text label.",fields:{icon:{type:"icon",description:"The glyph of the button."},text:{type:"string",description:"A text label used instead of the glyph."},dot:{type:"boolean",description:"Draws a small unread dot on the button."},accessibilityLabel:{type:"string",description:"The spoken label of the button."}}},rightActions:{type:"array",description:"The buttons at the right edge, in order.",itemFields:{icon:{type:"icon",description:"The glyph of the button."},text:{type:"string",description:"A text label used instead of the glyph."},dot:{type:"boolean",description:"Draws a small unread dot on the button."},badge:{type:"stringOrNumber",description:"A count or short text drawn on the button; zero draws nothing."},accessibilityLabel:{type:"string",description:"The spoken label of the button."}}},leading:{type:"node",description:"Any element in the left slot, after the left action."},trailing:{type:"node",description:"Any element in the right slot, after the right actions."},gutter:{type:"number",description:"The distance in points from the screen edge to the visible edge of the outermost glyph."},titleVariant:{type:"string",description:"The text style of the title, a Text variant name or a variant the theme registers."},titleOffset:{type:"number",description:"The exact space in points between the left slot and the title."},height:{type:"number",description:"The bar height in points, without the top safe area; it overrides the variant height."},divider:{type:"boolean",description:"Draws a hairline under the bar; it shows unless the bar is transparent."},variant:{type:"enum",values:["default","large","compact"],default:"default",description:"The bar height and title weight."},transparent:{type:"boolean",default:!1,description:"Removes the background and the bottom line, for hero or tinted layouts."}},omit:["scrollY","haptic"],role:"navigation",takesAction:["leftAction"],itemsTakeAction:["rightActions"],examples:[{id:"AppBar.default",title:"Title and subtitle",props:{title:"Inbox",subtitle:"3 unread",variant:"default"}},{id:"AppBar.compact",title:"Compact, centred title",props:{title:"Inbox",variant:"compact",titleAlignment:"center"}},{id:"AppBar.large",title:"Large title",props:{title:"Library",subtitle:"Scroll the list below",variant:"large"}},{id:"AppBar.transparent",title:"Transparent",props:{title:"Inbox",variant:"default",transparent:!0}}],usage:{when:["Put a title, a back button and a few actions at the top of a screen.","Use the large variant for a top-level screen whose title collapses as the list scrolls."],whenNot:[{text:"A search field is the main control of the screen.",instead:"Use SearchBar."},{text:"The page needs a custom header layout.",instead:"Compose it with the leading and trailing slots before building a new header."}],do:[{note:"Keep at most three actions on the right and give each an accessibility label.",example:[{component:"AppBar",props:{title:"Inbox",rightActions:[{icon:"search",accessibilityLabel:"Search messages"},{icon:"filter",accessibilityLabel:"Filter messages"},{icon:"more",accessibilityLabel:"More options"}]}}]},{note:"Use the compact variant on screens below the first level.",example:[{component:"AppBar",props:{title:"Settings",variant:"compact",rightActions:[{icon:"share",accessibilityLabel:"Share profile"}]}}]}],dont:[{note:"Do not put long text in the title; it truncates.",example:[{component:"AppBar",props:{title:"Inbox messages from all your accounts and folders",rightActions:[{icon:"search",accessibilityLabel:"Search messages"},{icon:"filter",accessibilityLabel:"Filter messages"},{icon:"more",accessibilityLabel:"More options"}]}}]},{note:"Do not give an action neither an icon nor a text label.",example:[{component:"AppBar",props:{title:"Settings",variant:"compact",rightActions:[{accessibilityLabel:"Share profile"}]}}]}],a11y:["Every action is at least 44 by 44 points and needs an accessibility label unless it has text.","The back arrow is announced as Back."]}});

package/lib/commonjs/components/BottomNavigation/BottomNavigation.meta.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.meta=void 0;var _meta=require("../../canvasKit/meta.js");const meta=exports.meta=(0,_meta.definePhoneMeta)()({name:"BottomNavigation",marker:null,platforms:["phone"],acceptsChildren:!1,props:{tabs:{type:"array",required:!0,itemFields:{key:{type:"string",required:!0,description:"A stable id for the tab."},label:{type:"string",required:!0,description:"The text under the icon and the accessible name of the tab."},showLabel:{type:"boolean",description:"Draws this tab's label. False hides the text and keeps it as the accessible name."},icon:{type:"icon",required:!0,description:"The tab icon, an icon name or any node."},activeIcon:{type:"icon",description:"The icon drawn while the tab is active."},badge:{type:"stringOrNumber",description:"A number or text drawn on the tab. True draws a dot."}},description:"The tabs, left to right."},centerAction:{type:"object",fields:{label:{type:"string",required:!0,description:"The accessible name of the button. It is never drawn."},icon:{type:"icon",description:"The icon drawn in the filled circle. It defaults to add."},content:{type:"node",description:"Replaces the filled circle entirely with any node."},size:{type:"number",description:"Diameter of the filled circle in pixels."},color:{type:"string",description:"Fill of the circle."},iconColor:{type:"string",description:"Colour of the icon in the circle."},iconSize:{type:"number",description:"Size of the icon in the circle in pixels."},lift:{type:"number",description:"How far the button rises above the centre of the row, in pixels."},gap:{type:"number",description:"Space between the button and the neighbouring tabs, in pixels."}},description:"A button in the middle of the bar that is not a tab."},activeTab:{type:"string",required:!0,description:"The key of the active tab."},showLabels:{type:"boolean",default:!0,description:"Shows the text label under each icon. Expand only labels the active tab."},variant:{type:"enum",values:["pill","underline","floating","bubble","expand","solid","tile"],default:"pill",description:"The look of the bar."},indicatorPosition:{type:"enum",values:["top","bottom"],default:"bottom",description:"Where the active line sits, for the variants that draw a line."},radius:{type:"stringOrNumber",description:"Corner radius of the bar in pixels, or the text pill for fully round ends."},indicatorRadius:{type:"stringOrNumber",description:"Corner radius of the active tab background in pixels, or the text auto to follow the bar.",default:"auto"},elevation:{type:"enum",values:["none","card","elevated","popover","modal","drawer"],description:"The shadow under the bar, as a shadow name or none."},iconSize:{type:"number",description:"Size of every tab icon in pixels."},marginHorizontal:{type:"number",description:"Space between the bar and the left and right screen edges, in pixels."},marginVertical:{type:"number",description:"Space above and below the bar, in pixels."},paddingHorizontal:{type:"number",description:"Space inside the bar between its edges and the tab row, in pixels."},paddingVertical:{type:"number",description:"Space inside the bar above and below the tab row, in pixels."},border:{type:"boolean",description:"Draws a hairline border around the bar."},minimizeOnScroll:{type:"boolean",default:!1,description:"Shrinks the bar to its icons while the person scrolls down and restores it on scroll up."},scrollDirection:{type:"enum",values:["up","down","idle"],default:"idle",description:"The scroll direction of the screen, read only when minimizeOnScroll is on."},accessory:{type:"node",description:"A compact strip tied to the bar, such as a status line."},labelMaxFontScale:{type:"number",description:"The largest text scale the tab label follows."}},omit:["haptic"],examples:[{id:"BottomNavigation.pill",title:"Pill",props:{variant:"pill",activeTab:"home",tabs:[{key:"home",label:"Home",icon:"home"},{key:"search",label:"Search",icon:"search-normal"},{key:"inbox",label:"Inbox",icon:"sms",badge:3},{key:"profile",label:"Profile",icon:"user"}]}},{id:"BottomNavigation.floating",title:"Floating",props:{variant:"floating",elevation:"card",activeTab:"search",tabs:[{key:"home",label:"Home",icon:"home"},{key:"search",label:"Search",icon:"search-normal"},{key:"profile",label:"Profile",icon:"user"}]}},{id:"BottomNavigation.underline",title:"Underline on top",props:{variant:"underline",indicatorPosition:"top",activeTab:"home",tabs:[{key:"home",label:"Home",icon:"home"},{key:"inbox",label:"Inbox",icon:"sms"},{key:"settings",label:"Settings",icon:"setting-2"}]}}],usage:{when:["The app has three to five top-level places the person moves between often.","The bar should stay on screen so the person always knows where they are.","A badge should show unread or pending work on a tab."],whenNot:[{text:"There are more than five destinations.",instead:"Drawer"},{text:"The choices switch views inside one screen.",instead:"Tabs"}],do:[{note:"Give every tab a short label, even when it also has an icon.",example:[{component:"BottomNavigation",props:{activeTab:"home",tabs:[{key:"home",label:"Home",icon:"home"},{key:"inbox",label:"Inbox",icon:"sms"}]}}]}],dont:[{note:"Do not hide every label with no accessible name left on the tab.",example:[{component:"BottomNavigation",props:{showLabels:!1,activeTab:"home",tabs:[{key:"home",label:"",icon:"home"},{key:"inbox",label:"",icon:"sms"}]}}]}],a11y:["A tab's label is its accessible name, also when showLabel is false.","The bar stays expanded while a screen reader is on.","The centre action's label is its accessible name and is never drawn."]}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.meta=void 0;var _meta=require("../../canvasKit/meta.js");const meta=exports.meta=(0,_meta.definePhoneMeta)()({name:"BottomNavigation",marker:null,platforms:["phone"],acceptsChildren:!1,props:{tabs:{type:"array",required:!0,itemFields:{key:{type:"string",required:!0,description:"A stable id for the tab."},label:{type:"string",required:!0,description:"The text under the icon and the accessible name of the tab."},showLabel:{type:"boolean",description:"Draws this tab's label. False hides the text and keeps it as the accessible name."},icon:{type:"icon",required:!0,description:"The tab icon, an icon name or any node."},activeIcon:{type:"icon",description:"The icon drawn while the tab is active."},badge:{type:"stringOrNumber",description:"A number or text drawn on the tab. True draws a dot."}},description:"The tabs, left to right."},centerAction:{type:"object",fields:{label:{type:"string",required:!0,description:"The accessible name of the button. It is never drawn."},icon:{type:"icon",description:"The icon drawn in the filled circle. It defaults to add."},content:{type:"node",description:"Replaces the filled circle entirely with any node."},size:{type:"number",description:"Diameter of the filled circle in pixels."},color:{type:"string",description:"Fill of the circle."},iconColor:{type:"string",description:"Colour of the icon in the circle."},iconSize:{type:"number",description:"Size of the icon in the circle in pixels."},lift:{type:"number",description:"How far the button rises above the centre of the row, in pixels."},gap:{type:"number",description:"Space between the button and the neighbouring tabs, in pixels."}},description:"A button in the middle of the bar that is not a tab."},activeTab:{type:"string",required:!0,description:"The key of the active tab."},showLabels:{type:"boolean",default:!0,description:"Shows the text label under each icon. Expand only labels the active tab."},variant:{type:"enum",values:["pill","underline","floating","bubble","expand","solid","tile"],default:"pill",description:"The look of the bar."},indicatorPosition:{type:"enum",values:["top","bottom"],default:"bottom",description:"Where the active line sits, for the variants that draw a line."},radius:{type:"stringOrNumber",description:"Corner radius of the bar in pixels, or the text pill for fully round ends."},indicatorRadius:{type:"stringOrNumber",description:"Corner radius of the active tab background in pixels, or the text auto to follow the bar.",default:"auto"},elevation:{type:"enum",values:["none","card","elevated","popover","modal","drawer"],description:"The shadow under the bar, as a shadow name or none."},iconSize:{type:"number",description:"Size of every tab icon in pixels."},marginHorizontal:{type:"number",description:"Space between the bar and the left and right screen edges, in pixels."},marginVertical:{type:"number",description:"Space above and below the bar, in pixels."},paddingHorizontal:{type:"number",description:"Space inside the bar between its edges and the tab row, in pixels."},paddingVertical:{type:"number",description:"Space inside the bar above and below the tab row, in pixels."},border:{type:"boolean",description:"Draws a hairline border around the bar."},minimizeOnScroll:{type:"boolean",default:!1,description:"Shrinks the bar to its icons while the person scrolls down and restores it on scroll up."},scrollDirection:{type:"enum",values:["up","down","idle"],default:"idle",description:"The scroll direction of the screen, read only when minimizeOnScroll is on."},accessory:{type:"node",description:"A compact strip tied to the bar, such as a status line."},labelMaxFontScale:{type:"number",description:"The largest text scale the tab label follows."}},omit:["haptic"],role:"navigation",takesAction:["centerAction"],itemsTakeAction:["tabs"],examples:[{id:"BottomNavigation.pill",title:"Pill",props:{variant:"pill",activeTab:"home",tabs:[{key:"home",label:"Home",icon:"home"},{key:"search",label:"Search",icon:"search-normal"},{key:"inbox",label:"Inbox",icon:"sms",badge:3},{key:"profile",label:"Profile",icon:"user"}]}},{id:"BottomNavigation.floating",title:"Floating",props:{variant:"floating",elevation:"card",activeTab:"search",tabs:[{key:"home",label:"Home",icon:"home"},{key:"search",label:"Search",icon:"search-normal"},{key:"profile",label:"Profile",icon:"user"}]}},{id:"BottomNavigation.underline",title:"Underline on top",props:{variant:"underline",indicatorPosition:"top",activeTab:"home",tabs:[{key:"home",label:"Home",icon:"home"},{key:"inbox",label:"Inbox",icon:"sms"},{key:"settings",label:"Settings",icon:"setting-2"}]}}],usage:{when:["The app has three to five top-level places the person moves between often.","The bar should stay on screen so the person always knows where they are.","A badge should show unread or pending work on a tab."],whenNot:[{text:"There are more than five destinations.",instead:"Drawer"},{text:"The choices switch views inside one screen.",instead:"Tabs"}],do:[{note:"Give every tab a short label, even when it also has an icon.",example:[{component:"BottomNavigation",props:{activeTab:"home",tabs:[{key:"home",label:"Home",icon:"home"},{key:"inbox",label:"Inbox",icon:"sms"}]}}]}],dont:[{note:"Do not hide every label with no accessible name left on the tab.",example:[{component:"BottomNavigation",props:{showLabels:!1,activeTab:"home",tabs:[{key:"home",label:"",icon:"home"},{key:"inbox",label:"",icon:"sms"}]}}]}],a11y:["A tab's label is its accessible name, also when showLabel is false.","The bar stays expanded while a screen reader is on.","The centre action's label is its accessible name and is never drawn."]}});

package/lib/commonjs/components/Tabs/Tabs.meta.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.meta=void 0;var _meta=require("../../canvasKit/meta.js");const meta=exports.meta=(0,_meta.definePhoneMeta)()({name:"Tabs",marker:null,platforms:["phone"],acceptsChildren:!1,props:{tabs:{type:"array",required:!0,description:"The tabs in order.",itemFields:{key:{type:"string",required:!0,description:"The tab's stable identifier."},label:{type:"string",required:!0,description:"The tab's text."},icon:{type:"icon",description:"A leading icon drawn in the label colour."},badge:{type:"stringOrNumber",description:"A count or text drawn after the label."},disabled:{type:"boolean",description:"Blocks the tab."}}},activeKey:{type:"string",required:!0,description:"The key of the selected tab."},variant:{type:"enum",values:["underline","pills","segmented"],default:"underline",description:"A sliding underline, a tinted pill, or a filled track with a thumb."},radius:{type:"enumOrNumber",values:["none","sm","md","lg","xl","pill"],description:"The corner radius of the track, pill or underline ends."},size:{type:"enum",values:["sm","md","lg"],default:"md",description:"Scales the text, tab padding and icon together."},scrollable:{type:"boolean",default:!1,description:"Scrolls a long tab list sideways instead of sharing the width equally."},align:{type:"enum",values:["left","center"],default:"left",description:"The tab alignment when the list is not scrollable."},accessibilityLabel:{type:"string",description:"The screen reader name of the tab list."}},omit:["haptic","progress"],examples:[{id:"Tabs.default",title:"Underline with icons",props:{tabs:[{key:"home",label:"Home",icon:"home"},{key:"feed",label:"Feed",icon:"activity"},{key:"team",label:"Team",icon:"people"},{key:"alerts",label:"Alerts",icon:"notification"}],activeKey:"home"}},{id:"Tabs.pills",title:"Pills",props:{variant:"pills",tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"},{key:"alerts",label:"Alerts"}],activeKey:"feed"}},{id:"Tabs.segmented",title:"Segmented with a large radius",props:{variant:"segmented",radius:"lg",tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"}],activeKey:"home"}},{id:"Tabs.badges",title:"Badges and a disabled tab",props:{tabs:[{key:"inbox",label:"Inbox",badge:3},{key:"sent",label:"Sent"},{key:"drafts",label:"Drafts",badge:12},{key:"archived",label:"Archived",disabled:!0}],activeKey:"inbox"}}],usage:{when:["Switch between sections of one screen, such as Overview, Activity and Team.","Show a long list of sections that scrolls sideways."],whenNot:[{text:"Choosing a value, such as a filter or a unit.",instead:"SegmentedControl"},{text:"An ordered flow where completion state matters.",instead:"Stepper"}],do:[{note:"Keep labels to one or two words so every tab fits.",example:[{component:"Tabs",props:{tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"}],activeKey:"home"}}]},{note:"Use scrollable when the labels no longer fit the width.",example:[{component:"Tabs",props:{scrollable:!0,tabs:[{key:"overview",label:"Overview"},{key:"activity",label:"Activity"},{key:"team",label:"Team"},{key:"settings",label:"Settings"},{key:"profile",label:"Profile"}],activeKey:"overview"}}]}],dont:[{note:"Do not nest tab bars.",example:[{component:"Tabs",props:{tabs:[{key:"main",label:"Main"},{key:"sub",label:"Sub"}],activeKey:"main"}}]},{note:"Do not use more than five tabs without scrolling.",example:[{component:"Tabs",props:{tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"},{key:"settings",label:"Settings"},{key:"profile",label:"Profile"},{key:"help",label:"Help"}],activeKey:"home"}}]}],a11y:["The bar reads as a tab list and each tab as a tab with its selected state, so keep labels meaningful.","A disabled tab is announced as unavailable; do not hide a section behind one without saying why."]}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.meta=void 0;var _meta=require("../../canvasKit/meta.js");const meta=exports.meta=(0,_meta.definePhoneMeta)()({name:"Tabs",marker:null,platforms:["phone"],acceptsChildren:!1,props:{tabs:{type:"array",required:!0,description:"The tabs in order.",itemFields:{key:{type:"string",required:!0,description:"The tab's stable identifier."},label:{type:"string",required:!0,description:"The tab's text."},icon:{type:"icon",description:"A leading icon drawn in the label colour."},badge:{type:"stringOrNumber",description:"A count or text drawn after the label."},disabled:{type:"boolean",description:"Blocks the tab."}}},activeKey:{type:"string",required:!0,description:"The key of the selected tab."},variant:{type:"enum",values:["underline","pills","segmented"],default:"underline",description:"A sliding underline, a tinted pill, or a filled track with a thumb."},radius:{type:"enumOrNumber",values:["none","sm","md","lg","xl","pill"],description:"The corner radius of the track, pill or underline ends."},size:{type:"enum",values:["sm","md","lg"],default:"md",description:"Scales the text, tab padding and icon together."},scrollable:{type:"boolean",default:!1,description:"Scrolls a long tab list sideways instead of sharing the width equally."},align:{type:"enum",values:["left","center"],default:"left",description:"The tab alignment when the list is not scrollable."},accessibilityLabel:{type:"string",description:"The screen reader name of the tab list."}},omit:["haptic","progress"],itemsTakeAction:["tabs"],examples:[{id:"Tabs.default",title:"Underline with icons",props:{tabs:[{key:"home",label:"Home",icon:"home"},{key:"feed",label:"Feed",icon:"activity"},{key:"team",label:"Team",icon:"people"},{key:"alerts",label:"Alerts",icon:"notification"}],activeKey:"home"}},{id:"Tabs.pills",title:"Pills",props:{variant:"pills",tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"},{key:"alerts",label:"Alerts"}],activeKey:"feed"}},{id:"Tabs.segmented",title:"Segmented with a large radius",props:{variant:"segmented",radius:"lg",tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"}],activeKey:"home"}},{id:"Tabs.badges",title:"Badges and a disabled tab",props:{tabs:[{key:"inbox",label:"Inbox",badge:3},{key:"sent",label:"Sent"},{key:"drafts",label:"Drafts",badge:12},{key:"archived",label:"Archived",disabled:!0}],activeKey:"inbox"}}],usage:{when:["Switch between sections of one screen, such as Overview, Activity and Team.","Show a long list of sections that scrolls sideways."],whenNot:[{text:"Choosing a value, such as a filter or a unit.",instead:"SegmentedControl"},{text:"An ordered flow where completion state matters.",instead:"Stepper"}],do:[{note:"Keep labels to one or two words so every tab fits.",example:[{component:"Tabs",props:{tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"}],activeKey:"home"}}]},{note:"Use scrollable when the labels no longer fit the width.",example:[{component:"Tabs",props:{scrollable:!0,tabs:[{key:"overview",label:"Overview"},{key:"activity",label:"Activity"},{key:"team",label:"Team"},{key:"settings",label:"Settings"},{key:"profile",label:"Profile"}],activeKey:"overview"}}]}],dont:[{note:"Do not nest tab bars.",example:[{component:"Tabs",props:{tabs:[{key:"main",label:"Main"},{key:"sub",label:"Sub"}],activeKey:"main"}}]},{note:"Do not use more than five tabs without scrolling.",example:[{component:"Tabs",props:{tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"},{key:"settings",label:"Settings"},{key:"profile",label:"Profile"},{key:"help",label:"Help"}],activeKey:"home"}}]}],a11y:["The bar reads as a tab list and each tab as a tab with its selected state, so keep labels meaningful.","A disabled tab is announced as unavailable; do not hide a section behind one without saying why."]}});

package/lib/module/components/AppBar/AppBar.meta.js

@@ -1 +1 @@
-"use strict";import{definePhoneMeta}from"../../canvasKit/meta.js";export const meta=definePhoneMeta()({name:"AppBar",marker:"AppBar",platforms:["phone"],acceptsChildren:!1,props:{title:{type:"string",description:"The bar title."},subtitle:{type:"string",description:"A second line under the title."},titleAlignment:{type:"enum",values:["left","center"],default:"left",description:"Aligns the title and subtitle to the left or the centre."},leftAction:{type:"object",description:"The button at the left edge, drawn from an icon or a text label.",fields:{icon:{type:"icon",description:"The glyph of the button."},text:{type:"string",description:"A text label used instead of the glyph."},dot:{type:"boolean",description:"Draws a small unread dot on the button."},accessibilityLabel:{type:"string",description:"The spoken label of the button."}}},rightActions:{type:"array",description:"The buttons at the right edge, in order.",itemFields:{icon:{type:"icon",description:"The glyph of the button."},text:{type:"string",description:"A text label used instead of the glyph."},dot:{type:"boolean",description:"Draws a small unread dot on the button."},badge:{type:"stringOrNumber",description:"A count or short text drawn on the button; zero draws nothing."},accessibilityLabel:{type:"string",description:"The spoken label of the button."}}},leading:{type:"node",description:"Any element in the left slot, after the left action."},trailing:{type:"node",description:"Any element in the right slot, after the right actions."},gutter:{type:"number",description:"The distance in points from the screen edge to the visible edge of the outermost glyph."},titleVariant:{type:"string",description:"The text style of the title, a Text variant name or a variant the theme registers."},titleOffset:{type:"number",description:"The exact space in points between the left slot and the title."},height:{type:"number",description:"The bar height in points, without the top safe area; it overrides the variant height."},divider:{type:"boolean",description:"Draws a hairline under the bar; it shows unless the bar is transparent."},variant:{type:"enum",values:["default","large","compact"],default:"default",description:"The bar height and title weight."},transparent:{type:"boolean",default:!1,description:"Removes the background and the bottom line, for hero or tinted layouts."}},omit:["scrollY","haptic"],examples:[{id:"AppBar.default",title:"Title and subtitle",props:{title:"Inbox",subtitle:"3 unread",variant:"default"}},{id:"AppBar.compact",title:"Compact, centred title",props:{title:"Inbox",variant:"compact",titleAlignment:"center"}},{id:"AppBar.large",title:"Large title",props:{title:"Library",subtitle:"Scroll the list below",variant:"large"}},{id:"AppBar.transparent",title:"Transparent",props:{title:"Inbox",variant:"default",transparent:!0}}],usage:{when:["Put a title, a back button and a few actions at the top of a screen.","Use the large variant for a top-level screen whose title collapses as the list scrolls."],whenNot:[{text:"A search field is the main control of the screen.",instead:"Use SearchBar."},{text:"The page needs a custom header layout.",instead:"Compose it with the leading and trailing slots before building a new header."}],do:[{note:"Keep at most three actions on the right and give each an accessibility label.",example:[{component:"AppBar",props:{title:"Inbox",rightActions:[{icon:"search",accessibilityLabel:"Search messages"},{icon:"filter",accessibilityLabel:"Filter messages"},{icon:"more",accessibilityLabel:"More options"}]}}]},{note:"Use the compact variant on screens below the first level.",example:[{component:"AppBar",props:{title:"Settings",variant:"compact",rightActions:[{icon:"share",accessibilityLabel:"Share profile"}]}}]}],dont:[{note:"Do not put long text in the title; it truncates.",example:[{component:"AppBar",props:{title:"Inbox messages from all your accounts and folders",rightActions:[{icon:"search",accessibilityLabel:"Search messages"},{icon:"filter",accessibilityLabel:"Filter messages"},{icon:"more",accessibilityLabel:"More options"}]}}]},{note:"Do not give an action neither an icon nor a text label.",example:[{component:"AppBar",props:{title:"Settings",variant:"compact",rightActions:[{accessibilityLabel:"Share profile"}]}}]}],a11y:["Every action is at least 44 by 44 points and needs an accessibility label unless it has text.","The back arrow is announced as Back."]}});
+"use strict";import{definePhoneMeta}from"../../canvasKit/meta.js";export const meta=definePhoneMeta()({name:"AppBar",marker:"AppBar",platforms:["phone"],acceptsChildren:!1,props:{title:{type:"string",description:"The bar title."},subtitle:{type:"string",description:"A second line under the title."},titleAlignment:{type:"enum",values:["left","center"],default:"left",description:"Aligns the title and subtitle to the left or the centre."},leftAction:{type:"object",description:"The button at the left edge, drawn from an icon or a text label.",fields:{icon:{type:"icon",description:"The glyph of the button."},text:{type:"string",description:"A text label used instead of the glyph."},dot:{type:"boolean",description:"Draws a small unread dot on the button."},accessibilityLabel:{type:"string",description:"The spoken label of the button."}}},rightActions:{type:"array",description:"The buttons at the right edge, in order.",itemFields:{icon:{type:"icon",description:"The glyph of the button."},text:{type:"string",description:"A text label used instead of the glyph."},dot:{type:"boolean",description:"Draws a small unread dot on the button."},badge:{type:"stringOrNumber",description:"A count or short text drawn on the button; zero draws nothing."},accessibilityLabel:{type:"string",description:"The spoken label of the button."}}},leading:{type:"node",description:"Any element in the left slot, after the left action."},trailing:{type:"node",description:"Any element in the right slot, after the right actions."},gutter:{type:"number",description:"The distance in points from the screen edge to the visible edge of the outermost glyph."},titleVariant:{type:"string",description:"The text style of the title, a Text variant name or a variant the theme registers."},titleOffset:{type:"number",description:"The exact space in points between the left slot and the title."},height:{type:"number",description:"The bar height in points, without the top safe area; it overrides the variant height."},divider:{type:"boolean",description:"Draws a hairline under the bar; it shows unless the bar is transparent."},variant:{type:"enum",values:["default","large","compact"],default:"default",description:"The bar height and title weight."},transparent:{type:"boolean",default:!1,description:"Removes the background and the bottom line, for hero or tinted layouts."}},omit:["scrollY","haptic"],role:"navigation",takesAction:["leftAction"],itemsTakeAction:["rightActions"],examples:[{id:"AppBar.default",title:"Title and subtitle",props:{title:"Inbox",subtitle:"3 unread",variant:"default"}},{id:"AppBar.compact",title:"Compact, centred title",props:{title:"Inbox",variant:"compact",titleAlignment:"center"}},{id:"AppBar.large",title:"Large title",props:{title:"Library",subtitle:"Scroll the list below",variant:"large"}},{id:"AppBar.transparent",title:"Transparent",props:{title:"Inbox",variant:"default",transparent:!0}}],usage:{when:["Put a title, a back button and a few actions at the top of a screen.","Use the large variant for a top-level screen whose title collapses as the list scrolls."],whenNot:[{text:"A search field is the main control of the screen.",instead:"Use SearchBar."},{text:"The page needs a custom header layout.",instead:"Compose it with the leading and trailing slots before building a new header."}],do:[{note:"Keep at most three actions on the right and give each an accessibility label.",example:[{component:"AppBar",props:{title:"Inbox",rightActions:[{icon:"search",accessibilityLabel:"Search messages"},{icon:"filter",accessibilityLabel:"Filter messages"},{icon:"more",accessibilityLabel:"More options"}]}}]},{note:"Use the compact variant on screens below the first level.",example:[{component:"AppBar",props:{title:"Settings",variant:"compact",rightActions:[{icon:"share",accessibilityLabel:"Share profile"}]}}]}],dont:[{note:"Do not put long text in the title; it truncates.",example:[{component:"AppBar",props:{title:"Inbox messages from all your accounts and folders",rightActions:[{icon:"search",accessibilityLabel:"Search messages"},{icon:"filter",accessibilityLabel:"Filter messages"},{icon:"more",accessibilityLabel:"More options"}]}}]},{note:"Do not give an action neither an icon nor a text label.",example:[{component:"AppBar",props:{title:"Settings",variant:"compact",rightActions:[{accessibilityLabel:"Share profile"}]}}]}],a11y:["Every action is at least 44 by 44 points and needs an accessibility label unless it has text.","The back arrow is announced as Back."]}});

package/lib/module/components/BottomNavigation/BottomNavigation.meta.js

@@ -1 +1 @@
-"use strict";import{definePhoneMeta}from"../../canvasKit/meta.js";export const meta=definePhoneMeta()({name:"BottomNavigation",marker:null,platforms:["phone"],acceptsChildren:!1,props:{tabs:{type:"array",required:!0,itemFields:{key:{type:"string",required:!0,description:"A stable id for the tab."},label:{type:"string",required:!0,description:"The text under the icon and the accessible name of the tab."},showLabel:{type:"boolean",description:"Draws this tab's label. False hides the text and keeps it as the accessible name."},icon:{type:"icon",required:!0,description:"The tab icon, an icon name or any node."},activeIcon:{type:"icon",description:"The icon drawn while the tab is active."},badge:{type:"stringOrNumber",description:"A number or text drawn on the tab. True draws a dot."}},description:"The tabs, left to right."},centerAction:{type:"object",fields:{label:{type:"string",required:!0,description:"The accessible name of the button. It is never drawn."},icon:{type:"icon",description:"The icon drawn in the filled circle. It defaults to add."},content:{type:"node",description:"Replaces the filled circle entirely with any node."},size:{type:"number",description:"Diameter of the filled circle in pixels."},color:{type:"string",description:"Fill of the circle."},iconColor:{type:"string",description:"Colour of the icon in the circle."},iconSize:{type:"number",description:"Size of the icon in the circle in pixels."},lift:{type:"number",description:"How far the button rises above the centre of the row, in pixels."},gap:{type:"number",description:"Space between the button and the neighbouring tabs, in pixels."}},description:"A button in the middle of the bar that is not a tab."},activeTab:{type:"string",required:!0,description:"The key of the active tab."},showLabels:{type:"boolean",default:!0,description:"Shows the text label under each icon. Expand only labels the active tab."},variant:{type:"enum",values:["pill","underline","floating","bubble","expand","solid","tile"],default:"pill",description:"The look of the bar."},indicatorPosition:{type:"enum",values:["top","bottom"],default:"bottom",description:"Where the active line sits, for the variants that draw a line."},radius:{type:"stringOrNumber",description:"Corner radius of the bar in pixels, or the text pill for fully round ends."},indicatorRadius:{type:"stringOrNumber",description:"Corner radius of the active tab background in pixels, or the text auto to follow the bar.",default:"auto"},elevation:{type:"enum",values:["none","card","elevated","popover","modal","drawer"],description:"The shadow under the bar, as a shadow name or none."},iconSize:{type:"number",description:"Size of every tab icon in pixels."},marginHorizontal:{type:"number",description:"Space between the bar and the left and right screen edges, in pixels."},marginVertical:{type:"number",description:"Space above and below the bar, in pixels."},paddingHorizontal:{type:"number",description:"Space inside the bar between its edges and the tab row, in pixels."},paddingVertical:{type:"number",description:"Space inside the bar above and below the tab row, in pixels."},border:{type:"boolean",description:"Draws a hairline border around the bar."},minimizeOnScroll:{type:"boolean",default:!1,description:"Shrinks the bar to its icons while the person scrolls down and restores it on scroll up."},scrollDirection:{type:"enum",values:["up","down","idle"],default:"idle",description:"The scroll direction of the screen, read only when minimizeOnScroll is on."},accessory:{type:"node",description:"A compact strip tied to the bar, such as a status line."},labelMaxFontScale:{type:"number",description:"The largest text scale the tab label follows."}},omit:["haptic"],examples:[{id:"BottomNavigation.pill",title:"Pill",props:{variant:"pill",activeTab:"home",tabs:[{key:"home",label:"Home",icon:"home"},{key:"search",label:"Search",icon:"search-normal"},{key:"inbox",label:"Inbox",icon:"sms",badge:3},{key:"profile",label:"Profile",icon:"user"}]}},{id:"BottomNavigation.floating",title:"Floating",props:{variant:"floating",elevation:"card",activeTab:"search",tabs:[{key:"home",label:"Home",icon:"home"},{key:"search",label:"Search",icon:"search-normal"},{key:"profile",label:"Profile",icon:"user"}]}},{id:"BottomNavigation.underline",title:"Underline on top",props:{variant:"underline",indicatorPosition:"top",activeTab:"home",tabs:[{key:"home",label:"Home",icon:"home"},{key:"inbox",label:"Inbox",icon:"sms"},{key:"settings",label:"Settings",icon:"setting-2"}]}}],usage:{when:["The app has three to five top-level places the person moves between often.","The bar should stay on screen so the person always knows where they are.","A badge should show unread or pending work on a tab."],whenNot:[{text:"There are more than five destinations.",instead:"Drawer"},{text:"The choices switch views inside one screen.",instead:"Tabs"}],do:[{note:"Give every tab a short label, even when it also has an icon.",example:[{component:"BottomNavigation",props:{activeTab:"home",tabs:[{key:"home",label:"Home",icon:"home"},{key:"inbox",label:"Inbox",icon:"sms"}]}}]}],dont:[{note:"Do not hide every label with no accessible name left on the tab.",example:[{component:"BottomNavigation",props:{showLabels:!1,activeTab:"home",tabs:[{key:"home",label:"",icon:"home"},{key:"inbox",label:"",icon:"sms"}]}}]}],a11y:["A tab's label is its accessible name, also when showLabel is false.","The bar stays expanded while a screen reader is on.","The centre action's label is its accessible name and is never drawn."]}});
+"use strict";import{definePhoneMeta}from"../../canvasKit/meta.js";export const meta=definePhoneMeta()({name:"BottomNavigation",marker:null,platforms:["phone"],acceptsChildren:!1,props:{tabs:{type:"array",required:!0,itemFields:{key:{type:"string",required:!0,description:"A stable id for the tab."},label:{type:"string",required:!0,description:"The text under the icon and the accessible name of the tab."},showLabel:{type:"boolean",description:"Draws this tab's label. False hides the text and keeps it as the accessible name."},icon:{type:"icon",required:!0,description:"The tab icon, an icon name or any node."},activeIcon:{type:"icon",description:"The icon drawn while the tab is active."},badge:{type:"stringOrNumber",description:"A number or text drawn on the tab. True draws a dot."}},description:"The tabs, left to right."},centerAction:{type:"object",fields:{label:{type:"string",required:!0,description:"The accessible name of the button. It is never drawn."},icon:{type:"icon",description:"The icon drawn in the filled circle. It defaults to add."},content:{type:"node",description:"Replaces the filled circle entirely with any node."},size:{type:"number",description:"Diameter of the filled circle in pixels."},color:{type:"string",description:"Fill of the circle."},iconColor:{type:"string",description:"Colour of the icon in the circle."},iconSize:{type:"number",description:"Size of the icon in the circle in pixels."},lift:{type:"number",description:"How far the button rises above the centre of the row, in pixels."},gap:{type:"number",description:"Space between the button and the neighbouring tabs, in pixels."}},description:"A button in the middle of the bar that is not a tab."},activeTab:{type:"string",required:!0,description:"The key of the active tab."},showLabels:{type:"boolean",default:!0,description:"Shows the text label under each icon. Expand only labels the active tab."},variant:{type:"enum",values:["pill","underline","floating","bubble","expand","solid","tile"],default:"pill",description:"The look of the bar."},indicatorPosition:{type:"enum",values:["top","bottom"],default:"bottom",description:"Where the active line sits, for the variants that draw a line."},radius:{type:"stringOrNumber",description:"Corner radius of the bar in pixels, or the text pill for fully round ends."},indicatorRadius:{type:"stringOrNumber",description:"Corner radius of the active tab background in pixels, or the text auto to follow the bar.",default:"auto"},elevation:{type:"enum",values:["none","card","elevated","popover","modal","drawer"],description:"The shadow under the bar, as a shadow name or none."},iconSize:{type:"number",description:"Size of every tab icon in pixels."},marginHorizontal:{type:"number",description:"Space between the bar and the left and right screen edges, in pixels."},marginVertical:{type:"number",description:"Space above and below the bar, in pixels."},paddingHorizontal:{type:"number",description:"Space inside the bar between its edges and the tab row, in pixels."},paddingVertical:{type:"number",description:"Space inside the bar above and below the tab row, in pixels."},border:{type:"boolean",description:"Draws a hairline border around the bar."},minimizeOnScroll:{type:"boolean",default:!1,description:"Shrinks the bar to its icons while the person scrolls down and restores it on scroll up."},scrollDirection:{type:"enum",values:["up","down","idle"],default:"idle",description:"The scroll direction of the screen, read only when minimizeOnScroll is on."},accessory:{type:"node",description:"A compact strip tied to the bar, such as a status line."},labelMaxFontScale:{type:"number",description:"The largest text scale the tab label follows."}},omit:["haptic"],role:"navigation",takesAction:["centerAction"],itemsTakeAction:["tabs"],examples:[{id:"BottomNavigation.pill",title:"Pill",props:{variant:"pill",activeTab:"home",tabs:[{key:"home",label:"Home",icon:"home"},{key:"search",label:"Search",icon:"search-normal"},{key:"inbox",label:"Inbox",icon:"sms",badge:3},{key:"profile",label:"Profile",icon:"user"}]}},{id:"BottomNavigation.floating",title:"Floating",props:{variant:"floating",elevation:"card",activeTab:"search",tabs:[{key:"home",label:"Home",icon:"home"},{key:"search",label:"Search",icon:"search-normal"},{key:"profile",label:"Profile",icon:"user"}]}},{id:"BottomNavigation.underline",title:"Underline on top",props:{variant:"underline",indicatorPosition:"top",activeTab:"home",tabs:[{key:"home",label:"Home",icon:"home"},{key:"inbox",label:"Inbox",icon:"sms"},{key:"settings",label:"Settings",icon:"setting-2"}]}}],usage:{when:["The app has three to five top-level places the person moves between often.","The bar should stay on screen so the person always knows where they are.","A badge should show unread or pending work on a tab."],whenNot:[{text:"There are more than five destinations.",instead:"Drawer"},{text:"The choices switch views inside one screen.",instead:"Tabs"}],do:[{note:"Give every tab a short label, even when it also has an icon.",example:[{component:"BottomNavigation",props:{activeTab:"home",tabs:[{key:"home",label:"Home",icon:"home"},{key:"inbox",label:"Inbox",icon:"sms"}]}}]}],dont:[{note:"Do not hide every label with no accessible name left on the tab.",example:[{component:"BottomNavigation",props:{showLabels:!1,activeTab:"home",tabs:[{key:"home",label:"",icon:"home"},{key:"inbox",label:"",icon:"sms"}]}}]}],a11y:["A tab's label is its accessible name, also when showLabel is false.","The bar stays expanded while a screen reader is on.","The centre action's label is its accessible name and is never drawn."]}});

package/lib/module/components/Tabs/Tabs.meta.js

@@ -1 +1 @@
-"use strict";import{definePhoneMeta}from"../../canvasKit/meta.js";export const meta=definePhoneMeta()({name:"Tabs",marker:null,platforms:["phone"],acceptsChildren:!1,props:{tabs:{type:"array",required:!0,description:"The tabs in order.",itemFields:{key:{type:"string",required:!0,description:"The tab's stable identifier."},label:{type:"string",required:!0,description:"The tab's text."},icon:{type:"icon",description:"A leading icon drawn in the label colour."},badge:{type:"stringOrNumber",description:"A count or text drawn after the label."},disabled:{type:"boolean",description:"Blocks the tab."}}},activeKey:{type:"string",required:!0,description:"The key of the selected tab."},variant:{type:"enum",values:["underline","pills","segmented"],default:"underline",description:"A sliding underline, a tinted pill, or a filled track with a thumb."},radius:{type:"enumOrNumber",values:["none","sm","md","lg","xl","pill"],description:"The corner radius of the track, pill or underline ends."},size:{type:"enum",values:["sm","md","lg"],default:"md",description:"Scales the text, tab padding and icon together."},scrollable:{type:"boolean",default:!1,description:"Scrolls a long tab list sideways instead of sharing the width equally."},align:{type:"enum",values:["left","center"],default:"left",description:"The tab alignment when the list is not scrollable."},accessibilityLabel:{type:"string",description:"The screen reader name of the tab list."}},omit:["haptic","progress"],examples:[{id:"Tabs.default",title:"Underline with icons",props:{tabs:[{key:"home",label:"Home",icon:"home"},{key:"feed",label:"Feed",icon:"activity"},{key:"team",label:"Team",icon:"people"},{key:"alerts",label:"Alerts",icon:"notification"}],activeKey:"home"}},{id:"Tabs.pills",title:"Pills",props:{variant:"pills",tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"},{key:"alerts",label:"Alerts"}],activeKey:"feed"}},{id:"Tabs.segmented",title:"Segmented with a large radius",props:{variant:"segmented",radius:"lg",tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"}],activeKey:"home"}},{id:"Tabs.badges",title:"Badges and a disabled tab",props:{tabs:[{key:"inbox",label:"Inbox",badge:3},{key:"sent",label:"Sent"},{key:"drafts",label:"Drafts",badge:12},{key:"archived",label:"Archived",disabled:!0}],activeKey:"inbox"}}],usage:{when:["Switch between sections of one screen, such as Overview, Activity and Team.","Show a long list of sections that scrolls sideways."],whenNot:[{text:"Choosing a value, such as a filter or a unit.",instead:"SegmentedControl"},{text:"An ordered flow where completion state matters.",instead:"Stepper"}],do:[{note:"Keep labels to one or two words so every tab fits.",example:[{component:"Tabs",props:{tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"}],activeKey:"home"}}]},{note:"Use scrollable when the labels no longer fit the width.",example:[{component:"Tabs",props:{scrollable:!0,tabs:[{key:"overview",label:"Overview"},{key:"activity",label:"Activity"},{key:"team",label:"Team"},{key:"settings",label:"Settings"},{key:"profile",label:"Profile"}],activeKey:"overview"}}]}],dont:[{note:"Do not nest tab bars.",example:[{component:"Tabs",props:{tabs:[{key:"main",label:"Main"},{key:"sub",label:"Sub"}],activeKey:"main"}}]},{note:"Do not use more than five tabs without scrolling.",example:[{component:"Tabs",props:{tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"},{key:"settings",label:"Settings"},{key:"profile",label:"Profile"},{key:"help",label:"Help"}],activeKey:"home"}}]}],a11y:["The bar reads as a tab list and each tab as a tab with its selected state, so keep labels meaningful.","A disabled tab is announced as unavailable; do not hide a section behind one without saying why."]}});
+"use strict";import{definePhoneMeta}from"../../canvasKit/meta.js";export const meta=definePhoneMeta()({name:"Tabs",marker:null,platforms:["phone"],acceptsChildren:!1,props:{tabs:{type:"array",required:!0,description:"The tabs in order.",itemFields:{key:{type:"string",required:!0,description:"The tab's stable identifier."},label:{type:"string",required:!0,description:"The tab's text."},icon:{type:"icon",description:"A leading icon drawn in the label colour."},badge:{type:"stringOrNumber",description:"A count or text drawn after the label."},disabled:{type:"boolean",description:"Blocks the tab."}}},activeKey:{type:"string",required:!0,description:"The key of the selected tab."},variant:{type:"enum",values:["underline","pills","segmented"],default:"underline",description:"A sliding underline, a tinted pill, or a filled track with a thumb."},radius:{type:"enumOrNumber",values:["none","sm","md","lg","xl","pill"],description:"The corner radius of the track, pill or underline ends."},size:{type:"enum",values:["sm","md","lg"],default:"md",description:"Scales the text, tab padding and icon together."},scrollable:{type:"boolean",default:!1,description:"Scrolls a long tab list sideways instead of sharing the width equally."},align:{type:"enum",values:["left","center"],default:"left",description:"The tab alignment when the list is not scrollable."},accessibilityLabel:{type:"string",description:"The screen reader name of the tab list."}},omit:["haptic","progress"],itemsTakeAction:["tabs"],examples:[{id:"Tabs.default",title:"Underline with icons",props:{tabs:[{key:"home",label:"Home",icon:"home"},{key:"feed",label:"Feed",icon:"activity"},{key:"team",label:"Team",icon:"people"},{key:"alerts",label:"Alerts",icon:"notification"}],activeKey:"home"}},{id:"Tabs.pills",title:"Pills",props:{variant:"pills",tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"},{key:"alerts",label:"Alerts"}],activeKey:"feed"}},{id:"Tabs.segmented",title:"Segmented with a large radius",props:{variant:"segmented",radius:"lg",tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"}],activeKey:"home"}},{id:"Tabs.badges",title:"Badges and a disabled tab",props:{tabs:[{key:"inbox",label:"Inbox",badge:3},{key:"sent",label:"Sent"},{key:"drafts",label:"Drafts",badge:12},{key:"archived",label:"Archived",disabled:!0}],activeKey:"inbox"}}],usage:{when:["Switch between sections of one screen, such as Overview, Activity and Team.","Show a long list of sections that scrolls sideways."],whenNot:[{text:"Choosing a value, such as a filter or a unit.",instead:"SegmentedControl"},{text:"An ordered flow where completion state matters.",instead:"Stepper"}],do:[{note:"Keep labels to one or two words so every tab fits.",example:[{component:"Tabs",props:{tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"}],activeKey:"home"}}]},{note:"Use scrollable when the labels no longer fit the width.",example:[{component:"Tabs",props:{scrollable:!0,tabs:[{key:"overview",label:"Overview"},{key:"activity",label:"Activity"},{key:"team",label:"Team"},{key:"settings",label:"Settings"},{key:"profile",label:"Profile"}],activeKey:"overview"}}]}],dont:[{note:"Do not nest tab bars.",example:[{component:"Tabs",props:{tabs:[{key:"main",label:"Main"},{key:"sub",label:"Sub"}],activeKey:"main"}}]},{note:"Do not use more than five tabs without scrolling.",example:[{component:"Tabs",props:{tabs:[{key:"home",label:"Home"},{key:"feed",label:"Feed"},{key:"team",label:"Team"},{key:"settings",label:"Settings"},{key:"profile",label:"Profile"},{key:"help",label:"Help"}],activeKey:"home"}}]}],a11y:["The bar reads as a tab list and each tab as a tab with its selected state, so keep labels meaningful.","A disabled tab is announced as unavailable; do not hide a section behind one without saying why."]}});

package/lib/typescript/commonjs/canvasKit/meta.d.ts

@@ -22,7 +22,13 @@ type PropFor<T, Optional extends boolean> = MetaProp & (Optional extends true ?
 type ExampleValue<T> = T extends Date ? string : T extends readonly (infer U)[] ? readonly ExampleValue<U>[] : T extends (...args: never[]) => unknown ? T : T extends object ? {
     [K in keyof T]: ExampleValue<T[K]>;
 } : T;
-export interface PhoneMeta<P, O extends KitPropKey<P>, F extends KitPropKey<P> = never> extends Omit<ComponentMeta, "props" | "examples" | "omit" | "component" | "fixedProps"> {
+type ListKey<P> = {
+    [K in KitPropKey<P>]: NonNullable<P[K]> extends readonly unknown[] ? K : never;
+}[KitPropKey<P>];
+type ObjectKey<P> = {
+    [K in KitPropKey<P>]: NonNullable<P[K]> extends readonly unknown[] ? never : NonNullable<P[K]> extends (...args: never[]) => unknown ? never : NonNullable<P[K]> extends object ? K : never;
+}[KitPropKey<P>];
+export interface PhoneMeta<P, O extends KitPropKey<P>, F extends KitPropKey<P> = never> extends Omit<ComponentMeta, "props" | "examples" | "omit" | "component" | "fixedProps" | "actions" | "takesAction" | "itemsTakeAction"> {
     /** The export this description draws, when it is not `name`: one export described once per mode. */
     component?: string;
     /** Props the kit sets on every placement; they are neither shown nor set by an example. */
@@ -32,6 +38,12 @@ export interface PhoneMeta<P, O extends KitPropKey<P>, F extends KitPropKey<P> =
     props: {
         [K in Exclude<KitPropKey<P>, O | F>]: PropFor<P[K], Partial<Pick<P, K>> extends Pick<P, K> ? true : false>;
     };
+    /** The part's role in the manifest. */
+    role?: "title" | "navigation";
+    /** Object props that each carry one action; in play a tap on one runs the stored action. */
+    takesAction?: readonly ObjectKey<P>[];
+    /** Array props whose items each carry an action. */
+    itemsTakeAction?: readonly ListKey<P>[];
     /** Kit props deliberately not shown, such as object or render props no kit type fits. */
     omit: readonly O[];
     examples: readonly (Omit<MetaExample, "id" | "props"> & {

package/lib/typescript/module/canvasKit/meta.d.ts

@@ -22,7 +22,13 @@ type PropFor<T, Optional extends boolean> = MetaProp & (Optional extends true ?
 type ExampleValue<T> = T extends Date ? string : T extends readonly (infer U)[] ? readonly ExampleValue<U>[] : T extends (...args: never[]) => unknown ? T : T extends object ? {
     [K in keyof T]: ExampleValue<T[K]>;
 } : T;
-export interface PhoneMeta<P, O extends KitPropKey<P>, F extends KitPropKey<P> = never> extends Omit<ComponentMeta, "props" | "examples" | "omit" | "component" | "fixedProps"> {
+type ListKey<P> = {
+    [K in KitPropKey<P>]: NonNullable<P[K]> extends readonly unknown[] ? K : never;
+}[KitPropKey<P>];
+type ObjectKey<P> = {
+    [K in KitPropKey<P>]: NonNullable<P[K]> extends readonly unknown[] ? never : NonNullable<P[K]> extends (...args: never[]) => unknown ? never : NonNullable<P[K]> extends object ? K : never;
+}[KitPropKey<P>];
+export interface PhoneMeta<P, O extends KitPropKey<P>, F extends KitPropKey<P> = never> extends Omit<ComponentMeta, "props" | "examples" | "omit" | "component" | "fixedProps" | "actions" | "takesAction" | "itemsTakeAction"> {
     /** The export this description draws, when it is not `name`: one export described once per mode. */
     component?: string;
     /** Props the kit sets on every placement; they are neither shown nor set by an example. */
@@ -32,6 +38,12 @@ export interface PhoneMeta<P, O extends KitPropKey<P>, F extends KitPropKey<P> =
     props: {
         [K in Exclude<KitPropKey<P>, O | F>]: PropFor<P[K], Partial<Pick<P, K>> extends Pick<P, K> ? true : false>;
     };
+    /** The part's role in the manifest. */
+    role?: "title" | "navigation";
+    /** Object props that each carry one action; in play a tap on one runs the stored action. */
+    takesAction?: readonly ObjectKey<P>[];
+    /** Array props whose items each carry an action. */
+    itemsTakeAction?: readonly ListKey<P>[];
     /** Kit props deliberately not shown, such as object or render props no kit type fits. */
     omit: readonly O[];
     examples: readonly (Omit<MetaExample, "id" | "props"> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.101.1",
+  "version": "0.101.3",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -86,8 +86,8 @@
     "react-native-safe-area-context": ">=5.4.0",
     "react-native-svg": ">=15.0.0",
     "react-native-worklets": ">=0.10.0",
-    "@webority/mobile-core": "0.101.1",
-    "@webority/canvas-kit": "0.101.1"
+    "@webority/canvas-kit": "0.101.3",
+    "@webority/mobile-core": "0.101.3"
   },
   "peerDependenciesMeta": {
     "@webority/canvas-kit": {
@@ -148,10 +148,10 @@
     "react-test-renderer": "19.2.8",
     "rimraf": "6.1.3",
     "typescript": "5.9.3",
-    "@webority/mobile-core": "0.101.1",
-    "@webority/canvas-kit": "0.101.1",
+    "@webority/canvas-kit": "0.101.3",
     "@webority/mobile-dev": "0.0.0",
-    "@webority/tokens": "0.101.1"
+    "@webority/mobile-core": "0.101.3",
+    "@webority/tokens": "0.101.3"
   },
   "scripts": {
     "build": "bob build && node ../mobile-dev/scripts/minify-lib.mjs && node -e \"require('node:fs').rmSync('dist/canvas-kit',{recursive:true,force:true})\" && node ../canvas-kit/dist/cli.js build --config canvas-kit.json --out dist/canvas-kit",