@salemcobalt/ui 0.2.0-rc.25 → 0.2.0-rc.27

package/README.md

@@ -48,7 +48,7 @@ Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS alwa
 | `Disclosure`             | A native `<details>` collapse: required `summary`, `summaryOpen`, `open`/`defaultOpen`/`onOpenChange`, `previewLines` (fades the first N lines while closed, summary moves below), `summaryPosition`; share `name` for an exclusive group.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `EmptyState`             | Centred placeholder: required `title`, `description`, `icon` (24px in a muted circle), children are the actions, `size` sm · md, `as` div · section · li.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | `Skeleton`               | Loading placeholder, `aria-hidden`: `variant` text (default, one line) · rect · circle, `width`, `height`, `lines` (text, last line shorter), `still`. Put `aria-busy` on the region or a labelled `Spinner` beside it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `Menu`                   | `Root` (`open`, `onOpenChange`, `modal`), `Trigger` (secondary Button with a chevron, or `render={<IconButton label="More" />}`), `Content` (`side`, `align`), `Item` (`icon`, `trailing`, `tone="danger"`, `disabled`), `LinkItem` (`href`), `CheckboxItem` (`checked`, `onCheckedChange`), `RadioGroup` (`value`, `onValueChange`, `label`) + `RadioItem`, `Group` (`label`), `Separator`. Arrow keys, Home/End, type-ahead, Esc and focus return come from Base UI.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `Menu`                   | `Root` (`open`, `onOpenChange`, `modal`), `Trigger` (secondary Button with a chevron, or `render={<IconButton label="More" />}`), `Content` (`side`, `align`), `Item` (`icon`, decorative; `description`, a muted second line that is the item's accessible description, not part of its name; `trailing`, `tone="danger"`, `disabled`), `LinkItem` (`href`, and the same `icon` and `description`), `CheckboxItem` (`checked`, `onCheckedChange`), `RadioGroup` (`value`, `onValueChange`, `label`) + `RadioItem`, `Group` (`label`), `Separator`. Arrow keys, Home/End, type-ahead, Esc and focus return come from Base UI.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | `Table` selection        | `useRowSelection(ids)` (ids in visible order; ids that disappear leave the selection): `selected`, `selectedIds`, `count`, `anchor`, `headerState` none · some · all, `isSelected`, `toggle`, `toggleRange`, `selectAll`, `clear`; a pure reducer underneath (`selection.*` events). `Table.Root selection` + `Table.SelectionHeader` (`label`, mixed when some) + `Table.SelectionCell label="Select …"` in a `Table.Row selectionId`. Shift+click (checkbox or row) and Shift+Space extend from the anchor; Cmd/Ctrl+click on a row toggles without reaching its `onClick`; Cmd/Ctrl+A in the table selects all, Esc clears.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | `SelectionBar`           | Floating bulk-action bar on Toolbar, centred at the bottom of the viewport (content width up to 48rem, gutters and the safe area respected, full width between the gutters under 640px, fade and slide-up, none under reduced motion): `count` (hidden at 0), `onClear`, children are `Toolbar.Button`s, `aria-label` ("Bulk actions"), `countLabel`, `clearLabel`. Mount it at the end of the scrolling content: while open it leaves a spacer as tall as itself so the last rows scroll clear. A polite status region announces the count; focus returns to where it came from when the bar leaves.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `Toast`                  | `Toast.Provider` (`timeout` 6000, `limit` 3) near the root, `useToast().add({ title, description, tone, action: { label, onClick }, timeout, priority })` below it; Base UI Toast: polite region, paused on hover and focus, F6 to reach it, bottom-end at `--sc-z-toast`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |

package/dist/index.d.ts

@@ -847,6 +847,8 @@ declare function EditIcon(props: IconGlyphProps): react.JSX.Element;
 declare function ExternalLinkIcon(props: IconGlyphProps): react.JSX.Element;
 /** `eye` */
 declare function EyeIcon(props: IconGlyphProps): react.JSX.Element;
+/** `eye-off` */
+declare function EyeOffIcon(props: IconGlyphProps): react.JSX.Element;
 /** `filter` */
 declare function FilterIcon(props: IconGlyphProps): react.JSX.Element;
 /** `flag` */
@@ -903,7 +905,7 @@ declare function WarningIcon(props: IconGlyphProps): react.JSX.Element;
 declare function XIcon(props: IconGlyphProps): react.JSX.Element;
 
 /** Every icon shipped by this package, as `<Name>Icon` components. */
-declare const iconNames: readonly ["archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "bell", "briefcase", "calendar", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-x", "clock", "copy", "document", "download", "edit", "external-link", "eye", "filter", "flag", "inbox", "info", "link", "mail", "map-pin", "menu", "minus", "moon", "more-horizontal", "more-vertical", "pause", "play", "plus", "refresh", "search", "settings", "star", "sun", "thumbs-down", "thumbs-up", "trash", "undo", "user", "warning", "x"];
+declare const iconNames: readonly ["archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "bell", "briefcase", "calendar", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-x", "clock", "copy", "document", "download", "edit", "external-link", "eye", "eye-off", "filter", "flag", "inbox", "info", "link", "mail", "map-pin", "menu", "minus", "moon", "more-horizontal", "more-vertical", "pause", "play", "plus", "refresh", "search", "settings", "star", "sun", "thumbs-down", "thumbs-up", "trash", "undo", "user", "warning", "x"];
 type IconName = (typeof iconNames)[number];
 
 type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
@@ -1006,8 +1008,13 @@ interface MenuContentProps extends Omit<Menu$1.Popup.Props, 'className'> {
 /** Portal, positioner and the popup. Items go inside. */
 declare function Content$1({ side, align, sideOffset, className, children, ...rest }: MenuContentProps): react.JSX.Element;
 interface ItemSlots {
-    /** A 16px icon before the label. */
+    /** A 16px icon before the label. Decorative: hidden from assistive tech. */
     icon?: ReactNode | undefined;
+    /**
+     * A muted second line under the label that says what the item does. It is the item's accessible
+     * description (`aria-describedby`), not part of its name.
+     */
+    description?: ReactNode | undefined;
     /** Muted text at the end: a shortcut (`<Kbd>`) or a count. */
     trailing?: ReactNode | undefined;
     /** `danger` for destructive actions; put them last, after a separator. */
@@ -1017,7 +1024,7 @@ interface MenuItemProps extends Omit<Menu$1.Item.Props, 'className'>, ItemSlots
     className?: string | undefined;
 }
 /** One action. Closes the menu when activated. */
-declare function Item({ icon, trailing, tone, className, children, ...rest }: MenuItemProps): react.JSX.Element;
+declare function Item({ icon, description, trailing, tone, className, children, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: MenuItemProps): react.JSX.Element;
 interface MenuLinkItemProps extends Omit<Menu$1.LinkItem.Props, 'className'>, ItemSlots {
     className?: string | undefined;
 }
@@ -1025,7 +1032,7 @@ interface MenuLinkItemProps extends Omit<Menu$1.LinkItem.Props, 'className'>, It
  * An item that navigates: renders an `<a href>`. Closes the menu when chosen, like `Menu.Item`: with client-side
  * routing the page stays mounted, so an open menu would sit over the new page. Pass `closeOnClick={false}` to keep it.
  */
-declare function LinkItem({ icon, trailing, tone, className, closeOnClick, children, ...rest }: MenuLinkItemProps): react.JSX.Element;
+declare function LinkItem({ icon, description, trailing, tone, className, closeOnClick, children, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: MenuLinkItemProps): react.JSX.Element;
 interface MenuCheckboxItemProps extends Omit<Menu$1.CheckboxItem.Props, 'className' | 'onCheckedChange'> {
     /** Called with the next checked state. */
     onCheckedChange?: ((checked: boolean) => void) | undefined;
@@ -2729,7 +2736,10 @@ interface PopoverTriggerProps extends Omit<Popover$1.Trigger.Props, 'className'>
  */
 declare function Trigger({ render, className, children, ...rest }: PopoverTriggerProps): react.JSX.Element;
 interface PopoverContentProps extends Omit<Popover$1.Popup.Props, 'className'> {
-    /** Side of the trigger it opens on; flips when there is no room. Default `bottom`. */
+    /**
+     * Side of the trigger it opens on. Default `bottom`. With no room it flips to the opposite side (`top` for `bottom`),
+     * never to a perpendicular one; when neither side fits, it takes the roomier one and scrolls inside.
+     */
     side?: PopoverSide | undefined;
     /** Alignment along that side. Default `center`. */
     align?: PopoverAlign | undefined;
@@ -3352,5 +3362,5 @@ declare function AvatarButton({ label, name, initials, src, size, type, classNam
 
 declare const version = "0.1.1";
 
-export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarButton, Badge, Banner, BellIcon, BriefcaseIcon, BroomIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, Disclosure, DocumentIcon, DownloadIcon, EditIcon, EmptyState, ExternalLinkIcon, EyeIcon, FileInput, FilePreviewDialog, FilterIcon, FlagIcon, FullScreenFlow, Heading, Icon, IconButton, InboxIcon, InfoIcon, Inline, Input, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, Popover, PriorityNav, Progress$1 as Progress, Quote, ReasonList, RefreshIcon, Score, SearchIcon, Select, SelectionBar, SettingsIcon, Skeleton, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toast, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, WordDiff, XIcon, avatarInitials, iconNames, useRowSelection, useToast, version };
+export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarButton, Badge, Banner, BellIcon, BriefcaseIcon, BroomIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, Disclosure, DocumentIcon, DownloadIcon, EditIcon, EmptyState, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileInput, FilePreviewDialog, FilterIcon, FlagIcon, FullScreenFlow, Heading, Icon, IconButton, InboxIcon, InfoIcon, Inline, Input, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, Popover, PriorityNav, Progress$1 as Progress, Quote, ReasonList, RefreshIcon, Score, SearchIcon, Select, SelectionBar, SettingsIcon, Skeleton, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toast, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, WordDiff, XIcon, avatarInitials, iconNames, useRowSelection, useToast, version };
 export type { AvatarButtonProps, AvatarProps, AvatarSize, BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BannerProps, BannerTone, BroomIconProps, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, CheckboxProps, ChipProps, ChipSize, ChipTone, ControlSize, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogCloseRequestReason, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, DialogVariant, DisclosureProps, EmptyStateElement, EmptyStateProps, EmptyStateSize, FieldProps, FileInputProps, FilePreviewDialogProps, FlowChapter, FlowCloseRequestReason, FlowDirection, FullScreenFlowBodyProps, FullScreenFlowFooterProps, FullScreenFlowHeaderProps, FullScreenFlowProgressProps, FullScreenFlowRailGroupProps, FullScreenFlowRailItemProps, FullScreenFlowRailProps, FullScreenFlowRootProps, FullScreenFlowStepProps, FullScreenFlowViewportProps, HeadingElement, HeadingLevel, HeadingProps, HeadingSize, IconButtonDotTone, IconButtonProps, IconGlyphProps, IconName, IconProps, IconSize, InlineAlign, InlineElement, InlineJustify, InlineProps, InputProps, KbdGroupProps, KbdProps, MenuAlign, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemProps, MenuItemTone, MenuLinkItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, PopoverAlign, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverRootProps, PopoverSide, PopoverTitleProps, PopoverTriggerProps, PriorityNavItem, PriorityNavLinkProps, PriorityNavProps, ProgressProps, ProgressSize, ProgressTone, ProgressVariant, QuoteProps, ReasonListItemProps, ReasonListProps, ReasonListSize, ReasonTone, RowSelection, RowSelectionHeaderState, ScoreProps, ScoreSize, ScoreTone, ScoreVariant, SelectGroup, SelectOption, SelectProps, SelectionBarProps, SkeletonProps, SkeletonVariant, SpacingSize, SpinnerProps, StackAlign, StackElement, StackJustify, StackProps, StatDeltaTone, StatElement, StatProps, StatSize, StatTrend, StatVariant, SwitchProps, TableAlign, TableBodyProps, TableCaptionProps, TableCellProps, TableDensity, TableFootProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableSelectionCellProps, TableSelectionHeaderProps, TableSortDirection, TabsListProps, TabsListVariant, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextFamily, TextProps, TextSize, TextTone, TextWeight, TextareaProps, TextareaVariant, ToastApi, ToastOptions, ToastProviderProps, ToastTone, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide, WordDiffElement, WordDiffKind, WordDiffPart, WordDiffProps, WordDiffSize };

package/dist/index.js

@@ -431,6 +431,14 @@ function EyeIcon(props) {
     /* @__PURE__ */ jsx5("circle", { cx: "8", cy: "8", r: "2" })
   ] });
 }
+function EyeOffIcon(props) {
+  return /* @__PURE__ */ jsxs4(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx5("path", { d: "M6.37 3.99C6.87 3.84 7.42 3.75 8 3.75C12 3.75 14.25 8 14.25 8C14.25 8 13.65 9.13 12.53 10.22" }),
+    /* @__PURE__ */ jsx5("path", { d: "M9.63 12.01C9.13 12.16 8.58 12.25 8 12.25C4 12.25 1.75 8 1.75 8C1.75 8 2.35 6.87 3.47 5.78" }),
+    /* @__PURE__ */ jsx5("path", { d: "M9.41 9.41A2 2 0 0 1 6.59 6.59" }),
+    /* @__PURE__ */ jsx5("path", { d: "M2.5 2.5l11 11" })
+  ] });
+}
 function FilterIcon(props) {
   return /* @__PURE__ */ jsx5(Icon, { ...props, children: /* @__PURE__ */ jsx5("path", { d: "M2.5 3h11l-4.25 5v4.25L6.75 13.5V8z" }) });
 }
@@ -696,6 +704,7 @@ var iconNames = [
   "edit",
   "external-link",
   "eye",
+  "eye-off",
   "filter",
   "flag",
   "inbox",
@@ -819,6 +828,7 @@ function IconButton({
 
 // src/components/Menu/Menu.tsx
 import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { useId } from "react";
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function Root2({ open, defaultOpen, onOpenChange, disabled, modal = true, children }) {
   return /* @__PURE__ */ jsx9(
@@ -854,37 +864,73 @@ function Content2({
 }) {
   return /* @__PURE__ */ jsx9(BaseMenu.Portal, { children: /* @__PURE__ */ jsx9(BaseMenu.Positioner, { side, align, sideOffset, className: "sc-menu__positioner", children: /* @__PURE__ */ jsx9(BaseMenu.Popup, { className: cx("sc-menu", className), ...rest, children }) }) });
 }
-function ItemBody({
+function useItemBody({
   icon,
+  description,
   trailing,
   children
-}) {
-  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+}, aria) {
+  const id = useId();
+  const hasDescription = description !== void 0 && description !== null && description !== false;
+  const hasTrailing = trailing !== void 0;
+  const join = (...ids) => ids.filter(Boolean).join(" ") || void 0;
+  const body = /* @__PURE__ */ jsxs8(Fragment3, { children: [
     /* @__PURE__ */ jsx9("span", { className: "sc-menu__icon", "aria-hidden": "true", children: icon }),
-    /* @__PURE__ */ jsx9("span", { className: "sc-menu__label", children }),
-    trailing !== void 0 ? /* @__PURE__ */ jsx9("span", { className: "sc-menu__trailing", children: trailing }) : null
+    /* @__PURE__ */ jsx9("span", { className: "sc-menu__label", id: hasDescription ? `${id}-label` : void 0, children }),
+    hasDescription ? /* @__PURE__ */ jsx9("span", { className: "sc-menu__description", id: `${id}-description`, children: description }) : null,
+    hasTrailing ? /* @__PURE__ */ jsx9("span", { className: "sc-menu__trailing", id: hasDescription ? `${id}-trailing` : void 0, children: trailing }) : null
   ] });
+  if (!hasDescription) return [body, aria];
+  return [
+    body,
+    {
+      "aria-labelledby": aria["aria-labelledby"] ?? join(`${id}-label`, hasTrailing && `${id}-trailing`),
+      "aria-describedby": join(aria["aria-describedby"], `${id}-description`)
+    }
+  ];
 }
-function Item({ icon, trailing, tone = "default", className, children, ...rest }) {
-  return /* @__PURE__ */ jsx9(BaseMenu.Item, { className: cx("sc-menu__item", className), "data-tone": tone, ...rest, children: /* @__PURE__ */ jsx9(ItemBody, { icon, trailing, children }) });
+function Item({
+  icon,
+  description,
+  trailing,
+  tone = "default",
+  className,
+  children,
+  "aria-labelledby": labelledBy,
+  "aria-describedby": describedBy,
+  ...rest
+}) {
+  const [body, aria] = useItemBody(
+    { icon, description, trailing, children },
+    { "aria-labelledby": labelledBy, "aria-describedby": describedBy }
+  );
+  return /* @__PURE__ */ jsx9(BaseMenu.Item, { className: cx("sc-menu__item", className), "data-tone": tone, ...aria, ...rest, children: body });
 }
 function LinkItem({
   icon,
+  description,
   trailing,
   tone = "default",
   className,
   closeOnClick = true,
   children,
+  "aria-labelledby": labelledBy,
+  "aria-describedby": describedBy,
   ...rest
 }) {
+  const [body, aria] = useItemBody(
+    { icon, description, trailing, children },
+    { "aria-labelledby": labelledBy, "aria-describedby": describedBy }
+  );
   return /* @__PURE__ */ jsx9(
     BaseMenu.LinkItem,
     {
       className: cx("sc-menu__item", className),
       "data-tone": tone,
       closeOnClick,
+      ...aria,
       ...rest,
-      children: /* @__PURE__ */ jsx9(ItemBody, { icon, trailing, children })
+      children: body
     }
   );
 }
@@ -1230,7 +1276,7 @@ function Select({
 
 // src/components/Checkbox/Checkbox.tsx
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
-import { useId } from "react";
+import { useId as useId2 } from "react";
 import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function Checkbox({
   label,
@@ -1240,7 +1286,7 @@ function Checkbox({
   disabled,
   ...rest
 }) {
-  const descriptionId = useId();
+  const descriptionId = useId2();
   return /* @__PURE__ */ jsxs12("div", { className: cx("sc-choice", className), "data-disabled": disabled || void 0, children: [
     /* @__PURE__ */ jsxs12("label", { className: "sc-choice__control", children: [
       /* @__PURE__ */ jsx14(
@@ -1265,7 +1311,7 @@ function Checkbox({
 
 // src/components/Switch/Switch.tsx
 import { Switch as BaseSwitch } from "@base-ui/react/switch";
-import { useId as useId2 } from "react";
+import { useId as useId3 } from "react";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function Switch({
   label,
@@ -1276,7 +1322,7 @@ function Switch({
   disabled,
   ...rest
 }) {
-  const descriptionId = useId2();
+  const descriptionId = useId3();
   return /* @__PURE__ */ jsxs13(
     "div",
     {
@@ -2310,7 +2356,7 @@ function Skeleton({
 }
 
 // src/components/FileInput/FileInput.tsx
-import { useEffect as useEffect4, useId as useId3, useRef as useRef4, useState as useState6 } from "react";
+import { useEffect as useEffect4, useId as useId4, useRef as useRef4, useState as useState6 } from "react";
 
 // src/components/FilePreviewDialog/FilePreviewDialog.tsx
 import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
@@ -2575,7 +2621,7 @@ function FileInput({
   browseLabel = "browse",
   preview = true
 }) {
-  const id = useId3();
+  const id = useId4();
   const labelId = `${id}label`;
   const descriptionId = `${id}description`;
   const messagesId = `${id}messages`;
@@ -2923,7 +2969,7 @@ function FileInput({
 // src/components/PriorityNav/PriorityNav.tsx
 import {
   useEffect as useEffect5,
-  useId as useId4,
+  useId as useId5,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef5,
   useState as useState7
@@ -3018,7 +3064,7 @@ function PriorityNav({
   const current = items.findIndex((item) => item.current);
   const [fit, setFit] = useState7({ signature: null, current: -1, count: 0, overflowing: false });
   const [open, setOpen] = useState7(false);
-  const panelId = useId4();
+  const panelId = useId5();
   const listRef = useRef5(null);
   const moreRef = useRef5(null);
   const toggleRef = useRef5(null);
@@ -3264,6 +3310,7 @@ function Trigger3({ render, className, children, ...rest }) {
     }
   );
 }
+var COLLISION_AVOIDANCE = { fallbackAxisSide: "none" };
 function Content3({
   side = "bottom",
   align = "center",
@@ -3281,6 +3328,7 @@ function Content3({
       align,
       sideOffset: sideOffset ?? (arrow ? 8 : 4),
       anchor,
+      collisionAvoidance: COLLISION_AVOIDANCE,
       className: "sc-popover__positioner",
       children: /* @__PURE__ */ jsxs27(BasePopover.Popup, { className: cx("sc-popover", className), ...rest, children: [
         arrow ? /* @__PURE__ */ jsx32(BasePopover.Arrow, { className: "sc-popover__arrow" }) : null,
@@ -3354,7 +3402,7 @@ import {
   useCallback as useCallback3,
   useContext as useContext3,
   useEffect as useEffect6,
-  useId as useId5,
+  useId as useId6,
   useMemo as useMemo3,
   useRef as useRef6,
   useState as useState8
@@ -3508,7 +3556,7 @@ function Rail({
   ] });
 }
 function RailGroup({ label, className, children, ...rest }) {
-  const id = useId5();
+  const id = useId6();
   return /* @__PURE__ */ jsxs29("div", { className: cx("sc-flow__rail-group", className), ...rest, children: [
     /* @__PURE__ */ jsx34("span", { className: "sc-flow__rail-label", id, children: label }),
     /* @__PURE__ */ jsx34("ol", { className: "sc-flow__rail-list", "aria-labelledby": id, children })
@@ -3630,7 +3678,7 @@ function Step({
   children,
   ...rest
 }) {
-  const id = useId5();
+  const id = useId6();
   const titleRef = useRef6(null);
   const phase = useContext3(FrameContext);
   const { announce } = useContext3(FlowContext);
@@ -3897,6 +3945,7 @@ export {
   EmptyState,
   ExternalLinkIcon,
   EyeIcon,
+  EyeOffIcon,
   FileInput,
   FilePreviewDialog,
   FilterIcon,