@misoto22/kioku-ui 0.0.0 → 0.2.0

package/src/TypeaheadItem/TypeaheadItem.tsx

@@ -0,0 +1,105 @@
+import * as stylex from '@stylexjs/stylex';
+import type {LiHTMLAttributes, ReactNode} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+import {Item} from '../Item/index.js';
+
+const markWidth = `calc(2 * ${semanticTokens.borderWidth})`;
+const markHeight = '64%';
+
+const styles = stylex.create({
+  // A suggestion on offer is merely available, so it sits in the second rank;
+  // the one the keys point at rises to the first.
+  option: {
+    color: semanticTokens.colorTextSecondary,
+    cursor: 'pointer',
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeMd,
+    letterSpacing: semanticTokens.letterSpacingLabel,
+    lineHeight: semanticTokens.lineHeightBody,
+    paddingBlock: semanticTokens.spacingXs,
+    paddingInline: semanticTokens.spacingMd,
+    position: 'relative',
+    transitionDuration: semanticTokens.durationFast,
+    transitionProperty: 'background-color, color',
+    transitionTimingFunction: semanticTokens.easingStandard,
+  },
+  idle: {
+    ':hover': {
+      backgroundColor: semanticTokens.colorOverlayHover,
+      color: semanticTokens.colorText,
+    },
+  },
+  // Focus stays in the combobox, so the row it points at carries the whole
+  // signal itself: the wash, the first rank of ink, and the bookmark at the
+  // inline-start edge — never a filled bar.
+  // No weight change. This is a list a reader moves through with the arrow
+  // keys, and the label is proportional type: a heavier row is a WIDER row, so
+  // every press reflowed the line under the cursor. `NavItem` settled the same
+  // question the same way — ink alone is enough to find, and it leaves the
+  // column still. Weight remains a legal mark elsewhere (design-language §5);
+  // it is this case, a moving cursor over proportional text, that it fails.
+  active: {
+    backgroundColor: semanticTokens.colorOverlayHover,
+    color: semanticTokens.colorText,
+    '::before': {
+      backgroundColor: semanticTokens.colorAccent,
+      content: '',
+      height: markHeight,
+      insetBlockStart: '50%',
+      insetInlineStart: 0,
+      position: 'absolute',
+      transform: 'translateY(-50%)',
+      width: markWidth,
+    },
+  },
+  disabled: {color: semanticTokens.colorDisabledText, cursor: 'default'},
+});
+
+/** Props for one suggestion inside a typeahead listbox. */
+export interface TypeaheadItemProps extends Omit<
+  LiHTMLAttributes<HTMLLIElement>,
+  'aria-disabled' | 'aria-selected' | 'className' | 'role'
+> {
+  readonly active?: boolean;
+  readonly description?: ReactNode;
+  readonly disabled?: boolean;
+  readonly leading?: ReactNode;
+  readonly trailing?: ReactNode;
+}
+
+/**
+ * One suggestion, for a caller rendering its own list. It reports
+ * `aria-selected` rather than taking focus, because the combobox pattern
+ * keeps focus in the input and points at the active option instead.
+ */
+export function TypeaheadItem({
+  active = false,
+  children,
+  description,
+  disabled = false,
+  leading,
+  trailing,
+  ...props
+}: TypeaheadItemProps) {
+  return (
+    <li
+      {...props}
+      aria-disabled={disabled || undefined}
+      aria-selected={active}
+      role="option"
+      {...stylex.props(
+        styles.option,
+        disabled ? styles.disabled : active ? styles.active : styles.idle,
+      )}
+    >
+      <Item
+        {...(description === undefined ? {} : {description})}
+        {...(leading === undefined ? {} : {leading})}
+        {...(trailing === undefined ? {} : {trailing})}
+      >
+        {children}
+      </Item>
+    </li>
+  );
+}

package/src/TypeaheadItem/index.ts

@@ -0,0 +1 @@
+export {TypeaheadItem, type TypeaheadItemProps} from './TypeaheadItem.js';

package/src/VStack/VStack.doc.ts

@@ -0,0 +1,13 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const vStackDoc = {
+  name: 'VStack',
+  description: 'Arranges children in an evenly spaced column.',
+  props: [
+    {name: 'align', description: 'Places children along the cross axis.'},
+    {name: 'gap', description: 'Selects the space between children.'},
+  ],
+  inheritedProps: ['StackProps, which VStack forwards unchanged'],
+  example: '<VStack gap="md">…</VStack>',
+  storyId: 'core-v-stack--default',
+} satisfies ComponentDoc;

package/src/VStack/VStack.tsx

@@ -0,0 +1,12 @@
+import {Stack, type StackProps} from '../Stack/index.js';
+
+/** Props for a column of evenly spaced children. */
+export type VStackProps = StackProps;
+
+/**
+ * Arranges children in a column. It is an alias for `Stack`, kept so a layout
+ * written with `HStack` reads symmetrically.
+ */
+export function VStack(props: VStackProps) {
+  return <Stack {...props} />;
+}

package/src/VStack/index.ts

@@ -0,0 +1 @@
+export {VStack, type VStackProps} from './VStack.js';

package/src/authoring.stylex.ts

@@ -17,6 +17,7 @@ export const semanticTokens = stylex.defineVars({
   colorDisabledSurface: 'var(--kioku-ui-color-disabled-surface)',
   colorDisabledText: 'var(--kioku-ui-color-disabled-text)',
   colorFocus: 'var(--kioku-ui-color-focus)',
+  colorScrim: 'var(--kioku-ui-color-scrim)',
   borderDefault: 'var(--kioku-ui-border-default)',
   borderStrong: 'var(--kioku-ui-border-strong)',
   borderInteractive: 'var(--kioku-ui-border-interactive)',
@@ -49,6 +50,12 @@ export const semanticTokens = stylex.defineVars({
   fontWeightStrong: 'var(--kioku-ui-typography-font-weight-strong)',
   lineHeightBody: 'var(--kioku-ui-typography-line-height-body)',
   lineHeightHeading: 'var(--kioku-ui-typography-line-height-heading)',
+  letterSpacingTitle: 'var(--kioku-ui-typography-letter-spacing-title)',
+  letterSpacingHeading: 'var(--kioku-ui-typography-letter-spacing-heading)',
+  letterSpacingBody: 'var(--kioku-ui-typography-letter-spacing-body)',
+  letterSpacingLabel: 'var(--kioku-ui-typography-letter-spacing-label)',
+  letterSpacingEyebrow: 'var(--kioku-ui-typography-letter-spacing-eyebrow)',
+  letterSpacingMono: 'var(--kioku-ui-typography-letter-spacing-mono)',
   spacingXs: 'var(--kioku-ui-spacing-xs)',
   spacingSm: 'var(--kioku-ui-spacing-sm)',
   spacingMd: 'var(--kioku-ui-spacing-md)',

package/src/docs/index.ts

@@ -1,24 +1,55 @@
 import {alertDoc} from '../Alert/Alert.doc.js';
+import {alertDialogDoc} from '../AlertDialog/AlertDialog.doc.js';
+import {appShellDoc} from '../AppShell/AppShell.doc.js';
 import {asyncStateDoc} from '../AsyncState/AsyncState.doc.js';
 import {badgeDoc} from '../Badge/Badge.doc.js';
+import {bottomSheetDoc} from '../BottomSheet/BottomSheet.doc.js';
+import {bottomSheetSwitcherDoc} from '../BottomSheetSwitcher/BottomSheetSwitcher.doc.js';
+import {breadcrumbsDoc} from '../Breadcrumbs/Breadcrumbs.doc.js';
 import {buttonDoc} from '../Button/Button.doc.js';
 import {cardDoc} from '../Card/Card.doc.js';
 import {cardFooterDoc} from '../CardFooter/CardFooter.doc.js';
 import {cardHeaderDoc} from '../CardHeader/CardHeader.doc.js';
 import {centerDoc} from '../Center/Center.doc.js';
+import {codeDoc} from '../Code/Code.doc.js';
+import {contextMenuDoc} from '../ContextMenu/ContextMenu.doc.js';
+import {dialogDoc} from '../Dialog/Dialog.doc.js';
 import {dividerDoc} from '../Divider/Divider.doc.js';
+import {
+  dropdownMenuDoc,
+  dropdownMenuItemDoc,
+} from '../DropdownMenu/DropdownMenu.doc.js';
 import {emptyStateDoc} from '../EmptyState/EmptyState.doc.js';
+import {eyebrowDoc} from '../Eyebrow/Eyebrow.doc.js';
 import {fieldDoc} from '../Field/Field.doc.js';
 import {gridDoc} from '../Grid/Grid.doc.js';
 import {headingDoc} from '../Heading/Heading.doc.js';
+import {hoverCardDoc} from '../HoverCard/HoverCard.doc.js';
+import {iconDoc} from '../Icon/Icon.doc.js';
 import {iconButtonDoc} from '../IconButton/IconButton.doc.js';
+import {itemDoc} from '../Item/Item.doc.js';
+import {kbdDoc} from '../Kbd/Kbd.doc.js';
+import {layerDoc} from '../Layer/Layer.doc.js';
+import {layoutDoc} from '../Layout/Layout.doc.js';
+import {listDoc, listItemDoc} from '../List/List.doc.js';
 import {metricGridDoc} from '../MetricGrid/MetricGrid.doc.js';
+import {mobileNavDoc} from '../MobileNav/MobileNav.doc.js';
+import {moreMenuDoc} from '../MoreMenu/MoreMenu.doc.js';
+import {navIconDoc} from '../NavIcon/NavIcon.doc.js';
+import {navItemDoc} from '../NavItem/NavItem.doc.js';
+import {navMenuDoc} from '../NavMenu/NavMenu.doc.js';
+import {outlineDoc} from '../Outline/Outline.doc.js';
+import {overlayDoc} from '../Overlay/Overlay.doc.js';
+import {popoverDoc} from '../Popover/Popover.doc.js';
+import {paginationDoc} from '../Pagination/Pagination.doc.js';
 import {sectionDoc} from '../Section/Section.doc.js';
 import {segmentedControlDoc} from '../SegmentedControl/SegmentedControl.doc.js';
+import {sideNavDoc, sideNavSectionDoc} from '../SideNav/SideNav.doc.js';
 import {skeletonDoc} from '../Skeleton/Skeleton.doc.js';
 import {spinnerDoc} from '../Spinner/Spinner.doc.js';
 import {stackDoc} from '../Stack/Stack.doc.js';
 import {statusDotDoc} from '../StatusDot/StatusDot.doc.js';
+import {tabListDoc} from '../TabList/TabList.doc.js';
 import {
   tableBodyDoc,
   tableCaptionDoc,
@@ -31,10 +62,83 @@ import {
 import {textAreaDoc} from '../TextArea/TextArea.doc.js';
 import {textDoc} from '../Text/Text.doc.js';
 import {textInputDoc} from '../TextInput/TextInput.doc.js';
+import {toastDoc, toastProviderDoc} from '../Toast/Toast.doc.js';
+import {toolbarDoc} from '../Toolbar/Toolbar.doc.js';
 import {toggleDoc} from '../Toggle/Toggle.doc.js';
+import {topNavDoc} from '../TopNav/TopNav.doc.js';
+import {tooltipDoc} from '../Tooltip/Tooltip.doc.js';
 import {visuallyHiddenDoc} from '../VisuallyHidden/VisuallyHidden.doc.js';
 import {linkDoc, linkProviderDoc} from '../navigation/LinkProvider.doc.js';
 import {themeProviderDoc} from '../theme/Theme.doc.js';
+import {calendarDoc} from '../Calendar/Calendar.doc.js';
+import {checkboxInputDoc} from '../CheckboxInput/CheckboxInput.doc.js';
+import {checkboxListDoc} from '../CheckboxList/CheckboxList.doc.js';
+import {complexSelectorDoc} from '../ComplexSelector/ComplexSelector.doc.js';
+import {dateInputDoc} from '../DateInput/DateInput.doc.js';
+import {datePickerDoc} from '../DatePicker/DatePicker.doc.js';
+import {dateRangeInputDoc} from '../DateRangeInput/DateRangeInput.doc.js';
+import {dateTimeInputDoc} from '../DateTimeInput/DateTimeInput.doc.js';
+import {fieldStatusDoc} from '../FieldStatus/FieldStatus.doc.js';
+import {fileInputDoc} from '../FileInput/FileInput.doc.js';
+import {formLayoutDoc} from '../FormLayout/FormLayout.doc.js';
+import {inputGroupDoc} from '../InputGroup/InputGroup.doc.js';
+import {multiSelectorDoc} from '../MultiSelector/MultiSelector.doc.js';
+import {numberInputDoc} from '../NumberInput/NumberInput.doc.js';
+import {numeralDoc} from '../Numeral/Numeral.doc.js';
+import {radioListDoc} from '../RadioList/RadioList.doc.js';
+import {selectorDoc} from '../Selector/Selector.doc.js';
+import {sliderDoc} from '../Slider/Slider.doc.js';
+import {switchDoc} from '../Switch/Switch.doc.js';
+import {timeInputDoc} from '../TimeInput/TimeInput.doc.js';
+import {typeaheadDoc} from '../Typeahead/Typeahead.doc.js';
+import {aspectRatioDoc} from '../AspectRatio/AspectRatio.doc.js';
+import {avatarDoc} from '../Avatar/Avatar.doc.js';
+import {avatarGroupDoc} from '../AvatarGroup/AvatarGroup.doc.js';
+import {bannerDoc} from '../Banner/Banner.doc.js';
+import {blockquoteDoc} from '../Blockquote/Blockquote.doc.js';
+import {carouselDoc} from '../Carousel/Carousel.doc.js';
+import {citationDoc} from '../Citation/Citation.doc.js';
+import {codeBlockDoc} from '../CodeBlock/CodeBlock.doc.js';
+import {indicatorDoc} from '../Indicator/Indicator.doc.js';
+import {lightboxDoc} from '../Lightbox/Lightbox.doc.js';
+import {markdownDoc} from '../Markdown/Markdown.doc.js';
+import {metadataListDoc} from '../MetadataList/MetadataList.doc.js';
+import {progressBarDoc} from '../ProgressBar/ProgressBar.doc.js';
+import {thumbnailDoc} from '../Thumbnail/Thumbnail.doc.js';
+import {timestampDoc} from '../Timestamp/Timestamp.doc.js';
+import {tokenDoc} from '../Token/Token.doc.js';
+import {tokenizerDoc} from '../Tokenizer/Tokenizer.doc.js';
+import {buttonGroupDoc} from '../ButtonGroup/ButtonGroup.doc.js';
+import {clickableCardDoc} from '../ClickableCard/ClickableCard.doc.js';
+import {collapsibleDoc} from '../Collapsible/Collapsible.doc.js';
+import {commandPaletteDoc} from '../CommandPalette/CommandPalette.doc.js';
+import {hStackDoc} from '../HStack/HStack.doc.js';
+import {overflowListDoc} from '../OverflowList/OverflowList.doc.js';
+import {powerSearchDoc} from '../PowerSearch/PowerSearch.doc.js';
+import {resizableDoc} from '../Resizable/Resizable.doc.js';
+import {resizeHandleDoc} from '../ResizeHandle/ResizeHandle.doc.js';
+import {selectableCardDoc} from '../SelectableCard/SelectableCard.doc.js';
+import {toggleButtonDoc} from '../ToggleButton/ToggleButton.doc.js';
+import {treeListDoc} from '../TreeList/TreeList.doc.js';
+import {vStackDoc} from '../VStack/VStack.doc.js';
+import {
+  chatComposerDoc,
+  chatLayoutDoc,
+  chatMessageDoc,
+  chatMessageListDoc,
+  chatMessageMetadataDoc,
+  chatSystemMessageDoc,
+  chatToolCallsDoc,
+} from '../Chat/Chat.doc.js';
+import {internationalizationProviderDoc} from '../i18n/Internationalization.doc.js';
+import {boxDoc} from '../Box/Box.doc.js';
+import {toggleButtonGroupDoc} from '../ToggleButtonGroup/ToggleButtonGroup.doc.js';
+import {typeaheadItemDoc} from '../TypeaheadItem/TypeaheadItem.doc.js';
+import {topNavMenuDoc} from '../TopNavMenu/TopNavMenu.doc.js';
+import {
+  topNavMegaMenuDoc,
+  topNavMegaMenuFeaturedCardDoc,
+} from '../TopNavMegaMenu/TopNavMegaMenu.doc.js';
 import type {ComponentDoc} from './types.js';
 
 export {
@@ -42,25 +146,56 @@ export {
   cardFooterDoc,
   cardHeaderDoc,
   centerDoc,
+  codeDoc,
+  contextMenuDoc,
+  dialogDoc,
   dividerDoc,
+  dropdownMenuDoc,
+  dropdownMenuItemDoc,
   gridDoc,
   headingDoc,
+  hoverCardDoc,
   sectionDoc,
   stackDoc,
   textDoc,
   visuallyHiddenDoc,
   alertDoc,
+  alertDialogDoc,
+  appShellDoc,
   asyncStateDoc,
   badgeDoc,
+  bottomSheetDoc,
+  bottomSheetSwitcherDoc,
+  breadcrumbsDoc,
   buttonDoc,
   emptyStateDoc,
+  eyebrowDoc,
   fieldDoc,
+  iconDoc,
   iconButtonDoc,
+  itemDoc,
+  kbdDoc,
+  layerDoc,
+  layoutDoc,
+  listDoc,
+  listItemDoc,
   metricGridDoc,
+  mobileNavDoc,
+  moreMenuDoc,
+  navIconDoc,
+  navItemDoc,
+  navMenuDoc,
+  outlineDoc,
+  overlayDoc,
+  paginationDoc,
+  popoverDoc,
   segmentedControlDoc,
+  sideNavDoc,
+  sideNavSectionDoc,
   skeletonDoc,
   spinnerDoc,
   statusDotDoc,
+  tabListDoc,
   tableDoc,
   tableCaptionDoc,
   tableHeadDoc,
@@ -70,9 +205,79 @@ export {
   tableCellDoc,
   textAreaDoc,
   textInputDoc,
+  toastDoc,
+  toastProviderDoc,
   toggleDoc,
+  toolbarDoc,
+  tooltipDoc,
+  topNavDoc,
   linkDoc,
   linkProviderDoc,
+  calendarDoc,
+  checkboxInputDoc,
+  checkboxListDoc,
+  complexSelectorDoc,
+  dateInputDoc,
+  datePickerDoc,
+  dateRangeInputDoc,
+  dateTimeInputDoc,
+  fieldStatusDoc,
+  fileInputDoc,
+  formLayoutDoc,
+  inputGroupDoc,
+  multiSelectorDoc,
+  numberInputDoc,
+  numeralDoc,
+  radioListDoc,
+  selectorDoc,
+  sliderDoc,
+  switchDoc,
+  timeInputDoc,
+  typeaheadDoc,
+  aspectRatioDoc,
+  avatarDoc,
+  avatarGroupDoc,
+  bannerDoc,
+  blockquoteDoc,
+  carouselDoc,
+  citationDoc,
+  codeBlockDoc,
+  indicatorDoc,
+  lightboxDoc,
+  markdownDoc,
+  metadataListDoc,
+  progressBarDoc,
+  thumbnailDoc,
+  timestampDoc,
+  tokenDoc,
+  tokenizerDoc,
+  buttonGroupDoc,
+  clickableCardDoc,
+  collapsibleDoc,
+  commandPaletteDoc,
+  hStackDoc,
+  overflowListDoc,
+  powerSearchDoc,
+  resizableDoc,
+  resizeHandleDoc,
+  selectableCardDoc,
+  toggleButtonDoc,
+  treeListDoc,
+  vStackDoc,
+  chatComposerDoc,
+  chatLayoutDoc,
+  chatMessageDoc,
+  chatMessageListDoc,
+  chatToolCallsDoc,
+  internationalizationProviderDoc,
+  boxDoc,
+  toggleButtonGroupDoc,
+  typeaheadItemDoc,
+  topNavMenuDoc,
+  chatMessageMetadataDoc,
+  chatSystemMessageDoc,
+  topNavMegaMenuDoc,
+  topNavMegaMenuFeaturedCardDoc,
   themeProviderDoc,
 };
 export {
@@ -85,6 +290,11 @@ export {
 export const componentDocs: readonly ComponentDoc[] = Object.freeze([
   textDoc,
   headingDoc,
+  codeDoc,
+  kbdDoc,
+  eyebrowDoc,
+  numeralDoc,
+  iconDoc,
   stackDoc,
   gridDoc,
   sectionDoc,
@@ -93,6 +303,9 @@ export const componentDocs: readonly ComponentDoc[] = Object.freeze([
   cardFooterDoc,
   dividerDoc,
   centerDoc,
+  listDoc,
+  listItemDoc,
+  itemDoc,
   visuallyHiddenDoc,
   buttonDoc,
   iconButtonDoc,
@@ -103,11 +316,65 @@ export const componentDocs: readonly ComponentDoc[] = Object.freeze([
   textAreaDoc,
   toggleDoc,
   segmentedControlDoc,
+  checkboxInputDoc,
+  checkboxListDoc,
+  radioListDoc,
+  switchDoc,
+  selectorDoc,
+  complexSelectorDoc,
+  typeaheadDoc,
+  typeaheadItemDoc,
+  multiSelectorDoc,
+  numberInputDoc,
+  fileInputDoc,
+  sliderDoc,
+  dateInputDoc,
+  datePickerDoc,
+  timeInputDoc,
+  dateTimeInputDoc,
+  dateRangeInputDoc,
+  calendarDoc,
+  fieldStatusDoc,
+  inputGroupDoc,
+  formLayoutDoc,
   emptyStateDoc,
   asyncStateDoc,
   spinnerDoc,
   skeletonDoc,
   alertDoc,
+  avatarDoc,
+  avatarGroupDoc,
+  thumbnailDoc,
+  aspectRatioDoc,
+  boxDoc,
+  bannerDoc,
+  blockquoteDoc,
+  citationDoc,
+  codeBlockDoc,
+  markdownDoc,
+  metadataListDoc,
+  timestampDoc,
+  tokenDoc,
+  tokenizerDoc,
+  progressBarDoc,
+  indicatorDoc,
+  carouselDoc,
+  lightboxDoc,
+  layerDoc,
+  overlayDoc,
+  popoverDoc,
+  tooltipDoc,
+  dialogDoc,
+  alertDialogDoc,
+  bottomSheetDoc,
+  bottomSheetSwitcherDoc,
+  hoverCardDoc,
+  dropdownMenuDoc,
+  dropdownMenuItemDoc,
+  contextMenuDoc,
+  moreMenuDoc,
+  toastDoc,
+  toastProviderDoc,
   tableDoc,
   tableCaptionDoc,
   tableHeadDoc,
@@ -116,7 +383,46 @@ export const componentDocs: readonly ComponentDoc[] = Object.freeze([
   tableHeaderCellDoc,
   tableCellDoc,
   metricGridDoc,
+  hStackDoc,
+  vStackDoc,
+  buttonGroupDoc,
+  toggleButtonDoc,
+  toggleButtonGroupDoc,
+  clickableCardDoc,
+  selectableCardDoc,
+  collapsibleDoc,
+  resizableDoc,
+  resizeHandleDoc,
+  overflowListDoc,
+  treeListDoc,
+  commandPaletteDoc,
+  powerSearchDoc,
+  chatLayoutDoc,
+  chatMessageListDoc,
+  chatMessageDoc,
+  chatMessageMetadataDoc,
+  chatSystemMessageDoc,
+  chatToolCallsDoc,
+  chatComposerDoc,
+  tabListDoc,
+  breadcrumbsDoc,
+  paginationDoc,
+  navIconDoc,
+  navItemDoc,
+  navMenuDoc,
+  topNavDoc,
+  topNavMenuDoc,
+  topNavMegaMenuDoc,
+  topNavMegaMenuFeaturedCardDoc,
+  sideNavDoc,
+  sideNavSectionDoc,
+  mobileNavDoc,
+  toolbarDoc,
+  outlineDoc,
+  layoutDoc,
+  appShellDoc,
   linkDoc,
   linkProviderDoc,
+  internationalizationProviderDoc,
   themeProviderDoc,
 ]);

package/src/hooks/focusableSelector.ts

@@ -0,0 +1,65 @@
+const controlSelectors = [
+  'a[href]',
+  'audio[controls]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  'video[controls]',
+  '[contenteditable]:not([contenteditable="false"])',
+];
+
+/** Matches elements the browser will place in the sequential focus order. */
+export const focusableSelector = [
+  ...controlSelectors,
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+/**
+ * Matches elements focus can reach programmatically, including the ones a
+ * roving-tabindex collection has deliberately taken out of the tab order.
+ */
+export const reachableSelector = [...controlSelectors, '[tabindex]'].join(',');
+
+function isHidden(element: HTMLElement) {
+  if (element.hidden) {
+    return true;
+  }
+
+  // Layout boxes are unreliable outside a real browser, so read the declared
+  // visibility instead of measuring the element.
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  return style?.display === 'none' || style?.visibility === 'hidden';
+}
+
+function collect(
+  root: HTMLElement,
+  selector: string,
+  requireTabOrder: boolean,
+): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(selector)].filter(
+    (element) =>
+      (!requireTabOrder || element.tabIndex >= 0) &&
+      !element.hasAttribute('inert') &&
+      element.getAttribute('aria-hidden') !== 'true' &&
+      !isHidden(element),
+  );
+}
+
+/**
+ * Lists the focusable descendants of `root` in document order, skipping the
+ * ones a reader cannot reach because they are hidden, inert, or held out of
+ * the tab order by a negative tabIndex.
+ */
+export function focusableElements(root: HTMLElement): HTMLElement[] {
+  return collect(root, focusableSelector, true);
+}
+
+/**
+ * Lists the descendants a roving-focus collection can move between. Unlike
+ * `focusableElements` this keeps `tabindex="-1"` items, because that is how
+ * such a collection marks the stops it owns rather than the ones it hides.
+ */
+export function reachableElements(root: HTMLElement): HTMLElement[] {
+  return collect(root, reachableSelector, false);
+}

package/src/hooks/index.ts

@@ -0,0 +1,31 @@
+export {
+  focusableElements,
+  focusableSelector,
+  reachableElements,
+  reachableSelector,
+} from './focusableSelector.js';
+export {
+  useAnchoredPosition,
+  type Alignment,
+  type AnchoredPosition,
+  type AnchoredPositionOptions,
+  type AnchoredPositionResult,
+  type Placement,
+} from './useAnchoredPosition.js';
+export {useAnnounce, type AnnouncePoliteness} from './useAnnounce.js';
+export {useClipboard, type ClipboardState} from './useClipboard.js';
+export {useDevWarning} from './useDevWarning.js';
+export {useFocusTrap} from './useFocusTrap.js';
+export {
+  useHotkeys,
+  type HotkeyBindings,
+  type HotkeyOptions,
+} from './useHotkeys.js';
+export {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect.js';
+export {
+  useListFocus,
+  type ListFocusOptions,
+  type ListOrientation,
+} from './useListFocus.js';
+export {useMediaQuery} from './useMediaQuery.js';
+export {useScrollLock} from './useScrollLock.js';