@kanso-labs/kanso-ui 0.40.7 → 0.40.9

package/dist/hooks/useBottomEdge.js

@@ -0,0 +1,83 @@
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useSyncExternalStore } from "react";
+//#region src/hooks/useBottomEdge.ts
+const holders = /* @__PURE__ */ new Map();
+const listeners = /* @__PURE__ */ new Set();
+let clearance = 0;
+function getClearance() {
+	return clearance;
+}
+function getServerClearance() {
+	return 0;
+}
+function hold(element, height) {
+	if (height === void 0 || height <= 0) holders.delete(element);
+	else holders.set(element, height);
+	const next = Math.max(0, ...holders.values());
+	if (next === clearance) return;
+	clearance = next;
+	for (const listener of listeners) listener();
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+/**
+* How far above the window's bottom edge a toast has to sit to clear the
+* actions of every open overlay holding that edge, in pixels: `0` while none
+* is open.
+*/
+function useBottomEdgeClearance() {
+	return useSyncExternalStore(subscribe, getClearance, getServerClearance);
+}
+/**
+* Holds the strip from the top of the element in `ref` to the bottom of the
+* window while `isHolding` is true, so a toast rises clear of it. For a part
+* whose own bottom is the window's: an overlay's actions, pinned there.
+*
+* Measured from where the element is drawn, so the strip takes in whatever
+* lies between it and the edge, a safe area among them. It is measured again
+* whenever the element resizes, the window does, or an animation ends, since
+* an overlay arriving from below is drawn lower than it rests until its entry
+* has run.
+*/
+function useHoldBottomEdge(ref, isHolding) {
+	const $ = c(4);
+	let t0;
+	let t1;
+	if ($[0] !== isHolding || $[1] !== ref) {
+		t0 = () => {
+			const element = ref.current;
+			if (element === null || !isHolding) return;
+			const measure = () => {
+				hold(element, Math.ceil(window.innerHeight - element.getBoundingClientRect().top));
+			};
+			measure();
+			const observer = new ResizeObserver(measure);
+			observer.observe(element);
+			window.addEventListener("resize", measure);
+			document.addEventListener("animationend", measure, true);
+			return () => {
+				observer.disconnect();
+				window.removeEventListener("resize", measure);
+				document.removeEventListener("animationend", measure, true);
+				hold(element, void 0);
+			};
+		};
+		t1 = [isHolding, ref];
+		$[0] = isHolding;
+		$[1] = ref;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useLayoutEffect(t0, t1);
+}
+//#endregion
+export { useBottomEdgeClearance, useHoldBottomEdge };
+
+//# sourceMappingURL=useBottomEdge.js.map

package/dist/hooks/useBottomEdge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBottomEdge.js","names":["RefObject","useLayoutEffect","useSyncExternalStore","holders","Map","Element","listeners","Set","clearance","getClearance","getServerClearance","hold","element","height","undefined","delete","set","next","Math","max","values","listener","subscribe","add","useBottomEdgeClearance","useHoldBottomEdge","ref","isHolding","$","_c","t0","t1","current","measure","ceil","window","innerHeight","getBoundingClientRect","top","observer","ResizeObserver","observe","addEventListener","document","disconnect","removeEventListener","_c"],"sources":["../../src/hooks/useBottomEdge.ts"],"sourcesContent":["import type { RefObject } from 'react'\n\nimport { useLayoutEffect, useSyncExternalStore } from 'react'\n\n// The strips of the window's bottom edge that open overlays hold with their\n// actions, keyed by the element holding each, and how far a toast has to rise\n// to clear them all.\n//\n// The snackbar sits on that edge and above every modal, which is what lets a\n// message raised from inside a dialog be read over its scrim. But a\n// full-screen dialog's action bar and a sheet's actions sit on the same edge,\n// so a toast with an action lay over them and took the taps meant for their\n// buttons — and a toast with an action stays until it is answered. The parts\n// that hold the edge say so here, and the snackbar's region rises by the\n// tallest of them.\n//\n// A store rather than a context, since the two meet nowhere in the tree: the\n// snackbar is mounted once near the root, and the overlay is portalled to the\n// end of the body from wherever it was opened.\nconst holders = new Map<Element, number>()\nconst listeners = new Set<() => void>()\nlet clearance = 0\n\nfunction getClearance() {\n  return clearance\n}\n\n// Nothing is open while a page is rendered on the server.\nfunction getServerClearance() {\n  return 0\n}\n\nfunction hold(element: Element, height: number | undefined) {\n  if (height === undefined || height <= 0) {\n    holders.delete(element)\n  } else {\n    holders.set(element, height)\n  }\n  const next = Math.max(0, ...holders.values())\n  if (next === clearance) {\n    return\n  }\n  clearance = next\n  for (const listener of listeners) {\n    listener()\n  }\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener)\n  return () => {\n    listeners.delete(listener)\n  }\n}\n\n/**\n * How far above the window's bottom edge a toast has to sit to clear the\n * actions of every open overlay holding that edge, in pixels: `0` while none\n * is open.\n */\nfunction useBottomEdgeClearance(): number {\n  return useSyncExternalStore(subscribe, getClearance, getServerClearance)\n}\n\n/**\n * Holds the strip from the top of the element in `ref` to the bottom of the\n * window while `isHolding` is true, so a toast rises clear of it. For a part\n * whose own bottom is the window's: an overlay's actions, pinned there.\n *\n * Measured from where the element is drawn, so the strip takes in whatever\n * lies between it and the edge, a safe area among them. It is measured again\n * whenever the element resizes, the window does, or an animation ends, since\n * an overlay arriving from below is drawn lower than it rests until its entry\n * has run.\n */\nfunction useHoldBottomEdge(\n  ref: RefObject<HTMLElement | null>,\n  isHolding: boolean,\n) {\n  useLayoutEffect(() => {\n    const element = ref.current\n    if (element === null || !isHolding) {\n      return undefined\n    }\n\n    const measure = () => {\n      hold(\n        element,\n        Math.ceil(window.innerHeight - element.getBoundingClientRect().top),\n      )\n    }\n    measure()\n    const observer = new ResizeObserver(measure)\n    observer.observe(element)\n    window.addEventListener('resize', measure)\n    document.addEventListener('animationend', measure, true)\n\n    return () => {\n      observer.disconnect()\n      window.removeEventListener('resize', measure)\n      document.removeEventListener('animationend', measure, true)\n      hold(element, undefined)\n    }\n  }, [isHolding, ref])\n}\n\nexport { useBottomEdgeClearance, useHoldBottomEdge }\n"],"mappings":";;;AAmBA,MAAMG,0BAAU,IAAIC,IAAqB;AACzC,MAAME,4BAAY,IAAIC,IAAgB;AACtC,IAAIC,YAAY;AAEhB,SAASC,eAAe;CACtB,OAAOD;AACT;AAGA,SAASE,qBAAqB;CAC5B,OAAO;AACT;AAEA,SAASC,KAAKC,SAAkBC,QAA4B;CAC1D,IAAIA,WAAWC,KAAAA,KAAaD,UAAU,GACpCV,QAAQY,OAAOH,OAAO;MAEtBT,QAAQa,IAAIJ,SAASC,MAAM;CAE7B,MAAMI,OAAOC,KAAKC,IAAI,GAAG,GAAGhB,QAAQiB,OAAO,CAAC;CAC5C,IAAIH,SAAST,WACX;CAEFA,YAAYS;CACZ,KAAK,MAAMI,YAAYf,WACrBe,SAAS;AAEb;AAEA,SAASC,UAAUD,UAAsB;CACvCf,UAAUiB,IAAIF,QAAQ;CACtB,aAAa;EACXf,UAAUS,OAAOM,QAAQ;CAC3B;AACF;;;;;;AAOA,SAAAG,yBAAA;CAAA,OACStB,qBAAqBoB,WAAWb,cAAcC,kBAAkB;AAAC;;;;;;;;;;;;AAc1E,SAAAe,kBAAAC,KAAAC,WAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,aAAAC,EAAA,OAAAF,KAAA;EAIkBI,WAAA;GACd,MAAAlB,UAAgBc,IAAGM;GACnB,IAAIpB,YAAY,QAAZ,CAAqBe,WAAS;GAIlC,MAAAM,gBAAgB;IACdtB,KACEC,SACAM,KAAIgB,KAAMC,OAAMC,cAAexB,QAAOyB,sBAAuB,CAAC,CAAAC,GAAI,CACpE;GAAC;GAEHL,QAAQ;GACR,MAAAM,WAAiB,IAAIC,eAAeP,OAAO;GAC3CM,SAAQE,QAAS7B,OAAO;GACxBuB,OAAMO,iBAAkB,UAAUT,OAAO;GACzCU,SAAQD,iBAAkB,gBAAgBT,SAAS,IAAI;GAAC,aAEjD;IACLM,SAAQK,WAAY;IACpBT,OAAMU,oBAAqB,UAAUZ,OAAO;IAC5CU,SAAQE,oBAAqB,gBAAgBZ,SAAS,IAAI;IAC1DtB,KAAKC,SAASE,KAAAA,CAAS;GAAC;EACzB;EACAiB,KAAA,CAACJ,WAAWD,GAAG;EAACE,EAAA,KAAAD;EAAAC,EAAA,KAAAF;EAAAE,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAD,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAxBnB3B,gBAAgB6B,IAwBbC,EAAgB;AAAC"}

package/dist/mark/initials.js

@@ -1,40 +1,55 @@
 //#region src/mark/initials.ts
+const INITIAL = /^[\p{L}\p{N}\p{Extended_Pictographic}\p{Regional_Indicator}]/u;
+const JOINING = /^[\p{Script=Arabic}\p{Script=Syriac}\p{Script=Mongolian}\p{Script=Nko}\p{Script=Adlam}\p{Script=Mandaic}\p{Script=Manichaean}\p{Script=Psalter_Pahlavi}\p{Script=Hanifi_Rohingya}\p{Script=Sogdian}\p{Script=Old_Uyghur}]/u;
+const ZERO_WIDTH_NON_JOINER = "‌";
+const TITLE = /^\p{L}{2,4}\.$/u;
+const SUFFIX = /^(?:jr|sr|ii|iii|iv|\d+(?:st|nd|rd|th))\.?,?$/iu;
+const TRAILING_ASIDE = /\s*[([{][^)\]}]*[)\]}]\s*$/u;
+const segmenters = /* @__PURE__ */ new Map();
+function graphemesOf(text, locale) {
+	let segmenter = segmenters.get(locale);
+	if (segmenter === void 0) {
+		segmenter = new Intl.Segmenter(locale, { granularity: "grapheme" });
+		segmenters.set(locale, segmenter);
+	}
+	return Array.from(segmenter.segment(text), ({ segment }) => segment);
+}
+/**
+* The character that stands for `word`: its first grapheme that is a letter,
+* a number or a picture, or its first grapheme where it has none of those,
+* so something always shows. Upper-cased in the locale, and then one
+* grapheme of that, since upper-casing can lengthen it: "ß" is "SS".
+*/
+function initialOf(word, locale) {
+	const graphemes = graphemesOf(word, locale);
+	return graphemesOf((graphemes.find((grapheme) => INITIAL.test(grapheme)) ?? graphemes.at(0) ?? "").toLocaleUpperCase(locale), locale).at(0) ?? "";
+}
 /**
 * One letter, where a person takes two. A person has a first name and a last
 * name to initialise; a thing usually has neither, so the same rule applied
 * to "Second Item" would produce "SI" — a pair of initials for something that
-* was never two words in that sense. Array.from rather than indexing, so a
-* name starting outside the Basic Multilingual Plane yields its whole first
-* character instead of half a surrogate pair.
+* was never two words in that sense.
 */
-function initialOfThing(name) {
-	const trimmed = name.trim();
-	return (Array.from(trimmed)[0] ?? "").toLocaleUpperCase();
+function initialOfThing(name, locale) {
+	return initialOf(name.trim(), locale);
 }
 /**
-* The first character of the first and last word, which handles both "Ada"
-* and "Ada Lovelace" without a separate prop for how many to take.
-*
-* A character is a grapheme, what a reader sees as one, rather than a code
-* point: a code point drops an accent written as a combining mark, splits an
-* Indic conjunct and cuts a flag or a joined emoji in half. And it is
-* upper-cased in the reader's locale, which is what turns a Turkish "i" into
-* "İ" rather than "I".
+* The initials of the first and the last word, which handles both "Ada" and
+* "Ada Lovelace" without a separate prop for how many to take. What a
+* display name carries around the name itself is left out first: a title
+* before it, a generational suffix after it, and an aside in brackets at its
+* end. A name written without spaces between its words — Japanese, Chinese —
+* is one word to this, and takes one initial.
 */
 function initialsOfPerson(name, locale) {
-	const words = name.split(/\s+/u).filter(Boolean);
+	let words = name.replace(TRAILING_ASIDE, "").split(/\s+/u).filter(Boolean);
+	if (words.length > 1 && TITLE.test(words[0] ?? "")) words = words.slice(1);
+	if (words.length > 1 && SUFFIX.test(words.at(-1) ?? "")) words = words.slice(0, -1);
 	if (words.length === 0) return "";
-	return `${firstGrapheme(words[0] ?? "", locale)}${words.length > 1 ? firstGrapheme(words.at(-1) ?? "", locale) : ""}`.toLocaleUpperCase(locale);
-}
-const segmenters = /* @__PURE__ */ new Map();
-function firstGrapheme(word, locale) {
-	let segmenter = segmenters.get(locale);
-	if (segmenter === void 0) {
-		segmenter = new Intl.Segmenter(locale, { granularity: "grapheme" });
-		segmenters.set(locale, segmenter);
-	}
-	for (const { segment } of segmenter.segment(word)) return segment;
-	return "";
+	const first = initialOf(words[0] ?? "", locale);
+	if (words.length === 1) return first;
+	const last = initialOf(words.at(-1) ?? "", locale);
+	return `${first}${JOINING.test(first) && JOINING.test(last) ? ZERO_WIDTH_NON_JOINER : ""}${last}`;
 }
 //#endregion
 export { initialOfThing, initialsOfPerson };

package/dist/mark/initials.js.map

@@ -1 +1 @@
-{"version":3,"file":"initials.js","names":["initialOfThing","name","trimmed","trim","Array","from","toLocaleUpperCase","initialsOfPerson","locale","words","split","filter","Boolean","length","first","firstGrapheme","last","at","segmenters","Map","Intl","Segmenter","word","segmenter","get","undefined","granularity","set","segment"],"sources":["../../src/mark/initials.ts"],"sourcesContent":["// What a mark shows while it has no image: two initials for a person, one for\n// anything else. Beside the mark rather than inside `./index.tsx`, which\n// exports components alone so fast refresh keeps working for it.\n\n/**\n * One letter, where a person takes two. A person has a first name and a last\n * name to initialise; a thing usually has neither, so the same rule applied\n * to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n * was never two words in that sense. Array.from rather than indexing, so a\n * name starting outside the Basic Multilingual Plane yields its whole first\n * character instead of half a surrogate pair.\n */\nfunction initialOfThing(name: string) {\n  const trimmed = name.trim()\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase()\n}\n\n/**\n * The first character of the first and last word, which handles both \"Ada\"\n * and \"Ada Lovelace\" without a separate prop for how many to take.\n *\n * A character is a grapheme, what a reader sees as one, rather than a code\n * point: a code point drops an accent written as a combining mark, splits an\n * Indic conjunct and cuts a flag or a joined emoji in half. And it is\n * upper-cased in the reader's locale, which is what turns a Turkish \"i\" into\n * \"İ\" rather than \"I\".\n */\nfunction initialsOfPerson(name: string, locale: string) {\n  const words = name.split(/\\s+/u).filter(Boolean)\n  if (words.length === 0) {\n    return ''\n  }\n  const first = firstGrapheme(words[0] ?? '', locale)\n  const last = words.length > 1 ? firstGrapheme(words.at(-1) ?? '', locale) : ''\n  return `${first}${last}`.toLocaleUpperCase(locale)\n}\n\nconst segmenters = new Map<string, Intl.Segmenter>()\n\nfunction firstGrapheme(word: string, locale: string) {\n  let segmenter = segmenters.get(locale)\n  if (segmenter === undefined) {\n    segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' })\n    segmenters.set(locale, segmenter)\n  }\n  for (const { segment } of segmenter.segment(word)) {\n    return segment\n  }\n  return ''\n}\n\nexport { initialOfThing, initialsOfPerson }\n"],"mappings":";;;;;;;;;AAYA,SAASA,eAAeC,MAAc;CACpC,MAAMC,UAAUD,KAAKE,KAAK;CAC1B,QAAQC,MAAMC,KAAKH,OAAO,CAAC,CAAC,MAAM,GAAA,CAAII,kBAAkB;AAC1D;;;;;;;;;;;AAYA,SAASC,iBAAiBN,MAAcO,QAAgB;CACtD,MAAMC,QAAQR,KAAKS,MAAM,MAAM,CAAC,CAACC,OAAOC,OAAO;CAC/C,IAAIH,MAAMI,WAAW,GACnB,OAAO;CAIT,OAAO,GAFOE,cAAcN,MAAM,MAAM,IAAID,MAElCM,IADGL,MAAMI,SAAS,IAAIE,cAAcN,MAAMQ,GAAG,EAAE,KAAK,IAAIT,MAAM,IAAI,KACnDF,kBAAkBE,MAAM;AACnD;AAEA,MAAMU,6BAAa,IAAIC,IAA4B;AAEnD,SAASJ,cAAcO,MAAcd,QAAgB;CACnD,IAAIe,YAAYL,WAAWM,IAAIhB,MAAM;CACrC,IAAIe,cAAcE,KAAAA,GAAW;EAC3BF,YAAY,IAAIH,KAAKC,UAAUb,QAAQ,EAAEkB,aAAa,WAAW,CAAC;EAClER,WAAWS,IAAInB,QAAQe,SAAS;CAClC;CACA,KAAK,MAAM,EAAEK,aAAaL,UAAUK,QAAQN,IAAI,GAC9C,OAAOM;CAET,OAAO;AACT"}
+{"version":3,"file":"initials.js","names":["INITIAL","JOINING","ZERO_WIDTH_NON_JOINER","TITLE","SUFFIX","TRAILING_ASIDE","segmenters","Map","Intl","Segmenter","graphemesOf","text","locale","segmenter","get","undefined","granularity","set","Array","from","segment","initialOf","word","graphemes","chosen","find","grapheme","test","at","toLocaleUpperCase","initialOfThing","name","trim","initialsOfPerson","words","replace","split","filter","Boolean","length","slice","first","last","between"],"sources":["../../src/mark/initials.ts"],"sourcesContent":["// What a mark shows while it has no image: two initials for a person, one for\n// anything else. Beside the mark rather than inside `./index.tsx`, which\n// exports components alone so fast refresh keeps working for it.\n//\n// Both take the same rule for which character stands for a word, in\n// `initialOf`, and both work in graphemes — what a reader sees as one\n// character — in the reader's locale. A code point drops an accent written\n// as a combining mark, splits an Indic conjunct and cuts a flag or a joined\n// emoji in half; upper-casing without the locale turns a Turkish \"i\" into\n// \"I\" rather than \"İ\".\n\n// What a word's initial can be: a letter, a number, or a picture — an emoji,\n// or a flag, which is a pair of regional indicators. A word opening with\n// anything else — a bracket, a quote, the @ of a handle, the # of a channel\n// — is initialised by the first of these inside it.\nconst INITIAL = /^[\\p{L}\\p{N}\\p{Extended_Pictographic}\\p{Regional_Indicator}]/u\n\n// The scripts whose letters join to the next one. Two initials in one of\n// them, written side by side, shape into a single connected word rather than\n// two letters, so a zero-width non-joiner goes between them.\nconst JOINING =\n  /^[\\p{Script=Arabic}\\p{Script=Syriac}\\p{Script=Mongolian}\\p{Script=Nko}\\p{Script=Adlam}\\p{Script=Mandaic}\\p{Script=Manichaean}\\p{Script=Psalter_Pahlavi}\\p{Script=Hanifi_Rohingya}\\p{Script=Sogdian}\\p{Script=Old_Uyghur}]/u\n\nconst ZERO_WIDTH_NON_JOINER = '‌'\n\n// A title before a name — \"Dr.\", \"Mrs.\", \"Prof.\" — which is not one of its\n// words. Two letters at least, so a first initial written \"J.\" is kept.\nconst TITLE = /^\\p{L}{2,4}\\.$/u\n\n// A generational suffix after a name — \"Jr.\", \"Sr\", \"III\", \"3rd\" — which is\n// not its last word either. The numerals are the generational ones only, so\n// a surname that reads as a numeral, \"Xi\" say, is kept.\nconst SUFFIX = /^(?:jr|sr|ii|iii|iv|\\d+(?:st|nd|rd|th))\\.?,?$/iu\n\n// Something said about the name rather than part of it, in brackets at its\n// end: \"(she/her)\", \"[away]\".\nconst TRAILING_ASIDE = /\\s*[([{][^)\\]}]*[)\\]}]\\s*$/u\n\nconst segmenters = new Map<string, Intl.Segmenter>()\n\nfunction graphemesOf(text: string, locale: string) {\n  let segmenter = segmenters.get(locale)\n  if (segmenter === undefined) {\n    segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' })\n    segmenters.set(locale, segmenter)\n  }\n  return Array.from(segmenter.segment(text), ({ segment }) => segment)\n}\n\n/**\n * The character that stands for `word`: its first grapheme that is a letter,\n * a number or a picture, or its first grapheme where it has none of those,\n * so something always shows. Upper-cased in the locale, and then one\n * grapheme of that, since upper-casing can lengthen it: \"ß\" is \"SS\".\n */\nfunction initialOf(word: string, locale: string) {\n  const graphemes = graphemesOf(word, locale)\n  const chosen =\n    graphemes.find((grapheme) => INITIAL.test(grapheme)) ??\n    graphemes.at(0) ??\n    ''\n  return graphemesOf(chosen.toLocaleUpperCase(locale), locale).at(0) ?? ''\n}\n\n/**\n * One letter, where a person takes two. A person has a first name and a last\n * name to initialise; a thing usually has neither, so the same rule applied\n * to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n * was never two words in that sense.\n */\nfunction initialOfThing(name: string, locale: string) {\n  return initialOf(name.trim(), locale)\n}\n\n/**\n * The initials of the first and the last word, which handles both \"Ada\" and\n * \"Ada Lovelace\" without a separate prop for how many to take. What a\n * display name carries around the name itself is left out first: a title\n * before it, a generational suffix after it, and an aside in brackets at its\n * end. A name written without spaces between its words — Japanese, Chinese —\n * is one word to this, and takes one initial.\n */\nfunction initialsOfPerson(name: string, locale: string) {\n  let words = name.replace(TRAILING_ASIDE, '').split(/\\s+/u).filter(Boolean)\n  if (words.length > 1 && TITLE.test(words[0] ?? '')) {\n    words = words.slice(1)\n  }\n  if (words.length > 1 && SUFFIX.test(words.at(-1) ?? '')) {\n    words = words.slice(0, -1)\n  }\n  if (words.length === 0) {\n    return ''\n  }\n  const first = initialOf(words[0] ?? '', locale)\n  if (words.length === 1) {\n    return first\n  }\n  const last = initialOf(words.at(-1) ?? '', locale)\n  const between =\n    JOINING.test(first) && JOINING.test(last) ? ZERO_WIDTH_NON_JOINER : ''\n  return `${first}${between}${last}`\n}\n\nexport { initialOfThing, initialsOfPerson }\n"],"mappings":";AAeA,MAAMA,UAAU;AAKhB,MAAMC,UACJ;AAEF,MAAMC,wBAAwB;AAI9B,MAAMC,QAAQ;AAKd,MAAMC,SAAS;AAIf,MAAMC,iBAAiB;AAEvB,MAAMC,6BAAa,IAAIC,IAA4B;AAEnD,SAASG,YAAYC,MAAcC,QAAgB;CACjD,IAAIC,YAAYP,WAAWQ,IAAIF,MAAM;CACrC,IAAIC,cAAcE,KAAAA,GAAW;EAC3BF,YAAY,IAAIL,KAAKC,UAAUG,QAAQ,EAAEI,aAAa,WAAW,CAAC;EAClEV,WAAWW,IAAIL,QAAQC,SAAS;CAClC;CACA,OAAOK,MAAMC,KAAKN,UAAUO,QAAQT,IAAI,IAAI,EAAES,cAAcA,OAAO;AACrE;;;;;;;AAQA,SAASC,UAAUC,MAAcV,QAAgB;CAC/C,MAAMW,YAAYb,YAAYY,MAAMV,MAAM;CAK1C,OAAOF,aAHLa,UAAUE,MAAMC,aAAa1B,QAAQ2B,KAAKD,QAAQ,CAAC,KACnDH,UAAUK,GAAG,CAAC,KACd,GAAA,CACwBC,kBAAkBjB,MAAM,GAAGA,MAAM,CAAC,CAACgB,GAAG,CAAC,KAAK;AACxE;;;;;;;AAQA,SAASE,eAAeC,MAAcnB,QAAgB;CACpD,OAAOS,UAAUU,KAAKC,KAAK,GAAGpB,MAAM;AACtC;;;;;;;;;AAUA,SAASqB,iBAAiBF,MAAcnB,QAAgB;CACtD,IAAIsB,QAAQH,KAAKI,QAAQ9B,gBAAgB,EAAE,CAAC,CAAC+B,MAAM,MAAM,CAAC,CAACC,OAAOC,OAAO;CACzE,IAAIJ,MAAMK,SAAS,KAAKpC,MAAMwB,KAAKO,MAAM,MAAM,EAAE,GAC/CA,QAAQA,MAAMM,MAAM,CAAC;CAEvB,IAAIN,MAAMK,SAAS,KAAKnC,OAAOuB,KAAKO,MAAMN,GAAG,EAAE,KAAK,EAAE,GACpDM,QAAQA,MAAMM,MAAM,GAAG,EAAE;CAE3B,IAAIN,MAAMK,WAAW,GACnB,OAAO;CAET,MAAME,QAAQpB,UAAUa,MAAM,MAAM,IAAItB,MAAM;CAC9C,IAAIsB,MAAMK,WAAW,GACnB,OAAOE;CAET,MAAMC,OAAOrB,UAAUa,MAAMN,GAAG,EAAE,KAAK,IAAIhB,MAAM;CAGjD,OAAO,GAAG6B,QADRxC,QAAQ0B,KAAKc,KAAK,KAAKxC,QAAQ0B,KAAKe,IAAI,IAAIxC,wBAAwB,KAC1CwC;AAC9B"}

package/dist/navigation/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["createContext","NavigationContextValue","form","NavigationForm","selectedRoute","NavigationContext"],"sources":["../../src/navigation/context.ts"],"sourcesContent":["import { createContext } from 'react'\n\n// Apart from ./index.tsx so that file exports components alone, which is what\n// keeps fast refresh working for it — the same arrangement `src/row` uses.\n\n/**\n * What NavigationBar and NavigationRail hand their destinations: the form to\n * draw, and the route of the current one.\n */\ntype NavigationContextValue = {\n  form: NavigationForm\n  selectedRoute?: string | undefined\n}\n\n/** Which of the three forms a destination draws — see ./styles.ts. */\ntype NavigationForm = 'bar' | 'collapsed' | 'expanded'\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  form: 'bar',\n})\n\nexport type { NavigationContextValue, NavigationForm }\n\nexport { NavigationContext }\n"],"mappings":";;AAiBA,MAAMK,oBAAoBL,cAAsC,EAC9DE,MAAM,MACR,CAAC"}
+{"version":3,"file":"context.js","names":["createContext","NavigationContextValue","form","NavigationForm","selectedRoute","NavigationContext"],"sources":["../../src/navigation/context.ts"],"sourcesContent":["import { createContext } from 'react'\n\n// Apart from ./index.tsx so that file exports components alone, which is what\n// keeps fast refresh working for it — the same arrangement `src/row` uses.\n\n/**\n * What NavigationBar and NavigationRail hand their destinations: the form to\n * draw, and the route of the current one.\n */\ntype NavigationContextValue = {\n  form: NavigationForm\n  selectedRoute?: string | undefined\n}\n\n/**\n * Which form a destination draws — see ./styles.ts. `barCramped` is the bar's\n * vertical form at every width, for a bar too narrow for its horizontal one.\n */\ntype NavigationForm = 'bar' | 'barCramped' | 'collapsed' | 'expanded'\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  form: 'bar',\n})\n\nexport type { NavigationContextValue, NavigationForm }\n\nexport { NavigationContext }\n"],"mappings":";;AAoBA,MAAMK,oBAAoBL,cAAsC,EAC9DE,MAAM,MACR,CAAC"}

package/dist/navigation/index.js

@@ -1,9 +1,10 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 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 { NavigationContext } from "./context.js";
-import { barItemStyles, collapsedItemStyles, expandedItemStyles, navigationItemStyles } from "./styles.js";
+import { barItemStyles, collapsedItemStyles, crampedBarItemStyles, expandedItemStyles, navigationItemStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
 import { useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -11,6 +12,10 @@ import { Link } from "react-aria-components";
 //#region src/navigation/index.tsx
 const FORMS = {
 	bar: barItemStyles,
+	barCramped: {
+		...collapsedItemStyles,
+		item: crampedBarItemStyles.item
+	},
 	collapsed: collapsedItemStyles,
 	expanded: expandedItemStyles
 };
@@ -19,6 +24,10 @@ const RINGS = {
 		indicator: barItemStyles.indicatorRing,
 		item: barItemStyles.itemRing
 	},
+	barCramped: {
+		indicator: focus.ringVisible,
+		item: null
+	},
 	collapsed: {
 		indicator: focus.ringVisible,
 		item: null
@@ -34,9 +43,12 @@ function itemClasses(form, isCurrent) {
 }
 function itemContent(form, isCurrent, badge, icon, label) {
 	const styles = FORMS[form];
-	const glyph = badge === void 0 || badge === false ? icon : /* @__PURE__ */ jsx(Badge, {
-		count: badge === true ? void 0 : badge,
-		children: icon
+	const glyph = badge === void 0 || badge === false ? icon : /* @__PURE__ */ jsx(BadgeMarkContext, {
+		value: styles.badgeMark,
+		children: /* @__PURE__ */ jsx(Badge, {
+			count: badge === true ? void 0 : badge,
+			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),

package/dist/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","RefAttributes","LinkRenderProps","LinkProps","RACLinkProps","stylex","useContext","Link","RACLink","NavigationForm","Badge","focus","mergeStatefulStyles","NavigationContext","barItemStyles","collapsedItemStyles","expandedItemStyles","navigationItemStyles","FORMS","bar","collapsed","expanded","RINGS","indicator","indicatorRing","item","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","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 Badge from '../components/badge';\nimport { focus } from '../styles/focus';\nimport { mergeStatefulStyles } from '../styles/merge';\nimport { NavigationContext } from './context';\nimport { barItemStyles, collapsedItemStyles, 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  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  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 : <Badge count={badge === true ? undefined : badge}>{icon}</Badge>;\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","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":";;;;;;;;;;;;AAuBA,MAAMoB,QAAQ;CACZC,KAAKN;CACLO,YAAY;EACV,GAAGN;EACHO,MAAMN,qBAAqBM;CAC7B;CACAC,WAAWR;CACXS,UAAUP;AACZ;AAOA,MAAMQ,QAAQ;CACZL,KAAK;EACHM,WAAWZ,cAAca;EACzBL,MAAMR,cAAcc;CACtB;CACAP,YAAY;EACVK,WAAWf,MAAMkB;EACjBP,MAAM;CACR;CACAC,WAAW;EACTG,WAAWf,MAAMkB;EACjBP,MAAM;CACR;CACAE,UAAU;EACRE,WAAW;EACXJ,MAAMX,MAAMkB;CACd;AACF;AA0BA,SAASS,YAAYC,MAAsBC,WAAoB;CAC7D,MAAMC,SAAStB,MAAMoB;CACrB,QAAQG,UAA2BtC,MAAac,qBAAqB0B,MAAMH,OAAOnB,MAAMkB,aAAaC,OAAOI,aAAaH,MAAMI,cAAcN,YAAYC,OAAOM,qBAAqBN,OAAOO,cAAcN,MAAMO,mBAAmBT,YAAYC,OAAOS,qBAAqBT,OAAOU,cAAcT,MAAMU,cAAcZ,YAAYC,OAAOY,qBAAqBZ,OAAOa,cAAcZ,MAAMO,kBAAkBxB,MAAMc,KAAK,CAACjB,MAAMoB,MAAMa,cAAcrC,qBAAqBsC,YAAY;AACld;AAMA,SAASC,YAAYlB,MAAsBC,WAAoBT,OAAqCI,MAAiBuB,OAAkB;CACrI,MAAMjB,SAAStB,MAAMoB;CACrB,MAAMoB,QAAQ5B,UAAU6B,KAAAA,KAAa7B,UAAU,QAAQI,OAAO,oBAAC,kBAAD;EAAkB,OAAOM,OAAOoB;EACxF,UAAA,oBAAC,OAAD;GAAO,OAAO9B,UAAU,OAAO6B,KAAAA,IAAY7B;GAAQI,UAAAA;EAAY,CAAA;CAC/C,CAAA;CACtB,QAAQO,UAA2B,qBAAA,YAAA,EAAA,UAAA,CAC/B,oBAAC,QAAD;EAAM,GAAItC,MAAac,qBAAqB4C,MAAMrB,OAAOf,WAAWc,aAAaC,OAAOsB,kBAAkBrB,MAAMI,cAAcN,YAAYC,OAAOuB,0BAA0BvB,OAAOwB,mBAAmBvB,MAAMO,mBAAmBT,YAAYC,OAAOyB,0BAA0BzB,OAAO0B,mBAAmBzB,MAAMU,cAAcZ,YAAYC,OAAO2B,0BAA0B3B,OAAO4B,mBAAmB3B,MAAMO,kBAAkBxB,MAAMc,KAAK,CAACb,WAAWgB,MAAMa,cAAcrC,qBAAqBsC,YAAY;EACle,UAAA,oBAAC,QAAD;GAAM,GAAIpD,MAAac,qBAAqBiB,IAAI;GAAIwB,UAAAA;EAAY,CAAA;CAC5D,CAAA,GACN,oBAAC,QAAD;EAAM,GAAIvD,MAAac,qBAAqBwC,OAAOjB,OAAOiB,OAAOlB,aAAaC,OAAO6B,cAAc5B,MAAMa,cAAcrC,qBAAqBsC,YAAY;EACrJE,UAAAA;CACG,CAAA,CACR,EAAA,CAAA;AACJ;;;;;AAMA,SAAAa,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAwB,MAAA,EAAA3C,OAAAC,UAAAE,MAAAC,MAAA,GAAAQ,UAAA6B;CAOtB,MAAA,EAAAjC,MAAAoC,kBAGItE,WAAWQ,iBAAiB;CAChC,MAAA2B,YAAkBmC,kBAAkBf,KAAAA,KAAa1B,SAASyC;CAClD,MAAAC,KAAArE;CAAsB,MAAAsE,KAAArC,YAAA,SAAAoB,KAAAA;CAA2D,MAAAkB,KAAAlE,oBAAoB0B,YAAYC,MAAMC,SAAS,GAAGG,KAAK;CAAC,IAAAoC;CAAA,IAAAN,EAAA,OAAA1C,SAAA0C,EAAA,OAAAzC,YAAAyC,EAAA,OAAAlC,QAAAkC,EAAA,OAAAtC,QAAAsC,EAAA,OAAAjC,WAAA;EAC5IuC,KAAAtB,YAAYlB,MAAMC,WAAWT,OAAOI,MAAMH,QAAQ;EAACyC,EAAA,KAAA1C;EAAA0C,EAAA,KAAAzC;EAAAyC,EAAA,KAAAlC;EAAAkC,EAAA,KAAAtC;EAAAsC,EAAA,KAAAjC;EAAAiC,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAvC,QAAAuC,EAAA,OAAA9B,SAAA8B,EAAA,OAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EADjDC,KAAA,oBAAC,IAAD;GAAuB,gBAAAH;GAAsC3C;GAAI,GAAMS;GAAK,GAAMmC;GACpFC,UAAAA;EADU,CAAA;EAEHN,EAAA,KAAAG;EAAAH,EAAA,KAAAvC;EAAAuC,EAAA,KAAA9B;EAAA8B,EAAA,KAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAFLO;AAEK"}

package/dist/navigation/styles.js

@@ -46,6 +46,13 @@ const navigationItemStyles = {
 	}
 };
 const barItemStyles = {
+	badgeMark: {
+		kSGwAc: "xcspwbw",
+		kLqNvP: "xty0069 x19sl9hu",
+		keTefX: "xhi6r6q",
+		kVAEAm: "x10l6tqk x15m4ytg",
+		$$css: true
+	},
 	indicator: {
 		kGNEyG: "x6s0dn4",
 		kZKoxP: "x10w6t97 x10qpgbh",
@@ -97,6 +104,10 @@ const barItemStyles = {
 		$$css: true
 	},
 	item: {
+		k5JduY: "x1ktxc2h",
+		kSy8m5: "xfmxh57",
+		kcktkL: "xb7ltuz",
+		kwXMNM: "x1j6awrg",
 		kZKoxP: "x5yr21d xiioxts",
 		kaIpWk: "x1dkaolv",
 		kCS8Yb: "x1r8uery x1a6ly76",
@@ -162,6 +173,7 @@ const barItemStyles = {
 	}
 };
 const collapsedItemStyles = {
+	badgeMark: { $$css: true },
 	indicator: {
 		kGNEyG: "x6s0dn4",
 		kZKoxP: "x10w6t97",
@@ -207,6 +219,7 @@ const collapsedItemStyles = {
 	},
 	item: {
 		kXwgrk: "xdt5ytf",
+		kmuXW: "x2lah0s",
 		kOIVth: "xzoy561",
 		kzqmXN: "xh8yej3",
 		kjj79g: "xl56j7k",
@@ -236,6 +249,13 @@ const collapsedItemStyles = {
 	}
 };
 const expandedItemStyles = {
+	badgeMark: {
+		kSGwAc: "xqcrz7y",
+		kLqNvP: "x1o0tod",
+		keTefX: "x18xomjl",
+		kVAEAm: "x1n2onr6",
+		$$css: true
+	},
 	indicator: {
 		kGNEyG: "x6s0dn4",
 		k1xSpc: "x78zum5",
@@ -257,6 +277,7 @@ const expandedItemStyles = {
 		kZKoxP: "xnnlda6",
 		kaIpWk: "x1dkaolv",
 		kXwgrk: "x1q0g3np",
+		kmuXW: "x2lah0s",
 		kOIVth: "x126z3so",
 		ks0D6T: "x193iq5w",
 		kg3NbH: "x790zyz",
@@ -306,7 +327,20 @@ const expandedItemStyles = {
 		$$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, expandedItemStyles, navigationItemStyles };
+export { barItemStyles, collapsedItemStyles, crampedBarItemStyles, expandedItemStyles, navigationItemStyles };
 
 //# sourceMappingURL=styles.js.map

package/dist/navigation/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","media","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","HOVERED_OVER_NOTHING","onSecondaryContainer","hover","FOCUSED_OVER_NOTHING","focus","PRESSED_OVER_NOTHING","pressed","HOVERED_OVER_CURRENT","secondaryContainer","FOCUSED_OVER_CURRENT","PRESSED_OVER_CURRENT","navigationItemStyles","icon","kGNEyG","k1xSpc","kGuDYH","kjj79g","$$css","itemDisabled","kMwMTN","kkrTdU","label","kVQacm","kg5iWk","khDVqt","link","kB7OPa","k3XXqK","kVAEAm","kMnn75","pill","kWkggS","kaIpWk","barItemStyles","indicator","kZKoxP","kmuXW","kzqmXN","indicatorCurrent","kVAM5u","ksu8eU","kMzoRj","indicatorFocused","indicatorFocusedCurrent","indicatorHovered","indicatorHoveredCurrent","indicatorPressed","indicatorPressedCurrent","indicatorRing","kjBf7l","kInvED","kMeerF","item","kCS8Yb","kXwgrk","kzQI83","kOIVth","k7Eaqz","k8WAf4","kg3NbH","itemCurrent","itemFocused","itemFocusedCurrent","itemHovered","itemHoveredCurrent","itemPressed","itemPressedCurrent","itemRing","kMv6JI","k63SB2","kb6lSQ","kLWn49","ks0D6T","labelCurrent","collapsedItemStyles","expandedItemStyles","kSGwAc"],"sources":["../../src/navigation/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The destinations NavigationBar and NavigationRail both draw, in the three\n// forms the two pages give them. Apart from either component so the two\n// cannot drift, and outside `src/components` for the reason src/row gives.\n//\n// A vertical destination puts its icon in the page's 56dp by 32dp active\n// indicator with the label 4dp under it, in label medium: the navigation bar\n// below the medium breakpoint, and the collapsed rail. A horizontal one is a\n// pill holding the icon and the label side by side, 16dp in at either end:\n// the bar at and above the medium breakpoint at 40dp with 4dp between the\n// two, and the expanded rail at 56dp with 8dp between them, in label large.\n//\n// The current destination's pill is the secondary container, with its icon\n// in on secondary container and, under the pill, its label in secondary;\n// every other is on surface variant. A label set inside the pill, as a\n// horizontal destination sets it, takes on secondary container instead — the\n// library's own call. Secondary over secondary container is not a pair a\n// scheme is held to, and the Poster scheme's came to 4:1, short of the 4.5:1\n// text needs; on secondary container is the pair every scheme guarantees.\n//\n// The hover, focus and pressed layers are the on secondary container role\n// over whatever the pill is, at the pages' 8%, 10% and 10%, drawn on the\n// pill — the indicator in a vertical destination, the whole destination in a\n// horizontal one. They are applied in that order, so where two hold the\n// later wins, as the pages draw one layer at a time. A focused destination's\n// ring goes around the same pill; ./index.tsx says whose ring it is.\n//\n// Under forced colours the mode paints the secondary container over in its\n// background, which left the current destination looking like every other.\n// The pill takes a 2px border in `Highlight` there, which the mode keeps.\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)';\n\n// The pill's ground and the layers over it, written out whole for each\n// ground, since StyleX replaces a property whole.\nconst HOVERED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.hover} * 100%), transparent)`;\nconst FOCUSED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.focus} * 100%), transparent)`;\nconst PRESSED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.pressed} * 100%), transparent)`;\nconst HOVERED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.hover} * 100%), ${colors.secondaryContainer})`;\nconst FOCUSED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.focus} * 100%), ${colors.secondaryContainer})`;\nconst PRESSED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.pressed} * 100%), ${colors.secondaryContainer})`;\n\n// What every destination draws whatever its form.\nconst navigationItemStyles = {\n  icon: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kGuDYH: \"x1pvqxga\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  itemDisabled: {\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  label: {\n    kMwMTN: \"x1w5n3ug\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  link: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    k3XXqK: \"x1t137rt\",\n    kVAEAm: \"x1n2onr6\",\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  },\n  pill: {\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\n\n// The navigation bar's destination: vertical below the medium breakpoint and\n// horizontal at it and above, so every value that differs is a pair.\nconst barItemStyles = {\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97 x10qpgbh\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x15yg21f x11lewyt\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kWkggS: \"x15dekr4 x8jqrm0\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck xnqlxux\",\n    kMzoRj: \"x2h6xq1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    kWkggS: \"x1syr9su x8jqrm0\",\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    kWkggS: \"x1s5x49g x8jqrm0\",\n    $$css: true\n  },\n  indicatorHovered: {\n    kWkggS: \"x173luhf x8jqrm0\",\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    kWkggS: \"x1fctxn6 x8jqrm0\",\n    $$css: true\n  },\n  indicatorPressed: {\n    kWkggS: \"x1rydsgj x8jqrm0\",\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    kWkggS: \"xzpauq9 x8jqrm0\",\n    $$css: true\n  },\n  indicatorRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 x1t601oj\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  item: {\n    kZKoxP: \"x5yr21d xiioxts\",\n    kaIpWk: \"x1dkaolv\",\n    kCS8Yb: \"x1r8uery x1a6ly76\",\n    kXwgrk: \"xdt5ytf xapwh9g\",\n    kzQI83: \"x1iyjqo2 x10cb59y\",\n    kOIVth: \"xzoy561\",\n    kjj79g: \"xl56j7k\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"x1t0vds8 x1nouyz5\",\n    kg3NbH: \"xnjsko4 xze1m75\",\n    $$css: true\n  },\n  itemCurrent: {\n    kWkggS: \"xjbqb8w x1xec0pq\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"x1xldtvv x1wx4lrg\",\n    kMzoRj: \"x2h6xq1\",\n    $$css: true\n  },\n  itemFocused: {\n    kWkggS: \"xjbqb8w xdodzsd\",\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    kWkggS: \"xjbqb8w xnmt8re\",\n    $$css: true\n  },\n  itemHovered: {\n    kWkggS: \"xjbqb8w xdenq60\",\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    kWkggS: \"xjbqb8w xjq3nej\",\n    $$css: true\n  },\n  itemPressed: {\n    kWkggS: \"xjbqb8w x7fq6vu\",\n    $$css: true\n  },\n  itemPressedCurrent: {\n    kWkggS: \"xjbqb8w x9wewpu\",\n    $$css: true\n  },\n  itemRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt xxgb522\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    ks0D6T: \"x193iq5w\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"xzakmg9 x16ybrrz\",\n    $$css: true\n  }\n};\n\n// The collapsed rail's destination: always vertical, the pitch from one to\n// the next the rail's 4dp gap.\nconst collapsedItemStyles = {\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x15yg21f\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x2h6xq1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    kWkggS: \"x1syr9su\",\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  indicatorHovered: {\n    kWkggS: \"x173luhf\",\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  indicatorPressed: {\n    kWkggS: \"x1rydsgj\",\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  item: {\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    k8WAf4: \"x1t0vds8\",\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  itemCurrent: {\n    $$css: true\n  },\n  itemFocused: {\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    $$css: true\n  },\n  itemHovered: {\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    $$css: true\n  },\n  itemPressed: {\n    $$css: true\n  },\n  itemPressedCurrent: {\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    ks0D6T: \"x193iq5w\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"xzakmg9\",\n    $$css: true\n  }\n};\n\n// The expanded rail's destination: always horizontal, a 56dp pill as wide as\n// what it holds.\nconst expandedItemStyles = {\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    $$css: true\n  },\n  indicatorHovered: {\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    $$css: true\n  },\n  indicatorPressed: {\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    $$css: true\n  },\n  item: {\n    kSGwAc: \"xqcrz7y\",\n    kZKoxP: \"xnnlda6\",\n    kaIpWk: \"x1dkaolv\",\n    kXwgrk: \"x1q0g3np\",\n    kOIVth: \"x126z3so\",\n    ks0D6T: \"x193iq5w\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  itemCurrent: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x2h6xq1\",\n    $$css: true\n  },\n  itemFocused: {\n    kWkggS: \"x1syr9su\",\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  itemHovered: {\n    kWkggS: \"x173luhf\",\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  itemPressed: {\n    kWkggS: \"x1rydsgj\",\n    $$css: true\n  },\n  itemPressedCurrent: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  }\n};\nexport { barItemStyles, collapsedItemStyles, expandedItemStyles, navigationItemStyles };"],"mappings":"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"}
+{"version":3,"file":"styles.js","names":["stylex","colors","media","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","HOVERED_OVER_NOTHING","onSecondaryContainer","hover","FOCUSED_OVER_NOTHING","focus","PRESSED_OVER_NOTHING","pressed","HOVERED_OVER_CURRENT","secondaryContainer","FOCUSED_OVER_CURRENT","PRESSED_OVER_CURRENT","navigationItemStyles","icon","kGNEyG","k1xSpc","kGuDYH","kjj79g","$$css","itemDisabled","kMwMTN","kkrTdU","label","kVQacm","kg5iWk","khDVqt","link","kB7OPa","k3XXqK","kVAEAm","kMnn75","pill","kWkggS","kaIpWk","TARGET_SIZE","barItemStyles","badgeMark","kSGwAc","kLqNvP","keTefX","indicator","kZKoxP","kmuXW","kzqmXN","indicatorCurrent","kVAM5u","ksu8eU","kMzoRj","indicatorFocused","indicatorFocusedCurrent","indicatorHovered","indicatorHoveredCurrent","indicatorPressed","indicatorPressedCurrent","indicatorRing","kjBf7l","kInvED","kMeerF","item","k5JduY","kSy8m5","kcktkL","kwXMNM","kCS8Yb","kXwgrk","kzQI83","kOIVth","k7Eaqz","k8WAf4","kg3NbH","itemCurrent","itemFocused","itemFocusedCurrent","itemHovered","itemHoveredCurrent","itemPressed","itemPressedCurrent","itemRing","kMv6JI","k63SB2","kb6lSQ","kLWn49","ks0D6T","labelCurrent","collapsedItemStyles","expandedItemStyles","crampedBarItemStyles"],"sources":["../../src/navigation/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The destinations NavigationBar and NavigationRail both draw, in the three\n// forms the two pages give them. Apart from either component so the two\n// cannot drift, and outside `src/components` for the reason src/row gives.\n//\n// A vertical destination puts its icon in the page's 56dp by 32dp active\n// indicator with the label 4dp under it, in label medium: the navigation bar\n// below the medium breakpoint, and the collapsed rail. A horizontal one is a\n// pill holding the icon and the label side by side, 16dp in at either end:\n// the bar at and above the medium breakpoint at 40dp with 4dp between the\n// two, and the expanded rail at 56dp with 8dp between them, in label large.\n//\n// The current destination's pill is the secondary container, with its icon\n// in on secondary container and, under the pill, its label in secondary;\n// every other is on surface variant. A label set inside the pill, as a\n// horizontal destination sets it, takes on secondary container instead — the\n// library's own call. Secondary over secondary container is not a pair a\n// scheme is held to, and the Poster scheme's came to 4:1, short of the 4.5:1\n// text needs; on secondary container is the pair every scheme guarantees.\n//\n// The hover, focus and pressed layers are the on secondary container role\n// over whatever the pill is, at the pages' 8%, 10% and 10%, drawn on the\n// pill — the indicator in a vertical destination, the whole destination in a\n// horizontal one. They are applied in that order, so where two hold the\n// later wins, as the pages draw one layer at a time. A focused destination's\n// ring goes around the same pill; ./index.tsx says whose ring it is.\n//\n// Under forced colours the mode paints the secondary container over in its\n// background, which left the current destination looking like every other.\n// The pill takes a 2px border in `Highlight` there, which the mode keeps.\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)';\n\n// The pill's ground and the layers over it, written out whole for each\n// ground, since StyleX replaces a property whole.\nconst HOVERED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.hover} * 100%), transparent)`;\nconst FOCUSED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.focus} * 100%), transparent)`;\nconst PRESSED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.pressed} * 100%), transparent)`;\nconst HOVERED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.hover} * 100%), ${colors.secondaryContainer})`;\nconst FOCUSED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.focus} * 100%), ${colors.secondaryContainer})`;\nconst PRESSED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.pressed} * 100%), ${colors.secondaryContainer})`;\n\n// What every destination draws whatever its form.\nconst navigationItemStyles = {\n  icon: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kGuDYH: \"x1pvqxga\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  itemDisabled: {\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  label: {\n    kMwMTN: \"x1w5n3ug\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  link: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    k3XXqK: \"x1t137rt\",\n    kVAEAm: \"x1n2onr6\",\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  },\n  pill: {\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\n\n// The pages' least touch target, which a horizontal bar destination's 40dp\n// pill falls short of.\nconst TARGET_SIZE = '48px';\n\n// The navigation bar's destination: vertical below the medium breakpoint and\n// horizontal at it and above, so every value that differs is a pair.\nconst barItemStyles = {\n  badgeMark: {\n    kSGwAc: \"xcspwbw\",\n    kLqNvP: \"xty0069 x19sl9hu\",\n    keTefX: \"xhi6r6q\",\n    kVAEAm: \"x10l6tqk x15m4ytg\",\n    $$css: true\n  },\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97 x10qpgbh\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x15yg21f x11lewyt\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kWkggS: \"x15dekr4 x8jqrm0\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck xnqlxux\",\n    kMzoRj: \"x2h6xq1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    kWkggS: \"x1syr9su x8jqrm0\",\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    kWkggS: \"x1s5x49g x8jqrm0\",\n    $$css: true\n  },\n  indicatorHovered: {\n    kWkggS: \"x173luhf x8jqrm0\",\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    kWkggS: \"x1fctxn6 x8jqrm0\",\n    $$css: true\n  },\n  indicatorPressed: {\n    kWkggS: \"x1rydsgj x8jqrm0\",\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    kWkggS: \"xzpauq9 x8jqrm0\",\n    $$css: true\n  },\n  indicatorRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 x1t601oj\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  item: {\n    k5JduY: \"x1ktxc2h\",\n    kSy8m5: \"xfmxh57\",\n    kcktkL: \"xb7ltuz\",\n    kwXMNM: \"x1j6awrg\",\n    kZKoxP: \"x5yr21d xiioxts\",\n    kaIpWk: \"x1dkaolv\",\n    kCS8Yb: \"x1r8uery x1a6ly76\",\n    kXwgrk: \"xdt5ytf xapwh9g\",\n    kzQI83: \"x1iyjqo2 x10cb59y\",\n    kOIVth: \"xzoy561\",\n    kjj79g: \"xl56j7k\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"x1t0vds8 x1nouyz5\",\n    kg3NbH: \"xnjsko4 xze1m75\",\n    $$css: true\n  },\n  itemCurrent: {\n    kWkggS: \"xjbqb8w x1xec0pq\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"x1xldtvv x1wx4lrg\",\n    kMzoRj: \"x2h6xq1\",\n    $$css: true\n  },\n  itemFocused: {\n    kWkggS: \"xjbqb8w xdodzsd\",\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    kWkggS: \"xjbqb8w xnmt8re\",\n    $$css: true\n  },\n  itemHovered: {\n    kWkggS: \"xjbqb8w xdenq60\",\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    kWkggS: \"xjbqb8w xjq3nej\",\n    $$css: true\n  },\n  itemPressed: {\n    kWkggS: \"xjbqb8w x7fq6vu\",\n    $$css: true\n  },\n  itemPressedCurrent: {\n    kWkggS: \"xjbqb8w x9wewpu\",\n    $$css: true\n  },\n  itemRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt xxgb522\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    ks0D6T: \"x193iq5w\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"xzakmg9 x16ybrrz\",\n    $$css: true\n  }\n};\n\n// The collapsed rail's destination: always vertical, the pitch from one to\n// the next the rail's 4dp gap.\nconst collapsedItemStyles = {\n  badgeMark: {\n    $$css: true\n  },\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x15yg21f\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x2h6xq1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    kWkggS: \"x1syr9su\",\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  indicatorHovered: {\n    kWkggS: \"x173luhf\",\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  indicatorPressed: {\n    kWkggS: \"x1rydsgj\",\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  item: {\n    kXwgrk: \"xdt5ytf\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    k8WAf4: \"x1t0vds8\",\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  itemCurrent: {\n    $$css: true\n  },\n  itemFocused: {\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    $$css: true\n  },\n  itemHovered: {\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    $$css: true\n  },\n  itemPressed: {\n    $$css: true\n  },\n  itemPressedCurrent: {\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    ks0D6T: \"x193iq5w\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"xzakmg9\",\n    $$css: true\n  }\n};\n\n// The expanded rail's destination: always horizontal, a 56dp pill as wide as\n// what it holds.\nconst expandedItemStyles = {\n  badgeMark: {\n    kSGwAc: \"xqcrz7y\",\n    kLqNvP: \"x1o0tod\",\n    keTefX: \"x18xomjl\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    $$css: true\n  },\n  indicatorHovered: {\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    $$css: true\n  },\n  indicatorPressed: {\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    $$css: true\n  },\n  item: {\n    kSGwAc: \"xqcrz7y\",\n    kZKoxP: \"xnnlda6\",\n    kaIpWk: \"x1dkaolv\",\n    kXwgrk: \"x1q0g3np\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x126z3so\",\n    ks0D6T: \"x193iq5w\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  itemCurrent: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x2h6xq1\",\n    $$css: true\n  },\n  itemFocused: {\n    kWkggS: \"x1syr9su\",\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  itemHovered: {\n    kWkggS: \"x173luhf\",\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  itemPressed: {\n    kWkggS: \"x1rydsgj\",\n    $$css: true\n  },\n  itemPressedCurrent: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  }\n};\n\n// The bar's destination when the bar is too narrow for its horizontal form\n// at a width that would otherwise draw it — see NavigationBar. Vertical at\n// every width: the bar's own vertical item, with the collapsed rail's\n// indicator, label and badge placement, which are the bar's vertical ones.\nconst crampedBarItemStyles = {\n  item: {\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x1dkaolv\",\n    kCS8Yb: \"x1r8uery\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xzoy561\",\n    kjj79g: \"xl56j7k\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"x1t0vds8\",\n    kg3NbH: \"xnjsko4\",\n    $$css: true\n  }\n};\nexport { barItemStyles, collapsedItemStyles, crampedBarItemStyles, expandedItemStyles, navigationItemStyles };"],"mappings":"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"}

package/dist/row/styles.js

@@ -5,7 +5,7 @@ const rowStyles = {
 		kWkggS: "xjbqb8w",
 		kMzoRj: "xc342km",
 		kB7OPa: "x9f619",
-		kMwMTN: "x139gbkf",
+		kMwMTN: "x139gbkf xs5hli",
 		k1xSpc: "x78zum5",
 		kOIVth: "xxj4525",
 		kzqmXN: "xh8yej3",
@@ -13,6 +13,7 @@ const rowStyles = {
 		kg3NbH: "x790zyz",
 		kVAEAm: "x1n2onr6",
 		k9WMMc: "x1yc453h",
+		kMnn75: "xkrqix3",
 		$$css: true
 	},
 	disabled: {

package/dist/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","radii","shadows","sizing","spacing","stateLayerOpacity","typography","HOVER_CAPABLE","FORCED_COLORS","rowStyles","base","kGNEyG","kWkggS","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kOIVth","kzqmXN","k8WAf4","kg3NbH","kVAEAm","k9WMMc","$$css","disabled","kkrTdU","kAXs8y","dragging","kKwaWg","kGVxlE","kY2c9j","drawer","kaIpWk","kUOVxO","kAzted","dropTarget","kjBf7l","kInvED","k3XXqK","kMeerF","focusVisible","headlineEmphasis","k63SB2","headlineList","kMv6JI","kGuDYH","kb6lSQ","kLWn49","kHjlTd","headlineMenu","hovered","interactive","kVVagm","interactiveLayers","list","main","kXwgrk","kzQI83","k7Eaqz","menu","overline","pressed","selectedDrawer","selectedList","selectedMenu","slot","kmuXW","supporting","supportingInherit","supportingSelectedDrawer","supportingSelectedList","supportingSelectedMenu","threeLine","twoLine"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row every list draws: ListItem's, and from here on the item of every\n// collection the coverage plan adds — ListBox, Menu, List, Tree, the options\n// of Select and ComboBox. Apart from the RowContent component in ./index.tsx\n// so that file exports components alone, which is what keeps fast refresh\n// working for it.\n//\n// Three variants, because three spec pages draw three rows. The lists page\n// gives a list item a 56dp floor, a body-large headline and a body-medium\n// supporting line, and primary container when selected. The menus page gives\n// a menu item 48dp, a label-large label, and tertiary container when\n// selected. The navigation drawer page gives its row 56dp too, with a\n// label-large label like a menu's, and marks the current one with a\n// secondary-container pill held 12dp off each edge — 336dp of indicator in a\n// 360dp container, which is what that inset comes to. The layout, the\n// padding, the state layers and the disabled treatment are one row; `list`,\n// `menu` and `drawer` carry only what the three pages disagree on, and a\n// consumer applies one of them beside `base`.\n//\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, a menu, or the page.\n// The two selected states are the ones that bring a container of their own.\n\n// A pointer that can hover, for `interactiveLayers` — a plain element with no\n// render state, so its hover layer is a pseudo-class, and Chromium leaves\n// `:hover` on whatever a touch last tapped. Inside this query a touch screen\n// draws no hover at all; a touchscreen laptop still matches it for its\n// trackpad.\nconst HOVER_CAPABLE = '@media (hover: hover)';\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 rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  dragging: {\n    kWkggS: \"x14s9m32\",\n    kKwaWg: \"xdiex0u\",\n    kGVxlE: \"x4r79n0\",\n    kY2c9j: \"x1vjfegm\",\n    $$css: true\n  },\n  drawer: {\n    kaIpWk: \"x1dkaolv\",\n    kzqmXN: \"x14atkfc\",\n    kUOVxO: \"xd2r6sq\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  dropTarget: {\n    kKwaWg: \"xu73ib2\",\n    kjBf7l: \"xrgy624 x1x84bn5\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  focusVisible: {\n    kKwaWg: \"x17vw94z\",\n    kjBf7l: \"xrgy624 x1v8yhc2\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  headlineEmphasis: {\n    k63SB2: \"x1sfltvt\",\n    $$css: true\n  },\n  headlineList: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  hovered: {\n    kKwaWg: \"xbmfk57\",\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  interactiveLayers: {\n    kWkggS: \"x83qkoq x1yl1wq7 xjqqt44 xjbqb8w\",\n    $$css: true\n  },\n  list: {\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  main: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"x14qo01y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  menu: {\n    kAzted: \"x1ddmzdj\",\n    $$css: true\n  },\n  overline: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  pressed: {\n    kKwaWg: \"xdiex0u\",\n    $$css: true\n  },\n  selectedDrawer: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  selectedList: {\n    kWkggS: \"xp89om9 x1jzqe4\",\n    kMwMTN: \"xscdzaa x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  selectedMenu: {\n    kWkggS: \"xs6yvni x1jzqe4\",\n    kMwMTN: \"x3cbcwg x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  slot: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  supporting: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  supportingInherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  supportingSelectedDrawer: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  supportingSelectedList: {\n    kMwMTN: \"xscdzaa x1k5gbb1\",\n    $$css: true\n  },\n  supportingSelectedMenu: {\n    kMwMTN: \"x3cbcwg x1k5gbb1\",\n    $$css: true\n  },\n  threeLine: {\n    kGNEyG: \"x1cy8zhl\",\n    kAzted: \"x1bt55z4\",\n    $$css: true\n  },\n  twoLine: {\n    kAzted: \"x304zwk\",\n    $$css: true\n  }\n};\nexport { rowStyles };"],"mappings":";AAiDA,MAAMU,YAAY;CAChBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRZ,QAAQ;EACRG,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,UAAU;EACRf,QAAQ;EACRgB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,OAAO;CACT;CACAQ,QAAQ;EACNC,QAAQ;EACRd,QAAQ;EACRe,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,YAAY;EACVP,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACAiB,cAAc;EACZZ,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACAkB,kBAAkB;EAChBC,QAAQ;EACRnB,OAAO;CACT;CACAoB,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACA0B,cAAc;EACZL,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACA2B,SAAS;EACPtB,QAAQ;EACRH,QAAQ;EACRF,OAAO;CACT;CACA4B,aAAa;EACX1B,QAAQ;EACR2B,QAAQ;EACRhB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACA8B,mBAAmB;EACjBzC,QAAQ;EACRW,OAAO;CACT;CACA+B,MAAM;EACJpB,QAAQ;EACRX,OAAO;CACT;CACAgC,MAAM;EACJvC,QAAQ;EACRwC,QAAQ;EACRC,QAAQ;EACRxC,QAAQ;EACRyC,QAAQ;EACRnC,OAAO;CACT;CACAoC,MAAM;EACJzB,QAAQ;EACRX,OAAO;CACT;CACAqC,UAAU;EACR7C,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACAsC,SAAS;EACPjC,QAAQ;EACRL,OAAO;CACT;CACAuC,gBAAgB;EACdlD,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRH,OAAO;CACT;CACAwC,cAAc;EACZnD,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRH,OAAO;CACT;CACAyC,cAAc;EACZpD,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRH,OAAO;CACT;CACA0C,MAAM;EACJtD,QAAQ;EACRK,QAAQ;EACRkD,OAAO;EACP3C,OAAO;CACT;CACA4C,YAAY;EACVpD,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACA6C,mBAAmB;EACjBrD,QAAQ;EACRQ,OAAO;CACT;CACA8C,0BAA0B;EACxBtD,QAAQ;EACRQ,OAAO;CACT;CACA+C,wBAAwB;EACtBvD,QAAQ;EACRQ,OAAO;CACT;CACAgD,wBAAwB;EACtBxD,QAAQ;EACRQ,OAAO;CACT;CACAiD,WAAW;EACT7D,QAAQ;EACRuB,QAAQ;EACRX,OAAO;CACT;CACAkD,SAAS;EACPvC,QAAQ;EACRX,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","radii","shadows","sizing","spacing","stateLayerOpacity","typography","HOVER_CAPABLE","FORCED_COLORS","rowStyles","base","kGNEyG","kWkggS","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kOIVth","kzqmXN","k8WAf4","kg3NbH","kVAEAm","k9WMMc","kMnn75","$$css","disabled","kkrTdU","kAXs8y","dragging","kKwaWg","kGVxlE","kY2c9j","drawer","kaIpWk","kUOVxO","kAzted","dropTarget","kjBf7l","kInvED","k3XXqK","kMeerF","focusVisible","headlineEmphasis","k63SB2","headlineList","kMv6JI","kGuDYH","kb6lSQ","kLWn49","kHjlTd","headlineMenu","hovered","interactive","kVVagm","interactiveLayers","list","main","kXwgrk","kzQI83","k7Eaqz","menu","overline","pressed","selectedDrawer","selectedList","selectedMenu","slot","kmuXW","supporting","supportingInherit","supportingSelectedDrawer","supportingSelectedList","supportingSelectedMenu","threeLine","twoLine"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row every list draws: ListItem's, and from here on the item of every\n// collection the coverage plan adds — ListBox, Menu, List, Tree, the options\n// of Select and ComboBox. Apart from the RowContent component in ./index.tsx\n// so that file exports components alone, which is what keeps fast refresh\n// working for it.\n//\n// Three variants, because three spec pages draw three rows. The lists page\n// gives a list item a 56dp floor, a body-large headline and a body-medium\n// supporting line, and primary container when selected. The menus page gives\n// a menu item 48dp, a label-large label, and tertiary container when\n// selected. The navigation drawer page gives its row 56dp too, with a\n// label-large label like a menu's, and marks the current one with a\n// secondary-container pill held 12dp off each edge — 336dp of indicator in a\n// 360dp container, which is what that inset comes to. The layout, the\n// padding, the state layers and the disabled treatment are one row; `list`,\n// `menu` and `drawer` carry only what the three pages disagree on, and a\n// consumer applies one of them beside `base`.\n//\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, a menu, or the page.\n// The two selected states are the ones that bring a container of their own.\n\n// A pointer that can hover, for `interactiveLayers` — a plain element with no\n// render state, so its hover layer is a pseudo-class, and Chromium leaves\n// `:hover` on whatever a touch last tapped. Inside this query a touch screen\n// draws no hover at all; a touchscreen laptop still matches it for its\n// trackpad.\nconst HOVER_CAPABLE = '@media (hover: hover)';\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 rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf xs5hli\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  dragging: {\n    kWkggS: \"x14s9m32\",\n    kKwaWg: \"xdiex0u\",\n    kGVxlE: \"x4r79n0\",\n    kY2c9j: \"x1vjfegm\",\n    $$css: true\n  },\n  drawer: {\n    kaIpWk: \"x1dkaolv\",\n    kzqmXN: \"x14atkfc\",\n    kUOVxO: \"xd2r6sq\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  dropTarget: {\n    kKwaWg: \"xu73ib2\",\n    kjBf7l: \"xrgy624 x1x84bn5\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  focusVisible: {\n    kKwaWg: \"x17vw94z\",\n    kjBf7l: \"xrgy624 x1v8yhc2\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  headlineEmphasis: {\n    k63SB2: \"x1sfltvt\",\n    $$css: true\n  },\n  headlineList: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  hovered: {\n    kKwaWg: \"xbmfk57\",\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  interactiveLayers: {\n    kWkggS: \"x83qkoq x1yl1wq7 xjqqt44 xjbqb8w\",\n    $$css: true\n  },\n  list: {\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  main: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"x14qo01y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  menu: {\n    kAzted: \"x1ddmzdj\",\n    $$css: true\n  },\n  overline: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  pressed: {\n    kKwaWg: \"xdiex0u\",\n    $$css: true\n  },\n  selectedDrawer: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  selectedList: {\n    kWkggS: \"xp89om9 x1jzqe4\",\n    kMwMTN: \"xscdzaa x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  selectedMenu: {\n    kWkggS: \"xs6yvni x1jzqe4\",\n    kMwMTN: \"x3cbcwg x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  slot: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  supporting: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  supportingInherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  supportingSelectedDrawer: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  supportingSelectedList: {\n    kMwMTN: \"xscdzaa x1k5gbb1\",\n    $$css: true\n  },\n  supportingSelectedMenu: {\n    kMwMTN: \"x3cbcwg x1k5gbb1\",\n    $$css: true\n  },\n  threeLine: {\n    kGNEyG: \"x1cy8zhl\",\n    kAzted: \"x1bt55z4\",\n    $$css: true\n  },\n  twoLine: {\n    kAzted: \"x304zwk\",\n    $$css: true\n  }\n};\nexport { rowStyles };"],"mappings":";AAiDA,MAAMU,YAAY;CAChBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRb,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,UAAU;EACRhB,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,OAAO;CACT;CACAQ,QAAQ;EACNC,QAAQ;EACRf,QAAQ;EACRgB,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,YAAY;EACVP,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACAiB,cAAc;EACZZ,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACAkB,kBAAkB;EAChBC,QAAQ;EACRnB,OAAO;CACT;CACAoB,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACA0B,cAAc;EACZL,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACA2B,SAAS;EACPtB,QAAQ;EACRH,QAAQ;EACRF,OAAO;CACT;CACA4B,aAAa;EACX1B,QAAQ;EACR2B,QAAQ;EACRhB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACA8B,mBAAmB;EACjB1C,QAAQ;EACRY,OAAO;CACT;CACA+B,MAAM;EACJpB,QAAQ;EACRX,OAAO;CACT;CACAgC,MAAM;EACJxC,QAAQ;EACRyC,QAAQ;EACRC,QAAQ;EACRzC,QAAQ;EACR0C,QAAQ;EACRnC,OAAO;CACT;CACAoC,MAAM;EACJzB,QAAQ;EACRX,OAAO;CACT;CACAqC,UAAU;EACR9C,QAAQ;EACR8B,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACAsC,SAAS;EACPjC,QAAQ;EACRL,OAAO;CACT;CACAuC,gBAAgB;EACdnD,QAAQ;EACRG,QAAQ;EACRY,QAAQ;EACRH,OAAO;CACT;CACAwC,cAAc;EACZpD,QAAQ;EACRG,QAAQ;EACRY,QAAQ;EACRH,OAAO;CACT;CACAyC,cAAc;EACZrD,QAAQ;EACRG,QAAQ;EACRY,QAAQ;EACRH,OAAO;CACT;CACA0C,MAAM;EACJvD,QAAQ;EACRK,QAAQ;EACRmD,OAAO;EACP3C,OAAO;CACT;CACA4C,YAAY;EACVrD,QAAQ;EACR8B,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACA6C,mBAAmB;EACjBtD,QAAQ;EACRS,OAAO;CACT;CACA8C,0BAA0B;EACxBvD,QAAQ;EACRS,OAAO;CACT;CACA+C,wBAAwB;EACtBxD,QAAQ;EACRS,OAAO;CACT;CACAgD,wBAAwB;EACtBzD,QAAQ;EACRS,OAAO;CACT;CACAiD,WAAW;EACT9D,QAAQ;EACRwB,QAAQ;EACRX,OAAO;CACT;CACAkD,SAAS;EACPvC,QAAQ;EACRX,OAAO;CACT;AACF"}