@common-origin/design-system 3.0.0 → 3.2.0

package/dist/lib/floatingPosition.d.mts

@@ -0,0 +1,43 @@
+export type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
+export type FloatingAlign = 'start' | 'center' | 'end';
+export interface FloatingRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface FloatingOptions {
+    /** The anchor's box, from getBoundingClientRect */
+    anchor: FloatingRect;
+    /** The floating element's size */
+    floating: {
+        width: number;
+        height: number;
+    };
+    /** The side to place it on; it flips to the opposite side when that has more room */
+    side: FloatingSide;
+    /** Where it lines up along the anchor's edge */
+    align: FloatingAlign;
+    /** The gap between the anchor and the floating element, in px */
+    offset: number;
+    /** The viewport's size */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** The smallest distance kept from the viewport's edges, in px */
+    margin: number;
+}
+export interface FloatingPosition {
+    top: number;
+    left: number;
+    /** The side it ended up on, after any flip */
+    side: FloatingSide;
+}
+export declare function placeFloating(options: FloatingOptions): FloatingPosition;
+/**
+ * The element that actually has a box inside a wrapper: Tooltip and Menu wrap their trigger in a
+ * `display: contents` span, and a trigger can be nested in more than one (a Tooltip inside a Menu's
+ * trigger), so this steps down until it finds an element that lays out.
+ */
+export declare function laidOutElement(wrapper: Element | null): Element | null;

package/dist/lib/floatingPosition.d.ts

@@ -0,0 +1,43 @@
+export type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
+export type FloatingAlign = 'start' | 'center' | 'end';
+export interface FloatingRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface FloatingOptions {
+    /** The anchor's box, from getBoundingClientRect */
+    anchor: FloatingRect;
+    /** The floating element's size */
+    floating: {
+        width: number;
+        height: number;
+    };
+    /** The side to place it on; it flips to the opposite side when that has more room */
+    side: FloatingSide;
+    /** Where it lines up along the anchor's edge */
+    align: FloatingAlign;
+    /** The gap between the anchor and the floating element, in px */
+    offset: number;
+    /** The viewport's size */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** The smallest distance kept from the viewport's edges, in px */
+    margin: number;
+}
+export interface FloatingPosition {
+    top: number;
+    left: number;
+    /** The side it ended up on, after any flip */
+    side: FloatingSide;
+}
+export declare function placeFloating(options: FloatingOptions): FloatingPosition;
+/**
+ * The element that actually has a box inside a wrapper: Tooltip and Menu wrap their trigger in a
+ * `display: contents` span, and a trigger can be nested in more than one (a Tooltip inside a Menu's
+ * trigger), so this steps down until it finds an element that lays out.
+ */
+export declare function laidOutElement(wrapper: Element | null): Element | null;

package/dist/lib/floatingPosition.mjs

@@ -0,0 +1,86 @@
+'use client';
+// Places a floating element (Tooltip, Menu) next to its anchor, without a positioning library
+// (P8). Pure geometry, so it can be tested without a browser: the caller measures both elements
+// and applies the result as `top` and `left` on a `position: fixed` element.
+var opposite = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+// The room between the anchor and the viewport edge on each side
+var room = function room(side, _a) {
+  var anchor = _a.anchor,
+    viewport = _a.viewport,
+    margin = _a.margin;
+  switch (side) {
+    case 'top':
+      return anchor.top - margin;
+    case 'bottom':
+      return viewport.height - (anchor.top + anchor.height) - margin;
+    case 'left':
+      return anchor.left - margin;
+    case 'right':
+      return viewport.width - (anchor.left + anchor.width) - margin;
+  }
+};
+var clamp = function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, max));
+};
+function placeFloating(options) {
+  var anchor = options.anchor,
+    floating = options.floating,
+    align = options.align,
+    offset = options.offset,
+    viewport = options.viewport,
+    margin = options.margin;
+  var vertical = function vertical(s) {
+    return s === 'top' || s === 'bottom';
+  };
+  // Flip when the preferred side is too small and the opposite side has more room
+  var side = options.side;
+  var needed = (vertical(side) ? floating.height : floating.width) + offset;
+  if (room(side, options) < needed && room(opposite[side], options) > room(side, options)) {
+    side = opposite[side];
+  }
+  // Main axis: beside the anchor, `offset` away
+  var top = 0;
+  var left = 0;
+  if (side === 'top') top = anchor.top - offset - floating.height;
+  if (side === 'bottom') top = anchor.top + anchor.height + offset;
+  if (side === 'left') left = anchor.left - offset - floating.width;
+  if (side === 'right') left = anchor.left + anchor.width + offset;
+  // Cross axis: aligned to the anchor's start, centre or end, then kept inside the viewport
+  if (vertical(side)) {
+    if (align === 'start') left = anchor.left;
+    if (align === 'center') left = anchor.left + (anchor.width - floating.width) / 2;
+    if (align === 'end') left = anchor.left + anchor.width - floating.width;
+    left = clamp(left, margin, viewport.width - floating.width - margin);
+  } else {
+    if (align === 'start') top = anchor.top;
+    if (align === 'center') top = anchor.top + (anchor.height - floating.height) / 2;
+    if (align === 'end') top = anchor.top + anchor.height - floating.height;
+    top = clamp(top, margin, viewport.height - floating.height - margin);
+  }
+  return {
+    top: Math.round(top),
+    left: Math.round(left),
+    side: side
+  };
+}
+/**
+ * The element that actually has a box inside a wrapper: Tooltip and Menu wrap their trigger in a
+ * `display: contents` span, and a trigger can be nested in more than one (a Tooltip inside a Menu's
+ * trigger), so this steps down until it finds an element that lays out.
+ */
+function laidOutElement(wrapper) {
+  var _a;
+  var element = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.firstElementChild) !== null && _a !== void 0 ? _a : null;
+  while (element && typeof getComputedStyle !== 'undefined' && getComputedStyle(element).display === 'contents') {
+    element = element.firstElementChild;
+  }
+  return element;
+}
+
+export { laidOutElement, placeFloating };
+//# sourceMappingURL=floatingPosition.mjs.map

package/dist/lib/floatingPosition.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatingPosition.mjs","sources":["../../src/lib/floatingPosition.ts"],"sourcesContent":["// Places a floating element (Tooltip, Menu) next to its anchor, without a positioning library\n// (P8). Pure geometry, so it can be tested without a browser: the caller measures both elements\n// and applies the result as `top` and `left` on a `position: fixed` element.\n\nexport type FloatingSide = 'top' | 'right' | 'bottom' | 'left'\nexport type FloatingAlign = 'start' | 'center' | 'end'\n\nexport interface FloatingRect {\n  top: number\n  left: number\n  width: number\n  height: number\n}\n\nexport interface FloatingOptions {\n  /** The anchor's box, from getBoundingClientRect */\n  anchor: FloatingRect\n  /** The floating element's size */\n  floating: { width: number; height: number }\n  /** The side to place it on; it flips to the opposite side when that has more room */\n  side: FloatingSide\n  /** Where it lines up along the anchor's edge */\n  align: FloatingAlign\n  /** The gap between the anchor and the floating element, in px */\n  offset: number\n  /** The viewport's size */\n  viewport: { width: number; height: number }\n  /** The smallest distance kept from the viewport's edges, in px */\n  margin: number\n}\n\nexport interface FloatingPosition {\n  top: number\n  left: number\n  /** The side it ended up on, after any flip */\n  side: FloatingSide\n}\n\nconst opposite: Record<FloatingSide, FloatingSide> = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }\n\n// The room between the anchor and the viewport edge on each side\nconst room = (side: FloatingSide, { anchor, viewport, margin }: FloatingOptions) => {\n  switch (side) {\n    case 'top': return anchor.top - margin\n    case 'bottom': return viewport.height - (anchor.top + anchor.height) - margin\n    case 'left': return anchor.left - margin\n    case 'right': return viewport.width - (anchor.left + anchor.width) - margin\n  }\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max))\n\nexport function placeFloating(options: FloatingOptions): FloatingPosition {\n  const { anchor, floating, align, offset, viewport, margin } = options\n  const vertical = (s: FloatingSide) => s === 'top' || s === 'bottom'\n\n  // Flip when the preferred side is too small and the opposite side has more room\n  let side = options.side\n  const needed = (vertical(side) ? floating.height : floating.width) + offset\n  if (room(side, options) < needed && room(opposite[side], options) > room(side, options)) {\n    side = opposite[side]\n  }\n\n  // Main axis: beside the anchor, `offset` away\n  let top = 0\n  let left = 0\n  if (side === 'top') top = anchor.top - offset - floating.height\n  if (side === 'bottom') top = anchor.top + anchor.height + offset\n  if (side === 'left') left = anchor.left - offset - floating.width\n  if (side === 'right') left = anchor.left + anchor.width + offset\n\n  // Cross axis: aligned to the anchor's start, centre or end, then kept inside the viewport\n  if (vertical(side)) {\n    if (align === 'start') left = anchor.left\n    if (align === 'center') left = anchor.left + (anchor.width - floating.width) / 2\n    if (align === 'end') left = anchor.left + anchor.width - floating.width\n    left = clamp(left, margin, viewport.width - floating.width - margin)\n  } else {\n    if (align === 'start') top = anchor.top\n    if (align === 'center') top = anchor.top + (anchor.height - floating.height) / 2\n    if (align === 'end') top = anchor.top + anchor.height - floating.height\n    top = clamp(top, margin, viewport.height - floating.height - margin)\n  }\n\n  return { top: Math.round(top), left: Math.round(left), side }\n}\n\n/**\n * The element that actually has a box inside a wrapper: Tooltip and Menu wrap their trigger in a\n * `display: contents` span, and a trigger can be nested in more than one (a Tooltip inside a Menu's\n * trigger), so this steps down until it finds an element that lays out.\n */\nexport function laidOutElement(wrapper: Element | null): Element | null {\n  let element = wrapper?.firstElementChild ?? null\n  while (element && typeof getComputedStyle !== 'undefined' && getComputedStyle(element).display === 'contents') {\n    element = element.firstElementChild\n  }\n  return element\n}\n"],"names":["opposite","top","bottom","left","right","room","side","_a","anchor","viewport","margin","height","width","clamp","value","min","max","Math","placeFloating","options","floating","align","offset","vertical","s","needed","round","laidOutElement","wrapper","element","firstElementChild","getComputedStyle","display"],"mappings":"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"}

package/dist/lib/keyboardFocus.d.mts

@@ -0,0 +1,6 @@
+/**
+ * Whether focus arrived from the keyboard rather than a click or tap, so a component can show
+ * something on keyboard focus only (a Tooltip, SidebarNav's highlight). Browsers without
+ * `:focus-visible` treat every focus as keyboard focus.
+ */
+export declare function isKeyboardFocus(target: EventTarget | null): boolean;

package/dist/lib/keyboardFocus.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Whether focus arrived from the keyboard rather than a click or tap, so a component can show
+ * something on keyboard focus only (a Tooltip, SidebarNav's highlight). Browsers without
+ * `:focus-visible` treat every focus as keyboard focus.
+ */
+export declare function isKeyboardFocus(target: EventTarget | null): boolean;

package/dist/lib/keyboardFocus.mjs

@@ -0,0 +1,17 @@
+'use client';
+/**
+ * Whether focus arrived from the keyboard rather than a click or tap, so a component can show
+ * something on keyboard focus only (a Tooltip, SidebarNav's highlight). Browsers without
+ * `:focus-visible` treat every focus as keyboard focus.
+ */
+function isKeyboardFocus(target) {
+  if (!(target instanceof Element)) return false;
+  try {
+    return target.matches(':focus-visible');
+  } catch (_a) {
+    return true;
+  }
+}
+
+export { isKeyboardFocus };
+//# sourceMappingURL=keyboardFocus.mjs.map

package/dist/lib/keyboardFocus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardFocus.mjs","sources":["../../src/lib/keyboardFocus.ts"],"sourcesContent":["/**\n * Whether focus arrived from the keyboard rather than a click or tap, so a component can show\n * something on keyboard focus only (a Tooltip, SidebarNav's highlight). Browsers without\n * `:focus-visible` treat every focus as keyboard focus.\n */\nexport function isKeyboardFocus(target: EventTarget | null): boolean {\n  if (!(target instanceof Element)) return false\n  try {\n    return target.matches(':focus-visible')\n  } catch {\n    return true\n  }\n}\n"],"names":["isKeyboardFocus","target","Element","matches","_a"],"mappings":";AAAA;;;;AAIG;AACG,SAAUA,eAAeA,CAACC,MAA0B,EAAA;AACxD,EAAA,IAAI,EAAEA,MAAM,YAAYC,OAAO,CAAC,EAAE,OAAO,KAAK,CAAA;EAC9C,IAAI;AACF,IAAA,OAAOD,MAAM,CAACE,OAAO,CAAC,gBAAgB,CAAC,CAAA;GACxC,CAAC,OAAAC,EAAA,EAAM;AACN,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AACF;;;;"}

package/dist/lib/styleUtils.d.mts

@@ -21,6 +21,10 @@ export declare const forcedColorsEdge: string;
 export declare const reducedMotion = "@media (prefers-reduced-motion: reduce)";
 export declare const exitAnimation: import("styled-components").RuleSet<object>;
 export declare const visuallyHidden: import("styled-components").RuleSet<object>;
+/** Corner radius of a button inside a field (a stepper, a clear or show-password button): one step tighter than the field, so its corner nests (decision 0055). */
+export declare const fieldButtonRadius: string;
+/** Corner radius every row and tab shares: the control radius (decision 0055). */
+export declare const rowRadius: string;
 export interface RowState {
     background: string;
     text?: string;

package/dist/lib/styleUtils.d.ts

@@ -21,6 +21,10 @@ export declare const forcedColorsEdge: string;
 export declare const reducedMotion = "@media (prefers-reduced-motion: reduce)";
 export declare const exitAnimation: import("styled-components").RuleSet<object>;
 export declare const visuallyHidden: import("styled-components").RuleSet<object>;
+/** Corner radius of a button inside a field (a stepper, a clear or show-password button): one step tighter than the field, so its corner nests (decision 0055). */
+export declare const fieldButtonRadius: string;
+/** Corner radius every row and tab shares: the control radius (decision 0055). */
+export declare const rowRadius: string;
 export interface RowState {
     background: string;
     text?: string;

package/dist/lib/styleUtils.mjs

@@ -69,6 +69,10 @@ var visuallyHidden = css(templateObject_3 || (templateObject_3 = __makeTemplateO
 var _a = tokens.semantic.color,
   rowFill = _a.fill,
   rowText = _a.text;
+/** Corner radius of a button inside a field (a stepper, a clear or show-password button): one step tighter than the field, so its corner nests (decision 0055). */
+var fieldButtonRadius = tokens.semantic.radius.sm;
+/** Corner radius every row and tab shares: the control radius (decision 0055). */
+var rowRadius = tokens.semantic.radius.md;
 var rowStates = {
   unselected: {
     rest: {
@@ -156,5 +160,5 @@ var rowForcedColors = function rowForcedColors(_a) {
 };
 var templateObject_1, templateObject_2, templateObject_3;
 
-export { breakpoints, exitAnimation, forcedColors, forcedColorsEdge, interactiveRow, media, reducedMotion, rowStates, visuallyHidden };
+export { breakpoints, exitAnimation, fieldButtonRadius, forcedColors, forcedColorsEdge, interactiveRow, media, reducedMotion, rowRadius, rowStates, visuallyHidden };
 //# sourceMappingURL=styleUtils.mjs.map

package/dist/lib/styleUtils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styleUtils.mjs","sources":["../../src/lib/styleUtils.ts"],"sourcesContent":["import { css, keyframes } from 'styled-components'\nimport tokens from './cssTokens'\n\n// Breakpoints from the semantic tokens (decision 0014)\nexport const breakpoints = {\n  xs: tokens.semantic.breakpoint.xs,\n  sm: tokens.semantic.breakpoint.sm,\n  md: tokens.semantic.breakpoint.md,\n  lg: tokens.semantic.breakpoint.lg,\n  xl: tokens.semantic.breakpoint.xl,\n  '2xl': tokens.semantic.breakpoint['2xl'],\n}\n\n// Media query helpers\nexport const media = {\n  xs: `@media (min-width: ${breakpoints.xs})`,\n  sm: `@media (min-width: ${breakpoints.sm})`,\n  md: `@media (min-width: ${breakpoints.md})`,\n  lg: `@media (min-width: ${breakpoints.lg})`,\n  xl: `@media (min-width: ${breakpoints.xl})`,\n  '2xl': `@media (min-width: ${breakpoints['2xl']})`,\n}\n\n// Windows Contrast Themes and other forced-colours modes (decision 0038). The browser swaps in\n// the user's system colours, drops background colours and box-shadows, and keeps borders and\n// outlines. Inside this query, give a control that shows its edge with a fill alone a border,\n// and draw selected and checked states with system colours: ButtonText for control edges,\n// Highlight and HighlightText for selected and checked, GrayText for disabled, CanvasText for\n// content. Use forced-color-adjust: none only on a fill that carries state.\nexport const forcedColors = '@media (forced-colors: active)'\n\n/** A control's edge in forced colours, for a control that shows its edge with a fill alone. The\n * border follows the text colour the browser picks: ButtonText, LinkText, or GrayText when disabled. */\nexport const forcedColorsEdge = `${forcedColors} {\n  border: ${tokens.semantic.border.width.thin} solid currentColor;\n}`\n\n// Wrap fallbacks for people who ask for less motion (decision 0005): movement becomes\n// an instant change or a simple fade. Colour and opacity transitions need no fallback.\nexport const reducedMotion = '@media (prefers-reduced-motion: reduce)'\n\n// No `from` keyframe: the fade starts from the element's current opacity, including a\n// still-running entrance, so closing mid-entrance doesn't jump back to fully visible.\nconst fadeOut = keyframes`\n  to { opacity: 0; }\n`\n\n// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of\n// the element's `animation` declarations while it exits: the entrance stays in the list,\n// so it isn't restarted, and the fade runs on top of it. A fade is already the\n// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop\n// still catches clicks (so they can't reach the page behind it) and the panel is inert.\n// Exits accelerate: things leaving speed up as they go (decision 0037).\nexport const exitAnimation = css`, ${fadeOut} ${tokens.semantic.motion.duration.fast} ${tokens.semantic.motion.easing.accelerate} forwards`\n\n// Content for screen readers only. The 1px size and -1px margin are part of the standard\n// visually-hidden technique, not design values, so they aren't tokens.\nexport const visuallyHidden = css`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n`\n\n// One interaction pattern for rows and items: list items, menu and listbox options, sidebars\n// (decision 0030). Unselected rows follow the naked Button's ladder; selected rows follow the\n// light-blue selected ladder, with the text darkening with its fill (decision 0016). Unselected\n// rows leave their text colour to the component, so a destructive row can stay red.\nconst { fill: rowFill, text: rowText } = tokens.semantic.color\n\nexport interface RowState {\n  background: string\n  text?: string\n}\n\nexport const rowStates: Record<'unselected' | 'selected', Record<'rest' | 'hover' | 'pressed', RowState>> = {\n  unselected: {\n    rest: { background: 'transparent' },\n    hover: { background: rowFill.muted },\n    pressed: { background: rowFill.default },\n  },\n  selected: {\n    rest: { background: rowFill['accent-muted'], text: rowText.accent },\n    hover: { background: rowFill['accent-muted-hover'], text: rowText.accent },\n    pressed: { background: rowFill['accent-muted-pressed'], text: rowText.accent },\n  },\n}\n\nconst rowDeclarations = ({ background, text }: RowState, textSelector?: string) => {\n  if (!text) return `background-color: ${background};`\n  return textSelector\n    ? `background-color: ${background};\\n  ${textSelector} { color: ${text}; }`\n    : `background-color: ${background};\\n  color: ${text};`\n}\n\n/**\n * The background (and, when selected, text) of an interactive row in every state.\n * - `focused`: keyboard focus that isn't DOM focus, such as a listbox option under\n *   aria-activedescendant. It shows the hover state.\n * - `disabled`: shows the resting state, with no hover or press.\n * - `textSelector`: a descendant to colour when the row's text isn't the row itself, for example\n *   text set by Typography. Pass it without `&`.\n */\nexport const interactiveRow = ({\n  selected = false,\n  focused = false,\n  disabled = false,\n  textSelector,\n}: {\n  selected?: boolean\n  focused?: boolean\n  disabled?: boolean\n  textSelector?: string\n} = {}) => {\n  const states = selected ? rowStates.selected : rowStates.unselected\n  if (disabled) return `${rowDeclarations(states.rest, textSelector)}\\n${rowForcedColors({ selected, focused, disabled, textSelector })}`\n  return `\n  ${rowDeclarations(focused ? states.hover : states.rest, textSelector)}\n\n  &:hover {\n    ${rowDeclarations(states.hover, textSelector)}\n  }\n\n  &:active {\n    ${rowDeclarations(states.pressed, textSelector)}\n  }\n\n  ${rowForcedColors({ selected, focused, disabled, textSelector })}\n`\n}\n\n// Rows in forced colours (decision 0038): fills are dropped, so a selected row takes the system\n// selection colours, and a hovered or keyboard-active row is outlined in Highlight.\nconst rowForcedColors = ({\n  selected,\n  focused,\n  disabled,\n  textSelector,\n}: {\n  selected: boolean\n  focused: boolean\n  disabled: boolean\n  textSelector?: string\n}) => {\n  const text = (color: string) => (textSelector ? `color: ${color};\\n    ${textSelector} { color: ${color}; }` : `color: ${color};`)\n  const hover = `outline: ${tokens.semantic.border.width.thin} solid Highlight;\\n      outline-offset: calc(-1 * ${tokens.semantic.border.width.thin});`\n  // A row that doesn't respond (disabled, or not interactive at all) keeps its selection but has\n  // no hover outline. Disabled text is the component's to colour: callers also pass this for\n  // static rows, which must stay CanvasText.\n  // A selected row keeps forced-color-adjust: auto: the browser keeps system colours an author\n  // sets, so the row stays Highlight with HighlightText. Its descendants' own colours would be\n  // forced to CanvasText, so they inherit HighlightText, and anything drawn with a fill inside\n  // (a chip or tag as the row's badge) drops it and keeps its edge. The doubled class outranks\n  // the descendants' own rules.\n  return `${forcedColors} {\n    ${selected ? `background-color: Highlight;\\n    ${text('HighlightText')}\\n    && * {\\n      color: inherit;\\n      background-color: transparent;\\n    }` : ''}\n    ${!disabled && focused ? hover : ''}\n    ${disabled ? '' : `&:hover {\\n      ${hover}\\n    }`}\n  }`\n}\n"],"names":["breakpoints","xs","tokens","semantic","breakpoint","sm","md","lg","xl","media","concat","forcedColors","forcedColorsEdge","border","width","thin","reducedMotion","fadeOut","keyframes","templateObject_1","__makeTemplateObject","exitAnimation","css","templateObject_2","motion","duration","fast","easing","accelerate","visuallyHidden","_a","color","rowFill","fill","rowText","text","rowStates","unselected","rest","background","hover","muted","pressed","selected","accent","rowDeclarations","textSelector","interactiveRow","_b","_c","_d","focused","_e","disabled","states","rowForcedColors"],"mappings":"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"}
+{"version":3,"file":"styleUtils.mjs","sources":["../../src/lib/styleUtils.ts"],"sourcesContent":["import { css, keyframes } from 'styled-components'\nimport tokens from './cssTokens'\n\n// Breakpoints from the semantic tokens (decision 0014)\nexport const breakpoints = {\n  xs: tokens.semantic.breakpoint.xs,\n  sm: tokens.semantic.breakpoint.sm,\n  md: tokens.semantic.breakpoint.md,\n  lg: tokens.semantic.breakpoint.lg,\n  xl: tokens.semantic.breakpoint.xl,\n  '2xl': tokens.semantic.breakpoint['2xl'],\n}\n\n// Media query helpers\nexport const media = {\n  xs: `@media (min-width: ${breakpoints.xs})`,\n  sm: `@media (min-width: ${breakpoints.sm})`,\n  md: `@media (min-width: ${breakpoints.md})`,\n  lg: `@media (min-width: ${breakpoints.lg})`,\n  xl: `@media (min-width: ${breakpoints.xl})`,\n  '2xl': `@media (min-width: ${breakpoints['2xl']})`,\n}\n\n// Windows Contrast Themes and other forced-colours modes (decision 0038). The browser swaps in\n// the user's system colours, drops background colours and box-shadows, and keeps borders and\n// outlines. Inside this query, give a control that shows its edge with a fill alone a border,\n// and draw selected and checked states with system colours: ButtonText for control edges,\n// Highlight and HighlightText for selected and checked, GrayText for disabled, CanvasText for\n// content. Use forced-color-adjust: none only on a fill that carries state.\nexport const forcedColors = '@media (forced-colors: active)'\n\n/** A control's edge in forced colours, for a control that shows its edge with a fill alone. The\n * border follows the text colour the browser picks: ButtonText, LinkText, or GrayText when disabled. */\nexport const forcedColorsEdge = `${forcedColors} {\n  border: ${tokens.semantic.border.width.thin} solid currentColor;\n}`\n\n// Wrap fallbacks for people who ask for less motion (decision 0005): movement becomes\n// an instant change or a simple fade. Colour and opacity transitions need no fallback.\nexport const reducedMotion = '@media (prefers-reduced-motion: reduce)'\n\n// No `from` keyframe: the fade starts from the element's current opacity, including a\n// still-running entrance, so closing mid-entrance doesn't jump back to fully visible.\nconst fadeOut = keyframes`\n  to { opacity: 0; }\n`\n\n// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of\n// the element's `animation` declarations while it exits: the entrance stays in the list,\n// so it isn't restarted, and the fade runs on top of it. A fade is already the\n// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop\n// still catches clicks (so they can't reach the page behind it) and the panel is inert.\n// Exits accelerate: things leaving speed up as they go (decision 0037).\nexport const exitAnimation = css`, ${fadeOut} ${tokens.semantic.motion.duration.fast} ${tokens.semantic.motion.easing.accelerate} forwards`\n\n// Content for screen readers only. The 1px size and -1px margin are part of the standard\n// visually-hidden technique, not design values, so they aren't tokens.\nexport const visuallyHidden = css`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n`\n\n// One interaction pattern for rows and items: list items, menu and listbox options, sidebars\n// (decision 0030). Unselected rows follow the naked Button's ladder; selected rows follow the\n// light-blue selected ladder, with the text darkening with its fill (decision 0016). Unselected\n// rows leave their text colour to the component, so a destructive row can stay red.\nconst { fill: rowFill, text: rowText } = tokens.semantic.color\n\n/** Corner radius of a button inside a field (a stepper, a clear or show-password button): one step tighter than the field, so its corner nests (decision 0055). */\nexport const fieldButtonRadius = tokens.semantic.radius.sm\n\n/** Corner radius every row and tab shares: the control radius (decision 0055). */\nexport const rowRadius = tokens.semantic.radius.md\n\nexport interface RowState {\n  background: string\n  text?: string\n}\n\nexport const rowStates: Record<'unselected' | 'selected', Record<'rest' | 'hover' | 'pressed', RowState>> = {\n  unselected: {\n    rest: { background: 'transparent' },\n    hover: { background: rowFill.muted },\n    pressed: { background: rowFill.default },\n  },\n  selected: {\n    rest: { background: rowFill['accent-muted'], text: rowText.accent },\n    hover: { background: rowFill['accent-muted-hover'], text: rowText.accent },\n    pressed: { background: rowFill['accent-muted-pressed'], text: rowText.accent },\n  },\n}\n\nconst rowDeclarations = ({ background, text }: RowState, textSelector?: string) => {\n  if (!text) return `background-color: ${background};`\n  return textSelector\n    ? `background-color: ${background};\\n  ${textSelector} { color: ${text}; }`\n    : `background-color: ${background};\\n  color: ${text};`\n}\n\n/**\n * The background (and, when selected, text) of an interactive row in every state.\n * - `focused`: keyboard focus that isn't DOM focus, such as a listbox option under\n *   aria-activedescendant. It shows the hover state.\n * - `disabled`: shows the resting state, with no hover or press.\n * - `textSelector`: a descendant to colour when the row's text isn't the row itself, for example\n *   text set by Typography. Pass it without `&`.\n */\nexport const interactiveRow = ({\n  selected = false,\n  focused = false,\n  disabled = false,\n  textSelector,\n}: {\n  selected?: boolean\n  focused?: boolean\n  disabled?: boolean\n  textSelector?: string\n} = {}) => {\n  const states = selected ? rowStates.selected : rowStates.unselected\n  if (disabled) return `${rowDeclarations(states.rest, textSelector)}\\n${rowForcedColors({ selected, focused, disabled, textSelector })}`\n  return `\n  ${rowDeclarations(focused ? states.hover : states.rest, textSelector)}\n\n  &:hover {\n    ${rowDeclarations(states.hover, textSelector)}\n  }\n\n  &:active {\n    ${rowDeclarations(states.pressed, textSelector)}\n  }\n\n  ${rowForcedColors({ selected, focused, disabled, textSelector })}\n`\n}\n\n// Rows in forced colours (decision 0038): fills are dropped, so a selected row takes the system\n// selection colours, and a hovered or keyboard-active row is outlined in Highlight.\nconst rowForcedColors = ({\n  selected,\n  focused,\n  disabled,\n  textSelector,\n}: {\n  selected: boolean\n  focused: boolean\n  disabled: boolean\n  textSelector?: string\n}) => {\n  const text = (color: string) => (textSelector ? `color: ${color};\\n    ${textSelector} { color: ${color}; }` : `color: ${color};`)\n  const hover = `outline: ${tokens.semantic.border.width.thin} solid Highlight;\\n      outline-offset: calc(-1 * ${tokens.semantic.border.width.thin});`\n  // A row that doesn't respond (disabled, or not interactive at all) keeps its selection but has\n  // no hover outline. Disabled text is the component's to colour: callers also pass this for\n  // static rows, which must stay CanvasText.\n  // A selected row keeps forced-color-adjust: auto: the browser keeps system colours an author\n  // sets, so the row stays Highlight with HighlightText. Its descendants' own colours would be\n  // forced to CanvasText, so they inherit HighlightText, and anything drawn with a fill inside\n  // (a chip or tag as the row's badge) drops it and keeps its edge. The doubled class outranks\n  // the descendants' own rules.\n  return `${forcedColors} {\n    ${selected ? `background-color: Highlight;\\n    ${text('HighlightText')}\\n    && * {\\n      color: inherit;\\n      background-color: transparent;\\n    }` : ''}\n    ${!disabled && focused ? hover : ''}\n    ${disabled ? '' : `&:hover {\\n      ${hover}\\n    }`}\n  }`\n}\n"],"names":["breakpoints","xs","tokens","semantic","breakpoint","sm","md","lg","xl","media","concat","forcedColors","forcedColorsEdge","border","width","thin","reducedMotion","fadeOut","keyframes","templateObject_1","__makeTemplateObject","exitAnimation","css","templateObject_2","motion","duration","fast","easing","accelerate","visuallyHidden","_a","color","rowFill","fill","rowText","text","fieldButtonRadius","radius","rowRadius","rowStates","unselected","rest","background","hover","muted","pressed","selected","accent","rowDeclarations","textSelector","interactiveRow","_b","_c","_d","focused","_e","disabled","states","rowForcedColors"],"mappings":"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"}

package/dist/lib/tokenAliases.mjs

@@ -47,6 +47,7 @@ var radiusByKey = {
 var backgroundByPath = {
   'surface.base': surface.base,
   'surface.raised': surface.raised,
+  'surface.overlay': surface.overlay,
   'surface.scrim': surface.scrim,
   'color.fill.emphasis': color.fill.emphasis,
   'color.fill.muted': color.fill.muted,

package/dist/lib/tokenAliases.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tokenAliases.mjs","sources":["../../src/lib/tokenAliases.ts"],"sourcesContent":["import tokens from './cssTokens'\nimport type { Tokens } from '../types/tokens'\n\n// Box's spacing and radius props keep their own names, which 3.0 decoupled from the removed\n// spacing.layout and border.radius tokens (P7, #99), and read the semantic grammar's tokens\n// (decision 0031). Each map covers every key the prop type allows, so TypeScript fails here if a\n// key is added without a mapping.\nconst { semantic } = tokens\nconst { color, space, radius, surface } = semantic\n\ntype Semantic = Tokens['semantic']\n\n/** Box's spacing values (`p`, `m`, `gap`…), each a `space` step, plus `auto`. */\nexport type BoxSpace =\n  | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | '10xl' | '11xl'\n  | 'auto'\n\n/** Box's spacing props: each name maps to the space step that replaced its spacing.layout token. */\nexport const spaceByLayoutKey: Record<BoxSpace, string> = {\n  none: space[0],\n  xs: space[100],\n  sm: space[200],\n  md: space[300],\n  lg: space[400],\n  xl: space[500],\n  '2xl': space[600],\n  '3xl': space[700],\n  '4xl': space[800],\n  '5xl': space[900],\n  '6xl': space[1000],\n  '7xl': space[1200],\n  '8xl': space[1400],\n  '9xl': space[1600],\n  '10xl': space[2000],\n  '11xl': space[2400],\n  // A keyword, not a step (0031)\n  auto: semantic.spacing.layout.auto,\n}\n\n/** Box's `borderRadius` values: the `radius` steps, with `circle` for `full`. */\nexport type BoxRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'circle'\n\n/** Box's `borderRadius` prop, read from `radius`. */\nexport const radiusByKey: Record<BoxRadius, string> = {\n  none: radius.none,\n  xs: radius.xs,\n  sm: radius.sm,\n  md: radius.md,\n  lg: radius.lg,\n  xl: radius.xl,\n  '2xl': radius['2xl'],\n  '3xl': radius['3xl'],\n  circle: radius.full,\n}\n\n/**\n * Box's `bg` values in the semantic grammar (decision 0031, #304): the token's path below\n * `semantic`, such as `surface.raised` or `color.fill.muted`.\n */\nexport type BackgroundPath =\n  | `surface.${keyof Semantic['surface']}`\n  | `color.fill.${keyof Semantic['color']['fill']}`\n\n/** Box's `bg` prop: the grammar's token paths, read from the token at that path. */\nexport const backgroundByPath: Record<BackgroundPath, string> = {\n  'surface.base': surface.base,\n  'surface.raised': surface.raised,\n  'surface.scrim': surface.scrim,\n  'color.fill.emphasis': color.fill.emphasis,\n  'color.fill.muted': color.fill.muted,\n  'color.fill.inverse': color.fill.inverse,\n  'color.fill.accent': color.fill.accent,\n  'color.fill.accent-hover': color.fill['accent-hover'],\n  'color.fill.accent-pressed': color.fill['accent-pressed'],\n  'color.fill.accent-muted': color.fill['accent-muted'],\n  'color.fill.accent-muted-hover': color.fill['accent-muted-hover'],\n  'color.fill.accent-muted-pressed': color.fill['accent-muted-pressed'],\n  'color.fill.danger': color.fill.danger,\n  'color.fill.danger-hover': color.fill['danger-hover'],\n  'color.fill.danger-pressed': color.fill['danger-pressed'],\n  'color.fill.danger-muted': color.fill['danger-muted'],\n  'color.fill.success': color.fill.success,\n  'color.fill.success-muted': color.fill['success-muted'],\n  'color.fill.warning': color.fill.warning,\n  'color.fill.warning-muted': color.fill['warning-muted'],\n  'color.fill.serious': color.fill.serious,\n  'color.fill.serious-muted': color.fill['serious-muted'],\n  'color.fill.ai-muted': color.fill['ai-muted'],\n  'color.fill.disabled': color.fill.disabled,\n  'color.fill.default': color.fill.default,\n  'color.fill.default-hover': color.fill['default-hover'],\n  'color.fill.default-pressed': color.fill['default-pressed'],\n  'color.fill.none': color.fill.none,\n  'color.fill.none-hover': color.fill['none-hover'],\n  'color.fill.none-pressed': color.fill['none-pressed'],\n  'color.fill.inverse-none-hover': color.fill['inverse-none-hover'],\n}\n\n/** Box's `color` prop: the text colours. */\nexport const textColorByKey: Record<keyof Semantic['color']['text'], string> = color.text\n\n/** Box's border props: the border colours. */\nexport const borderColorByKey: Record<keyof Semantic['color']['border'], string> = color.border\n"],"names":["semantic","tokens","color","space","radius","surface","spaceByLayoutKey","none","xs","sm","md","lg","xl","auto","spacing","layout","radiusByKey","circle","full","backgroundByPath","base","raised","scrim","fill","emphasis","muted","inverse","accent","danger","success","warning","serious","disabled","textColorByKey","text","borderColorByKey","border"],"mappings":"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"}
+{"version":3,"file":"tokenAliases.mjs","sources":["../../src/lib/tokenAliases.ts"],"sourcesContent":["import tokens from './cssTokens'\nimport type { Tokens } from '../types/tokens'\n\n// Box's spacing and radius props keep their own names, which 3.0 decoupled from the removed\n// spacing.layout and border.radius tokens (P7, #99), and read the semantic grammar's tokens\n// (decision 0031). Each map covers every key the prop type allows, so TypeScript fails here if a\n// key is added without a mapping.\nconst { semantic } = tokens\nconst { color, space, radius, surface } = semantic\n\ntype Semantic = Tokens['semantic']\n\n/** Box's spacing values (`p`, `m`, `gap`…), each a `space` step, plus `auto`. */\nexport type BoxSpace =\n  | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | '10xl' | '11xl'\n  | 'auto'\n\n/** Box's spacing props: each name maps to the space step that replaced its spacing.layout token. */\nexport const spaceByLayoutKey: Record<BoxSpace, string> = {\n  none: space[0],\n  xs: space[100],\n  sm: space[200],\n  md: space[300],\n  lg: space[400],\n  xl: space[500],\n  '2xl': space[600],\n  '3xl': space[700],\n  '4xl': space[800],\n  '5xl': space[900],\n  '6xl': space[1000],\n  '7xl': space[1200],\n  '8xl': space[1400],\n  '9xl': space[1600],\n  '10xl': space[2000],\n  '11xl': space[2400],\n  // A keyword, not a step (0031)\n  auto: semantic.spacing.layout.auto,\n}\n\n/** Box's `borderRadius` values: the `radius` steps, with `circle` for `full`. */\nexport type BoxRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'circle'\n\n/** Box's `borderRadius` prop, read from `radius`. */\nexport const radiusByKey: Record<BoxRadius, string> = {\n  none: radius.none,\n  xs: radius.xs,\n  sm: radius.sm,\n  md: radius.md,\n  lg: radius.lg,\n  xl: radius.xl,\n  '2xl': radius['2xl'],\n  '3xl': radius['3xl'],\n  circle: radius.full,\n}\n\n/**\n * Box's `bg` values in the semantic grammar (decision 0031, #304): the token's path below\n * `semantic`, such as `surface.raised` or `color.fill.muted`.\n */\nexport type BackgroundPath =\n  | `surface.${keyof Semantic['surface']}`\n  | `color.fill.${keyof Semantic['color']['fill']}`\n\n/** Box's `bg` prop: the grammar's token paths, read from the token at that path. */\nexport const backgroundByPath: Record<BackgroundPath, string> = {\n  'surface.base': surface.base,\n  'surface.raised': surface.raised,\n  'surface.overlay': surface.overlay,\n  'surface.scrim': surface.scrim,\n  'color.fill.emphasis': color.fill.emphasis,\n  'color.fill.muted': color.fill.muted,\n  'color.fill.inverse': color.fill.inverse,\n  'color.fill.accent': color.fill.accent,\n  'color.fill.accent-hover': color.fill['accent-hover'],\n  'color.fill.accent-pressed': color.fill['accent-pressed'],\n  'color.fill.accent-muted': color.fill['accent-muted'],\n  'color.fill.accent-muted-hover': color.fill['accent-muted-hover'],\n  'color.fill.accent-muted-pressed': color.fill['accent-muted-pressed'],\n  'color.fill.danger': color.fill.danger,\n  'color.fill.danger-hover': color.fill['danger-hover'],\n  'color.fill.danger-pressed': color.fill['danger-pressed'],\n  'color.fill.danger-muted': color.fill['danger-muted'],\n  'color.fill.success': color.fill.success,\n  'color.fill.success-muted': color.fill['success-muted'],\n  'color.fill.warning': color.fill.warning,\n  'color.fill.warning-muted': color.fill['warning-muted'],\n  'color.fill.serious': color.fill.serious,\n  'color.fill.serious-muted': color.fill['serious-muted'],\n  'color.fill.ai-muted': color.fill['ai-muted'],\n  'color.fill.disabled': color.fill.disabled,\n  'color.fill.default': color.fill.default,\n  'color.fill.default-hover': color.fill['default-hover'],\n  'color.fill.default-pressed': color.fill['default-pressed'],\n  'color.fill.none': color.fill.none,\n  'color.fill.none-hover': color.fill['none-hover'],\n  'color.fill.none-pressed': color.fill['none-pressed'],\n  'color.fill.inverse-none-hover': color.fill['inverse-none-hover'],\n}\n\n/** Box's `color` prop: the text colours. */\nexport const textColorByKey: Record<keyof Semantic['color']['text'], string> = color.text\n\n/** Box's border props: the border colours. */\nexport const borderColorByKey: Record<keyof Semantic['color']['border'], string> = color.border\n"],"names":["semantic","tokens","color","space","radius","surface","spaceByLayoutKey","none","xs","sm","md","lg","xl","auto","spacing","layout","radiusByKey","circle","full","backgroundByPath","base","raised","overlay","scrim","fill","emphasis","muted","inverse","accent","danger","success","warning","serious","disabled","textColorByKey","text","borderColorByKey","border"],"mappings":";;;AAGA;AACA;AACA;AACA;AACQ,IAAAA,QAAQ,GAAKC,MAAM,CAAAD,QAAX,CAAA;AACR,IAAAE,KAAK,GAA6BF,QAAQ,MAArC;EAAEG,KAAK,GAAsBH,QAAQ,CAAAG,KAA9B;EAAEC,MAAM,GAAcJ,QAAQ,CAAtBI,MAAA;EAAEC,OAAO,GAAKL,QAAQ,QAAb,CAAA;AAUrC;AACO,IAAMM,gBAAgB,GAA6B;AACxDC,EAAAA,IAAI,EAAEJ,KAAK,CAAC,CAAC,CAAC;AACdK,EAAAA,EAAE,EAAEL,KAAK,CAAC,GAAG,CAAC;AACdM,EAAAA,EAAE,EAAEN,KAAK,CAAC,GAAG,CAAC;AACdO,EAAAA,EAAE,EAAEP,KAAK,CAAC,GAAG,CAAC;AACdQ,EAAAA,EAAE,EAAER,KAAK,CAAC,GAAG,CAAC;AACdS,EAAAA,EAAE,EAAET,KAAK,CAAC,GAAG,CAAC;AACd,EAAA,KAAK,EAAEA,KAAK,CAAC,GAAG,CAAC;AACjB,EAAA,KAAK,EAAEA,KAAK,CAAC,GAAG,CAAC;AACjB,EAAA,KAAK,EAAEA,KAAK,CAAC,GAAG,CAAC;AACjB,EAAA,KAAK,EAAEA,KAAK,CAAC,GAAG,CAAC;AACjB,EAAA,KAAK,EAAEA,KAAK,CAAC,IAAI,CAAC;AAClB,EAAA,KAAK,EAAEA,KAAK,CAAC,IAAI,CAAC;AAClB,EAAA,KAAK,EAAEA,KAAK,CAAC,IAAI,CAAC;AAClB,EAAA,KAAK,EAAEA,KAAK,CAAC,IAAI,CAAC;AAClB,EAAA,MAAM,EAAEA,KAAK,CAAC,IAAI,CAAC;AACnB,EAAA,MAAM,EAAEA,KAAK,CAAC,IAAI,CAAC;AACnB;AACAU,EAAAA,IAAI,EAAEb,QAAQ,CAACc,OAAO,CAACC,MAAM,CAACF,IAAAA;EAC/B;AAKD;AACO,IAAMG,WAAW,GAA8B;EACpDT,IAAI,EAAEH,MAAM,CAACG,IAAI;EACjBC,EAAE,EAAEJ,MAAM,CAACI,EAAE;EACbC,EAAE,EAAEL,MAAM,CAACK,EAAE;EACbC,EAAE,EAAEN,MAAM,CAACM,EAAE;EACbC,EAAE,EAAEP,MAAM,CAACO,EAAE;EACbC,EAAE,EAAER,MAAM,CAACQ,EAAE;AACb,EAAA,KAAK,EAAER,MAAM,CAAC,KAAK,CAAC;AACpB,EAAA,KAAK,EAAEA,MAAM,CAAC,KAAK,CAAC;EACpBa,MAAM,EAAEb,MAAM,CAACc,IAAAA;EAChB;AAUD;AACO,IAAMC,gBAAgB,GAAmC;EAC9D,cAAc,EAAEd,OAAO,CAACe,IAAI;EAC5B,gBAAgB,EAAEf,OAAO,CAACgB,MAAM;EAChC,iBAAiB,EAAEhB,OAAO,CAACiB,OAAO;EAClC,eAAe,EAAEjB,OAAO,CAACkB,KAAK;AAC9B,EAAA,qBAAqB,EAAErB,KAAK,CAACsB,IAAI,CAACC,QAAQ;AAC1C,EAAA,kBAAkB,EAAEvB,KAAK,CAACsB,IAAI,CAACE,KAAK;AACpC,EAAA,oBAAoB,EAAExB,KAAK,CAACsB,IAAI,CAACG,OAAO;AACxC,EAAA,mBAAmB,EAAEzB,KAAK,CAACsB,IAAI,CAACI,MAAM;AACtC,EAAA,yBAAyB,EAAE1B,KAAK,CAACsB,IAAI,CAAC,cAAc,CAAC;AACrD,EAAA,2BAA2B,EAAEtB,KAAK,CAACsB,IAAI,CAAC,gBAAgB,CAAC;AACzD,EAAA,yBAAyB,EAAEtB,KAAK,CAACsB,IAAI,CAAC,cAAc,CAAC;AACrD,EAAA,+BAA+B,EAAEtB,KAAK,CAACsB,IAAI,CAAC,oBAAoB,CAAC;AACjE,EAAA,iCAAiC,EAAEtB,KAAK,CAACsB,IAAI,CAAC,sBAAsB,CAAC;AACrE,EAAA,mBAAmB,EAAEtB,KAAK,CAACsB,IAAI,CAACK,MAAM;AACtC,EAAA,yBAAyB,EAAE3B,KAAK,CAACsB,IAAI,CAAC,cAAc,CAAC;AACrD,EAAA,2BAA2B,EAAEtB,KAAK,CAACsB,IAAI,CAAC,gBAAgB,CAAC;AACzD,EAAA,yBAAyB,EAAEtB,KAAK,CAACsB,IAAI,CAAC,cAAc,CAAC;AACrD,EAAA,oBAAoB,EAAEtB,KAAK,CAACsB,IAAI,CAACM,OAAO;AACxC,EAAA,0BAA0B,EAAE5B,KAAK,CAACsB,IAAI,CAAC,eAAe,CAAC;AACvD,EAAA,oBAAoB,EAAEtB,KAAK,CAACsB,IAAI,CAACO,OAAO;AACxC,EAAA,0BAA0B,EAAE7B,KAAK,CAACsB,IAAI,CAAC,eAAe,CAAC;AACvD,EAAA,oBAAoB,EAAEtB,KAAK,CAACsB,IAAI,CAACQ,OAAO;AACxC,EAAA,0BAA0B,EAAE9B,KAAK,CAACsB,IAAI,CAAC,eAAe,CAAC;AACvD,EAAA,qBAAqB,EAAEtB,KAAK,CAACsB,IAAI,CAAC,UAAU,CAAC;AAC7C,EAAA,qBAAqB,EAAEtB,KAAK,CAACsB,IAAI,CAACS,QAAQ;AAC1C,EAAA,oBAAoB,EAAE/B,KAAK,CAACsB,IAAI,CAAQ,SAAA,CAAA;AACxC,EAAA,0BAA0B,EAAEtB,KAAK,CAACsB,IAAI,CAAC,eAAe,CAAC;AACvD,EAAA,4BAA4B,EAAEtB,KAAK,CAACsB,IAAI,CAAC,iBAAiB,CAAC;AAC3D,EAAA,iBAAiB,EAAEtB,KAAK,CAACsB,IAAI,CAACjB,IAAI;AAClC,EAAA,uBAAuB,EAAEL,KAAK,CAACsB,IAAI,CAAC,YAAY,CAAC;AACjD,EAAA,yBAAyB,EAAEtB,KAAK,CAACsB,IAAI,CAAC,cAAc,CAAC;AACrD,EAAA,+BAA+B,EAAEtB,KAAK,CAACsB,IAAI,CAAC,oBAAoB,CAAA;EACjE;AAED;AACaU,IAAAA,cAAc,GAAoDhC,KAAK,CAACiC,KAAI;AAEzF;AACaC,IAAAA,gBAAgB,GAAsDlC,KAAK,CAACmC;;;;"}

package/dist/lib/useFloatingLayer.d.mts

@@ -0,0 +1,32 @@
+import { useEffect, type RefObject } from 'react';
+import { type FloatingAlign, type FloatingSide } from './floatingPosition.mjs';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+/** The trigger's width in px, set on the floating element when `matchAnchorWidth` is on */
+export declare const ANCHOR_WIDTH_VAR = "--co-floating-anchor-width";
+interface FloatingLayerOptions {
+    /** Whether the floating element is rendered */
+    isPresent: boolean;
+    /** The floating element: `position: fixed`, placed with top and left */
+    floatingRef: RefObject<HTMLElement | null>;
+    /** The `display: contents` wrapper around the trigger */
+    anchorRef: RefObject<Element | null>;
+    side: FloatingSide;
+    align: FloatingAlign;
+    /**
+     * Writes the trigger's width to `ANCHOR_WIDTH_VAR` on the floating element before each placement,
+     * so its CSS can be at least as wide as the trigger
+     */
+    matchAnchorWidth?: boolean;
+    /**
+     * Called when the trigger may have moved away from the floating element: the page or a container
+     * scrolled (anything but the floating element itself), or the window resized
+     */
+    onDetach: () => void;
+}
+/**
+ * Shows a floating element (Tooltip, Menu) in the top layer beside its trigger, before the browser
+ * paints, and places it again whenever its size changes. A gap of `space.100` separates it from the
+ * trigger, and it keeps `space.200` from the viewport's edges.
+ */
+export declare function useFloatingLayer({ isPresent, floatingRef, anchorRef, side, align, matchAnchorWidth, onDetach, }: FloatingLayerOptions): void;
+export {};

package/dist/lib/useFloatingLayer.d.ts

@@ -0,0 +1,32 @@
+import { useEffect, type RefObject } from 'react';
+import { type FloatingAlign, type FloatingSide } from './floatingPosition';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+/** The trigger's width in px, set on the floating element when `matchAnchorWidth` is on */
+export declare const ANCHOR_WIDTH_VAR = "--co-floating-anchor-width";
+interface FloatingLayerOptions {
+    /** Whether the floating element is rendered */
+    isPresent: boolean;
+    /** The floating element: `position: fixed`, placed with top and left */
+    floatingRef: RefObject<HTMLElement | null>;
+    /** The `display: contents` wrapper around the trigger */
+    anchorRef: RefObject<Element | null>;
+    side: FloatingSide;
+    align: FloatingAlign;
+    /**
+     * Writes the trigger's width to `ANCHOR_WIDTH_VAR` on the floating element before each placement,
+     * so its CSS can be at least as wide as the trigger
+     */
+    matchAnchorWidth?: boolean;
+    /**
+     * Called when the trigger may have moved away from the floating element: the page or a container
+     * scrolled (anything but the floating element itself), or the window resized
+     */
+    onDetach: () => void;
+}
+/**
+ * Shows a floating element (Tooltip, Menu) in the top layer beside its trigger, before the browser
+ * paints, and places it again whenever its size changes. A gap of `space.100` separates it from the
+ * trigger, and it keeps `space.200` from the viewport's edges.
+ */
+export declare function useFloatingLayer({ isPresent, floatingRef, anchorRef, side, align, matchAnchorWidth, onDetach, }: FloatingLayerOptions): void;
+export {};

package/dist/lib/useFloatingLayer.mjs

@@ -0,0 +1,95 @@
+'use client';
+import { useLayoutEffect, useEffect } from 'react';
+import tokensJson from '../styles/tokens.json.mjs';
+import { laidOutElement, placeFloating } from './floatingPosition.mjs';
+
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+// The Popover API puts a floating element in the top layer: above everything, Modal included,
+// never clipped by a scroll container, with no z-index (#326). It's in every current browser;
+// without it the element is still position: fixed, so it escapes overflow clipping.
+var supportsPopover = function supportsPopover() {
+  return typeof HTMLElement !== 'undefined' && 'showPopover' in HTMLElement.prototype;
+};
+/** The trigger's width in px, set on the floating element when `matchAnchorWidth` is on */
+var ANCHOR_WIDTH_VAR = '--co-floating-anchor-width';
+var remToPx = function remToPx(value) {
+  return parseFloat(value) * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+};
+/**
+ * Shows a floating element (Tooltip, Menu) in the top layer beside its trigger, before the browser
+ * paints, and places it again whenever its size changes. A gap of `space.100` separates it from the
+ * trigger, and it keeps `space.200` from the viewport's edges.
+ */
+function useFloatingLayer(_a) {
+  var isPresent = _a.isPresent,
+    floatingRef = _a.floatingRef,
+    anchorRef = _a.anchorRef,
+    side = _a.side,
+    align = _a.align,
+    _b = _a.matchAnchorWidth,
+    matchAnchorWidth = _b === void 0 ? false : _b,
+    onDetach = _a.onDetach;
+  useIsomorphicLayoutEffect(function () {
+    var floating = floatingRef.current;
+    if (!isPresent || !floating) return;
+    if (supportsPopover() && !floating.matches(':popover-open')) {
+      floating.setAttribute('popover', 'manual');
+      floating.showPopover();
+    }
+    var place = function place() {
+      var trigger = laidOutElement(anchorRef.current);
+      if (!trigger) return;
+      var anchor = trigger.getBoundingClientRect();
+      // Before measuring, since it can widen the floating element
+      if (matchAnchorWidth) floating.style.setProperty(ANCHOR_WIDTH_VAR, "".concat(anchor.width, "px"));else floating.style.removeProperty(ANCHOR_WIDTH_VAR);
+      var _a = floating.getBoundingClientRect(),
+        width = _a.width,
+        height = _a.height;
+      var position = placeFloating({
+        anchor: anchor,
+        floating: {
+          width: width,
+          height: height
+        },
+        side: side,
+        align: align,
+        offset: remToPx(tokensJson.semantic.space[100]),
+        viewport: {
+          width: window.innerWidth,
+          height: window.innerHeight
+        },
+        margin: remToPx(tokensJson.semantic.space[200])
+      });
+      floating.style.top = "".concat(position.top, "px");
+      floating.style.left = "".concat(position.left, "px");
+      floating.dataset.side = position.side;
+    };
+    place();
+    if (typeof ResizeObserver === 'undefined') return;
+    var observer = new ResizeObserver(place);
+    observer.observe(floating);
+    // Its width follows the trigger's, so a trigger that resizes while it's open places it again
+    var trigger = matchAnchorWidth ? laidOutElement(anchorRef.current) : null;
+    if (trigger) observer.observe(trigger);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [isPresent, side, align, matchAnchorWidth, floatingRef, anchorRef]);
+  useEffect(function () {
+    if (!isPresent) return;
+    var onScroll = function onScroll(event) {
+      var _a;
+      if (event.target instanceof Node && ((_a = floatingRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) return;
+      onDetach();
+    };
+    window.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', onDetach);
+    return function () {
+      window.removeEventListener('scroll', onScroll, true);
+      window.removeEventListener('resize', onDetach);
+    };
+  }, [isPresent, floatingRef, onDetach]);
+}
+
+export { ANCHOR_WIDTH_VAR, useFloatingLayer, useIsomorphicLayoutEffect };
+//# sourceMappingURL=useFloatingLayer.mjs.map

package/dist/lib/useFloatingLayer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingLayer.mjs","sources":["../../src/lib/useFloatingLayer.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, type RefObject } from 'react'\n// Placement needs resolved lengths, not CSS variables (decision 0041)\nimport tokenValues from '../styles/tokens.json'\nimport { laidOutElement, placeFloating, type FloatingAlign, type FloatingSide } from './floatingPosition'\n\nexport const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\n// The Popover API puts a floating element in the top layer: above everything, Modal included,\n// never clipped by a scroll container, with no z-index (#326). It's in every current browser;\n// without it the element is still position: fixed, so it escapes overflow clipping.\nconst supportsPopover = () => typeof HTMLElement !== 'undefined' && 'showPopover' in HTMLElement.prototype\n\n/** The trigger's width in px, set on the floating element when `matchAnchorWidth` is on */\nexport const ANCHOR_WIDTH_VAR = '--co-floating-anchor-width'\n\nconst remToPx = (value: string) =>\n  parseFloat(value) * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16)\n\ninterface FloatingLayerOptions {\n  /** Whether the floating element is rendered */\n  isPresent: boolean\n  /** The floating element: `position: fixed`, placed with top and left */\n  floatingRef: RefObject<HTMLElement | null>\n  /** The `display: contents` wrapper around the trigger */\n  anchorRef: RefObject<Element | null>\n  side: FloatingSide\n  align: FloatingAlign\n  /**\n   * Writes the trigger's width to `ANCHOR_WIDTH_VAR` on the floating element before each placement,\n   * so its CSS can be at least as wide as the trigger\n   */\n  matchAnchorWidth?: boolean\n  /**\n   * Called when the trigger may have moved away from the floating element: the page or a container\n   * scrolled (anything but the floating element itself), or the window resized\n   */\n  onDetach: () => void\n}\n\n/**\n * Shows a floating element (Tooltip, Menu) in the top layer beside its trigger, before the browser\n * paints, and places it again whenever its size changes. A gap of `space.100` separates it from the\n * trigger, and it keeps `space.200` from the viewport's edges.\n */\nexport function useFloatingLayer({\n  isPresent,\n  floatingRef,\n  anchorRef,\n  side,\n  align,\n  matchAnchorWidth = false,\n  onDetach,\n}: FloatingLayerOptions) {\n  useIsomorphicLayoutEffect(() => {\n    const floating = floatingRef.current\n    if (!isPresent || !floating) return\n    if (supportsPopover() && !floating.matches(':popover-open')) {\n      floating.setAttribute('popover', 'manual')\n      floating.showPopover()\n    }\n    const place = () => {\n      const trigger = laidOutElement(anchorRef.current)\n      if (!trigger) return\n      const anchor = trigger.getBoundingClientRect()\n      // Before measuring, since it can widen the floating element\n      if (matchAnchorWidth) floating.style.setProperty(ANCHOR_WIDTH_VAR, `${anchor.width}px`)\n      else floating.style.removeProperty(ANCHOR_WIDTH_VAR)\n      const { width, height } = floating.getBoundingClientRect()\n      const position = placeFloating({\n        anchor,\n        floating: { width, height },\n        side,\n        align,\n        offset: remToPx(tokenValues.semantic.space[100]),\n        viewport: { width: window.innerWidth, height: window.innerHeight },\n        margin: remToPx(tokenValues.semantic.space[200]),\n      })\n      floating.style.top = `${position.top}px`\n      floating.style.left = `${position.left}px`\n      floating.dataset.side = position.side\n    }\n    place()\n    if (typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(place)\n    observer.observe(floating)\n    // Its width follows the trigger's, so a trigger that resizes while it's open places it again\n    const trigger = matchAnchorWidth ? laidOutElement(anchorRef.current) : null\n    if (trigger) observer.observe(trigger)\n    return () => observer.disconnect()\n  }, [isPresent, side, align, matchAnchorWidth, floatingRef, anchorRef])\n\n  useEffect(() => {\n    if (!isPresent) return\n    const onScroll = (event: Event) => {\n      if (event.target instanceof Node && floatingRef.current?.contains(event.target)) return\n      onDetach()\n    }\n    window.addEventListener('scroll', onScroll, true)\n    window.addEventListener('resize', onDetach)\n    return () => {\n      window.removeEventListener('scroll', onScroll, true)\n      window.removeEventListener('resize', onDetach)\n    }\n  }, [isPresent, floatingRef, onDetach])\n}\n"],"names":["useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","supportsPopover","HTMLElement","prototype","ANCHOR_WIDTH_VAR","remToPx","value","parseFloat","getComputedStyle","document","documentElement","fontSize","useFloatingLayer","_a","isPresent","floatingRef","anchorRef","side","align","_b","matchAnchorWidth","onDetach","floating","current","matches","setAttribute","showPopover","place","trigger","laidOutElement","anchor","getBoundingClientRect","style","setProperty","concat","width","removeProperty","height","position","placeFloating","offset","tokenValues","semantic","space","viewport","innerWidth","innerHeight","margin","top","left","dataset","ResizeObserver","observer","observe","disconnect","onScroll","event","target","Node","contains","addEventListener","removeEventListener"],"mappings":"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"}