@ultimat3/ui 23.0.0 → 25.0.0

package/src/components/Menu.tsx

@@ -2,7 +2,7 @@
 // Distinct from Select — a menu runs commands, it does not hold a form value.
 
 import type { JSX } from 'solid-js';
-import { createFocusTrap, createRovingTabindex, useId } from '../a11y';
+import { focusTrap, rovingTabindex, useId } from '../a11y';
 import { cx } from '../cx';
 import { MENU_ITEM_SELECTOR, tabStopIndex } from '../roving';
 import { useUi } from '../theme/context';
@@ -24,11 +24,15 @@ export interface MenuProps {
   items: readonly MenuItem[];
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /**
+   * The menu button. `aria-controls` is present only while the list is mounted: an IDREF to an
+   * element not in the document names nothing.
+   */
   trigger: (control: {
     id: string;
     'aria-haspopup': 'menu';
     'aria-expanded': boolean;
-    'aria-controls': string;
+    'aria-controls': string | undefined;
   }) => JSX.Element;
   /** Already-translated accessible name for the menu. */
   label: string;
@@ -45,7 +49,7 @@ export function Menu(props: MenuProps): JSX.Element {
 
   // Disabled items are excluded from BOTH answers — the list arrows walk and the one item that
   // carries the tab stop — because `focus()` on a disabled button silently does nothing.
-  const onKeyDown = createRovingTabindex(
+  const onKeyDown = rovingTabindex(
     () =>
       list === undefined ? [] : Array.from(list.querySelectorAll<HTMLElement>(MENU_ITEM_SELECTOR)),
     { orientation: 'vertical', dir: ui.dir },
@@ -65,7 +69,7 @@ export function Menu(props: MenuProps): JSX.Element {
     // Closing unmounts the panel with focus inside it, which resets focus to <body> and makes the
     // next Tab restart at the top of the document. The trap moves focus in on open and hands it
     // back to the trigger on close, so Escape returns the user where they were.
-    const trap = list === undefined ? undefined : createFocusTrap(list);
+    const trap = list === undefined ? undefined : focusTrap(list);
     trap?.activate();
     rt.onCleanup(() => {
       document.removeEventListener('pointerdown', onPointerDown, true);
@@ -85,7 +89,7 @@ export function Menu(props: MenuProps): JSX.Element {
         id: `${menuId}-trigger`,
         'aria-haspopup': 'menu',
         'aria-expanded': props.open,
-        'aria-controls': menuId,
+        'aria-controls': props.open ? menuId : undefined,
       })}
       {props.open ? (
         <div

package/src/components/Meter.tsx

@@ -9,7 +9,7 @@
 import type { JSX } from 'solid-js';
 import { cx } from '../cx';
 import styles from './Meter.module.scss';
-import { meterShare, meterWidth } from './meter-view';
+import { meterAria, meterShare, meterWidth } from './meter-view';
 import type { Tone } from './variants';
 
 export interface MeterProps {
@@ -49,8 +49,8 @@ export function Meter(props: MeterProps): JSX.Element {
       role="meter"
       aria-label={props.label}
       aria-valuemin={0}
-      aria-valuemax={props.max}
-      aria-valuenow={props.value}
+      aria-valuemax={meterAria(props.value, props.max).max}
+      aria-valuenow={meterAria(props.value, props.max).now}
     >
       {bars()}
     </svg>

package/src/components/PageHeader.tsx

@@ -6,6 +6,7 @@ import type { JSX } from 'solid-js';
 import { cx } from '../cx';
 import { Breadcrumb, type BreadcrumbItem } from './Breadcrumb';
 import { type HeadingLevel, headingTag } from './heading-level';
+import { headingNode } from './heading-node';
 import styles from './PageHeader.module.scss';
 
 export interface PageHeaderProps {
@@ -24,7 +25,9 @@ export interface PageHeaderProps {
 }
 
 export function PageHeader(props: PageHeaderProps): JSX.Element {
-  const Heading = headingTag(props.level ?? 1);
+  // Resolved once, so an off-scale level throws `X_UI_INVALID_VALUE` here as it always did.
+  const heading = headingTag(props.level ?? 1);
+  const title = (): string => props.title;
 
   return (
     <header class={cx(styles['pageHeader'], props.class)}>
@@ -33,7 +36,7 @@ export function PageHeader(props: PageHeaderProps): JSX.Element {
         <div class={styles['titles']}>
           {props.media === undefined ? null : <div class={styles['media']}>{props.media}</div>}
           <div class={styles['text']}>
-            <Heading class={styles['title']}>{props.title}</Heading>
+            {headingNode(heading, { class: styles['title'] }, title)}
             {props.description === undefined ? null : (
               <p class={styles['description']}>{props.description}</p>
             )}

package/src/components/Popover.module.scss

@@ -33,27 +33,24 @@
   inset-block-start: 0;
 }
 
-.align-start {
-  inset-inline-start: 0;
-}
-
-.align-end {
-  inset-inline-end: 0;
-}
-
-.align-center {
-  inset-inline-start: 50%;
-  translate: -50% 0;
-}
+// Alignment is along the anchor's inline edge, so it exists only for the block placements. An
+// inline placement owns both inline insets itself; an align rule that reached it (and the reset
+// that used to undo one) wiped the placement's own inset and dropped the panel over the anchor.
+.placement-block-end,
+.placement-block-start {
+  &.align-start {
+    inset-inline-start: 0;
+  }
 
-// Inline placements own their own inline axis; alignment must not fight them.
-.placement-inline-end,
-.placement-inline-start {
-  &.align-start,
-  &.align-center,
   &.align-end {
-    inset-inline-start: auto;
-    inset-inline-end: auto;
-    translate: none;
+    inset-inline-end: 0;
+  }
+
+  // Auto margins inside an inset band far wider than any panel: centred in either direction. A 50%
+  // logical inset with a -50% physical translate is a whole width off under `dir="rtl"`.
+  &.align-center {
+    inset-inline: -100vw;
+    margin-inline: auto;
+    inline-size: fit-content;
   }
 }

package/src/components/Popover.tsx

@@ -1,9 +1,9 @@
 // Non-modal anchored panel. Positioning is CSS-only (a relatively positioned
-// anchor plus logical insets), so there is no measure/reflow loop and the panel
-// flips sides automatically under `dir="rtl"`.
+// anchor plus logical insets and auto-margin centring), so there is no measure/reflow
+// loop and the panel mirrors under `dir="rtl"` — `rtl-sheets.test.ts` holds that.
 
 import type { JSX } from 'solid-js';
-import { createFocusTrap, useId } from '../a11y';
+import { focusTrap, useId } from '../a11y';
 import { cx } from '../cx';
 import { solid } from '../theme/solid-adapter';
 import styles from './Popover.module.scss';
@@ -13,11 +13,14 @@ export type Placement = 'block-end' | 'block-start' | 'inline-end' | 'inline-sta
 export interface PopoverProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  /** The anchor. Wire its onClick to `onOpenChange` in the caller. */
+  /**
+   * The anchor. Wire its onClick to `onOpenChange` in the caller. `aria-controls` is present only
+   * while the panel is mounted: an IDREF to an element not in the document names nothing.
+   */
   trigger: (control: {
     id: string;
     'aria-expanded': boolean;
-    'aria-controls': string;
+    'aria-controls': string | undefined;
   }) => JSX.Element;
   children: JSX.Element;
   /** Already-translated accessible name for the panel. */
@@ -47,7 +50,7 @@ export function Popover(props: PopoverProps): JSX.Element {
     // Closing unmounts the panel with focus inside it, which drops focus to <body> and makes the
     // next Tab restart at the top of the document. The trap moves focus into the panel on open and
     // hands it back to the trigger on close.
-    const trap = panel === undefined ? undefined : createFocusTrap(panel);
+    const trap = panel === undefined ? undefined : focusTrap(panel);
     trap?.activate();
     rt.onCleanup(() => {
       document.removeEventListener('pointerdown', onPointerDown, true);
@@ -63,7 +66,11 @@ export function Popover(props: PopoverProps): JSX.Element {
         root = el;
       }}
     >
-      {props.trigger({ id: triggerId, 'aria-expanded': props.open, 'aria-controls': panelId })}
+      {props.trigger({
+        id: triggerId,
+        'aria-expanded': props.open,
+        'aria-controls': props.open ? panelId : undefined,
+      })}
       {props.open ? (
         <div
           ref={(el: HTMLDivElement) => {

package/src/components/Section.tsx

@@ -6,6 +6,7 @@ import type { JSX } from 'solid-js';
 import { useId } from '../a11y';
 import { cx } from '../cx';
 import { type HeadingLevel, headingTag } from './heading-level';
+import { headingNode } from './heading-node';
 import styles from './Section.module.scss';
 
 export interface SectionProps {
@@ -23,33 +24,51 @@ export interface SectionProps {
 }
 
 export function Section(props: SectionProps): JSX.Element {
-  const Tag = props.as ?? 'section';
-  const Heading = headingTag(props.level ?? 2);
+  // Resolved once, so an off-scale level throws `X_UI_INVALID_VALUE` here as it always did.
+  const heading = headingTag(props.level ?? 2);
   const titleId = useId('section');
-
-  return (
-    <Tag
-      class={cx(styles['section'], props.class)}
-      aria-labelledby={props.title === undefined ? undefined : titleId}
-    >
-      {props.title === undefined && props.actions === undefined ? null : (
-        <div class={styles['head']}>
-          <div class={styles['text']}>
-            {props.title === undefined ? null : (
-              <Heading id={titleId} class={styles['title']}>
-                {props.title}
-              </Heading>
-            )}
-            {props.description === undefined ? null : (
-              <p class={styles['description']}>{props.description}</p>
-            )}
-          </div>
-          {props.actions === undefined ? null : (
-            <div class={styles['actions']}>{props.actions}</div>
+  const cls = (): string => cx(styles['section'], props.class);
+  const labelledBy = (): string | undefined => (props.title === undefined ? undefined : titleId);
+  const title = (): string | undefined => props.title;
+  const head = (): JSX.Element =>
+    props.title === undefined && props.actions === undefined ? null : (
+      <div class={styles['head']}>
+        <div class={styles['text']}>
+          {props.title === undefined
+            ? null
+            : headingNode(heading, { id: titleId, class: styles['title'] }, title)}
+          {props.description === undefined ? null : (
+            <p class={styles['description']}>{props.description}</p>
           )}
         </div>
-      )}
-      <div class={styles['body']}>{props.children}</div>
-    </Tag>
-  );
+        {props.actions === undefined ? null : <div class={styles['actions']}>{props.actions}</div>}
+      </div>
+    );
+  const body = (): JSX.Element => <div class={styles['body']}>{props.children}</div>;
+
+  // One intrinsic per case, never `const Tag = props.as; <Tag>`: the island build compiles a
+  // capitalised tag to `createComponent(Tag)` and calls the string (#488, `intrinsic-root.test.ts`).
+  switch (props.as ?? 'section') {
+    case 'article':
+      return (
+        <article class={cls()} aria-labelledby={labelledBy()}>
+          {head()}
+          {body()}
+        </article>
+      );
+    case 'aside':
+      return (
+        <aside class={cls()} aria-labelledby={labelledBy()}>
+          {head()}
+          {body()}
+        </aside>
+      );
+    case 'section':
+      return (
+        <section class={cls()} aria-labelledby={labelledBy()}>
+          {head()}
+          {body()}
+        </section>
+      );
+  }
 }

package/src/components/Stack.tsx

@@ -28,22 +28,63 @@ const ALIGN: Readonly<Record<Align, string>> = {
 };
 
 export function Stack(props: StackProps): JSX.Element {
-  const Tag = props.as ?? 'div';
-  return (
-    <Tag
-      class={cx(
-        styles['stack'],
-        styles[`direction-${props.direction ?? 'column'}`],
-        props.wrap === true && styles['wrap'],
-        props.class,
-      )}
-      style={{
-        '--stack-gap': `var(--space-${props.gap ?? 4})`,
-        '--stack-align': ALIGN[props.align ?? 'stretch'],
-        '--stack-justify': ALIGN[props.justify ?? 'start'],
-      }}
-    >
-      {props.children}
-    </Tag>
-  );
+  const cls = (): string =>
+    cx(
+      styles['stack'],
+      styles[`direction-${props.direction ?? 'column'}`],
+      props.wrap === true && styles['wrap'],
+      props.class,
+    );
+  const style = (): JSX.CSSProperties => ({
+    '--stack-gap': `var(--space-${props.gap ?? 4})`,
+    '--stack-align': ALIGN[props.align ?? 'stretch'],
+    '--stack-justify': ALIGN[props.justify ?? 'start'],
+  });
+
+  // One intrinsic per case, never `const Tag = props.as; <Tag>`: the island build compiles a
+  // capitalised tag to `createComponent(Tag)` and calls the string (#488, `intrinsic-root.test.ts`).
+  switch (props.as ?? 'div') {
+    case 'ul':
+      return (
+        <ul class={cls()} style={style()}>
+          {props.children}
+        </ul>
+      );
+    case 'ol':
+      return (
+        <ol class={cls()} style={style()}>
+          {props.children}
+        </ol>
+      );
+    case 'nav':
+      return (
+        <nav class={cls()} style={style()}>
+          {props.children}
+        </nav>
+      );
+    case 'section':
+      return (
+        <section class={cls()} style={style()}>
+          {props.children}
+        </section>
+      );
+    case 'header':
+      return (
+        <header class={cls()} style={style()}>
+          {props.children}
+        </header>
+      );
+    case 'footer':
+      return (
+        <footer class={cls()} style={style()}>
+          {props.children}
+        </footer>
+      );
+    case 'div':
+      return (
+        <div class={cls()} style={style()}>
+          {props.children}
+        </div>
+      );
+  }
 }

package/src/components/Table.module.scss

@@ -75,3 +75,33 @@
 .striped :global(tbody tr:nth-child(even) td) {
   background: t.role('bg-soft', 0.6);
 }
+
+// The first column stays at the inline start while the scroller moves the rest. A sticky cell
+// needs an opaque background or the scrolled cells show through it; the edge line is a border,
+// not an inset shadow, because a border is logical and mirrors under RTL by itself.
+.table[data-sticky-first] :global(:is(th, td):first-child) {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: t.z(raised);
+  background-color: t.role('surface');
+  border-inline-end: 1px solid t.role('line');
+}
+
+.table[data-sticky-first] :global(th:first-child) {
+  background-color: t.role('bg-soft');
+}
+
+// The corner cell is sticky on both axes, so it must sit above both the header row and the column.
+.sticky[data-sticky-first] :global(thead th:first-child) {
+  z-index: t.z(sticky);
+}
+
+.sticky[data-sticky-first] :global(thead th:not(:first-child)) {
+  z-index: t.z(raised);
+}
+
+// A striped row keeps its stripe on the pinned cell: the translucent stripe laid over the opaque
+// surface, so the stripe shows and the scrolled cells still do not.
+.striped[data-sticky-first] :global(tbody tr:nth-child(even) td:first-child) {
+  background: linear-gradient(t.role('bg-soft', 0.6), t.role('bg-soft', 0.6)), t.role('surface');
+}

package/src/components/Table.tsx

@@ -1,6 +1,6 @@
-// Presentational table. Owns two things every hand-rolled table gets wrong:
-// a sticky header, and horizontal overflow contained inside the table's own
-// scroll container so the page body never scrolls sideways.
+// Presentational table. Owns what every hand-rolled table gets wrong: a sticky header, a first
+// column that stays put while the rest scrolls, and horizontal overflow contained inside the
+// table's own scroll container so the page body never scrolls sideways.
 
 import type { JSX } from 'solid-js';
 import { cx } from '../cx';
@@ -13,6 +13,14 @@ export interface TableProps {
   /** Hide the caption visually while keeping it for assistive tech. */
   hideCaption?: boolean | undefined;
   stickyHeader?: boolean | undefined;
+  /** Pins the first column at the inline start while the table scrolls sideways. Off by default. */
+  stickyFirstColumn?: boolean | undefined;
+  /**
+   * Declares `role="table"` on the element itself. For a caller that restyles the table's
+   * `display` (DataTable's card view): WebKit drops a table's semantics once `display` changes,
+   * and the explicit role is what keeps it a table. The rows and cells are the caller's to mark.
+   */
+  explicitRoles?: boolean | undefined;
   density?: 'comfortable' | 'compact' | undefined;
   /** Zebra striping. Off by default — a border is usually enough. */
   striped?: boolean | undefined;
@@ -27,6 +35,9 @@ export function Table(props: TableProps): JSX.Element {
     // inside it — and a <section> with no name is generic, so the table keeps its own caption.
     <section class={cx(styles['scroller'], props.class)} tabindex="0">
       <table
+        role={props.explicitRoles === true ? 'table' : undefined}
+        // An attribute, not a class: it is state the stylesheet and a test both read.
+        data-sticky-first={props.stickyFirstColumn === true ? '' : undefined}
         class={cx(
           styles['table'],
           styles[`density-${props.density ?? 'comfortable'}`],

package/src/components/Tabs.module.scss

@@ -18,11 +18,17 @@
     border-inline-end: 1px solid t.role('line');
   }
 
+  // On the list's inline-END edge, beside its border. A shadow's x offset is physical, so RTL —
+  // where that edge is the left one — gets the mirrored sign, as `Switch.module.scss` does.
   .tab[aria-selected='true'] {
     box-shadow: inset calc(-1 * #{t.stroke(thick)}) 0 0 0 t.role('accent');
   }
 }
 
+[dir='rtl'] .orientation-vertical .tab[aria-selected='true'] {
+  box-shadow: inset t.stroke(thick) 0 0 0 t.role('accent');
+}
+
 .list {
   @include t.custom-scrollbar;
   display: flex;

package/src/components/Tabs.tsx

@@ -2,7 +2,7 @@
 // between them, Home/End jump to the ends, and arrow direction follows `dir`.
 
 import type { JSX } from 'solid-js';
-import { ariaBool, createRovingTabindex, useId } from '../a11y';
+import { ariaBool, rovingTabindex, useId } from '../a11y';
 import { cx } from '../cx';
 import { TAB_SELECTOR, tabStopIndex } from '../roving';
 import { useUi } from '../theme/context';
@@ -35,7 +35,7 @@ export function Tabs(props: TabsProps): JSX.Element {
   // A disabled tab is excluded from BOTH answers — the list arrows walk and the one tab that
   // carries the tab stop — because `focus()` on a disabled button silently does nothing, so a
   // disabled tab left in the list pins the reducer on its index and hides every tab after it.
-  const onKeyDown = createRovingTabindex(
+  const onKeyDown = rovingTabindex(
     () => (list === undefined ? [] : Array.from(list.querySelectorAll<HTMLElement>(TAB_SELECTOR))),
     { orientation: props.orientation ?? 'horizontal', dir: ui.dir },
   );

package/src/components/Text.tsx

@@ -37,21 +37,47 @@ export interface TextProps {
 }
 
 export function Text(props: TextProps): JSX.Element {
-  const Tag = props.as ?? 'span';
-
+  const cls = (): string =>
+    cx(styles['text'], styles[`tone-${props.tone ?? 'default'}`], props.class);
   // Size and weight are set only when asked for: unset means inherit, so <Text>
   // inside a heading or a caption does not silently reset to the body scale.
-  return (
-    <Tag
-      class={cx(styles['text'], styles[`tone-${props.tone ?? 'default'}`], props.class)}
-      style={{
-        ...(props.size === undefined ? {} : { '--text-scale': `var(--text-${props.size})` }),
-        ...(props.weight === undefined
-          ? {}
-          : { '--text-strength': `var(--weight-${props.weight})` }),
-      }}
-    >
-      {props.children}
-    </Tag>
-  );
+  const style = (): JSX.CSSProperties => ({
+    ...(props.size === undefined ? {} : { '--text-scale': `var(--text-${props.size})` }),
+    ...(props.weight === undefined ? {} : { '--text-strength': `var(--weight-${props.weight})` }),
+  });
+
+  // One intrinsic per case, never `const Tag = props.as; <Tag>`: the island build compiles a
+  // capitalised tag to `createComponent(Tag)` and calls the string (#488, `intrinsic-root.test.ts`).
+  switch (props.as ?? 'span') {
+    case 'p':
+      return (
+        <p class={cls()} style={style()}>
+          {props.children}
+        </p>
+      );
+    case 'div':
+      return (
+        <div class={cls()} style={style()}>
+          {props.children}
+        </div>
+      );
+    case 'strong':
+      return (
+        <strong class={cls()} style={style()}>
+          {props.children}
+        </strong>
+      );
+    case 'em':
+      return (
+        <em class={cls()} style={style()}>
+          {props.children}
+        </em>
+      );
+    case 'span':
+      return (
+        <span class={cls()} style={style()}>
+          {props.children}
+        </span>
+      );
+  }
 }

package/src/components/Textarea.tsx

@@ -28,11 +28,13 @@ export interface TextareaProps {
 /**
  * `<textarea>` has NO `value` attribute — its value is its text content, and the parser drops the
  * attribute silently, so `value={…}` rendered every admin edit box empty whatever the row held.
- * The leading newline is the serializer's, not the value's: the HTML parser strips exactly one
- * newline after `<textarea>`, so emitting it unconditionally is what makes a value that itself
- * starts with a newline survive the round trip.
+ * On the SERVER the leading newline is the serializer's, not the value's: the HTML parser strips
+ * exactly one newline after `<textarea>`, so emitting it unconditionally is what makes a value that
+ * itself starts with a newline survive the round trip. In a BROWSER no parser runs — an island
+ * builds the element — so the value is the `.value` property, and the newline would be data.
  */
 export function Textarea(props: TextareaProps): JSX.Element {
+  const onServer = typeof document === 'undefined';
   return (
     <textarea
       class={cx(styles['textarea'], props.autoGrow === true && styles['autoGrow'], props.class)}
@@ -49,8 +51,9 @@ export function Textarea(props: TextareaProps): JSX.Element {
       aria-invalid={ariaBool(props['aria-invalid'])}
       onInput={props.onInput}
       onBlur={props.onBlur}
+      value={onServer ? undefined : (props.value ?? '')}
     >
-      {`\n${props.value ?? ''}`}
+      {onServer ? `\n${props.value ?? ''}` : undefined}
     </textarea>
   );
 }

package/src/components/Toaster.tsx

@@ -15,7 +15,7 @@ import { Button } from './Button';
 import { Toast, type ToastPlacement, ToastRegion } from './Toast';
 
 export interface ToasterProps {
-  /** The queue. One per app — `createToastStore()` in the island that mounts this. */
+  /** The queue. One per app — `toastStore()` in the island that mounts this. */
   store: ToastStore;
   /** Already-translated landmark name, e.g. "Notifications". */
   label: string;

package/src/components/Toolbar.tsx

@@ -5,7 +5,7 @@
 // own arrow keys, so making the strip a single stop would strand every control past it.
 
 import type { JSX } from 'solid-js';
-import { createRovingTabindex, focusableWithin } from '../a11y';
+import { focusableWithin, rovingTabindex } from '../a11y';
 import { cx } from '../cx';
 import { useUi } from '../theme/context';
 import styles from './Toolbar.module.scss';
@@ -27,12 +27,13 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
   let strip: HTMLDivElement | undefined;
 
   // Arrows follow the writing direction; `focusableWithin` skips anything hidden or disabled, and
-  // `createRovingTabindex` declines outright while a control that answers arrows itself — the
+  // `rovingTabindex` declines outright while a control that answers arrows itself — the
   // search Input this strip exists to hold — has focus.
-  const onKeyDown = createRovingTabindex(
-    () => (strip === undefined ? [] : focusableWithin(strip)),
-    { orientation: 'horizontal', dir: ui.dir, loop: false },
-  );
+  const onKeyDown = rovingTabindex(() => (strip === undefined ? [] : focusableWithin(strip)), {
+    orientation: 'horizontal',
+    dir: ui.dir,
+    loop: false,
+  });
 
   return (
     <div

package/src/components/Tooltip.module.scss

@@ -9,8 +9,13 @@
   @include t.transition(opacity, translate);
   position: absolute;
   z-index: t.z(tooltip);
-  inset-inline-start: 50%;
-  translate: -50% t.space(1);
+  // Centred over the trigger in either direction: auto margins inside an inset band far wider than
+  // any bubble. A 50% logical inset with a -50% physical translate lands a whole width off-centre
+  // under `dir="rtl"` (`rtl-sheets.test.ts`).
+  inset-inline: -100vw;
+  margin-inline: auto;
+  inline-size: max-content;
+  translate: 0 t.space(1);
   max-inline-size: 18rem;
   padding-block: t.space(1);
   padding-inline: t.space(2);
@@ -36,6 +41,6 @@
 // Hover and keyboard focus both reveal it — a hover-only tooltip is inaccessible.
 .wrap:hover .bubble,
 .wrap:focus-within .bubble {
-  translate: -50% 0;
+  translate: 0 0;
   opacity: 1;
 }