@kanso-labs/kanso-ui 0.43.7 → 0.44.0

package/dist/indicator/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","typography","THICKNESS","GAP","DETERMINATE_EASING","IndicatorTone","FORCED_COLORS","_temp","kzqmXN","indicatorStyles","active","k6CgDc","kWkggS","kZKoxP","kaIpWk","kB7OPa","kmuXW","kIyJzY","k1ekBW","kAMwcw","$$css","activeAt","percentage","val","undefined","inheritActive","kjVXCG","inheritTrack","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","labels","kGNEyG","k1xSpc","kOIVth","kjj79g","labelText","k7Eaqz","kHjlTd","line","negativeActive","positiveActive","root","kXwgrk","stop","track","kzQI83","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","trackSolid","value","keTefX","khDVqt"],"sources":["../../src/indicator/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The line the progress indicators page draws, and the label row above it,\n// shared by the two components that draw one: ProgressIndicator, which adds\n// the ring and the two indeterminate presentations on top, and Meter, which\n// is this and nothing else.\n//\n// The page's anatomy names three parts — the active indicator in primary,\n// the track in secondary container, and the stop indicator in primary at the\n// end — at 4dp thick with 4dp between them. The row is a flex line and the\n// two gaps are its `gap`. The active indicator takes the value's share of\n// what the two gaps and the stop leave, and the track takes the rest, so the\n// stop ends the row at every value.\n//\n// Under forced colours every part here is a background, which that mode\n// paints in a system colour, so the line drew nothing at all. The active\n// indicator and the stop take `Highlight` there, as the slider's filled part\n// does, and the track keeps a `CanvasText` edge, drawn as an outline inside\n// it so it takes no room from the line.\n//\n// `tone` is the line's colour. `primary` is the page's own pair, and it is\n// what a progress indicator draws. `negative` and `positive` swap the active\n// indicator and the stop indicator alone, leaving the track in secondary\n// container, so a column of meters reads as one scale with bars of different\n// colours rather than as several unrelated gauges. `inherit` instead takes\n// the colour around it for both, and gives the track a quarter of it, which\n// is what makes a ring legible inside a filled button, where the page's\n// primary is the button's own fill.\n//\n// Apart from ./index.tsx so that file exports components alone, which is\n// what keeps fast refresh working for it.\n\n/** The thickness of every part, and the room the page leaves between them. */\nexport const THICKNESS = 4;\nexport const GAP = 4;\n\n/**\n * What the page gives a value that changes to move over. The duration is the\n * motion scale's own step rather than a constant beside it — src/tokens/\n * values.ts keeps a number in JS only where one has to reach\n * `element.animate()` or a timer, and nothing here does.\n */\nexport const DETERMINATE_EASING = 'cubic-bezier(0.4, 0, 0.6, 1)';\nexport type IndicatorTone = 'inherit' | 'negative' | 'positive' | 'primary';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst _temp = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nexport const indicatorStyles = {\n  active: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xnety89 x1jzqe4\",\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x1j4rzew\",\n    kAMwcw: \"x16pyfke\",\n    $$css: true\n  },\n  activeAt: (percentage: number) => [_temp, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc((100% - ${GAP * 2 + THICKNESS}px) * ${percentage / 100})`)\n  }],\n  inheritActive: {\n    kWkggS: \"xtwfq29 x1jzqe4\",\n    kjVXCG: \"x73je2i xbabvq0\",\n    $$css: true\n  },\n  inheritTrack: {\n    kWkggS: \"xtp5tyh\",\n    kjVXCG: \"xy3ggvv x8jos32\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labels: {\n    kGNEyG: \"x1pha0wt\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  labelText: {\n    k7Eaqz: \"xeuugli\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  line: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xqu0tyb\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x1jnr06f\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  negativeActive: {\n    kWkggS: \"xmjwayr x1jzqe4\",\n    $$css: true\n  },\n  positiveActive: {\n    kWkggS: \"x1xov01w x1jzqe4\",\n    $$css: true\n  },\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  stop: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kZKoxP: \"xqu0tyb\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x51ohtg\",\n    $$css: true\n  },\n  track: {\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kjBf7l: \"x3teovq\",\n    kInvED: \"xvr1dqx\",\n    k3XXqK: \"x815t2r\",\n    kMeerF: \"xcthrzx\",\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  },\n  trackSolid: {\n    kWkggS: \"x15dekr4\",\n    $$css: true\n  },\n  value: {\n    kmuXW: \"x2lah0s\",\n    keTefX: \"xvc5jky\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  }\n};"],"mappings":";AAoDA,MAAMW,QAAQ;CACZC,QAAQ;CACR,SAAS;AACX;AACA,MAAaC,kBAAkB;CAC7BC,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,WAAWC,eAAuB,CAACf,OAAO,EACxC,oBAAmBgB,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAW,wBAA4CF,aAAa,IAAG,EAAG,EACjK,CAAC;CACDG,eAAe;EACbb,QAAQ;EACRc,QAAQ;EACRN,OAAO;CACT;CACAO,cAAc;EACZf,QAAQ;EACRc,QAAQ;EACRN,OAAO;CACT;CACAQ,OAAO;EACLb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAe,QAAQ;EACNC,QAAQ;EACRrB,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRtB,OAAO;CACT;CACAuB,MAAM;EACJP,QAAQ;EACRvB,QAAQ;EACRE,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACR9B,QAAQ;EACRY,OAAO;CACT;CACAwB,gBAAgB;EACdhC,QAAQ;EACRQ,OAAO;CACT;CACAyB,gBAAgB;EACdjC,QAAQ;EACRQ,OAAO;CACT;CACA0B,MAAM;EACJ/B,QAAQ;EACRsB,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACR9B,QAAQ;EACRY,OAAO;CACT;CACA4B,MAAM;EACJpC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPR,QAAQ;EACRY,OAAO;CACT;CACA6B,OAAO;EACLpC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRsB,QAAQ;EACRa,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnC,OAAO;CACT;CACAoC,YAAY;EACV5C,QAAQ;EACRQ,OAAO;CACT;CACAqC,OAAO;EACLzC,OAAO;EACP0C,QAAQ;EACRC,QAAQ;EACRvC,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","typography","THICKNESS","GAP","DETERMINATE_EASING","IndicatorTone","FORCED_COLORS","_temp","kzqmXN","indicatorStyles","active","k6CgDc","kWkggS","kZKoxP","kaIpWk","kB7OPa","kmuXW","kIyJzY","k1ekBW","kAMwcw","$$css","activeAt","percentage","val","undefined","inheritActive","kjVXCG","inheritTrack","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","labels","kGNEyG","k1xSpc","kOIVth","kjj79g","labelText","k7Eaqz","kHjlTd","line","negativeActive","positiveActive","root","kXwgrk","stop","track","kzQI83","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","trackSolid","value","keTefX","khDVqt"],"sources":["../../src/indicator/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The line the progress indicators page draws, and the label row above it,\n// shared by the two components that draw one: ProgressIndicator, which adds\n// the ring and the two indeterminate presentations on top, and Meter, which\n// is this and nothing else.\n//\n// The page's anatomy names three parts — the active indicator in primary,\n// the track in secondary container, and the stop indicator in primary at the\n// end — at 4dp thick with 4dp between them. The row is a flex line and the\n// two gaps are its `gap`. The active indicator takes the value's share of\n// what the two gaps and the stop leave, and the track takes the rest, so the\n// stop ends the row at every value.\n//\n// Under forced colours every part here is a background, which that mode\n// paints in a system colour, so the line drew nothing at all. The active\n// indicator and the stop take `Highlight` there, as the slider's filled part\n// does, and the track keeps a `CanvasText` edge, drawn as an outline inside\n// it so it takes no room from the line.\n//\n// `tone` is the line's colour. `primary` is the page's own pair, and it is\n// what a progress indicator draws. `negative` and `positive` swap the active\n// indicator and the stop indicator alone, leaving the track in secondary\n// container, so a column of meters reads as one scale with bars of different\n// colours rather than as several unrelated gauges. `inherit` instead takes\n// the colour around it for both, and gives the track a quarter of it, which\n// is what makes a ring legible inside a filled button, where the page's\n// primary is the button's own fill.\n//\n// Apart from ./index.tsx so that file exports components alone, which is\n// what keeps fast refresh working for it.\n\n/** The thickness of every part, and the room the page leaves between them. */\nexport const THICKNESS = 4;\nexport const GAP = 4;\n\n/**\n * What the page gives a value that changes to move over. The duration is the\n * motion scale's own step rather than a constant beside it — src/tokens/\n * values.ts keeps a number in JS only where one has to reach\n * `element.animate()` or a timer, and nothing here does.\n */\nexport const DETERMINATE_EASING = 'cubic-bezier(0.4, 0, 0.6, 1)';\nexport type IndicatorTone = 'inherit' | 'negative' | 'positive' | 'primary';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst _temp = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nexport const indicatorStyles = {\n  active: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xnety89 x1jzqe4\",\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x1j4rzew\",\n    kAMwcw: \"x16pyfke\",\n    $$css: true\n  },\n  activeAt: (percentage: number) => [_temp, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc((100% - ${GAP * 2 + THICKNESS}px) * ${percentage / 100})`)\n  }],\n  inheritActive: {\n    kWkggS: \"xtwfq29 x1jzqe4\",\n    kjVXCG: \"x73je2i xbabvq0\",\n    $$css: true\n  },\n  inheritTrack: {\n    kWkggS: \"xtp5tyh\",\n    kjVXCG: \"xy3ggvv x8jos32\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labels: {\n    kGNEyG: \"x1pha0wt\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  labelText: {\n    k7Eaqz: \"xeuugli\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  line: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xqu0tyb\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x1jnr06f\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  negativeActive: {\n    kWkggS: \"xmjwayr x1jzqe4\",\n    $$css: true\n  },\n  positiveActive: {\n    kWkggS: \"x1xov01w x1jzqe4\",\n    $$css: true\n  },\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  stop: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kZKoxP: \"xqu0tyb\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x51ohtg\",\n    $$css: true\n  },\n  track: {\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kjBf7l: \"x3teovq\",\n    kInvED: \"xvr1dqx\",\n    k3XXqK: \"x815t2r\",\n    kMeerF: \"xcthrzx\",\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  },\n  trackSolid: {\n    kWkggS: \"x15dekr4\",\n    $$css: true\n  },\n  value: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x126z3so\",\n    keTefX: \"xvc5jky\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  }\n};"],"mappings":";AAoDA,MAAMW,QAAQ;CACZC,QAAQ;CACR,SAAS;AACX;AACA,MAAaC,kBAAkB;CAC7BC,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,WAAWC,eAAuB,CAACf,OAAO,EACxC,oBAAmBgB,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAW,wBAA4CF,aAAa,IAAG,EAAG,EACjK,CAAC;CACDG,eAAe;EACbb,QAAQ;EACRc,QAAQ;EACRN,OAAO;CACT;CACAO,cAAc;EACZf,QAAQ;EACRc,QAAQ;EACRN,OAAO;CACT;CACAQ,OAAO;EACLb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAe,QAAQ;EACNC,QAAQ;EACRrB,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRtB,OAAO;CACT;CACAuB,MAAM;EACJP,QAAQ;EACRvB,QAAQ;EACRE,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACR9B,QAAQ;EACRY,OAAO;CACT;CACAwB,gBAAgB;EACdhC,QAAQ;EACRQ,OAAO;CACT;CACAyB,gBAAgB;EACdjC,QAAQ;EACRQ,OAAO;CACT;CACA0B,MAAM;EACJ/B,QAAQ;EACRsB,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACR9B,QAAQ;EACRY,OAAO;CACT;CACA4B,MAAM;EACJpC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPR,QAAQ;EACRY,OAAO;CACT;CACA6B,OAAO;EACLpC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRsB,QAAQ;EACRa,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnC,OAAO;CACT;CACAoC,YAAY;EACV5C,QAAQ;EACRQ,OAAO;CACT;CACAqC,OAAO;EACLrB,QAAQ;EACRC,QAAQ;EACRrB,OAAO;EACPsB,QAAQ;EACRoB,QAAQ;EACRC,QAAQ;EACRvC,OAAO;CACT;AACF"}

package/dist/keycap/context.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+//#region src/keycap/context.ts
+const KeycapToneContext = createContext("neutral");
+//#endregion
+export { KeycapToneContext };
+
+//# sourceMappingURL=context.js.map

package/dist/keycap/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":["createContext","KeycapTone","KeycapToneContext"],"sources":["../../src/keycap/context.ts"],"sourcesContent":["import { createContext } from 'react'\n\n// Whether a Keycap draws in its own colours or in the colour of the text\n// around it. A selected or disabled menu item asks for the second around its\n// shortcut, so a keycap there takes the row's colour onto the selected\n// container and fades with a disabled label, rather than staying dark and\n// boxed on a row that has changed around it. Apart from the component so its\n// module exports components alone, which is what keeps fast refresh working\n// for it.\n\n/** `neutral` is the keycap's own on surface and outline; `inherit` is the\n * colour around it, for its text and its rule alike. */\ntype KeycapTone = 'inherit' | 'neutral'\n\nconst KeycapToneContext = createContext<KeycapTone>('neutral')\n\nexport type { KeycapTone }\n\nexport { KeycapToneContext }\n"],"mappings":";;AAcA,MAAME,oBAAoBF,cAA0B,SAAS"}

package/dist/navigation/index.d.ts

@@ -5,10 +5,16 @@ type NavigationItemProps = {
   /**
    * A badge on the icon: `true` for the badges page's small dot, a number
    * for the large badge holding it. The badge is hidden from assistive
-   * technology, so say what it says in the destination's `aria-label` too —
-   * "First item, 3 new".
+   * technology, so say what it says in `badgeLabel`.
    */
   badge?: boolean | number;
+  /**
+   * What the badge says, in words and in the reader's language — "3 new",
+   * or "new" for the dot. It follows the label in the destination's
+   * accessible name, "First item 3 new", and is read only while the badge is
+   * drawn.
+   */
+  badgeLabel?: string;
   /** The destination's name, drawn as its label. */
   children: ReactNode;
   /** A function may compute the class from the destination's render state. */
@@ -20,6 +26,14 @@ type NavigationItemProps = {
   href: string;
   /** The destination's icon, at the pages' 24dp. */
   icon: ReactNode;
+  /**
+   * Whether this is the current destination, in place of matching its
+   * `href` against the bar's or the rail's `selectedRoute`. Pass it for a
+   * route nested under the destination, `/first/42` under `/first`, which
+   * the exact match leaves without a current destination; `false` turns
+   * the match off. Left out, the match decides.
+   */
+  isCurrent?: boolean;
   /** A function may compute the style from the destination's render state. */
   style?: LinkProps['style'];
 } & Omit<LinkProps, 'children' | 'className' | 'href' | 'style'>;

package/dist/navigation/index.js

@@ -3,10 +3,12 @@ import { mergeStatefulStyles } from "../styles/merge.js";
 import { BadgeMarkContext } from "../badge/index.js";
 import Badge from "../components/badge/index.js";
 import { focus } from "../styles/focus.js";
+import { useRipple } from "../hooks/useRipple.js";
+import { useClippedTitle } from "../hooks/useClippedTitle.js";
 import { NavigationContext } from "./context.js";
-import { barItemStyles, collapsedItemStyles, crampedBarItemStyles, expandedItemStyles, navigationItemStyles } from "./styles.js";
+import { barItemStyles, collapsedItemStyles, crampedBarItemStyles, expandedItemStyles, navigationItemStyles, navigationListStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { useContext } from "react";
+import { useContext, useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "react-aria-components";
 //#region src/navigation/index.tsx
@@ -14,7 +16,9 @@ const FORMS = {
 	bar: barItemStyles,
 	barCramped: {
 		...collapsedItemStyles,
-		item: crampedBarItemStyles.item
+		item: crampedBarItemStyles.item,
+		list: crampedBarItemStyles.list,
+		listItem: crampedBarItemStyles.listItem
 	},
 	collapsed: collapsedItemStyles,
 	expanded: expandedItemStyles
@@ -39,9 +43,9 @@ const RINGS = {
 };
 function itemClasses(form, isCurrent) {
 	const styles = FORMS[form];
-	return (state) => props(navigationItemStyles.link, styles.item, isCurrent && styles.itemCurrent, state.isHovered && (isCurrent ? styles.itemHoveredCurrent : styles.itemHovered), state.isFocusVisible && (isCurrent ? styles.itemFocusedCurrent : styles.itemFocused), state.isPressed && (isCurrent ? styles.itemPressedCurrent : styles.itemPressed), state.isFocusVisible && RINGS[form].item, state.isDisabled && navigationItemStyles.itemDisabled);
+	return (state) => props(navigationItemStyles.link, navigationItemStyles.fade, styles.item, isCurrent && styles.itemCurrent, state.isHovered && (isCurrent ? styles.itemHoveredCurrent : styles.itemHovered), state.isFocusVisible && (isCurrent ? styles.itemFocusedCurrent : styles.itemFocused), state.isPressed && (isCurrent ? styles.itemPressedCurrent : styles.itemPressed), state.isFocusVisible && RINGS[form].item, state.isDisabled && navigationItemStyles.itemDisabled);
 }
-function itemContent(form, isCurrent, badge, icon, label) {
+function itemContent(form, isCurrent, badge, icon, label, naming, ripple) {
 	const styles = FORMS[form];
 	const glyph = badge === void 0 || badge === false ? icon : /* @__PURE__ */ jsx(BadgeMarkContext, {
 		value: styles.badgeMark,
@@ -50,14 +54,23 @@ function itemContent(form, isCurrent, badge, icon, label) {
 			children: icon
 		})
 	});
-	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-		...props(navigationItemStyles.pill, styles.indicator, isCurrent && styles.indicatorCurrent, state.isHovered && (isCurrent ? styles.indicatorHoveredCurrent : styles.indicatorHovered), state.isFocusVisible && (isCurrent ? styles.indicatorFocusedCurrent : styles.indicatorFocused), state.isPressed && (isCurrent ? styles.indicatorPressedCurrent : styles.indicatorPressed), state.isFocusVisible && RINGS[form].indicator, state.isDisabled && navigationItemStyles.itemDisabled),
-		children: /* @__PURE__ */ jsx("span", {
-			...props(navigationItemStyles.icon),
-			children: glyph
-		})
-	}), /* @__PURE__ */ jsx("span", {
-		...props(navigationItemStyles.label, styles.label, isCurrent && styles.labelCurrent, state.isDisabled && navigationItemStyles.itemDisabled),
+	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+		...props(navigationItemStyles.pill, navigationItemStyles.fade, styles.indicator, isCurrent && styles.indicatorCurrent, state.isHovered && (isCurrent ? styles.indicatorHoveredCurrent : styles.indicatorHovered), state.isFocusVisible && (isCurrent ? styles.indicatorFocusedCurrent : styles.indicatorFocused), state.isPressed && (isCurrent ? styles.indicatorPressedCurrent : styles.indicatorPressed), state.isFocusVisible && RINGS[form].indicator, state.isDisabled && navigationItemStyles.itemDisabled),
+		children: [
+			ripple,
+			/* @__PURE__ */ jsx("span", {
+				...props(navigationItemStyles.icon),
+				children: glyph
+			}),
+			naming && /* @__PURE__ */ jsx("span", {
+				hidden: true,
+				id: naming.badgeId,
+				children: naming.badgeLabel
+			})
+		]
+	}), /* @__PURE__ */ jsx(NavigationLabel, {
+		id: naming?.labelId,
+		styling: props(navigationItemStyles.label, navigationItemStyles.fade, styles.label, isCurrent && styles.labelCurrent, state.isDisabled && navigationItemStyles.itemDisabled),
 		children: label
 	})] });
 }
@@ -66,43 +79,131 @@ function itemContent(form, isCurrent, badge, icon, label) {
 * it is the current one, the active indicator behind them.
 */
 function NavigationItem(t0) {
-	const $ = c(13);
-	const { badge, children, href, icon, ...props } = t0;
+	const $ = c(21);
+	const { badge, badgeLabel, children, href, icon, isCurrent: isCurrentProp, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, ...props$1 } = t0;
 	const { form, selectedRoute } = useContext(NavigationContext);
-	const isCurrent = selectedRoute !== void 0 && href === selectedRoute;
+	let t1;
+	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
+		t1 = {
+			onClick,
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[0] = onClick;
+		$[1] = onContextMenu;
+		$[2] = onPointerCancel;
+		$[3] = onPointerDown;
+		$[4] = onPointerLeave;
+		$[5] = onPointerUp;
+		$[6] = t1;
+	} else t1 = $[6];
+	const ripple = useRipple(props$1.isDisabled !== true, t1);
+	const isCurrent = isCurrentProp ?? (selectedRoute !== void 0 && href === selectedRoute);
+	const labelId = useId();
+	const badgeId = useId();
+	const naming = badge !== void 0 && badge !== false && badgeLabel !== void 0 && props$1["aria-label"] === void 0 && props$1["aria-labelledby"] === void 0 ? {
+		badgeId,
+		badgeLabel,
+		labelId
+	} : void 0;
+	let t2;
+	if ($[7] !== form) {
+		t2 = props(navigationListStyles.item, FORMS[form].listItem);
+		$[7] = form;
+		$[8] = t2;
+	} else t2 = $[8];
 	const T0 = Link;
-	const t1 = isCurrent ? "page" : void 0;
-	const t2 = mergeStatefulStyles(itemClasses(form, isCurrent), props);
-	let t3;
-	if ($[0] !== badge || $[1] !== children || $[2] !== form || $[3] !== icon || $[4] !== isCurrent) {
-		t3 = itemContent(form, isCurrent, badge, icon, children);
-		$[0] = badge;
-		$[1] = children;
-		$[2] = form;
-		$[3] = icon;
-		$[4] = isCurrent;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== T0 || $[7] !== href || $[8] !== props || $[9] !== t1 || $[10] !== t2 || $[11] !== t3) {
-		t4 = /* @__PURE__ */ jsx(T0, {
-			"aria-current": t1,
+	const t3 = isCurrent ? "page" : void 0;
+	const t4 = naming && `${naming.labelId} ${naming.badgeId}`;
+	const t5 = ripple.handlers;
+	const t6 = mergeStatefulStyles(itemClasses(form, isCurrent), props$1);
+	const t7 = itemContent(form, isCurrent, badge, icon, children, naming, ripple.surface);
+	let t8;
+	if ($[9] !== T0 || $[10] !== href || $[11] !== props$1 || $[12] !== ripple.handlers || $[13] !== t3 || $[14] !== t4 || $[15] !== t6 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T0, {
+			"aria-current": t3,
+			"aria-labelledby": t4,
 			href,
-			...props,
+			...t5,
+			...props$1,
+			...t6,
+			children: t7
+		});
+		$[9] = T0;
+		$[10] = href;
+		$[11] = props$1;
+		$[12] = ripple.handlers;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t2 || $[19] !== t8) {
+		t9 = /* @__PURE__ */ jsx("li", {
 			...t2,
-			children: t3
+			children: t8
+		});
+		$[18] = t2;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	return t9;
+}
+function NavigationLabel(t0) {
+	const $ = c(5);
+	const { children, id, styling } = t0;
+	const clipped = useClippedTitle(children);
+	let t1;
+	if ($[0] !== children || $[1] !== clipped || $[2] !== id || $[3] !== styling) {
+		t1 = /* @__PURE__ */ jsx("span", {
+			...clipped,
+			id,
+			...styling,
+			children
+		});
+		$[0] = children;
+		$[1] = clipped;
+		$[2] = id;
+		$[3] = styling;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+/**
+* The list a bar or a rail holds its destinations in, laid out as `layout`
+* says, the bar's row or the rail's column, with the space between them its
+* form's.
+*/
+function NavigationList(t0) {
+	const $ = c(6);
+	const { children, layout } = t0;
+	const { form } = useContext(NavigationContext);
+	let t1;
+	if ($[0] !== form || $[1] !== layout) {
+		t1 = props(navigationListStyles.list, layout, FORMS[form].list);
+		$[0] = form;
+		$[1] = layout;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== children || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx("ul", {
+			role: "list",
+			...t1,
+			children
 		});
-		$[6] = T0;
-		$[7] = href;
-		$[8] = props;
-		$[9] = t1;
-		$[10] = t2;
-		$[11] = t3;
-		$[12] = t4;
-	} else t4 = $[12];
-	return t4;
+		$[3] = children;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
 }
 //#endregion
-export { NavigationItem };
+export { NavigationItem, NavigationList };
 
 //# sourceMappingURL=index.js.map

package/dist/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","RefAttributes","LinkRenderProps","LinkProps","RACLinkProps","stylex","useContext","Link","RACLink","NavigationForm","BadgeMarkContext","Badge","focus","mergeStatefulStyles","NavigationContext","barItemStyles","collapsedItemStyles","crampedBarItemStyles","expandedItemStyles","navigationItemStyles","FORMS","bar","barCramped","item","collapsed","expanded","RINGS","indicator","indicatorRing","itemRing","ringVisible","NavigationItemProps","badge","children","className","href","icon","style","Omit","itemClasses","form","isCurrent","styles","state","props","link","itemCurrent","isHovered","itemHoveredCurrent","itemHovered","isFocusVisible","itemFocusedCurrent","itemFocused","isPressed","itemPressedCurrent","itemPressed","isDisabled","itemDisabled","itemContent","label","glyph","undefined","badgeMark","pill","indicatorCurrent","indicatorHoveredCurrent","indicatorHovered","indicatorFocusedCurrent","indicatorFocused","indicatorPressedCurrent","indicatorPressed","labelCurrent","NavigationItem","t0","$","_c","selectedRoute","T0","t1","t2","t3","t4","stylex.props","_c","RACLink"],"sources":["../../src/navigation/index.tsx"],"sourcesContent":["import type { ReactNode, RefAttributes } from 'react';\nimport type { LinkRenderProps, LinkProps as RACLinkProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { Link as RACLink } from 'react-aria-components';\nimport type { NavigationForm } from './context';\nimport { BadgeMarkContext } from '../badge';\nimport Badge from '../components/badge';\nimport { focus } from '../styles/focus';\nimport { mergeStatefulStyles } from '../styles/merge';\nimport { NavigationContext } from './context';\nimport { barItemStyles, collapsedItemStyles, crampedBarItemStyles, expandedItemStyles, navigationItemStyles } from './styles';\n\n// The destination NavigationBar and NavigationRail both render, and the\n// context each hands it: which of the three forms to draw and which route is\n// current. See ./styles.ts for the forms.\n//\n// A destination is a link — it goes somewhere, rather than selecting\n// something — so it is React Aria's `Link`, which routes through a\n// `RouterProvider` when an app has one. The current one is the one whose\n// `href` is the bar's or the rail's `selectedRoute`, the same matching\n// NavigationTree does, and it carries `aria-current=\"page\"`.\n\nconst FORMS = {\n  bar: barItemStyles,\n  barCramped: {\n    ...collapsedItemStyles,\n    item: crampedBarItemStyles.item\n  },\n  collapsed: collapsedItemStyles,\n  expanded: expandedItemStyles\n};\n\n// The focus ring goes around the pill, wherever a form draws it: the\n// indicator in a vertical destination, the whole destination in a horizontal\n// one. The rail's two forms take the library's shared ring. The bar's pill\n// moves from one element to the other at the medium breakpoint, so its rings\n// are its own, each giving way at the width the other takes over.\nconst RINGS = {\n  bar: {\n    indicator: barItemStyles.indicatorRing,\n    item: barItemStyles.itemRing\n  },\n  barCramped: {\n    indicator: focus.ringVisible,\n    item: null\n  },\n  collapsed: {\n    indicator: focus.ringVisible,\n    item: null\n  },\n  expanded: {\n    indicator: null,\n    item: focus.ringVisible\n  }\n};\ntype NavigationItemProps = {\n  /**\n   * A badge on the icon: `true` for the badges page's small dot, a number\n   * for the large badge holding it. The badge is hidden from assistive\n   * technology, so say what it says in the destination's `aria-label` too —\n   * \"First item, 3 new\".\n   */\n  badge?: boolean | number;\n  /** The destination's name, drawn as its label. */\n  children: ReactNode;\n  /** A function may compute the class from the destination's render state. */\n  className?: RACLinkProps['className'];\n  /**\n   * Where the destination goes, and what the bar's or the rail's\n   * `selectedRoute` is matched against.\n   */\n  href: string;\n  /** The destination's icon, at the pages' 24dp. */\n  icon: ReactNode;\n  /** A function may compute the style from the destination's render state. */\n  style?: RACLinkProps['style'];\n} & Omit<RACLinkProps, 'children' | 'className' | 'href' | 'style'>;\n\n// A destination's own classes, from React Aria's render state: the pill in a\n// horizontal form, and the layers over it.\nfunction itemClasses(form: NavigationForm, isCurrent: boolean) {\n  const styles = FORMS[form];\n  return (state: LinkRenderProps) => stylex.props(navigationItemStyles.link, styles.item, isCurrent && styles.itemCurrent, state.isHovered && (isCurrent ? styles.itemHoveredCurrent : styles.itemHovered), state.isFocusVisible && (isCurrent ? styles.itemFocusedCurrent : styles.itemFocused), state.isPressed && (isCurrent ? styles.itemPressedCurrent : styles.itemPressed), state.isFocusVisible && RINGS[form].item, state.isDisabled && navigationItemStyles.itemDisabled);\n}\n\n// What a destination draws, from React Aria's render state: the indicator\n// holding the icon, and the label beside or under it. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction itemContent(form: NavigationForm, isCurrent: boolean, badge: boolean | number | undefined, icon: ReactNode, label: ReactNode) {\n  const styles = FORMS[form];\n  const glyph = badge === undefined || badge === false ? icon : <BadgeMarkContext value={styles.badgeMark}>\n        <Badge count={badge === true ? undefined : badge}>{icon}</Badge>\n      </BadgeMarkContext>;\n  return (state: LinkRenderProps) => <>\n      <span {...stylex.props(navigationItemStyles.pill, styles.indicator, isCurrent && styles.indicatorCurrent, state.isHovered && (isCurrent ? styles.indicatorHoveredCurrent : styles.indicatorHovered), state.isFocusVisible && (isCurrent ? styles.indicatorFocusedCurrent : styles.indicatorFocused), state.isPressed && (isCurrent ? styles.indicatorPressedCurrent : styles.indicatorPressed), state.isFocusVisible && RINGS[form].indicator, state.isDisabled && navigationItemStyles.itemDisabled)}>\n        <span {...stylex.props(navigationItemStyles.icon)}>{glyph}</span>\n      </span>\n      <span {...stylex.props(navigationItemStyles.label, styles.label, isCurrent && styles.labelCurrent, state.isDisabled && navigationItemStyles.itemDisabled)}>\n        {label}\n      </span>\n    </>;\n}\n\n/**\n * One destination in a navigation bar or rail: an icon, a label and, when\n * it is the current one, the active indicator behind them.\n */\nfunction NavigationItem({\n  badge,\n  children,\n  href,\n  icon,\n  ...props\n}: NavigationItemProps & RefAttributes<HTMLAnchorElement>) {\n  const {\n    form,\n    selectedRoute\n  } = useContext(NavigationContext);\n  const isCurrent = selectedRoute !== undefined && href === selectedRoute;\n  return <RACLink aria-current={isCurrent ? 'page' : undefined} href={href} {...props} {...mergeStatefulStyles(itemClasses(form, isCurrent), props)}>\n      {itemContent(form, isCurrent, badge, icon, children)}\n    </RACLink>;\n}\nexport type { NavigationItemProps };\nexport { NavigationItem };"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","RefAttributes","FocusableElement","LinkRenderProps","LinkProps","RACLinkProps","stylex","useContext","useId","Link","RACLink","NavigationForm","BadgeMarkContext","Badge","useClippedTitle","useRipple","focus","mergeStatefulStyles","NavigationContext","barItemStyles","collapsedItemStyles","crampedBarItemStyles","expandedItemStyles","navigationItemStyles","navigationListStyles","FORMS","bar","barCramped","item","list","listItem","collapsed","expanded","RINGS","indicator","indicatorRing","itemRing","ringVisible","Naming","badgeId","badgeLabel","labelId","NavigationItemProps","badge","children","className","href","icon","isCurrent","style","Omit","itemClasses","form","styles","state","props","link","fade","itemCurrent","isHovered","itemHoveredCurrent","itemHovered","isFocusVisible","itemFocusedCurrent","itemFocused","isPressed","itemPressedCurrent","itemPressed","isDisabled","itemDisabled","itemContent","label","naming","ripple","glyph","undefined","badgeMark","pill","indicatorCurrent","indicatorHoveredCurrent","indicatorHovered","indicatorFocusedCurrent","indicatorFocused","indicatorPressedCurrent","indicatorPressed","labelCurrent","NavigationItem","t0","$","_c","isCurrentProp","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","selectedRoute","t1","t2","T0","t3","t4","t5","handlers","t6","t7","surface","t8","t9","NavigationLabel","id","styling","clipped","NavigationList","layout","stylex.props","_c","props","RACLink"],"sources":["../../src/navigation/index.tsx"],"sourcesContent":["import type { ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, LinkRenderProps, LinkProps as RACLinkProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useId } from 'react';\nimport { Link as RACLink } from 'react-aria-components';\nimport type { NavigationForm } from './context';\nimport { BadgeMarkContext } from '../badge';\nimport Badge from '../components/badge';\nimport { useClippedTitle } from '../hooks/useClippedTitle';\nimport { useRipple } from '../hooks/useRipple';\nimport { focus } from '../styles/focus';\nimport { mergeStatefulStyles } from '../styles/merge';\nimport { NavigationContext } from './context';\nimport { barItemStyles, collapsedItemStyles, crampedBarItemStyles, expandedItemStyles, navigationItemStyles, navigationListStyles } from './styles';\n\n// The destination NavigationBar and NavigationRail both render, and the\n// context each hands it: which of the three forms to draw and which route is\n// current. See ./styles.ts for the forms.\n//\n// A destination is a link — it goes somewhere, rather than selecting\n// something — so it is React Aria's `Link`, which routes through a\n// `RouterProvider` when an app has one. The current one is the one whose\n// `href` is the bar's or the rail's `selectedRoute`, the same matching\n// NavigationTree does, and it carries `aria-current=\"page\"`. A destination's\n// own `isCurrent` overrides that match, which is how an app on a route\n// nested under a destination marks the destination it is under: the match\n// is exact, and a top-level destination's `href` is rarely the whole route.\n// The attribute, the indicator and the label all read the one answer.\n//\n// A badge is hidden from assistive technology — see the Badge component for\n// why — so what it says reaches the link's name through `badgeLabel`: the\n// link is named by its label and that text together, through\n// `aria-labelledby`, rather than by an `aria-label` the call site would keep\n// in step with both the label and the count, in every language. The text\n// sits in a hidden span beside the badge, which a name can still be read\n// from, so the label's own text and the width the bar measures it at are\n// untouched. An `aria-label` or `aria-labelledby` the call site passes still\n// names the link instead.\n//\n// The destinations are a list, each in an item of its own, which is what has\n// a screen reader say how many there are and which one it is on, as the\n// WAI-ARIA navigation examples do. The bar and the rail draw the list, and\n// each destination draws its item: the item takes the destination's place in\n// the row or the column, and the link fills it, so the class, the ref and\n// `aria-current` stay on the link.\n\nconst FORMS = {\n  bar: barItemStyles,\n  barCramped: {\n    ...collapsedItemStyles,\n    item: crampedBarItemStyles.item,\n    list: crampedBarItemStyles.list,\n    listItem: crampedBarItemStyles.listItem\n  },\n  collapsed: collapsedItemStyles,\n  expanded: expandedItemStyles\n};\n\n// The focus ring goes around the pill, wherever a form draws it: the\n// indicator in a vertical destination, the whole destination in a horizontal\n// one. The rail's two forms take the library's shared ring. The bar's pill\n// moves from one element to the other at the medium breakpoint, so its rings\n// are its own, each giving way at the width the other takes over.\nconst RINGS = {\n  bar: {\n    indicator: barItemStyles.indicatorRing,\n    item: barItemStyles.itemRing\n  },\n  barCramped: {\n    indicator: focus.ringVisible,\n    item: null\n  },\n  collapsed: {\n    indicator: focus.ringVisible,\n    item: null\n  },\n  expanded: {\n    indicator: null,\n    item: focus.ringVisible\n  }\n};\n\n// The ids a destination naming its badge gives its label and the badge's\n// words, which its link is labelled by.\ntype Naming = {\n  badgeId: string;\n  badgeLabel: string;\n  labelId: string;\n};\ntype NavigationItemProps = {\n  /**\n   * A badge on the icon: `true` for the badges page's small dot, a number\n   * for the large badge holding it. The badge is hidden from assistive\n   * technology, so say what it says in `badgeLabel`.\n   */\n  badge?: boolean | number;\n  /**\n   * What the badge says, in words and in the reader's language — \"3 new\",\n   * or \"new\" for the dot. It follows the label in the destination's\n   * accessible name, \"First item 3 new\", and is read only while the badge is\n   * drawn.\n   */\n  badgeLabel?: string;\n  /** The destination's name, drawn as its label. */\n  children: ReactNode;\n  /** A function may compute the class from the destination's render state. */\n  className?: RACLinkProps['className'];\n  /**\n   * Where the destination goes, and what the bar's or the rail's\n   * `selectedRoute` is matched against.\n   */\n  href: string;\n  /** The destination's icon, at the pages' 24dp. */\n  icon: ReactNode;\n  /**\n   * Whether this is the current destination, in place of matching its\n   * `href` against the bar's or the rail's `selectedRoute`. Pass it for a\n   * route nested under the destination, `/first/42` under `/first`, which\n   * the exact match leaves without a current destination; `false` turns\n   * the match off. Left out, the match decides.\n   */\n  isCurrent?: boolean;\n  /** A function may compute the style from the destination's render state. */\n  style?: RACLinkProps['style'];\n} & Omit<RACLinkProps, 'children' | 'className' | 'href' | 'style'>;\n\n// A destination's own classes, from React Aria's render state: the pill in a\n// horizontal form, and the layers over it.\nfunction itemClasses(form: NavigationForm, isCurrent: boolean) {\n  const styles = FORMS[form];\n  return (state: LinkRenderProps) => stylex.props(navigationItemStyles.link, navigationItemStyles.fade, styles.item, isCurrent && styles.itemCurrent, state.isHovered && (isCurrent ? styles.itemHoveredCurrent : styles.itemHovered), state.isFocusVisible && (isCurrent ? styles.itemFocusedCurrent : styles.itemFocused), state.isPressed && (isCurrent ? styles.itemPressedCurrent : styles.itemPressed), state.isFocusVisible && RINGS[form].item, state.isDisabled && navigationItemStyles.itemDisabled);\n}\n\n// What a destination draws, from React Aria's render state: the indicator\n// holding the icon and the press ripple, and the label beside or under it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after.\n//\n// The ripple comes first, so a count badge drawn after it stays over it.\nfunction itemContent(form: NavigationForm, isCurrent: boolean, badge: boolean | number | undefined, icon: ReactNode, label: ReactNode, naming: Naming | undefined, ripple: ReactNode) {\n  const styles = FORMS[form];\n  const glyph = badge === undefined || badge === false ? icon : <BadgeMarkContext value={styles.badgeMark}>\n        <Badge count={badge === true ? undefined : badge}>{icon}</Badge>\n      </BadgeMarkContext>;\n  return (state: LinkRenderProps) => <>\n      <span {...stylex.props(navigationItemStyles.pill, navigationItemStyles.fade, styles.indicator, isCurrent && styles.indicatorCurrent, state.isHovered && (isCurrent ? styles.indicatorHoveredCurrent : styles.indicatorHovered), state.isFocusVisible && (isCurrent ? styles.indicatorFocusedCurrent : styles.indicatorFocused), state.isPressed && (isCurrent ? styles.indicatorPressedCurrent : styles.indicatorPressed), state.isFocusVisible && RINGS[form].indicator, state.isDisabled && navigationItemStyles.itemDisabled)}>\n        {ripple}\n        <span {...stylex.props(navigationItemStyles.icon)}>{glyph}</span>\n        {naming && <span hidden id={naming.badgeId}>\n            {naming.badgeLabel}\n          </span>}\n      </span>\n      <NavigationLabel id={naming?.labelId} styling={stylex.props(navigationItemStyles.label, navigationItemStyles.fade, styles.label, isCurrent && styles.labelCurrent, state.isDisabled && navigationItemStyles.itemDisabled)}>\n        {label}\n      </NavigationLabel>\n    </>;\n}\n\n/**\n * One destination in a navigation bar or rail: an icon, a label and, when\n * it is the current one, the active indicator behind them.\n */\nfunction NavigationItem({\n  badge,\n  badgeLabel,\n  children,\n  href,\n  icon,\n  isCurrent: isCurrentProp,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  ...props\n}: NavigationItemProps & RefAttributes<HTMLAnchorElement>) {\n  const {\n    form,\n    selectedRoute\n  } = useContext(NavigationContext);\n  // The call site's handlers run after the ripple's own.\n  const ripple = useRipple<FocusableElement>(props.isDisabled !== true, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const isCurrent = isCurrentProp ?? (selectedRoute !== undefined && href === selectedRoute);\n  const labelId = useId();\n  const badgeId = useId();\n  // Only while the badge is drawn, and only where the call site names the\n  // link no other way.\n  const naming = badge !== undefined && badge !== false && badgeLabel !== undefined && props['aria-label'] === undefined && props['aria-labelledby'] === undefined ? {\n    badgeId,\n    badgeLabel,\n    labelId\n  } : undefined;\n  return <li {...stylex.props(navigationListStyles.item, FORMS[form].listItem)}>\n      <RACLink aria-current={isCurrent ? 'page' : undefined} aria-labelledby={naming && `${naming.labelId} ${naming.badgeId}`} href={href} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemClasses(form, isCurrent), props)}>\n        {itemContent(form, isCurrent, badge, icon, children, naming, ripple.surface)}\n      </RACLink>\n    </li>;\n}\n\n// The label, kept to one line, which shows its full text in the browser's\n// tooltip on hover once it is cut short — see `useClippedTitle`. A component\n// because the title is state, and `itemContent` runs inside React Aria's\n// render function.\nfunction NavigationLabel({\n  children,\n  id,\n  styling\n}: {\n  children: ReactNode;\n  id: string | undefined;\n  styling: ReturnType<typeof stylex.props>;\n}) {\n  const clipped = useClippedTitle(children);\n  return <span {...clipped} id={id} {...styling}>\n      {children}\n    </span>;\n}\n\n/**\n * The list a bar or a rail holds its destinations in, laid out as `layout`\n * says, the bar's row or the rail's column, with the space between them its\n * form's.\n */\nfunction NavigationList({\n  children,\n  layout\n}: {\n  children: ReactNode;\n  layout: stylex.StyleXStyles;\n}) {\n  const {\n    form\n  } = useContext(NavigationContext);\n  return <ul\n  // oxlint-disable-next-line jsx-a11y/no-redundant-roles -- Safari's VoiceOver drops the role once the markers are cleared\n  role=\"list\" {...stylex.props(navigationListStyles.list, layout, FORMS[form].list)}>\n      {children}\n    </ul>;\n}\nexport type { NavigationItemProps };\nexport { NavigationItem, NavigationList };"],"mappings":"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"}

package/dist/navigation/styles.js

@@ -7,6 +7,12 @@ import { colors, stateLayerOpacity } from "../tokens/design.tokens.stylex.js";
 `${colors.onSecondaryContainer}${stateLayerOpacity.focus}${colors.secondaryContainer}`;
 `${colors.onSecondaryContainer}${stateLayerOpacity.pressed}${colors.secondaryContainer}`;
 const navigationItemStyles = {
+	fade: {
+		kIyJzY: "x1qno0dh x12w9bfk",
+		k1ekBW: "xs2xxs2",
+		kAMwcw: "xpc4ca7",
+		$$css: true
+	},
 	icon: {
 		kGNEyG: "x6s0dn4",
 		k1xSpc: "x78zum5",
@@ -21,7 +27,8 @@ const navigationItemStyles = {
 	},
 	label: {
 		kMwMTN: "x1w5n3ug",
-		kVQacm: "xb3r6kr",
+		kXHlph: "x101abm8",
+		kORKVm: "xryxfnj",
 		kg5iWk: "xlyipyv",
 		khDVqt: "xuxw1ft",
 		$$css: true
@@ -45,6 +52,20 @@ const navigationItemStyles = {
 		$$css: true
 	}
 };
+const navigationListStyles = {
+	item: {
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		$$css: true
+	},
+	list: {
+		kB7OPa: "x9f619",
+		kH6xsr: "x3ct3a4",
+		kogj98: "x1ghz6dp",
+		kmVPX3: "x1717udv",
+		$$css: true
+	}
+};
 const barItemStyles = {
 	badgeMark: {
 		kSGwAc: "xcspwbw",
@@ -62,6 +83,7 @@ const barItemStyles = {
 		kmuXW: "x2lah0s",
 		kzqmXN: "x15yg21f x11lewyt",
 		kjj79g: "xl56j7k",
+		kVAEAm: "x1n2onr6 xtke4eg",
 		$$css: true
 	},
 	indicatorCurrent: {
@@ -108,13 +130,15 @@ const barItemStyles = {
 		kSy8m5: "xfmxh57",
 		kcktkL: "xb7ltuz",
 		kwXMNM: "x1j6awrg",
-		kZKoxP: "x5yr21d xiioxts",
+		kZKoxP: "xiioxts",
 		kaIpWk: "x1dkaolv",
 		kCS8Yb: "x1r8uery x1a6ly76",
 		kXwgrk: "xdt5ytf xapwh9g",
 		kzQI83: "x1iyjqo2 x10cb59y",
 		kOIVth: "xzoy561",
 		kjj79g: "xl56j7k",
+		kqGvvJ: "x10im51j xap7i12",
+		kAzted: "x8nclml xtyuij1",
 		k7Eaqz: "xeuugli",
 		k8WAf4: "x1t0vds8 x1nouyz5",
 		kg3NbH: "xnjsko4 xze1m75",
@@ -170,6 +194,16 @@ const barItemStyles = {
 	labelCurrent: {
 		kMwMTN: "xzakmg9 x16ybrrz",
 		$$css: true
+	},
+	list: {
+		kOIVth: "xxhr3t x110hqo6",
+		$$css: true
+	},
+	listItem: {
+		kCS8Yb: "x1r8uery x1a6ly76",
+		kzQI83: "x1iyjqo2 x10cb59y",
+		k7Eaqz: "xeuugli",
+		$$css: true
 	}
 };
 const collapsedItemStyles = {
@@ -183,6 +217,7 @@ const collapsedItemStyles = {
 		kmuXW: "x2lah0s",
 		kzqmXN: "x15yg21f",
 		kjj79g: "xl56j7k",
+		kVAEAm: "x1n2onr6",
 		$$css: true
 	},
 	indicatorCurrent: {
@@ -246,6 +281,15 @@ const collapsedItemStyles = {
 	labelCurrent: {
 		kMwMTN: "xzakmg9",
 		$$css: true
+	},
+	list: {
+		kOIVth: "xzoy561",
+		$$css: true
+	},
+	listItem: {
+		kmuXW: "x2lah0s",
+		kzqmXN: "xh8yej3",
+		$$css: true
 	}
 };
 const expandedItemStyles = {
@@ -325,22 +369,41 @@ const expandedItemStyles = {
 	labelCurrent: {
 		kMwMTN: "x1sawysd",
 		$$css: true
+	},
+	list: { $$css: true },
+	listItem: {
+		kSGwAc: "xqcrz7y",
+		kmuXW: "x2lah0s",
+		ks0D6T: "x193iq5w",
+		$$css: true
+	}
+};
+const crampedBarItemStyles = {
+	item: {
+		kZKoxP: "x5yr21d",
+		kaIpWk: "x1dkaolv",
+		kCS8Yb: "x1r8uery",
+		kXwgrk: "xdt5ytf",
+		kzQI83: "x1iyjqo2",
+		kOIVth: "xzoy561",
+		kjj79g: "xl56j7k",
+		k7Eaqz: "xeuugli",
+		k8WAf4: "x1t0vds8",
+		kg3NbH: "xnjsko4",
+		$$css: true
+	},
+	list: {
+		kOIVth: "xxhr3t",
+		$$css: true
+	},
+	listItem: {
+		kCS8Yb: "x1r8uery",
+		kzQI83: "x1iyjqo2",
+		k7Eaqz: "xeuugli",
+		$$css: true
 	}
 };
-const crampedBarItemStyles = { item: {
-	kZKoxP: "x5yr21d",
-	kaIpWk: "x1dkaolv",
-	kCS8Yb: "x1r8uery",
-	kXwgrk: "xdt5ytf",
-	kzQI83: "x1iyjqo2",
-	kOIVth: "xzoy561",
-	kjj79g: "xl56j7k",
-	k7Eaqz: "xeuugli",
-	k8WAf4: "x1t0vds8",
-	kg3NbH: "xnjsko4",
-	$$css: true
-} };
 //#endregion
-export { barItemStyles, collapsedItemStyles, crampedBarItemStyles, expandedItemStyles, navigationItemStyles };
+export { barItemStyles, collapsedItemStyles, crampedBarItemStyles, expandedItemStyles, navigationItemStyles, navigationListStyles };
 
 //# sourceMappingURL=styles.js.map