@d4gger/design-system 2.7.0 → 3.0.1

package/dist/components/toast.css

@@ -32,7 +32,51 @@
   background-color: var(--dsx-color-surface);
   border-radius: var(--dsx-rounded-md);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
-  box-shadow: var(--dsx-shadow-elevation-2);
+  box-shadow: var(--dsx-shadow-elevation-5); /* Spotlight (B4 Q3): below dialogs, above all menus */
+}
+
+/* Predetermined slot placement for action-bearing toasts: without it all
+   four slots land as flex siblings in one row, so title + description sit
+   side by side and squeeze the action (destructive story). Text stacks in
+   column one, action pins center-right, close top-right — no consumer
+   wrapper needed. Action-less toasts keep the flex row above untouched. */
+.dsx-toast:has(.dsx-toast__action) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  grid-template-areas:
+    "title action close"
+    "description action close";
+  align-items: center;
+}
+
+.dsx-toast:has(.dsx-toast__action) .dsx-toast__title {
+  grid-area: title;
+}
+
+.dsx-toast:has(.dsx-toast__action) .dsx-toast__description {
+  grid-area: description;
+}
+
+.dsx-toast:has(.dsx-toast__action) .dsx-toast__action {
+  grid-area: action;
+  align-self: center;
+}
+
+.dsx-toast:has(.dsx-toast__action) .dsx-toast__close {
+  grid-area: close;
+  align-self: start;
+}
+
+.dsx-toast[data-variant='success'] {
+  background-color: var(--dsx-color-success-container);
+  border-color: var(--dsx-color-success);
+  color: var(--dsx-color-on-success-container);
+}
+
+.dsx-toast[data-variant='warning'] {
+  background-color: var(--dsx-color-warning-container);
+  border-color: var(--dsx-color-warning);
+  color: var(--dsx-color-on-warning-container);
 }
 
 .dsx-toast[data-variant='destructive'] {
@@ -41,6 +85,12 @@
   color: var(--dsx-color-on-error-container);
 }
 
+.dsx-toast[data-variant='info'] {
+  background-color: var(--dsx-color-info-container);
+  border-color: var(--dsx-color-info);
+  color: var(--dsx-color-on-info-container);
+}
+
 .dsx-toast__title {
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;
   font-size: var(--dsx-typography-label-large-font-size);
@@ -75,10 +125,19 @@
   color: var(--dsx-color-high-contrast);
 }
 
+.dsx-toast[data-variant='success'] .dsx-toast__title,
+.dsx-toast[data-variant='success'] .dsx-toast__description,
+.dsx-toast[data-variant='success'] .dsx-toast__close,
+.dsx-toast[data-variant='warning'] .dsx-toast__title,
+.dsx-toast[data-variant='warning'] .dsx-toast__description,
+.dsx-toast[data-variant='warning'] .dsx-toast__close,
 .dsx-toast[data-variant='destructive'] .dsx-toast__title,
 .dsx-toast[data-variant='destructive'] .dsx-toast__description,
-.dsx-toast[data-variant='destructive'] .dsx-toast__close {
-  color: var(--dsx-color-on-error-container);
+.dsx-toast[data-variant='destructive'] .dsx-toast__close,
+.dsx-toast[data-variant='info'] .dsx-toast__title,
+.dsx-toast[data-variant='info'] .dsx-toast__description,
+.dsx-toast[data-variant='info'] .dsx-toast__close {
+  color: inherit;
 }
 
 /* Keep literal breakpoint because CSS custom properties cannot be used in this media query. */

package/dist/components/toggle-group.css

@@ -6,6 +6,11 @@
   align-items: stretch;
   gap: 0;
   isolation: isolate;
+  /* Narrow-container rule (TMA re-audit 2026-09-23): the fused frame cannot
+     wrap, so cap at the container and scroll instead of hard-clipping the
+     last item on 320px screens. */
+  max-width: 100%;
+  overflow-x: auto;
 }
 
 .dsx-toggle-group__item {
@@ -95,3 +100,36 @@
 .dsx-toggle-group-variant-outline .dsx-toggle-group__item + .dsx-toggle-group__item {
   border-inline-start: none;
 }
+
+/* Real DS gap, not a page-local taste call (found 2026-08-26 via a landing header ToggleGroup,
+   patched there first as `.dsx-landing-lang-toggle` in the consuming app's own globals.css,
+   then verified as a general bug and moved here): the default variant's active state falls
+   through to `--dsx-control-active-background` (baseButton.css), a neutral surface-elevation
+   step meant for a control that already sits on a raised track — Tabs and SegmentedControl both
+   have that track, ToggleGroup's own root does not (confirmed by reading this file: no
+   background is ever set on `.dsx-toggle-group` itself). Measured against the real WCAG
+   luminance formula: ~1.2-1.3:1 contrast against the page background, functionally invisible.
+   `.dsx-toggle[data-state='on']` (the single, non-grouped Toggle) already solves this correctly
+   for itself with a bold `--dsx-accent-track` fill instead of the neutral token — this ports
+   that same accent-driven treatment to the group's default variant only. Scoped to
+   `[data-variant='default']` specifically so `[data-variant='outline']` and
+   `[data-high-contrast='true']` (both already correct, both override via their own
+   `--dsx-base-button-active-*` custom properties in baseButton.css) are untouched. */
+.dsx-toggle-group[data-variant='default'] .dsx-toggle-group__item[data-state='on'] {
+  border-color: var(--dsx-accent-track);
+  background: linear-gradient(var(--dsx-effect-pressed-layer), var(--dsx-effect-pressed-layer)), var(--dsx-accent-track);
+  color: var(--dsx-accent-contrast);
+}
+
+/* Companion to the corner-radius rule above (lines 33-41): the active item's accent fill has no
+   radius of its own, so on the group's own rounded ends it poked a hard square corner past the
+   pill's curve — same technique already proven live on the landing header before this became a
+   package fix. */
+.dsx-toggle-group[data-variant='default'] .dsx-toggle-group__item[data-state='on']:first-child {
+  border-start-start-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
+  border-end-start-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
+}
+.dsx-toggle-group[data-variant='default'] .dsx-toggle-group__item[data-state='on']:last-child {
+  border-start-end-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
+  border-end-end-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
+}

package/dist/components/toggle-tip.css

@@ -39,21 +39,22 @@
 .dsx-toggle-tip__content {
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   border-radius: var(--dsx-rounded-md);
-  background: var(--dsx-color-surface-overlay);
-  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  background: var(--dsx-color-panel-translucent);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+  border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
   color: var(--dsx-color-on-surface);
   font-family: var(--dsx-typography-body-small-font-family), sans-serif;
   font-size: var(--dsx-typography-body-small-font-size);
   font-weight: var(--dsx-typography-body-small-font-weight);
   line-height: var(--dsx-typography-body-small-line-height);
   letter-spacing: var(--dsx-typography-body-small-letter-spacing);
-  box-shadow: var(--dsx-shadow-3);
+  box-shadow: var(--dsx-shadow-elevation-3);
   animation: dsx-toggle-tip-fade var(--dsx-motion-duration-fast) var(--dsx-motion-easing-out);
   max-width: 280px;
 }
 
 .dsx-toggle-tip__arrow {
-  fill: var(--dsx-color-surface-overlay);
+  fill: var(--dsx-color-panel-translucent);
 }
 
 @keyframes dsx-toggle-tip-fade {

package/dist/components/tooltip/Tooltip.cjs

@@ -46,7 +46,10 @@ function TooltipProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Provider, { delayDuration: 200, ...props });
 }
 TooltipProvider.displayName = "TooltipProvider";
-const Tooltip = TooltipPrimitive.Root;
+function Tooltip(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BaseDialog.PortalThemeBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Root, { ...props }) });
+}
+Tooltip.displayName = "Tooltip";
 const TooltipTrigger = React.forwardRef(
   ({ asChild = false, className, children, ...props }, forwardedRef) => {
     const triggerProps = (0, import_extractProps.extractProps)(

package/dist/components/tooltip/Tooltip.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tooltip/Tooltip.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { PortalThemeWrapper } from '../../_internal/BaseDialog'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { tooltipContentPropDefs, tooltipTriggerPropDefs } from './tooltip.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TooltipTriggerOwnProps = GetPropDefTypes<typeof tooltipTriggerPropDefs>\ntype TooltipContentOwnProps = GetPropDefTypes<typeof tooltipContentPropDefs>\n\ntype TooltipRootProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>\ntype TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> & TooltipTriggerOwnProps\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & TooltipContentOwnProps\n\nfunction TooltipProvider(props: TooltipProviderProps) {\n  return <TooltipPrimitive.Provider delayDuration={200} {...props} />\n}\nTooltipProvider.displayName = 'TooltipProvider'\n\nconst Tooltip: typeof TooltipPrimitive.Root = TooltipPrimitive.Root\n\nconst TooltipTrigger = React.forwardRef<React.ComponentRef<typeof TooltipPrimitive.Trigger>, TooltipTriggerProps>(\n  ({ asChild = false, className, children, ...props }, forwardedRef) => {\n    const triggerProps = extractProps(\n      {\n        ...props,\n        asChild,\n      },\n      tooltipTriggerPropDefs,\n    )\n\n    if (asChild) {\n      return (\n        <TooltipPrimitive.Trigger {...triggerProps} ref={forwardedRef} asChild>\n          <Slot className={className}>{children}</Slot>\n        </TooltipPrimitive.Trigger>\n      )\n    }\n\n    return (\n      <TooltipPrimitive.Trigger {...triggerProps} ref={forwardedRef} className={className}>\n        {children}\n      </TooltipPrimitive.Trigger>\n    )\n  },\n)\nTooltipTrigger.displayName = 'TooltipTrigger'\n\nconst TooltipContent = React.forwardRef<React.ComponentRef<typeof TooltipPrimitive.Content>, TooltipContentProps>(\n  ({ className: propClassName, sideOffset = 8, variant = 'default', children, ...props }, forwardedRef) => {\n    const { className, ...contentProps } = extractProps(\n      {\n        ...props,\n        className: propClassName,\n        variant,\n      },\n      tooltipContentPropDefs,\n    )\n\n    return (\n      <TooltipPrimitive.Portal>\n        <PortalThemeWrapper>\n          <TooltipPrimitive.Content\n            {...contentProps}\n            ref={forwardedRef}\n            sideOffset={sideOffset}\n            className={classNames('dsx-tooltip', `dsx-tooltip--${variant}`, className)}\n          >\n            {children}\n            <TooltipPrimitive.Arrow className=\"dsx-tooltip__arrow\" width={8} height={4} />\n          </TooltipPrimitive.Content>\n        </PortalThemeWrapper>\n      </TooltipPrimitive.Portal>\n    )\n  },\n)\nTooltipContent.displayName = 'TooltipContent'\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\nexport type { TooltipContentProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,uBAAkC;AAClC,wBAAqB;AAErB,wBAAmC;AACnC,0BAA6B;AAC7B,qBAA+D;AAatD;AADT,SAAS,gBAAgB,OAA6B;AACpD,SAAO,4CAAC,iBAAiB,UAAjB,EAA0B,eAAe,KAAM,GAAG,OAAO;AACnE;AACA,gBAAgB,cAAc;AAE9B,MAAM,UAAwC,iBAAiB;AAE/D,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,UAAU,OAAO,WAAW,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACpE,UAAM,mBAAe;AAAA,MACnB;AAAA,QACE,GAAG;AAAA,QACH;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAEA,QAAI,SAAS;AACX,aACE,4CAAC,iBAAiB,SAAjB,EAA0B,GAAG,cAAc,KAAK,cAAc,SAAO,MACpE,sDAAC,0BAAK,WAAuB,UAAS,GACxC;AAAA,IAEJ;AAEA,WACE,4CAAC,iBAAiB,SAAjB,EAA0B,GAAG,cAAc,KAAK,cAAc,WAC5D,UACH;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAE7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,eAAe,aAAa,GAAG,UAAU,WAAW,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACvG,UAAM,EAAE,WAAW,GAAG,aAAa,QAAI;AAAA,MACrC;AAAA,QACE,GAAG;AAAA,QACH,WAAW;AAAA,QACX;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAEA,WACE,4CAAC,iBAAiB,QAAjB,EACC,sDAAC,wCACC;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL;AAAA,QACA,eAAW,kBAAAA,SAAW,eAAe,gBAAgB,OAAO,IAAI,SAAS;AAAA,QAExE;AAAA;AAAA,UACD,4CAAC,iBAAiB,OAAjB,EAAuB,WAAU,sBAAqB,OAAO,GAAG,QAAQ,GAAG;AAAA;AAAA;AAAA,IAC9E,GACF,GACF;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { PortalThemeBoundary, PortalThemeWrapper } from '../../_internal/BaseDialog'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { tooltipContentPropDefs, tooltipTriggerPropDefs } from './tooltip.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TooltipTriggerOwnProps = GetPropDefTypes<typeof tooltipTriggerPropDefs>\ntype TooltipContentOwnProps = GetPropDefTypes<typeof tooltipContentPropDefs>\n\ntype TooltipRootProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>\ntype TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> & TooltipTriggerOwnProps\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & TooltipContentOwnProps\n\nfunction TooltipProvider(props: TooltipProviderProps) {\n  return <TooltipPrimitive.Provider delayDuration={200} {...props} />\n}\nTooltipProvider.displayName = 'TooltipProvider'\n\n// Without the boundary, the portal wrapper falls back to the default\n// (dark) theme state, so every tooltip renders dark even on light pages \u2014\n// confirmed live 2026-09-19: white text on a near-invisible box in light\n// mode, correct only by accident in dark mode. Same pattern as HoverCardRoot.\nfunction Tooltip(props: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>) {\n  return (\n    <PortalThemeBoundary>\n      <TooltipPrimitive.Root {...props} />\n    </PortalThemeBoundary>\n  )\n}\nTooltip.displayName = 'Tooltip'\n\nconst TooltipTrigger = React.forwardRef<React.ComponentRef<typeof TooltipPrimitive.Trigger>, TooltipTriggerProps>(\n  ({ asChild = false, className, children, ...props }, forwardedRef) => {\n    const triggerProps = extractProps(\n      {\n        ...props,\n        asChild,\n      },\n      tooltipTriggerPropDefs,\n    )\n\n    if (asChild) {\n      return (\n        <TooltipPrimitive.Trigger {...triggerProps} ref={forwardedRef} asChild>\n          <Slot className={className}>{children}</Slot>\n        </TooltipPrimitive.Trigger>\n      )\n    }\n\n    return (\n      <TooltipPrimitive.Trigger {...triggerProps} ref={forwardedRef} className={className}>\n        {children}\n      </TooltipPrimitive.Trigger>\n    )\n  },\n)\nTooltipTrigger.displayName = 'TooltipTrigger'\n\nconst TooltipContent = React.forwardRef<React.ComponentRef<typeof TooltipPrimitive.Content>, TooltipContentProps>(\n  ({ className: propClassName, sideOffset = 8, variant = 'default', children, ...props }, forwardedRef) => {\n    const { className, ...contentProps } = extractProps(\n      {\n        ...props,\n        className: propClassName,\n        variant,\n      },\n      tooltipContentPropDefs,\n    )\n\n    return (\n      <TooltipPrimitive.Portal>\n        <PortalThemeWrapper>\n          <TooltipPrimitive.Content\n            {...contentProps}\n            ref={forwardedRef}\n            sideOffset={sideOffset}\n            className={classNames('dsx-tooltip', `dsx-tooltip--${variant}`, className)}\n          >\n            {children}\n            <TooltipPrimitive.Arrow className=\"dsx-tooltip__arrow\" width={8} height={4} />\n          </TooltipPrimitive.Content>\n        </PortalThemeWrapper>\n      </TooltipPrimitive.Portal>\n    )\n  },\n)\nTooltipContent.displayName = 'TooltipContent'\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\nexport type { TooltipContentProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,uBAAkC;AAClC,wBAAqB;AAErB,wBAAwD;AACxD,0BAA6B;AAC7B,qBAA+D;AAatD;AADT,SAAS,gBAAgB,OAA6B;AACpD,SAAO,4CAAC,iBAAiB,UAAjB,EAA0B,eAAe,KAAM,GAAG,OAAO;AACnE;AACA,gBAAgB,cAAc;AAM9B,SAAS,QAAQ,OAAqE;AACpF,SACE,4CAAC,yCACC,sDAAC,iBAAiB,MAAjB,EAAuB,GAAG,OAAO,GACpC;AAEJ;AACA,QAAQ,cAAc;AAEtB,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,UAAU,OAAO,WAAW,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACpE,UAAM,mBAAe;AAAA,MACnB;AAAA,QACE,GAAG;AAAA,QACH;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAEA,QAAI,SAAS;AACX,aACE,4CAAC,iBAAiB,SAAjB,EAA0B,GAAG,cAAc,KAAK,cAAc,SAAO,MACpE,sDAAC,0BAAK,WAAuB,UAAS,GACxC;AAAA,IAEJ;AAEA,WACE,4CAAC,iBAAiB,SAAjB,EAA0B,GAAG,cAAc,KAAK,cAAc,WAC5D,UACH;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAE7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,eAAe,aAAa,GAAG,UAAU,WAAW,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACvG,UAAM,EAAE,WAAW,GAAG,aAAa,QAAI;AAAA,MACrC;AAAA,QACE,GAAG;AAAA,QACH,WAAW;AAAA,QACX;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAEA,WACE,4CAAC,iBAAiB,QAAjB,EACC,sDAAC,wCACC;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL;AAAA,QACA,eAAW,kBAAAA,SAAW,eAAe,gBAAgB,OAAO,IAAI,SAAS;AAAA,QAExE;AAAA;AAAA,UACD,4CAAC,iBAAiB,OAAjB,EAAuB,WAAU,sBAAqB,OAAO,GAAG,QAAQ,GAAG;AAAA;AAAA;AAAA,IAC9E,GACF,GACF;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;",
   "names": ["classNames"]
 }

package/dist/components/tooltip/Tooltip.d.cts

@@ -12,7 +12,10 @@ declare function TooltipProvider(props: TooltipProviderProps): import("react/jsx
 declare namespace TooltipProvider {
     var displayName: string;
 }
-declare const Tooltip: typeof TooltipPrimitive.Root;
+declare function Tooltip(props: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
 declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & GetPropDefTypes<{
     asChild: {
         type: "boolean";

package/dist/components/tooltip/Tooltip.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.cts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAK3D,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAEhF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAC5E,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAE5E,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAA;AACpF,KAAK,oBAAoB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAA;AAC5F,KAAK,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,sBAAsB,CAAA;AACnH,KAAK,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,sBAAsB,CAAA;AAEnH,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAEnD;kBAFQ,eAAe;;;AAKxB,QAAA,MAAM,OAAO,EAAE,OAAO,gBAAgB,CAAC,IAA4B,CAAA;AAEnE,QAAA,MAAM,cAAc;;;;;4CAwBnB,CAAA;AAGD,QAAA,MAAM,cAAc;;;;;;yCA2BnB,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAA;AACnE,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"Tooltip.d.cts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAK3D,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAEhF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAC5E,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAE5E,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAA;AACpF,KAAK,oBAAoB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAA;AAC5F,KAAK,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,sBAAsB,CAAA;AACnH,KAAK,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,sBAAsB,CAAA;AAEnH,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAEnD;kBAFQ,eAAe;;;AASxB,iBAAS,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAMnF;kBANQ,OAAO;;;AAShB,QAAA,MAAM,cAAc;;;;;4CAwBnB,CAAA;AAGD,QAAA,MAAM,cAAc;;;;;;yCA2BnB,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAA;AACnE,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/tooltip/Tooltip.d.mts

@@ -12,7 +12,10 @@ declare function TooltipProvider(props: TooltipProviderProps): import("react/jsx
 declare namespace TooltipProvider {
     var displayName: string;
 }
-declare const Tooltip: typeof TooltipPrimitive.Root;
+declare function Tooltip(props: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
 declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & GetPropDefTypes<{
     asChild: {
         type: "boolean";

package/dist/components/tooltip/Tooltip.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.mts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAK3D,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAEhF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAC5E,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAE5E,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAA;AACpF,KAAK,oBAAoB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAA;AAC5F,KAAK,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,sBAAsB,CAAA;AACnH,KAAK,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,sBAAsB,CAAA;AAEnH,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAEnD;kBAFQ,eAAe;;;AAKxB,QAAA,MAAM,OAAO,EAAE,OAAO,gBAAgB,CAAC,IAA4B,CAAA;AAEnE,QAAA,MAAM,cAAc;;;;;4CAwBnB,CAAA;AAGD,QAAA,MAAM,cAAc;;;;;;yCA2BnB,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAA;AACnE,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"Tooltip.d.mts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAK3D,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAEhF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAC5E,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAE5E,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAA;AACpF,KAAK,oBAAoB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAA;AAC5F,KAAK,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,sBAAsB,CAAA;AACnH,KAAK,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,sBAAsB,CAAA;AAEnH,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAEnD;kBAFQ,eAAe;;;AASxB,iBAAS,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAMnF;kBANQ,OAAO;;;AAShB,QAAA,MAAM,cAAc;;;;;4CAwBnB,CAAA;AAGD,QAAA,MAAM,cAAc;;;;;;yCA2BnB,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAA;AACnE,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/tooltip/Tooltip.d.ts

@@ -12,7 +12,10 @@ declare function TooltipProvider(props: TooltipProviderProps): import("react/jsx
 declare namespace TooltipProvider {
     var displayName: string;
 }
-declare const Tooltip: typeof TooltipPrimitive.Root;
+declare function Tooltip(props: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
 declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & GetPropDefTypes<{
     asChild: {
         type: "boolean";

package/dist/components/tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAK3D,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAEhF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAC5E,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAE5E,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAA;AACpF,KAAK,oBAAoB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAA;AAC5F,KAAK,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,sBAAsB,CAAA;AACnH,KAAK,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,sBAAsB,CAAA;AAEnH,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAEnD;kBAFQ,eAAe;;;AAKxB,QAAA,MAAM,OAAO,EAAE,OAAO,gBAAgB,CAAC,IAA4B,CAAA;AAEnE,QAAA,MAAM,cAAc;;;;;4CAwBnB,CAAA;AAGD,QAAA,MAAM,cAAc;;;;;;yCA2BnB,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAA;AACnE,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAK3D,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAEhF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAC5E,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAE5E,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAA;AACpF,KAAK,oBAAoB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAA;AAC5F,KAAK,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,sBAAsB,CAAA;AACnH,KAAK,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,sBAAsB,CAAA;AAEnH,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAEnD;kBAFQ,eAAe;;;AASxB,iBAAS,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAMnF;kBANQ,OAAO;;;AAShB,QAAA,MAAM,cAAc;;;;;4CAwBnB,CAAA;AAGD,QAAA,MAAM,cAAc;;;;;;yCA2BnB,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAA;AACnE,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/tooltip/Tooltip.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import classNames from "classnames";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { Slot } from "@radix-ui/react-slot";
-import { PortalThemeWrapper } from "../../_internal/BaseDialog.js";
+import { PortalThemeBoundary, PortalThemeWrapper } from "../../_internal/BaseDialog.js";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { tooltipContentPropDefs, tooltipTriggerPropDefs } from "./tooltip.props.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -10,7 +10,10 @@ function TooltipProvider(props) {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration: 200, ...props });
 }
 TooltipProvider.displayName = "TooltipProvider";
-const Tooltip = TooltipPrimitive.Root;
+function Tooltip(props) {
+  return /* @__PURE__ */ jsx(PortalThemeBoundary, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props }) });
+}
+Tooltip.displayName = "Tooltip";
 const TooltipTrigger = React.forwardRef(
   ({ asChild = false, className, children, ...props }, forwardedRef) => {
     const triggerProps = extractProps(

package/dist/components/tooltip/Tooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tooltip/Tooltip.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { PortalThemeWrapper } from '../../_internal/BaseDialog'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { tooltipContentPropDefs, tooltipTriggerPropDefs } from './tooltip.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TooltipTriggerOwnProps = GetPropDefTypes<typeof tooltipTriggerPropDefs>\ntype TooltipContentOwnProps = GetPropDefTypes<typeof tooltipContentPropDefs>\n\ntype TooltipRootProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>\ntype TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> & TooltipTriggerOwnProps\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & TooltipContentOwnProps\n\nfunction TooltipProvider(props: TooltipProviderProps) {\n  return <TooltipPrimitive.Provider delayDuration={200} {...props} />\n}\nTooltipProvider.displayName = 'TooltipProvider'\n\nconst Tooltip: typeof TooltipPrimitive.Root = TooltipPrimitive.Root\n\nconst TooltipTrigger = React.forwardRef<React.ComponentRef<typeof TooltipPrimitive.Trigger>, TooltipTriggerProps>(\n  ({ asChild = false, className, children, ...props }, forwardedRef) => {\n    const triggerProps = extractProps(\n      {\n        ...props,\n        asChild,\n      },\n      tooltipTriggerPropDefs,\n    )\n\n    if (asChild) {\n      return (\n        <TooltipPrimitive.Trigger {...triggerProps} ref={forwardedRef} asChild>\n          <Slot className={className}>{children}</Slot>\n        </TooltipPrimitive.Trigger>\n      )\n    }\n\n    return (\n      <TooltipPrimitive.Trigger {...triggerProps} ref={forwardedRef} className={className}>\n        {children}\n      </TooltipPrimitive.Trigger>\n    )\n  },\n)\nTooltipTrigger.displayName = 'TooltipTrigger'\n\nconst TooltipContent = React.forwardRef<React.ComponentRef<typeof TooltipPrimitive.Content>, TooltipContentProps>(\n  ({ className: propClassName, sideOffset = 8, variant = 'default', children, ...props }, forwardedRef) => {\n    const { className, ...contentProps } = extractProps(\n      {\n        ...props,\n        className: propClassName,\n        variant,\n      },\n      tooltipContentPropDefs,\n    )\n\n    return (\n      <TooltipPrimitive.Portal>\n        <PortalThemeWrapper>\n          <TooltipPrimitive.Content\n            {...contentProps}\n            ref={forwardedRef}\n            sideOffset={sideOffset}\n            className={classNames('dsx-tooltip', `dsx-tooltip--${variant}`, className)}\n          >\n            {children}\n            <TooltipPrimitive.Arrow className=\"dsx-tooltip__arrow\" width={8} height={4} />\n          </TooltipPrimitive.Content>\n        </PortalThemeWrapper>\n      </TooltipPrimitive.Portal>\n    )\n  },\n)\nTooltipContent.displayName = 'TooltipContent'\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\nexport type { TooltipContentProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps }\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,YAAY,sBAAsB;AAClC,SAAS,YAAY;AAErB,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB,8BAA8B;AAatD,cA+CC,YA/CD;AADT,SAAS,gBAAgB,OAA6B;AACpD,SAAO,oBAAC,iBAAiB,UAAjB,EAA0B,eAAe,KAAM,GAAG,OAAO;AACnE;AACA,gBAAgB,cAAc;AAE9B,MAAM,UAAwC,iBAAiB;AAE/D,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,UAAU,OAAO,WAAW,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACpE,UAAM,eAAe;AAAA,MACnB;AAAA,QACE,GAAG;AAAA,QACH;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAEA,QAAI,SAAS;AACX,aACE,oBAAC,iBAAiB,SAAjB,EAA0B,GAAG,cAAc,KAAK,cAAc,SAAO,MACpE,8BAAC,QAAK,WAAuB,UAAS,GACxC;AAAA,IAEJ;AAEA,WACE,oBAAC,iBAAiB,SAAjB,EAA0B,GAAG,cAAc,KAAK,cAAc,WAC5D,UACH;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAE7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,eAAe,aAAa,GAAG,UAAU,WAAW,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACvG,UAAM,EAAE,WAAW,GAAG,aAAa,IAAI;AAAA,MACrC;AAAA,QACE,GAAG;AAAA,QACH,WAAW;AAAA,QACX;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAEA,WACE,oBAAC,iBAAiB,QAAjB,EACC,8BAAC,sBACC;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL;AAAA,QACA,WAAW,WAAW,eAAe,gBAAgB,OAAO,IAAI,SAAS;AAAA,QAExE;AAAA;AAAA,UACD,oBAAC,iBAAiB,OAAjB,EAAuB,WAAU,sBAAqB,OAAO,GAAG,QAAQ,GAAG;AAAA;AAAA;AAAA,IAC9E,GACF,GACF;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { PortalThemeBoundary, PortalThemeWrapper } from '../../_internal/BaseDialog'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { tooltipContentPropDefs, tooltipTriggerPropDefs } from './tooltip.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TooltipTriggerOwnProps = GetPropDefTypes<typeof tooltipTriggerPropDefs>\ntype TooltipContentOwnProps = GetPropDefTypes<typeof tooltipContentPropDefs>\n\ntype TooltipRootProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>\ntype TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> & TooltipTriggerOwnProps\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & TooltipContentOwnProps\n\nfunction TooltipProvider(props: TooltipProviderProps) {\n  return <TooltipPrimitive.Provider delayDuration={200} {...props} />\n}\nTooltipProvider.displayName = 'TooltipProvider'\n\n// Without the boundary, the portal wrapper falls back to the default\n// (dark) theme state, so every tooltip renders dark even on light pages \u2014\n// confirmed live 2026-09-19: white text on a near-invisible box in light\n// mode, correct only by accident in dark mode. Same pattern as HoverCardRoot.\nfunction Tooltip(props: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>) {\n  return (\n    <PortalThemeBoundary>\n      <TooltipPrimitive.Root {...props} />\n    </PortalThemeBoundary>\n  )\n}\nTooltip.displayName = 'Tooltip'\n\nconst TooltipTrigger = React.forwardRef<React.ComponentRef<typeof TooltipPrimitive.Trigger>, TooltipTriggerProps>(\n  ({ asChild = false, className, children, ...props }, forwardedRef) => {\n    const triggerProps = extractProps(\n      {\n        ...props,\n        asChild,\n      },\n      tooltipTriggerPropDefs,\n    )\n\n    if (asChild) {\n      return (\n        <TooltipPrimitive.Trigger {...triggerProps} ref={forwardedRef} asChild>\n          <Slot className={className}>{children}</Slot>\n        </TooltipPrimitive.Trigger>\n      )\n    }\n\n    return (\n      <TooltipPrimitive.Trigger {...triggerProps} ref={forwardedRef} className={className}>\n        {children}\n      </TooltipPrimitive.Trigger>\n    )\n  },\n)\nTooltipTrigger.displayName = 'TooltipTrigger'\n\nconst TooltipContent = React.forwardRef<React.ComponentRef<typeof TooltipPrimitive.Content>, TooltipContentProps>(\n  ({ className: propClassName, sideOffset = 8, variant = 'default', children, ...props }, forwardedRef) => {\n    const { className, ...contentProps } = extractProps(\n      {\n        ...props,\n        className: propClassName,\n        variant,\n      },\n      tooltipContentPropDefs,\n    )\n\n    return (\n      <TooltipPrimitive.Portal>\n        <PortalThemeWrapper>\n          <TooltipPrimitive.Content\n            {...contentProps}\n            ref={forwardedRef}\n            sideOffset={sideOffset}\n            className={classNames('dsx-tooltip', `dsx-tooltip--${variant}`, className)}\n          >\n            {children}\n            <TooltipPrimitive.Arrow className=\"dsx-tooltip__arrow\" width={8} height={4} />\n          </TooltipPrimitive.Content>\n        </PortalThemeWrapper>\n      </TooltipPrimitive.Portal>\n    )\n  },\n)\nTooltipContent.displayName = 'TooltipContent'\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\nexport type { TooltipContentProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps }\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,YAAY,sBAAsB;AAClC,SAAS,YAAY;AAErB,SAAS,qBAAqB,0BAA0B;AACxD,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB,8BAA8B;AAatD,cA0DC,YA1DD;AADT,SAAS,gBAAgB,OAA6B;AACpD,SAAO,oBAAC,iBAAiB,UAAjB,EAA0B,eAAe,KAAM,GAAG,OAAO;AACnE;AACA,gBAAgB,cAAc;AAM9B,SAAS,QAAQ,OAAqE;AACpF,SACE,oBAAC,uBACC,8BAAC,iBAAiB,MAAjB,EAAuB,GAAG,OAAO,GACpC;AAEJ;AACA,QAAQ,cAAc;AAEtB,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,UAAU,OAAO,WAAW,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACpE,UAAM,eAAe;AAAA,MACnB;AAAA,QACE,GAAG;AAAA,QACH;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAEA,QAAI,SAAS;AACX,aACE,oBAAC,iBAAiB,SAAjB,EAA0B,GAAG,cAAc,KAAK,cAAc,SAAO,MACpE,8BAAC,QAAK,WAAuB,UAAS,GACxC;AAAA,IAEJ;AAEA,WACE,oBAAC,iBAAiB,SAAjB,EAA0B,GAAG,cAAc,KAAK,cAAc,WAC5D,UACH;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAE7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,eAAe,aAAa,GAAG,UAAU,WAAW,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACvG,UAAM,EAAE,WAAW,GAAG,aAAa,IAAI;AAAA,MACrC;AAAA,QACE,GAAG;AAAA,QACH,WAAW;AAAA,QACX;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAEA,WACE,oBAAC,iBAAiB,QAAjB,EACC,8BAAC,sBACC;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL;AAAA,QACA,WAAW,WAAW,eAAe,gBAAgB,OAAO,IAAI,SAAS;AAAA,QAExE;AAAA;AAAA,UACD,oBAAC,iBAAiB,OAAjB,EAAuB,WAAU,sBAAqB,OAAO,GAAG,QAAQ,GAAG;AAAA;AAAA;AAAA,IAC9E,GACF,GACF;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;",
   "names": []
 }

package/dist/components/tooltip.css

@@ -2,7 +2,8 @@
   max-width: var(--dsx-tooltip-max-width);
   border-radius: var(--dsx-rounded-sm);
   padding: var(--dsx-space-xs) var(--dsx-space-sm);
-  background: var(--dsx-color-surface-overlay);
+  background: var(--dsx-color-panel-translucent);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
   color: var(--dsx-color-on-surface);
   box-shadow: var(--dsx-shadow-elevation-2);
   font-family: var(--dsx-typography-label-small-font-family), sans-serif;
@@ -11,12 +12,18 @@
   line-height: var(--dsx-typography-label-small-line-height);
 }
 
-.dsx-tooltip--primary {
+/* Doubled class (0,2,0, within policy): the portal Theme wrapper merges
+   `dsx-theme` onto this element via Slot, and `.dsx-theme`'s own
+   `color: on-surface` (same specificity, later in the bundle) would
+   otherwise clobber the variant text color — confirmed live 2026-09-19
+   (dark text on primary purple in light mode, light text on lime in
+   dark+spark). Background already wins (no .dsx-theme background rule). */
+.dsx-tooltip.dsx-tooltip--primary {
   background: var(--dsx-color-primary);
   color: var(--dsx-color-on-primary);
 }
 
-.dsx-tooltip--error {
+.dsx-tooltip.dsx-tooltip--error {
   background: var(--dsx-color-error);
   color: var(--dsx-color-on-error);
 }

package/dist/components.css

@@ -8,6 +8,7 @@
 @import 'components/aspect-ratio.css';
 @import 'components/avatar.css';
 @import 'components/badge.css';
+@import 'components/banner.css';
 @import 'components/button.css';
 @import 'components/card.css';
 @import 'components/carousel.css';
@@ -62,6 +63,7 @@
 @import 'components/kbd.css';
 @import 'components/navigation-menu.css';
 @import 'components/number-input.css';
+@import 'components/phone-input.css';
 @import 'components/page-content.css';
 @import 'components/page-header.css';
 @import 'components/progress.css';
@@ -71,14 +73,15 @@
 @import 'components/rich-text-editor.css';
 @import 'components/scroll-area.css';
 @import 'components/search-bar.css';
-@import 'components/sheet.css';
 @import 'components/sidebar.css';
 @import 'components/sonner.css';
 @import 'components/table.css';
 @import 'components/tabs.css';
 @import 'components/tab-nav.css';
 @import 'components/tags-input.css';
+@import 'components/tag.css';
 @import 'components/textarea.css';
+@import 'components/text-area-field.css';
 @import 'components/toast.css';
 @import 'components/toggle.css';
 @import 'components/toggle-group.css';
@@ -186,12 +189,6 @@
   color: var(--dsx-color-on-surface);
 }
 
-.dsx-select__trigger:focus-visible,
-.dsx-menubar__trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--dsx-shadow-focus-ring);
-}
-
 .dsx-table__caption {
   margin-bottom: var(--dsx-space-md);
   text-align: left;
@@ -203,24 +200,6 @@
   letter-spacing: var(--dsx-typography-label-small-letter-spacing);
 }
 
-.dsx-menubar__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--dsx-space-sm);
-  color: var(--dsx-color-on-surface);
-  text-decoration: none;
-}
-
-.dsx-menubar__trigger[data-highlighted] {
-  background: var(--dsx-effect-hover-ghost);
-  color: var(--dsx-color-primary);
-}
-
-.dsx-menubar__trigger[data-disabled] {
-  opacity: var(--dsx-opacity-disabled);
-  pointer-events: none;
-}
-
 .dsx-pills {
   display: flex;
   align-items: center;
@@ -235,23 +214,6 @@
   cursor: default;
 }
 
-.dsx-navigation-menu {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--dsx-space-sm);
-}
-
-.dsx-navigation-menu {
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--dsx-space-xs);
-  padding: var(--dsx-space-xs);
-  border-radius: var(--dsx-rounded-md);
-  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
-  background: var(--dsx-color-surface-overlay);
-}
-
 @keyframes dsx-skeleton-shimmer {
   0% {
     background-position: 200% 0;

package/dist/docs/README.md

@@ -0,0 +1,154 @@
+# D4gger Design System Documentation
+
+These consumer documents are generated from the canonical repository specifications at package build time.
+They describe public intent and contracts; TypeScript declarations remain the exact executable API.
+
+- [Consumer guide](./consumer-guide.md)
+- [Theme guide](./theme-guide.md)
+- [Component attribute contract](./component-contract.md)
+- [Machine-readable component index](./component-index.json)
+
+## Foundations
+
+- [Box](./components/box.md)
+- [ConfigDrawer](./components/config-drawer.md)
+- [Container](./components/container.md)
+- [DirectionProvider](./components/direction-provider.md)
+- [Flex](./components/flex.md)
+- [FontProvider](./components/font-provider.md)
+- [Grid](./components/grid.md)
+- [Inset](./components/inset.md)
+- [Layout (props)](./components/layout-props.md)
+- [Section](./components/section.md)
+- [Shared](./components/shared.md)
+- [Stack](./components/stack.md)
+- [Theme](./components/theme.md)
+- [ThemePanel](./components/theme-panel.md)
+- [ThemeProvider](./components/theme-provider.md)
+- [Typography](./components/typography.md)
+
+## Primitives
+
+- [AccessibleIcon](./components/accessible-icon.md)
+- [AspectRatio](./components/aspect-ratio.md)
+- [Avatar](./components/avatar.md)
+- [Badge](./components/badge.md)
+- [Blockquote](./components/blockquote.md)
+- [Button](./components/button.md)
+- [Checkbox](./components/checkbox.md)
+- [Code](./components/code.md)
+- [ColorSwatch](./components/color-swatch.md)
+- [CopyButton](./components/copy-button.md)
+- [Em](./components/em.md)
+- [Heading](./components/heading.md)
+- [Icon](./components/icon.md)
+- [IconButton](./components/icon-button.md)
+- [Input](./components/input.md)
+- [Kbd](./components/kbd.md)
+- [Label](./components/label.md)
+- [Link](./components/link.md)
+- [Progress](./components/progress.md)
+- [Quote](./components/quote.md)
+- [SegmentedMeter](./components/segmented-meter.md)
+- [Separator](./components/separator.md)
+- [Skeleton](./components/skeleton.md)
+- [Slider](./components/slider.md)
+- [Slot](./components/slot.md)
+- [Spinner](./components/spinner.md)
+- [Strong](./components/strong.md)
+- [Switch](./components/switch.md)
+- [Tag](./components/tag.md)
+- [Text](./components/text.md)
+- [TextArea](./components/text-area.md)
+- [Toggle](./components/toggle.md)
+- [Tooltip](./components/tooltip.md)
+- [VisuallyHidden](./components/visually-hidden.md)
+
+## Components
+
+- [Accordion](./components/accordion.md)
+- [Alert](./components/alert.md)
+- [AlertDialog](./components/alert-dialog.md)
+- [ArticleNodes](./components/article-nodes.md)
+- [Banner](./components/banner.md)
+- [Breadcrumb](./components/breadcrumb.md)
+- [ButtonGroup](./components/button-group.md)
+- [Calendar](./components/calendar.md)
+- [Callout](./components/callout.md)
+- [Card](./components/card.md)
+- [Carousel](./components/carousel.md)
+- [Chart](./components/chart.md)
+- [CheckboxCards](./components/checkbox-cards.md)
+- [CheckboxGroup](./components/checkbox-group.md)
+- [CodeInput](./components/code-input.md)
+- [Collapsible](./components/collapsible.md)
+- [ColorPicker](./components/color-picker.md)
+- [Combobox](./components/combobox.md)
+- [Command](./components/command.md)
+- [CommentThread](./components/comment-thread.md)
+- [ContextMenu](./components/context-menu.md)
+- [CopyField](./components/copy-field.md)
+- [DataList](./components/data-list.md)
+- [DataTable](./components/data-table.md)
+- [DatePicker](./components/date-picker.md)
+- [Dialog](./components/dialog.md)
+- [Drawer](./components/drawer.md)
+- [DropdownMenu](./components/dropdown-menu.md)
+- [Editable](./components/editable.md)
+- [EmptyState](./components/empty-state.md)
+- [Field](./components/field.md)
+- [FileUpload](./components/file-upload.md)
+- [FilterBar](./components/filter-bar.md)
+- [FloatingPanel](./components/floating-panel.md)
+- [Form](./components/form.md)
+- [HoverCard](./components/hover-card.md)
+- [InputGroup](./components/input-group.md)
+- [InputOtp](./components/input-otp.md)
+- [Item](./components/item.md)
+- [Marquee](./components/marquee.md)
+- [Menu](./components/menu.md)
+- [Menubar](./components/menubar.md)
+- [Metric](./components/metric.md)
+- [NativeSelect](./components/native-select.md)
+- [NavigationMenu](./components/navigation-menu.md)
+- [NotificationCenter](./components/notification-center.md)
+- [NumberInput](./components/number-input.md)
+- [PageContent](./components/page-content.md)
+- [PageHeader](./components/page-header.md)
+- [Pagination](./components/pagination.md)
+- [PasswordInput](./components/password-input.md)
+- [PhoneInput](./components/phone-input.md)
+- [Pills](./components/pills.md)
+- [Popover](./components/popover.md)
+- [Prose](./components/prose.md)
+- [QRCode](./components/qr-code.md)
+- [RadioCards](./components/radio-cards.md)
+- [RadioGroup](./components/radio-group.md)
+- [Rating](./components/rating.md)
+- [Resizable](./components/resizable.md)
+- [Result](./components/result.md)
+- [RichTextEditor](./components/rich-text-editor.md)
+- [ScrollArea](./components/scroll-area.md)
+- [SearchBar](./components/search-bar.md)
+- [SegmentedControl](./components/segmented-control.md)
+- [Select](./components/select.md)
+- [Sidebar](./components/sidebar.md)
+- [Sonner](./components/sonner.md)
+- [SortableList](./components/sortable-list.md)
+- [StatCard](./components/stat-card.md)
+- [Status](./components/status.md)
+- [Stepper](./components/stepper.md)
+- [Table](./components/table.md)
+- [TableOfContents](./components/table-of-contents.md)
+- [TabNav](./components/tab-nav.md)
+- [Tabs](./components/tabs.md)
+- [TagsInput](./components/tags-input.md)
+- [TextAreaField](./components/text-area-field.md)
+- [TextField](./components/text-field.md)
+- [Timeline](./components/timeline.md)
+- [TimePicker](./components/time-picker.md)
+- [Toast](./components/toast.md)
+- [ToggleGroup](./components/toggle-group.md)
+- [ToggleTip](./components/toggle-tip.md)
+- [Toolbar](./components/toolbar.md)
+- [TreeView](./components/tree-view.md)