@astryxdesign/core 0.1.2 → 0.1.3-canary.1e94ba0

package/dist/Typeahead/Typeahead.js

@@ -4,9 +4,9 @@
 
 /**
  * @file Typeahead.tsx
- * @input Uses React, BaseTypeahead, Field, Token
+ * @input Uses React, BaseTypeahead, Field, Token, InputGroupContext
  * @output Exports Typeahead styled typeahead component
- * @position Styled wrapper; composes BaseTypeahead with Field
+ * @position Styled wrapper; composes BaseTypeahead with Field or InputGroup
  *
  * Owns the input wrapper (border, padding, status styles), selected value
  * token with spacing compensation, and edit mode behavior. Delegates
@@ -23,12 +23,16 @@ import { BaseTypeahead } from "./BaseTypeahead.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
 import { Token } from "../Token/index.js";
+import { useTooltip } from "../Tooltip/index.js";
 import { renderIconSlot } from "../Icon/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars, sizeVars } from "../theme/tokens.stylex.js";
-import { mergeProps } from "../utils/index.js";
+import { groupStyles } from "../InputGroup/groupStyles.js";
+import { useInputGroup } from "../InputGroup/InputGroupContext.js";
+import { getInputARIA, mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -127,6 +131,7 @@ export function Typeahead({
   maxMenuItems,
   emptySearchResultsText,
   isDisabled = false,
+  disabledMessage,
   hasClear = true,
   hasAutoFocus,
   size: sizeProp,
@@ -141,12 +146,29 @@ export function Typeahead({
 }) {
   const size = useSize(sizeProp, 'md');
   const inputId = useId();
+  const inputLabelId = useId();
   const descriptionId = useId();
   const statusMessageId = useId();
+  const inputGroup = useInputGroup();
   const wrapperRef = useRef(null);
   const inputRef = useRef(null);
   const tokenRef = useRef(null);
 
+  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
+  // tooltip listeners attach to the input wrapper (which already exists) and
+  // the input stays perceivable via aria-disabled + readOnly instead of the
+  // disabled attribute. Editing and selection stay blocked by the isDisabled
+  // guards (handleWrapperClick, handleEnterEditMode, and BaseTypeahead's own
+  // focus/change guards).
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    // The wrapper div is not naturally focusable; focusin bubbles up from the
+    // input, so always attach focus listeners.
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
+
   // Edit mode: when the user clicks the token to edit the selected value
   const [isEditing, setIsEditing] = useState(false);
   const [editingValue, setEditingValue] = useState(null);
@@ -240,40 +262,27 @@ export function Typeahead({
       inputRef.current?.focus();
     }
   }, [isDisabled, showToken, handleEnterEditMode]);
-  const ariaDescribedBy = [description ? descriptionId : null, status?.message ? statusMessageId : null].filter(Boolean).join(' ') || undefined;
+  const {
+    ariaLabelledBy,
+    ariaDescribedBy
+  } = getInputARIA(inputLabelId, [description ? descriptionId : null, status?.message ? statusMessageId : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
   const sizeStyle = wrapperSizeStyles[size];
-  return /*#__PURE__*/_jsx(Field, {
-    ref: ref,
-    label: label,
-    isLabelHidden: isLabelHidden,
-    description: description,
-    inputID: inputId,
-    descriptionID: description ? descriptionId : undefined,
-    isOptional: isOptional,
-    isRequired: isRequired,
-    isDisabled: isDisabled,
-    status: status ? {
-      type: status.type,
-      message: status.message,
-      messageID: status.message ? statusMessageId : undefined
-    } : undefined,
-    labelTooltip: labelTooltip,
-    width: width,
-    xstyle: xstyle,
-    className: className,
-    style: style,
-    children: /*#__PURE__*/_jsxs("div", {
-      ref: wrapperRef,
+  const typeaheadContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      ref: mergeRefs(wrapperRef, disabledMessageTooltip.ref, inputGroup ? ref : undefined),
       "data-testid": testId,
       onClick: handleWrapperClick,
       onBlur: handleBlur,
       ...mergeProps(themeProps('typeahead', {
         size,
         status: status?.type
-      }), stylex.props(inputWrapperStyles.base, styles.wrapper, sizeStyle, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], isDisabled && inputWrapperStyles.disabled)),
+      }), stylex.props(inputWrapperStyles.base, styles.wrapper, sizeStyle, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], isDisabled && inputWrapperStyles.disabled, inputGroup && groupStyles.inGroup, inputGroup && xstyle), inputGroup ? className : undefined, inputGroup ? style : undefined),
       children: [startIcon && renderIconSlot(startIcon, {
         size: 'sm',
         color: 'secondary'
+      }), inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
+        id: inputLabelId,
+        children: label
       }), showToken && /*#__PURE__*/_jsx(Token, {
         ref: tokenRef,
         label: value.label,
@@ -293,8 +302,10 @@ export function Typeahead({
         emptySearchResultsText: emptySearchResultsText,
         isDisabled: isDisabled,
         hasAutoFocus: hasAutoFocus,
+        isFocusableDisabled: showsDisabledMessage,
         inputId: inputId,
         ariaDescribedBy: ariaDescribedBy,
+        ariaLabelledBy: ariaLabelledBy,
         onChangeQuery: onChangeQuery,
         onOpenChange: onOpenChange,
         debounceMs: debounceMs,
@@ -310,7 +321,32 @@ export function Typeahead({
         },
         xstyle: [styles.clearButton, size === 'sm' && styles.clearButtonSm]
       })]
-    })
+    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+  });
+  if (inputGroup) {
+    return typeaheadContent;
+  }
+  return /*#__PURE__*/_jsx(Field, {
+    ref: ref,
+    label: label,
+    isLabelHidden: isLabelHidden,
+    description: description,
+    inputID: inputId,
+    descriptionID: description ? descriptionId : undefined,
+    isOptional: isOptional,
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    status: status ? {
+      type: status.type,
+      message: status.message,
+      messageID: status.message ? statusMessageId : undefined
+    } : undefined,
+    labelTooltip: labelTooltip,
+    width: width,
+    xstyle: xstyle,
+    className: className,
+    style: style,
+    children: typeaheadContent
   });
 }
 Typeahead.displayName = 'Typeahead';

package/dist/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @file VisuallyHidden.tsx
+ * @input Uses React createElement/ElementType, stylex
+ * @output Exports VisuallyHidden component and VisuallyHiddenProps
+ * @position Accessibility primitive; renders content in the a11y tree while
+ *   hiding it visually (icon-only labels, aria-live regions, SR-only context)
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/VisuallyHidden/VisuallyHidden.doc.mjs
+ * - /packages/core/src/VisuallyHidden/VisuallyHidden.test.tsx
+ * - /apps/storybook/stories/VisuallyHidden.stories.tsx
+ */
+import { type ElementType, type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+/**
+ * VisuallyHidden is deliberately styling-free: it exists to *not* be seen, so it
+ * intentionally omits `xstyle`/`className`/`style`. The clip block is fixed and
+ * non-overridable — styling a visually-hidden node is always a mistake. The
+ * accessibility pass-throughs from `BaseProps` (`aria-*`, `role`, `id`,
+ * `data-*`, event handlers) remain, since the live-region use case needs them.
+ */
+export interface VisuallyHiddenProps extends Omit<BaseProps<HTMLElement>, 'className' | 'style'> {
+    /** Ref forwarded to the rendered element. */
+    ref?: React.Ref<HTMLElement>;
+    /** Content to expose to assistive technology while hidden from sight. */
+    children: ReactNode;
+    /**
+     * HTML tag to render as. Defaults to `'span'` (inline) for the common
+     * icon-label case; pass a block element such as `'div'` when wrapping block
+     * content or hosting an `aria-live` region. This is a structural choice, not
+     * a visual one.
+     *
+     * @default 'span'
+     */
+    as?: ElementType;
+}
+/**
+ * Renders its children in the accessibility tree while hiding them visually.
+ *
+ * Use for content that assistive technology must perceive but sighted users
+ * should not see: accessible names for icon-only controls, `aria-live`
+ * announcement regions, and supplementary screen-reader context.
+ *
+ * @example
+ * ```
+ * // Accessible name for an icon-only button
+ * <IconButton icon="trash" label="">
+ *   <VisuallyHidden>Delete incident</VisuallyHidden>
+ * </IconButton>
+ *
+ * // Live region for announcements
+ * <VisuallyHidden as="div" aria-live="polite">
+ *   {`Moved ${task} to ${column}`}
+ * </VisuallyHidden>
+ * ```
+ */
+export declare function VisuallyHidden({ children, as: element, ref, ...props }: VisuallyHiddenProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare namespace VisuallyHidden {
+    var displayName: string;
+}
+//# sourceMappingURL=VisuallyHidden.d.ts.map

package/dist/VisuallyHidden/VisuallyHidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../src/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;;;;;GAMG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,WAAW,CAAC,EACtB,WAAW,GAAG,OAAO,CACtB;IACC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,EAAE,EAAE,OAAgB,EACpB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,0FAarB;yBAlBe,cAAc"}

package/dist/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,65 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file VisuallyHidden.tsx
+ * @input Uses React createElement/ElementType, stylex
+ * @output Exports VisuallyHidden component and VisuallyHiddenProps
+ * @position Accessibility primitive; renders content in the a11y tree while
+ *   hiding it visually (icon-only labels, aria-live regions, SR-only context)
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/VisuallyHidden/VisuallyHidden.doc.mjs
+ * - /packages/core/src/VisuallyHidden/VisuallyHidden.test.tsx
+ * - /apps/storybook/stories/VisuallyHidden.stories.tsx
+ */
+import { createElement } from 'react';
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * VisuallyHidden is deliberately styling-free: it exists to *not* be seen, so it
+ * intentionally omits `xstyle`/`className`/`style`. The clip block is fixed and
+ * non-overridable — styling a visually-hidden node is always a mistake. The
+ * accessibility pass-throughs from `BaseProps` (`aria-*`, `role`, `id`,
+ * `data-*`, event handlers) remain, since the live-region use case needs them.
+ */
+
+/**
+ * Renders its children in the accessibility tree while hiding them visually.
+ *
+ * Use for content that assistive technology must perceive but sighted users
+ * should not see: accessible names for icon-only controls, `aria-live`
+ * announcement regions, and supplementary screen-reader context.
+ *
+ * @example
+ * ```
+ * // Accessible name for an icon-only button
+ * <IconButton icon="trash" label="">
+ *   <VisuallyHidden>Delete incident</VisuallyHidden>
+ * </IconButton>
+ *
+ * // Live region for announcements
+ * <VisuallyHidden as="div" aria-live="polite">
+ *   {`Moved ${task} to ${column}`}
+ * </VisuallyHidden>
+ * ```
+ */
+export function VisuallyHidden({
+  children,
+  as: element = 'span',
+  ref,
+  ...props
+}) {
+  return /*#__PURE__*/createElement(element, {
+    ref: ref,
+    // Spread consumer props (aria-*, role, id, data-*, handlers) first, then
+    // the fixed clip styles, so the visually-hidden class can never be
+    // displaced. There is no consumer className/style to merge — by design.
+    ...props,
+    ...{
+      className: "x10l6tqk x1i1rx1s xjm9jq1 xkdpibf x1717udv xb3r6kr xzpqnlu xuxw1ft xng3xce x13vifvy x1o0tod x47corl x87ps6o"
+    }
+  }, children);
+}
+VisuallyHidden.displayName = 'VisuallyHidden';

package/dist/VisuallyHidden/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file index.ts
+ * @input Imports from VisuallyHidden.tsx
+ * @output Exports VisuallyHidden component and props type
+ * @position Package entry point for VisuallyHidden
+ *
+ * SYNC: When modified, update /packages/core/src/VisuallyHidden/VisuallyHidden.doc.mjs
+ */
+export { VisuallyHidden } from './VisuallyHidden';
+export type { VisuallyHiddenProps } from './VisuallyHidden';
+//# sourceMappingURL=index.d.ts.map

package/dist/VisuallyHidden/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/VisuallyHidden/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC"}

package/dist/VisuallyHidden/index.js

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports from VisuallyHidden.tsx
+ * @output Exports VisuallyHidden component and props type
+ * @position Package entry point for VisuallyHidden
+ *
+ * SYNC: When modified, update /packages/core/src/VisuallyHidden/VisuallyHidden.doc.mjs
+ */
+export { VisuallyHidden } from "./VisuallyHidden.js";

package/dist/astryx.css

@@ -14,6 +14,8 @@
   @property --x-counterReset { syntax: "*"; inherits: false;}
   @property --x-fontSize { syntax: "*"; inherits: false;}
   @property --x-gap { syntax: "*"; inherits: false;}
+  @property --x-gridAutoRows { syntax: "*"; inherits: false;}
+  @property --x-gridTemplateColumns { syntax: "*"; inherits: false;}
   @property --x-height { syntax: "*"; inherits: false;}
   @property --x-left { syntax: "*"; inherits: false;}
   @property --x-marginInline { syntax: "*"; inherits: false;}
@@ -21,6 +23,7 @@
   @property --x-maxWidth { syntax: "*"; inherits: false;}
   @property --x-minHeight { syntax: "*"; inherits: false;}
   @property --x-minWidth { syntax: "*"; inherits: false;}
+  @property --x-paddingInlineStart { syntax: "*"; inherits: false;}
   @property --x-right { syntax: "*"; inherits: false;}
   @property --x-top { syntax: "*"; inherits: false;}
   @property --x-transform { syntax: "*"; inherits: false;}
@@ -253,6 +256,7 @@
   @media (hover: hover){.x1pkcbo2.x1pkcbo2:hover{--table-row-overlay:var(--color-overlay-hover)}}
   .xln7xf2:not(#\#){font:inherit}
   .x10a8y8t:not(#\#){inset:0}
+  .x1anvkwx:not(#\#){inset:auto}
   .xh3736h:not(#\#){inset:unset}
   .xkdpibf:not(#\#){margin:-1px}
   .x1ghz6dp:not(#\#){margin:0}
@@ -410,6 +414,7 @@
   .xq2gx43:not(#\#):not(#\#){transition:none}
   .x1ey1afo:not(#\#):not(#\#){transition:opacity var(--duration-fast)}
   .x1ob6yzd:not(#\#):not(#\#){transition:transform var(--duration-fast) var(--ease-standard)}
+  .xr21g96.xr21g96:where(.x1g2q90y:focus-visible *):not(#\#):not(#\#){outline:2px solid var(--color-accent)}
   .x6q1khz:focus-within:not(#\#):not(#\#){border-color:var(--color-accent)}
   .xk2sxw7:focus-within:not(#\#):not(#\#){border-color:var(--color-error)}
   .xyq33ac:focus-within:not(#\#):not(#\#){border-color:var(--color-success)}
@@ -442,6 +447,7 @@
   .x1bv1mxo:not(#\#):not(#\#):not(#\#){-webkit-mask-image:linear-gradient(to bottom,transparent,black 36px)}
   .xo9xo30:not(#\#):not(#\#):not(#\#){-webkit-mask-image:linear-gradient(to bottom,transparent,black 48px)}
   .x5lxg6s:not(#\#):not(#\#):not(#\#){-webkit-overflow-scrolling:touch}
+  .xpdipgo:not(#\#):not(#\#):not(#\#){-webkit-touch-callout:none}
   .x1pha0wt:not(#\#):not(#\#):not(#\#){align-items:baseline}
   .x6s0dn4:not(#\#):not(#\#):not(#\#){align-items:center}
   .xpqajaz:not(#\#):not(#\#):not(#\#){align-items:end}
@@ -737,6 +743,7 @@
   .xv8on6e:not(#\#):not(#\#):not(#\#){font-weight:var(--text-supporting-weight)}
   .xu6a5m6:not(#\#):not(#\#):not(#\#){grid-auto-columns:1fr}
   .x1mt1orb:not(#\#):not(#\#):not(#\#){grid-auto-flow:column}
+  .xhij9v2:not(#\#):not(#\#):not(#\#){grid-auto-rows:var(--x-gridAutoRows)}
   .xcrlgei:not(#\#):not(#\#):not(#\#){grid-column-start:1}
   .x1agbcgv:not(#\#):not(#\#):not(#\#){grid-row-start:1}
   .x134kloy:not(#\#):not(#\#):not(#\#){grid-template-columns:1fr auto 1fr}
@@ -745,6 +752,7 @@
   .x1wthsqz:not(#\#):not(#\#):not(#\#){grid-template-columns:auto repeat(7,1fr)}
   .x1mzazjb:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(7,1fr)}
   .x189bvgu:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
+  .xqketvx:not(#\#):not(#\#):not(#\#){grid-template-columns:var(--x-gridTemplateColumns)}
   .xihq33y:not(#\#):not(#\#):not(#\#){grid-template-rows:0fr}
   .x1tu4anv:not(#\#):not(#\#):not(#\#){grid-template-rows:1fr}
   .xtijo5x:not(#\#):not(#\#):not(#\#){inset-inline-end:0}
@@ -862,6 +870,7 @@
   .x31w388:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-6)}
   .xchaq28:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-7)}
   .x1j3hnjz:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-8)}
+  .xnvo3vl:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--x-paddingInlineStart)}
   .x67bb7w:not(#\#):not(#\#):not(#\#){pointer-events:auto}
   .x47corl:not(#\#):not(#\#):not(#\#){pointer-events:none}
   .x1tsffl5:not(#\#):not(#\#):not(#\#){position-anchor:--outline-active}
@@ -941,6 +950,7 @@
   .x1ahifba:not(#\#):not(#\#):not(#\#){transition-delay:0s}
   .x10b1n17:not(#\#):not(#\#):not(#\#){transition-delay:var(--duration-fast)}
   .x11bq7d0:not(#\#):not(#\#):not(#\#){transition-duration:.06s}
+  .xx6bhzk:not(#\#):not(#\#):not(#\#){transition-duration:.15s}
   .x13dflua:not(#\#):not(#\#):not(#\#){transition-duration:.2s}
   .xjd9b36:not(#\#):not(#\#):not(#\#){transition-duration:1ms}
   .x2rcmwa:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast-max)}
@@ -969,6 +979,7 @@
   .x1wbls7o:not(#\#):not(#\#):not(#\#){transition-property:opacity,background-color,transform}
   .xnpjden:not(#\#):not(#\#):not(#\#){transition-property:opacity,background-color}
   .x1kx2cm7:not(#\#):not(#\#):not(#\#){transition-property:opacity,box-shadow}
+  .xsm4mo9:not(#\#):not(#\#):not(#\#){transition-property:opacity,display,overlay}
   .x1apppo2:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform,max-width}
   .x4bbghf:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform,overlay,display}
   .x6o7n8i:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform}
@@ -976,6 +987,7 @@
   .x19991ni:not(#\#):not(#\#):not(#\#){transition-property:opacity}
   .x1xuz8iz:not(#\#):not(#\#):not(#\#){transition-property:top,height}
   .x18dpk69:not(#\#):not(#\#):not(#\#){transition-property:transform,background-color}
+  .xefglzl:not(#\#):not(#\#):not(#\#){transition-property:transform,color,background-color}
   .xh3q6i0:not(#\#):not(#\#):not(#\#){transition-property:transform,width,height}
   .x11xpdln:not(#\#):not(#\#):not(#\#){transition-property:transform}
   .xxrbq2n:not(#\#):not(#\#):not(#\#){transition-property:width}
@@ -1003,6 +1015,7 @@
   .x6cuj84:not(#\#):not(#\#):not(#\#){z-index:500}
   .x1q2oy4v:not(#\#):not(#\#):not(#\#){z-index:9999}
   .x1v2claj.x1v2claj:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){opacity:1}
+  .xs4y3kv.xs4y3kv:where(.x1g2q90y:focus-visible *):not(#\#):not(#\#):not(#\#){outline-offset:2px}
   .x3730vf.x3730vf:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){pointer-events:auto}
   .xuqivmr.xuqivmr:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){transform:translateY(0)}
   .x7v6acp.x7v6acp:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){visibility:visible}
@@ -1024,6 +1037,10 @@
   .xttggg:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}
   .x9cjr8z:popover-open:not(#\#):not(#\#):not(#\#){transform:translateY(0)}
   .x1rm9qnc:focus-within:not(#\#):not(#\#):not(#\#){z-index:1}
+  .x1vej5at:has(+ [popover] + [popover]:last-child):not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-element)}
+  .xxd14kb:has(+ [popover]:last-child):not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-element)}
+  .x1ir7nn6:has(+ [popover] + [popover]:last-child):not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
+  .xpufgd0:has(+ [popover]:last-child):not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
   .x92e2el:has(> [data-astryx-edge-comp]:last-child):not(#\#):not(#\#):not(#\#){margin-inline-end:var(--x-4drmnv)}
   .x1kftj4p:has(> [data-astryx-edge-comp]:first-child):not(#\#):not(#\#):not(#\#){margin-inline-start:var(--x-126w13d)}
   .xdjuwb3:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-offset:2px}
@@ -1045,6 +1062,7 @@
   .x1wzlfcn:last-child:not(#\#):not(#\#):not(#\#){padding-inline-end:max(var(--container-padding-inline-end,var(--spacing-4)),var(--spacing-2))}
   .x1dnou9g:nth-child(even):not(#\#):not(#\#):not(#\#){background-color:var(--color-background-muted)}
   .x1uwx2nv:hover:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}
+  .x1cqbx0l:hover:not(#\#):not(#\#):not(#\#){color:var(--color-icon-primary)}
   .x1c52tdz:focus:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}
   .x1rsz1da:focus:not(#\#):not(#\#):not(#\#){clip-path:none}
   .xodanix:focus:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--spacing-2)}
@@ -1101,6 +1119,9 @@
   @media (hover: hover){.x8o3jvd.x8o3jvd:hover:not(#\#):not(#\#):not(#\#){background-image:none}}
   @media (hover: hover){.xw6ruzt.xw6ruzt:hover:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-accent) 20%,transparent)}}
   @media (hover: hover){.xhouywz.xhouywz:hover:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-med)}}
+  @media (hover: hover){.x17qfo7y.x17qfo7y:hover:not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-accent),var(--color-tint-hover) 15%)}}
+  @media (hover: hover){.x4z56r7.x4z56r7:hover:not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-primary),var(--color-tint-hover) 15%)}}
+  @media (hover: hover){.x7ruf5d.x7ruf5d:hover:not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-secondary),var(--color-tint-hover) 15%)}}
   @media (hover: hover){.x140uwzg.x140uwzg:hover:not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}}
   @media (hover: hover){.xzomjkg.xzomjkg:hover:not(#\#):not(#\#):not(#\#){opacity:.85}}
   .xib2hle:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border-emphasized)}
@@ -1183,6 +1204,7 @@
   .x102lyln:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-lg) - 8px)}
   .x184gfjb:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-md) - 4px)}
   .xrmxcn7:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-md) - 8px)}
+  .x1u5rhrp:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-md) + var(--spacing-1))}
   .xzj98nu:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-sm) - 4px)}
   .xzydfjl:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-sm) - 8px)}
   .xg7h5cd:not(#\#):not(#\#):not(#\#):not(#\#){height:fit-content}