@common-origin/design-system 3.0.0 → 3.2.0

package/dist/components/atoms/Badge/Badge.d.mts

@@ -1,6 +1,6 @@
 import React from 'react';
 /**
- * Badge variants: `default`, the near-black count, and `accent`, the blue highlight (decision 0045).
+ * Badge variants: `default`, the count on the strongest neutral fill, and `accent`, the blue highlight (decision 0045).
  */
 export type BadgeVariant = 'default' | 'accent';
 export interface BadgeProps {
@@ -12,7 +12,7 @@ export interface BadgeProps {
     max?: number;
     /**
      * Visual variant of the badge. A badge means new or unread items (decision 0045): `accent` is
-     * the blue highlight, and `default` the near-black count. A badge's colour alone can't carry a
+     * the blue highlight, and `default` the count on the strongest neutral fill. A badge's colour alone can't carry a
      * status, so a count of items with a status uses the status pattern instead ("3 failed" with
      * StatusLabel).
      * @default 'default'

package/dist/components/atoms/Badge/Badge.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 /**
- * Badge variants: `default`, the near-black count, and `accent`, the blue highlight (decision 0045).
+ * Badge variants: `default`, the count on the strongest neutral fill, and `accent`, the blue highlight (decision 0045).
  */
 export type BadgeVariant = 'default' | 'accent';
 export interface BadgeProps {
@@ -12,7 +12,7 @@ export interface BadgeProps {
     max?: number;
     /**
      * Visual variant of the badge. A badge means new or unread items (decision 0045): `accent` is
-     * the blue highlight, and `default` the near-black count. A badge's colour alone can't carry a
+     * the blue highlight, and `default` the count on the strongest neutral fill. A badge's colour alone can't carry a
      * status, so a count of items with a status uses the status pattern instead ("3 failed" with
      * StatusLabel).
      * @default 'default'

package/dist/components/atoms/Badge/Badge.mjs

@@ -5,7 +5,6 @@ import styled$module, { keyframes } from 'styled-components';
 const styled = styled$module.default || styled$module;
 import { reducedMotion, forcedColors, visuallyHidden } from '../../../lib/styleUtils.mjs';
 import tokens from '../../../lib/cssTokens.mjs';
-import { Typography } from '../Typography/Typography.mjs';
 
 var semantic = tokens.semantic;
 var color = semantic.color;
@@ -25,7 +24,10 @@ var BadgeIndicator = /*#__PURE__*/styled.span.withConfig({
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"])), function (props) {
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"
+// The count takes the indicator's colour, so each variant's content colour reaches it: inverse on
+// the strong fill, on-fill on the accent fill (decision 0056)
+])), function (props) {
   return props.$isVisible ? 'flex' : 'none';
 }, function (props) {
   return props.$isDot ? dot.size : count.minWidth;
@@ -38,15 +40,21 @@ var BadgeIndicator = /*#__PURE__*/styled.span.withConfig({
 }, function (props) {
   switch (props.$variant) {
     case 'accent':
-      return "\n          background-color: ".concat(color.fill.accent, ";\n          color: ").concat(color.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color.fill.accent, ";\n          color: ").concat(color.text['on-fill'], ";\n        ");
     default:
       return "\n          background-color: ".concat(color.fill.emphasis, ";\n          color: ").concat(color.text.inverse, ";\n        ");
   }
 });
+// The count takes the indicator's colour, so each variant's content colour reaches it: inverse on
+// the strong fill, on-fill on the accent fill (decision 0056)
+var Count = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Badge__Count",
+  componentId: "sc-tjz4pp-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font: ", ";\n  text-transform: uppercase;\n"], ["\n  font: ", ";\n  text-transform: uppercase;\n"])), semantic.typography.caption);
 var ScreenReaderOnly = /*#__PURE__*/styled.span.withConfig({
   displayName: "Badge__ScreenReaderOnly",
-  componentId: "sc-tjz4pp-2"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+  componentId: "sc-tjz4pp-3"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
 var Badge = function Badge(_a) {
   var children = _a.children,
     _b = _a.count,
@@ -74,9 +82,7 @@ var Badge = function Badge(_a) {
       "$isVisible": isVisible,
       role: "status",
       "aria-live": "polite",
-      children: [!dot && jsx(Typography, {
-        variant: "caption",
-        color: "inverse",
+      children: [!dot && jsx(Count, {
         children: displayCount
       }), jsx(ScreenReaderOnly, {
         children: label
@@ -84,7 +90,7 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 export { Badge };
 //# sourceMappingURL=Badge.mjs.map

package/dist/components/atoms/Box/Box.d.mts

@@ -47,8 +47,9 @@ export interface BoxProps {
     borderBottom?: keyof Tokens['semantic']['color']['border'];
     borderLeft?: keyof Tokens['semantic']['color']['border'];
     /**
-     * Background colour, as a semantic token path: `surface.base` (page), `surface.raised` (cards,
-     * sheets), `surface.scrim`, or a `color.fill.*` fill such as `color.fill.muted`.
+     * Background colour, as a semantic token path: `surface.base` (page), `surface.raised` (cards),
+     * `surface.overlay` (floating layers such as menus and dialogs), `surface.scrim`, or a
+     * `color.fill.*` fill such as `color.fill.muted`.
      */
     bg?: BoxBackground;
     color?: keyof Tokens['semantic']['color']['text'];

package/dist/components/atoms/Box/Box.d.ts

@@ -47,8 +47,9 @@ export interface BoxProps {
     borderBottom?: keyof Tokens['semantic']['color']['border'];
     borderLeft?: keyof Tokens['semantic']['color']['border'];
     /**
-     * Background colour, as a semantic token path: `surface.base` (page), `surface.raised` (cards,
-     * sheets), `surface.scrim`, or a `color.fill.*` fill such as `color.fill.muted`.
+     * Background colour, as a semantic token path: `surface.base` (page), `surface.raised` (cards),
+     * `surface.overlay` (floating layers such as menus and dialogs), `surface.scrim`, or a
+     * `color.fill.*` fill such as `color.fill.muted`.
      */
     bg?: BoxBackground;
     color?: keyof Tokens['semantic']['color']['text'];

package/dist/components/atoms/Button/Button.mjs

@@ -15,7 +15,7 @@ var button = tokens.component.button,
 var inset = semantic.space.inset;
 var control = semantic.size.control;
 // Base styles shared between button and link
-var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button.focus.outline, ";\n    outline-offset: ").concat(semantic.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
+var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  /* The system ring for keyboard focus only: a click doesn't leave it behind (P2, P5) */\n  &:focus-visible {\n    outline: ").concat(button.focus.outline, ";\n    outline-offset: ").concat(semantic.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
 // Dynamic variant styles using component tokens
 var getVariantStyles = function getVariantStyles(_a) {
   var _b;

package/dist/components/atoms/Chip/shared/ChipBase.mjs

@@ -36,7 +36,7 @@ var CloseButton = /*#__PURE__*/styled.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], chip.closeButton.size, chip.closeButton.size, tokens.semantic.space[0], semantic.size.label.medium, semantic.size.label.medium, tokens.semantic.radius.xs, function (props) {
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], chip.closeButton.size, chip.closeButton.size, tokens.semantic.space[0], semantic.size.label.medium, semantic.size.label.medium, tokens.semantic.radius.full, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
 }, semantic.motion.transition.feedback, tokens.semantic.color.fill['none-hover'], tokens.semantic.color.fill['none-pressed'], tokens.semantic.color.text.disabled, chip.focus.outline, semantic.border.focusOffset, chip["default"].borderRadius);
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/atoms/IconButton/IconButton.mjs

@@ -66,7 +66,7 @@ var IconButtonStyled = /*#__PURE__*/styled.button.withConfig({
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  /* The system ring for keyboard focus only: a click doesn't leave it behind (P2, P5) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  /* The system ring for keyboard focus only: a click doesn't leave it behind (P2, P5) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), function (_a) {
   var $variant = _a.$variant;
   return colours($variant).bg;
 }, function (_a) {

package/dist/components/atoms/ProgressBar/ProgressBar.d.mts

@@ -4,7 +4,7 @@ export interface ProgressBarProps {
     value: number;
     /** Orientation of the progress bar */
     variant?: 'horizontal' | 'vertical';
-    /** Fill colour: `default` is near-black (`background.emphasis`); `success` and `error` use their status colours */
+    /** Fill colour: `default` is the strongest neutral fill (`color.fill.emphasis`: near-black in light, near-white in dark); `success` and `error` use their status colours */
     color?: 'success' | 'error' | 'default';
     /** Height size for horizontal progress bar (default: md) */
     height?: 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/atoms/ProgressBar/ProgressBar.d.ts

@@ -4,7 +4,7 @@ export interface ProgressBarProps {
     value: number;
     /** Orientation of the progress bar */
     variant?: 'horizontal' | 'vertical';
-    /** Fill colour: `default` is near-black (`background.emphasis`); `success` and `error` use their status colours */
+    /** Fill colour: `default` is the strongest neutral fill (`color.fill.emphasis`: near-black in light, near-white in dark); `success` and `error` use their status colours */
     color?: 'success' | 'error' | 'default';
     /** Height size for horizontal progress bar (default: md) */
     height?: 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/atoms/Tag/Tag.d.mts

@@ -5,7 +5,7 @@ export interface TagProps {
      */
     children: React.ReactNode;
     /**
-     * Visual variant. Tag is neutral metadata: use `default`, or `emphasis` (near-black) to make a
+     * Visual variant. Tag is neutral metadata: use `default`, or `emphasis` (the strongest neutral fill) to make a
      * tag stand out. For a status, use `StatusLabel` (decision 0029).
      * @default 'default'
      */

package/dist/components/atoms/Tag/Tag.d.ts

@@ -5,7 +5,7 @@ export interface TagProps {
      */
     children: React.ReactNode;
     /**
-     * Visual variant. Tag is neutral metadata: use `default`, or `emphasis` (near-black) to make a
+     * Visual variant. Tag is neutral metadata: use `default`, or `emphasis` (the strongest neutral fill) to make a
      * tag stand out. For a status, use `StatusLabel` (decision 0029).
      * @default 'default'
      */

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { type FloatingAlign, type FloatingSide } from '../../../lib/floatingPosition.mjs';
+export type TooltipSide = FloatingSide;
+export type TooltipAlign = FloatingAlign;
+export interface TooltipProps {
+    /** The tooltip's text. In `label` mode it repeats the trigger's existing accessible name. */
+    text: string;
+    /**
+     * `label` (default) shows the name the trigger already has, such as an IconButton's
+     * `aria-label`, and is hidden from assistive technology so the name isn't announced twice.
+     * `description` adds non-essential help, linked to the trigger with `aria-describedby`. Hover
+     * text can't be reached on touch screens, so anything a user needs must be visible text.
+     * @default 'label'
+     */
+    kind?: 'label' | 'description';
+    /**
+     * The side of the trigger it opens on. It flips to the opposite side when there's no room.
+     * @default 'top'
+     */
+    side?: TooltipSide;
+    /**
+     * Where it lines up along the trigger's edge.
+     * @default 'center'
+     */
+    align?: TooltipAlign;
+    /**
+     * Turns the tooltip off while keeping the trigger where it is, such as when the label it repeats
+     * is visible. Changing it never remounts the trigger.
+     * @default false
+     */
+    disabled?: boolean;
+    /** One focusable element: the trigger */
+    children: React.ReactElement;
+    /** Test identifier for the tooltip bubble */
+    'data-testid'?: string;
+}
+/**
+ * A short label or hint that appears beside a control on hover or keyboard focus (#326).
+ *
+ * Opens after `motion.delay.hint` of hover, at once on keyboard focus, and at once when the pointer
+ * moves on from another tooltip. Stays open while the pointer is over it; closes on pointer leave,
+ * blur, scroll and Escape. Doesn't open on touch.
+ */
+export declare const Tooltip: {
+    ({ text, kind, side, align, disabled, children, "data-testid": dataTestId, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { type FloatingAlign, type FloatingSide } from '../../../lib/floatingPosition';
+export type TooltipSide = FloatingSide;
+export type TooltipAlign = FloatingAlign;
+export interface TooltipProps {
+    /** The tooltip's text. In `label` mode it repeats the trigger's existing accessible name. */
+    text: string;
+    /**
+     * `label` (default) shows the name the trigger already has, such as an IconButton's
+     * `aria-label`, and is hidden from assistive technology so the name isn't announced twice.
+     * `description` adds non-essential help, linked to the trigger with `aria-describedby`. Hover
+     * text can't be reached on touch screens, so anything a user needs must be visible text.
+     * @default 'label'
+     */
+    kind?: 'label' | 'description';
+    /**
+     * The side of the trigger it opens on. It flips to the opposite side when there's no room.
+     * @default 'top'
+     */
+    side?: TooltipSide;
+    /**
+     * Where it lines up along the trigger's edge.
+     * @default 'center'
+     */
+    align?: TooltipAlign;
+    /**
+     * Turns the tooltip off while keeping the trigger where it is, such as when the label it repeats
+     * is visible. Changing it never remounts the trigger.
+     * @default false
+     */
+    disabled?: boolean;
+    /** One focusable element: the trigger */
+    children: React.ReactElement;
+    /** Test identifier for the tooltip bubble */
+    'data-testid'?: string;
+}
+/**
+ * A short label or hint that appears beside a control on hover or keyboard focus (#326).
+ *
+ * Opens after `motion.delay.hint` of hover, at once on keyboard focus, and at once when the pointer
+ * moves on from another tooltip. Stays open while the pointer is over it; closes on pointer leave,
+ * blur, scroll and Escape. Doesn't open on touch.
+ */
+export declare const Tooltip: {
+    ({ text, kind, side, align, disabled, children, "data-testid": dataTestId, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/atoms/Tooltip/Tooltip.mjs

@@ -0,0 +1,214 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId, useRef, useState, useCallback, useEffect } from 'react';
+import styled$module, { keyframes, css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import tokensJson from '../../../styles/tokens.json.mjs';
+import { exitAnimation, forcedColorsEdge, visuallyHidden } from '../../../lib/styleUtils.mjs';
+import { usePresence } from '../../../lib/usePresence.mjs';
+import { useFloatingLayer } from '../../../lib/useFloatingLayer.mjs';
+import { isKeyboardFocus } from '../../../lib/keyboardFocus.mjs';
+
+var semantic = tokens.semantic;
+var motion = tokensJson.semantic.motion;
+// How long the pointer rests before the tooltip opens (#326)
+var HINT_DELAY_MS = parseInt(motion.delay.hint, 10);
+// Moving to another trigger within this window opens its tooltip at once, so a rail feels immediate
+var SKIP_DELAY_MS = parseInt(motion.duration.slow, 10);
+// The grace period for the pointer to cross from the trigger onto the tooltip (WCAG 1.4.13)
+var CLOSE_GRACE_MS = parseInt(motion.duration.fast, 10);
+// Shared by every Tooltip: only one is open at a time, and the next one opens at once while one
+// is open or within the skip-delay window after it closed
+var lastClosedAt = 0;
+var active = null;
+var fadeIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { opacity: 0; }\n"], ["\n  from { opacity: 0; }\n"
+// A fade, so it needs no reduced-motion fallback (0015). Entrances decelerate (0037).
+])));
+// A fade, so it needs no reduced-motion fallback (0015). Entrances decelerate (0037).
+var Bubble = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Tooltip__Bubble",
+  componentId: "sc-ajez94-0"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* Reset the popover defaults: it's placed with top and left */\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: visible;\n  box-sizing: border-box;\n  max-width: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  animation: ", " ", " ", "\n    ", ";\n\n  ", "\n"], ["\n  /* Reset the popover defaults: it's placed with top and left */\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: visible;\n  box-sizing: border-box;\n  max-width: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  animation: ", " ", " ", "\n    ", ";\n\n  ", "\n"])), semantic.size[7500], semantic.space.inset.xs, semantic.space.inset.sm, semantic.radius.sm, semantic.color.fill.inverse, semantic.color.text.inverse, semantic.typography.small, fadeIn, semantic.motion.duration.fast, semantic.motion.easing.decelerate, function (_a) {
+  var $exiting = _a.$exiting;
+  return $exiting ? exitAnimation : css(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+}, forcedColorsEdge);
+var Description = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Tooltip__Description",
+  componentId: "sc-ajez94-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+// The trigger's wrapper takes no box of its own, so the trigger lays out as if unwrapped
+])), visuallyHidden);
+// The trigger's wrapper takes no box of its own, so the trigger lays out as if unwrapped
+var Anchor = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Tooltip__Anchor",
+  componentId: "sc-ajez94-2"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"
+/**
+ * A short label or hint that appears beside a control on hover or keyboard focus (#326).
+ *
+ * Opens after `motion.delay.hint` of hover, at once on keyboard focus, and at once when the pointer
+ * moves on from another tooltip. Stays open while the pointer is over it; closes on pointer leave,
+ * blur, scroll and Escape. Doesn't open on touch.
+ */])));
+/**
+ * A short label or hint that appears beside a control on hover or keyboard focus (#326).
+ *
+ * Opens after `motion.delay.hint` of hover, at once on keyboard focus, and at once when the pointer
+ * moves on from another tooltip. Stays open while the pointer is over it; closes on pointer leave,
+ * blur, scroll and Escape. Doesn't open on touch.
+ */
+var Tooltip = function Tooltip(_a) {
+  var text = _a.text,
+    _b = _a.kind,
+    kind = _b === void 0 ? 'label' : _b,
+    _c = _a.side,
+    side = _c === void 0 ? 'top' : _c,
+    _d = _a.align,
+    align = _d === void 0 ? 'center' : _d,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    children = _a.children,
+    dataTestId = _a["data-testid"];
+  var descriptionId = useId();
+  var anchorRef = useRef(null);
+  var bubbleRef = useRef(null);
+  var openTimer = useRef(undefined);
+  var closeTimer = useRef(undefined);
+  var owner = useState(function () {
+    return {};
+  })[0];
+  // Set by a press, so the focus that follows a click or tap doesn't reopen the tooltip
+  var pressed = useRef(false);
+  var _f = useState(false),
+    isOpen = _f[0],
+    setIsOpen = _f[1];
+  // Turned off while showing (its label became visible): close it on the same render
+  var _g = useState(disabled),
+    wasDisabled = _g[0],
+    setWasDisabled = _g[1];
+  if (wasDisabled !== disabled) {
+    setWasDisabled(disabled);
+    if (disabled) setIsOpen(false);
+  }
+  var _h = usePresence(isOpen),
+    isPresent = _h.isPresent,
+    isExiting = _h.isExiting;
+  var clearTimers = function clearTimers() {
+    clearTimeout(openTimer.current);
+    clearTimeout(closeTimer.current);
+  };
+  var close = useCallback(function () {
+    clearTimers();
+    if ((active === null || active === void 0 ? void 0 : active.owner) === owner) {
+      active = null;
+      lastClosedAt = Date.now();
+    }
+    setIsOpen(false);
+  }, [owner]);
+  var open = useCallback(function () {
+    clearTimers();
+    if (active && active.owner !== owner) active.close();
+    active = {
+      owner: owner,
+      close: close
+    };
+    setIsOpen(true);
+  }, [owner, close]);
+  var scheduleOpen = function scheduleOpen() {
+    clearTimeout(closeTimer.current);
+    if (isOpen || disabled) return;
+    // Moving straight from one trigger to the next (another tooltip still open) or just after one
+    // closed skips the delay, so a rail feels immediate
+    if (active || Date.now() - lastClosedAt < SKIP_DELAY_MS) return open();
+    clearTimeout(openTimer.current);
+    openTimer.current = setTimeout(open, HINT_DELAY_MS);
+  };
+  var scheduleClose = function scheduleClose() {
+    clearTimeout(openTimer.current);
+    clearTimeout(closeTimer.current);
+    closeTimer.current = setTimeout(close, CLOSE_GRACE_MS);
+  };
+  useEffect(function () {
+    return function () {
+      clearTimers();
+      if ((active === null || active === void 0 ? void 0 : active.owner) === owner) active = null;
+    };
+  }, [owner]);
+  // While open: Escape closes it without moving focus, and before anything else hears the key
+  // (an Escape meant for the tooltip mustn't also close a Modal)
+  useEffect(function () {
+    if (!isOpen) return;
+    var onKeyDown = function onKeyDown(event) {
+      if (event.key !== 'Escape') return;
+      event.stopPropagation();
+      close();
+    };
+    window.addEventListener('keydown', onKeyDown, true);
+    return function () {
+      return window.removeEventListener('keydown', onKeyDown, true);
+    };
+  }, [isOpen, close]);
+  // In the top layer beside the trigger; scrolling or resizing closes it, since the trigger moves
+  useFloatingLayer({
+    isPresent: isPresent,
+    floatingRef: bubbleRef,
+    anchorRef: anchorRef,
+    side: side,
+    align: align,
+    onDetach: close
+  });
+  var child = React.Children.only(children);
+  var describedBy = [child.props['aria-describedby'], kind === 'description' ? descriptionId : undefined].filter(Boolean).join(' ') || undefined;
+  return jsxs(Anchor, {
+    ref: anchorRef,
+    onPointerEnter: function onPointerEnter(event) {
+      return event.pointerType !== 'touch' && scheduleOpen();
+    },
+    onPointerLeave: function onPointerLeave(event) {
+      return event.pointerType !== 'touch' && scheduleClose();
+    },
+    onFocus: function onFocus(event) {
+      // Keyboard focus opens it at once; a click's or tap's focus doesn't
+      if (pressed.current) {
+        pressed.current = false;
+        return;
+      }
+      if (!disabled && isKeyboardFocus(event.target)) open();
+    },
+    onBlur: function onBlur() {
+      // A press on an already focused trigger has no focus to skip; don't carry it over
+      pressed.current = false;
+      close();
+    },
+    // Pressing the trigger acts on it, so the hint has done its job
+    onPointerDown: function onPointerDown() {
+      pressed.current = true;
+      close();
+    },
+    children: [/*#__PURE__*/React.cloneElement(child, {
+      'aria-describedby': describedBy
+    }), kind === 'description' && jsx(Description, {
+      id: descriptionId,
+      children: text
+    }), isPresent &&
+    // Hidden from assistive technology: a label repeats the trigger's name, and a
+    // description reaches it through aria-describedby on the always-present text above
+    jsx(Bubble, {
+      ref: bubbleRef,
+      "aria-hidden": "true",
+      "$exiting": isExiting,
+      "data-testid": dataTestId,
+      children: text
+    })]
+  });
+};
+Tooltip.displayName = 'Tooltip';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.mjs.map

package/dist/components/atoms/Tooltip/Tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/Tooltip/index.d.mts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip.mjs';
+export type { TooltipProps, TooltipSide, TooltipAlign } from './Tooltip.mjs';

package/dist/components/atoms/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipSide, TooltipAlign } from './Tooltip';

package/dist/components/atoms/index.d.mts

@@ -15,5 +15,6 @@ export * from './Divider/index.mjs';
 export * from './Stack/index.mjs';
 export * from './StatusLabel/index.mjs';
 export * from './Tag/index.mjs';
+export * from './Tooltip/index.mjs';
 export * from './Typography/index.mjs';
 export * from './AILabel/index.mjs';

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

@@ -15,5 +15,6 @@ export * from './Divider';
 export * from './Stack';
 export * from './StatusLabel';
 export * from './Tag';
+export * from './Tooltip';
 export * from './Typography';
 export * from './AILabel';

package/dist/components/index.d.mts

@@ -1,4 +1,5 @@
 export * from './atoms//index.mjs';
 export * from './molecules//index.mjs';
+export * from './organisms//index.mjs';
 export * from './layout//index.mjs';
 export { ResponsiveGrid, GridCol, Grid } from './layout/GridSystem/index.mjs';

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './atoms/';
 export * from './molecules/';
+export * from './organisms/';
 export * from './layout/';
 export { ResponsiveGrid, GridCol, Grid } from './layout/GridSystem';

package/dist/components/molecules/ActionSheet/ActionSheet.mjs

@@ -32,7 +32,7 @@ var StyledOverlay = /*#__PURE__*/styled.div.withConfig({
 var StyledActionSheet = /*#__PURE__*/styled.div.withConfig({
   displayName: "ActionSheet__StyledActionSheet",
   componentId: "sc-regbol-1"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), tokens.semantic.surface.raised, tokens.semantic.radius.lg, tokens.semantic.radius.lg, elevation.overlay, tokens.semantic.layer.modal, slideUp, motion.duration.slow, motion.easing.decelerate, function (_a) {
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), tokens.semantic.surface.overlay, tokens.component.overlay.borderRadius, tokens.component.overlay.borderRadius, elevation.overlay, tokens.semantic.layer.modal, slideUp, motion.duration.slow, motion.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 }, reducedMotion, fadeIn, motion.duration.slow, motion.easing.decelerate, function (_a) {
@@ -50,7 +50,7 @@ var StyledHeaderContent = /*#__PURE__*/styled.div.withConfig({
 var StyledCloseButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "ActionSheet__StyledCloseButton",
   componentId: "sc-regbol-4"
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), space[200], color.icon.muted, tokens.semantic.radius.sm, motion.transition.feedback, space[200], color.icon["default"], color.fill.muted, border.focus, border.focusOffset);
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), space[200], color.icon.muted, tokens.semantic.radius.md, motion.transition.feedback, space[200], color.icon["default"], color.fill.muted, border.focus, border.focusOffset);
 var StyledActionsList = /*#__PURE__*/styled.ul.withConfig({
   displayName: "ActionSheet__StyledActionsList",
   componentId: "sc-regbol-5"
@@ -269,6 +269,7 @@ var ActionSheet = function ActionSheet(_a) {
               },
               disabled: action.disabled,
               destructive: action.destructive,
+              // Deprecated prop (0051), kept for this padding until 4.0 removes it
               spacing: "compact"
             })]
           }, action.id);