@kanso-labs/kanso-ui 0.41.0 → 0.42.1

package/dist/components/app-bar/index.d.ts

@@ -66,12 +66,13 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
    */
   contentMaxInlineSize?: string;
   /**
-   * Where the headline sits in the page's outline. A screen reader moves
-   * between headings, so a bar drawn beside another bar, or under a page
-   * heading of its own, should lower it.
+   * Where the headline sits in the page's outline, as one of the six heading
+   * levels. A screen reader moves between headings, so a bar drawn beside
+   * another bar, or under a page heading of its own, should lower it. A value
+   * outside the six that reaches it untyped falls back to 1.
    * @default 1
    */
-  headingLevel?: number;
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
   /** The page's title. Wraps rather than truncating, and grows the bar with it. */
   headline?: ReactNode;
   /** Usually a back or menu icon button. Sits before the text. */

package/dist/components/app-bar/index.js

@@ -75,8 +75,7 @@ const HEADINGS = [
 	"h6"
 ];
 function heading(level) {
-	const index = Math.min(Math.max(Math.round(level), 1), HEADINGS.length) - 1;
-	return createElement(HEADINGS[index]);
+	return createElement(Number.isInteger(level) && level >= 1 && level <= 6 ? HEADINGS[level - 1] : HEADINGS[0]);
 }
 const PARAGRAPH = /* @__PURE__ */ jsx("p", {});
 const _temp = {

package/dist/components/app-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","stylex","createElement","RenderComponentProps","COLLAPSED_BLOCK_SIZE","hasContent","useRender","layers","mergeStyles","colors","motion","sizing","spacing","Text","ICON_BUTTON_TARGET","ICON_SIZE","GLYPH_INSET","HEIGHTS","lg","plain","withSubtitle","md","sm","const","COLLAPSED_HEIGHT","FORCED_COLORS","styles","pinned","k87sOh","kVAEAm","kY2c9j","$$css","root","k6CgDc","kGNEyG","kWkggS","kB7OPa","k1xSpc","kjj79g","kIyJzY","k1ekBW","kAMwcw","row","kOIVth","kzqmXN","kUOVxO","scrolled","kL6WhQ","kfdmCh","kt9PQ7","HEADLINE_VARIANT","HEADINGS","heading","level","index","Math","min","max","round","length","PARAGRAPH","_temp","kAzted","heightStyles","minBlockSize","val","undefined","_temp2","ks0D6T","rowStyles","start","end","maxInlineSize","kwRFfy","kZCmMZ","AppBarProps","Omit","align","collapsed","contentInset","contentMaxInlineSize","headingLevel","headline","leading","size","subtitle","trailing","AppBar","t0","$","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","t13","t14","props","collapse","expandedHeight","height","hasLeading","hasTrailing","t15","edgePadding","t16","t17","Symbol","for","0","className","1","t18","t19","t20","t21","t22","children","defaultTagName","hasSlot","inset","trim","_c","props","stylex.props"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { createElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { COLLAPSED_BLOCK_SIZE } from '../../hooks/useAppBarScroll';\nimport { hasContent } from '../../render/content';\nimport { useRender } from '../../render/useRender';\nimport '../../styles/layers.stylex';\nimport { layers } from '../../styles/layers.stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, sizing, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `md` and `lg` are Material Design's medium and large *flexible* bars, the\n// newer of the two sets the spec gives and the one it recommends, which is why\n// those two steps are theirs.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// The geometry Material Design lays a bar's icon buttons out on. Its tokens\n// give a 4dp leading and trailing space between the bar's edge and the first\n// button's 48dp target, no space between one target and the next, and a 24dp\n// icon centred in each — so a glyph lands 4 + 12 = 16dp in, on the page's own\n// margin.\n//\n// The library's icon button draws a 40dp box with its 48dp target out of\n// flow, so a slot pads half the difference either side and puts the whole\n// difference between two buttons, which lays the targets edge to edge as the\n// tokens do. The target is IconButton's TARGET_SIZE, a literal there for the\n// reason it gives: it is a floor the page states, not a step of the control\n// scale.\nconst ICON_BUTTON_TARGET = '48px';\nconst ICON_SIZE = '24px';\n\n// How far an icon sits inside its target, which is how much less than the\n// content inset the row is padded on an edge that holds a slot. That is what\n// puts a leading glyph, rather than the edge of its target, at the inset.\nconst GLYPH_INSET = `(${ICON_BUTTON_TARGET} - ${ICON_SIZE}) / 2`;\nconst HEIGHTS = {\n  lg: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  md: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  sm: {\n    plain: `${COLLAPSED_BLOCK_SIZE}px`,\n    withSubtitle: `${COLLAPSED_BLOCK_SIZE}px`\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.sm.plain;\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 styles = {\n  pinned: {\n    k87sOh: \"x13vifvy\",\n    kVAEAm: \"x7wzq59\",\n    kY2c9j: \"xfj7q76\",\n    $$css: true\n  },\n  root: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    kL6WhQ: \"xszdk7l\",\n    kfdmCh: \"xe3zi7u\",\n    kt9PQ7: \"x15anc7y\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  lg: 'headlineMedium',\n  md: 'headlineSmall',\n  sm: 'titleLarge'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1> unless the call site says otherwise. `headingLevel` is what says\n// otherwise, and a bar drawn beside another bar — one per pane in a\n// `ListDetail` or a `SupportingPane` — or under a page heading of its own\n// should lower it.\n//\n// Built here rather than kept as a constant per level: `headline` becomes the\n// heading's children, so a call site cannot demote the heading by passing one\n// of its own. `headline={<h2>…</h2>}` renders an h2 inside the h1 — two\n// headings where one was wanted, which React does not warn about.\n//\n// The level is looked up rather than interpolated into a tag name. `h7` is a\n// custom element as far as React is concerned, so it renders without a word\n// said and leaves the outline worse than the default would have. Disclosure's\n// own `headingLevel` hands the number to React Aria, which is why that one\n// needs no equivalent.\nconst HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nfunction heading(level: number) {\n  const index = Math.min(Math.max(Math.round(level), 1), HEADINGS.length) - 1;\n  return createElement(HEADINGS[index]);\n}\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. Each edge is worked out on its own: where it holds a\n// slot the row stops short of the inset by GLYPH_INSET, so the glyph rather\n// than its target is what sits at the inset, and where it holds none the\n// headline itself starts there. Clamped at zero, since an inset smaller than\n// a glyph's own room would otherwise ask for a negative padding, which CSS\n// throws away whole.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (start: string, end: string, maxInlineSize: string) => [_temp2, {\n    kwRFfy: end != null ? \"x120eax6\" : end,\n    kZCmMZ: start != null ? \"xnvo3vl\" : start,\n    $$css: true\n  }, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-paddingInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a bar `pinned` over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `lg` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. `useAppBarScroll` derives both from that element's scroll,\n   * and is the way to set them unless the app needs a rule of its own.\n   *\n   * Ignored on `sm`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * Collapsing hands the page back the height the bar gives up, and a bar\n   * whose state is read off the scroll offset can then undo itself in two\n   * ways. Both move the offset back under the threshold, so the bar expands,\n   * the page regains its height, and the two take turns for as long as the\n   * reader stays there.\n   *\n   * - **Scroll anchoring.** Browsers answer a change in height above the\n   *   viewport by moving the offset by the same amount, to keep the content\n   *   in place. Give the scroll container `overflow-anchor: none`, which is\n   *   also the movement you want: the content follows the bar's bottom edge\n   *   up rather than standing still while the bar shrinks behind it.\n   * - **The shorter page.** A page that overflows by less than the threshold\n   *   plus the height the bar gives back cannot scroll that far once the bar\n   *   has collapsed, so the browser pulls the offset back inside it. No\n   *   threshold avoids this, since the band moves with it; what does is not\n   *   collapsing on such a page, which is the rule `useAppBarScroll` applies.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts on each edge: the headline where nothing\n   * comes before it, and the leading icon's glyph where something does, with\n   * the headline after the icon button's target. The trailing edge is the\n   * same mirrored. Any length works, `0` included, for a bar drawn flush.\n   *\n   * The default is Material Design's own margin for a top app bar, the\n   * spacing scale's `lg` step, which is also the margin it gives body\n   * content, so a bar and the page beneath line up without either being told\n   * about the other. Set it to the page's gutter where that differs.\n   * @default spacing.lg\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /**\n   * Where the headline sits in the page's outline. A screen reader moves\n   * between headings, so a bar drawn beside another bar, or under a page\n   * heading of its own, should lower it.\n   * @default 1\n   */\n  headingLevel?: number;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Holds the bar at the top of its scroll container while the content\n   * scrolls beneath it, and keeps it painted over that content. The bar\n   * still needs a scrolling ancestor to stick inside: the window, or an\n   * element with its own overflow. A pinned bar is the one `collapsed` and\n   * `scrolled` are for.\n   * @default false\n   */\n  pinned?: boolean;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size, as steps of the library's size scale. `sm` is\n   * Material Design's small bar, a fixed 64px; `md` and `lg` are its medium\n   * and large flexible bars, which hug their text.\n   * @default 'sm'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /** A second line under the headline. Makes `md` and `lg` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `sm` is a fixed 64px bar for a page whose title is a label;\n * `md` and `lg` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = spacing.lg,\n  contentMaxInlineSize = 'none',\n  headingLevel = 1,\n  headline,\n  leading,\n  pinned = false,\n  render,\n  scrolled = false,\n  size = 'sm',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `sm` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'sm';\n  const expandedHeight = hasContent(subtitle) ? HEIGHTS[size].withSubtitle : HEIGHTS[size].plain;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  const hasLeading = hasContent(leading);\n  const hasTrailing = hasContent(trailing);\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(edgePadding(contentInset, hasLeading), edgePadding(contentInset, hasTrailing), contentMaxInlineSize))}>\n          {!hasLeading ? null : <div className=\"x6s0dn4 x9f619 x78zum5 x2lah0s x1r8zjiw x1let9r4\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xkjl1po xl56j7k xeuugli xj0a0fe x1cmllll\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xkjl1po xl56j7k xeuugli xj0a0fe x1cmllll x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {!hasContent(headline) ? null : <Text className=\"x12w9bfk xioksi3 x1nxaspg x1seskgd\" render={heading(headingLevel)} variant={collapse ? HEADLINE_VARIANT.sm : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {!hasContent(subtitle) || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {!hasTrailing ? null : <div className=\"x6s0dn4 x9f619 x78zum5 x2lah0s x1r8zjiw x1let9r4\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled, pinned && styles.pinned), props)\n    },\n    render\n  });\n}\n\n/**\n * The row's padding on one edge, for the inset the call site gave.\n *\n * A bare `0` is the one length CSS accepts without a unit, and the one it\n * rejects inside `max()`, where it reads as a number, so it is given its\n * unit before the arithmetic sees it.\n */\nfunction edgePadding(contentInset: string, hasSlot: boolean) {\n  const inset = contentInset.trim() === '0' ? '0px' : contentInset;\n  return hasSlot ? `max(0px, ${inset} - ${GLYPH_INSET})` : inset;\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","stylex","createElement","RenderComponentProps","COLLAPSED_BLOCK_SIZE","hasContent","useRender","layers","mergeStyles","colors","motion","sizing","spacing","Text","ICON_BUTTON_TARGET","ICON_SIZE","GLYPH_INSET","HEIGHTS","lg","plain","withSubtitle","md","sm","const","COLLAPSED_HEIGHT","FORCED_COLORS","styles","pinned","k87sOh","kVAEAm","kY2c9j","$$css","root","k6CgDc","kGNEyG","kWkggS","kB7OPa","k1xSpc","kjj79g","kIyJzY","k1ekBW","kAMwcw","row","kOIVth","kzqmXN","kUOVxO","scrolled","kL6WhQ","kfdmCh","kt9PQ7","HEADLINE_VARIANT","HEADINGS","heading","level","known","Number","isInteger","PARAGRAPH","_temp","kAzted","heightStyles","minBlockSize","val","undefined","_temp2","ks0D6T","rowStyles","start","end","maxInlineSize","kwRFfy","kZCmMZ","AppBarProps","Omit","align","collapsed","contentInset","contentMaxInlineSize","headingLevel","headline","leading","size","subtitle","trailing","AppBar","t0","$","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","t13","t14","props","collapse","expandedHeight","height","hasLeading","hasTrailing","t15","edgePadding","t16","t17","Symbol","for","0","className","1","t18","t19","t20","t21","t22","children","defaultTagName","hasSlot","inset","trim","_c","props","stylex.props"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { createElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { COLLAPSED_BLOCK_SIZE } from '../../hooks/useAppBarScroll';\nimport { hasContent } from '../../render/content';\nimport { useRender } from '../../render/useRender';\nimport '../../styles/layers.stylex';\nimport { layers } from '../../styles/layers.stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, sizing, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `md` and `lg` are Material Design's medium and large *flexible* bars, the\n// newer of the two sets the spec gives and the one it recommends, which is why\n// those two steps are theirs.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// The geometry Material Design lays a bar's icon buttons out on. Its tokens\n// give a 4dp leading and trailing space between the bar's edge and the first\n// button's 48dp target, no space between one target and the next, and a 24dp\n// icon centred in each — so a glyph lands 4 + 12 = 16dp in, on the page's own\n// margin.\n//\n// The library's icon button draws a 40dp box with its 48dp target out of\n// flow, so a slot pads half the difference either side and puts the whole\n// difference between two buttons, which lays the targets edge to edge as the\n// tokens do. The target is IconButton's TARGET_SIZE, a literal there for the\n// reason it gives: it is a floor the page states, not a step of the control\n// scale.\nconst ICON_BUTTON_TARGET = '48px';\nconst ICON_SIZE = '24px';\n\n// How far an icon sits inside its target, which is how much less than the\n// content inset the row is padded on an edge that holds a slot. That is what\n// puts a leading glyph, rather than the edge of its target, at the inset.\nconst GLYPH_INSET = `(${ICON_BUTTON_TARGET} - ${ICON_SIZE}) / 2`;\nconst HEIGHTS = {\n  lg: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  md: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  sm: {\n    plain: `${COLLAPSED_BLOCK_SIZE}px`,\n    withSubtitle: `${COLLAPSED_BLOCK_SIZE}px`\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.sm.plain;\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 styles = {\n  pinned: {\n    k87sOh: \"x13vifvy\",\n    kVAEAm: \"x7wzq59\",\n    kY2c9j: \"xfj7q76\",\n    $$css: true\n  },\n  root: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    kL6WhQ: \"xszdk7l\",\n    kfdmCh: \"xe3zi7u\",\n    kt9PQ7: \"x15anc7y\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  lg: 'headlineMedium',\n  md: 'headlineSmall',\n  sm: 'titleLarge'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1> unless the call site says otherwise. `headingLevel` is what says\n// otherwise, and a bar drawn beside another bar — one per pane in a\n// `ListDetail` or a `SupportingPane` — or under a page heading of its own\n// should lower it.\n//\n// Built here rather than kept as a constant per level: `headline` becomes the\n// heading's children, so a call site cannot demote the heading by passing one\n// of its own. `headline={<h2>…</h2>}` renders an h2 inside the h1 — two\n// headings where one was wanted, which React does not warn about.\n//\n// The level is looked up rather than interpolated into a tag name. `h7` is a\n// custom element as far as React is concerned, so it renders without a word\n// said and leaves the outline worse than the default would have. The prop's\n// type is the six levels, and a value outside them from a call site the type\n// does not reach — `NaN`, which rounded and clamped to no element at all and\n// took the headline out of the outline — falls back to the default h1.\n// Disclosure's own `headingLevel` hands the number to React Aria, which is\n// why that one needs no equivalent.\nconst HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nfunction heading(level: number) {\n  const known = Number.isInteger(level) && level >= 1 && level <= 6;\n  return createElement(known ? HEADINGS[level - 1] : HEADINGS[0]);\n}\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. Each edge is worked out on its own: where it holds a\n// slot the row stops short of the inset by GLYPH_INSET, so the glyph rather\n// than its target is what sits at the inset, and where it holds none the\n// headline itself starts there. Clamped at zero, since an inset smaller than\n// a glyph's own room would otherwise ask for a negative padding, which CSS\n// throws away whole.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (start: string, end: string, maxInlineSize: string) => [_temp2, {\n    kwRFfy: end != null ? \"x120eax6\" : end,\n    kZCmMZ: start != null ? \"xnvo3vl\" : start,\n    $$css: true\n  }, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-paddingInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a bar `pinned` over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `lg` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. `useAppBarScroll` derives both from that element's scroll,\n   * and is the way to set them unless the app needs a rule of its own.\n   *\n   * Ignored on `sm`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * Collapsing hands the page back the height the bar gives up, and a bar\n   * whose state is read off the scroll offset can then undo itself in two\n   * ways. Both move the offset back under the threshold, so the bar expands,\n   * the page regains its height, and the two take turns for as long as the\n   * reader stays there.\n   *\n   * - **Scroll anchoring.** Browsers answer a change in height above the\n   *   viewport by moving the offset by the same amount, to keep the content\n   *   in place. Give the scroll container `overflow-anchor: none`, which is\n   *   also the movement you want: the content follows the bar's bottom edge\n   *   up rather than standing still while the bar shrinks behind it.\n   * - **The shorter page.** A page that overflows by less than the threshold\n   *   plus the height the bar gives back cannot scroll that far once the bar\n   *   has collapsed, so the browser pulls the offset back inside it. No\n   *   threshold avoids this, since the band moves with it; what does is not\n   *   collapsing on such a page, which is the rule `useAppBarScroll` applies.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts on each edge: the headline where nothing\n   * comes before it, and the leading icon's glyph where something does, with\n   * the headline after the icon button's target. The trailing edge is the\n   * same mirrored. Any length works, `0` included, for a bar drawn flush.\n   *\n   * The default is Material Design's own margin for a top app bar, the\n   * spacing scale's `lg` step, which is also the margin it gives body\n   * content, so a bar and the page beneath line up without either being told\n   * about the other. Set it to the page's gutter where that differs.\n   * @default spacing.lg\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /**\n   * Where the headline sits in the page's outline, as one of the six heading\n   * levels. A screen reader moves between headings, so a bar drawn beside\n   * another bar, or under a page heading of its own, should lower it. A value\n   * outside the six that reaches it untyped falls back to 1.\n   * @default 1\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Holds the bar at the top of its scroll container while the content\n   * scrolls beneath it, and keeps it painted over that content. The bar\n   * still needs a scrolling ancestor to stick inside: the window, or an\n   * element with its own overflow. A pinned bar is the one `collapsed` and\n   * `scrolled` are for.\n   * @default false\n   */\n  pinned?: boolean;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size, as steps of the library's size scale. `sm` is\n   * Material Design's small bar, a fixed 64px; `md` and `lg` are its medium\n   * and large flexible bars, which hug their text.\n   * @default 'sm'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /** A second line under the headline. Makes `md` and `lg` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `sm` is a fixed 64px bar for a page whose title is a label;\n * `md` and `lg` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = spacing.lg,\n  contentMaxInlineSize = 'none',\n  headingLevel = 1,\n  headline,\n  leading,\n  pinned = false,\n  render,\n  scrolled = false,\n  size = 'sm',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `sm` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'sm';\n  const expandedHeight = hasContent(subtitle) ? HEIGHTS[size].withSubtitle : HEIGHTS[size].plain;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  const hasLeading = hasContent(leading);\n  const hasTrailing = hasContent(trailing);\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(edgePadding(contentInset, hasLeading), edgePadding(contentInset, hasTrailing), contentMaxInlineSize))}>\n          {!hasLeading ? null : <div className=\"x6s0dn4 x9f619 x78zum5 x2lah0s x1r8zjiw x1let9r4\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xkjl1po xl56j7k xeuugli xj0a0fe x1cmllll\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xkjl1po xl56j7k xeuugli xj0a0fe x1cmllll x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {!hasContent(headline) ? null : <Text className=\"x12w9bfk xioksi3 x1nxaspg x1seskgd\" render={heading(headingLevel)} variant={collapse ? HEADLINE_VARIANT.sm : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {!hasContent(subtitle) || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {!hasTrailing ? null : <div className=\"x6s0dn4 x9f619 x78zum5 x2lah0s x1r8zjiw x1let9r4\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled, pinned && styles.pinned), props)\n    },\n    render\n  });\n}\n\n/**\n * The row's padding on one edge, for the inset the call site gave.\n *\n * A bare `0` is the one length CSS accepts without a unit, and the one it\n * rejects inside `max()`, where it reads as a number, so it is given its\n * unit before the arithmetic sees it.\n */\nfunction edgePadding(contentInset: string, hasSlot: boolean) {\n  const inset = contentInset.trim() === '0' ? '0px' : contentInset;\n  return hasSlot ? `max(0px, ${inset} - ${GLYPH_INSET})` : inset;\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":"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"}

package/dist/components/avatar/index.d.ts

@@ -1,6 +1,22 @@
 import { RenderComponentProps } from "../../render/useRender.js";
+import { ImgHTMLAttributes } from "react";
 //#region src/components/avatar/index.d.ts
-type AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {
+type AvatarProps = {
+  /**
+   * Hides the avatar from assistive technology, for one beside the person's
+   * name — a row whose headline is the name, a byline — where it would
+   * otherwise announce the name a second time. `name` still supplies the
+   * initials, and is not announced.
+   * @default false
+   */
+  decorative?: boolean;
+  /**
+   * Attributes for the picture's own `<img>`: a `srcSet` and `sizes` for a
+   * screen's density, a `referrerPolicy` or `crossOrigin` for where it is
+   * served from, a `fetchPriority`, or `loading` and `decoding`, which are
+   * `lazy` and `async` unless given.
+   */
+  imgProps?: Pick<ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'fetchPriority' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet'>;
   /**
    * The person this represents. Supplies both the initials and the accessible
    * name, so a screen reader announces who it is rather than reading two
@@ -14,6 +30,13 @@ type AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {
    * names are, is one word, and takes one initial.
    */
   name: string;
+  /**
+   * Whether an avatar with no initials to take, for a blank `name`, draws
+   * Material Design's anonymous person. `false` leaves the tinted disc empty,
+   * for a loading skeleton.
+   * @default true
+   */
+  showPersonIcon?: boolean;
   /**
    * Diameter: `sm` 36px, `md` 40px, `lg` 56px.
    * @default 'md'
@@ -29,7 +52,7 @@ type AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {
    * @default 'primary'
    */
   tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';
-};
+} & Omit<RenderComponentProps<'span'>, 'children'>;
 /**
  * A person, as a circle holding their photo or, until it loads or when there
  * is none, their initials. `name` is both where the initials come from and
@@ -39,6 +62,9 @@ type AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {
  * <Avatar name="Ada Lovelace" src={photo} size="lg" />
  * ```
  *
+ * When the person's name is already written next to the avatar, mark it
+ * `decorative`, so a screen reader reads the name once.
+ *
  * Reach for ProductIcon when what is drawn is not a person; the two share
  * their sizes, so either fills the same slot in a row or a card.
  *

package/dist/components/avatar/index.js

@@ -12,6 +12,9 @@ import { jsx } from "react/jsx-runtime";
 * <Avatar name="Ada Lovelace" src={photo} size="lg" />
 * ```
 *
+* When the person's name is already written next to the avatar, mark it
+* `decorative`, so a screen reader reads the name once.
+*
 * Reach for ProductIcon when what is drawn is not a person; the two share
 * their sizes, so either fills the same slot in a row or a card.
 *

package/dist/components/avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","RenderComponentProps","Mark","AvatarProps","Omit","name","size","src","tone","Avatar","t0","$","props","t1","t2","undefined","t3","_c"],"sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["'use client'\n\nimport type { RenderComponentProps } from '../../render/useRender'\n\nimport Mark from '../../mark'\n\n// A person, drawn as a circle with the photo cropped to fill it. The box, the\n// sizes, the tones, the photo's loading and the labelling are the mark's in\n// `src/mark`, which ProductIcon draws a thing through as well, so a person\n// and a thing fill the same slot.\n//\n// Which tone a given person gets is the consuming app's decision — the design\n// cycles colours per person, and that cycle belongs where the list of people\n// is, not in this component.\n\ntype AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * The person this represents. Supplies both the initials and the accessible\n   * name, so a screen reader announces who it is rather than reading two\n   * letters aloud.\n   *\n   * A display name, as a reader would see it written: the initials are its\n   * first and last words. A title before the name (\"Dr.\"), a generational\n   * suffix after it (\"Jr.\", \"III\") and an aside in brackets at its end\n   * (\"(she/her)\") are passed over, as is punctuation a word opens with. A\n   * name written without spaces between its words, as Japanese and Chinese\n   * names are, is one word, and takes one initial.\n   */\n  name: string\n  /**\n   * Diameter: `sm` 36px, `md` 40px, `lg` 56px.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm'\n  /**\n   * A photo to show in place of the initials. The initials stay until it has\n   * loaded, and come back if it fails.\n   */\n  src?: string\n  /**\n   * Which container/on-container colour pair to tint with.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary'\n}\n\n/**\n * A person, as a circle holding their photo or, until it loads or when there\n * is none, their initials. `name` is both where the initials come from and\n * what a screen reader announces, so it is required even with a photo.\n *\n * ```tsx\n * <Avatar name=\"Ada Lovelace\" src={photo} size=\"lg\" />\n * ```\n *\n * Reach for ProductIcon when what is drawn is not a person; the two share\n * their sizes, so either fills the same slot in a row or a card.\n *\n * The call site's `className` and `style` land on the circle.\n */\nfunction Avatar({ size = 'md', tone = 'primary', ...props }: AvatarProps) {\n  return <Mark {...props} kind=\"person\" size={size} tone={tone} />\n}\n\nexport type { AvatarProps }\n\nexport default Avatar\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA4DA,SAAAU,OAAAC,IAAA;CAAA,MAAAC,IAAAX,EAAA,CAAA;CAAA,IAAAY;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAgB,CAAA,CAAAJ,MAAAO,IAAAL,MAAAM,IAAA,GAAAF,SAAAF;EAAwDC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAF,QAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAAtD,MAAAL,OAAAO,OAAAE,KAAAA,IAAA,OAAAF;CAAa,MAAAL,OAAAM,OAAAC,KAAAA,IAAA,YAAAD;CAAgB,IAAAE;CAAA,IAAAL,EAAA,OAAAC,SAAAD,EAAA,OAAAL,QAAAK,EAAA,OAAAH,MAAA;EACtCQ,KAAA,oBAAC,MAAD;GAAK,GAAKJ;GAAY,MAAA;GAAeN;GAAYE;EAAI,CAAA;EAAIG,EAAA,KAAAC;EAAAD,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAAzDK;AAAyD"}
+{"version":3,"file":"index.js","names":["c","_c","ImgHTMLAttributes","RenderComponentProps","Mark","AvatarProps","decorative","imgProps","Pick","HTMLImageElement","name","showPersonIcon","size","src","tone","Omit","Avatar","t0","$","props","t1","t2","undefined","t3","_c"],"sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ImgHTMLAttributes } from 'react'\n\nimport type { RenderComponentProps } from '../../render/useRender'\n\nimport Mark from '../../mark'\n\n// A person, drawn as a circle with the photo cropped to fill it. The box, the\n// sizes, the tones, the photo's loading and the labelling are the mark's in\n// `src/mark`, which ProductIcon draws a thing through as well, so a person\n// and a thing fill the same slot.\n//\n// Which tone a given person gets is the consuming app's decision — the design\n// cycles colours per person, and that cycle belongs where the list of people\n// is, not in this component.\n\ntype AvatarProps = {\n  /**\n   * Hides the avatar from assistive technology, for one beside the person's\n   * name — a row whose headline is the name, a byline — where it would\n   * otherwise announce the name a second time. `name` still supplies the\n   * initials, and is not announced.\n   * @default false\n   */\n  decorative?: boolean\n  /**\n   * Attributes for the picture's own `<img>`: a `srcSet` and `sizes` for a\n   * screen's density, a `referrerPolicy` or `crossOrigin` for where it is\n   * served from, a `fetchPriority`, or `loading` and `decoding`, which are\n   * `lazy` and `async` unless given.\n   */\n  imgProps?: Pick<\n    ImgHTMLAttributes<HTMLImageElement>,\n    | 'crossOrigin'\n    | 'decoding'\n    | 'fetchPriority'\n    | 'loading'\n    | 'referrerPolicy'\n    | 'sizes'\n    | 'srcSet'\n  >\n  /**\n   * The person this represents. Supplies both the initials and the accessible\n   * name, so a screen reader announces who it is rather than reading two\n   * letters aloud.\n   *\n   * A display name, as a reader would see it written: the initials are its\n   * first and last words. A title before the name (\"Dr.\"), a generational\n   * suffix after it (\"Jr.\", \"III\") and an aside in brackets at its end\n   * (\"(she/her)\") are passed over, as is punctuation a word opens with. A\n   * name written without spaces between its words, as Japanese and Chinese\n   * names are, is one word, and takes one initial.\n   */\n  name: string\n  /**\n   * Whether an avatar with no initials to take, for a blank `name`, draws\n   * Material Design's anonymous person. `false` leaves the tinted disc empty,\n   * for a loading skeleton.\n   * @default true\n   */\n  showPersonIcon?: boolean\n  /**\n   * Diameter: `sm` 36px, `md` 40px, `lg` 56px.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm'\n  /**\n   * A photo to show in place of the initials. The initials stay until it has\n   * loaded, and come back if it fails.\n   */\n  src?: string\n  /**\n   * Which container/on-container colour pair to tint with.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary'\n} & Omit<RenderComponentProps<'span'>, 'children'>\n\n/**\n * A person, as a circle holding their photo or, until it loads or when there\n * is none, their initials. `name` is both where the initials come from and\n * what a screen reader announces, so it is required even with a photo.\n *\n * ```tsx\n * <Avatar name=\"Ada Lovelace\" src={photo} size=\"lg\" />\n * ```\n *\n * When the person's name is already written next to the avatar, mark it\n * `decorative`, so a screen reader reads the name once.\n *\n * Reach for ProductIcon when what is drawn is not a person; the two share\n * their sizes, so either fills the same slot in a row or a card.\n *\n * The call site's `className` and `style` land on the circle.\n */\nfunction Avatar({ size = 'md', tone = 'primary', ...props }: AvatarProps) {\n  return <Mark {...props} kind=\"person\" size={size} tone={tone} />\n}\n\nexport type { AvatarProps }\n\nexport default Avatar\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgGA,SAAAgB,OAAAC,IAAA;CAAA,MAAAC,IAAAjB,EAAA,CAAA;CAAA,IAAAkB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAgB,CAAA,CAAAL,MAAAQ,IAAAN,MAAAO,IAAA,GAAAF,SAAAF;EAAwDC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAF,QAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAAtD,MAAAN,OAAAQ,OAAAE,KAAAA,IAAA,OAAAF;CAAa,MAAAN,OAAAO,OAAAC,KAAAA,IAAA,YAAAD;CAAgB,IAAAE;CAAA,IAAAL,EAAA,OAAAC,SAAAD,EAAA,OAAAN,QAAAM,EAAA,OAAAJ,MAAA;EACtCS,KAAA,oBAAC,MAAD;GAAK,GAAKJ;GAAY,MAAA;GAAeP;GAAYE;EAAI,CAAA;EAAII,EAAA,KAAAC;EAAAD,EAAA,KAAAN;EAAAM,EAAA,KAAAJ;EAAAI,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAAzDK;AAAyD"}

package/dist/components/product-icon/index.d.ts

@@ -1,6 +1,21 @@
 import { RenderComponentProps } from "../../render/useRender.js";
+import { ImgHTMLAttributes } from "react";
 //#region src/components/product-icon/index.d.ts
 type ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {
+  /**
+   * Hides the mark from assistive technology, for one beside the name of
+   * what it identifies, where it would otherwise announce the name a second
+   * time. `name` still supplies the initial, and is not announced.
+   * @default false
+   */
+  decorative?: boolean;
+  /**
+   * Attributes for the picture's own `<img>`: a `srcSet` and `sizes` for a
+   * screen's density, a `referrerPolicy` or `crossOrigin` for where it is
+   * served from, a `fetchPriority`, or `loading` and `decoding`, which are
+   * `lazy` and `async` unless given.
+   */
+  imgProps?: Pick<ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'fetchPriority' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet'>;
   /**
    * What this identifies. Supplies both the fallback initial and the
    * accessible name, so a screen reader announces the thing rather than
@@ -34,6 +49,9 @@ type ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {
  *
  * The mark is letterboxed rather than cropped, so a logo of any aspect ratio
  * can be handed over as it was drawn.
+ *
+ * When the thing's name is already written next to the mark, mark it
+ * `decorative`, so a screen reader reads the name once.
  */
 declare function ProductIcon({ size, tone, ...props }: ProductIconProps): import("react").JSX.Element;
 //#endregion

package/dist/components/product-icon/index.js

@@ -9,6 +9,9 @@ import { jsx } from "react/jsx-runtime";
 *
 * The mark is letterboxed rather than cropped, so a logo of any aspect ratio
 * can be handed over as it was drawn.
+*
+* When the thing's name is already written next to the mark, mark it
+* `decorative`, so a screen reader reads the name once.
 */
 function ProductIcon(t0) {
 	const $ = c(8);

package/dist/components/product-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","RenderComponentProps","Mark","ProductIconProps","Omit","name","size","src","tone","ProductIcon","t0","$","props","t1","t2","undefined","t3","_c"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["'use client'\n\nimport type { RenderComponentProps } from '../../render/useRender'\n\nimport Mark from '../../mark'\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. It is drawn as a\n// rounded square with the mark letterboxed, and its tone tints the fallback\n// rather than the square. The header of `src/mark/styles.ts` says why on all\n// three counts.\n//\n// The box, the sizes, the tones, the mark's loading and the labelling are the\n// mark's in `src/mark`, which Avatar draws a person through as well. No\n// Material Design page draws a product mark, so its sizes are Avatar's — 36,\n// 40 and 56 — which is what lets a mark and a person fill the same slot.\n\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud. The initial is the name's first letter, number or\n   * emoji, passing over punctuation it opens with: a handle's at sign, a\n   * channel's hash or a bracket.\n   */\n  name: string\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm'\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string\n  /**\n   * Which container/on-container colour pair to tint the fallback with. It is\n   * the fallback's own background, so it is gone once `src` has loaded rather\n   * than sitting behind the mark.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary'\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n  size = 'md',\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  return <Mark {...props} kind=\"thing\" size={size} tone={tone} />\n}\n\nexport type { ProductIconProps }\n\nexport default ProductIcon\n"],"mappings":";;;;;;;;;;;;AAqDA,SAAAU,YAAAC,IAAA;CAAA,MAAAC,IAAAX,EAAA,CAAA;CAAA,IAAAY;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAqB,CAAA,CAAAJ,MAAAO,IAAAL,MAAAM,IAAA,GAAAF,SAAAF;EAIFC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAF,QAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAHjB,MAAAL,OAAAO,OAAAE,KAAAA,IAAA,OAAAF;CACA,MAAAL,OAAAM,OAAAC,KAAAA,IAAA,YAAAD;CAAgB,IAAAE;CAAA,IAAAL,EAAA,OAAAC,SAAAD,EAAA,OAAAL,QAAAK,EAAA,OAAAH,MAAA;EAGTQ,KAAA,oBAAC,MAAD;GAAK,GAAKJ;GAAY,MAAA;GAAcN;GAAYE;EAAI,CAAA;EAAIG,EAAA,KAAAC;EAAAD,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAAxDK;AAAwD"}
+{"version":3,"file":"index.js","names":["c","_c","ImgHTMLAttributes","RenderComponentProps","Mark","ProductIconProps","Omit","decorative","imgProps","Pick","HTMLImageElement","name","size","src","tone","ProductIcon","t0","$","props","t1","t2","undefined","t3","_c"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ImgHTMLAttributes } from 'react'\n\nimport type { RenderComponentProps } from '../../render/useRender'\n\nimport Mark from '../../mark'\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. It is drawn as a\n// rounded square with the mark letterboxed, and its tone tints the fallback\n// rather than the square. The header of `src/mark/styles.ts` says why on all\n// three counts.\n//\n// The box, the sizes, the tones, the mark's loading and the labelling are the\n// mark's in `src/mark`, which Avatar draws a person through as well. No\n// Material Design page draws a product mark, so its sizes are Avatar's — 36,\n// 40 and 56 — which is what lets a mark and a person fill the same slot.\n\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * Hides the mark from assistive technology, for one beside the name of\n   * what it identifies, where it would otherwise announce the name a second\n   * time. `name` still supplies the initial, and is not announced.\n   * @default false\n   */\n  decorative?: boolean\n  /**\n   * Attributes for the picture's own `<img>`: a `srcSet` and `sizes` for a\n   * screen's density, a `referrerPolicy` or `crossOrigin` for where it is\n   * served from, a `fetchPriority`, or `loading` and `decoding`, which are\n   * `lazy` and `async` unless given.\n   */\n  imgProps?: Pick<\n    ImgHTMLAttributes<HTMLImageElement>,\n    | 'crossOrigin'\n    | 'decoding'\n    | 'fetchPriority'\n    | 'loading'\n    | 'referrerPolicy'\n    | 'sizes'\n    | 'srcSet'\n  >\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud. The initial is the name's first letter, number or\n   * emoji, passing over punctuation it opens with: a handle's at sign, a\n   * channel's hash or a bracket.\n   */\n  name: string\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm'\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string\n  /**\n   * Which container/on-container colour pair to tint the fallback with. It is\n   * the fallback's own background, so it is gone once `src` has loaded rather\n   * than sitting behind the mark.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary'\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n *\n * When the thing's name is already written next to the mark, mark it\n * `decorative`, so a screen reader reads the name once.\n */\nfunction ProductIcon({\n  size = 'md',\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  return <Mark {...props} kind=\"thing\" size={size} tone={tone} />\n}\n\nexport type { ProductIconProps }\n\nexport default ProductIcon\n"],"mappings":";;;;;;;;;;;;;;;AAiFA,SAAAe,YAAAC,IAAA;CAAA,MAAAC,IAAAhB,EAAA,CAAA;CAAA,IAAAiB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAqB,CAAA,CAAAJ,MAAAO,IAAAL,MAAAM,IAAA,GAAAF,SAAAF;EAIFC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAF,QAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAHjB,MAAAL,OAAAO,OAAAE,KAAAA,IAAA,OAAAF;CACA,MAAAL,OAAAM,OAAAC,KAAAA,IAAA,YAAAD;CAAgB,IAAAE;CAAA,IAAAL,EAAA,OAAAC,SAAAD,EAAA,OAAAL,QAAAK,EAAA,OAAAH,MAAA;EAGTQ,KAAA,oBAAC,MAAD;GAAK,GAAKJ;GAAY,MAAA;GAAcN;GAAYE;EAAI,CAAA;EAAIG,EAAA,KAAAC;EAAAD,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAAxDK;AAAwD"}

package/dist/glyphs/index.js

@@ -277,6 +277,24 @@ function CloseGlyph(props) {
 	} else t1 = $[2];
 	return t1;
 }
+function PersonGlyph(props) {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Glyph, {
+			...props,
+			children: t0
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
 function PlusGlyph(props) {
 	const $ = c(3);
 	let t0;
@@ -314,6 +332,6 @@ function SearchGlyph(props) {
 	return t1;
 }
 //#endregion
-export { ArrowBackGlyph, ArrowDownwardGlyph, ArrowDropDownGlyph, ArrowUpwardGlyph, CalendarGlyph, CheckGlyph, ChevronDownGlyph, ChevronEndGlyph, ClockGlyph, CloseGlyph, IndeterminateGlyph, KeyboardGlyph, MinusGlyph, PlusGlyph, SearchGlyph };
+export { ArrowBackGlyph, ArrowDownwardGlyph, ArrowDropDownGlyph, ArrowUpwardGlyph, CalendarGlyph, CheckGlyph, ChevronDownGlyph, ChevronEndGlyph, ClockGlyph, CloseGlyph, IndeterminateGlyph, KeyboardGlyph, MinusGlyph, PersonGlyph, PlusGlyph, SearchGlyph };
 
 //# sourceMappingURL=index.js.map

package/dist/glyphs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","SVGProps","stylex","mergeStyles","glyphStyles","GlyphProps","Omit","SVGSVGElement","ArrowBackGlyph","props","$","_c","t0","Symbol","for","t1","ArrowDownwardGlyph","ArrowDropDownGlyph","ArrowUpwardGlyph","CalendarGlyph","CheckGlyph","ClockGlyph","Glyph","children","t2","t3","t4","t5","t6","glyph","KeyboardGlyph","MinusGlyph","IndeterminateGlyph","ChevronDownGlyph","ChevronEndGlyph","CloseGlyph","PlusGlyph","SearchGlyph","_c","props","stylex.props"],"sources":["../../src/glyphs/index.tsx"],"sourcesContent":["import type { ReactNode, SVGProps } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../styles/merge';\nimport { glyphStyles } from './styles';\n\n// The glyphs the library's own controls draw: the check and the dash a\n// checkbox shows, the plus and minus a number field's steppers show, and\n// the magnifier and cross a search field shows. Inline SVG in\n// `currentColor`, sized by whatever renders them, and private to the\n// library — a call site with icons of its own passes them to IconButton and\n// the slots that take a node, which is why nothing here is exported from\n// the package.\n//\n// The paths are the check, the horizontal rule, the plus, the search, the\n// close, the right and down chevrons, the two sort arrows, the back arrow,\n// the drop-down arrow, the calendar, the schedule clock and the keyboard from\n// Material Symbols on their 24-unit grid, which is what the checkbox page\n// draws at 18dp, the icon buttons page at 20 and the search, menus, date\n// picker and time picker pages at 24 — the date picker's menu\n// buttons draw their arrow at 18, and a split button's menu button its\n// chevron at between 22 and 50.\n\ntype GlyphProps = Omit<SVGProps<SVGSVGElement>, 'children' | 'viewBox'>;\n\n// What a search view's back button draws, pointing at the page it returns\n// to. It says \"back\" rather than \"to the left\", so whatever renders it\n// mirrors it under a right-to-left writing mode, as ChevronEndGlyph's\n// renderers do.\nfunction ArrowBackGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\" />\n    </Glyph>;\n}\n\n// Which way a sorted column is ordered. Up is ascending and down is\n// descending, which is the direction the data tables page puts beside a\n// column header's name. Neither mirrors under a right-to-left writing mode:\n// they say \"up\" and \"down\" rather than \"onward\", and those do not flip.\nfunction ArrowDownwardGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z\" />\n    </Glyph>;\n}\n\n// What a menu button draws after its label, pointing at the list it opens.\n// Down is down in either writing direction, so it does not mirror.\nfunction ArrowDropDownGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M7 10l5 5 5-5z\" />\n    </Glyph>;\n}\nfunction ArrowUpwardGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n    </Glyph>;\n}\n\n// What the date picker's trigger draws: the calendar a date is picked from.\nfunction CalendarGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z\" />\n    </Glyph>;\n}\nfunction CheckGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n    </Glyph>;\n}\n\n// What the time picker's trigger draws, and the button that takes its\n// keyboard entry back to the dial: the clock a time is picked from.\nfunction ClockGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\n    </Glyph>;\n}\n\n/**\n * The svg every glyph draws: the 24-unit grid its path is on, the colour it\n * takes from the text around it, and its box. The call site's `className`\n * and `style` are merged with the glyph's own rather than replacing them.\n */\nfunction Glyph({\n  children,\n  ...props\n}: GlyphProps & {\n  children: ReactNode;\n}) {\n  return <svg aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props} {...mergeStyles(stylex.props(glyphStyles.glyph), props)}>\n      {children}\n    </svg>;\n}\n\n// What the time picker's dial draws on the button that switches it to typed\n// entry.\nfunction KeyboardGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H4V7h16v10zm-9-9h2v2h-2zm0 3h2v2h-2zM8 8h2v2H8zm0 3h2v2H8zm-3 0h2v2H5zm0-3h2v2H5zm3 6h8v2H8zm6-3h2v2h-2zm0-3h2v2h-2zm3 3h2v2h-2zm0-3h2v2h-2z\" />\n    </Glyph>;\n}\n\n// The same rule stands for a partly selected checkbox and for a stepper's\n// decrement; the two names say which is meant at the call site.\nfunction MinusGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 13H5v-2h14v2z\" />\n    </Glyph>;\n}\nconst IndeterminateGlyph = MinusGlyph;\n\n// Points down at the menu a split button's second half opens.\nfunction ChevronDownGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z\" />\n    </Glyph>;\n}\n\n// Points at the submenu a menu item opens. It says \"further in\" rather than\n// \"to the right\", so whatever renders it mirrors it under a right-to-left\n// writing mode — the glyph itself carries no direction of its own, since a\n// transform here would be an inline style.\nfunction ChevronEndGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n    </Glyph>;\n}\nfunction CloseGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n    </Glyph>;\n}\nfunction PlusGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n    </Glyph>;\n}\nfunction SearchGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n    </Glyph>;\n}\nexport { ArrowBackGlyph, ArrowDownwardGlyph, ArrowDropDownGlyph, ArrowUpwardGlyph, CalendarGlyph, CheckGlyph, ChevronDownGlyph, ChevronEndGlyph, ClockGlyph, CloseGlyph, IndeterminateGlyph, KeyboardGlyph, MinusGlyph, PlusGlyph, SearchGlyph };"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","SVGProps","stylex","mergeStyles","glyphStyles","GlyphProps","Omit","SVGSVGElement","ArrowBackGlyph","props","$","_c","t0","Symbol","for","t1","ArrowDownwardGlyph","ArrowDropDownGlyph","ArrowUpwardGlyph","CalendarGlyph","CheckGlyph","ClockGlyph","Glyph","children","t2","t3","t4","t5","t6","glyph","KeyboardGlyph","MinusGlyph","IndeterminateGlyph","ChevronDownGlyph","ChevronEndGlyph","CloseGlyph","PersonGlyph","PlusGlyph","SearchGlyph","_c","props","stylex.props"],"sources":["../../src/glyphs/index.tsx"],"sourcesContent":["import type { ReactNode, SVGProps } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../styles/merge';\nimport { glyphStyles } from './styles';\n\n// The glyphs the library's own controls draw: the check and the dash a\n// checkbox shows, the plus and minus a number field's steppers show, and\n// the magnifier and cross a search field shows. Inline SVG in\n// `currentColor`, sized by whatever renders them, and private to the\n// library — a call site with icons of its own passes them to IconButton and\n// the slots that take a node, which is why nothing here is exported from\n// the package.\n//\n// The paths are the check, the horizontal rule, the plus, the search, the\n// close, the right and down chevrons, the two sort arrows, the back arrow,\n// the drop-down arrow, the calendar, the schedule clock, the keyboard and the\n// person from\n// Material Symbols on their 24-unit grid, which is what the checkbox page\n// draws at 18dp, the icon buttons page at 20 and the search, menus, date\n// picker and time picker pages at 24 — the date picker's menu\n// buttons draw their arrow at 18, and a split button's menu button its\n// chevron at between 22 and 50.\n\ntype GlyphProps = Omit<SVGProps<SVGSVGElement>, 'children' | 'viewBox'>;\n\n// What a search view's back button draws, pointing at the page it returns\n// to. It says \"back\" rather than \"to the left\", so whatever renders it\n// mirrors it under a right-to-left writing mode, as ChevronEndGlyph's\n// renderers do.\nfunction ArrowBackGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\" />\n    </Glyph>;\n}\n\n// Which way a sorted column is ordered. Up is ascending and down is\n// descending, which is the direction the data tables page puts beside a\n// column header's name. Neither mirrors under a right-to-left writing mode:\n// they say \"up\" and \"down\" rather than \"onward\", and those do not flip.\nfunction ArrowDownwardGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z\" />\n    </Glyph>;\n}\n\n// What a menu button draws after its label, pointing at the list it opens.\n// Down is down in either writing direction, so it does not mirror.\nfunction ArrowDropDownGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M7 10l5 5 5-5z\" />\n    </Glyph>;\n}\nfunction ArrowUpwardGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n    </Glyph>;\n}\n\n// What the date picker's trigger draws: the calendar a date is picked from.\nfunction CalendarGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z\" />\n    </Glyph>;\n}\nfunction CheckGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n    </Glyph>;\n}\n\n// What the time picker's trigger draws, and the button that takes its\n// keyboard entry back to the dial: the clock a time is picked from.\nfunction ClockGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\n    </Glyph>;\n}\n\n/**\n * The svg every glyph draws: the 24-unit grid its path is on, the colour it\n * takes from the text around it, and its box. The call site's `className`\n * and `style` are merged with the glyph's own rather than replacing them.\n */\nfunction Glyph({\n  children,\n  ...props\n}: GlyphProps & {\n  children: ReactNode;\n}) {\n  return <svg aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props} {...mergeStyles(stylex.props(glyphStyles.glyph), props)}>\n      {children}\n    </svg>;\n}\n\n// What the time picker's dial draws on the button that switches it to typed\n// entry.\nfunction KeyboardGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H4V7h16v10zm-9-9h2v2h-2zm0 3h2v2h-2zM8 8h2v2H8zm0 3h2v2H8zm-3 0h2v2H5zm0-3h2v2H5zm3 6h8v2H8zm6-3h2v2h-2zm0-3h2v2h-2zm3 3h2v2h-2zm0-3h2v2h-2z\" />\n    </Glyph>;\n}\n\n// The same rule stands for a partly selected checkbox and for a stepper's\n// decrement; the two names say which is meant at the call site.\nfunction MinusGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 13H5v-2h14v2z\" />\n    </Glyph>;\n}\nconst IndeterminateGlyph = MinusGlyph;\n\n// Points down at the menu a split button's second half opens.\nfunction ChevronDownGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z\" />\n    </Glyph>;\n}\n\n// Points at the submenu a menu item opens. It says \"further in\" rather than\n// \"to the right\", so whatever renders it mirrors it under a right-to-left\n// writing mode — the glyph itself carries no direction of its own, since a\n// transform here would be an inline style.\nfunction ChevronEndGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n    </Glyph>;\n}\nfunction CloseGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n    </Glyph>;\n}\n\n// What an avatar with no name to take initials from draws: Material Design's\n// anonymous person, a head over shoulders.\nfunction PersonGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n    </Glyph>;\n}\nfunction PlusGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n    </Glyph>;\n}\nfunction SearchGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n    </Glyph>;\n}\nexport { ArrowBackGlyph, ArrowDownwardGlyph, ArrowDropDownGlyph, ArrowUpwardGlyph, CalendarGlyph, CheckGlyph, ChevronDownGlyph, ChevronEndGlyph, ClockGlyph, CloseGlyph, IndeterminateGlyph, KeyboardGlyph, MinusGlyph, PersonGlyph, PlusGlyph, SearchGlyph };"],"mappings":"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"}

package/dist/hooks/useImageLoadingStatus.js

@@ -1,58 +1,69 @@
 import { c } from "react/compiler-runtime";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 //#region src/hooks/useImageLoadingStatus.ts
 /**
-* Whether an image at `src` can be shown yet. It is loaded off-screen first,
-* so a component can keep its fallback in place until the picture is ready
-* and bring the fallback back if the picture fails — an `<img>` swapped in
-* as soon as `src` is known would show the browser's broken-image glyph in
-* between.
+* Whether the picture at `src` can be shown yet, from what the component's
+* own `<img>` reports. The image is rendered from the start and hidden until
+* it loads, so the browser fetches it as it would any image — `loading`,
+* `srcSet` and `sizes` all apply, which a detached preloader started on
+* mount left them no part in — and hand `onLoad` and `onError` to that
+* element. A component keeps its fallback until the picture is ready and
+* brings it back if the picture fails, so the browser's broken-image glyph
+* is never what shows.
+*
+* `previous` is the picture last loaded, while a new `src` is still loading,
+* so the component can keep showing it rather than drop back to the fallback
+* for as long as the new one takes — a theme swapping one logo for another
+* flashed the initial between them. It is the resource the browser actually
+* loaded, which is cached, so an element showing it needs no `srcSet`.
 *
 * No `src` counts as a failure, since the outcome is the same: the fallback
-* shows. What settled is remembered against the `src` it settled for, so a
-* change of `src` reads as loading again rather than as the old outcome.
+* shows. Outcomes are remembered against the `src` they came for, so a
+* change of `src` reads as loading rather than as the old outcome.
 */
 function useImageLoadingStatus(src) {
-	const $ = c(3);
-	const [settled, setSettled] = useState(null);
+	const $ = c(5);
+	const [loaded, setLoaded] = useState(null);
+	const [failed, setFailed] = useState(null);
 	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = (event) => {
+			const image = event.currentTarget;
+			const from = image.getAttribute("src");
+			if (from !== null) setLoaded({
+				shown: image.currentSrc === "" ? from : image.currentSrc,
+				src: from
+			});
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const onLoad = t0;
 	let t1;
-	if ($[0] !== src) {
-		t0 = () => {
-			if (src === void 0) return;
-			const onLoad = () => {
-				setSettled({
-					src,
-					status: "loaded"
-				});
-			};
-			const onError = () => {
-				setSettled({
-					src,
-					status: "error"
-				});
-			};
-			const image = new window.Image();
-			image.addEventListener("load", onLoad, { once: true });
-			image.addEventListener("error", onError, { once: true });
-			image.src = src;
-			return () => {
-				image.removeEventListener("load", onLoad);
-				image.removeEventListener("error", onError);
-				image.removeAttribute("src");
-			};
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (event_0) => {
+			const from_0 = event_0.currentTarget.getAttribute("src");
+			if (from_0 !== null) setFailed(from_0);
+		};
+		$[1] = t1;
+	} else t1 = $[1];
+	const onError = t1;
+	let status = "loading";
+	if (src === void 0 || failed === src) status = "error";
+	else if (loaded?.src === src) status = "loaded";
+	const t2 = status === "loading" ? loaded?.shown : void 0;
+	let t3;
+	if ($[2] !== status || $[3] !== t2) {
+		t3 = {
+			onError,
+			onLoad,
+			previous: t2,
+			status
 		};
-		t1 = [src];
-		$[0] = src;
-		$[1] = t0;
-		$[2] = t1;
-	} else {
-		t0 = $[1];
-		t1 = $[2];
-	}
-	useEffect(t0, t1);
-	if (src === void 0) return "error";
-	return settled?.src === src ? settled.status : "loading";
+		$[2] = status;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
 }
 //#endregion
 export { useImageLoadingStatus };

package/dist/hooks/useImageLoadingStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useImageLoadingStatus.js","names":["useEffect","useState","ImageLoadingStatus","Settled","src","status","useImageLoadingStatus","$","_c","settled","setSettled","t0","t1","undefined","onLoad","onError","image","window","Image","addEventListener","once","removeEventListener","removeAttribute","_c"],"sources":["../../src/hooks/useImageLoadingStatus.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\ntype ImageLoadingStatus = 'error' | 'loaded' | 'loading'\n\ninterface Settled {\n  src: string\n  status: 'error' | 'loaded'\n}\n\n/**\n * Whether an image at `src` can be shown yet. It is loaded off-screen first,\n * so a component can keep its fallback in place until the picture is ready\n * and bring the fallback back if the picture fails — an `<img>` swapped in\n * as soon as `src` is known would show the browser's broken-image glyph in\n * between.\n *\n * No `src` counts as a failure, since the outcome is the same: the fallback\n * shows. What settled is remembered against the `src` it settled for, so a\n * change of `src` reads as loading again rather than as the old outcome.\n */\nfunction useImageLoadingStatus(src: string | undefined): ImageLoadingStatus {\n  const [settled, setSettled] = useState<null | Settled>(null)\n\n  useEffect(() => {\n    if (src === undefined) {\n      return undefined\n    }\n\n    const onLoad = () => {\n      setSettled({ src, status: 'loaded' })\n    }\n    const onError = () => {\n      setSettled({ src, status: 'error' })\n    }\n\n    const image = new window.Image()\n    image.addEventListener('load', onLoad, { once: true })\n    image.addEventListener('error', onError, { once: true })\n    image.src = src\n\n    // A load `src` has moved on from, or one the component went before, is\n    // stopped rather than left to run. Taking the listeners off is what keeps\n    // it from reporting an outcome nobody asked for, and lets the image go\n    // once nothing else holds it; removing its source aborts the fetch. That\n    // is the source removed rather than set empty, which would also abort it\n    // but queue an `error` event on the way.\n    return () => {\n      image.removeEventListener('load', onLoad)\n      image.removeEventListener('error', onError)\n      image.removeAttribute('src')\n    }\n  }, [src])\n\n  if (src === undefined) {\n    return 'error'\n  }\n  return settled?.src === src ? settled.status : 'loading'\n}\n\nexport type { ImageLoadingStatus }\n\nexport { useImageLoadingStatus }\n"],"mappings":";;;;;;;;;;;;;;AAoBA,SAAAM,sBAAAF,KAAA;CAAA,MAAAG,IAAAC,EAAA,CAAA;CACE,MAAA,CAAAC,SAAAC,cAA8BT,SAAyB,IAAI;CAAC,IAAAU;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAH,KAAA;EAElDO,WAAA;GACR,IAAIP,QAAQS,KAAAA,GAAS;GAIrB,MAAAC,eAAe;IACbJ,WAAW;KAAAN;KAAAC,QAAe;IAAS,CAAC;GAAC;GAEvC,MAAAU,gBAAgB;IACdL,WAAW;KAAAN;KAAAC,QAAe;IAAQ,CAAC;GAAC;GAGtC,MAAAW,QAAc,IAAIC,OAAMC,MAAO;GAC/BF,MAAKG,iBAAkB,QAAQL,QAAQ,EAAAM,MAAQ,KAAK,CAAC;GACrDJ,MAAKG,iBAAkB,SAASJ,SAAS,EAAAK,MAAQ,KAAK,CAAC;GACvDJ,MAAKZ,MAAOA;GAAH,aAQF;IACLY,MAAKK,oBAAqB,QAAQP,MAAM;IACxCE,MAAKK,oBAAqB,SAASN,OAAO;IAC1CC,MAAKM,gBAAiB,KAAK;GAAC;EAC7B;EACAV,KAAA,CAACR,GAAG;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CA5BRP,UAAUW,IA4BPC,EAAK;CAER,IAAIR,QAAQS,KAAAA,GAAS,OACZ;CACR,OACMJ,SAAOL,QAAUA,MAAMK,QAAOJ,SAA9B;AAAiD"}
+{"version":3,"file":"useImageLoadingStatus.js","names":["SyntheticEvent","useCallback","useState","ImageLoadingStatus","Loaded","shown","src","useImageLoadingStatus","$","_c","loaded","setLoaded","failed","setFailed","t0","Symbol","for","event","image","currentTarget","from","getAttribute","currentSrc","onLoad","t1","event_0","from_0","onError","status","undefined","t2","t3","previous","_c"],"sources":["../../src/hooks/useImageLoadingStatus.ts"],"sourcesContent":["import type { SyntheticEvent } from 'react'\n\nimport { useCallback, useState } from 'react'\n\ntype ImageLoadingStatus = 'error' | 'loaded' | 'loading'\n\ninterface Loaded {\n  /** The resource the browser chose and loaded, out of a `srcSet` too. */\n  shown: string\n  /** The `src` it loaded for. */\n  src: string\n}\n\n/**\n * Whether the picture at `src` can be shown yet, from what the component's\n * own `<img>` reports. The image is rendered from the start and hidden until\n * it loads, so the browser fetches it as it would any image — `loading`,\n * `srcSet` and `sizes` all apply, which a detached preloader started on\n * mount left them no part in — and hand `onLoad` and `onError` to that\n * element. A component keeps its fallback until the picture is ready and\n * brings it back if the picture fails, so the browser's broken-image glyph\n * is never what shows.\n *\n * `previous` is the picture last loaded, while a new `src` is still loading,\n * so the component can keep showing it rather than drop back to the fallback\n * for as long as the new one takes — a theme swapping one logo for another\n * flashed the initial between them. It is the resource the browser actually\n * loaded, which is cached, so an element showing it needs no `srcSet`.\n *\n * No `src` counts as a failure, since the outcome is the same: the fallback\n * shows. Outcomes are remembered against the `src` they came for, so a\n * change of `src` reads as loading rather than as the old outcome.\n */\nfunction useImageLoadingStatus(src: string | undefined) {\n  const [loaded, setLoaded] = useState<Loaded | null>(null)\n  const [failed, setFailed] = useState<null | string>(null)\n\n  // Read off the element rather than closed over, so the one pair of\n  // handlers serves whichever `src` the element carries when it settles.\n  const onLoad = useCallback((event: SyntheticEvent<HTMLImageElement>) => {\n    const image = event.currentTarget\n    const from = image.getAttribute('src')\n    if (from !== null) {\n      setLoaded({\n        shown: image.currentSrc === '' ? from : image.currentSrc,\n        src: from,\n      })\n    }\n  }, [])\n  const onError = useCallback((event: SyntheticEvent<HTMLImageElement>) => {\n    const from = event.currentTarget.getAttribute('src')\n    if (from !== null) {\n      setFailed(from)\n    }\n  }, [])\n\n  let status: ImageLoadingStatus = 'loading'\n  if (src === undefined || failed === src) {\n    status = 'error'\n  } else if (loaded?.src === src) {\n    status = 'loaded'\n  }\n\n  return {\n    onError,\n    onLoad,\n    previous: status === 'loading' ? loaded?.shown : undefined,\n    status,\n  }\n}\n\nexport type { ImageLoadingStatus }\n\nexport { useImageLoadingStatus }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAAO,sBAAAD,KAAA;CAAA,MAAAE,IAAAC,EAAA,CAAA;CACE,MAAA,CAAAC,QAAAC,aAA4BT,SAAwB,IAAI;CACxD,MAAA,CAAAU,QAAAC,aAA4BX,SAAwB,IAAI;CAAC,IAAAY;CAAA,IAAAN,EAAA,OAAAO,OAAAC,IAAA,2BAAA,GAAA;EAI9BF,MAAAG,UAAA;GACzB,MAAAC,QAAcD,MAAKE;GACnB,MAAAC,OAAaF,MAAKG,aAAc,KAAK;GACrC,IAAID,SAAS,MACXT,UAAU;IAAAN,OACDa,MAAKI,eAAgB,KAArBF,OAAiCF,MAAKI;IAAWhB,KACnDc;GACP,CAAC;EACF;EACFZ,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CATD,MAAAe,SAAeT;CAST,IAAAU;CAAA,IAAAhB,EAAA,OAAAO,OAAAC,IAAA,2BAAA,GAAA;EACsBQ,MAAAC,YAAA;GAC1B,MAAAC,SAAaT,QAAKE,cAAcE,aAAc,KAAK;GACnD,IAAID,WAAS,MACXP,UAAUO,MAAI;EACf;EACFZ,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CALD,MAAAmB,UAAgBH;CAOhB,IAAAI,SAAiC;CACjC,IAAItB,QAAQuB,KAAAA,KAAajB,WAAWN,KAClCsB,SAASA;MACJ,IAAIlB,QAAMJ,QAAUA,KACzBsB,SAASA;CAMC,MAAAE,KAAAF,WAAW,YAAYlB,QAAML,QAA7BwB,KAAAA;CAAgD,IAAAE;CAAA,IAAAvB,EAAA,OAAAoB,UAAApB,EAAA,OAAAsB,IAAA;EAHrDC,KAAA;GAAAJ;GAAAJ;GAAAS,UAGKF;GAAgDF;EAE5D;EAACpB,EAAA,KAAAoB;EAAApB,EAAA,KAAAsB;EAAAtB,EAAA,KAAAuB;CAAA,OAAAA,KAAAvB,EAAA;CAAA,OALMuB;AAKN"}

package/dist/mark/index.js

@@ -1,11 +1,12 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../render/useRender.js";
 import { mergeStyles } from "../styles/merge.js";
+import { PersonGlyph } from "../glyphs/index.js";
 import { useImageLoadingStatus } from "../hooks/useImageLoadingStatus.js";
 import { initialOfThing, initialsOfPerson } from "./initials.js";
 import { markStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLocale } from "react-aria-components";
 //#region src/mark/index.tsx
 const KINDS = {
@@ -31,105 +32,144 @@ const KINDS = {
 * pill.
 */
 function Mark(t0) {
-	const $ = c(27);
-	const { kind, name, render, size, src, tone, ...props$1 } = t0;
+	const $ = c(41);
+	const { decorative: t1, imgProps, kind, name, render, showPersonIcon: t2, size, src, tone, ...props$1 } = t0;
+	const decorative = t1 === void 0 ? false : t1;
+	const showPersonIcon = t2 === void 0 ? true : t2;
 	const { fit, initials, shape, tintsFallback } = KINDS[kind];
-	const status = useImageLoadingStatus(src);
+	const { onError, onLoad, previous, status } = useImageLoadingStatus(src);
 	const { locale } = useLocale();
-	let t1;
+	let t3;
 	if ($[0] !== initials || $[1] !== locale || $[2] !== name) {
-		t1 = initials(name, locale);
+		t3 = initials(name, locale);
 		$[0] = initials;
 		$[1] = locale;
 		$[2] = name;
-		$[3] = t1;
-	} else t1 = $[3];
-	const fallback = t1;
-	let t2;
-	if ($[4] !== name) {
-		t2 = name.trim();
-		$[4] = name;
-		$[5] = t2;
-	} else t2 = $[5];
-	const named = t2 !== "";
-	let children;
-	if (status === "loaded") {
-		let t3;
-		if ($[6] !== fit) {
-			t3 = props(markStyles.image, fit);
-			$[6] = fit;
-			$[7] = t3;
-		} else t3 = $[7];
-		let t4;
-		if ($[8] !== src || $[9] !== t3) {
-			t4 = /* @__PURE__ */ jsx("img", {
-				alt: "",
-				src,
-				...t3
-			});
-			$[8] = src;
-			$[9] = t3;
-			$[10] = t4;
-		} else t4 = $[10];
-		children = t4;
-	} else if (tintsFallback) {
-		let t3;
-		if ($[11] !== tone) {
-			t3 = props(markStyles.fallback, markStyles[tone]);
-			$[11] = tone;
-			$[12] = t3;
-		} else t3 = $[12];
-		let t4;
-		if ($[13] !== fallback || $[14] !== t3) {
-			t4 = /* @__PURE__ */ jsx("span", {
-				...t3,
-				children: fallback
-			});
-			$[13] = fallback;
-			$[14] = t3;
-			$[15] = t4;
-		} else t4 = $[15];
-		children = t4;
-	} else children = fallback;
-	const t3 = "span";
+		$[3] = t3;
+	} else t3 = $[3];
+	const fallback = t3;
 	let t4;
-	if ($[16] !== name || $[17] !== named) {
-		t4 = named ? {
+	if ($[4] !== decorative || $[5] !== name) {
+		t4 = !decorative && name.trim() !== "";
+		$[4] = decorative;
+		$[5] = name;
+		$[6] = t4;
+	} else t4 = $[6];
+	const named = t4;
+	const showsPicture = status === "loaded" || previous !== void 0;
+	let initialsNode = null;
+	if (!showsPicture && kind === "person" && fallback === "") {
+		let t5;
+		if ($[7] !== showPersonIcon) {
+			t5 = showPersonIcon ? /* @__PURE__ */ jsx(PersonGlyph, { ...props(markStyles.personGlyph) }) : null;
+			$[7] = showPersonIcon;
+			$[8] = t5;
+		} else t5 = $[8];
+		initialsNode = t5;
+	} else if (!showsPicture) {
+		let t5;
+		if ($[9] !== fallback || $[10] !== tintsFallback || $[11] !== tone) {
+			t5 = tintsFallback ? /* @__PURE__ */ jsx("span", {
+				...props(markStyles.fallback, markStyles[tone]),
+				children: fallback
+			}) : fallback;
+			$[9] = fallback;
+			$[10] = tintsFallback;
+			$[11] = tone;
+			$[12] = t5;
+		} else t5 = $[12];
+		initialsNode = t5;
+	}
+	let t5;
+	if ($[13] !== fit || $[14] !== previous) {
+		t5 = previous === void 0 ? null : /* @__PURE__ */ jsx("img", {
+			alt: "",
+			src: previous,
+			...props(markStyles.image, fit)
+		}, previous);
+		$[13] = fit;
+		$[14] = previous;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== fit || $[17] !== imgProps || $[18] !== onError || $[19] !== onLoad || $[20] !== src || $[21] !== status) {
+		t6 = src === void 0 || status === "error" ? null : /* @__PURE__ */ jsx("img", {
+			alt: "",
+			decoding: "async",
+			loading: "lazy",
+			...imgProps,
+			onError,
+			onLoad,
+			src,
+			...props(markStyles.image, fit, status !== "loaded" && markStyles.imagePending)
+		}, src);
+		$[16] = fit;
+		$[17] = imgProps;
+		$[18] = onError;
+		$[19] = onLoad;
+		$[20] = src;
+		$[21] = status;
+		$[22] = t6;
+	} else t6 = $[22];
+	let t7;
+	if ($[23] !== initialsNode || $[24] !== t5 || $[25] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			initialsNode,
+			t5,
+			t6
+		] });
+		$[23] = initialsNode;
+		$[24] = t5;
+		$[25] = t6;
+		$[26] = t7;
+	} else t7 = $[26];
+	const children = t7;
+	const t8 = "span";
+	let t9;
+	if ($[27] !== name || $[28] !== named) {
+		t9 = named ? {
 			"aria-label": name,
 			role: "img"
 		} : {};
-		$[16] = name;
-		$[17] = named;
-		$[18] = t4;
-	} else t4 = $[18];
-	const t5 = children;
-	const t6 = mergeStyles(props(markStyles.base, shape, markStyles[size], !tintsFallback && markStyles[tone]), props$1);
-	let t7;
-	if ($[19] !== children || $[20] !== props$1 || $[21] !== t4 || $[22] !== t6) {
-		t7 = {
-			...t4,
+		$[27] = name;
+		$[28] = named;
+		$[29] = t9;
+	} else t9 = $[29];
+	let t10;
+	if ($[30] !== decorative) {
+		t10 = decorative ? { "aria-hidden": true } : {};
+		$[30] = decorative;
+		$[31] = t10;
+	} else t10 = $[31];
+	const t11 = mergeStyles(props(markStyles.base, shape, markStyles[size], !tintsFallback && markStyles[tone]), props$1);
+	let t12;
+	if ($[32] !== children || $[33] !== props$1 || $[34] !== t10 || $[35] !== t11 || $[36] !== t9) {
+		t12 = {
+			...t9,
+			...t10,
 			...props$1,
-			children: t5,
-			...t6
+			children,
+			...t11
 		};
-		$[19] = children;
-		$[20] = props$1;
-		$[21] = t4;
-		$[22] = t6;
-		$[23] = t7;
-	} else t7 = $[23];
-	let t8;
-	if ($[24] !== render || $[25] !== t7) {
-		t8 = {
-			defaultTagName: t3,
-			props: t7,
+		$[32] = children;
+		$[33] = props$1;
+		$[34] = t10;
+		$[35] = t11;
+		$[36] = t9;
+		$[37] = t12;
+	} else t12 = $[37];
+	let t13;
+	if ($[38] !== render || $[39] !== t12) {
+		t13 = {
+			defaultTagName: t8,
+			props: t12,
 			render
 		};
-		$[24] = render;
-		$[25] = t7;
-		$[26] = t8;
-	} else t8 = $[26];
-	return useRender(t8);
+		$[38] = render;
+		$[39] = t12;
+		$[40] = t13;
+	} else t13 = $[40];
+	return useRender(t13);
 }
 //#endregion
 export { Mark as default };

package/dist/mark/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","useLocale","RenderComponentProps","MarkSize","MarkTone","useImageLoadingStatus","useRender","mergeStyles","initialOfThing","initialsOfPerson","markStyles","KINDS","person","fit","cover","initials","shape","circle","tintsFallback","thing","contain","square","const","MarkProps","Omit","kind","name","size","src","tone","Mark","t0","$","_c","render","props","status","locale","t1","fallback","t2","trim","named","children","t3","image","t4","role","t6","base","t7","t8","defaultTagName","_c","props","stylex.props"],"sources":["../../src/mark/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { useLocale } from 'react-aria-components';\nimport type { RenderComponentProps } from '../render/useRender';\nimport type { MarkSize, MarkTone } from './styles';\nimport { useImageLoadingStatus } from '../hooks/useImageLoadingStatus';\nimport { useRender } from '../render/useRender';\nimport { mergeStyles } from '../styles/merge';\nimport { initialOfThing, initialsOfPerson } from './initials';\nimport { markStyles } from './styles';\n\n// What each kind of mark is drawn as. The header of `./styles` says why the\n// two differ where they do; everything not in this table is the same for\n// both.\nconst KINDS = {\n  person: {\n    fit: markStyles.cover,\n    initials: initialsOfPerson,\n    shape: markStyles.circle,\n    tintsFallback: false\n  },\n  thing: {\n    fit: markStyles.contain,\n    initials: initialOfThing,\n    shape: markStyles.square,\n    tintsFallback: true\n  }\n} as const;\ntype MarkProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /** A person, which Avatar draws, or anything else, which ProductIcon does. */\n  kind: keyof typeof KINDS;\n  /** Supplies both the fallback's initials and the accessible name. */\n  name: string;\n  size: MarkSize;\n  /** An image to show in place of the initials once it has loaded. */\n  src?: string;\n  tone: MarkTone;\n};\n\n/**\n * The small identity mark Avatar and ProductIcon both render: an image once\n * it has loaded, initials until then or if it fails, named for whoever or\n * whatever it stands for. Shared rather than written into each, so a fix to\n * one reaches both. Not a component of the library's own and not exported\n * from the package; see `src/chip` for the same arrangement around a chip's\n * pill.\n */\nfunction Mark({\n  kind,\n  name,\n  render,\n  size,\n  src,\n  tone,\n  ...props\n}: MarkProps) {\n  const {\n    fit,\n    initials,\n    shape,\n    tintsFallback\n  } = KINDS[kind];\n  // The image is shown only once it has loaded, and the initials stay until\n  // then and come back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n  const {\n    locale\n  } = useLocale();\n  const fallback = initials(name, locale);\n\n  // role/aria-label rather than letting the initials be read: \"AL\" is not\n  // what anyone means to announce. Marking the root as an image also makes\n  // its contents presentational, so the image and the initials can't be\n  // announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the initials\n  // shown when there is no image, or none has loaded yet.\n  //\n  // A blank name — one still loading, say — names nothing, so the mark is\n  // then a plain element rather than an image with no name, which a screen\n  // reader reads as a bare \"image\". Its empty initials, or its image with an\n  // empty alt, leave it nothing to announce.\n  const named = name.trim() !== '';\n  let children;\n  if (status === 'loaded') {\n    children = <img alt=\"\" src={src} {...stylex.props(markStyles.image, fit)} />;\n  } else if (tintsFallback) {\n    children = <span {...stylex.props(markStyles.fallback, markStyles[tone])}>\n        {fallback}\n      </span>;\n  } else {\n    children = fallback;\n  }\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...(named ? {\n        'aria-label': name,\n        role: 'img'\n      } : {}),\n      ...props,\n      children,\n      ...mergeStyles(stylex.props(markStyles.base, shape, markStyles[size], !tintsFallback && markStyles[tone]), props)\n    },\n    render\n  });\n}\nexport default Mark;"],"mappings":";;;;;;;;;;AAaA,MAAMW,QAAQ;CACZC,QAAQ;EACNC,KAAKH,WAAWI;EAChBC,UAAUN;EACVO,OAAON,WAAWO;EAClBC,eAAe;CACjB;CACAC,OAAO;EACLN,KAAKH,WAAWU;EAChBL,UAAUP;EACVQ,OAAON,WAAWW;EAClBH,eAAe;CACjB;AACF;;;;;;;;;AAoBA,SAAAY,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAc,MAAA,EAAAR,MAAAC,MAAAQ,QAAAP,MAAAC,KAAAC,MAAA,GAAAM,YAAAJ;CASZ,MAAA,EAAAlB,KAAAE,UAAAC,OAAAE,kBAKIP,MAAMc;CAGV,MAAAW,SAAe/B,sBAAsBuB,GAAG;CACxC,MAAA,EAAAS,WAEIpC,UAAU;CAAE,IAAAqC;CAAA,IAAAN,EAAA,OAAAjB,YAAAiB,EAAA,OAAAK,UAAAL,EAAA,OAAAN,MAAA;EACCY,KAAAvB,SAASW,MAAMW,MAAM;EAACL,EAAA,KAAAjB;EAAAiB,EAAA,KAAAK;EAAAL,EAAA,KAAAN;EAAAM,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAvC,MAAAO,WAAiBD;CAAuB,IAAAE;CAAA,IAAAR,EAAA,OAAAN,MAAA;EAa1Bc,KAAAd,KAAIe,KAAM;EAACT,EAAA,KAAAN;EAAAM,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAzB,MAAAU,QAAcF,OAAgB;CAC1BG,IAAAA;CACJ,IAAIP,WAAW,UAAQ;EAAA,IAAAQ;EAAA,IAAAZ,EAAA,OAAAnB,KAAA;GACgB+B,KAAA5C,MAAaU,WAAUmC,OAAQhC,GAAG;GAACmB,EAAA,KAAAnB;GAAAmB,EAAA,KAAAY;EAAA,OAAAA,KAAAZ,EAAA;EAAA,IAAAc;EAAA,IAAAd,EAAA,OAAAJ,OAAAI,EAAA,OAAAY,IAAA;GAA7DE,KAAA,oBAAA,OAAA;IAAS,KAAA;IAAQlB;IAAG,GAAMgB;GAAmC,CAAA;GAAIZ,EAAA,KAAAJ;GAAAI,EAAA,KAAAY;GAAAZ,EAAA,MAAAc;EAAA,OAAAA,KAAAd,EAAA;EAA5EW,WAAWA;CAAH,OACH,IAAIzB,eAAa;EAAA,IAAA0B;EAAA,IAAAZ,EAAA,QAAAH,MAAA;GACDe,KAAA5C,MAAaU,WAAU6B,UAAW7B,WAAWmB,KAAK;GAACG,EAAA,MAAAH;GAAAG,EAAA,MAAAY;EAAA,OAAAA,KAAAZ,EAAA;EAAA,IAAAc;EAAA,IAAAd,EAAA,QAAAO,YAAAP,EAAA,QAAAY,IAAA;GAA7DE,KAAA,oBAAA,QAAA;IAEF,GAFYF;IAChBL,UAAAA;GACI,CAAA;GAAAP,EAAA,MAAAO;GAAAP,EAAA,MAAAY;GAAAZ,EAAA,MAAAc;EAAA,OAAAA,KAAAd,EAAA;EAFTW,WAAWA;CAAH,OAIRA,WAAWJ;CAGK,MAAAK,KAAA;CAAM,IAAAE;CAAA,IAAAd,EAAA,QAAAN,QAAAM,EAAA,QAAAU,OAAA;EAEhBI,KAAAJ,QAAA;GAAA,cACYhB;GAAIqB,MACZ;EACH,IAHD,CAGC;EAACf,EAAA,MAAAN;EAAAM,EAAA,MAAAU;EAAAV,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAENW,MAAAA,KAAAA;CACG,MAAAK,KAAAzC,YAAYP,MAAaU,WAAUuC,MAAOjC,OAAON,WAAWiB,OAAO,CAACT,iBAAiBR,WAAWmB,KAAK,GAAGM,OAAK;CAAC,IAAAe;CAAA,IAAAlB,EAAA,QAAAW,YAAAX,EAAA,QAAAG,WAAAH,EAAA,QAAAc,MAAAd,EAAA,QAAAgB,IAAA;EAP5GE,KAAA;GAAA,GACDJ;GAGE,GACHX;GAAKQ,UACRA;GAAQ,GACLK;EACL;EAAChB,EAAA,MAAAW;EAAAX,EAAA,MAAAG;EAAAH,EAAA,MAAAc;EAAAd,EAAA,MAAAgB;EAAAhB,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAE,UAAAF,EAAA,QAAAkB,IAAA;EAVcC,KAAA;GAAAC,gBACCR;GAAMT,OACfe;GAQNhB;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAkB;EAAAlB,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OAZM1B,UAAU6C,EAYhB;AAAC"}
+{"version":3,"file":"index.js","names":["ImgHTMLAttributes","stylex","useLocale","RenderComponentProps","MarkSize","MarkTone","PersonGlyph","useImageLoadingStatus","useRender","mergeStyles","initialOfThing","initialsOfPerson","markStyles","KINDS","person","fit","cover","initials","shape","circle","tintsFallback","thing","contain","square","const","MarkProps","decorative","imgProps","Pick","HTMLImageElement","kind","name","showPersonIcon","size","src","tone","Omit","Mark","t0","$","_c","t1","render","t2","props","undefined","onError","onLoad","previous","status","locale","t3","fallback","t4","trim","named","showsPicture","initialsNode","t5","personGlyph","image","t6","imagePending","t7","children","t8","t9","role","t10","t11","base","t12","t13","defaultTagName","_c","props","stylex.props"],"sources":["../../src/mark/index.tsx"],"sourcesContent":["import type { ImgHTMLAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useLocale } from 'react-aria-components';\nimport type { RenderComponentProps } from '../render/useRender';\nimport type { MarkSize, MarkTone } from './styles';\nimport { PersonGlyph } from '../glyphs';\nimport { useImageLoadingStatus } from '../hooks/useImageLoadingStatus';\nimport { useRender } from '../render/useRender';\nimport { mergeStyles } from '../styles/merge';\nimport { initialOfThing, initialsOfPerson } from './initials';\nimport { markStyles } from './styles';\n\n// What each kind of mark is drawn as. The header of `./styles` says why the\n// two differ where they do; everything not in this table is the same for\n// both.\nconst KINDS = {\n  person: {\n    fit: markStyles.cover,\n    initials: initialsOfPerson,\n    shape: markStyles.circle,\n    tintsFallback: false\n  },\n  thing: {\n    fit: markStyles.contain,\n    initials: initialOfThing,\n    shape: markStyles.square,\n    tintsFallback: true\n  }\n} as const;\ntype MarkProps = {\n  /**\n   * Hides the mark from assistive technology, for one beside the name it\n   * stands for, which would otherwise be announced twice.\n   */\n  decorative?: boolean | undefined;\n  /** Attributes for the picture's own `<img>`, as Avatar and ProductIcon take them. */\n  imgProps?: Pick<ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'fetchPriority' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet'> | undefined;\n  /** A person, which Avatar draws, or anything else, which ProductIcon does. */\n  kind: keyof typeof KINDS;\n  /** Supplies the fallback's initials, and the accessible name unless decorative. */\n  name: string;\n  /**\n   * Whether a person with no initials to take — a blank name — draws the\n   * anonymous person glyph, or an empty disc, as a loading skeleton wants.\n   */\n  showPersonIcon?: boolean | undefined;\n  size: MarkSize;\n  /** An image to show in place of the initials once it has loaded. */\n  src?: string;\n  tone: MarkTone;\n} & Omit<RenderComponentProps<'span'>, 'children'>;\n\n/**\n * The small identity mark Avatar and ProductIcon both render: an image once\n * it has loaded, initials until then or if it fails, named for whoever or\n * whatever it stands for. Shared rather than written into each, so a fix to\n * one reaches both. Not a component of the library's own and not exported\n * from the package; see `src/chip` for the same arrangement around a chip's\n * pill.\n */\nfunction Mark({\n  decorative = false,\n  imgProps,\n  kind,\n  name,\n  render,\n  showPersonIcon = true,\n  size,\n  src,\n  tone,\n  ...props\n}: MarkProps) {\n  const {\n    fit,\n    initials,\n    shape,\n    tintsFallback\n  } = KINDS[kind];\n  // The image is rendered from the start and shown once it has loaded, and\n  // the initials stay until then and come back if it fails — see\n  // useImageLoadingStatus.\n  const {\n    onError,\n    onLoad,\n    previous,\n    status\n  } = useImageLoadingStatus(src);\n  const {\n    locale\n  } = useLocale();\n  const fallback = initials(name, locale);\n\n  // role/aria-label rather than letting the initials be read: \"AL\" is not\n  // what anyone means to announce. Marking the root as an image also makes\n  // its contents presentational, so the image and the initials can't be\n  // announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the initials\n  // shown when there is no image, or none has loaded yet.\n  //\n  // A blank name — one still loading, say — names nothing, so the mark is\n  // then a plain element rather than an image with no name, which a screen\n  // reader reads as a bare \"image\". Its empty initials, or its image with an\n  // empty alt, leave it nothing to announce.\n  //\n  // A decorative mark is hidden outright. Beside the name it stands for — a\n  // list row whose headline is the person — the name came out twice, once as\n  // the image and once as the text, and with no role the initials would be\n  // read as bare letters instead.\n  const named = !decorative && name.trim() !== '';\n\n  // The initials while no picture shows: before the first loads, and once\n  // one fails. They are left out under a picture rather than kept beneath\n  // it, since a letterboxed logo would show them through its transparent\n  // parts.\n  const showsPicture = status === 'loaded' || previous !== undefined;\n  let initialsNode = null;\n  if (!showsPicture && kind === 'person' && fallback === '') {\n    // A person with no initials to take — a blank name, one still loading —\n    // draws Material Design's anonymous person in the tone's on-container\n    // colour, where it drew an empty disc. Decoration: a blank name is\n    // unnamed, and the glyph announces nothing either.\n    initialsNode = showPersonIcon ? <PersonGlyph {...stylex.props(markStyles.personGlyph)} /> : null;\n  } else if (!showsPicture) {\n    initialsNode = tintsFallback ? <span {...stylex.props(markStyles.fallback, markStyles[tone])}>\n        {fallback}\n      </span> : fallback;\n  }\n\n  // Two pictures at most, laid over the initials. The one last loaded stays\n  // while a new `src` loads, and the new one is rendered on top of it from\n  // the start, hidden until it has loaded: lazy, so an avatar far down an\n  // unvirtualised list is not fetched on mount, and decoded off the main\n  // thread, both of which the call site can change through `imgProps`. The\n  // last loaded one is the resource the browser chose, out of a `srcSet`\n  // too, and is cached, so it needs none of those.\n  const children = <>\n      {initialsNode}\n      {previous === undefined ? null : <img alt=\"\" key={previous} src={previous} {...stylex.props(markStyles.image, fit)} />}\n      {src === undefined || status === 'error' ? null : <img alt=\"\" decoding=\"async\" key={src} loading=\"lazy\" {...imgProps} onError={onError} onLoad={onLoad} src={src} {...stylex.props(markStyles.image, fit, status !== 'loaded' && markStyles.imagePending)} />}\n    </>;\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...(named ? {\n        'aria-label': name,\n        role: 'img'\n      } : {}),\n      ...(decorative ? {\n        'aria-hidden': true\n      } : {}),\n      ...props,\n      children,\n      ...mergeStyles(stylex.props(markStyles.base, shape, markStyles[size], !tintsFallback && markStyles[tone]), props)\n    },\n    render\n  });\n}\nexport default Mark;"],"mappings":"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"}

package/dist/mark/styles.js

@@ -12,6 +12,7 @@ const markStyles = {
 		k63SB2: "x1bf3uqz",
 		kjj79g: "xl56j7k",
 		kVQacm: "xb3r6kr",
+		kVAEAm: "x1n2onr6",
 		kfSwDN: "x87ps6o",
 		$$css: true
 	},
@@ -37,7 +38,15 @@ const markStyles = {
 	},
 	image: {
 		kZKoxP: "x5yr21d",
+		kB7OPa: "x9f619",
 		kzqmXN: "xh8yej3",
+		k87sOh: "x13vifvy",
+		kLqNvP: "x1o0tod",
+		kVAEAm: "x10l6tqk",
+		$$css: true
+	},
+	imagePending: {
+		kSiTet: "xg01cxk",
 		$$css: true
 	},
 	lg: {
@@ -57,6 +66,11 @@ const markStyles = {
 		kMwMTN: "xylzu7l",
 		$$css: true
 	},
+	personGlyph: {
+		kZKoxP: "x39lw6i",
+		kzqmXN: "xycev2y",
+		$$css: true
+	},
 	positive: {
 		kWkggS: "xa3zu90",
 		kMwMTN: "x1di7zbg",

package/dist/mark/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","radii","typography","FORCED_COLORS","markStyles","base","kGNEyG","kVAM5u","ksu8eU","kMzoRj","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","circle","kaIpWk","contain","kVIFPx","cover","fallback","kZKoxP","kzqmXN","image","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","square","tertiary","MarkSize","MarkTone"],"sources":["../../src/mark/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../tokens/design.tokens.stylex';\n\n// The box Avatar and ProductIcon draw in, shared so a person and a thing stay\n// the same three sizes in the same five tones, and so either can fill a\n// leading slot without moving what sits beside it. They differ in the two\n// ways that matter for a mark rather than a face, and those are the keys a\n// kind picks between in `./index.tsx`.\n//\n// A person is a circle with the photo cropped to fill it; a thing is a\n// rounded square with its mark letterboxed. A logo is drawn to its own\n// bounding box, so a circle crops the corners it was composed with, and\n// cropping a face loses nothing anyone minds where cropping a wordmark loses\n// the word. The cost of `contain` is letterboxing — a wide mark leaves space\n// above and below — and that is the right trade for a mark whose whole job\n// is to be recognised.\n//\n// That cost is also why a thing's tone tints the fallback rather than the\n// root. A mark letterboxed into the square does not cover it, and neither\n// does one drawn with transparency, so a tint on the root showed as a\n// coloured box around every logo that was not an opaque square. On the\n// fallback it is seen exactly when it is meant to be: while there is no\n// mark, or none has loaded. A photo covers the whole circle, so a person's\n// tone stays on the root.\n//\n// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large mark is\n// bigger initials rather than differently-styled ones.\n//\n// The three are the library's own rather than a spec page's — no Material\n// Design page gives a measurement for one in text; the lists page draws its\n// leading elements in a diagram and tabulates only their padding. So they are\n// stated against the scale the library already has. `md` is 40dp, which is\n// Button's and IconButton's own `md` height, so a mark and a control line up\n// in a row. `lg` is 56dp. `sm` is 36dp, between the 32dp a chip and an `xs`\n// control take and that 40dp default, for a row that wants a person smaller\n// than the button beside them.\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 markStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1w1tqly\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  circle: {\n    kaIpWk: \"x16fbrrb\",\n    $$css: true\n  },\n  contain: {\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  cover: {\n    kVIFPx: \"xl1xv1r\",\n    $$css: true\n  },\n  fallback: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  square: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype MarkSize = 'lg' | 'md' | 'sm';\ntype MarkTone = 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\nexport type { MarkSize, MarkTone };\nexport { markStyles };"],"mappings":";AA+CA,MAAMK,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNC,QAAQ;EACRF,OAAO;CACT;CACAG,SAAS;EACPC,QAAQ;EACRJ,OAAO;CACT;CACAK,OAAO;EACLD,QAAQ;EACRJ,OAAO;CACT;CACAM,UAAU;EACRlB,QAAQ;EACRmB,QAAQ;EACRd,QAAQ;EACRe,QAAQ;EACRX,QAAQ;EACRG,OAAO;CACT;CACAS,OAAO;EACLF,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAU,IAAI;EACFH,QAAQ;EACRI,QAAQ;EACRH,QAAQ;EACRR,OAAO;CACT;CACAY,IAAI;EACFL,QAAQ;EACRI,QAAQ;EACRH,QAAQ;EACRR,OAAO;CACT;CACAa,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,UAAU;EACRF,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAiB,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAkB,WAAW;EACTJ,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAmB,IAAI;EACFZ,QAAQ;EACRI,QAAQ;EACRH,QAAQ;EACRR,OAAO;CACT;CACAoB,QAAQ;EACNlB,QAAQ;EACRF,OAAO;CACT;CACAqB,UAAU;EACRP,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","radii","typography","FORCED_COLORS","markStyles","base","kGNEyG","kVAM5u","ksu8eU","kMzoRj","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kVAEAm","kfSwDN","$$css","circle","kaIpWk","contain","kVIFPx","cover","fallback","kZKoxP","kzqmXN","image","k87sOh","kLqNvP","imagePending","kSiTet","lg","kGuDYH","md","negative","kWkggS","kMwMTN","personGlyph","positive","primary","secondary","sm","square","tertiary","MarkSize","MarkTone"],"sources":["../../src/mark/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../tokens/design.tokens.stylex';\n\n// The box Avatar and ProductIcon draw in, shared so a person and a thing stay\n// the same three sizes in the same five tones, and so either can fill a\n// leading slot without moving what sits beside it. They differ in the two\n// ways that matter for a mark rather than a face, and those are the keys a\n// kind picks between in `./index.tsx`.\n//\n// A person is a circle with the photo cropped to fill it; a thing is a\n// rounded square with its mark letterboxed. A logo is drawn to its own\n// bounding box, so a circle crops the corners it was composed with, and\n// cropping a face loses nothing anyone minds where cropping a wordmark loses\n// the word. The cost of `contain` is letterboxing — a wide mark leaves space\n// above and below — and that is the right trade for a mark whose whole job\n// is to be recognised.\n//\n// That cost is also why a thing's tone tints the fallback rather than the\n// root. A mark letterboxed into the square does not cover it, and neither\n// does one drawn with transparency, so a tint on the root showed as a\n// coloured box around every logo that was not an opaque square. On the\n// fallback it is seen exactly when it is meant to be: while there is no\n// mark, or none has loaded. A photo covers the whole circle, so a person's\n// tone stays on the root.\n//\n// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large mark is\n// bigger initials rather than differently-styled ones.\n//\n// The three are the library's own rather than a spec page's — no Material\n// Design page gives a measurement for one in text; the lists page draws its\n// leading elements in a diagram and tabulates only their padding. So they are\n// stated against the scale the library already has. `md` is 40dp, which is\n// Button's and IconButton's own `md` height, so a mark and a control line up\n// in a row. `lg` is 56dp. `sm` is 36dp, between the 32dp a chip and an `xs`\n// control take and that 40dp default, for a row that wants a person smaller\n// than the button beside them.\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 markStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1w1tqly\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  circle: {\n    kaIpWk: \"x16fbrrb\",\n    $$css: true\n  },\n  contain: {\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  cover: {\n    kVIFPx: \"xl1xv1r\",\n    $$css: true\n  },\n  fallback: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"xh8yej3\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  imagePending: {\n    kSiTet: \"xg01cxk\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  personGlyph: {\n    kZKoxP: \"x39lw6i\",\n    kzqmXN: \"xycev2y\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  square: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype MarkSize = 'lg' | 'md' | 'sm';\ntype MarkTone = 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\nexport type { MarkSize, MarkTone };\nexport { markStyles };"],"mappings":";AA+CA,MAAMK,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNC,QAAQ;EACRF,OAAO;CACT;CACAG,SAAS;EACPC,QAAQ;EACRJ,OAAO;CACT;CACAK,OAAO;EACLD,QAAQ;EACRJ,OAAO;CACT;CACAM,UAAU;EACRnB,QAAQ;EACRoB,QAAQ;EACRf,QAAQ;EACRgB,QAAQ;EACRZ,QAAQ;EACRI,OAAO;CACT;CACAS,OAAO;EACLF,QAAQ;EACRhB,QAAQ;EACRiB,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRb,QAAQ;EACRE,OAAO;CACT;CACAY,cAAc;EACZC,QAAQ;EACRb,OAAO;CACT;CACAc,IAAI;EACFP,QAAQ;EACRQ,QAAQ;EACRP,QAAQ;EACRR,OAAO;CACT;CACAgB,IAAI;EACFT,QAAQ;EACRQ,QAAQ;EACRP,QAAQ;EACRR,OAAO;CACT;CACAiB,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,aAAa;EACXb,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAqB,UAAU;EACRH,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAsB,SAAS;EACPJ,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAuB,WAAW;EACTL,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAwB,IAAI;EACFjB,QAAQ;EACRQ,QAAQ;EACRP,QAAQ;EACRR,OAAO;CACT;CACAyB,QAAQ;EACNvB,QAAQ;EACRF,OAAO;CACT;CACA0B,UAAU;EACRR,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;AACF"}

package/dist/styles.css

@@ -3418,6 +3418,10 @@
     height: 56px;
   }
 
+  .x39lw6i {
+    height: 60%;
+  }
+
   .x1peatla {
     height: 64px;
   }
@@ -4058,6 +4062,10 @@
     width: 56px;
   }
 
+  .xycev2y {
+    width: 60%;
+  }
+
   .x1v4s8kt {
     width: 6px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.41.0",
+  "version": "0.42.1",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -79,19 +79,19 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.5",
     "@babel/core": "7.29.7",
-    "@chromatic-com/storybook": "5.4.0",
+    "@chromatic-com/storybook": "5.5.1",
     "@codecov/rollup-plugin": "2.0.1",
     "@commitlint/cli": "21.2.3",
     "@commitlint/config-conventional": "21.2.3",
     "@eslint/js": "10.0.1",
-    "@kanso-labs/unplugin-style-dictionary": "0.10.25",
+    "@kanso-labs/unplugin-style-dictionary": "0.10.26",
     "@microsoft/api-extractor": "7.59.4",
     "@rolldown/plugin-babel": "0.2.4",
-    "@storybook/addon-a11y": "10.6.1",
-    "@storybook/addon-docs": "10.6.1",
-    "@storybook/addon-vitest": "10.6.1",
-    "@storybook/builder-vite": "10.6.1",
-    "@storybook/react-vite": "10.6.1",
+    "@storybook/addon-a11y": "10.6.2",
+    "@storybook/addon-docs": "10.6.2",
+    "@storybook/addon-vitest": "10.6.2",
+    "@storybook/builder-vite": "10.6.2",
+    "@storybook/react-vite": "10.6.2",
     "@stylexjs/stylex": "0.19.1",
     "@stylexjs/unplugin": "0.19.1",
     "@testing-library/dom": "10.4.2",
@@ -108,12 +108,12 @@
     "eslint-plugin-perfectionist": "5.12.1",
     "eslint-plugin-react-hooks": "7.1.1",
     "eslint-plugin-react-refresh": "0.5.7",
-    "eslint-plugin-storybook": "10.6.1",
+    "eslint-plugin-storybook": "10.6.2",
     "globals": "17.13.0",
     "husky": "9.1.7",
     "lightningcss": "1.33.0",
     "lint-staged": "17.6.0",
-    "oxfmt": "0.72.0",
+    "oxfmt": "0.73.0",
     "oxlint": "1.87.0",
     "oxlint-tsgolint": "7.0.2004",
     "playwright": "1.64.0",
@@ -121,11 +121,11 @@
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "rimraf": "6.1.3",
-    "storybook": "10.6.1",
+    "storybook": "10.6.2",
     "style-dictionary": "5.6.1",
     "tsdown": "0.23.1",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.71.1",
+    "typescript-eslint": "8.71.2",
     "vite": "8.3.4",
     "vitest": "4.1.11"
   },