@d4gger/design-system 3.0.1 → 4.0.1

package/dist/components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/index.ts"],
-  "sourcesContent": ["'use client'\n\nexport * from './accordion/Accordion'\nexport * from './accessibleIcon/AccessibleIcon'\nexport * from './alert/Alert'\nexport * from './alertDialog/AlertDialog'\nexport * from './aspectRatio/AspectRatio'\nexport * from './avatar/Avatar'\nexport * from './banner/Banner'\nexport * from './blockquote/Blockquote'\nexport * from './box/Box'\nexport * from './breadcrumb/Breadcrumb'\nexport * from './buttonGroup/ButtonGroup'\nexport * from './callout/Callout'\nexport * from './commentThread/CommentThread'\nexport * from './card/Card'\nexport * from './carousel/Carousel'\nexport * from './checkbox/Checkbox'\nexport * from './checkboxCards/CheckboxCards'\nexport * from './checkboxGroup/CheckboxGroup'\nexport * from './code/Code'\nexport * from './collapsible/Collapsible'\nexport * from './colorPicker/ColorPicker'\nexport * from './container/Container'\nexport * from './contextMenu/ContextMenu'\nexport * from './copyButton/CopyButton'\nexport * from './copyField/CopyField'\nexport * from './codeInput/CodeInput'\nexport * from './dataList/DataList'\nexport * from './dataTable/DataTable'\nexport * from './articleNodes/ArticleNodes'\nexport * from './directionProvider/DirectionProvider'\nexport * from './dropdownMenu/DropdownMenu'\nexport * from './em/Em'\nexport * from './emptyState/EmptyState'\nexport * from './editable/Editable'\nexport * from './field/Field'\nexport * from './filterBar/FilterBar'\nexport * from './flex/Flex'\nexport * from './fontProvider/FontProvider'\nexport * from './form/Form'\nexport * from './grid/Grid'\nexport * from './heading/Heading'\nexport * from './hoverCard/HoverCard'\nexport * from './iconButton/IconButton'\nexport * from './input/Input'\nexport * from './inputGroup/InputGroup'\nexport { Inset } from '../layout/Inset'\nexport type { InsetProps } from '../layout/Inset'\nexport * from './item/Item'\nexport * from './kbd/Kbd'\nexport * from './label/Label'\nexport * from './link/Link'\nexport * from './menubar/Menubar'\nexport * from './nativeSelect/NativeSelect'\nexport * from './navigationMenu/NavigationMenu'\nexport * from './numberInput/NumberInput'\nexport * from './pageContent/PageContent'\nexport * from './pageHeader/PageHeader'\nexport * from './pagination/Pagination'\nexport * from './prose/Prose'\nexport * from './pills/Pills'\nexport * from './passwordInput/PasswordInput'\nexport * from './popover/Popover'\nexport * from './progress/Progress'\nexport * from './quote/Quote'\nexport * from './radioGroup/RadioGroup'\nexport * from './radioCards/RadioCards'\nexport * from './rating/Rating'\nexport * from './result/Result'\nexport * from './scrollArea/ScrollArea'\nexport * from './section/Section'\nexport * from './segmentedControl/SegmentedControl'\nexport * from './segmentedMeter/SegmentedMeter'\nexport * from './select/Select'\nexport * from './sidebar/Sidebar'\nexport * from './skeleton/Skeleton'\nexport * from './slider/Slider'\nexport * from './slot/Slot'\nexport * from './spinner/Spinner'\nexport * from './status/Status'\nexport * from './strong/Strong'\nexport * from './switch/Switch'\nexport * from './table/Table'\nexport * from './tableOfContents/TableOfContents'\nexport * from './tabs/Tabs'\nexport * from './tabNav/TabNav'\nexport * from './tagsInput/TagsInput'\nexport * from './text/Text'\nexport * from './textArea/TextArea'\nexport * from './textAreaField/TextAreaField'\nexport * from './textField/TextField'\nexport * from './themeProvider/ThemeProvider'\nexport * from './themeProvider/ThemeScript'\nexport * from './timePicker/TimePicker'\nexport * from './toast/Toast'\nexport * from './toggle/Toggle'\nexport * from './toggleGroup/ToggleGroup'\nexport * from './toggleTip/ToggleTip'\nexport * from './toolbar/Toolbar'\nexport * from './treeView/TreeView'\nexport * from './statCard/StatCard'\nexport * from './stepper/Stepper'\nexport * from './notificationCenter/NotificationCenter'\nexport * from './timeline/Timeline'\nexport * from './themePanel/ThemePanel'\nexport * from './floatingPanel/FloatingPanel'\nexport * from './colorSwatch/ColorSwatch'\nexport * from './marquee/Marquee'\nexport * from './metric/Metric'\n// Full barrel-vs-roster audit, run after finding 3 of these one at a time (QrCode, Command,\n// Drawer) while composing the cabinet migration this session. `Menu` is deliberately NOT added:\n// roster/wiring-notes keep it internal-only. Calendar/Chart/Resizable/RichTextEditor/Sonner/\n// SortableList are ALSO deliberately not added here \u2014 public-contract.test.ts documents these\n// adapter-backed families (real heavy peer deps: react-day-picker, recharts, react-resizable-\n// panels, @tiptap/*, sonner, @dnd-kit/*) as intentionally excluded from the eager-loaded root\n// barrel, reachable only via their own dedicated subpaths \u2014 adding them here would reintroduce\n// exactly the eager-load regression that test guards against. `Sheet` has no such adapter\n// (radix-compound, same category as Dialog/Popover which are already barrel-exported) \u2014 genuine gap.\n//\n// CORRECTION (2026-09-20): that audit's own \"genuine gap, wire it in\" fixes for QrCode, Command,\n// and Drawer \u2014 plus the pre-existing InputOtp and PhoneInput barrel exports \u2014 never got checked\n// against the SAME heavy-peer criterion this comment already applies to Calendar/Chart/etc.\n// Combobox has the identical problem, added earlier without a subpath at all. All six carry an\n// optional peer (cmdk, framer-motion via `../../motion`, vaul, input-otp, react-phone-number-input,\n// qrcode.react respectively \u2014 see package.json peerDependenciesMeta) that isn't installed unless a\n// consumer explicitly needs that component \u2014 confirmed as a real, external-consumer-breaking bug\n// (not just a bundle-size nit) building a bare `Button`+`Card` import from a fresh consumer with\n// none of those peers installed: Vite/Rolldown fails module resolution on the barrel's Combobox/\n// Command re-exports before tree-shaking ever runs, because static `export *` re-exports must\n// resolve their whole graph regardless of what the consumer actually imports. Moved all six to\n// dedicated-subpath-only, matching this file's own established policy for the adapter-backed\n// families above: Command \u2192 `./command`, Drawer \u2192 `./drawer`, InputOtp \u2192 `./input-otp`,\n// PhoneInput \u2192 `./phone-input`, QrCode \u2192 `./qr-code` (already existed); Combobox \u2192 `./combobox`\n// (newly added to package.json's `exports`, since it never had one).\n"],
-  "mappings": ";AAEA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,aAAa;AAEtB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["'use client'\n\nexport * from './accordion/Accordion'\nexport * from './accessibleIcon/AccessibleIcon'\nexport * from './alert/Alert'\nexport * from './alertDialog/AlertDialog'\nexport * from './aspectRatio/AspectRatio'\nexport * from './avatar/Avatar'\nexport * from './banner/Banner'\nexport * from './bottomDock/BottomDock'\nexport * from './blockquote/Blockquote'\nexport * from './box/Box'\nexport * from './breadcrumb/Breadcrumb'\nexport * from './buttonGroup/ButtonGroup'\nexport * from './callout/Callout'\nexport * from './commentThread/CommentThread'\nexport * from './card/Card'\nexport * from './carousel/Carousel'\nexport * from './checkbox/Checkbox'\nexport * from './checkboxCards/CheckboxCards'\nexport * from './checkboxGroup/CheckboxGroup'\nexport * from './code/Code'\nexport * from './collapsible/Collapsible'\nexport * from './colorPicker/ColorPicker'\nexport * from './container/Container'\nexport * from './contextMenu/ContextMenu'\nexport * from './copyButton/CopyButton'\nexport * from './copyField/CopyField'\nexport * from './codeInput/CodeInput'\nexport * from './dataList/DataList'\nexport * from './dataTable/DataTable'\nexport * from './articleNodes/ArticleNodes'\nexport * from './directionProvider/DirectionProvider'\nexport * from './dropdownMenu/DropdownMenu'\nexport * from './em/Em'\nexport * from './emptyState/EmptyState'\nexport * from './environmentRibbon/EnvironmentRibbon'\nexport * from './editable/Editable'\nexport * from './field/Field'\nexport * from './filterBar/FilterBar'\nexport * from './flex/Flex'\nexport * from './fontProvider/FontProvider'\nexport * from './form/Form'\nexport * from './grid/Grid'\nexport * from './heading/Heading'\nexport * from './hoverCard/HoverCard'\nexport * from './iconButton/IconButton'\nexport * from './input/Input'\nexport * from './inputGroup/InputGroup'\nexport { Inset } from '../layout/Inset'\nexport type { InsetProps } from '../layout/Inset'\nexport * from './item/Item'\nexport * from './kbd/Kbd'\nexport * from './label/Label'\nexport * from './link/Link'\nexport * from './menubar/Menubar'\nexport * from './nativeSelect/NativeSelect'\nexport * from './navigationMenu/NavigationMenu'\nexport * from './numberInput/NumberInput'\nexport * from './pageContent/PageContent'\nexport * from './pageHeader/PageHeader'\nexport * from './pagination/Pagination'\nexport * from './prose/Prose'\nexport * from './pills/Pills'\nexport * from './passwordInput/PasswordInput'\nexport * from './popover/Popover'\nexport * from './progress/Progress'\nexport * from './quote/Quote'\nexport * from './radioGroup/RadioGroup'\nexport * from './radioCards/RadioCards'\nexport * from './rating/Rating'\nexport * from './result/Result'\nexport * from './scrollArea/ScrollArea'\nexport * from './section/Section'\nexport * from './segmentedControl/SegmentedControl'\nexport * from './segmentedMeter/SegmentedMeter'\nexport * from './select/Select'\nexport * from './sidebar/Sidebar'\nexport * from './skeleton/Skeleton'\nexport * from './slider/Slider'\nexport * from './slot/Slot'\nexport * from './spinner/Spinner'\nexport * from './status/Status'\nexport * from './strong/Strong'\nexport * from './switch/Switch'\nexport * from './table/Table'\nexport * from './tableOfContents/TableOfContents'\nexport * from './tabs/Tabs'\nexport * from './tabNav/TabNav'\nexport * from './tagsInput/TagsInput'\nexport * from './text/Text'\nexport * from './textArea/TextArea'\nexport * from './textAreaField/TextAreaField'\nexport * from './textField/TextField'\nexport * from './themeProvider/ThemeProvider'\nexport * from './themeProvider/ThemeScript'\nexport * from './timePicker/TimePicker'\nexport * from './toast/Toast'\nexport * from './toggle/Toggle'\nexport * from './toggleGroup/ToggleGroup'\nexport * from './toggleTip/ToggleTip'\nexport * from './toolbar/Toolbar'\nexport * from './treeView/TreeView'\nexport * from './statCard/StatCard'\nexport * from './stepper/Stepper'\nexport * from './notificationCenter/NotificationCenter'\nexport * from './timeline/Timeline'\nexport * from './themePanel/ThemePanel'\nexport * from './floatingPanel/FloatingPanel'\nexport * from './colorSwatch/ColorSwatch'\nexport * from './marquee/Marquee'\nexport * from './metric/Metric'\n// Full barrel-vs-roster audit, run after finding 3 of these one at a time (QrCode, Command,\n// Drawer) while composing the cabinet migration this session. `Menu` is deliberately NOT added:\n// roster/wiring-notes keep it internal-only. Calendar/Chart/Resizable/RichTextEditor/Sonner/\n// SortableList are ALSO deliberately not added here \u2014 public-contract.test.ts documents these\n// adapter-backed families (real heavy peer deps: react-day-picker, recharts, react-resizable-\n// panels, @tiptap/*, sonner, @dnd-kit/*) as intentionally excluded from the eager-loaded root\n// barrel, reachable only via their own dedicated subpaths \u2014 adding them here would reintroduce\n// exactly the eager-load regression that test guards against. `Sheet` has no such adapter\n// (radix-compound, same category as Dialog/Popover which are already barrel-exported) \u2014 genuine gap.\n//\n// CORRECTION (2026-09-20): that audit's own \"genuine gap, wire it in\" fixes for QrCode, Command,\n// and Drawer \u2014 plus the pre-existing InputOtp and PhoneInput barrel exports \u2014 never got checked\n// against the SAME heavy-peer criterion this comment already applies to Calendar/Chart/etc.\n// Combobox has the identical problem, added earlier without a subpath at all. All six carry an\n// optional peer (cmdk, framer-motion via `../../motion`, vaul, input-otp, react-phone-number-input,\n// qrcode.react respectively \u2014 see package.json peerDependenciesMeta) that isn't installed unless a\n// consumer explicitly needs that component \u2014 confirmed as a real, external-consumer-breaking bug\n// (not just a bundle-size nit) building a bare `Button`+`Card` import from a fresh consumer with\n// none of those peers installed: Vite/Rolldown fails module resolution on the barrel's Combobox/\n// Command re-exports before tree-shaking ever runs, because static `export *` re-exports must\n// resolve their whole graph regardless of what the consumer actually imports. Moved all six to\n// dedicated-subpath-only, matching this file's own established policy for the adapter-backed\n// families above: Command \u2192 `./command`, Drawer \u2192 `./drawer`, InputOtp \u2192 `./input-otp`,\n// PhoneInput \u2192 `./phone-input`, QrCode \u2192 `./qr-code` (already existed); Combobox \u2192 `./combobox`\n// (newly added to package.json's `exports`, since it never had one).\n"],
+  "mappings": ";AAEA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,aAAa;AAEtB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/components/label.css

@@ -9,6 +9,8 @@
   font-weight: var(--dsx-typography-label-large-font-weight);
   line-height: var(--dsx-typography-label-large-line-height);
   letter-spacing: var(--dsx-typography-label-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-large-font-variation-settings);
+  text-transform: none;
 }
 
 .dsx-label[data-disabled] {
@@ -22,6 +24,7 @@
   font-weight: var(--dsx-typography-label-medium-font-weight);
   line-height: var(--dsx-typography-label-medium-line-height);
   letter-spacing: var(--dsx-typography-label-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-medium-font-variation-settings);
 }
 
 .dsx-label[data-size='lg'] {

package/dist/components/link.css

@@ -1,33 +1,30 @@
-
-
+/* Native inline flow keeps links inside the surrounding sentence. */
 .dsx-link {
   box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--dsx-space-xs);
+  display: inline;
+  /* Native inline boxes ignore these; standalone flex/grid items keep a 24px floor. */
+  min-inline-size: calc(var(--dsx-size-md) / var(--dsx-density-scale));
+  min-block-size: calc(var(--dsx-size-md) / var(--dsx-density-scale));
   cursor: pointer;
+  overflow-wrap: anywhere;
   text-decoration: none;
-  color: var(--dsx-color-primary);
-  transition: color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
-}
-
-/* Accent color overrides */
-.dsx-link[data-accent-color='rift'] {
-  color: var(--dsx-color-accent-9);
-}
-
-.dsx-link[data-accent-color='warp'] {
-  color: var(--dsx-color-accent-9);
+  text-decoration-color: currentColor;
+  text-decoration-style: solid;
+  text-decoration-thickness: min(2px, max(1px, 0.05em));
+  text-underline-offset: calc(0.025em + 2px);
+  color: var(--dsx-color-accent-indicator);
+  transition: color var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard);
 }
 
-.dsx-link[data-accent-color='ray'] {
-  color: var(--dsx-color-accent-9);
+.dsx-link :where(svg) {
+  vertical-align: middle;
+  margin-inline-end: var(--dsx-space-xs);
 }
 
-.dsx-link:focus-visible {
+.dsx-link:where(:focus-visible) {
   border-radius: var(--dsx-rounded-sm);
-  outline: 2px solid var(--dsx-effect-ring-focus);
-  outline-offset: var(--dsx-focus-ring-offset, 2px);
+  outline: var(--dsx-border-width-lg) solid var(--dsx-effect-ring-focus);
+  outline-offset: var(--dsx-space-0-5);
 }
 
 .dsx-link--muted {
@@ -40,88 +37,33 @@
 
 .dsx-link--always {
   text-decoration-line: underline;
-  text-decoration-style: solid;
-  /* Browser-native underline thickness heuristic: min(2px, max(1px, 0.05em)) adapts to font size */
-  text-decoration-thickness: min(2px, max(1px, 0.05em));
-  /* Browser-native underline offset heuristic: calc(0.025em + 2px) for optical alignment */
-  text-underline-offset: calc(0.025em + 2px);
-  text-decoration-color: var(--dsx-color-primary);
-}
-
-.dsx-link[data-accent-color='rift'].dsx-link--always {
-  text-decoration-color: var(--dsx-color-accent-9);
-}
-
-.dsx-link[data-accent-color='warp'].dsx-link--always {
-  text-decoration-color: var(--dsx-color-accent-9);
-}
-
-.dsx-link[data-accent-color='ray'].dsx-link--always {
-  text-decoration-color: var(--dsx-color-accent-9);
 }
 
-.dsx-link--hover {
+.dsx-link--auto,
+.dsx-link--hover,
+.dsx-link--none {
   text-decoration-line: none;
 }
 
 @media (hover: hover) {
-  .dsx-link--hover:hover {
+  .dsx-link:where(.dsx-link--auto, .dsx-link--hover):hover {
     text-decoration-line: underline;
-    text-decoration-style: solid;
-    /* Browser-native underline thickness heuristic: min(2px, max(1px, 0.05em)) adapts to font size */
-    text-decoration-thickness: min(2px, max(1px, 0.05em));
-    /* Browser-native underline offset heuristic: calc(0.025em + 2px) for optical alignment */
-    text-underline-offset: calc(0.025em + 2px);
-    text-decoration-color: var(--dsx-color-primary);
-  }
-
-  .dsx-link[data-accent-color='rift'].dsx-link--hover:hover {
-    text-decoration-color: var(--dsx-color-accent-9);
   }
-
-  .dsx-link[data-accent-color='warp'].dsx-link--hover:hover {
-    text-decoration-color: var(--dsx-color-accent-9);
-  }
-
-  .dsx-link[data-accent-color='ray'].dsx-link--hover:hover {
-    text-decoration-color: var(--dsx-color-accent-9);
-  }
-}
-
-.dsx-link--auto {
-  text-decoration-line: none;
 }
 
-@media (hover: hover) {
-  .dsx-link--auto:hover {
+/* Default links remain identifiable on touch; explicit hover/none stay opt-in. */
+@media (hover: none) {
+  .dsx-link--auto {
     text-decoration-line: underline;
-    text-decoration-style: solid;
-    /* Browser-native underline thickness heuristic: min(2px, max(1px, 0.05em)) adapts to font size */
-    text-decoration-thickness: min(2px, max(1px, 0.05em));
-    /* Browser-native underline offset heuristic: calc(0.025em + 2px) for optical alignment */
-    text-underline-offset: calc(0.025em + 2px);
-    text-decoration-color: var(--dsx-color-primary);
-  }
-
-  .dsx-link[data-accent-color='rift'].dsx-link--auto:hover {
-    text-decoration-color: var(--dsx-color-accent-9);
-  }
-
-  .dsx-link[data-accent-color='warp'].dsx-link--auto:hover {
-    text-decoration-color: var(--dsx-color-accent-9);
-  }
-
-  .dsx-link[data-accent-color='ray'].dsx-link--auto:hover {
-    text-decoration-color: var(--dsx-color-accent-9);
   }
 }
 
-a.dsx-link--none,
-button.dsx-link--none {
-  text-decoration-line: none;
+.dsx-link:where(.dsx-link--auto, .dsx-link--hover):focus-visible,
+.dsx-link:where(.dsx-link--auto, .dsx-link--hover):active {
+  text-decoration-line: underline;
 }
 
-/* Size scale — mirrors Text/Heading's responsive 1-9 font-size mapping */
+/* Preserve the existing single-value font-size mapping. */
 .dsx-link[data-size='1'] { font-size: var(--dsx-typography-label-small-font-size); }
 .dsx-link[data-size='2'] { font-size: var(--dsx-typography-label-medium-font-size); }
 .dsx-link[data-size='3'] { font-size: var(--dsx-typography-body-medium-font-size); }
@@ -132,18 +74,12 @@ button.dsx-link--none {
 .dsx-link[data-size='8'] { font-size: var(--dsx-typography-display-medium-font-size); }
 .dsx-link[data-size='9'] { font-size: var(--dsx-typography-display-large-font-size); }
 
-/* High-contrast mode — shift link color to HC family (Pattern 3) */
-.dsx-link[data-high-contrast='true'] {
+.dsx-link:where(:not(.dsx-link--inverse))[data-high-contrast='true'] {
   color: var(--dsx-color-high-contrast);
 }
 
-.dsx-link[data-high-contrast='true'].dsx-link--always {
-  text-decoration-color: var(--dsx-color-high-contrast);
-}
-
-@media (hover: hover) {
-  .dsx-link[data-high-contrast='true'].dsx-link--hover:hover,
-  .dsx-link[data-high-contrast='true'].dsx-link--auto:hover {
-    text-decoration-color: var(--dsx-color-high-contrast);
+@media (prefers-reduced-motion: reduce) {
+  .dsx-link {
+    transition: none;
   }
 }

package/dist/components/notification-center.css

@@ -2,10 +2,14 @@
 
 .dsx-notification-center {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-notification-center--popover {
-  width: 320px;
+  width: var(--dsx-sheet-width-sm);
   border-radius: var(--dsx-rounded-lg);
   border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
   background: var(--dsx-color-panel-translucent);
@@ -23,6 +27,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  gap: var(--dsx-space-sm);
   padding: var(--dsx-space-md);
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
 }
@@ -35,6 +42,8 @@
 }
 
 .dsx-notification-center__list {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
   max-height: 400px;
 }
@@ -46,16 +55,36 @@
   padding: var(--dsx-space-md);
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
   cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: start;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border-top: 0;
+  border-right: 0;
+  border-left: var(--dsx-border-width-sm) solid transparent;
+  overflow-wrap: anywhere;
 }
 
 .dsx-notification-center__item:last-child {
   border-bottom: none;
 }
 
-.dsx-notification-center__item:hover {
+.dsx-notification-center__item:hover,
+.dsx-notification-center__item:focus-visible {
   background: var(--dsx-effect-hover-ghost);
 }
 
+.dsx-notification-center__item:focus-visible {
+  outline: var(--dsx-border-width-md) solid var(--dsx-color-primary);
+  outline-offset: calc(-1 * var(--dsx-border-width-md));
+}
+
+.dsx-notification-center__item:active {
+  background: var(--dsx-effect-pressed-layer);
+}
+
 .dsx-notification-center__item--unread {
   background: var(--dsx-color-surface-raised);
   border-left: var(--dsx-border-width-sm) solid var(--dsx-color-primary);
@@ -84,25 +113,44 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   padding: var(--dsx-space-sm);
   border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
 }
 
-.dsx-notification-center__trigger {
+/* G-20 (2026-10-05): the trigger is an ordinary icon button (size sm, 32px, like every other header icon) and the count hangs
+   on its corner, so the hover highlight covers the bell only. It used to be laid out inside the button, which made the
+   button a 59x44 pill that wrapped the count and was the one header control with a different shape (the maintainer: "I feel
+   like no one does it"). The count hangs about 17px past the trailing edge; the margin reserves that room whatever gap the
+   host uses, and it is always reserved so the controls after the bell do not move when a count appears. */
+.dsx-notification-center__trigger.dsx-icon-button {
   position: relative;
-  display: inline-flex;
-  align-items: center;
+  margin-inline-end: var(--dsx-space-md);
+}
+
+/* The highlight is 32px but the hit area stays 44px (size-xl + space-xs, the floor the earlier bell contract set): this
+   pseudo-element is part of the button for pointer events, and its inset shrinks to nothing on a larger size. The selector
+   stays at (0,1,1): the policy allows (0,2,0) in this file and `.dsx-icon-button` has no pseudo-element rules to outrank. */
+.dsx-notification-center__trigger::after {
+  content: '';
+  position: absolute;
+  inset: calc((100% - (var(--dsx-size-xl) + var(--dsx-space-xs))) / 2);
+}
+
+.dsx-notification-center__trigger .dsx-icon-button__content {
+  gap: 0;
 }
 
 .dsx-notification-center__badge {
   position: absolute;
-  top: calc(-1 * var(--dsx-space-xs));
-  right: calc(-1 * var(--dsx-space-xs));
-  min-width: var(--dsx-size-xs);
-  height: var(--dsx-size-xs);
+  top: calc(-1 * var(--dsx-space-sm));
+  inset-inline-start: calc(50% + var(--dsx-space-xs));
+  flex-shrink: 0;
+  min-width: var(--dsx-size-sm);
+  height: var(--dsx-size-sm);
   padding: 0 var(--dsx-space-xs);
   border-radius: var(--dsx-rounded-full);
   font-size: var(--dsx-typography-label-small-font-size);
-  line-height: var(--dsx-size-xs);
+  line-height: var(--dsx-size-sm);
   text-align: center;
 }

package/dist/components/notificationCenter/NotificationCenter.cjs

@@ -42,8 +42,13 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_extractProps = require("../../_internal/helpers/extractProps");
 var import_Badge = require("../badge/Badge");
 var import_IconButton = require("../iconButton/IconButton");
+var import_Icon = require("../icon/Icon");
 var import_notificationCenter = require("./notificationCenter.props");
 var import_jsx_runtime = require("react/jsx-runtime");
+const DEFAULT_BADGE_MAX = 99;
+function resolveBadgeMax(max) {
+  return max !== void 0 && Number.isInteger(max) && max > 0 ? max : DEFAULT_BADGE_MAX;
+}
 const NotificationCenter = React.forwardRef(
   ({ children, unreadCount, ...props }, forwardedRef) => {
     const { asChild, className, variant = "popover", ...notificationCenterProps } = (0, import_extractProps.extractProps)(
@@ -114,24 +119,29 @@ const NotificationCenterItem = React.forwardRef(
 );
 NotificationCenterItem.displayName = "NotificationCenterItem";
 const NotificationCenterTrigger = React.forwardRef(
-  ({ children, unreadCount, className, ...props }, forwardedRef) => {
+  ({ children, unreadCount, max, className, ...props }, forwardedRef) => {
     const { asChild, ...triggerProps } = (0, import_extractProps.extractProps)(props, import_notificationCenter.notificationCenterTriggerPropDefs);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_IconButton.IconButton,
-        {
-          ...triggerProps,
-          ref: forwardedRef,
-          asChild,
-          variant: "ghost",
-          size: "sm",
-          className: (0, import_classnames.default)("dsx-notification-center__trigger", className),
-          "aria-label": props["aria-label"] ?? "Notifications",
-          children
-        }
-      ),
-      unreadCount && unreadCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.Badge, { variant: "error", size: "sm", className: "dsx-notification-center__badge", children: unreadCount > 99 ? "99+" : unreadCount }) : null
-    ] });
+    const cap = resolveBadgeMax(max);
+    const badge = unreadCount && unreadCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.Badge, { variant: "primary", size: "sm", className: "dsx-notification-center__badge", "aria-hidden": "true", children: unreadCount > cap ? `${cap}+` : unreadCount }) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_IconButton.IconButton,
+      {
+        ...triggerProps,
+        ref: forwardedRef,
+        asChild,
+        variant: "ghost",
+        size: "sm",
+        className: (0, import_classnames.default)("dsx-notification-center__trigger", className),
+        "aria-label": props["aria-label"] ?? (unreadCount && unreadCount > 0 ? `Notifications, ${unreadCount} unread` : "Notifications"),
+        children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_slot.Slot, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children }),
+          badge
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "bell", size: "sm" }),
+          badge
+        ] })
+      }
+    );
   }
 );
 NotificationCenterTrigger.displayName = "NotificationCenterTrigger";

package/dist/components/notificationCenter/NotificationCenter.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/notificationCenter/NotificationCenter.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Badge } from '../badge/Badge'\nimport { IconButton } from '../iconButton/IconButton'\nimport {\n  notificationCenterPropDefs,\n  notificationCenterHeaderPropDefs,\n  notificationCenterListPropDefs,\n  notificationCenterFooterPropDefs,\n  notificationCenterItemPropDefs,\n  notificationCenterTriggerPropDefs,\n} from './notificationCenter.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype NotificationCenterOwnProps = GetPropDefTypes<typeof notificationCenterPropDefs>\ntype NotificationCenterHeaderOwnProps = GetPropDefTypes<typeof notificationCenterHeaderPropDefs>\ntype NotificationCenterListOwnProps = GetPropDefTypes<typeof notificationCenterListPropDefs>\ntype NotificationCenterFooterOwnProps = GetPropDefTypes<typeof notificationCenterFooterPropDefs>\ntype NotificationCenterItemOwnProps = GetPropDefTypes<typeof notificationCenterItemPropDefs>\ntype NotificationCenterTriggerOwnProps = GetPropDefTypes<typeof notificationCenterTriggerPropDefs>\n\ninterface NotificationCenterProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterOwnProps {\n  unreadCount?: number\n}\ninterface NotificationCenterHeaderProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterHeaderOwnProps {}\ninterface NotificationCenterListProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterListOwnProps {}\ninterface NotificationCenterFooterProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterFooterOwnProps {}\ninterface NotificationCenterItemProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterItemOwnProps {}\ninterface NotificationCenterTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, NotificationCenterTriggerOwnProps {\n  unreadCount?: number\n}\n\nconst NotificationCenter = React.forwardRef<HTMLDivElement, NotificationCenterProps>(\n  ({ children, unreadCount, ...props }, forwardedRef) => {\n    const { asChild, className, variant = 'popover', ...notificationCenterProps } = extractProps(\n      props,\n      notificationCenterPropDefs,\n    )\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...notificationCenterProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-notification-center',\n          variant === 'popover' && 'dsx-notification-center--popover',\n          variant === 'sidebar' && 'dsx-notification-center--sidebar',\n          className,\n        )}\n        data-unread={unreadCount && unreadCount > 0 ? String(unreadCount) : undefined}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenter.displayName = 'NotificationCenter'\n\nconst NotificationCenterHeader = React.forwardRef<HTMLDivElement, NotificationCenterHeaderProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...headerProps } = extractProps(props, notificationCenterHeaderPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...headerProps} ref={forwardedRef} className={classNames('dsx-notification-center__header', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterHeader.displayName = 'NotificationCenterHeader'\n\nconst NotificationCenterList = React.forwardRef<HTMLDivElement, NotificationCenterListProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...listProps } = extractProps(props, notificationCenterListPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...listProps} ref={forwardedRef} className={classNames('dsx-notification-center__list', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterList.displayName = 'NotificationCenterList'\n\nconst NotificationCenterFooter = React.forwardRef<HTMLDivElement, NotificationCenterFooterProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...footerProps } = extractProps(props, notificationCenterFooterPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...footerProps} ref={forwardedRef} className={classNames('dsx-notification-center__footer', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterFooter.displayName = 'NotificationCenterFooter'\n\nconst NotificationCenterItem = React.forwardRef<HTMLDivElement, NotificationCenterItemProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, unread = false, ...itemProps } = extractProps(\n      props,\n      notificationCenterItemPropDefs,\n    )\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...itemProps}\n        ref={forwardedRef}\n        data-unread={unread ? 'true' : undefined}\n        className={classNames('dsx-notification-center__item', unread && 'dsx-notification-center__item--unread', className)}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterItem.displayName = 'NotificationCenterItem'\n\nconst NotificationCenterTrigger = React.forwardRef<HTMLButtonElement, NotificationCenterTriggerProps>(\n  ({ children, unreadCount, className, ...props }, forwardedRef) => {\n    const { asChild, ...triggerProps } = extractProps(props, notificationCenterTriggerPropDefs)\n\n    return (\n      <>\n        <IconButton\n          {...triggerProps}\n          ref={forwardedRef}\n          asChild={asChild}\n          variant=\"ghost\"\n          size=\"sm\"\n          className={classNames('dsx-notification-center__trigger', className)}\n          aria-label={props['aria-label'] ?? 'Notifications'}\n        >\n          {children}\n        </IconButton>\n        {unreadCount && unreadCount > 0 ? (\n          <Badge variant=\"error\" size=\"sm\" className=\"dsx-notification-center__badge\">\n            {unreadCount > 99 ? '99+' : unreadCount}\n          </Badge>\n        ) : null}\n      </>\n    )\n  },\n)\nNotificationCenterTrigger.displayName = 'NotificationCenterTrigger'\n\nconst NotificationCenterRoot: typeof NotificationCenter & {\n  Header: typeof NotificationCenterHeader\n  List: typeof NotificationCenterList\n  Footer: typeof NotificationCenterFooter\n  Item: typeof NotificationCenterItem\n  Trigger: typeof NotificationCenterTrigger\n} = Object.assign(NotificationCenter, {\n  Header: NotificationCenterHeader,\n  List: NotificationCenterList,\n  Footer: NotificationCenterFooter,\n  Item: NotificationCenterItem,\n  Trigger: NotificationCenterTrigger,\n})\n\nexport {\n  NotificationCenterRoot as NotificationCenter,\n  NotificationCenterHeader,\n  NotificationCenterList,\n  NotificationCenterFooter,\n  NotificationCenterItem,\n  NotificationCenterTrigger,\n}\nexport type {\n  NotificationCenterProps,\n  NotificationCenterHeaderProps,\n  NotificationCenterListProps,\n  NotificationCenterFooterProps,\n  NotificationCenterItemProps,\n  NotificationCenterTriggerProps,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Badge } from '../badge/Badge'\nimport { IconButton } from '../iconButton/IconButton'\nimport { Icon } from '../icon/Icon'\nimport {\n  notificationCenterPropDefs,\n  notificationCenterHeaderPropDefs,\n  notificationCenterListPropDefs,\n  notificationCenterFooterPropDefs,\n  notificationCenterItemPropDefs,\n  notificationCenterTriggerPropDefs,\n} from './notificationCenter.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype NotificationCenterOwnProps = GetPropDefTypes<typeof notificationCenterPropDefs>\ntype NotificationCenterHeaderOwnProps = GetPropDefTypes<typeof notificationCenterHeaderPropDefs>\ntype NotificationCenterListOwnProps = GetPropDefTypes<typeof notificationCenterListPropDefs>\ntype NotificationCenterFooterOwnProps = GetPropDefTypes<typeof notificationCenterFooterPropDefs>\ntype NotificationCenterItemOwnProps = GetPropDefTypes<typeof notificationCenterItemPropDefs>\ntype NotificationCenterTriggerOwnProps = GetPropDefTypes<typeof notificationCenterTriggerPropDefs>\n\ninterface NotificationCenterProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterOwnProps {\n  unreadCount?: number\n}\ninterface NotificationCenterHeaderProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterHeaderOwnProps {}\ninterface NotificationCenterListProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterListOwnProps {}\ninterface NotificationCenterFooterProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterFooterOwnProps {}\ninterface NotificationCenterItemProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterItemOwnProps {}\ninterface NotificationCenterTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, NotificationCenterTriggerOwnProps {\n  unreadCount?: number\n  /** Largest count the badge draws; above it the badge reads `{max}+`. Default 99. The accessible name keeps the real count. */\n  max?: number\n}\n\nconst DEFAULT_BADGE_MAX = 99\n\n// A cap that is not a positive whole number falls back to the default, so a bad prop never prints \"NaN+\" or \"0+\".\nfunction resolveBadgeMax(max: number | undefined): number {\n  return max !== undefined && Number.isInteger(max) && max > 0 ? max : DEFAULT_BADGE_MAX\n}\n\nconst NotificationCenter = React.forwardRef<HTMLDivElement, NotificationCenterProps>(\n  ({ children, unreadCount, ...props }, forwardedRef) => {\n    const { asChild, className, variant = 'popover', ...notificationCenterProps } = extractProps(\n      props,\n      notificationCenterPropDefs,\n    )\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...notificationCenterProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-notification-center',\n          variant === 'popover' && 'dsx-notification-center--popover',\n          variant === 'sidebar' && 'dsx-notification-center--sidebar',\n          className,\n        )}\n        data-unread={unreadCount && unreadCount > 0 ? String(unreadCount) : undefined}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenter.displayName = 'NotificationCenter'\n\nconst NotificationCenterHeader = React.forwardRef<HTMLDivElement, NotificationCenterHeaderProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...headerProps } = extractProps(props, notificationCenterHeaderPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...headerProps} ref={forwardedRef} className={classNames('dsx-notification-center__header', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterHeader.displayName = 'NotificationCenterHeader'\n\nconst NotificationCenterList = React.forwardRef<HTMLDivElement, NotificationCenterListProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...listProps } = extractProps(props, notificationCenterListPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...listProps} ref={forwardedRef} className={classNames('dsx-notification-center__list', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterList.displayName = 'NotificationCenterList'\n\nconst NotificationCenterFooter = React.forwardRef<HTMLDivElement, NotificationCenterFooterProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...footerProps } = extractProps(props, notificationCenterFooterPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...footerProps} ref={forwardedRef} className={classNames('dsx-notification-center__footer', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterFooter.displayName = 'NotificationCenterFooter'\n\nconst NotificationCenterItem = React.forwardRef<HTMLDivElement, NotificationCenterItemProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, unread = false, ...itemProps } = extractProps(\n      props,\n      notificationCenterItemPropDefs,\n    )\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...itemProps}\n        ref={forwardedRef}\n        data-unread={unread ? 'true' : undefined}\n        className={classNames('dsx-notification-center__item', unread && 'dsx-notification-center__item--unread', className)}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterItem.displayName = 'NotificationCenterItem'\n\nconst NotificationCenterTrigger = React.forwardRef<HTMLButtonElement, NotificationCenterTriggerProps>(\n  ({ children, unreadCount, max, className, ...props }, forwardedRef) => {\n    const { asChild, ...triggerProps } = extractProps(props, notificationCenterTriggerPropDefs)\n    const cap = resolveBadgeMax(max)\n    const badge = unreadCount && unreadCount > 0 ? (\n      <Badge variant=\"primary\" size=\"sm\" className=\"dsx-notification-center__badge\" aria-hidden=\"true\">\n        {unreadCount > cap ? `${cap}+` : unreadCount}\n      </Badge>\n    ) : null\n\n    return (\n        <IconButton\n          {...triggerProps}\n          ref={forwardedRef}\n          asChild={asChild}\n          variant=\"ghost\"\n          size=\"sm\"\n          className={classNames('dsx-notification-center__trigger', className)}\n          aria-label={props['aria-label'] ?? (unreadCount && unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications')}\n        >\n          {asChild ? (\n            <Slot><Slottable>{children}</Slottable>{badge}</Slot>\n          ) : (\n            <>{children ?? <Icon name=\"bell\" size=\"sm\" />}{badge}</>\n          )}\n        </IconButton>\n    )\n  },\n)\nNotificationCenterTrigger.displayName = 'NotificationCenterTrigger'\n\nconst NotificationCenterRoot: typeof NotificationCenter & {\n  Header: typeof NotificationCenterHeader\n  List: typeof NotificationCenterList\n  Footer: typeof NotificationCenterFooter\n  Item: typeof NotificationCenterItem\n  Trigger: typeof NotificationCenterTrigger\n} = Object.assign(NotificationCenter, {\n  Header: NotificationCenterHeader,\n  List: NotificationCenterList,\n  Footer: NotificationCenterFooter,\n  Item: NotificationCenterItem,\n  Trigger: NotificationCenterTrigger,\n})\n\nexport {\n  NotificationCenterRoot as NotificationCenter,\n  NotificationCenterHeader,\n  NotificationCenterList,\n  NotificationCenterFooter,\n  NotificationCenterItem,\n  NotificationCenterTrigger,\n}\nexport type {\n  NotificationCenterProps,\n  NotificationCenterHeaderProps,\n  NotificationCenterListProps,\n  NotificationCenterFooterProps,\n  NotificationCenterItemProps,\n  NotificationCenterTriggerProps,\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAgC;AAEhC,0BAA6B;AAC7B,mBAAsB;AACtB,wBAA2B;AAC3B,kBAAqB;AACrB,gCAOO;AAwCD;AAhBN,MAAM,oBAAoB;AAG1B,SAAS,gBAAgB,KAAiC;AACxD,SAAO,QAAQ,UAAa,OAAO,UAAU,GAAG,KAAK,MAAM,IAAI,MAAM;AACvE;AAEA,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,aAAa,GAAG,MAAM,GAAG,iBAAiB;AACrD,UAAM,EAAE,SAAS,WAAW,UAAU,WAAW,GAAG,wBAAwB,QAAI;AAAA,MAC9E;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,kBAAAA;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QACF;AAAA,QACA,eAAa,eAAe,cAAc,IAAI,OAAO,WAAW,IAAI;AAAA,QAEnE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,2BAA2B,MAAM;AAAA,EACrC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,YAAY,QAAI,kCAAa,OAAO,0DAAgC;AACnG,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,QAAM,GAAG,aAAa,KAAK,cAAc,eAAW,kBAAAA,SAAW,mCAAmC,SAAS,GACzG,UACH;AAAA,EAEJ;AACF;AACA,yBAAyB,cAAc;AAEvC,MAAM,yBAAyB,MAAM;AAAA,EACnC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,UAAU,QAAI,kCAAa,OAAO,wDAA8B;AAC/F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,QAAM,GAAG,WAAW,KAAK,cAAc,eAAW,kBAAAA,SAAW,iCAAiC,SAAS,GACrG,UACH;AAAA,EAEJ;AACF;AACA,uBAAuB,cAAc;AAErC,MAAM,2BAA2B,MAAM;AAAA,EACrC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,YAAY,QAAI,kCAAa,OAAO,0DAAgC;AACnG,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,QAAM,GAAG,aAAa,KAAK,cAAc,eAAW,kBAAAA,SAAW,mCAAmC,SAAS,GACzG,UACH;AAAA,EAEJ;AACF;AACA,yBAAyB,cAAc;AAEvC,MAAM,yBAAyB,MAAM;AAAA,EACnC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,SAAS,OAAO,GAAG,UAAU,QAAI;AAAA,MAC3D;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAa,SAAS,SAAS;AAAA,QAC/B,eAAW,kBAAAA,SAAW,iCAAiC,UAAU,yCAAyC,SAAS;AAAA,QAElH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,uBAAuB,cAAc;AAErC,MAAM,4BAA4B,MAAM;AAAA,EACtC,CAAC,EAAE,UAAU,aAAa,KAAK,WAAW,GAAG,MAAM,GAAG,iBAAiB;AACrE,UAAM,EAAE,SAAS,GAAG,aAAa,QAAI,kCAAa,OAAO,2DAAiC;AAC1F,UAAM,MAAM,gBAAgB,GAAG;AAC/B,UAAM,QAAQ,eAAe,cAAc,IACzC,4CAAC,sBAAM,SAAQ,WAAU,MAAK,MAAK,WAAU,kCAAiC,eAAY,QACvF,wBAAc,MAAM,GAAG,GAAG,MAAM,aACnC,IACE;AAEJ,WACI;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAW,kBAAAA,SAAW,oCAAoC,SAAS;AAAA,QACnE,cAAY,MAAM,YAAY,MAAM,eAAe,cAAc,IAAI,kBAAkB,WAAW,YAAY;AAAA,QAE7G,oBACC,6CAAC,0BAAK;AAAA,sDAAC,+BAAW,UAAS;AAAA,UAAa;AAAA,WAAM,IAE9C,4EAAG;AAAA,sBAAY,4CAAC,oBAAK,MAAK,QAAO,MAAK,MAAK;AAAA,UAAI;AAAA,WAAM;AAAA;AAAA,IAEzD;AAAA,EAEN;AACF;AACA,0BAA0B,cAAc;AAExC,MAAM,yBAMF,OAAO,OAAO,oBAAoB;AAAA,EACpC,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,SAAS;AACX,CAAC;",
   "names": ["classNames"]
 }

package/dist/components/notificationCenter/NotificationCenter.d.cts

@@ -20,6 +20,8 @@ interface NotificationCenterItemProps extends React.HTMLAttributes<HTMLDivElemen
 }
 interface NotificationCenterTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, NotificationCenterTriggerOwnProps {
     unreadCount?: number;
+    /** Largest count the badge draws; above it the badge reads `{max}+`. Default 99. The accessible name keeps the real count. */
+    max?: number;
 }
 declare const NotificationCenter: React.ForwardRefExoticComponent<NotificationCenterProps & React.RefAttributes<HTMLDivElement>>;
 declare const NotificationCenterHeader: React.ForwardRefExoticComponent<NotificationCenterHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/notificationCenter/NotificationCenter.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.d.cts","sourceRoot":"","sources":["../../../src/components/notificationCenter/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,iCAAiC,GAAG,eAAe,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAElG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,0BAA0B;IACxG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,8BAA+B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iCAAiC;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,kBAAkB,gGAwBvB,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAW3B,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAmB3B,CAAA;AAGD,QAAA,MAAM,yBAAyB,0GAyB9B,CAAA;AAGD,QAAA,MAAM,sBAAsB,EAAE,OAAO,kBAAkB,GAAG;IACxD,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,OAAO,EAAE,OAAO,yBAAyB,CAAA;CAOzC,CAAA;AAEF,OAAO,EACL,sBAAsB,IAAI,kBAAkB,EAC5C,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,GAC1B,CAAA;AACD,YAAY,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,8BAA8B,GAC/B,CAAA"}
+{"version":3,"file":"NotificationCenter.d.cts","sourceRoot":"","sources":["../../../src/components/notificationCenter/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,iCAAiC,GAAG,eAAe,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAElG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,0BAA0B;IACxG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,8BAA+B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iCAAiC;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8HAA8H;IAC9H,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AASD,QAAA,MAAM,kBAAkB,gGAwBvB,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAW3B,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAmB3B,CAAA;AAGD,QAAA,MAAM,yBAAyB,0GA4B9B,CAAA;AAGD,QAAA,MAAM,sBAAsB,EAAE,OAAO,kBAAkB,GAAG;IACxD,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,OAAO,EAAE,OAAO,yBAAyB,CAAA;CAOzC,CAAA;AAEF,OAAO,EACL,sBAAsB,IAAI,kBAAkB,EAC5C,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,GAC1B,CAAA;AACD,YAAY,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,8BAA8B,GAC/B,CAAA"}

package/dist/components/notificationCenter/NotificationCenter.d.mts

@@ -20,6 +20,8 @@ interface NotificationCenterItemProps extends React.HTMLAttributes<HTMLDivElemen
 }
 interface NotificationCenterTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, NotificationCenterTriggerOwnProps {
     unreadCount?: number;
+    /** Largest count the badge draws; above it the badge reads `{max}+`. Default 99. The accessible name keeps the real count. */
+    max?: number;
 }
 declare const NotificationCenter: React.ForwardRefExoticComponent<NotificationCenterProps & React.RefAttributes<HTMLDivElement>>;
 declare const NotificationCenterHeader: React.ForwardRefExoticComponent<NotificationCenterHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/notificationCenter/NotificationCenter.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.d.mts","sourceRoot":"","sources":["../../../src/components/notificationCenter/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,iCAAiC,GAAG,eAAe,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAElG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,0BAA0B;IACxG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,8BAA+B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iCAAiC;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,kBAAkB,gGAwBvB,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAW3B,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAmB3B,CAAA;AAGD,QAAA,MAAM,yBAAyB,0GAyB9B,CAAA;AAGD,QAAA,MAAM,sBAAsB,EAAE,OAAO,kBAAkB,GAAG;IACxD,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,OAAO,EAAE,OAAO,yBAAyB,CAAA;CAOzC,CAAA;AAEF,OAAO,EACL,sBAAsB,IAAI,kBAAkB,EAC5C,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,GAC1B,CAAA;AACD,YAAY,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,8BAA8B,GAC/B,CAAA"}
+{"version":3,"file":"NotificationCenter.d.mts","sourceRoot":"","sources":["../../../src/components/notificationCenter/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,iCAAiC,GAAG,eAAe,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAElG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,0BAA0B;IACxG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,8BAA+B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iCAAiC;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8HAA8H;IAC9H,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AASD,QAAA,MAAM,kBAAkB,gGAwBvB,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAW3B,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAmB3B,CAAA;AAGD,QAAA,MAAM,yBAAyB,0GA4B9B,CAAA;AAGD,QAAA,MAAM,sBAAsB,EAAE,OAAO,kBAAkB,GAAG;IACxD,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,OAAO,EAAE,OAAO,yBAAyB,CAAA;CAOzC,CAAA;AAEF,OAAO,EACL,sBAAsB,IAAI,kBAAkB,EAC5C,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,GAC1B,CAAA;AACD,YAAY,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,8BAA8B,GAC/B,CAAA"}

package/dist/components/notificationCenter/NotificationCenter.d.ts

@@ -20,6 +20,8 @@ interface NotificationCenterItemProps extends React.HTMLAttributes<HTMLDivElemen
 }
 interface NotificationCenterTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, NotificationCenterTriggerOwnProps {
     unreadCount?: number;
+    /** Largest count the badge draws; above it the badge reads `{max}+`. Default 99. The accessible name keeps the real count. */
+    max?: number;
 }
 declare const NotificationCenter: React.ForwardRefExoticComponent<NotificationCenterProps & React.RefAttributes<HTMLDivElement>>;
 declare const NotificationCenterHeader: React.ForwardRefExoticComponent<NotificationCenterHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/notificationCenter/NotificationCenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.d.ts","sourceRoot":"","sources":["../../../src/components/notificationCenter/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,iCAAiC,GAAG,eAAe,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAElG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,0BAA0B;IACxG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,8BAA+B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iCAAiC;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,kBAAkB,gGAwBvB,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAW3B,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAmB3B,CAAA;AAGD,QAAA,MAAM,yBAAyB,0GAyB9B,CAAA;AAGD,QAAA,MAAM,sBAAsB,EAAE,OAAO,kBAAkB,GAAG;IACxD,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,OAAO,EAAE,OAAO,yBAAyB,CAAA;CAOzC,CAAA;AAEF,OAAO,EACL,sBAAsB,IAAI,kBAAkB,EAC5C,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,GAC1B,CAAA;AACD,YAAY,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,8BAA8B,GAC/B,CAAA"}
+{"version":3,"file":"NotificationCenter.d.ts","sourceRoot":"","sources":["../../../src/components/notificationCenter/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,iCAAiC,GAAG,eAAe,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAElG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,0BAA0B;IACxG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,8BAA+B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iCAAiC;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8HAA8H;IAC9H,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AASD,QAAA,MAAM,kBAAkB,gGAwBvB,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAW3B,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAmB3B,CAAA;AAGD,QAAA,MAAM,yBAAyB,0GA4B9B,CAAA;AAGD,QAAA,MAAM,sBAAsB,EAAE,OAAO,kBAAkB,GAAG;IACxD,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,OAAO,EAAE,OAAO,yBAAyB,CAAA;CAOzC,CAAA;AAEF,OAAO,EACL,sBAAsB,IAAI,kBAAkB,EAC5C,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,GAC1B,CAAA;AACD,YAAY,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,8BAA8B,GAC/B,CAAA"}

package/dist/components/notificationCenter/NotificationCenter.js

@@ -1,9 +1,10 @@
 import * as React from "react";
 import classNames from "classnames";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { Badge } from "../badge/Badge.js";
 import { IconButton } from "../iconButton/IconButton.js";
+import { Icon } from "../icon/Icon.js";
 import {
   notificationCenterPropDefs,
   notificationCenterHeaderPropDefs,
@@ -13,6 +14,10 @@ import {
   notificationCenterTriggerPropDefs
 } from "./notificationCenter.props.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const DEFAULT_BADGE_MAX = 99;
+function resolveBadgeMax(max) {
+  return max !== void 0 && Number.isInteger(max) && max > 0 ? max : DEFAULT_BADGE_MAX;
+}
 const NotificationCenter = React.forwardRef(
   ({ children, unreadCount, ...props }, forwardedRef) => {
     const { asChild, className, variant = "popover", ...notificationCenterProps } = extractProps(
@@ -83,24 +88,29 @@ const NotificationCenterItem = React.forwardRef(
 );
 NotificationCenterItem.displayName = "NotificationCenterItem";
 const NotificationCenterTrigger = React.forwardRef(
-  ({ children, unreadCount, className, ...props }, forwardedRef) => {
+  ({ children, unreadCount, max, className, ...props }, forwardedRef) => {
     const { asChild, ...triggerProps } = extractProps(props, notificationCenterTriggerPropDefs);
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          ...triggerProps,
-          ref: forwardedRef,
-          asChild,
-          variant: "ghost",
-          size: "sm",
-          className: classNames("dsx-notification-center__trigger", className),
-          "aria-label": props["aria-label"] ?? "Notifications",
-          children
-        }
-      ),
-      unreadCount && unreadCount > 0 ? /* @__PURE__ */ jsx(Badge, { variant: "error", size: "sm", className: "dsx-notification-center__badge", children: unreadCount > 99 ? "99+" : unreadCount }) : null
-    ] });
+    const cap = resolveBadgeMax(max);
+    const badge = unreadCount && unreadCount > 0 ? /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", className: "dsx-notification-center__badge", "aria-hidden": "true", children: unreadCount > cap ? `${cap}+` : unreadCount }) : null;
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ...triggerProps,
+        ref: forwardedRef,
+        asChild,
+        variant: "ghost",
+        size: "sm",
+        className: classNames("dsx-notification-center__trigger", className),
+        "aria-label": props["aria-label"] ?? (unreadCount && unreadCount > 0 ? `Notifications, ${unreadCount} unread` : "Notifications"),
+        children: asChild ? /* @__PURE__ */ jsxs(Slot, { children: [
+          /* @__PURE__ */ jsx(Slottable, { children }),
+          badge
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          children ?? /* @__PURE__ */ jsx(Icon, { name: "bell", size: "sm" }),
+          badge
+        ] })
+      }
+    );
   }
 );
 NotificationCenterTrigger.displayName = "NotificationCenterTrigger";